teleren/devto huggingface dataset:
Array Destructuring in JS!
Tags: javascript, tutorial
Published: 2021-12-22 14:59:24

Hey **fellow creators**

*Destructuring* is a nice way to create some variables from an array or an object! Let's learn how to do it in less than a minute.
 
If you prefer to watch the video **version**, it's right here :

{%youtube hq9AJxnVgZs%}

##1. The syntax.
You have to follow the same syntax every time. For example:
```js
const array = ["#ff0000", "#008000", "#0000ff"];

const [red, green, blue] = array;

console.log(red, green, blue);
```
If you look in your console, you'll see that each name is linked to its colour:

![image of the console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eepnqihk60p8y4bsno9l.png)

##2. You can also give some default values.
You can give some default values, just in case that array is empty:
```js
const array = [];

const [red = "1", green = "2", blue = "3"] = array;

console.log(red, green, blue);
```
In your console will therefore show "1 2 3".

##3. You can also ignore some values!
Remove one colour name from the array but leave the comma:
```js
const array = ["#ff0000", "#008000", "#0000ff"];

const [red = "1", , blue = "3"] = array;

console.log(red, blue);
```
It'll ignore the second value and simply create a constant for red and blue:

![Image of the console showing the two colours](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c303fs7tknvm7y9s5fxp.png)

##4. Create a constant for all the remaining parts of an array.
```js
const fruits = ["kiwi", "strawberry", "lemon"];

const [first, ...others] = fruits;

console.log(first, others);
```
It created one constant for the first element and an array of the remaining element named "others" :

![Image of the console showing the first constant and then the second one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nemnkqs0fsi2erwg8cw8.png)

You now know how *destructuring* works in Javascript!

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*Happy coding!*

Enzo.
Custom Progress Bar In HTML CSS
Tags: html, css, webdev, codenewbie
Published: 2021-12-22 14:56:14

The progress bar is mostly used to show in the website to show progress with value. So here we made a custom progress bar in HTML and CSS.

Also read:- [Number Scrolling Preloader In HTML CSS](https://w3hubs.com/custom-progress-bar-in-html-css/)

In these elements, we used custom colors and also we used CSS properties. To make this element more attretive and beautiful.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/custom-progress-bar-in-html-css/)
Hooks in reactJS
Published: 2021-12-22 14:54:23

Hooks make it possible to use React's state and other features without needing to create a class. Hooks are state and lifecycle aspects in React that function components "hook onto." It is ineffective in a school context. Hooks are backward-compatible, meaning they don't add any new functionality. It also doesn't substitute for your knowledge of React concepts.

##When Should You Use Hooks?
If you create a function component and later wish to add any state to it, you must first convert it to a class. However, you can now do so by incorporating a Hook into an existing function component.

## **Hooking Rules**
Hooks are identical to JavaScript functions, but while utilizing them, you must obey these two rules. The hooks rule ensures that all of a component's stateful logic is visible in its source code. These are the rules:

## 1. Only use Hooks at the highest level.

Hooks aren't supposed to be called from loops, conditions, or nested functions. At all times, hooks should be utilized at the top level of React methods. When a component renders, this rule ensures that Hooks are called in the same order each time.

## 2. Hooks should only be called from React functions.

Hooks can't be called from JavaScript functions. Hooks can be called from React function components instead. Custom Hooks can also be used to call Hooks.


## custom Hooks in React

Custom Hooks are a way to reuse stateful logic (such as setting up a subscription and remembering the current value), but each time you use one, all states and effects within it are completely isolated. What causes a custom Hook to become isolated? Each Hook call is given its own state.
React.js,PropTypes,State-props,JSX,Hooks,custom hooks…
Tags: react, javascript, html, css
Published: 2021-12-22 14:53:08

**React.js,PropTypes,State-props,JSX,Hooks,custom hooks…**

There are currently a number of web development frameworks in react.js.React is a free and open-source front-end JavaScript library [3] that builds user interfaces based on UI elements.It is invented by Meta (formerly Facebook) in 2013 .React is currently managed by Facebook's developers.React can be used as a base in the development of single-page or mobile applications.React depend on state management and rendering that state to the DOM.If a beginner wants to create a website with React, I will discuss about the issues that need to be known.  
**PropTypes:** React props, which stands for “properties,” are used to send data from one component to another.React has an internal mechanism for props validation called PropTypes.Props and PropTypes are important processes because they work pass only readable features in the feedback elements.
Benefits of PropTypes : PropTypes makes it easy to catch bugs caused by passing data of data type .
 
