teleren/devto huggingface dataset:
How to Make Salted Eggs
Tags: tutorial, craft
Published: 2021-04-02 15:10:06

How to Make Salted Eggs, Are You a Fan of Salted Eggs? Or do you have a desire to get into the world of salty egg business? Salted eggs are indeed one of the preserved foods that taste good. In addition salted eggs also contain a lot of Calories, Protein, Calcium, Iron, Vitamin A, Vitamin B-1 etc.

To make it is also not difficult. Here will be explained in detail how to make salted eggs. The explanation is text and will be clarified with the video. Interested isn't it? Let's learn how to create it right away.

Choose a good quality duck egg

Wash the eggs and clean the eggs from the inherent impurities (preferably when using warm water)

Dry the washed eggs by wiping

Sand the entire surface of the egg evenly so that the pores are open. When sanding do not take too long because the eggshell will get thinner so it will be easier to crack or break

Make the marinated dough. First make a mixture of rub ash and salt with a ratio of 1:1. After that add water to taste until it forms a paste. In addition to rub ash can also use red brick powder

Wrap each egg with the dough evenly on the surface of the egg with a thickness of ±2 mm

Store the eggs in a plastic bucket for 2-3 weeks and place them in an open space. The longer the salt content in the egg will be higher so that the egg will last longer but the taste will be more salty

When you're done cleaning the eggs and make sure they're intact and good

If you want salted eggs to last longer, soak the eggs in a tea solution for ± 1 week. This is done so that the tannins contained in the tea leaves can cover the pores of the previously exposed eggshells due to the process of dispelling

Clean and boil salted eggs until thoroughly cooked.

Source : https://www.easycraft.us/
Changing CSS By Device Screen Size - Javascript
Published: 2021-04-02 21:28:46

---
title: Changing CSS By Device Screen Size - Javascript
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Wrote a simple JS file that pre-defines Screen Media sizes (for mobile, for tablet and beyhond) by just the change of a paramater.

https://gist.github.com/pixman92/961887a7ab28877d1529d43616a18899

Breakdown:
CSSChange(query, property, newValue) - changes a CSS element
changingBasedOnScreenSize(dynamicVar, classOfDevice, elem, attribute, newValue) 

changingBasedOnScreenSize() _ parameters defined
dynamicVar - makes a Dynamic Variable
classOfDevice - grabs a preset value and matches that to <window.matchMedia> logic
elem - querySelector a DOM element
attribute - what CSS element to change
newValue - what attribute of the CSS to change
How did I upgrade react-native v59.9 to v63.4
Tags: reactnative, ios, android
Published: 2021-04-02 21:26:19

Recently I've got an opportunity to upgrade a react-native project to its latest version. It's not an expo project. At the time of upgrade, I've fair knowledge of react-native and haven't upgraded any react-native projects before.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rt2ppxxbu3v2wpv7rpv.png)

My Challenge:
-------------
There were 42 dependencies in this project. Most of them are deprecated and unmaintained. So, a lot more work to do. I've gone through each and every dependency repository and issues page on the Github repo to check version compatibility.

What I understood was that we don't have to upgrade all the dependencies. We only have to upgrade the one related to react-native only. I've divided the dependencies into 2 categories. Pure JS libraries (ie like moment.js, we could use those in Reactjs, Nodejs, Angularjs, etc..) and react-native libraries.

I've decided not to touch the pure js dependencies unless having issues with the old version. Then started working on other dependencies to find v60+ support.

Note:- Please read about Autolinking of dependencies.

What's next: 
------------
We have to collect the current status of the other repositories. I've gone through npm and Github repo to check the details of the rest of them. I've maintained a google sheet to track the status of the dependencies. 

What did I look at in the dependency repo?
------------------------------------------
There are possibilities for three questions!

1. Can we use the same repo after the upgrade?
2. Will it have support for v60+?
3. Did it migrate to another repo?

You can answer these questions if you have gone through the Readme and issues in Github carefully.

Experiment 1: 
-------------
I have tried the react-native upgrade tool to know the basic template changes that happened in react-native. I thought it is easy to upgrade that basic template changes first. But unfortunately, I'm failed and not even reaching the splash screen after the changes in the basic template. 

