teleren/devto huggingface dataset:
React Concepts
Published: 2021-12-25 16:43:57

**Virtual DOM and diffing- algorithm:**

For any web application, DOM manipulation is a necessary part. But it is quite a slow process in Real DOM. Virtual DOM was introduced to solve the problem of inefficient updating. For every object in DOM, there is corresponding virtual DOM. When the state of the object changes, virtual DOM only changes that part of the object in the real DOM but it doesn’t update the whole object. React basically works with two virtual DOMs to render the user interface. One is used to hold the previous state of the object and the other is used to hold the current state of the object. If the virtual DOM updates, react starts comparing the two virtual DOMs to know where the update happens and then renders that particular object in the real DOM. 

**JSX:**

JSX stands for Javascript XML. It describes what the UI should look like. Using JSX, HTML structures can be written in the same file with Javascript codes.

**Component Lifecycle:**

Each React Component has a life cycle that we can monitor and manipulate in the three phases. Mounting, updating, and unmounting are the three phases of a react component's lifecycle.  
Mounting is used to put elements into the DOM.Update happens when there is a change in any state or props. When a component is removed from the DOM, unmounting is called.  

**Context API:**

The process in which props are passed through the tree from one part to another is called prop drilling. But in this process, props go through the parts of the tree that don’t need the data. It makes the application unmanageable and complex. To solve this problem the concept of context API was introduced.
Context API is a way in React to share data to any component by storing the data in a central place and giving access to any component that needs it. To apply context API, React.createContext() is needed that returns two components,  a provider and a consumer. The provider provides states to the children components and consumer consumes and uses the states. 


**Custom hooks:**