**State-props:** Props are short for properties. Props are used to pass data between React components. Mainly react data flow between components is unidirectional . It can pass data from upper level to lower level.React maintains inheritance

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b5b6ogck82j2r3wq1e0.PNG)
Here data is being passed from the previous component to the following component through props.
State allows elements to create and manage their own data.State on the other hand is still a variable, but directly initialized and managed by the component.

**JSX:** JSX stands for JavaScript XML.HTML can be written or added to React via JSX.JSX can easily convert HTML tags by responding to elements.It's faster than regular JavaScript.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpvh5rib57w36oosslsg.PNG)
Here <div>, <h 3>, <p> these are all HTML tags used in React in JSX.

**Hooks:** Hooks are backwards-compatible,which means it does not contain any breaking changes.  This page provides an overview of Hooks for experienced React users. This is a fast-paced overview.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/949c97jvd7piq1cqc6ay.PNG)
Here, useState,useEffect are basic hooks.usestate use to  declare a state in React app. UseEffect allows us to perform side effects in the function components.
**custom hooks: **A custom hook is a JavaScript function whose name starts with "use" and it can call another hook. When using react, the user can make hook calls for his work needs.
In this picture usecart is a custom hook.This hook I used to calculate the price of the product

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnuy4awzf3d0ejs3v1wb.PNG)
Apply RTI Online: RTI Law Overview, Challenges and Remedies.
Tags: applyrtionline, applyonlinerti, rtionlineapplication, onlinertistatus
Published: 2021-12-22 14:46:49

**Apply RTI Online: RTI Law Overview, Challenges and Remedies.**

The Right to Information Act of 2005 is one of the most revolutionary rights in our constitution. This act aims to legitimize democracy by empowering ordinary people. The law facilitates transparent systems and eliminates red tape. The government and authorities respond to Indian citizens by providing them with the desired information. 

In recent years, Indian citizens have made significant use of this right to request information and to have their questions answered. The growing awareness of this law and its power to solve important issues prevailing in society has dramatically increased the use of this law. A citizen must complete an RTI information form addressed to the relevant department - Pay RTI Taxes Online to request information from the government agency. Government authorities are required to respond to the request and provide the desired information to the requester within 30 days of the request. It is up to government authorities and regulatory bodies to process the request without delay. Facilitates the needs of the community.

However, there is no sanction clause mentioned in the law in the event of breach and delay on the part of the public authorities. The act must include a reason for sanction in order to forcefully apply the act and make the authorities responsible for dealing with citizens' complaints quickly. 

Procedure: 

It is not clear what the appeal procedure is using the Right to Information Act. The act alone mentions the RTI information form which must be completed with the RTI fees online at RTI Guru. However, this law brought about a significant paradigm shift in democracy and promoted the well-being of citizens as well as the transparency of the system. This revolutionary act must be done as best as possible to improve governance and promote accountability.

For More Information Visit Us At:
https://rtiguru.com/ 

For More Information:
https://www.article1.co.uk/Articles-of-2020-Europe-UK-US/apply-rti-online-rti-guru-portal-and-get-decision-30-days
Spacemacs + React + TypeScript(.tsx) in the end of 2021, tested Linux and MacOSX with M1 CPU.
Tags: spacemacs, typescript, react
Published: 2021-12-22 14:45:13

---
title: Spacemacs + React + TypeScript(.tsx) in the end of 2021, tested Linux and MacOSX with M1 CPU.
published: true
description: Current setup for Spacemacs to use with web development
tags: spacemacs, typescript, react
//cover_image: https://direct_url_to_image.jpg
---
![Working example of Spacemacs with TS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmtib6xymopw1lub9a2q.png)

I've been figuring out a while how to make quick and simple config for spacemacs for web dev. There is lots of approaches in the internet, however, cherry-picking from those usually results in some problems as I didn't find any up-to-date one.
So I decided to share how to prepare simple and efficent spacemacs environment for web dev. Should work also for Angular, Vue etc but I didn't test it. Tested with NestJS, works like a charm.
M1 CPUs needs node 15+ but recommended is 16 (as it is LTS and the one I tested this conf with).
In order to make spacemacs work with React, Typescript, TSX files and work FAST I decided to use LSP server and make well configurated layers in spacemacs.

First you need to have installed:
`npm install -g typescript`
`npm install -g typescript-language-server`
`npm install -g prettier`

Additionally be sure your system has unzip binary available. This will be needed to install lsp-eslint package.

## .spacemacs file
below you can find 2 sections:
  1. dotspacemacs-configuration-layers
  2. dotspacemacs/user-config