Experiment 2:
-------------
Create a new project and add the whole dependencies with new versions. Add the source code to the new repo (In my case all the source files are in src folder). Tried to pass the splash screen. After a lot of trial and error, I would be able to reach the first screen. (Some of the library imports are commented out to bypass some errors). The only part that I've completely rewrite was react-navigation because its version was v1 and would have upgraded to v5.

After reaching the first screen you could easily complete the upgrade.

In my case, some of the deprecated react-native dependencies worked without any issues.

My Conclusion:
--------------
- Successfully migrated the react-native project
- We should be careful when integrating a 3rd party dependency into our project (Please do some research before using any)
- Keep an eye on react-native updates.
Optimizing a long list for re-renders using useReducer ,memo and useCallback. 

Tags: react, javascript
Published: 2021-04-02 21:05:15

Long lists in react that can't be paginated can cause expensive re-renders reacting to a small change, rendering the whole application obsolete, get it :)? 

In this post, we will explore that problem using a simple todo app with a very long list of todos for demonstration purposes. The knowledge can be applied to any similar situation not limited to todo apps.
&nbsp;

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


&nbsp;
&nbsp;
&nbsp;

## The problem 
&nbsp;
Let’s assume a to-do list with 1000 items. And each item has a completed status and toggle. 
N - not complete and 
C - completed

Now let’s toggle item 3's completed status,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejvdfcbgby83bi4ax79j.png)
The whole todo item component is re-rendered even though only item 3 is changed. This will cause a major lag. The effect is noticeable even for simple text-based list. 

&nbsp;
&nbsp;
## The solution
&nbsp;
Let's introduce reducer to handle the state,

```
const [state, dispatch] = useReducer(todoReducer, initialState);
```

`dispatch` doesn’t change between state changes. So we can leverage that to avoid re-renders. We basically declare our context state as above. 


Our toggle function in context. Here we will have to wrap the function with useCallback and provide only dispatch as a dependency. By doing this we make sure the function isn’t re-created every time the state is changed. And it will help when passing the function as a prop.

```
 const toggleCompleted = useCallback(
   (id: number) => {
     dispatch({ type: "MARK_AS_COMPLETED", payload: id });
   }, 
   [dispatch]
 );
```


The only catch here is that we cannot access the latest state in this function. Because it’s never updated with the state.


To overcome that we will have to access our state in the reducer.

```
else if (action.type === "MARK_AS_COMPLETED") {
   // here we can get the latest state
   const updated = state.todoList.map((item) => {
     if (item.id === action.payload) {
       return { ...item, completed: !item.completed };
     }
     return item;
   });
   return {
     ...state, 
     todoList: updated,
   };
 }
```

And the todo item will be wrapped with memo. By doing this we make sure that todo and `toggleCompleted` stay the same between re-renders. And memo will be able to avoid the re-rendering of the component. 
And when using memo we cannot access a context inside that component. We will have to pass the values as a prop. 

```
export default memo(TodoItem);

```
That’s it. TodoItem is memorized. 
&nbsp;
&nbsp;
Now let's try toggling item 3.
&nbsp;
### The result 
&nbsp;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnh47cxccrju8ccnwfi6.png)

Only item 3 is re-rendered. 
&nbsp;
&nbsp;
.
.
.
mic drop
Ya entendí HTML, CSS y JS, ahora qué sigue?
Tags: codenewbie, beginners, webdev, javascript
Published: 2021-04-02 20:56:10

Muchas veces cuando una persona empieza en el camino del desarrollo web se le recomienda aprender las bases como son *HTML, CSS y JS*, pero ¿Qué sigue después de aprender estos tres?

Lo que actualmente se solicita en diversas ofertas laborales para **frontend developer** es el conocimiento en algún framework *Javascript*, a continuación hablaremos de algunos de los más buscados:


##Angular##

Framework creado por Google, permite desarrollar aplicaciones robustas bajo patrones estrictos como MVC (model-view-controller) y MVP(model-view-presenter), entre otros. Utilizan TypeScript para aprovechar el tipado y las características del mismo. Separa los componentes en 4 archivos principales donde guardamos la lógica, la UI, las pruebas unitarias y los estilos respectivamente. Algo importante es que cada componente esta basado en clases y tiene métodos propios para manejar el ciclo de vida. 