Custom hooks in React are used to add unique and special functionalities to react applications. Custom hooks start with ‘use’ and can call other hooks.
function clientStatus(props) {
   Const isAvailable = useClientStatus(props.clientId){
    if(isAvailable === null){
        return ‘Checking’;
}
return isAvailable? ‘Available’ : ‘Not Available’;
}

**Optimize a react js application:**

We can optimize a react js application by:
Using functional component
Dependency optimization
Using react fragments
Avoid using the index as a key for the map
Avoid props in the initial state
Optimizing dependencies
WSL Ubuntu Docker install
Published: 2021-12-25 16:11:26

https://zenn.dev/sprout2000/articles/95b125e3359694


Docker can be used in WSL only if WSL2 is installed and used correctly.
在 WSL 正常使用 Docker 的前提是保证 WSL2 已经正确的安装并使用。

Reference [this document](https://www.jianshu.com/p/c27255ede45f) on the basis of WSL2.
在 WSL2 的基础上参[考此文档](https://www.jianshu.com/p/c27255ede45f)
Base。
Back end Concepts
Tags: express, node, database
Published: 2021-12-25 14:04:09

1. CRUD Operations - CRUD is the acronym of back end data integrating operations for implementing persistent data storage application . CRUD stands for Create , Read  , Update , Delete . 
By using crud operations , organizations use different kind of data dynamically relating to tracking customer data , accounts , payment info , etc. These data are systematically stored in the data base .
Types of database systems are 
Hierarchial database
Graph database
Object oriented database
Relational database

2. JWT -  JSON Web Token is used to find a way of securely transmitting information as json object between different parties . Digital authentication system of JWT is much strong to trust and verify .
JWT can be used for Authorization and Information Exchange .
By authorization user is given access to the routes , services and resources
Information Exchange System allows to securely transmitting information between parties . It is considered secured because the accessibility is digitally signed and verified .

3. Relational database (MySql) - MySql Relational database is an assemblage of relational data that is structured or organised in the form of tables , columns and rows where table represents the objects column represents the field and rows represents the record . 
This structured Query language is used for execution of CURD	operation .

5. Express- is the node web framework that provides mechanism to write handlers for requests with different HTTP verbs at different URL paths .
Set common web application settings like port connecting and the location of templates that are used for rendering the response .
Moreover , add additional request processing ‘middleware’ at any point within the request handling pipeline .
How To Get Free Internship - Devstack Student Internship Program
Tags: webdev, career, javascript, beginners
Published: 2021-12-25 16:00:55

If you want to start your career in IT industry, you have to overcome a huge competition. So that students search for **Internships** in web development, Android Development, Data Science etc. But they cannot find a easy internship for themself. 

Today I will talk about **DSIP Program **which is providing free internship for those students who want to start their **career in Software Development**. This article will help you in getting **free internship**. 

## What Is DSIP Internship 

DSIP is **Devstack Student Internship Program**. This internship program is arranged by **Devstack Solutions**. They are giving **free internship** in all IT fields. 

Over 1500+ students from 250+ Colleges has been participated in this program. The new internship batch is starting from January, 2022. 

This is a **virtual internship**. So you can do it from anywhere. You just need a laptop or pc. There are 3 types of internships. These are 

1. **Web Development Internship**
2. **Android Development Internship**
3. **Data Science & ML Internship** 

## Benefits

After completing the internship you will get free certificate, free letter of recommendation. They are also giving free t-shirt swags for the top performers.

## Tasks 

You have to complete their 2 or 3 tasks. The task details are available in their website. 

## Apply Process & Eligibility 

Devstack is taking application from their official website. Apply from Here - [Apply Now](https://www.devstacksolution.in/dsip). The eligibility is you have to be a student of B.Tech, BCA, MCA, M-Tech, B.sc, M.sc, BE etc.

## Conclusion 

In LinkedIn this internship program is becoming very popular. So I share this program with you.
Ruby 3.1.0 Released
Tags: ruby, rails, news, opensource
Published: 2021-12-25 16:00:23

## [Official post](https://www.ruby-lang.org/en/news/2021/12/25/ruby-3-1-0-released/)

- YJIT: New experimental in-process JIT compiler disabled by default (needs --yjit cli option), limited to Unix-like x86-64 platforms for now
- debug gem: A new debugger
- error_highlight: Fine-grained error location in backtrace
- IRB Autocomplete and Document Display
- Values in Hash literals and keyword arguments can be omitted
- Pin operator in pattern matching now takes an expression
Starfield Programming in JavaScript
Tags: codenewbie, programming, beginners, javascript
Published: 2021-12-25 15:59:01

I did not realize how coding tutorials on YouTube are sometimes annoying - including my own (no exception 😄), don't get me wrong, I mean it's great to be taught and all but often it's just annoying, you want to watch someone coding in silence and code with them, especially if you're familiar with the language/framework/tech they're using in the video.

This is an HTML/CSS/JavaScript moving background ideal for any space 2d video game like Space Invaders, Galaxy Hunters or Asteroids, coded from scratch in silence in a rainy night here in Poland, and I did not want to talk just code in silence and if you're a beginner - intermediate, you can code along with me or you can leave it turned on while doing your own stuff.

The idea was inspired from one famous YouTuber called Takuya and his channel is called "devaslife", he's a Japanese from Osaka who speaks perfect English. The man types in a very smooth way on the terminal - he uses Fish terminal - and never touches the mouse in all of his videos; productive and efficient. I was only inspired by him, and started creating my own videos with my own style, just occasionally not being the main style on the channel.

You might find me struggling while typing a little bit, that's because this was my first time suing this new IBM Compatible Keyboard manufactured by a German company called "Perrix".

Here's the video
Hope you enjoy it - if you like that type of videos

{% youtube WyxGIGh8p4I %}

Source Code: https://github.com/BekBrace/starfield-game-background

YouTube : https://www.youtube.com/channel/UC7EVSn5inapL20oPSwAwEUg
Facebook : https://www.facebook.com/bekbrace​​​​
Twitter : https://twitter.com/BekBrace
Instagram : https://www.instagram.com/bek_brace/
GitHub profile : https://github.com/BekBrace
Website : https://bekbrace.com
Hide on prod - Angular Directive
Tags: angular
Published: 2021-12-25 15:19:00

*hideOnProd directive

```ts
import { Directive, ViewContainerRef, OnInit, TemplateRef } from '@angular/core';
import { environment } from 'path/to/environments/environment';

@Directive({
  selector: '[hideOnProd]'
})
export class HideOnProdDirective implements OnInit{

  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) { }

  ngOnInit(): void {
     if(environment.production == false){
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
  }

}
```
The world of desktops, laptops will never understand
Tags: linux, desktop, laptop, commandline
Published: 2021-12-25 15:14:25

---
title: The world of desktops, laptops will never understand
published: true
description: 
tags: #linux, #desktop, #laptop, #commandline
//cover_image: https://direct_url_to_image.jpg
---

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

--
How to fix Error deleting Snapshots on AWS EC2.
Tags: aws, ec2, ebs, snapshots
Published: 2021-12-25 15:08:26

---
title: How to fix Error deleting Snapshots on AWS EC2.
published: true
description: 
tags: aws,ec2,ebs,snapshots
//cover_image: https://direct_url_to_image.jpg
---

Sometimes you have some EBS volume occurring cost but you don't have any EC2 Instance Running.  

You May Have Take Snapshot some EC2 Machine and forget later. Let's find out how to fix this.

![Error deleting Snapshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhavhv8di98tujs91cvr.png)

First Copy The AMI ID.

![AMI ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6doc78m8isgk0dvehfd.png)

Now Go TO AMI
![AMI LIST](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw898s362jhfeej7bj4p.png)

Now Search The AMI By The ID and you will found the AMI Snap
![AMI Snap List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pi9nopx9xupuvkv9ctd.png)

Now Delete This Snap.
![Delete Snap Dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltg7xsjvqyqqf3xjj4i1.png)
Click Delete
![Snap Delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvvontz9x3on1s86lb7f.png)

Now You Can Go Back EBS Snapshots Again and Delete the Volume.

Thanks
SSC Result 2021
Tags: beginners, react, news, webdev
Published: 2021-12-25 14:59:50

SSC Result: Dear Student, Welcome to SSC Result 2021 Post. Hopefully, your SSC exam has been much better by the grace of Allah. You must have come here to know the rules for getting SSC result. Then find out from here the rules for finding out SSC results 2021 and the rules for checking SSC results.

SSC Exam As soon as the results are published under Bangladesh Education Board, you will be able to find out your SSC result.

Read the post carefully to see the result of 2021 SSC exam with marksheet. Although the SSC and its equivalent examinations start in February every year, due to the Corona situation this year, the SSC examinations started on 14th November and ended on 23rd November.

## SSC Result 2021 marksheet with number

As soon as the SSC results are published, the results will be available on the official website of the Board of Education. The rules for viewing SSC results 2022 will be discussed in detail.

**SSC Exam Result 2022 SSC Exam Information
**
Exam Name - SSC
Exam year - 2021
Exam time is from - 10 am to 1.00 pm.
The last date of examination is - 23 November 2021
Date of publication of SSC results - 30 December.

## How to get SSC results 2021

As soon as the results are published, we can extract the results from the Board of Education website. However, there are 3 more options. E.g.-

1. Education Board Website.
2. Mobile SMS.
3. Android app.

**Rules for viewing SSC result with marksheet 2021

Follow the steps below to view the 2022 SSC result.

Step-1: First browse the official website of the Board of Education http://www.educationboardresults.gov.bd and an address like the one below will appear.

Step-2: Now give information according to the following rules-
Examination: Select SSC / Dakhil.
Select 2021 instead of Year.
Roll: Type your roll number.
Reg: No: Type the registration number.
Then fill in the captcha and click the Submit button.
Clicking on submit button will take 3-10 seconds load then you will see your SSC result 2021.
[SSC result 2021](http://www.ajkerfact.com/2021/12/ssc-result-marksheet-with-number.html)

Rules for getting SSC results through SMS 2022:
All secondary and higher secondary results including SSC will be able to get out quickly through mobile SMS.

SSC <space> Board <space> Roll <space> 2021 and send to 16222.

Example: Write SSC DHA 45433343 2021 and send to 16222.

[S S C result](http://www.ajkerfact.com/2021/02/ssc-result-2021.html)
Svelte component forwarding for event bubbling + forwardRef
Tags: svelte, react
Published: 2021-12-25 14:51:30

> This is second article on **Svelte-series**

---

With reference to [this tutorial](https://svelte.dev/tutorial/event-forwarding) on Svelte man page
{% codesandbox svelte-intermediate-event-forwarding-x8o5v %}
> **Note** : In case codesanbox IDE would throw an error for Svelte component just reload the sandbox on IDE & you ready to go !
CRUD Operation,Relational database (MySql),Express

Tags: express, mongodb, node, react
Published: 2021-12-25 14:43:19


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





CRUD Operation

CRUD Meaning: CRUD is an acronym that comes from the world of computer 

programming and refers to the four functions that are considered necessary to 

implement a persistent storage application: create, read, update and delete.


Relational database (MySql)

Enhance Your MySQL Databases For Free With Amazon Web Services.

Get Started Today. Flexible & Secure Open Source Relational Database 

Services. Try It For Free For 12 Months. Sign Up For Free. Create a Free Account. Free Tier Details. Hands-On Experience.


Express

Express is a minimal and flexible Node.js web application framework 

that provides a robust set of features for web and mobile applications. 

APIs. With a myriad …
Mongoose

Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose.
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/test');

const Cat = mongoose.model('Cat', { name: String });

const kitty = new Cat({ name: 'Zildjian' });
kitty.save().then(() => console.log('meow'));
React Virtual DOM and diffing- algorithm Simplified, Context API
Tags: javascript, react, beginners, programming
Published: 2021-12-25 14:22:40

React Virtual DOM and diffing- algorithm Simplified
Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. ... Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things.

Diffing-Algorithm:
React uses the "Diff" algorithm to do this comparison. With that, React can understand which places have changed. React then changes only the part of the dom where the change was made.
 
 Context API
 
You might think to yourself: "Well, I'm convinced. How do I implement Context API in my app?" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps:
Create a folder under your app root named contexts (not required. just a convention)
Create a file named <your context name>Context.js, e.g. userContext.js
import and create a context like so:
import React, { createContext } from "react";
const UserContext = createContext();
Create a component that will wrap the provider named Provider e.g. UserProvider
Example using React Hooks:
const UserProvider = ({ children }) => {
  const [name, setName] = useState("John Doe");
  const [age, setAge] = useState(1);
  const happyBirthday = () => setAge(age + 1);
  return (
    <UserContext.Provider value={{ name, age, happyBirthday }}>
      {children}
    </UserContext.Provider>
  );
};
Create a higher order component to consume the context named: with e.g. withUser
Example using React Hooks:
const withUser = (Child) => (props) => (
  <UserContext.Consumer>
    {(context) => <Child {...props} {...context} />}
    {/* Another option is:  {context => <Child {...props} context={context}/>}*/}
  </UserContext.Consumer>
);
The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).
Finally export them
export { UserProvider, withUser };

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbc1qfn5kk917sy3cyki.jpg)
What are CRUD Operations?
Published: 2021-12-25 14:13:30

CRUD stands for create, read, update, delete. In order to understand fully what CRUD operations are first we need to understand what data is and what is the database? Data is information that has been translated into a form that is efficient for movement or processing. It can be anything like the total number of students in class, the teacher’s name and their assigned classes, sound, images, video etc. And the database is simply a storage where we store data.  In the modern world database is a very important and crucial. So in order to interact with a database means to store data into the database, retrieve data from a database or remove the data from the database we need to establish some kind of function or operations.  In computer programming, these are the four basic functions/operation to interact with the database or persistent storage. 

MongoDB provides some built-in functions in order to achieve these goals. Like for in order to store data into the database MongoDB provides two methods.

**Create:**
databaseName.collectionName.insertone()
databaseName.collectionName.insertMany()

To insert a single document we use insertOne and if we want to insert multiple document we use insertMany() method.


**Read:**
In order to perform Read operations in mongoDB, it provides two built-in methods.

databaseName.collectionName.findOne(query, projection)
databaseName.collectionName.find(query, projection)

findOne() methods return a document that matched the query and find() methods return a cursor or pointer to the collections that matches the query that’s provided in the method.

**Update:**
In order to perform Update operations in mongoDB. It provides two built-in methods.

databaseName.collectionName.updateOne(filter, update, options)
databaseName.collectionName.updateMany(query, update, options)

updateOne() methods Updates a single document within the collection based on the filter.

And updateMany() methods Updates all documents that match the specified filter for a collection.


**Delete:**
In order to perform Delete/ Remove operations in MongoDB. It provides two built-in methods.

databaseName.collectionName.deleteOne(filter, writeConcern, collation, hint)
databaseName.collectionName.deleteMany(filter, writeConcern, collation, hint)

In deleteOne method except for filter query rest of the arguments are optionals and this methods removes a single document from a collection that match the query filter.

Also in deleteMany method except filter query rest of the arguments are optionals and this methods removes all the document from a collection that matched the query filter.
normalizing Css 
Published: 2021-12-25 14:11:51

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

add to css file :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1abqoh0mhuab7pix4xtk.png
)

link it to index.html 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4ugrhxcga2qdd86sii.png)
API, event loop stack and queue,DOM
Tags: javascript, api, dom, event
Published: 2021-12-25 13:53:09


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

More Javascript
What is an API?

An API (Application Programming Interface) is a set of functions that allows applications to access data and interact with external software components, operating systems, or microservices. 
GET – Gathers information (Pulling all Coupon Codes)
PUT –  Updates pieces of data (Updating Product pricing)
POST – Creates (Creating a new Product Category)
DELETE – (Deleting a blog post)
How Javascript works event loop stack and queue
The Event Loop has one simple job — to monitor the Call Stack and the Callback Queue. If the Call Stack is empty, the Event Loop will take the first event from the queue and will push it to the Call Stack, which effectively runs it. Such an iteration is called a tick in the Event Loop.
What is DOM
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document 
For example, the DOM specifies that the querySelectorAll method in this code snippet must return a list of all the <p> elements in the document:
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);