teleren/devto huggingface dataset:
Debug ReactJS Context API with React Context Devtool
Tags: react, javascript, chrome, firefox
Published: 2020-01-25 15:05:32

---
title: Debug ReactJS Context API with React Context Devtool
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gr2lipvxsdqw5dd28wc4.png
description: #reactjs
tags: react, javascript, chrome, firefox
---


Introducing [React Context Devtool](https://github.com/deeppatel234/react-context-devtool).Now you can easily debug your context in your react app with a tree, raw and diff views.

you can download from [Chrome Web Store](https://chrome.google.com/webstore/detail/oddhnidmicpefilikhgeagedibnefkcf) and [Firefox addons store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/).

***Tree View***

![Tree View](https://thepracticaldev.s3.amazonaws.com/i/h5ew4lcnly3l2cwwk68b.png)

***Raw View***

![Raw View](https://thepracticaldev.s3.amazonaws.com/i/uh07l4s8i0wt7yh4c3f1.png)

***Diff View***

![Diff View](https://thepracticaldev.s3.amazonaws.com/i/ssd7p64xu7sn0snx9lgz.png)

## Installation

1. Download extension from [Chrome Web Store](https://chrome.google.com/webstore/detail/oddhnidmicpefilikhgeagedibnefkcf) or [Firefox addons store](https://addons.mozilla.org/en-US/firefox/addon/react-context-devtool/).

2. Add _REACT_CONTEXT_DEVTOOL method in your Consumer.

```js

<MyContext.Consumer>
  {
    values => {
      if (window._REACT_CONTEXT_DEVTOOL) {
        window._REACT_CONTEXT_DEVTOOL({ id: 'uniqContextId', displayName: 'Context Display Name', values });
      }
      return null;
    }
  }
</MyContext.Consumer>

```

## Use with NPM package

- Download and install npm package

```sh
npm install react-context-devtool
```

- Add ContextDevTool component inside your Provider.

```js

import ContextDevTool from 'react-context-devtool';

<MyContext.Provider value={{ a: 'hello', b: 'world' }}>
  // Add this in your context provider
  <ContextDevTool context={MyContext} id="uniqContextId" displayName="Context Display Name" />
  <YourComponent />
</MyContext.Provider>
```


React Context DevTool is an open-source project. you can also contribute to this project. [Github Link](https://github.com/deeppatel234/react-context-devtool)
Object Immutability in Javascript
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-01-25 15:01:46

In this session, we will be focusing on object immutability.

###TABLE OF CONTENT
1. Immutability
2. seal() method
3. freeze() method

###Immutability
Immutability simply means can't be **modified** after **creation**.

In javascript, value immutability can simply be achieved using **const** keyword to declare a variable. Unfortunately, **const** keyword can not make an object immutable.
For Example
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r0dxobm299tkovdhj0tz.png)

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

So to achieve object immutability, we simple use the **freeze()** method which helps in hindering an object from being tampered with.


###2.Object.seal({theObject: ...}):
this method hinders the extension of an object length. That is, you can not add new property or method to an already sealed object.
For Example:
    const names = {
      nameOne:'creativeAdams',
      nameTwo:'creativeJerry'
    }
    Object.seal(names);
    //or you can use the below method to
    Object.preventExtensions(names);

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

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


###3. Object.freeze({theObject:...}):
this method hinders the **changing of an existing property or method and an extension of an object**.
For Example:
    const names = {
      nameOne:'creativeAdams',
      nameTwo:'creativeJerry'
    }
    Object.freeze(names);

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rg8afj4ea61rmg1zfxy8.png)
Quick Python: Interrupts
Tags: python
Published: 2023-01-06 01:42:56

---
title: Quick Python: Interrupts
published: true
date: 2020-01-25 14:51:34 UTC
tags: Python
canonical_url: https://brandonrozek.com/blog/pythoninterrupts/
---

This post is part of a new series I’m starting where I quickly outline small Python snippets.

If you have an application that you want to gracefully exit when the user presses CTRL-C here’s the short snippet

```
import signal
import sys

# Function that gets called when interrupt is found
def signal_handler(sig, frame):
  print('You pressed Ctrl+C!')
  sys.exit(0)

# Attach the function to the interrupt signal
signal.signal(signal.SIGINT,signal_handler)

print('Press Ctrl+C')

```
Publish to NPM with Github Actions
Tags: github, npm, devops, node
Published: 2020-01-25 14:44:47

If you are as addicted to CI and CD as we are at Tauri, this brief article will show you how we solved publishing to NPM on the release tag event at Github. 

### Background
Our org is growing, and we don't want individuals to bear the responsibility for publishing to crates.io and npm. That's brittle and bus-factor waiting to happen. And doing things manually is always error prone.

### What we did:
1. Setup a CI user at NPM (don't choose 2FA), and copy their token.
2. Create a secret at the repo settings, call it `npm_token` and paste the token as the secret value.
3. Create a file at `.github/workflows/publish.yml`with the following contents:


```
name: NPM Publish

on:
  release:
    types: [published]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node 12
      uses: actions/setup-node@v1
      with:
        # specify node version and the registry for the RELEASE build
        node-version: 12
        registry-url: https://registry.npmjs.org/
    - name: Build package
      run: |
        npm install -g yarn
        yarn install
        yarn rollup -c
    - name: Register Token
      run: |
        echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > /home/runner/work/_temp/.npmrc
        echo "_auth=$NODE_AUTH_TOKEN" >>  /home/runner/work/_temp/.npmrc
        echo "email=<your@email.address>" >>  /home/runner/work/_temp/.npmrc
        echo "always-auth=true" >>  /home/runner/work/_temp/.npmrc
      env:
        NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
    - name: Publish
      run: npm publish
```

Now just publish a release and let the runner do its thing.

Let us know in the comments if you've got any improvements!

----
- https://github.com/features/actions
- https://github.com/tauri-apps/tauri-forage (the repo where we're using this)
- Image from Unsplash: https://unsplash.com/photos/Tzm3Oyu_6sk
Daily Challenge #171 - Ordering Beers in Poland
Tags: challenge
Published: 2020-01-25 14:30:16

---
title: Daily Challenge #171 - Ordering Beers in Poland
published: true
series: Daily Challenge
description: Create a function to help you order beers in Poland. 
tags: challenge
---

###Witamy!

You are in Poland and want to order a drink. You need to ask "One beer please.", so you say "Jedno piwo poprosze."

<pre> Translator.orderingBeers(1) = "Jedno piwo poprosze."</pre>

But let's say you're really thirsty and you want several beers. You would need to learn how to count in Polish, and understand grammar and verb tenses. 

###Rules
In English, the plural of `beer` is simply `beers`, with an "s".
In Polish, however, the plural of `piwo` (nominative singular) can be `piw` (genitive plural) or `piwa` (nominative plural). It depends!

- Usually the plural is genitive: `piw`
- An exception occurs when using numbers 2, 3, or 4 (and any other numbers that end with those), the noun changes to the nominative `piwa`
- The exception to the exception is for numbers 12, 13, and 14, which take the genitive `piw`.

###Numbers in Polish
<pre>
From 0 - 9:
"zero", "jeden"*, "dwa", "trzy", "cztery", "piec", "szesc" , "siedem", "osiem", "dziewiec"

From 10 - 19, nearly the same but with -ascie at the end:
"dziesiec", "jedenascie", "dwanascie", "trzynascie", "czternascie", "pietnascie", "szesnascie", "siedemnascie", "osiemnascie", "dziewietnascie"

Tens** from 10 to 90 are nearly the same, but with -ziesci or ziesiat at the end:
"dziesiec", "dwadziescia", "trzydziesci", "czterdziesci", "piecdziesiat", "szescdziesiat", "siedemdziesiat", "osiemdziesiat", "dziewiecdziesiat"

*"One" could be male ("Jeden"), female ("Jedna") or neuter ("Jedno"), which is the case for "beer" (piwo). But all other numbers are invariant, even if ending with "jeden".
**Compound numbers are constructed similarly to English: tens + units. For example, 22 is "dwadziescia dwa".
</pre>

###Tests
How would you order one beer?

Three beers?

Ten beers? 


Good luck!

***
_This [challenge](https://www.codewars.com/kata/54f4e56e00ecc43c6d000220) comes from GaspardP 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!_
Pulling and using NPM package Emmet as javascript module and using it in the browser
Tags: codepen, emmet, npm
Published: 2020-01-25 14:22:53

---
title: Pulling and using NPM package Emmet as javascript module and using it in the browser
published: true
tags: codepen, emmet, npm
---

What if you can pull a NPM packet into your project without having to add a project which needs to be builded before being used? Turns out you can.


This pen uses Emmet as a javascript module inside a pen. It itself is constructed using a Emmet/CSS abbreviation to create itself. It lets you type ind abbreviations and see the generated HTML source and rendered HTML instantly. Pretty sweet I think.

{% codepen https://codepen.io/netsi1964/pen/vYEPWpv %}
Replay du wébinaire Waves du 25 janvier 2020
Tags: blockchain, wavesplatform, smartcontract, developpeur
Published: 2020-01-25 13:48:40

Replay du wébinaire de ce samedi 25 janvier disponible sur :
https://youtube.com/watch?v=Vvc0Xh8DuFE

Si vous avez la moindre question :
https://t.me/wavesdappsFR

Ou bien en commentaire de la vidéo.

A bientôt
Creating eCommerce Sites Using Symfony Framework
Tags: php, symfony, sylius, ecommerce
Published: 2020-01-25 13:33:27

We are well aware of the Symfony framework and its Qualities. It is famous among all PHP developers for its speed and capabilities to build enterprise-level Web Applications. Although PHP has Wordpress, as world-famous CMS and then its WooCommerce plugin for Creating e-commerce sites. But Wordpress is not good with security feature so woo-commerce is only feasible with small e-commerce sites with a medium user base. 

And for E-commerce sites where we want security and want to manage millions of users, we choose Magento, (PHP's savior for eCommerce World) but at the expense of speed. Magento is not good at speed and sometimes highly expensive. 

So, for PHP, we have another savior in the eCommerce world, with speed, flexibility, and security. Yes, its Sylius.

Sylius is Open-Source, Symfony Based eCommerce Solution. And going to be a hit as backed up by Symfony. As a web developer, I personally tried it and I am super excited after knowing its capabilities. It's super easy to set up even for newbies. In a few minutes, you are up with a fully functional eCommerce Site using Symfony.

Sylius is providing a full plug and play environment, they have hundreds of plugin freely available to integrate Third-party services such as google analytics, Elastic search, SEO Related Plugins, etc.

You can follow installation steps to set up Sylius from Sylius docs:

https://docs.sylius.com/en/latest/getting-started-with-sylius/installation.html

and if you are a bit familiar with Symfony it will be easy for you to customize it according to your site's requirements.
Some reflections about React and TypeScript
Tags: react, typescript, reactrouterdom
Published: 2020-01-25 13:31:52

---
title: Some reflections about React and TypeScript
published: true
description: 
tags: react, reactjs, typescript, react-router-dom
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jre2xp7e5oktzyryezm7.jpg
series: React and Material UI
---

Since I am using TypeScript, I have some superpowers.

I can improve my code adding things like interfaces and return types. This won't change the behavior of the application but will make it easier to debug and more bug free.

# Interfaces
I know that a `route` is an object structured as follows

```typescript
{
  path: '/teams',
  sidebarName: 'Teams',
  component: Teams
},
```

The `Routes` module is used in different places within the application so it makes sense exporting an `interface` that defines the structure of each route.

In the `Routes.ts` file

```typescript
...
export interface IRoute {
  path: string;
  sidebarName: string;
  component: React.ComponentType;
}
...
const Routes: IRoute[] = [
...
```

At this point is straight forward importing it from elsewhere.
In the `App.tsx` indeed I do

```typescript
import Routes, { IRoute } from './Routes';
...
{Routes.map((route: IRoute) => (
  <Route exact path={route.path} key={route.path}>
    <route.component />
  </Route>
))}
```

# Return types

When writing TypeScript is a good practice specifying functions' return types.

For example, a simple functional component like `Home` returns a `JSX.Element`

```typescript
const Home: React.FC = (): JSX.Element => {
  return (
    <h1>Home</h1>
  );
};
```

A method like `activeRoute` returns a `boolean`

```typescript
const activeRoute = (routeName: string): boolean => {
  return location.pathname === routeName ? true : false;
}
```

And so on.

Adding return types helps avoiding common misktakes and makes the application more testable.

# `props` type

React Router DOM offers also the type of the props that a wrapped component receives. For example, I have `withRouter(NavigationBar)` receiveing some props form the HOC `withRouter`.

```typescript
const NavigationBar: React.FC = (props: any) => {
```

The `type` of those `props` is `RouteComponentProps`.

```typescript
import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
...
const NavigationBar: React.FC<RouteComponentProps> = ({ history, location, match }: RouteComponentProps) => {
```

I also destructured the `props` to have direct access to its properties `history`, `location` and `match`.
Input field type "Currency" problem solved 💲💡
Tags: webdev, javascript, react, beginners
Published: 2020-01-25 13:26:10

Just recently we implemented a calculator for property yield. So in our calculator, there were some currency input fields, obviously, where user can enter purchase price etc. And these input fields needed to be ***formatted in German***, since most of our users are German. 

####The problem####
The annoying problem we had was, ***how to display the formatted number while also using it to calculate some other values***, because `<input type=“number” />` doesn’t allow displaying German format - `1.000,00`. 

UI example below: 
![UI Currency](https://static.wixstatic.com/media/a11f24_dfb8481b1ad04237814880da3ad0a67e~mv2.png "UI Currency")

_Side note: we use React-Intl to format the number into a language-specific currency._

 
####Solution####
After trying out several options, we came up with the following simple solution: 

We use the `<input type=number” />` when input field is in _focus_ and save the value in state as a number to use it in calculations. When the input field _loses focus_ (onBlur callback), we switch the Input field to `<input type=“text” />` to display the formatted number currency.  


Code snippet below:
![input field currency react](https://static.wixstatic.com/media/a11f24_7b84c2f4481341f289431aca7c8f7e3a~mv2.png "input field currency react")


This way, in order to display and calculate the same value, we don’t have to transform it from number to string and vice versa. Also this requires minimal code change.

-----------------

You can follow me on [Twitter](https://twitter.com/Njuchi_) and [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1).
Daily Developer Jokes - Saturday, Jan 25, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-01-25 13:00:07

---
title: "Daily Developer Jokes - Saturday, Jan 25, 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=Saturday%2C%20Jan%2025%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/5e12590a84b94.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 are computers' favorite snacks?

___A:___ Microchips, phish sticks, and cookies. But just a few bytes of each.
 -->
Remove Duplicates The Shortest Way
Tags: javascript, webdev, array
Published: 2020-01-25 12:38:54

```javascript
function removeDuplicate(arr) {
  return [...new Set(arr)]
}
```

Remove duplicates from an array in javascript the shortest way.👍Using Set object where it only contains unique values (remove repeated ones). Then with spread operator spreads the values into an array again. 😎


Entfernen Sie Duplikate auf kürzestem Weg aus einem Array in #Javascript.  Dann spreizt der Operator mit spread die Werte wieder in ein Array.
Curated Tech Courses
Tags: javascript, codenewbie, tutorial, beginners
Published: 2020-01-25 12:12:48

Hello everyone,

I've created a website with a curated list of awesome JavaScript courses and tutorials from the greatest minds in the community, handpicked.

Currently has 22 courses but my plan is to increase the courses over time, always keeping in mind quality.

![](https://img.onl/NTY2Nd)


I promised myself this year I would try to help more, no matter what's the approach, either directly, or by adding great courses in a curated list, I hope this helps you in some way.

> https://js73.tech

Please do take a look if you have some feedback I will be glad to hear it 👇

I would love if you could follow [@telmo](https://twitter.com/telmo) and [@useJS73](https://twitter.com/useJS73) on Twitter.
Footer always at bottom with flexbox
Tags: codepen
Published: 2020-01-25 11:54:02

---
title: Footer always at bottom with flexbox
published: true
tags: codepen
---

<p>Footer always at the bottom of the page achieved with flexbox, wrapping  the main content  and separating this content and the footer in the available space.</p>

{% codepen https://codepen.io/flavio_amaral/pen/jOEeVyM %}
Blogging on DEV: canonical URL or intro+link to blog?
Tags: discuss
Published: 2020-01-25 11:43:39

Today I came across a post here on DEV where the author posted only the introduction to his article and then a link to his original post.

What do you think are the benefits of this approach in contrast to set the canonical URL in the post properties here on DEV?

Why would you choose one approach instead of the other one?
Machine Learning - Fashion MNIST dataset - Prologue
Tags: machinelearning, beginners, computerscience
Published: 2020-01-25 10:59:09

---
title: Machine Learning - Fashion MNIST dataset - Prologue
published: true
description: Machine Learning studies
cover_image: https://raw.githubusercontent.com/zalandoresearch/fashion-mnist/master/doc/img/fashion-mnist-sprite.png
tags: machinelearning, Beginners, Computer Science
series: Making Of Terminator
---
Hey there,
Hoping you are having a great day.  If not lets make it worse, I am here with a new post. 

As we talked about before, machine-learning uses input data called the <code>Features</code> and output data called the <code>Labels</code> to learn the model algorithm from. 
So, first of all, we need lots of examples to train a neural network to recognize articles of clothing. Remember, an <code>example</code> is a feature label pair that we feed to the training loop. 
In this case, the feature would be the input image and the label would be the correct output that specifies the piece of clothing the image depicts. Fortunately, such a dataset already exists. It's called the <a href="https://github.com/zalandoresearch/fashion-mnist"><code>Fashion MNIST dataset.</code></a>

![details](https://i.ibb.co/Hrqn7Yj/embedding.gif)

Welcome to the world or the Fashion-MNIST dataset, which consists of 28 by 28 pixel gray-scale images of clothing. It contains images of t-shirts and tops, sandals, and even ankle boots. 
![details](https://raw.githubusercontent.com/zalandoresearch/fashion-mnist/master/doc/img/fashion-mnist-sprite.png)
![details](https://i.ibb.co/FW4BKRn/fashion.png)

In fact, here's a full list of all the 10 different items of clothing Fashion-MNIST contains. 
![details](https://i.ibb.co/JdYtG5y/full-list.png)

Given an input image, these are our possible label outputs. 

In total, the Fashion-MNIST dataset contains <code>70,000</code> images which is plenty for us to get started with. 


![details](https://i.ibb.co/YkfyFcM/training.png)
Out of these 70,000 images, <code>we'll use 60,000 to train the neural network</code>. Then, we will use the remaining <code>10,000 images to test how well our neural network can recognize the items of clothing</code>. 

![details](https://i.ibb.co/Rhm0R2n/overall.png)

Remember, each image is <code>28 by 28 gray-scale pixels</code>, so each image is 784 bytes. <code>So our job is to create a neural network that takes the 784 bytes as input, and then identifies which of the 10 different items of clothing the image represents.</code>

Lets make our neural network . Jump in.
how node.js code execution with event loop works
Published: 2020-01-25 10:52:44

most develop focus mainly on writing code, and the code execution part become mysterious, anyway if you want to know how javascript code is executed you can read this article on [Deepak Gupta](https://towardsdatascience.com/javascript-execution-context-and-hoisting-c2cc4993e37d?gi=fda636300542) post it cover almost everything yo would like to know, lets talk about event loop now
javaScript code runs single threaded. so that means there is only one thing happening at a time, here is where event loops come in, in most browsers there is an event loop for every browser tab, to make every process isolated and avoid a web page with infinite loops or heavy processing to block your entire browser, for codes  that takes too long to return back for example a set-timeout function , will cause the event loop to skip the execution of that certain JavaScript code in the page and add it to the event loop part of execution where it get executed  after by setting it to the callback queue , you can visualize it bellow and more information  on this youtube video by [JSconf channel](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

![Alt text of image](https://miro.medium.com/max/752/1*7GXoHZiIUhlKuKGT22gHmA.png)

so as [wikipedia](https://en.wikipedia.org/wiki/Event_loop) states that " event loop is simply a programming construct or design pattern that waits for and dispatches events or messages in a program. The event loop works by making a request to some internal or external "event provider", then calls the relevant event handler "

concluding you have to know that event loop mostly operates asynchronously ,monitors call stack and the callback queue to call the relevant event handler