teleren/devto huggingface dataset:
Handling iOS "Done" keyboard action
Tags: react, materialui, ux
Published: 2020-04-16 14:05:39

This is my first post on dev.to. Although a very specific solution to a very specific problem, this may help someone, somewhere.  

Recently I was playing around with the material-ui react library, and I stumble upon this auto-complete input. https://material-ui.com/components/autocomplete/

It's a great little component, although when I gave it to someone to test out the component on my iPhone, even though they are presented with options to pick from the auto-complete list, they clicked "Done" on the iOS keyboard. At which point they had finished with their input and wanted to continue, there being no way to continue except clicking on the auto-complete list option remaining, I thought there must be a better way to handle this.

I realised that on "Done" the input "blurs" which means it un-focuses on the DOM. So the best solution I could think of was to say onBlur hit enter, then I had second thoughts that if you click anywhere else from the input it will essentially press enter... Not great... 

What I settled on was realising for my situation and the data I was using was that the person would only click "Done" when they had 1 option in the list left, so on the Autocomplete component I specified this prop.
```
onBlur={(event) => {
  if (options.length === 1) {
    // submit input
    // set state
    // input has one autocomplete left
   }
}}
```
The "options" is a list in the state, in my case was asynchronously generated as the user types in more characters.  
To allow this to happen you must specify the freeSolo prop on the Autocomplete which allows any input in the field and not just one from the auto-complete list.

I gave it back to the person who originally clicked on "Done", very excited to see their reaction to the "Done" issue.  
Lo' and behold they started using the auto-complete list... 
In any case, I think it works well :)
Loading JSON into Postgres
Tags: postgres, datascience
Published: 2020-04-16 14:00:03

Today I had to load some JSON data into Postgres. 

Postgres' `COPY` command it expects one JSON object per line rather than a full array.

For example, instead of a JSON array:

```json
[
    { "id": 1, "name": "John Conway" },
    { "id": 2, "name": "Richard Feynman" },
]
```

It needs to be this format:

```json
{ "id": 1, "name": "John Conway" }
{ "id": 2, "name": "Richard Feynman" }
```

It took me a surprisingly long time to get the data into Postgres, but the solution was fairly simple. 

Here's how I did it.

## Convert the data

This is done with one command:

```bash
cat input.json | jq -cr '.[]' | sed 's/\\[tn]//g' > output.json
```

**Explanation**

