teleren/devto huggingface dataset:
How will COVID change the App Industry?
Tags: webdev, covid, discuss, ios
Published: 2020-03-15 16:20:36

Hey guys, just wanted to gather some of your thoughts on how this COVID will change the way the Apps Industry as we know it today.

Here are a few of my thoughts:

1. #WFH is now a trending topic,
>remote work has been around for decades on Freelancers or Software Devs,
but it's now being imposed across multiple industries, leading the list = Education.

>Apps like Slack, Workplace, Meets, Skype even Monday for the remote newbies. Google Classroom is now the geek friend everybody likes.

2. Apple vs Google AppMarkets
>If you are a new startup, and this is your first launch on iOS, then, sorry timing couldn't be worst for you.

>Last week, an app review for Apple could vary from 24 to 48 hours in total.
>Today, Apple has prioritized COVID Apps, and small startups are queued for +72 hours already.

> While Google, has not stated a policy on COVID apps yet.
Their "report first, check later" policy offers app devs a faster way out for niche COVID apps (and updates).

3. Next.js -like techs ... will it finally become a starting point for Startups and Lean Development?

4. Advertising is supposed to decline, but is it really?

5. Community Apps will rise, Discord will become mainstream word for Crowd Management.

Let me hear your thoughts on how the App Industry will be affected this 2020.
Vue JS: Generic list
Tags: vue, javascript, slotscope, list
Published: 2020-03-15 16:05:15

---
title: Vue JS: Generic list
published: true
description: This time we are goint to build a generic list that delegates item rendering.
tags: vue, javascript, slot-scope, list
cover_image: https://i.blogs.es/99f0c0/vue/450_1000.png
series: vue examples
---
During these days i have been working on my personal website. Next step on my pending task list was migrating my current usefull links list to the new website.

