teleren/devto huggingface dataset:
Context API:
Published: 2021-12-26 19:09:41

Context API helps us to solve props drilling in React app. Generally, when we want to pass data from one component to another component we have to lift up the data and then send data as props. So we have to pass data on some components but they do not need those data. To solve this problem we can use context API.
How do we use Context API? That is described in the following:

**step 1:** We have to create a context in the parent component. 
=> To create a context we have to call createContext() from react and assign it to a meaningful variable in the component from where we pass the data and then export it. The variable name is relevant to the data which are passed throw the context API.

export const ToyContext = createContext();
Note: if we want to give an initial value in it we can give this in () brackets like:
export const ToyContext = createContext(“Doll”);
Here we pass a toy so the variable name is given as ToyContext.

**step 2:** We have to put all the components in the Provider of the context which can get the data of context API like:
<ToyContext.Provider>
<Sister></Sister>
<Brother></Brother>
</ToyContext.Provider>

**step 3:** We have to give a value in <ToyContext.Provider> which includes the data that is shared throw context API.
<ToyContext.Provider value= “Baby Doll”>
<Sister></Sister>
<Brother></Brother>
</ToyContext.Prvider>

**step 4:** We have to use the useContext() hooks from React where we use the data and assign it in a variable. In brackets of useContext() we have to use ToyContext that we create to keep data.
const ring = useContext(ToyContext);
Banker Learning C: Part 2
Tags: c, tutorial
Published: 2021-12-26 19:09:41

##Comment
Try to remember what you ate last night. Easy right? What about Thursday night one week ago? What about a month? If you don't have a pitch perfect Instagram account, you won't be able to easily answer these questions. Programming is much harder than remembering your last meal. So how does a programmer remember, what have they done with a complex piece of code 5 years ago?

The ingenious solution is called **“Comment”**. 

