teleren/devto huggingface dataset:
Creating a Simple Memory Game using TypeScript & React 
Tags: react, typescript, javascript, reactnative
Published: 2020-06-04 18:01:20

#TypeScript a quick definition
  TypeScript is a typed **superset** of JavaScript compiled in JavaScript *since the browser/compiler knows to compile only JavaScript*. You would've heard this often ! what's this actually, TypeScript is JavaScript along with some additional features.

#How it can help developers of different domain ? 
  The major two division in the web development is JavaScript developers and C#,Java,Visual Basic .NET , ... (*from my point of view*) 

  If JavaScript developers checks the code in any of the  C#,Java,Visual Basic .NET project or if .C#,Java,Visual Basic .NET checks the code of any JavaScrip project then this will happen .. 

![Alt text of image](https://media.giphy.com/media/xhN4C2vEuapCo/giphy.gif)

If TypeScript is used it would bring some common things not full but some. A minimal thing ! C#,Java,Visual Basic .NET will not see TypeScript as a new things but for JavaScript developers this a huge thing! Probably a new world we're getting into .... 

# In-to TypeScript 

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

**interface**: where we declare the types of the values/parameters 

now the interface Person consist of two objects *firstName* & *lastName* of type string and Person is assigned to the parameter in the function ```function greeter(person: Person)``` so now the parameter for the function greeter is type checked. Parameters should be of type string.  ```let user = { firstName: 123, lastName: "User" };``` TS plays here! this this throw an error.

All the data type supported in JavaScript can be assigned in the interface to any of the variable.This is the first thing to be learnt!

Check this out to explore more data types and how to use them [link](https://dev.to/ganeshmani/typescript-basics-a-definitive-guide-57j) one of my colleague explained this well

##So what's in this memory game ? 

This game is created using Typescript along with the **useReducer**
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a7nu1w97l4v1sc31lk10.png)

this shows some of the TypeScript usage in Reactjs . You can check the repo [here](https://github.com/karthick3018/memoryGame-reactTS)

Spent some time to play the game [here](https://karthick3018.github.io/memoryGame-reactTS/)

#Has all TypeScript points over?  

Undoubtedly a big no there's way big things to explore in TypeScript check this docs and make great projects ! 

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

https://www.tutorialspoint.com/typescript/typescript_overview.htm 

If you haven't checked things about **react-query**
 check [this](https://dev.to/karthick3018/what-is-react-query-a-curd-operation-using-react-query-2ep4) out . It's really cool and save your time a lot,increases your productivity. 

 
*Thanks for your time !!
See you all then
Happy Coding stay safe!*
Minute JavaScript - Array's filter method
Tags: javascript, video
Published: 2020-06-04 17:53:35

---
title: Minute JavaScript - Array's filter method
published: true
description: Minute JavaScript is a Fast format JavaScript Tutorial that gets straight to the point. Today's Topic: Array's filter
tags: javascript, video
---

Minute JavaScript is a Fast format JavaScript Tutorial that gets straight to the point.

Topic: Array's filter

# More Videos

If you'd like to see more of my videos, [head over to YouTube](https://www.youtube.com/channel/UCDYDhCEPlrYfRyj2ApxeVMA/).

More Minute JavaScript Videos: 

[![Screenshot of YouTube Channel](https://dev-to-uploads.s3.amazonaws.com/i/ql8225baay311dte4eib.png)](https://www.youtube.com/playlist?list=PL59tadyXaIqVBUhq1PlZQvUSSzQzM62AF
)
TIL not using slow external connections in critical places of my app
Tags: php, laravel, devops
Published: 2020-06-04 17:24:53

Today, in the analytics system of [Seofy](https://seofy.io), I found a decrease in conversion from visiting the main page of the site to adding a site, so I began to investigate the reasons. I tried to add the site myself and hung up waiting for the server to respond and redirect to the next page of the user path funnel. Waited for about 30 seconds.

The culprit was Guzzle, who sent a request to an external resource and was waiting for a response, and the external resource was loaded so much that he had no time to respond.

As a result, I transferred this Guzzle request and Telegram alerts to the [Laravel Model Observer](https://laravel.com/docs/7.x/eloquent), rewriting the code as follows:

```php
exec('curl -s -X POST https://api.telegram.org/bot'.env('TELEGRAM_BOT_TOKEN').'/sendMessage -d chat_id='.env('TELEGRAM_GROUP_ID').' -d text="'.$text_to_send.'" --connect-timeout 5 > /dev/null 2>&1 &');

exec('curl -X POST http://'.env('BOT_ADDRESS','localhost').':8051/domains/'.$domain->id.'/start --connect-timeout 5 > /dev/null 2>&1 &');
```

Now this logic is launched from the command line, without waiting for the result.

{% twitter 1268589727831244802 %}

I wonder what you think about it and how you would act in this situation.
What's New?
Published: 2020-06-04 17:24:46

Hi there

Currently learnt Nesting lines of code...What more😁😁
I did that in HTML, although look small, yes!
...but the basic is stuck in my head🚀🚀🚀🚀🚀🚀🚀🚀

#Nestincodes 
#freeCodeCamp
What javascript would look like if they could make breaking changes in it.
Published: 2020-06-04 17:24:38

We all know most of the problems in javascript is because of the fact that it was designed in very short period of time. Result of that we have lot of bad parts and w3c dont want to break backwards compatiblity of web so they don't fix it.

But just for this post imagine if we could make breaking changes in javascript.

What it would look like then?
Is it safe to use Disqus for my Blog?
Tags: discuss, webdev, javascript, codenewbie
Published: 2020-06-04 17:19:17

Hi, 
I recently made by Blog into a PWA. I wanted to add a secure comments feature to the website. I came across Disqus. I integrated Disqus using 'disqus-react' package. 

I noticed that the cookies are active when I use Disqus, also their privacy policy looks fishy to me. 

Can you throw some light on this? Should I use Disqus, if yes, then is it safe for the users?
What are the alternatives to Disqus, if I want a comment feature on my static site built using GatsbyJs?

My blog: https://tharunshiv.com

Thank you in advance
Written by,
{% user developertharun %}

# Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

![Tharun Shiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxq6bdms36fmn62450h.png)
simplehttp2server on Node.js
Tags: node, http2
Published: 2020-06-04 17:08:38

---
title: simplehttp2server on Node.js
published: true
description: Now simplehttp2server is available on Node.js
tags: Node.js, http/2
---

There is a standard library called [`http.server`](https://docs.python.org/3/library/http.server.html) in the Python 3 series that allows you to host a directory in a local environment. It is provided as a [`SimpleHTTPServer`](https://docs.python.org/2.7/library/simplehttpserver.html) in the Python 2 series, and was useful for hosting web pages in the local environment in a simple way.

## simplehttp2server

`http.server` is hosted by http/1.1, but for those who want to host it by http/2, there is one called [GoogleChromeLabs/simplehttp2server](https://github.com/GoogleChromeLabs/simplehttp2server). It is a very useful tool, but you need to install it with Homebrew or `go get`. I developed [1000ch/simplehttp2server](https://github.com/1000ch/simplehttp2server) as a Node.js wrapper for GoogleChromeLabs/simplehttp2server to make it easy to use it in Web Frontend projects.

That said, it's been about 5 years since I published [simplehttp2server](https://www.npmjs.com/package/simplehttp2server) in npm, so it's nothing new. A recent change was made to this Node.js wrapper and the command line package that separated it.

## simplehttp2server-cli

So now there are simplehttp2server and [simplehttp2server-cli](https://github.com/1000ch/simplehttp2server-cli) packages wrapping binaries. In order to run simplehttp2server on the command line, you need to install the latter.

```sh
$ npm install -g simplehttp2server-cli
$ simplehttp2server --help
  -config string
      Config file
  -cors string
      Set allowed origins (default "*")
  -listen string
      Port to listen on (default ":5000")
```

Now, simplehttp2server can work, and folders in the local environment can be easily hosted with http/2. Note that since this is http/2, it will be accompanied by https, and the default port will be `https://localhost:5000`. And [Google Chrome can't open `https://localhost` by default due to security issues](https://github.com/GoogleChromeLabs/simplehttp2server#that-browser-warning).

If you enable `#allow-insecure-localhost` flag from `chrome://flags` and restart Google Chrome, you can also open `https://localhost`.
Vim tip - remap CAPS LOCK to control
Tags: vim, beginners
Published: 2020-06-04 16:57:05

#### Before
![Default control mapping](https://i.imgur.com/A6Q4tQM.jpg)

#### After
![Modded to caps lock](https://i.imgur.com/cZh71Rc.jpg)

If carpel tunnel is a real fear, remapping `control` key will assuage your troubles.

Many Vim packages rely on `control` to unlock their Vim toolset. Tmux uses it (in conjunction with the literal letter 'b') to move to different panes (tmux). This is the primary reason for this post.

Ergonomically `control` is in a shitty spot on standard keyboard layouts. Reaching for `control`, over time, garners pain in your hands quicker than you think. I've used Vim for the past five years with no finger pain. I include instructions to remap CAPS LOCK below:

**1. Open system preferences**
![Go to system preferences](https://i.imgur.com/ykMNEHY.png)

**2. Find and click the keyboard icon**
![mac keyboard section](https://i.imgur.com/SBOa6gG.png)

**3. Click modifier keys**
![mac modifier keys](https://i.imgur.com/Y9ChpRJ.png)

**4. Set caps lock to control**
![caps lock to control](https://i.imgur.com/6irVHPV.png)

**5. (Optional) Set `CTRL-b` to `CTRL-a` in `.tmux.conf`**
```
# Ctrl-b sucks. lets bind ctrl-a instead
unbind C-b
set -g prefix C-a
```
_The literal letter 'a' is closer to CAPS LOCK than 'b'._
Welcome to my blog!
Tags: programming, computerscience, coding, ios
Published: 2020-06-04 16:51:21

Hello world! 

My name is Joshua Shinkle.

I just graduated from New Palestine High School and I'm planning to major in Computer Science - Cybersecurity at Taylor University this fall.

This is my blog where I will document my explorations and adventures in the realm of Computer Science!

You can also find me on Twitter and Medium @JoshuaShinkle
🛑 Selenium Tutorial for Beginner, [Running Your First Automation Test]
Tags: testing, tutorial, beginners, webdev
Published: 2020-06-04 16:32:46

✅Join us - https://sendfox.com/thetestingacademy

In this video, We are discussing Selenium Tutorial for Beginner Part 1.
We are learning
- What is Selenium?
- Advantages and Disadvantages of Selenium
- Why we need Selenium in Automation Testing?
- Selenium Suite
- Run your First Selenium Test.

[![Automation Testing Tutorial for Beginners ](https://i.imgur.com/biYYkTd.png)](https://youtu.be/SGFDoLfdRb4 "Automation Testing Tutorial for Beginners ")

🚀 Day 3 Task :  Selenium Tutorial for Beginners

🚀 Thread :  https://scrolltest.com/automation/day3

🚀 All Task List : https://scrolltest.com/automation/task

🚀 Watch Full Playlist : https://scrolltest.com/automation/playlist


🚀 Tools and courses I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅Selenium Training and Certification -
https://scrolltest.com/go/edureka

✅Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1

✅Programming Java -
https://bit.ly/learnjava2020-p1

✅Test Automation - 
https://bit.ly/learnautomation2020

✅API Testing - 
https://www.learnapitesting.com

✅Cypress Tutorial with LIVE Projects -
https://cypresstutorial.com
Overview of ES6 Syntax
Tags: javascript, react, webdev
Published: 2020-06-04 16:30:33

---
canonical_url: https://youtu.be/glGKgtLPo0s
---

Arrow Functions in React CodeSandbox at https://codesandbox.io/s/arrowfuntionsinreact-33ltd
React Components in { } vs ( ) CodeSandbox at https://codesandbox.io/s/rk48j

Check out the course trailer at https://youtu.be/hhZ6yFvCWho
Check out the course at http://bit.ly/2SZDYyw

Learn the Syntax used in React which is based on JavaScript ES6. Learning these basics will help you understand and write ReactJS code faster than ever!

If you have any further questions or need help, please reach us out!

{% youtube glGKgtLPo0s %}

Subscribe for more videos on JavaScript with Visualization: https://www.youtube.com/channel/UC0yZBnRsD9JRqLXBkfGym0Q?sub_confirmation=1
Undefined Nested Object in REST API with React Hooks?
Tags: react, help
Published: 2020-06-04 16:30:27

Having trouble trying to access nested objects in the OpenWeather REST API. Getting full results in Postman, but not when trying to render.

Postman results(condensed):
```
{
"coord": {
    "lon": -0.13,
    "lat": 51.51
},
"weather": [
    {
        "id": 500,
        "main": "Rain"
    }
],
"main": {
    "temp": 290.38
},
"name": "London"
}
```

Using `const [openWeather, setweather] = useState([]);`
If I want to access name, I can easily do that with `openWeather.name`, which works just fine when returning "London".

However, if I try `openWeather.weather[0].main`, it comes back as undefined. Why would that be?

If I change my setWeather to: `setWeather(data.data.weather[0].main);`, I am able to return "Rain" by using `openWeather.main`.

Anything would help, thanks.
Is there a future for a front end dev who doesn't know how to use React/Vue/Angular?
Tags: anonymous, webdev
Published: 2020-06-04 16:00:32

---
title: Is there a future for a front end dev who doesn't know how to use React/Vue/Angular?
published: true
description: I need to bite the bullet and ask the hard questions: is there a future for a front end dev who doesn't know how to use React/Vue/Angular?
tags: anonymous 
//cover_image: https://direct_url_to_image.jpg
---

I'm a dev with about 10 years experience. I came into web from a brief stint in graphic design. For most of my career I did both UI/UX design and front end coding (SASS, BEM, JQuery, vanilla JS).

However, now the world is changing and frameworks like React, Angular and Vue are predominant. The simple fact is I can't wrap my head around these. I've been working with React for 2 years (along side the normal stuff I do), completed 2 Udemy courses, 1 book, and countless tutorials online. I've even payed a couple of people to tutor me one on one. 

But, the truth is, it's just not sticking. Coming from my design background I just don't understand it - I lack the layers of understanding of JS (and node, TypeScript, CLI, npm, yarn, Babel, ES6, etc). And, to be honest, I don't have any interest in this kind of depth of programming.

So, I need to bite the bullet and ask the hard questions: is there a future for a front end dev who doesn't know how to use React/Vue/Angular? Or should I start looking at other careers?

Many thanks in advance.
Using Web Monetization with Gridsome
Tags: gftwhackathon, vue, gridsome
Published: 2020-06-04 15:50:33

---
title: Using Web Monetization with Gridsome
published: true
description: Using Web Monetization to hide sensitive information in my portfolio website.
tags: gftwhackathon,vue.js,gridsome
---

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built

I built a developer portfolio website. I would like to hide sensitive information (e.g. contact information) from public.

### Submission Category:  Exciting Experiments


## Demo
 https://me.coddeine.com/

## Link to Code

 {% github https://github.com/ittus/vue-developer-profile %}


## How I built it 

Integrated Web Monetization ([Coil](https://coil.com/)) and Gridsome is quite easy. 
First I created index.html and in src folder and add Coil meta's tag

```html
<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
    <meta name="monetization" content="$ilp.uphold.com/fPDnd2Pr32mP">
  </head>
  <body ${bodyAttrs}>
    ${app}
    ${scripts}
  </body>
</html>
```

Then I add the code to check if user is a paid user or not

```javascript
  data: () => ({
    isPaid: false
  }),
  created() {
    if (process.isClient) {
      if (document.monetization) {
        document.monetization.addEventListener('monetizationstart', event => {
          if (document.monetization.state === 'started') {
            this.isPaid = true
          }
        });
      }
    }
  }
``` 

and then I can use the `isPaid` flag in other conditional statement

```javascript
    downloadResume() {
      if (!this.isPaid) {
         // do something
      } else {
        // do something else
      }
    }
```

You can see more detail implementation in my [Github repository](https://github.com/ittus/vue-developer-profile/blob/master/src/components/Overview.vue)

## Additional Resources/Info 

Web Monetization is a nice idea for me. I hope it will be adopted soon by other developers and content creators. Using [Coil](https://coil.com/), it's very easy to add it to your website.
Coding  #TBT 
Tags: javascript, react, cpp, github
Published: 2020-06-04 15:29:50

En ésta ocasión aprovechando que es jueves, quiero publicar un pequeño proyecto, *muy pequeño diría yo...* en el que estuve trabajando con unos compañeros en la universidad, de hecho es el primer proyecto de programación que he desarrollado; *Un Conversor De Unidades Métricas En C++*

![Presentacion de proyecto](https://www.bing.com/images/blob?bcid=Tu0doZv8gmYBfQ)

Ahora lo reediseñé en Javascript utilizando React.js. Algo simple, cambié algunas funciones del proyecto original para que sea más práctico. 

![Presentacion de proyecto](https://www.bing.com/images/blob?bcid=TmOYGoScjGYBlg) 

Acá les dejo el link del repositorio del código en GitHub para que lo puedan ver, clonar y contribuir en el si es de su agrado.

[Convertor ReactApp](https://github.com/samdyc0de/Convertor-ReactApp)

###Y acá les dejo algunas capturas de pantalla del proyecto:###

![image](https://pbs.twimg.com/media/EZrVD4yX0AEuD0q?format=jpg&name=large)
![image](https://pbs.twimg.com/media/EZrVD40XYAAjIq9?format=jpg&name=large)
![image](https://pbs.twimg.com/media/EZrVD44XsAAlQMR?format=jpg&name=large)
![image](https://pbs.twimg.com/media/EZrVD45WAAA7P9H?format=jpg&name=large)



 *[Twitter personal](https://twitter.com/samdyc0de)*          

             Samdyc0de                                      Cartagena, Colombia  
                                                     ©2020 - All rights reserved
Coverage checks, conditions, and simplifying
Tags: coverage, logic
Published: 2020-06-04 15:24:08

---
title: Coverage checks, conditions, and simplifying
published: true
description: Some tips on code coverage checks as they apply to conditional statements, and some resources on how to simplify complex conditions
tags: coverage, logic
---

In [a recent comment](https://dev.to/drhyde/comment/10069) on [someone else's post](https://dev.to/mjuraj/i-made-over-1-000-code-reviews-this-is-what-i-learned-4e9e) I mumbled briefly about code coverage checks. I originally wrote the core of this post on there, but decided to break it out to an expanded post of its own because it was straying off topic.

I spend most of my coding time writing in perl, and I use [Devel::Cover](https://metacpan.org/pod/Devel::Cover) for my coverage checks. A feature of that tool which I particularly like, and which is lacking in some other tools, is that you don't just get to see which lines of code are covered, which branches taken and so on, you also get to see which conditions were exercised. "How does this differ from seeing which branches are covered?", you may ask. Consider this code:

```perl
if(foo() || bar()) {
    ...
}
```

There's one branch, which can be either taken or not. Dead simple. However, there are three different conditions and if you don't hit them all Devel::Cover will tell you. Those conditions are:

1. `foo()` is true (the value of `bar()` won't matter in all modern languages I'm familiar with)
2. `foo()` is false and `bar()` is true
3. `foo()` is false and `bar()` is false

If we expand the code a little:

```perl
if(foo() || bar()) {
    ...
} elsif(baz() && barf()) {
    ...
}
```

We've now got 2 branches and _5_ conditions:

1. same as above
2. same as above
3. `foo()` is false, `bar()` is false, `baz()` is false (the value of `barf()` doesn't matter)
4. `foo()` is false, `bar()` is false, `baz()` is true, `barf()` is false
5. `foo()` is false, `bar()` is false, `baz()` is true, `barf()` is true

Obviously that's a trivial example, but when you have more complex conditionals they can hide surprising bugs. Your coverage checking tool may show you that all branches are tested, but unless you've also tested it with all possible conditions you don't know if it will always take the right branch!

It's at about that point that I realised I was straying waaaay off topic for a comment on the original post, for I was reminded of [a Gresham College lecture on Hamilton and Boole](https://www.gresham.ac.uk/lectures-and-events/hamilton-boole-and-their-algebras), which includes an example of Boole's work applied by Claude Shannon to analysing and simplifying electrical circuits in his 1936 thesis "[A Symbolic Analysis of Relay and Switching Circuits](https://dspace.mit.edu/handle/1721.1/11173)". Obviously, his work analysing the behaviour of a bunch of electrical switches in series and parallel can be applied to logical "switches" in code, thus helping you figure out exactly what the conditions are that you need to test if you are to get full coverage.
Chrome 利用時に WebRTC の暗号を外したい場合
Tags: webrtc, dtls, srtp, chrome
Published: 2020-06-04 15:18:28

Chrome には様々なオプションがあり、その一つとして `-disable-webrtc-encryption` が提供されています。

これは DTLS-SRTP の SRTP/SRTCP の暗号を外した状態にしてくれるオプションです。

Chrome のオプションは以下からどうぞ。

[List of Chromium Command Line Switches « Peter Beverloo](https://peter.sh/experiments/chromium-command-line-switches/)
TURN の DTLS 機能について
Tags: webrtc, turn, dtls
Published: 2020-06-04 15:15:23

TURN と WebRTC 端末が hop-by-hop で接続する部分に DTLS が利用されます。 TURN-DTLS と呼ばれます。

[RFC 7350 \- Datagram Transport Layer Security \(DTLS\) as Transport for Session Traversal Utilities for NAT \(STUN\)](https://tools.ietf.org/html/rfc7350)

DataChannel を例に取ると SCTP over DTLS over TURN over DTLS over UDP というミルフィーユになります。

ちなみに TURN-TLS は SCTP over DTLS over TURN over TLS over TCP となります。