teleren/devto huggingface dataset:
Understand Asynchronous Tasks with Coffee Shop Example ☕
Tags: javascript, beginners
Published: 2022-04-29 08:32:00

Asynchronous programming is a form of parallel programming that allows a unit of work to run separately from the primary application thread.

When the work is complete, it notifies the main thread.

Let's take a real-life example to better understand the concept.

## Coffee Shop Example

- Jack: Hi. Please can I have a coffee? (First asynchronous task)

- First barista: For sure. Do you want something else?

- Jack: A piece of cake while waiting for the coffee to be ready. (Second asynchronous task)

- First barista: For sure. 

( Launch the preparation of the coffee )

- First Attendant: Anything else?

- Jack: No.

- First barista: 5 dollars, please.

- Jack: Pay the money and take a seat.

- First barista: Start serving the next customer.

- Jack: Start checking Twitter while waiting.

- Second barista: Here's your cake. (Second asynchronous task call returned.)

- Jack: Thanks!

- First barista: Here's your coffee. (First asynchronous task call returned.)

- Jack: Hey, thanks! Take his stuff and leave.

To make it simple, while you are waiting for someone else to do something for you, you can do other tasks or ask others to do more things for you.

This is basically asynchronous process.

*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
React Desing Pattern: Control Props
Tags: codesandbox, french, react, designpattern
Published: 2022-04-29 08:27:28

Pour ce design pattern on va avoir besoin de la notion de 'Controlled Component'.
Prenons comme exemple un formulaire avec un champ input, la valeur et le changement de ce champ est géré par le DOM.
Dans le cas d'un 'Controlled Component', c'est nous qui géront le stockage de la valeur et le onChange.

`<input type="text" value={name} onChange={handleName} />`

Tout simplement, passons à l'implémentation:

Step 1: Initiation du state
` const [name, setName] = useState("");`

Step 2: gestion du changement de valeur

<code>
const handleName = (event) => {
    setName(event.target.value);
  };
</code>

Step 3: controle de l'élément

`<input type="text" value={name} onChange={handleName} />`




{% codesandbox hc4e5g %}
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-04-29 08:00:11

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259169f6cb.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ A SQL developer walked into a NoSQL bar.

___A:___ They left because they couldn't find a table.
 -->
How to Customize the React TreeView Component
Tags: react, webdev, reactnative
Published: 2022-04-29 07:58:05

Learn how to easily customize the Syncfusion React TreeView component using templates in a React app. This video explains how to customize the appearance of TreeView nodes using a template. You will learn how to change the expand and collapse icons, customize the treeview nodes based on their levels and add icons and images to the tree nodes. 

Product Overview: https://www.syncfusion.com/react-ui-components/react-treeview

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download the example from GitHub: https://github.com/SyncfusionExamples/customize-the-appearance-of-the-react-treeview-using-templates

{% youtube NcwXe0Bc26Q %}
Question - Best way to handle background jobs using Firebase functions?
Tags: firebase, sidekiq, node, rails
Published: 2022-04-29 07:46:27

---
title: Question - Best way to handle background jobs using Firebase functions?
published: true
description: Exploring Firebase, I love everything about it, but only reason why I have not committed yet if because I do not know how to handle async jobs
tags: firebase, sidekiq, node, rails
cover_image: https://pbs.twimg.com/card_img/1519887090498084865/hGEQndtI?format=jpg&name=small
---
Hello Firebase community,