> Commenting involves placing **Human Readable Descriptions** inside of computer programs detailing what the **Code** is doing. [[Source](https://www.cs.utah.edu/~germain/PPS/Topics/commenting.html)] 

Let's decrypt the statement. I am sure you have seen sidenotes on books. Those side notes provide example and explanation of complex concepts. Comments are exactly that. Providing side notes, reference, explanation that will help us understand the code in the future.

###How to Comment?
In **C**, we can comment the code in two ways. One is commenting a block of text that covers multiple line, and the other is commenting just one line. 

####1. Single Line Comment:

By using **“//”** a single line comment can be made.

```
#include <stdio.h>

int main() {
    printf("It's unbelievably chilly today!\n"); // I am learning to comment!
    return 0;
}
```

By pressing **`ctrl+F5`**, you get the following result. 


![Single comment Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r0jpxf82b3l5x6m1x6k.png)

If you observe, you can see the compiler totally ignored the following line

> // I am learning to comment!

One important aspect is single line comment can be added in a line that has code in it, but it after comment no new code can be added. 
 
####2. Multi Line Comment:

In this method, we can take as many line as we want to explain a complex mechanism. 

```
/* I always wondered why every programming language starts with “Hello World” 
printing demo. After some thought, I think I know why. 

1. It enables to show the learner an instant result. Dopamine gets released in 
our brain and that enables us to feel happiness and a sense of accomplishment.

2. Print a sentence is one of the easiest form of programming for any given 
languages.

That is why, here is a printing program to calibrate the Eureka moment. */

#include <stdio.h>

int main() {
    printf("The ranting above is unbearable\n");
    return 0;
}
```
Again, hitting **`ctrl+F5`**,


![Multi Line Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuvvsd7ekchkenxi31dg.png)

Compiler ignored a whole paragraph(rant) which doesn't follow **C** Syntax at all.


## Why does Commenting Matter?

Commenting is not any less significant than documentation at all. Good comments are like time investment that can save myriad amount of time in the future. It can contain custom algorithm, reference link, maybe some warning even!(Some codes are so ancient and obscure that touching them is sure to break them)
What is Infrastructure as a Service?
Tags: cloud, devops, aws, azure
Published: 2021-12-26 19:05:23

Imagine you have built out an application locally for **XYZ** company. That application needs to run somewhere right.
So, one way is your company buys a server, and you along with your team manage the server.
If something goes wrong your you will have to quickly fix it as your company application is deployed on the server.
Another way is you delegate infrastructure management
**i.e** you get yourself relieved of the infrastructure management and give the responsibility to some organization. Now, this organization buys the server and manages all of it. This way you moved your infrastructure to the cloud.

So, using the infrastructure setup and managed by someone else is called infrastructure as a service
Eg AWS, AZURE, Google cloud platform, Digitial Ocean.
React Virtual DOM and Diff Algorithm
Published: 2021-12-26 19:04:32

In real DOM when we change any state the full DOM is re-rendered in Browser. But when we use React it come up to us with virtual DOM. Virtual Dom is a representation of real DOM but it is not real DOM. It looks like that. We can consider the virtual DOM just like a tree and its nodes are treated as a component. When we change the state of a component, at first a new tree is created by React where the changed component and its child components are created newly. So there have two representations of virtual DOM in React. One is the previous state other is the new state. Then React simply compare two trees and with the help of an efficient algorithm, it is decided that where the changes have occurred in DOM. This algorithm is called diffing algorithm or reconciliation. After taking a decision React finally updates surgically in the particular place in real DOM in an efficient way.
Hoisting,Scope in JavaScript
Tags: hoisting, scope, javascript
Published: 2021-12-26 18:41:29

**Hoisting:**
Hoisting is a default behavior of JavaScript. JavaScript always takes all its declarations first. It can be said that this is one of its habitual actions.And this behaviour is called hoisting.
Since it is hosted, we can call before declaring any function.
I am trying to explain the matter through the following example.

Here is Input:

`numberSum();
function numberSum(){
var a=32;
var b=43;
var sum=a+b;
console.log(sum)
}`

Here is Output:

> 75

**Scope**:

Scooping is one of the most important aspects of JavaScript. A declared function can be used in some places and not in other places. It can be accessed from any place. .
There are two two kinds of scoping.
1.Local Scope,
2.Global Scope,
Local Scope: Usually the variables declared inside the function are the local variables of that function.
The scope of such variables is local.This means that this variable can only be accessed inside the declared function. It cannot be used for any other function.
Global Scope: If a variable is not declared inside a function, then it is a global scope. This means that a variable declared anywhere outside the function is a global scope. Global variable can be accessed from inside any function or from any place.
How To Fix Laravel Sail Hot Reloading (HMR) Not Working Error
Tags: laravel, sail, hmr, fix
Published: 2021-12-26 18:25:24

Hot Module Replacement (HMR) or Hot Reloading is a technique used to refresh web pages as we make changes to the code of web pages, CSS and JavaScript which completely eliminate the manual page refreshing. The problem with Laravel Sail is, HMR does not work with its default configuration. The default Laravel Sail Docker Compose configuration only exposes the port 80 of the Laravel Docker container. So first of all, we need to expose a new port of the Laravel Docker container for the HMR to communicate with the browser. So when it detects a change in the file system, it can request a page refresh automatically using the newly exposed port.

Open the `docker-compose.yml` file and add port 3000.

```
services:
    laravel.test:
    	...
        ports:
            - '${APP_PORT:-80}:80'
            - '3000:3000'
```

Then open the `webpack.mix.js` file and add the following code at the end.

```
mix.browserSync({
    proxy: 'laravel.test',
    port: 3000,
    open: false,
});
```

If you have been already running Laravel Sail, stop it.

```
vendor/bin/sail down
```

Then run it again. Now it will start the Laravel Docker container with port 3000 opened.

```
vendor/bin/sail up -d
```

Run `npm run watch` with Laravel Sail.

```
vendor/bin/sail npm run watch
```

Open the web browser and access the Laravel application with port 3000. Such as [http://localhost:3000](http://localhost:3000). Now change a blade view file, CSS or JavaScript file and the changes should be immediately visible without manually refreshing the browser.

If you do need to run the application in a separate port such as port 8080 instead of port 3000, use `3000:8080` in the `docker-compose.yml` file and `port: 8080` in the `webpack.mix.js` file.

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-fix-laravel-sail-hot-reloading-hmr-not-working-error) for more related content.
How to create Records in AWS Route53
Tags: aws, route53, domain, cloudcomputing
Published: 2021-12-26 18:23:13

## what is Route53?
Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service. You can use Route 53 to perform three main functions in any combination: domain registration, DNS routing, and health checking.


## Amazon Route 53 pricing and billing
As with other AWS products, there are no contracts or minimum commitments for using Amazon Route 53. You pay only for the hosted zones that you configure and the number of DNS queries that Route 53 answers. For more information, see Amazon Route 53 Pricing  

For information about billing for AWS services, including how to view your bill and manage your account and payments, see the AWS Billing and Cost Management User Guide.


`Here is the full video, based on AWS Route53 Domain configuration, Creating the first comment and Query those Records in AWS CloudShell👇👇`
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w89ka4tvykmjcp1dhq85.png)](https://youtu.be/Ftoiq8HvrNE)


## To create a record using the Route 53 console

#### 1. Sign in to the AWS Management Console and open the Route 53 console at https://console.aws.amazon.com/route53/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9gnb5wmd2iroc450glv.png)


#### 2. Search for Route53 service
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxti1prd63h9022f34p2.png)