But i think that it would be a nice idea making a little component on vue like my [previous post](https://dev.to/mandrewcito/vue-js-draggable-div-3mee).  Because a list render is something that i can reuse on  a lot of comopnents of my website. This component will be a generic list that delegates item rendering on another component.

My personal website is a functional site so i'm using bootstrap for css dealing. Component will be same apperance and behaviour than current util list on my [website](https://mandrewcito.github.io/). 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w1hki0v7z98ddq0sftnj.PNG)

So, hands on, we start implementation.

### Generic list component

This component is simple, it receives a list via props attribute  and iterates over it. If there is not any element it show a text. If there are elements it delegates rendering on slot tag.

```vue
<template>
  <ul v-if="items.length" class="list-group">
    <li v-for="(item, index) in items" v-bind:key="index" class="list-group-item">
       <slot :item="item"></slot>
    </li>
  </ul>
  <p v-else>This view has no items.</p>
</template>

<script>
export default {
  props: {
    items: Array
  }
}
</script>

<style>
...
</style>

```


### Link item

Item component could be something like this

```vue
<template>
<a :href="item.url">
 {{item.url}}
</a>
</template>

<script>
export default {
  props: {
    item: undefined
  }
}
</script>

<style>
...
</style>

```

### Example of use 

Okey, i believe you. But how i can use it?

```vue
<template>
    <ListContainer :items="links">
      <LinkItem slot-scope="row" :item="row.item"></LinkItem>
    </ListContainer>
</template>

<script>
import ListContainer from '../components/common/ListContainer'
import LinkItem from '../components/utilities/LinkItem'
export default {
  components: {
    ListContainer,
    LinkItem
  }
...
}
</script>
<style>
</style>
```

Result is the same like my personal website. But this implementation  has a advantage. I can reuse my list container in my app only implementing list item render.

Here is a gif showing the component. It works filtering a items list with the form input field.

![Example gif search list](https://media.giphy.com/media/kyoCY3hwii3NllpNmz/giphy.gif)

# References 
* [vue list rendering](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for)
* [slot-scope vue ref](https://es.vuejs.org/v2/guide/components-slots.html#Destructurando-al-slot-scope)
Getting started with React Native
Tags: reactnative, javascript, mobileapp, expo
Published: 2020-03-15 12:20:17

This is a introductory blog post for React Native Here we will learn how we can setup react native environment and we will run a simple program with react native.
# Lets get Started
There are different ways to we can setup and run react native application on but here we will be using Expo for creating our react native app and we will using expo’s client application on mobile phone to run react native application but first lets see what is react native.
# React Native
React native is a Javascript framework that allows you to create mobile apps it provide rich mobile user interface with the help of declarative components. The application we build with react native doesnot uses webview but rather it uses same fundamental User Interface building blocks as Android or IOS. React native helps create Crossplatform native mobile application using Javascript.
![React native app](https://miro.medium.com/max/776/0*4ZkEOyGd0nOrcCLu.png)
# Expo
According to their website “ Expo is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React”. Expo is not a programming language nor it is a framework rather it is toolchain. Expo is a set of tools, libraries and services you can use to build native iOS and Android apps faster than ever before.
![Expo Website snapshot](https://miro.medium.com/max/1343/1*41Feh0Jsm-X5scw8-6qZ_A.png)
# Installation
*npm install -g expo-cli*
You run the above command on your cmd but you must have nodejs installed if you don’t have node js installed go to https://nodejs.org/en/ and download node js then run above command
# Creating Project
*expo init*
Once you have installed expo-cli then go to the directory where you want to build application then type above command after this it will ask you to enter name of project and whether you want a blank project or a tab based template for now we will chose blank project.
# Downloading Expo Client for Mobile
![Expo Mobile App](https://miro.medium.com/max/720/1*lmLRUlTsPAzbiJ0NIfTJXQ.jpeg)
# Running Project
*expo start*
Once you have created project then type command above it will show QR code and IP address that you can use in Expo mobile app to run the application
# Your First React Native Application
![First React Native App](https://miro.medium.com/max/720/1*UeHpoiQ9v0K5TjSUO-90yg.jpeg)
This was an introductory blog post on react native in next post we would discuss how we can create custom application and will create a simple login app and will understand the basic concept of component states and props if you want to explore more go to https://facebook.github.io/react-native/docs/getting-started this is official react native documentation
See you people soon until then
Happy Coding <3
tsParticles v1.10.2 released
Tags: javascript, typescript, showdev, opensource
Published: 2020-03-15 15:57:00

# New tsParticles version released, 1.10.2.

## Release notes

- Fixed polygon mask with the new `enable` flag
- Improved support for external fonts
- Fixed font with spaces loading
- Prepared everything for [react-particles-js](https://github.com/Wufe/react-particles-js) integration
- New FontAwesome demo in project

--

Checkout the new FontAwesome demo here:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

Here are some demos!

## Characters as particles

[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.matteobruni.it/#chars)

---

## Mouse hover connections


[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.matteobruni.it/#connect)

---

## Polygon mask

[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.matteobruni.it/#mask)

---

#### Background Mask particles

[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.matteobruni.it/#background)

---

#### COVID-19 SARS-CoV-2 particles

[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.matteobruni.it/#virus)

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*

--

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

---

Feel free to contribute to the project!
VS Code Productivity Booster: CMD-SHIFT-L to Select All Instances of the Current Selection and Edit with Multiple Cursors
Tags: webdev, vscode, ide, productivity
Published: 2020-03-15 15:33:24

---
title: VS Code Productivity Booster: CMD-SHIFT-L to Select All Instances of the Current Selection and Edit with Multiple Cursors
published: true
description: Increase your VS Code productivity with the ability to select all instances and edit with multiple cursors.
tags: webdev, vscode, ide, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lf5p0msz39wl2m3484q3.gif
---

Super quick VS Code tip! 

CMD-SHIFT-L (or CTRL-SHIFT-L for Windows) is a great productivity booster for VS Code. Lets you select all instances of the current selection and edit with multiple cursors!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lf5p0msz39wl2m3484q3.gif)
day 6/100 => 100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-03-15 15:15:37

Goal: Complete flutter-dart-to-build-ios-android-apps from Udemy

Today's Progress:

masih Belajar tentang adaptive dan responsive layout,
belajar tentang adaptive untuk Ios dan Android seperti widget Switch.adaptive, CupertinoPageScaffold , CupertinoIcons

https://twitter.com/triyono__
https://github.com/triyono777/100-days-of-code/blob/master/log.md


yesterday progress 

days 5/100 
masih Belajar tentang adaptive dan responsive layout,
MediaQuery.of(context).viewInsets.bottom
MediaQuery.of(context).orientation == Orientation.landscape;
Appy Dev
Tags: javascript, vue, frontend, nuxt
Published: 2020-03-15 15:02:28

---
title: Appy Dev
published: true
description: Made a UI for my bookmarks
tags: javascript, vue, frontend, nuxt
---

I made a ui for my bookmarks I have collected over the years. It has over 200+ apps, tools, & resources.

https://appy-dev.netlify.com/
My first post
Tags: myfirstpost, news
Published: 2020-03-15 14:25:32

#Hello
###Its my first post on dev community
My Insta acc [Aishwaryaj23](https://www.instagram.com/aishwarya_j23/)
My YT channel [AishwaryaJ23](https://youtu.be/YWaYmw0e9BE)
#Go to links and enjoy !
Built a tool for iOS developers to help making texts accessible for everyone
Tags: showdev, a11y, swift, ios
Published: 2020-03-15 14:19:38


#### Prelude

iOS offers amazing text accessibility options thanks to [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically?language=swift). This is basically set of predefined font styles by Apple that takes into account font settings set globally for iOS.

It is simple to use. Let’s say in my fictional app there is some headline content and I want it to stand out from the rest of the text. The traditional way would be to sent static font size, maybe 36pt and semibold style. The Dynamic Type way is to set Text Style to maybe `Title 1` and let system take care of the rest.

With Dynamic Type you don’t define sizes and weights to your text but instead specify what they signify. We have options to set body style, caption style and so much more. It is also automatically updated if you allow it either in Interface Builder or in code.

If you use Dynamic Type in your app, you don’t have to do much else to have really accessible text for your users. System will automatically adjust sizes.

It is not there only for visually impaired folks, some prefer smaller sizes so more text can be display. With Dynamic Type system will take care of this as well.

## Dynamic Type Reference

I hope I managed to outline the main benefits of Dynamic Type. One of the barrier of using it may be that you don’t necessarily know how will the less used styles scale either up or down. It is easy to remember how will `Body` or `Title 1` look across different scales but less so for styles like `Callout` or `Caption 2`.

That is why I built my Dynamic Type Reference app. Together with Accessibility Inspector on your Mac you can run it in simulator and easily preview different styles with different sizes. Check out the GIF below:

![Dynamic Type Reference app in action](https://dev-to-uploads.s3.amazonaws.com/i/d7rs2ost8fg4m1tajj2p.gif)

There is also option to preview custom text. The app is available as open source [on GitHub](https://github.com/nemecek-filip/DynamicType-ReferenceApp).

I will be happy if it helps you making your app **more accessible** to variety of folks.

_If you have any questions, comments or suggestions please let me know either here, on GitHub or via [Twitter](https://twitter.com/nemecek_f)._

Thanks for reading!

{% link https://dev.to/nemecek_f/i-built-a-tool-to-quickly-preview-all-ios-keyboards-4if %}
How to generate an ID for Array sequentially ?!
Tags: javascript, tutorial, webdev, vue
Published: 2020-03-15 14:01:45


All of us need to create objects or arrays to store different things at different times.
One of the important things in this section is to create a proper ID that will make the array more regular and easier to access to each component.
In different cases and depending on different conditions, the process of ID production may be different, But sequential ID generation is mostly used.

![alt text](https://miro.medium.com/max/1965/1*2Y85nsZ2jXdKdw03h_jeeQ.png "CodePic")
######This statement creates the next target ID by taking the length of the array and obtaining ID of the last index.

>This is the first post that I’m writing in "Dev.to" and I hope to continue :)
If you found it useful, you can follow me and also visit [my website](http://mohsenfallah.ir), because there are more ways to connect with me. I hope this would help you to improve your coding skills. Thank you for your attention.
___
_This article was originally published on The [Dev.to](https://dev.to/mohsenfallahnjd) on March 15, 2020 and was written by **Mohsen Fallahnejad**._
How I Built a GitHub Portfolio Site the Easy Way
Tags: github, jekyll, showdev
Published: 2020-03-15 13:50:09

> *Quickly create a personal website that showcases your work as a software developer.*

This is a quick summary of how I built https://jhermann.github.io/about-me/ using GitHub's `personal-website` Jekyll template. You can see the end result at that URL, or in the article's cover image, with a dark style applied.

## Initial Setup

After forking the [personal-website](https://github.com/github/personal-website) template repository, I cloned it to my disk and installed a local copy of Jekyll.

For that, I called these commands in my working directory, installing everything into my home directory:

```sh
gem install --user-install jekyll bundler
bundle config set path "$(ruby -r rubygems -e 'puts Gem.user_dir')"
bundle install
```

Next I started the local web server like so:

```sh
bundle exec jekyll serve
```

The server is then available at `http://localhost:4000`. For many changes, e.g. styling and layout ones, that server will rebuild the site almost instantly. However, some changes e.g. to `_config.yml` will require a full restart by pressing Ctrl-C and repeating the above command.

## Making the Template Site My Own

Some of the data in the sidebar, including the avatar, was fetched from my GitHub account data. To complete the sidebar, I added social accounts to the configuration, as described in the README.

The content on the right side has two sections.

* The *project list* is also fetched from the API, I just had to set the `stars` sort order, define a limit on the number of cards, and add filter conditions to hide some repositories.
* The *list of interests / topics* I changed via the configuration, with a name, URL, and image for each entry. I created the images myself using `InkScape`, so they nicely fit together.

Every time I push a change I previewed locally, the site gets rebuilt by GitHub. I had to enable that in “Settings › Options › GitHub Pages”, setting the source to the `master` branch.

For more customization, the [Jekyll docs](https://jekyllrb.com/docs/) cover all the details not mentioned in the README.
Jurassic Park code
Tags: pascal
Published: 2020-03-15 13:48:10

*/Jurassic Park Main Modules/
*/
*/ Call Libs
Include: biostat.sys
Include: sysrom.vst
Include: net.sys Include:
pwr.mdl
*/
*/Initialize
SetMain [42]2002/9A{total CoreSysop %4 [vig. 7*tty]}
if ValidMeter(mH) (**mH).MeterViS return
Term Call 909 c.lev {void MeterVis $303} Random(3#*MaxFid)
on SetSystem(!Dn) set shp_val.obi to lim(Val{d}SumVal 
if SetMeter(mH) (**mH).ValdidMeter(Vdd) return
on SetSystem(!Telcom) set mxcpl.obj to lim(Val{pdl}NextVal
Mini Solutions Series #2: Missing Box Shadow
Tags: css, html, design, frontend
Published: 2020-03-15 13:41:03

*This is the second installment of a collection of short summaries of the solutions that I found to bugs in my code. I want to document some of these solutions for my own sanity (so I can remember challenges that I've overcome in the past), and in the hopes that someone googling for an answer in the future will find their own solution more quickly this way. I'll include a few keyword and phrasing variations that someone might use in their search.*

##BUG: 

"why no box shadow" or "box shadow missing on header" or "can't see box shadow" or "css no box shadow on div" or "box-shadow no effect"

![fail](https://thumbs.gfycat.com/BaggyCelebratedHusky.webp)

##Detailed Description: 

Super straightforward. I wanted a typical box-shadow on the header for a [design](https://gunderodd.github.io/corn_experience_design/) that I was working on tonight, and it just wasn't showing up.

###Experiments:

I added a border to the header, and that worked, fine.

I added the same box-shadow to other elements, which also worked fine, and ruled out a syntax error. 

I backtracked and noticed that my original mobile header _did_ show a shadow under the header, but not after responsive design changes for a desktop format. I began googling, which led me to try a few more things that didn't work as I intended.

##Solution:

[Quick answer](https://stackoverflow.com/questions/13772427/shadow-not-showing-up/13772549). 

###Thorough Explanation:

A longer answer isn't really required, but here is a video for more on z-indexes if you are thirsty for knowledge.

{% youtube k4taTzkhzHc %}

##Takeaway:

Background images can cover up box shadows. Raising a div in the visual hierarchy with a z-index can plop it back on top, revealing the drop shadow that was working but hidden. To use a z-index, an element must have fixed, absolute, or relative positioning as opposed to the default static setting. The specific number 10 was arbitrary, in this case, and 2 or 1000 would also work just fine.

So, 
```
position: relative;
z-index: 10;
```
 is the code that fixed my problem.
Dictionary APIs
Published: 2020-03-15 13:29:24

Some time back I worked on a educational app. The app was targeted towards non native English learners. The app used a [dictionary api](https://blog.api.rakuten.net/top-10-best-books-apis/) for suggesting synonym, and antonyms. Finding a good dictionary API was the first step in this process. Here is a list of dictionary apis I found useful.

##Dictionary API
Get words definitions, associations, difficulty level, sentence examples, synonyms.

##Oxford Dictionaries API
Get word definitions, example sentences, parts of speech, and many more.

##Urban Dictionary API
Urban Dictionary is an online dictionary that provides definitions for slang words and phrases, based on the crowdsourced information.

##Word Dictionary API
Next up is Word Dictionary API developed by Twinword. Twinword develops multiple APIs for analyzing and understanding human inputs and online behavior patterns.
error while ng new <project name>
Published: 2020-03-15 13:22:52


npm ERR! Unexpected end of JSON input while parsing near '...qBaKrHcp0BI39s21+YtEW'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\....\AppData\Roaming\npm-cache\_logs\2020-03-15T13_16_33_333Z-debug.log
× Package install failed, see above.
The Schematic workflow failed. See above.

Details from Log file::

2585 silly saveTree +-- tslint@5.18.0
2585 silly saveTree +-- typescript@3.7.5
2585 silly saveTree `-- zone.js@0.10.2
2586 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...qBaKrHcp0BI39s21+YtEW'
2586 verbose stack     at JSON.parse (<anonymous>)
2586 verbose stack     at parseJson (D:\Program Files\nodejs\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
2586 verbose stack     at D:\Program Files\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50
2586 verbose stack     at runMicrotasks (<anonymous>)
2586 verbose stack     at processTicksAndRejections (internal/process/task_queues.js:97:5)
2587 verbose cwd E:\_angular\_practise\project\my-new-project-four
2588 verbose Windows_NT 10.0.15063
2589 verbose argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--quiet"
2590 verbose node v12.16.1
2591 verbose npm  v6.13.4
2592 error Unexpected end of JSON input while parsing near '...qBaKrHcp0BI39s21+YtEW'
2593 verbose exit [ 1, true ]
Board Game Library Options?
Tags: discuss, library, game, sideprojects
Published: 2020-03-15 13:21:40

I've been toying with a couple of board game ideas--more **Monopoly** than **Settlers of Catan** or chess--in my spare time and would like to throw together an implementation to play online.  Is anybody aware of a decent library (for pretty much any language; I'll fiddle with something new for a project like this) that helps with the layout and general management of components?  I've been superficially searching, but haven't found much more.
Obviously, it's not *much* more complicated to create an HTML table with images and draggable-and-droppable components but I'd rather build on tested code and get to the point, if possible.
Thanks!