How do you really handle background jobs using Firebase function. I have build [Firekiq](https://github.com/dahal/Firekiq), and it works. But do you have better options? Here are few things I am trying to get out of it:

* Cron jobs (similar to scheduler on heroku), and it looks fairly simple on firebase.
* Async jobs, similar to [Sidekiq](https://github.com/mperham/sidekiq) on ruby/rails.
Array.reverse() - for reversing an array
Tags: javascript
Published: 2022-04-29 07:37:00

This article is the ninth of the [Array Method Series](https://dev.to/dillionmegida/series/17614). In this article, I will explain the `reverse` Array method.

## What is the Reverse Method?
I think the name says it all 😅. The `reverse` method of arrays reverses the array such that the last item in the array becomes the first, and the first item becomes the last.

This method modifies the array, so I recommend cloning before reversing to avoid mutation conflicts in your applications.

## Syntax of the Reverse Method

```js
array.reverse()
```

While this method mutates the array, it also **returns** the reversed array.

## Without the Reverse Method
The `reverse` method is an abstracted function that flips the array from one side to the other. Here's an example imitating the `reverse` method:

```js
const array = [1, 2, 3, 4, 5, 6, 7, 8]

const reversed = []

for (let i = array.length - 1; i > -1; i--) {
  const item = array[i]
  reversed.push(item)
}

console.log(reversed)
// [8, 7, 6, 5, 4, 3, 2, 1]
```

This loops through each item in the array from the back to the front. Although this loop does not mutate the original array, it is similar to what `reverse` does in the background.

## With the Reverse Method

Here's how you achieve the previous result with `reverse`:

```js
const array = [1, 2, 3, 4, 5, 6, 7, 8]

const reversed = array.reverse()

console.log(reversed)
// [8, 7, 6, 5, 4, 3, 2, 1]

console.log(array)
// initial array is also modified
// [8, 7, 6, 5, 4, 3, 2, 1]
```

As you can see, the initial array is also modified. So to avoid mutation conflicts, you can clone the array like this:

```js
const array = [1, 2, 3, 4, 5, 6, 7, 8]

const reversed = [...array].reverse()

console.log(reversed)
// [8, 7, 6, 5, 4, 3, 2, 1]

console.log(array)
// [1, 2, 3, 4, 5, 6, 7, 8]
```
With this, the initial array stays the same, and you can get the reversed array also.
Create a class from a JSON in Visual Studio 2022
Tags: visualstudio2022, vs2022, productivity, csharp
Published: 2022-04-29 07:30:02

It happens very often, during the development, to have some objects that are returned by some API and of which we want to create a class.
If the object are big with a lot of subnodes, it should be a long activity and, first of all, very annoying.

The Visual Studio team improved this feature in the last version of the IDE.

## How to use this feature
Create an empty class or just a file with the namespace declaration.

![an empty file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdice87vf1mlha28klto.png)
 
Then you can copy your JSON into the clipboard and in Visual Studio go to **Edit -> Paste Special -> Paste JSON as Classes**

![Paste special menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4113qrfpgokp773tzg1v.png)

This feature is very fast right now. With the previous version of Visual Studio, sometimes, you had issues to create a class from a big JSON file.

## Keyboard Shortcut

By default this command is not associated to any keyboard shortcut.
In my environment I configured that from the menu **Tools -> Options**.

![Paste as Class keyboard shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haoco43ij6fqn1ka8fq2.png)

I choosen Ctrl+V, Ctrl+J but you can choose your favourite shortcut for this special action.
NoSQL & SQL together: Spring Boot example🤯
Tags: database, java, programming, sql
Published: 2022-04-29 07:21:45

![Spring Boot example using the Oracle Database API for MongoDB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw41baqytw43sxiwrxo1.png)

👉Oracle Database API for MongoDB: use your autonomous database as if it was a MongoDB database🥰

- [Spring Boot sample app on GitHub](https://github.com/loiclefevre/autonomous-database-for-developers/tree/main/mongodbapi)
- [Blog post with documentation links](https://blogs.oracle.com/database/post/mongodb-api)
My new book，Open source Management System， vue-bag-admin
Tags: vue, vue3, vite, admin
Published: 2022-04-29 07:20:24

>vue-bag-admin，use Vue3+Vite2.6+TypeScript+ant-design-vue，Provide the basic framework, quickly build enterprise-level background products, responsive management background system, using the form of building dependency packages, development only need to introduce dependency

[源码地址](https://github.com/hangjob/vue-bag-admin)

### install
```bash
npm i vue-bag-admin -save
```
### App.vue
```html
<template>
    <router-view></router-view>
</template>
```
### main.js
```js
import { createApp } from 'vue'
import App from './App.vue'

import install from 'vue-bag-admin'
import 'vue-bag-admin/lib/style.css'
import 'vue-bag-admin/mock' // 进入 mock 数据

createApp(App).use(install).mount('#app')
```
![预览图](https://i.bmp.ovh/imgs/2022/04/29/fd10f9814b7389f3.png)
![预览图](https://i.bmp.ovh/imgs/2022/04/29/1f1e685c931fc159.png)
JS Refactoring Combo: Simplify Duplicated Function Call Inside If-Else Statement
Tags: javascript, beginners, programming, webdev
Published: 2022-04-29 07:08:28

If-statements can contain duplicated statements with minimal differences. For example, copy-paste changes can result in such code duplication. The duplication can often be simplified by extracting the difference using the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) and reducing the if-else to the deduplicated statement.

### Before (Example)
```javascript
if (direction === "left") {
  move(original.x, -10);
} else {
  move(original.x, 10);
}
```

### Refactoring Steps
![Simplify duplicated function call inside if-else statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbqeiyt14f5k1887qnxg.gif)

> 💡&nbsp;&nbsp;The refactoring steps are using [P42 JavaScript Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) v1.99

1. [Extract variable](https://p42.ai/documentation/code-assist/extract-variable) twice with the same variable name
1. [Split declaration and initialization](https://p42.ai/documentation/code-assist/split-variable-declaration-and-initialization) of both extracted constants
1. [Move duplicated first statement out of if-else](https://p42.ai/documentation/code-assist/move-first-statement-out-of-if-else)
1. [Move duplicated last statement out of if-else](https://p42.ai/documentation/code-assist/move-last-statement-out-of-if-else)
1. [Convert the if-else statement into a conditional expression](https://p42.ai/documentation/code-assist/convert-if-else-to-conditional-expression)
1. [Merge variable declaration and initialization](https://p42.ai/documentation/code-assist/merge-variable-declaration-and-initialization)
1. [Inline variable](https://p42.ai/documentation/code-assist/inline-variable)

### After (Example)
```javascript
move(original.x, direction === "left" ? -10 : 10);
```
Better Code Saul S1E2: Value Objects and Immutability
Tags: bettercodesaul, codingpatterns, programming, valueobjects
Published: 2022-04-29 07:05:38

Here it is the 2nd episode of my series on good coding practices.

This time I will talk about using Value Objects in your code and Immutability.

In the final slides there will be some resources if you wish to do some further research 😊

Hope you enjoy and stay put with the next episode.

Here are the slides: [slides.com/kevincittadini/value-objects-and-immutability](https://slides.com/kevincittadini/value-objects-and-immutability)
PSA: Your dev.to post will most likely get stolen by this blog with no link to the original source or other form of credit.
Tags: discuss
Published: 2022-04-29 07:03:35

When investigating the SEO of my own blog I stumbled upon my own article, copied from dev.to to the "blog" [https://lzomedia.com/](https://lzomedia.com/).

The blog seems to gather articles from different webpages, and for some of them it includes backlinks to the original source. However, for dev.to posts, there is only a footnote at the bottom of the page stating **Source: Dev Community**. No link to the original source. No canonical URL. No name. Nothing.

**EDIT:** The blog owner even seems to be a member of this community... {% embed https://dev.to/lzomedia %}

## Some examples 

**lzomedia:**
https://lzomedia.com/blog/how-i-automatically-generate-grocery-shopping-lists-with-trello-aws-lambda/ 

**original:**
{% embed https://dev.to/aws-builders/how-i-automatically-generate-grocery-shopping-lists-with-trello-aws-lambda-1563 %}

---

**lzomedia:**
https://lzomedia.com/blog/add-a-smart-back-to-top-button-to-your-blog-%f0%9f%91%93%f0%9f%94%9d/

**original:**
{% embed https://dev.to/robole/add-a-smart-back-to-top-button-to-your-blog-ci7 %}

---

**lzomedia:**
https://lzomedia.com/blog/steps-to-delete-aws-resources-ec2-vpc-using-ansible/

**original:**
{% embed https://dev.to/aws-builders/delete-aws-ec2-vpc-using-ansible-5gh0 %}

---

**lzomedia:**
https://lzomedia.com/blog/what-does-your-dream-work-setup-look-like/

**original:**
{% embed https://dev.to/tmchuynh/what-does-your-dream-work-setup-look-like-4l2p %}
Understanding Kubernetes: part 46 – Execute commands in containers
Tags: kubernetes, devops, docker, beginners
Published: 2022-04-29 06:49:46

---
title: Understanding Kubernetes: part 46 – Execute commands in containers
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17sxhc0q8g1j0r652euf.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with a focus on how to execute commands inside a Pod in a container.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17sxhc0q8g1j0r652euf.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogxtllmxg0ps8klw9sxg.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 173 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Automating code review on commit
Published: 2022-04-29 06:45:01

# HOW TO AUTOMATE CODE REVIEWS ON COMMITS

Imagine the hustle of spending 1- 4 hours on code review every day. Code review automation may save countless wasted efforts.

This Article may walk you through steps on how to add automated code reviews that may be executed during every code commit.

Codacy is one of the tools that may be used to achieve this.

Codacy is an automated code review tool that helps developers ship better software, faster. With Codacy, you get static analysis, cyclomatic complexity, duplication, and code unit test coverage changes in every commit and pull request. 

## Steps to integrate your project with Codacy

## 1. Sign up

You may use your Git provider such as GitHub, GitLab, or Bitbucket to sign up to Codacy. This links your Codacy user with your Git provider user, making it easier to add repositories to Codacy and invite your teammates.

![sign up](http://res.cloudinary.com/clickpesa/image/upload/v1650444797/engineering-blog/images/f47nkua8llyolvnmeqdu.png)


## 2. Grant access

Codacy will request access to your Git provider and will require you to provide a few details regarding your organization. (this helps them on use case evaluation).


![grant access](http://res.cloudinary.com/clickpesa/image/upload/v1650444920/engineering-blog/images/vtxfeitocdow3fw4uqqa.png)

## 3.  Choose organization

Now you will be required to join the organizations that contain your repositories

`	`Note:	

codacy name the organizations similar to your git repository user name. 

Example If your repository is “github.com/Fruitsandvegies”. Then the name of your organization will be “Fruitsandvegies”.

![choose organization](http://res.cloudinary.com/clickpesa/image/upload/v1650444969/engineering-blog/images/zc6idpiadlinetgvui8i.png)

## 4. Adding repository

By selecting the organization on step 3, codency will list all related repositories available. Select the “add” option to add the repository for review. Codancy will immediately set up everything so as to be ready to analyze on the next commit.

Note:

You can add the repository to Codancy only if you have permission to that repository.

![adding repository](http://res.cloudinary.com/clickpesa/image/upload/v1650445009/engineering-blog/images/eiwpirbmddgpnq1mwt8d.png)


## 5.  Review result of the analysis

`	`Select “Go to repository” once the analysis has completed reviewing the results.


Detailed analysis result

![review result of the analysis](http://res.cloudinary.com/clickpesa/image/upload/v1650445048/engineering-blog/images/yxdypvp8vbvhpsyav2kx.png)



The initial analysis from Codancy will be based on the default configuration. Codacy provides tweaks to allow you to set up a custom configuration such as files to ignore, code pattern, and adjust quality settings.
Download the Android App
Published: 2022-04-29 06:37:50

Hi! Friends, I have created a android mobile app to keep updated and send my latest articles to you and my all readers. So, I request you please download my android mobile app.

## Here is some features of my android app

- Listen Tutorials
- Read Tutorials
- Website Development Tutorials
- App Development Tutorials
- Tech Tutorials
- AI and Blockchain Tutorials
- Share Tutorials
- Comment Tutorials
- Video Tutorials
- Share App
- Rate App
 
So, please download and keep updated with my latest articles, tutorials or codes. It is completely free:)

[Download ReadyMadeCode Android App](https://play.google.com/store/apps/details?id=com.company.readymadecode)

Thanks:)
Happy Coding:)
Install Oh my ZSH on Windows without WSL
Tags: zsh, widnows, webdev
Published: 2022-04-29 06:35:19

This is going to a really simple post on Installing ZSH on Windows.
And I'm going to assume you already have [Windows Terminal](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=en-in&gl=in) Installed, along with [Git SCM](https://git-scm.com/download/win)
 

But for some reason I feel GitBash + ZSH seems to be really smooth experience on installing plugins. Specially the auto spelling corrections :P

### Preview
<img width="100%" style="width:100%" src="https://media.giphy.com/media/UV6ARfi5FJaT3wFLVq/giphy.gif">

![Windows Oh my zsh via posh](https://giphy.com/gifs/windows-terminal-zsh-UV6ARfi5FJaT3wFLVq)



## Start here :

## Download Latest ZSH tar file
https://packages.msys2.org/package/zsh?repo=msys&variant=x86_64

### Optional Install PeaZip on Windows (to open TAR file)
https://peazip.github.io/
``winget install -e --id GiorgioTani.PeaZip``

## CD to `C:\Program Files\Git`

![extract tar file contect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwsm2uvfuo2r2gu62ys2.png)

- extract all contents of zsh ..tar file to this folder

Now open GIT Bash CD to `C:\Program Files\Git` and type: `zsh`
![Git bash via Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeqocw7apr0kqt4j9nq5.png)


- in side terminal type: zsh

![ZSH in git bash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqxwchroc3ynne6hx4dz.png)




### Create config files
```bash
autoload -U zsh-newuser-install
zsh-newuser-install -f
```


## Finally open `notepad ~/.bashrc`
- Add to the top of the file
```
if [ -t 1 ]; then
  exec zsh
fi
```

## Install Plugins
```
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-completions
git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-autosuggestions
```
 - Now open `notepad ~/.zshrc`
 - And Add plugins under this section `# Which plugins would you like to load?`

```
plugins=(git lighthouse zsh-completions zsh-autosuggestions zsh-syntax-highlighting)
```


![Windows ZSH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96attv44rdqchrvej0bg.png)
 

> ps. You can even use Oh-my-posh with Terminal 7.xx + on windows.
![Powershell 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7mpdmy5rb3j5ncq86ld.png)
WN17: What is the best piece of content you found?
Tags: career, productivity, learning
Published: 2022-04-29 06:35:10

Another week has passed, and here we want to get the best pieces of content you found during the week!

It really can be anything:

- videos
- posts
- tweets
- books
- motivation
- etc.

Share anything that added value to your journey and could add value to other people's journey.

So, what is the best piece of content you found this week?
Elixir Today: Create a Hollow Square using Elixir
Tags: elixir, functional, programming, beginners
Published: 2022-04-29 06:17:20

### Process

- create a file named "hollow.ex"
- write the code

```
hollow = fn number ->
  for i when i < number <- 0..number do
    for j when j < number <- 0..number do
      if i === 0 || i === number - 1 do
        "*"
      else
        if j === 0 || j === number - 1 do
          "*"
        else
          " "
        end
      end
    end
  end
  |> Enum.into("", fn string ->
    string = Enum.join(string)
    "#{string}\n"
  end)
end

IO.puts(hollow.(10))
IO.puts(hollow.(5))

```

- run `elixir hollow.ex` on your terminal.

### Result

```
**********
*        *
*        *
*        *
*        *
*        *
*        *
*        *
*        *
**********

*****
*   *
*   *
*   *
*****
```


> Happy Coding!
Making your :focus style fit in with one line of CSS
Tags: a11y, css
Published: 2022-04-29 05:54:10

I read a post the other day about bad devs [removing focus styles](https://dev.to/colabottles/stop-removing-focus-2o7b), which really harms accessibility.

The usual reason for doing so is that the browser native focus style is ugly and clashes with the site theme. And fair gripe, it is ugly. 

So here's the simple fix, which is just as easy as removing the style:

```css
:focus {
    outline-color: /* your foreground text colour */;
}
```

Since we're just defining outline _color_, this won't add an outline to things that don't already have one. If you have a more descriptive rule for specific elements, they'll simply override this 0-specificity rule.

Please make sure the colour you use has high enough contrast to be noticeable -- although if the colour you're using for text doesn't, your site has another problem 😀