![Angular](https://res.cloudinary.com/practicaldev/image/fetch/s--DYfpZirq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://miro.medium.com/max/990/1%2AOc2PsJ-QKOUG2I8J3HNmWQ.png)

```javascript
import { Component, ComponentFactoryResolver, Injector } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor() {
  }

  public ngOnInit() {
      alert('Utilizando Angular')
  }
}
```

Aprende más de Angular en: https://angular.io/

##React##

Librería mantenida por Facebook y diversos grupos de desarrolladores. Nos permite crear componentes utilizando JSX, de esta forma podemos combinar **Javascript** dentro de nuestro HTML. Cada componente puede tener su archivo con extension .js o .jsx de acuerdo a las reglas que manejemos en nuestro proyecto. 


![React](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7dOATxXeVNwYUdaDkhMU78uWL8Af16NjWDIfYwrTM-mPxivIhWRb5EOGwlKYZS5qSpMY&usqp=CAU)

```javascript
import React from "react";

export default function App() {
  return (
    <div>
      <h1>Utilizando React 😎!</h1>
    </div>
  );
}
```

Aprende más de React en: https://reactjs.org/


##Vue##

Framework progresivo mantenido por la comunidad, trabaja principalmente con el patrón MVVM (model-view-view-model). Al ser progresivo permite ir desde lo más básico hasta escalar nuestro proyecto a funcionalidades más complejas. Además, maneja ciertas similitudes con Angular con el two way data binding, las directivas, entre otros.


![Vue](https://miro.medium.com/max/900/1*OrjCKmou1jT4It5so5gvOA.jpeg)

```javascript
<template>
  <div id="app">
    <img alt="Vue logo" src="https://vuejs.org/images/logo.png">
  </div>
</template>

<script>
 export default {
   name: 'App',
 }
</script>
```

Aprende más de Vue en: https://vuejs.org/
Class components vs Functional components
Tags: javascript, webdev, programming, react
Published: 2021-04-02 19:59:51

Cuando empezamos a desarrollar una aplicación en **React** siempre esta presente la duda entre usar componentes orientado a clases o componentes funcionales. En este artículo trataremos de explicar las ventajas y desventajas de cada uno.

###Class Components

Fueron la primera forma de escribir componentes en React, tienen un ciclo de vida particular además de manejar un *scope* cerrado. Se debe considerar que al ser una clase, podemos implementar y heredar, entre otras técnicas de la programación orientada a objetos (POO).

Sobre su ciclo de vida, tienen métodos propios que nos permite ejecutar distintos eventos en casi cualquier momento. 


![Class Components lifecycle](https://i2.wp.com/programmingwithmosh.com/wp-content/uploads/2018/10/Screen-Shot-2018-10-31-at-1.44.28-PM.png?ssl=1)


A continuación veremos un pequeño ejemplo de la sintaxis de un class component en React.

```javascript
import React from 'react';

class MyHomePage extends React.Component {

 render() {
   return <h1>Soy un Class Component en React</h1>
 }
}

export default MyHomePage;
```

###Functional Components

A diferencia de los class components, no tienen acceso a los *lifecycle methods* como tal, sino más bien trae los increíbles Hooks, los cuales nos facilitarán el desarrollo y control de elementos en nuestro componente. Los principales son *useState, useEffect, useRef, useContext, useReducer, useMemo*. 

Otro punto importante en este tipo de componentes es el **scope** que manejamos, tenemos cierta flexibilidad para usar elementos que estén por fuera de nuestro componente.

Conozcamos un poco más de los hooks:

![Functional Components Hooks](https://miro.medium.com/max/800/1*J1OWWbEDit18yTrM0sthgA.png)

Recordar que los *hooks* pueden convivir perfectamente con los class components y de esta manera lograr una migración progresiva del proyecto 😎
Awesome Loading CSS Animation
Tags: codepen, javascript, html, css
Published: 2021-04-02 19:31:12

---
title: Awesome Loading CSS Animation
published: true
tags: codepen, javascript, html, css
---


{% codepen https://codepen.io/ahmadbassamemran/pen/yLgMwxY %}


<hr/>
[Please Like, Share and Subscribe  my channel and click the bell icon to get new video updates:](https://www.youtube.com/AhmadEmran?sub_confirmation=1)
<hr/>


{% youtube sn0LcmTwcC8%}
MY-CMD-CLI npm package
Tags: npm, npmpackage, pakcage
Published: 2021-04-02 18:40:31


# MY-CMD-CLI:
You can run multiple command with one command name. You can manually create, delete and update command.
## Demo:
![my-cmd-cli demo gif](https://user-images.githubusercontent.com/46472626/113443268-3df7c380-940f-11eb-920d-c0cd35d396d3.gif)



## Install my-cmd-cli:
```
npm i -g my-cmd-cli
```
### To know all cammand, run:
```
my -h
```
## Usable Commads: 
- **`my add`**   ==>  to add new nameing commands
- **`my delete`**  ==> to delete nameing commands
- **`my update`**  ==> to update nameing commands
- **`my < command name >`**  ==> to run your saved nameing commands
- **`my all`**  ==> to show all saved naming commands
- **`my -h`**  ==> to get help
- **`my -v`** ==> to see version of this package


### ***`It made on linux, It may not run perfectly on windows. But a big welcome to you to make it possible for windows also!`***

## You can contribute: [Github repo](https://github.com/sunanda35/my-cmd-cli)
Dev Youtube Channel
Tags: webdev, html, codenewbie, css
Published: 2021-04-02 18:28:47

Hi everyone,
hope you all are doing great. I am starting a new youtube channel for tech stuff related to web development. I need support from all of you .if you have some time please share and subscribe to my channel.(thanks)
Channel link : youtube.com/channel/UC9DAoVQx6z9PenVD7cp3Ijw?sub_confirmation=1
{% youtube   odo--6fhD_w %}
Display Current Environment in Angular App
Tags: javascript, angular, webdev
Published: 2021-04-02 18:20:00

Have you ever wanted to display which environment your user was in somewhere in your Angular application? Maybe display a Beta label in the header of the app if they are currently using the Beta environment? Let’s learn how!

## Environments

By default, Angular provides two files in your environments folder:

* environment.prod.ts
* environment.ts

There’s not much to these files by default. For example, the **environment.prod.ts** file probably looks like the following:

```javascript
export const environment = {
  production: true
};
```

These files are referenced when serving and building your application. For example, when you build your application for production, you’re probably used to running the following command:

```
ng build --prod
```

That’s actually shorthand for the following:

```
ng build --configuration=production
```

Your configurations are defined in your **angular.json** file. You’ll see the following in there:

```javascript
"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]
```

When Angular builds your app, it swaps out the default environment file with the respective file that matches the configuration you specified. We can use that to our advantage and include other information we want to use within the application specific to the environment.

Within the **environment.prod.ts** file, let’s add a **name** property and give it a value of **PROD**.

```javascript
export const environment = {
  name: 'PROD',
  production: true
};
```

Within the **environment.ts** file, let’s add a **name** property and give it a value of **DEV**.

```javascript
export const environment = {
  name: 'DEV',
  production: false
};
```

## Display Environment

Now we’re ready to display the environment name in our application. Open the component where you want to display the environment.

First, we need to import the environment.

```javascript
import { environment } from '../environments/environment';
```

Next, let’s create a variable called **environmentName** to hold our name value.

```javascript
environmentName: string;
```

Within our **ngOnInit** event, we can assign the name value to the variable we just created.

```javascript
ngOnInit(): void {
  this.environmentName = environment.name;
}
```

All that’s left to do is display it in the template!

```html
{{ environmentName }}
```

If you wanted to use a different color depending on which environment you were in, you could always create a CSS class that styles the environment name. Use the [ngClass](https://angular.io/api/common/NgClass) directive to conditionally include the class based on the environment.

```html
[ngClass]="{ 
  'env-dev': environmentName === 'DEV',
  'env-prod': environmentName === 'PROD' 
}"
```

---
**Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!**
Trying to get your docker app on AWS?
Published: 2021-04-02 18:15:41

We're looking to talk to a few developers trying to deploy their Docker app on AWS. We have a 1-click solution that will create a prod-ready infrastructure and automated pipeline to host your app. All you need to do is 'git push'. 

Early birds get it for free. Email me if you want to give it a run safeer@tinystacks.com. Spent six years at AWS and would be happy to provide any advice on architecture if you give it a whirl :)
"Hello World" com Kotlin e Javalin
Tags: kotlin, rest, javalin, backend
Published: 2021-04-02 18:07:48

Eu lembro que a primeira vez que me ofereceram uma oportunidade para trabalhar com Kotlin achei estranho e acabei perguntando na hora: _"Ah conhecço Kotlin, mas não serve pra desenvolvimento de apps?"_

Bem, sim e muito mais!

Kotlin é uma linguagem multiplataforma desenvolvida pela JetBrains, que combina programação orientada a objetos com funcional, podendo ser utilizada para desenvolvimento de aplicações no lado do servidor, desenvolvimento Android, compilar JavaScript e código nativo. 

Sua principal vantagem está em ter um código mais conciso e expressivo, mantendo compatibilidade com outros códigos em Java além de ter uma boa curva de aprendizagem.

Dito isso, como seria uma aplicação web desenvolvida em Kotlin. É o que irei demonstrar neste texto.


## Criando um servidor web

Neste exemplo que eu fiz eu irei trabalhar com o Javalin.
Javalin é um framework leve que serve tanto para Java como para Kotlin. 

Existem vários outros frameworks para Kotlin, mas acho que pra uma rápida demonstração ele serve, principalmente para quem está começando a programar nessa linguagem, já que não é necessário aprender muitos conceitos do framework para poder usá-lo e subir uma aplicação.


## Olá Mundo!


Uma vez que você criou e configurou seu projeto, basta começar a adicionar as dependências para por nosso servidor em pé.

No meu exemplo eu utilizo o Gradle.
 
Primeiramente eu adicionei a biblioteca do Javalin e algumas outras dependências.

```gradle
implementation 'io.javalin:javalin:3.13.4'
implementation 'org.slf4j:slf4j-simple:1.7.30'
```


Após isso criei um arquivo `Main.kt` e adicionei o seguinte conteúdo:

```java
import io.javalin.Javalin

fun main() {
    val app = Javalin.create().start(7000)
    app.get("/hello") { ctx -> ctx.result("Hello World") }
}
```


Basicamente estou dizendo para que seja criada uma aplicação que escute na porta **7000**, e que ao acessar o recurso **/hello** (GET http://localhost:7000/hello) retorne a mensagem "Hello World".

Executando a chamada no Postman temos o seguinte:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yhsy7tb3hlpxoxcymux.png)

Simples, não?

A partir disso podemos evoluir cada vez mais a nossa aplicação (incluir outros endpoints, integração com banco de dados, segurança) mas isso pode ficar para um próxima ;)


## Referências

[https://kotlinlang.org/docs/server-overview.html](https://kotlinlang.org/docs/server-overview.html)

[https://javalin.io/](https://javalin.io/)
What is the best approach; hashing password in req.body.password or at the database user.password in express-mongoose web app
Tags: node, express, mongoose, mongodb
Published: 2021-04-02 17:44:05

I am creating a user post route in which i'll be doing the password hashing. So what is the best approach for hashing password is it this;

let user = await User.findOne({email: req.body.email})
if (user) return res.status(400).send('The user already exists')

user = new User({
    name : req.body.name,
    email: req.body.email,
    password: req.body.password
})


// hashing user passwords
const salting = await bcrypt.genSalt(10)
user.password = await bcrypt.hash(user.password, salting)
Hashing it on the database level or this;

let user = await User.findOne({email: req.body.email})
if (user) return res.status(400).send('The user already exists')

 // hashing user passwords
    const salting = await bcrypt.genSalt(10)
    const hashedPassword = await bcrypt.hash(req.body.password, salting)

user = new User({
    name : req.body.name,
    email: req.body.email,
    password: hashedPassword
})
hashing on the request level, or there is a better way of doing the hashing? Your opinions/recommendation will be much useful. Thanks in advance.
Create a Notebook app with React, ChakraUi, and framerMotion
Tags: typescript, react, webdev, javascript
Published: 2021-04-02 17:43:20

# Features
- CRUD operations
- Responsiveness
- Beautiful animations
- Image slider

# Built with
- Programming language - [Typescript](https://www.typescriptlang.org/)
- Front-end library - [Reactjs](https://reactjs.org/)
- UI components - [Chakra UI](https://chakra-ui.com)
- Animation library - [Framer Motion](https://www.framer.com/motion/)
- Notes display - [react-stack-grid](https://github.com/tsuyoshiwada/react-stack-grid)
- Forms Validation - [React hook form](https://react-hook-form.com/)
- Images placeholder - [blurhash](https://www.framer.com/motion/)
- Progressive image loading - [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image)
- Icons - [react icons](https://react-icons.github.io/react-icons/)

**Demo Link:** [Notebook](https://ma-ahmad.github.io/notebook)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/notebook)