### dotspacemacs-configuration-layers
```lisp
dotspacemacs-configuration-layers
   '(yaml
     auto-completion
     better-defaults
     emacs-lisp
     git
     graphql
     helm
     html
     lsp
     json
     multiple-cursors
     org
     prettier
     (shell :variables
            shell-default-height 30
            shell-default-position 'bottom)
     spell-checking
     syntax-checking
     version-control
     themes-megapack
     (typescript :variables
                 typescript-linter 'eslint
                 typescript-fmt-tool 'prettier
                 typescript-backend 'lsp)
     treemacs)
```
### dotspacemacs/user-config
```lisp
(defun dotspacemacs/user-config ()
  (setq create-lockfiles nil)
  )
```

Finally, use SPC-SPC, find lsp-install-server, select eslint (this uses unzip in your OS so as mentioned earlier be sure you have it available).

As a result it let you have all features like auto-completion, finding definitions, checking for type errors, linting, code lens, links to docs, code formatting (with .prettierrc file) and much more.


> BTW: Be sure your Spacemacs can access node binary. It may turn out your Spacemacs ENV variables aren't same as in shell you use. I had situation that shell in Spacemacs shown my normal shell variables but was running node with some internal ones. Solved by adding node path to .profile but way you got installed Emacs may require other approach.
Some react.js topic
Tags: react, javacript, programming
Published: 2021-12-22 14:45:05

**JSX(JavaScript XML)**
Generally we know JSX means JavaScript XML.

```
const JSXDemo = () => {
	return (
	 <h1>I am a React.js Developer</h1>
      )
}

```
Here are `<h1>I am a React.js Developer</h1>` this syntax is not HTML or not a string. This is called JSX. In JSX we can use dynamic. Developers can keep javascript expressions in JSX. JSX is also a javascript expression. After the compilation, JSX expressions are converted into a javascript function call and then catalyzed into a javascript object. In this JSX we can use the CSS attribute as a string for styling elements.

 **Context API**
React context is a method which allows developers to pass data from component to component without using props.
Example: 

```
import React from ‘react’;

export const UserContext = React.createContext();

const App = () => {
	return (
		<UserContext.Provider>
			<User></User>
		</UserContext.Provider>
)
}
```

**Custom hooks in React**
Developers can build their own hooks which are reusable functions. When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!
Example: 
Create a custom hook:

```
const useRainyStatus = (rainy) => {
	const [isRaining, setIsRaining] = useState(null);

	return isRaining;
}
```

Let’s now use this custom hook:

```
const rainyStatus = (props) => {
	const isRaining = useRainyStatus(props.raining.yes);

if(isRaining === null) {
		return ‘just wait a sec..’;
}
return isRaining ? ‘Raining’ : ‘Not Raining’;
}
```
Text-to-speech in ReactJS
Tags: react, html, tutorial, beginners
Published: 2021-12-22 14:38:51

Hello Guys today i am going to show you how you can convert your text into speech using "react-speech-kit".
This module will convert your text into voice and the voice will be played in your web application.This module is very cool and helps you to implement text-to-speech very easily as compared to vanilla javascript.

Lets get started....

##Installation - 
Firstly run this command into your terminal to install this module
```
npm i react-speech-kit
```

Then import the module 
```javascript
import { useSpeechSynthesis } from "react-speech-kit";
```

Then declare a variable named speak inside curly braces and assign the value of react useSpeechSynthesis() hook.
```javascript
 const { speak } = useSpeechSynthesis();
```

Then create a button which will have onClick method which will call an arrow function which have speak function and we will pass the text inside it to convert the text into speech.
```javascript
<button class='btn btn-primary btn-lg' 
onClick={() => speak({ text: 'Hello React Js' })}>
Speak
</button>
```

When you will click this button there will a voice saying "Hello React Js".

##Using this with From -
You can also give the input text using form and then convert the text to speech 

Example - 
```javascript
import React from "react";
import { useSpeechSynthesis } from "react-speech-kit";
const Speech = () => {
const [value, setValue] = React.useState("");
const { speak } = useSpeechSynthesis();
return (
	<div className="speech">
	<div className="group">
		<h2>Text To Speech Converter Using React Js</h2>
	</div>
	<div className="group">
		<textarea
		rows="10"
		value={value}
		onChange={(e) => setValue(e.target.value)}
		></textarea>
	</div>
	<div className="group">
		<button onClick={() => speak({ text: value })}>
		Speech
		</button>
	</div>
	</div>
);
};
export default Speech;
```
When you write something into the textarea and click the speech button the text written inside textarea will be converted to speech and a voice will be played saying the text you have written inside textarea.


###THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT IN THE COMMENT SECTION.

##You can help me by some donation at the link below Thank you 👇👇
☕ - https://www.buymeacoffee.com/waaduheck

##Also check these post
https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

https://dev.to/shubhamtiwari909/auto-sizing-columns-in-css-grid-n16