1. `cat input.json` - read the contents of the file
2. `| jq -cr '.[]'` - pipe JSON into [jq](https://stedolan.github.io/jq/) and split it onto every line
3. `| sed 's/\\[tn]//g'` - [optional] remove tabs, newlines etc
4. `> output.json` - output to a new file


## Importing the data

From here it's easiest to ingest the data into a JSONB column.

```sh
## Create a table
psql -h localhost -p 5432 postgres -U postgres -c "CREATE TABLE temp (data jsonb);"

## Copy your data in
cat output.json | psql -h localhost -p 5432 postgres -U postgres -c "COPY temp (data) FROM STDIN;"
```

## That's it

20 seconds of reading, and 1 hour of my time. To get the data out of the table now you can use any of Postgres' amazing JSON support. For example:

```sql
select data->>'name'
from temp;

-- John Conway
-- Richard Feynman
```

Enjoy.
Get indexs of all matched records of array
Tags: javascript, react, codenewbie, codequality
Published: 2020-04-16 13:57:32

Photo by Max Duzij on Unsplash

There are several ways to find an index of particular/multiple records of the array. In this article, I'll share an easy and efficient way to achieve it. *( Let me know what you do in comment 😋 )*

Before going further, Welcome to you all in a series of JavaScript Useful Snippet series, where I'm sharing sort codes to make development faster and efficient. If you haven't checked the previous episode go to profile and check now *( hit follow too )* otherwise stay tuned till the end 😃 ...

### IndexOfAll() ###

Guess you have tons of records in an array and you want to get indexes of records which match with your condition, IndexOfAll() is a function to use in those cases. This snippet will take array and function as input and return an array of indexes of records that matched with given function/condition. Let me show how snippet works...

```
const indexOfAll = (arr, fn) => arr.reduce((acc, el, i) => (fn(el) ? [...acc, i] : acc ) , [])
```

As you see, I'm getting array (as arr) and prediction function *(as fn)& arguments as parameters of this function. And in return, I've trigged an array method called reduce *( this method executes a reducer function (that you provide) on each element of the array, resulting in single output value, [read more](https://www.w3schools.com/jsref/jsref_reduce.asp) )*. 

Inside of reduce method, I've defined empty array in the second argument as an initial value and in the first argument, I've executed function *(fn)* with a current record where if it'll return positive value then concatenate it's an index into a resulting array*(acc)* by using spreading operator *( it's a concept of ES6 - check more in detail [here](https://youtu.be/Z5FxVKRfocw). )*  otherwise return array as it is.

### Okay, How to use it? 🤔 ###

```
const array = [1, 2, 3, 1, 2, 3]

const result = indexOfAll(array, (x) => x === 1);   // output :- [ 0, 3 ]
```

Simple as that, need to pass an array of records as first arguments and prediction function as second arguments. In the given example, if you see I've added condition that index of record with value "1" should include into resulting array and in output, we have a position of matched record from the 

{% youtube 8I6qvO8eu9U %}

There must be some other ways too *( shares it in a comment if you have in mind 😀)*. But among all I found this one clean and neat for a solution so, I thought to share it with you too. ope this will help you, yes? then hit follow 😂.
I work for a live video streaming company, ask me anything!
Tags: ama, livestreaming, video, streaming
Published: 2020-04-16 13:51:10

---
title: I work for a live video streaming company, ask me anything!
published: true
description: Your chance to ask a live video streaming company employee anything.
tags: ama, livestreaming, video, streaming
---

Hi there! 👋 I'm the Director of Developer Relations at Wowza Media Systems, a live video streaming solutions company. Everything seems to be centered around live video streaming these days and I'm here to help!

Hit me with your questions on live video streaming, DevRel, baking and cooking analogies, and anything else that comes to mind.
We created a Covid-19 tracking dashboard
Tags: covid19, coronavirus, opensource
Published: 2020-04-16 13:41:28


So my former coding partner [Collins](https://github.com/collinsugwu) from Microverse and I decided to create a simple [dashboard](https://covid19out-92937.firebaseapp.com/) to track the novel coronavirus. This dashboard offers the following features that differentiate it from the others:
1. A graph showing the growth of cases, death and recoveries globally.
2. A list of all countries with their cases(confirmed, death and recoveries) with recoveries and mortality rate.
3. Detail information per country and a graph on the cases growth over time of one month.
4. Preventive measures to be followed to be safe
5. Symptoms presented by someone  infected

![screenshot1](https://dev-to-uploads.s3.amazonaws.com/i/2mz7isxxqq1dr2h61qgq.png)

This dashboard is far from being perfect, as we know a lot could be added to it. However, this is our little quota in helping people have an idea of how this disease is spreading and what can be done to slow its spread.

### Tech stack
 The data is being sourced from https://www.worldometers.info/coronavirus/ and COVID-19 (2019-nCoV) Data Repository by Johns Hopkins CSSE through this [library](https://github.com/NovelCOVID/node-api).

This dashboard is using vanilla Javascript for the most part and reactjs(without create-react-app) to display the cases label on the welcome page. The graph is implemented with Chartjs and we used DatatableJS to display the data in the table with searching, sorting and pagination abilities.

### Known issues or improvement
1. Automatically detect the country of visitor and show cases information
2. Mark countries as a favourite, and show those countries data on top of the table on subsequent visits.
3. Show daily addition of cases to inform the visitor of daily cases.

The project is open-source, therefore you could also contribute to it [here](https://github.com/edemagbenyo/covid19-screening/).
Daily Challenge #227 - Android Lock Screen
Tags: challenge
Published: 2020-04-16 13:35:43

---
title: Daily Challenge #227 - Android Lock Screen
published: true
series: Daily Challenge
description: How many other nodes can you move to from one on a line lock?
tags: challenge
---
You might already be familiar with many smartphones that allow you to use a geometric pattern as a security measure. To unlock the device, you need to connect a sequence of dots/points in a grid by swiping your finger without lifting it as you trace the pattern through the screen. The image below has an example pattern of 7 dots/points: [A, B, I, E, D, G, C].

![lockscreen](https://i.imgur.com/zmPNYdv.png)

Your job is to implement the function `countPatternsFrom(firstPoint, length);` where `firstPoint` is a single-character string corresponding to the point in the grid (i.e.: 'A') and `length` is an integer indicating the length of the pattern. The function must return the number of combinations starting from the given point, that have the given length.

Take into account that dots can only be connected with straight directed lines either:

horizontally (like A to B)
vertically (like D to G),
diagonally (like I and E, as well as B and I), or
passing over a point that has already been 'used' like (G and C passing over E).


###Examples
countPatternsFrom('B', 1), 1
countPatternsFrom('C', 2), 5

###Tests
countPatternsFrom('D', 3)
countPatternsFrom('E', 4)
countPatternsFrom('E', 8)

Good luck!
***
_This [challenge](https://www.codewars.com/kata/585894545a8a07255e0002f1) comes from rsalago on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
What are some of your hobbies outside of coding that have directly or indirectly helped your dev work?
Published: 2020-04-16 13:30:06

---
title: What are some of your hobbies outside of coding that have directly or indirectly helped your dev work? 
published: true
description: 
tags: 
---

DEV is in the process of launching a podcast and we'd love for you to be involved! We're recording the episodes in advance, and this week we'd like to know:

What are some of your hobbies outside of coding that have directly or indirectly helped your dev work? 

If you'd like to participate, please:

- Call our Google Voice at at +1 (929)500-1513 and leave a message by 4/22 📞
- Send a voice memo to pod@dev.to 🎙
- OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

![rock-climbing-baby](https://media.giphy.com/media/Vtak8ZhVZwRYQ/giphy.gif)

Thank you!
How to change Node.js version thanks to NPM
Tags: node
Published: 2020-04-16 13:27:53

---
title: How to change Node.js version thanks to NPM
published: true
description: change node js version
tags: #nodeJs
---
Hello, how are you!

I had updated my version of node.js (v11.x) and it created dependency problems on some of my applications. So I had only one idea to downgrade my version.
### 1 - Upgrade to the latest stable release : 
       sudo npm cache clean -f
       sudo npm install -g n
       sudo n stable
### 2 - Upgrade to an LTS version:
       sudo npm cache clean -f
       sudo npm install -g n
       sudo n 10.15.0

LTS : long-term support (LTS) version

Please check your version of node.js
       node -v

*Tonux, Takk-Jok*
Mid Meet Py - Ep.3
Published: 2020-04-16 13:22:50

---
title: Mid Meet Py - Ep.3
published: true
description: We meet in the middle of the day, in the middle of the week to chat about Python.
tags: 
---
[EuroPython talk voting started](https://ep2020.europython.eu/events/talk-voting/)

[Python Pizza](https://remote.python.pizza/) Speaker line up is great!

Free Django beginner course: <https://morioh.com/p/71bf7795a878>

[PyCon UK has been cancelled](https://twitter.com/PyConUK/status/1249351345003528192)

[EffectiveQuadratures got support from NUMFocus](https://twitter.com/EQuadratures/status/1249795188857470976)

[PyAmsterdam flying software Circus](https://www.meetup.com/Software-Circus/events/270038344/) - talking about FastAPI lib

[Python IE meetup next Wed 22nd April 2020](https://www.meetup.com/pythonireland/events/270053115/)

PyPI Highlight:

EffectiveQuadratures - <https://www.effective-quadratures.org/>

SimPy - discrete-event simulation library - <https://simpy.readthedocs.io/en/latest/>
April 16 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-04-16 13:20:44

---
title: April 16 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Is it possible to unload dynamic imported module?
Tags: react, javascript, help
Published: 2020-04-16 13:19:34

I am designing a dark-theme mode for my react app, I got two CSS files, 
1. antd.css (light theme)
2. antd.dark.css (dark theme)

I wanted to import these CSS files dynamically, to be more specific I want to import these files based on a particular condition.

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

In the above code, **"userTheme"** is a react state, whose default value is **'false' [type: boolean]**, I have created a switch button which set the value of **"userTheme"** state. 

Below is the screenshot of my react app. [**userTheme: false**] // showing light theme

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

Below is the screenshot of my react app when I switched it to dark mode. [**userTheme: true**] // showing dark theme

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

Below is the screenshot of my react-app when I switched back to light-theme.
[**userTheme: false**] // but showing still dark theme

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

The problem is, it is still in the dark mode (i guess that is because **antd.dark.css** file is still loaded), I checked my **"userTheme"** state value it is set to **'false'** in react state. 

Is there any way to unload stylesheet dynamically in this case? Maybe that will solve this problem. Can anyone please tell me how can I fix this?
jQuery Selector
Tags: html, javascript, wevdev, beginners
Published: 2020-04-16 13:07:34

---
title: jQuery Selector
published: true
description: 
tags: #html #javascript #wevdev #beginners
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00juhsjb5n8do2h470tf.png)
Let's Analyze your webpack bundles with Nuxt
Tags: nuxt, vue, webpack, analyze
Published: 2020-04-16 13:07:11

---
canonical_url: 'https://debbie.codes/blog/nuxt-analyze-webpack-bundles'
---
It is really important to know what you are shipping to production. As we add so many third party libraries to our site sometimes we forget that perhaps they are going to have an impact on our performance or sometimes we just don't read the install instructions and install the whole library instead of only what we need. So how can we analyze our bundles in Nuxt.js?

Nuxt makes it very easy for us to dive inside our webpack bundles and take a look at what is going on. Don't worry it is not scary at all. In fact the tool is very visual and really easy to launch. 
You can create a command in your package.json
```javascript
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "analyze": "nuxt build --analyze"
}
```
Or you can launch it directly in the terminal with yarn

```bash
yarn build --analyze
```
or if you don't have yarn you can use npx
```bash
npx nuxt build --analyze

```
Personally I prefer the shorthand version which is -a
```bash
yarn build -a
```
Then the webpack analyzer should launch in your browser window.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zirur7w11fkojij92hn9.png)

The navigation bar on the left allows you to choose which chunks to show. You can see all of them or just select the ones you want. And at a quick glance you can see the size of all your chunks.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/29oo6639ua5z4om34lp9.png)

You can also double click on the boxes, hover over them for more details and right click on a chunk to easily hide it or to hide all other chunks.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q4epyrbb8b51v2wwuxoq.png)

I hope you have fun analyzing your bundles but please do not deploy bundles built with "analyze" mode, they are for analysis purposes only.
[Shortcut] Run function test in Golang and VsCode
Tags: go, vscode, testing
Published: 2020-04-16 12:55:30

![Simple Go Test File](https://dev-to-uploads.s3.amazonaws.com/i/jwad1jsqc4r4kkhbdq1q.png)

No intro.

I'm tired of always clicking the `Run Test` above the function test. So I thought, there must be a shortcut to this. lol


#Steps I took:
1. <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
2. Keyboard Shortcuts
3. Search "*test*"
4. Double click on `go.test.cursor`
5. Set your own keyboard shortcut. I went with <kbd>Option</kbd> + <kbd>t</kbd>
6. Place the cursor anywhere inside the test function and run the test shortcut
7. Voila!

#Bonus
You can also set a shortcut on `go.test.file` to run all the tests in the opened file. I set mine to <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>
About me as developer
Tags: cpp, programming, digitaltech, computerscience
Published: 2020-04-16 12:25:20

I have worked in many Projects especially if we talk about programming so I have worked in C++ programming Language and also use arduino to code. Some of my projects are:
. Console base Ludo
. Chess Game (Object Oriented)
. Pacman Game
. Mine Sweeper Game
. Soil Moisture Detector (using arduino)
-> and many little projects as an assignments I have done not mentioned here.
Know the Difference: Subarray vs Substring vs Subsequence vs Subset
Tags: subarray, substring, subsequence, subset
Published: 2020-04-16 12:19:14

Today we are going to make a comparison of subarray vs substring vs subsequence vs subset. These are all similar concepts but have important differences. Especially in an interview situation, you need to be extra careful about your choice of wording. If a question asks you to return a subsequence and you return a subset, you might fail the interview. Or the interviewer can directly ask you about the differences between these concepts as they are quite important. Let me start by describing each concept with examples. Finally, I will give you a comparison table.

Video: https://www.youtube.com/watch?v=uzhN-QhzR2g
Article: http://quanticdev.com/algorithms/primitives/subarray-vs-substring-vs-subsequence-vs-subset
How to Prevent CSS Animation From Running on Page Load
Tags: ux, css, softwareengineering, javascript
Published: 2020-04-29 21:27:08

---
title: How to Prevent CSS Animation From Running on Page Load
published: true
date: 2020-04-16 12:02:19 UTC
tags: ux,css,software-engineering,javascript
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/0*s64gCpGF_v4GqG5i)](https://medium.com/better-programming/how-to-prevent-css-animation-from-running-on-page-load-ced731144af7?source=rss-3a534b5053e6------2)

Load your pages as you intend them to be shown

[Continue reading on Better Programming »](https://medium.com/better-programming/how-to-prevent-css-animation-from-running-on-page-load-ced731144af7?source=rss-3a534b5053e6------2)
Daily Developer Jokes - Thursday, Apr 16, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-16 12:00:18

---
title: "Daily Developer Jokes - Thursday, Apr 16, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Apr%2016%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259869e0aa.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What kind of computer can hold a musical note?

___A:___ A Dell.
 -->
Amazon AWS Cloud Developer Kit (CDK) A developer-focused way to deploy Infrastructure
Tags: podcast, aws, cloud, devops
Published: 2020-04-23 06:58:24

---
title: Amazon AWS Cloud Developer Kit (CDK) A developer-focused way to deploy Infrastructure
published: True
date: 2020-04-16 12:00:00 UTC
tags: Podcast, AWS, Cloud, DevOps
canonical_url: https://share.transistor.fm/s/70b12113
---
{% spotify spotify:episode:33P4J9Z9zLA58JWCB2vG07 %}

AWS CDK - [https://aws.amazon.com/cdk/](https://aws.amazon.com/cdk/)  
Getting Started with CDK - [https://docs.aws.amazon.com/cdk/latest/guide/home.html](https://docs.aws.amazon.com/cdk/latest/guide/home.html)  
AWS CDK Construct Library - [https://docs.aws.amazon.com/cdk/api/latest/docs/aws-construct-library.html](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-construct-library.html)  
AWS CDK Launch - [https://www.youtube.com/watch?v=bz4jTx4v-l8&feature=youtu.be](https://www.youtube.com/watch?v=bz4jTx4v-l8&feature=youtu.be)  
Pulumi - [https://www.pulumi.com/](https://www.pulumi.com/)  
Terrastack Polyglot Terraform supercharged by CDK - [https://github.com/TerraStackIO/terrastack](https://github.com/TerraStackIO/terrastack)