#### 3. choose Hosted zones.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvnqh4lfho69rtyhllom.png)


#### 4. If you already have a hosted zone for your domain, skip to the next step. If you don't, select the "create a hosted zone" option and you can create it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dqnoz2c82yyw5k3yiok.png)

#### 5. Now If you are done with the Creating hosted zone, On the Hosted zones page, choose the name of the hosted zone that you want to create records in.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs669e6uujy4efuvz14v.png)

#### 6. Choose Create Record.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpgtfcuwv8u981exidp1.png)



---

▬▬▬▬▬▬ WANT TO LEARN MORE? ▬▬▬▬▬▬
Full Terraform tutorial ► [https://bit.ly/2GwK8V2](https://bit.ly/2GwK8V2)
DevOps Tools, like Ansible ► [https://bit.ly/3iASHuP](https://bit.ly/3iASHuP)
Docker Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
Managing multiple github accounts on your machine
Tags: git, github, bash, versioncontrol
Published: 2021-12-26 18:18:50


All of us have and might go through this problem at some point in our careers where we've got multiple github account for our personal, work and freelancing projects.

Before a couple of months ago I would used two variations of VS code in my machine. One was the [Visual Studio Code](https://code.visualstudio.com/) and other was [VScodium ](https://vscodium.com/).
But that was a work around until I found out that you can add your username and password/ Personal Auth Token when you clone the repo. After that you can start working normally and git will take care of permissions.
We need the Personal Auth Token because github has discountinued using our traditional passwords. And PATs can expire, they can also be given selective permissions.

So this is how it works, when you're cloning a repo just put your username:PAT 
example:
```bash
git clone https://{username}:{PAT}@github.com/{username/org}/{repo}
```

Yes, it was as simple as that.

You can find me at https://100lvlmaster.in
How express.js works
Published: 2021-12-26 17:41:36

In this post, we will go through the source code of express, and try to understand how it works under the hood. Studying how a popular open source library works, will help us make better applications using it, and reduces some of the “magic” involved 

### when using it.
The “Hello World” example
Let’s use the “Hello world” example given in the official website to form a starting point for digging into the source code:

```
const express = require("express")
const app = express()

app.get("/", (req, res) => res.send("Hello World!"))

app.listen(3000, () => console.log("Example app listening on port 3000!"))
```

### Creating a new express application
The var app = express() statement creates a new express application for you. The createApplication function from the lib/express.js file is the default export, which we see as the express() function call.

Some of the important bits are:

```
const mixin = require("merge-descriptors")
const proto = require("./application")

function createApplication() {
	const app = function(req, res, next) {
		app.handle(req, res, next)
	}
	mixin(app, proto, false)
	return app
}
```

## Starting the HTTP server
After setting up the routes, the server has to be started. In our example, we call the app.listen method, with the port number, and callback function as the arguments. To understand this method, we can see lib/application.js. The gist of it is:

```
app.listen = function listen() {
	var server = http.createServer(this)
	return server.listen.apply(server, arguments)
}
```
Hopefully, this post helped you in understanding the important aspects of the source code, which you can use to understand the rest of it.

If there are any libraries or frameworks whose internal workings you feel deserve an explanation, let me know in the comments.
Internet image as desktop background without downloading it in your local machine :) Its Possible
Tags: ubuntu, linux, desktop
Published: 2021-12-26 17:33:33

Hello Friends,

Many of us download images from internet and then set it as wallpaper. In this short hack , I will let you know, how you can make any internet image as desktop background without downloading it in your local machine.


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

In ubuntu you need to run this command:
```
sudo apt-get install feh
feh --bg-scale /path/to/your/background/image.jpg
```
change path to internet image:

```
feh --bg-scale https://bit.ly/3EnPMkc
```
The above link is shorturl of https://upload.wikimedia.org/wikipedia/commons/b/b3/Shinjini_kathak_dance_indian_classical_san_Francisco.jpg

you can make feh to remember your choice next boot:
Once you've picked a wallpaper, feh stores the name in a file called .fehbg. That means you can tell it to restore the wallpaper on the next boot by checking to see what's inside that file. Add this line to your ~/.xinitrc file.

```
eval `cat $HOME/.fehbg` &
```

Other things you can do:

(1) My readers may recall my post about the lorapora-sum of images, in which images are generated on each refresh ( check my previous posts). You can try this on your server by allowing feh to reload every 2 hours. As a simple home-made solution.

(2) If you are a "Administrator," you can update the season greeting as the desktop wallpaper on all computers connected to your network.

(3) New notices are delivered to employees' desktops on a daily basis. They are not required to open mail:)

Bye!!!
How to Add Featured Image in WordPress RSS Feed
Tags: wordpress, webdev, tutorial
Published: 2021-12-26 17:28:44

![Add Featured Image in WordPress RSS Feed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0lycwxptahm4pggsgin.jpg)

Featured Image in WordPress RSS Feed. If you use an RSS feed on your WordPress website, you'll notice that the featured image isn't included in your RSS feed's posts by default. Having an RSS feed with images will enhance your syndication and may come in handy later because marketing tools like Mailup, Aweber, MailChimp use RSS feeds to create newsletters. RSS really means simple syndication. 

In this brief guide, I will show you how to show your featured image in WordPress RSS feed using a plugin and without a plugin.

##Featured Image in WordPress RSS Feed (Manually)

If you are familiar with modifying your **`functions.php `** file, you can use the code below to display the prominent Featured images in your RSS feed.

1. Login to your WordPress Dashboard.
2. Go to **Appearance** >> **Theme Editor**.
3. Click on **function.php**
4. Add given code in the bottom of function.php file.
5. That's All, Click on **Update file**.

You can also add this code by using FTP.



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

```PHP
/**
 * Featured image to RSS Feed.
 */
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '<div>' . get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'margin-bottom: 15px;' ) ) . '</div>' . $content;
}
return $content;
}
 
add_filter('the_excerpt_rss', 'featuredtoRSS');
add_filter('the_content_feed', 'featuredtoRSS');
```
Copy the above code and paste it into your **function.php** file. If you don't know what you are doing with the function first make a backup. 

I shared this post from [Add Featured Image in WordPress RSS Feed](https://softcodeon.com/wordpress/featured-image-in-wordpress-rss-feed.htm) you can read in detail from there. Also they have provided easy way by using a plugin.

If you have any question please discuss below help to improve. Thank you.
Week -4 Day -5 (Backend)
Published: 2021-12-26 17:22:50

## What are the four CRUD operations?
Ans: CRUD is an acronym that stands for Create, Read, Update, and Delete. These are the four most basic operations that can be performed with most traditional database systems and they are the backbone for interacting with any database.

## Mongoose : 
Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.

## Relational database (MySql) : 
Is MySQL a database or DBMS?
MySQL is a relational database management system (RDBMS) developed by Oracle that is based on structured query language (SQL). A database is a structured collection of data. It may be anything from a simple shopping list to a picture gallery or a place to hold the vast amounts of information in a corporate network.

## Express: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
Express.js, or simply Express, is a back-end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

## What is JSON Web Token?
JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.
Although JWTs can be encrypted to also provide secrecy between parties, we will focus on signed tokens. Signed tokens can verify the integrity of the claims contained within it, while encrypted tokens hide those claims from other parties. When tokens are signed using public/private key pairs, the signature also certifies that only the party holding the private key is the one that signed it.

## When should you use JSON Web Tokens?
Here are some scenarios where JSON Web Tokens are useful:
Authorization: This is the most common scenario for using JWT. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token. Single Sign-On is a feature that widely uses JWT nowadays, because of its small overhead and its ability to be easily used across different domains.
Information Exchange: JSON Web Tokens are a good way of securely transmitting information between parties. Because JWTs can be signed—for example, using public/private key pairs—you can be sure the senders are who they say they are. Additionally, as the signature is calculated using the header and the payload, you can also verify that the content hasn't been tampered with.