https://dev.to/shubhamtiwari909/hover-effects-with-hovercss-52fd

https://dev.to/shubhamtiwari909/python-data-science-libraries-for-beginners-1bjp
Django Tutorial Part 2 -- detail を表示するページを作る
Tags: django
Published: 2021-12-22 14:14:12


## 何をやるか

https://docs.djangoproject.com/en/4.0/intro/tutorial03/#writing-more-views

Django Tutorial の Part 3 前半

urls.py と views.py に detail を作って question_id のページにアクセスされたときに、それを html で表示するようにする。


# Detail を書く

url の　/questionId に　views の detail を表示するようにする

## views.py

```py
def detail(request, question_id):
    return HttpResponse("Detail of question: %s." % question_id)
```

detail に `question_id` を HttpResponse を返すロジックを書いて

## urls.py で detail に

```py
urlpatterns = [
    path('', views.index, name='index'),
    path('<int:question_id>/', views.detail, name='detail'),
]
```

root/question_id で views の detail に routing する url 設定を書く

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjd8c7m3kqh49aff23yf.png)

これで detail として表示された



# result を書く

## urls

```py
    path('<int:question_id>/results/', views.results, name='results'),
```

## results

```py
def results(request, question_id):
    response = "You're looking at the results of question %s."
    return HttpResponse(response % question_id)
```

これで `/1/results/` にアクセスすると

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niq90m8vrl2e6dldtlxw.png)

HttpResponse 関数の中で合体した結果が表示される。


## Next

https://docs.djangoproject.com/en/4.0/intro/tutorial03/#write-views-that-actually-do-something

list を map して表示する
Day 1... again
Published: 2021-12-22 14:35:21

I had to take some time off to study for the Cloud Architect Associate (which I passed) and had to put this on the backburner.  But 8 months later, we are back.   I updated my resume and certs on the HMTL, created a static website host in S3, created a CloudFront distribution with an ACM SSL certificate and a Web Application Firewall.  Now comes the wait for the DNS to propagate so I can access my site through www.boricuaenlanube.net.

Next step is to create the DynamoDB and read/write into it with JavaScript.
Virtual DOM and Diff algorithm in React
Tags: javascript, webdev, react
Published: 2021-12-22 14:30:13


## Frist We know how to Browser render process

When the browser received an HTML file then the browser this file parses the render engine and creates a DOM tree. DOM tree every HTML element that stays as a node. At the same time, Html came with CSS  style This CSS style parses with CSS parser. CSS parser creates CSSOM. This parse CSS and parse HTML creates a render tree. This render tree passed by layout phases and this time the render tree understand that it will be printed In any place. And After all, its does printing and we see them on the display. It is a Browser render process.
Then we any change and any update on the DOM the browser again creates a render tree.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z86f85sx7b2nyxv3wpls.png)


## Virtual DOM

It's also a tree, like a light copy of the DOM. React created 2 DOM trees one DOM tree is before the update tree and another is after the updated tree. Then react can compare in them. In this work, We can real DOM but this is very problematic. Because of this React created separate DOM. Where no problem renders tree repaint. It is a virtual DOM It works very easily. Virtual Dom is not expensive like browser DOM.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh2t1rfjfpp4icaj4kb9.png)

## How does Virtual DOM Work

We can think virtual DOM is simple tree. Of which various node is component one by one. when we change any components then at first create a new tree and there are changed components and creates new one's child components. React has two DOM tree representations one is after the changed DOM tree and another is before the changed DOM tree. React compare two DOM trees with a diff algorithm. Then React updated particularly that place on the real DOM.


## Diff algorithm

Compare the changes between the old and new virtual DOM, and then update the changed real DOM. While comparing the old and new virtual DOM, change the real DOM node. This process is called diffing. The algorithm that is used for the diffing process is called the diffing algorithm or reconciliation algorithm.
What is Virtual DOM? Difference between virtual DOM and real DOM?
Tags: javascript, react, beginners, programming
Published: 2021-12-22 14:29:36

In simple words, virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM by libraries such as React DOM. This process is called Reconciliation.
Reconciliation is a process to compare and keep in sync the two files (Real and Virtual DOM). Diffing algorithm is a technique of reconciliation that is used by React.

## Real DOM

- DOM is a language-neutral interface allowing programs and scripts to dynamically access and update multiple objects like content, structure, and style of a document.
- The DOM denotes the document as nodes and objects.
- It is an object-oriented representation of a web page, modified with a scripting language like JavaScript.

## Virtual DOM

- Is a collection of modules designed to provide a declarative way to represent the DOM for an application.
- A virtual DOM object is a representation of a DOM object, like a lightweight copy.
- Virtual DOM is ideal for mobile-first applications.