teleren/devto huggingface dataset:
React Context API
Published: 2021-12-21 19:37:41

**React Context API: What is it and How it works?**

Context API is a (sort of) new feature in React 16.3 that allows you to easily and lightly communicate state across the entire project (or portion of it). Let's have a look at how to put it to use.


Context API for React, In this post, we'll look at what Context API is and how you may utilize it in your React project. The Context API is a React framework that lets you share unique facts and helps you solve prop-drilling problems at various levels of your project.


**What is Context API?
**
A React app may use the React Context API to generate global variables that can be passed around. This is an alternative to "prop drilling," which entails passing props from grandma to kid to parent and so on. Context is also marketed as a simpler, lighter way to Redux state management.

Context API is a (sort of) new feature in React 16.3 that allows you to easily and lightly communicate state across the entire project (or portion of it).


**React context API: How it works?**

React.create All you need is Context(). It will provide you a customer and a provider. Provider is a component that supplies the state to its children, as its name indicates. It will contain the "store" and serve as the parent of any components that may require it. A component that consumes and utilizes the state is known as a consumer.


**Context API will replace redux?**

Redux is fantastic, because it was created to meet a specific requirement for state management. It really met this demand so effectively that it became widely accepted that you can't be a "genuine" React developer until you knew how to use Redux. However, Redux has drawbacks, which is why it's critical to understand what Context API provides that Redux does not:

Simplicity - When individuals use redux, they tend to handle practically all of their state in redux, which leads to two issues:

Why should I create/update three files merely to add one little feature?

One of the most appealing aspects of React one-way data binding is that it's simple to grasp: a component transmits state to its children. It is taken away from us when we use Redux.

We may establish numerous unconnected contexts (stores) and utilize each in its own area in the program using the Context API.


**What is the Context API and how can I utilize it?**

It's possible that you're thinking to yourself: "Well, I'm persuaded. What is the best way to integrate Context API into my app?" First, make certain you require it. Instead of sending shared state as props, some users utilize shared state across layered components. And if you do require it, you should do the following steps:

Create a folder called contexts inside your app's root directory (this is optional). It's only a convention.)

Make a file with the name your context name>.

Context.js, such as userContext.js, imports and creates a context in the following way:
How to use Type Guards in Typescript
Tags: typescript, tutorial
Published: 2021-12-21 19:32:59

One case where people are often surprised by TypeScript is where there's a union type (a type comprised of multiple other types). It can be confusing when you've clearly differentiated between the two types in the code - but the compiler can't tell the difference.

For example, say we have an `Animal` that can be either Human or Dog, and we want to implement a speak function:

```typescript
type Human = { talk: () => void }
type Dog = { bark: () => void }

type Animal = Human | Dog;

function speak(animal: Animal) {
    // if human -> talk
    // if dog -> bark
}
```
How do we differentiate between Dog and Human here? TS types aren't available at runtime, so we can't check the types. But what we can do is use certain properties as indicators of the type:

```typescript
function speak(animal: Animal) {
    if (animal.talk) {
        animal.talk()
    } else {
        animal.bark()
    }
}
```
The problem is that this won't work for the TS compiler. As far as it's concerned, `animal.talk` is an invalid access of a property since Animal may be Dog or Person, and a Dog cannot talk.

So TS lets you tell it which of the subtypes it is by using a function that returns a **type predicate** indicating whether or not the argument is a certain type. A type predicate always uses the `is` syntax:

```typescript
function isHuman(animal: Animal): animal is Human {
    return !!animal.talk
}
```

The function itself is called a **type guard**. If it returns `true`, the type predicate will be true and TS will understand that animal is a Human subtype of Animal. 

Let's swap it in:

```typescript
function speak(animal: Animal) {
    if (isHuman(animal)) {
        animal.talk()
    } else {
        animal.bark()
    }
}
```

However, we still suffer from the same problem as above: `animal.talk` can be either Dog or Human within the type guard. And so to solve it we can cast animal as `Human` within the type guard:

```typescript
function isHuman(animal: Animal): animal is Human {
    return !!(animal as Human).talk
}
```

or remove the dot access entirely using the Javascript `in` operator:[^1]

```typescript
function isHuman(animal: Animal): animal is Human {
    return 'talk' in animal;
}
```

And finally:

```typescript
type Human = { name: string; talk: () => void }
type Dog = { name: string; bark: () => void }

type Animal = Human | Dog;

function isHuman(animal: Animal): animal is Human {
    return 'talk' in animal;
}

function speak(animal: Animal) {
    if (isHuman(animal)) {
        animal.talk()
    } else {
        animal.bark()
    }
}
```

I hope you found this useful!
[^1]: Thanks to [@jazlalli1](https://twitter.com/jazlalli1) for this suggestion!
echo3D featured on Vhite Rabbit
Tags: programming, startup, podcast, showdev
Published: 2021-12-21 19:19:14

![1.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1640113988008/sdcv_d-BI.jpeg)

Listen to the latest Vhite Rabbit WebXR Podcast episode ([@WebXRPodcast](http://twitter.com/WebXRPodcast)) with our CEO [@AlonGrinshpoon](http://twitter.com/AlonGrinshpoon)! So excited to share the latest Vhite Rabbit WebXR Podcast episode ([@WebXRPodcast](http://twitter.com/WebXRPodcast)) where we chat about VR, AR, 3D, [echo3D.co](http://www.echo3d.co/), and cloud!

Vhite Rabbit WebXR Podcast is a podcast about WebXR , VR and AR on the Web , hosted by Vhite Rabbit, the developers behind the VR browser games portal “Construct Arcade” and Wonderland Engine — a WebXR focused development platform. The podcast discusses topics in the immersive web space with various guests who are important in the space.

**Listen to the full podcast episode on [Spotify](https://open.spotify.com/episode/1M1pMfN4KeKcO1OxOGUqqq) or [Anchor.fm](https://medium.com/r?url=https%3A%2F%2Fanchor.fm%2Fvhiterabbit%2Fepisodes%2FEpisode-042-with-Alon-Grinshpoon---Echo3D--AR--VR-in-the-Cloud--Metaverse-and-Entrepreneurship-e1bn7jl).**

Thanks Florian Isikci ([@SrileXR](http://twitter.com/SrileXR)) and Jonathan Hale ([@squareys](http://twitter.com/squareys)) of [@VhiteRabbitVR](http://twitter.com/VhiteRabbitVR) for a great conversation!
Listen to more Vhite Rabbit WebXR podcast episodes [here](https://anchor.fm/vhiterabbit/).
Learn more about echo3D at [www.echo3D.co](https://medium.com/echo3d/www.echo3D.co).

***

> echo3D (www.echo3D.co; Techstars ’19) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640114189589/s8bOR8fQr.png)
Let's Understand Classes And Objects ( Instances ) In Programming for Simplicity.
Published: 2021-12-21 18:43:07

---
title: Let's Understand Classes And Objects ( Instances ) In Programming  for Simplicity.
published: true
date: 2021-12-21 18:43:07 UTC
tags: 
canonical_url: https://codewithshriekdj.netlify.app/posts/let-s-understand-classes-and-objects-instances-in-programming-for-simp-490c5
series: let's understand by shriekdj
---

There is An programming called

> OOP : Object Oriented Programming.

This Was Very Hard To Understand in my school because the teacher directly horrify us with words like polymorphism, Inheritance and other Words.

At here we will try to Understand What Are they not learn.

While Creating classes and objects in our program we should consider our self something similar to A God, a virtual god and our software(app) as our virtual world.

We Create a Blueprint for our Characters in World Which is Class for example,
```cpp
class Human {
  int total_hands = 2;
  int total_nose = 1;
  bool is_alive = true;
  ...
}
```

And The Objects ( A.K.A. Class Instances ) are actual Characters of Our virtual world.

Same goes for other parts of the software program like vehicle, plant, machines, etc.,

There is Also An Scope for our Characters in virtual world.
Like Public The Part Visible to Everyone similar to face;
Private the part which is not visible or accessible to everyone directly similar to organs and last protected which is publicly available or visible under some rules like authority given by the Character to Other Characters.

***

## Conclusion

If you found this useful then please share this and follow me! Also check out Buy Me A Coffee if you want to support me on a new level!

[![Buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-yellow.png)](https://www.buymeacoffee.com/shriekdj)
🎄 CodeCast's Coding Advent: Day Twenty-One 🎄
Tags: webdev, tutorial, css, html
Published: 2021-12-21 19:18:54


![Day 21](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou8uroggri7islw7p054.png)

## Day 21

We're in the final stretch with only 10 more days left in 2021! So to celebrate, we're showcasing a pen by Alvaro Montoro! CSS Art has been a popular thing this year and his elf is the epitome of why we love it!

https://codepen.io/alvaromontoro/pen/xxXrzqj

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
Context API
Published: 2021-12-21 18:21:17

A React app can use the React Context API to generate global variables that can be passed around. This is an alternative to "prop drilling," which entails passing props from grandparent to child to parent and so on. Context is also marketed as a simpler, lighter way to Redux state management.

Context API is a (sort of) new feature in React 16.3 that allows you to communicate state easily and lightly across the entire project (or part of it).
React.create All you need is Context(). It will give you a customer and a provider. Provider is a component that supplies the state to its children, as its name suggests. It will contain the "store" and serve as the parent of all components that may require it. A component that consumes and uses the state is known as a consumer.
How to use Context API?
1.	Create a folder called contexts under your app's root directory (this is optional). It's only a convention.)
2.	Make a file with the name your context name
3.	Context.js, such as userContext.js, imports and creates a context
4.	Create a component named Provider to wrap the provider, for example. UserProvider
5.	Create a higher-order component named with, for example, withUser, to consume the context.
6.	Finally, export them and
7.	Use them as needed.
What is an Rest API, the main purpose of API, GET, POST method
Tags: javascript, react, reactnative, programming
Published: 2021-12-21 18:12:05

## What is an API?
API stands for Application Programming Interface. **It’s like an engine under the hood.** It works behind the scene like a ghost. It helps us to add, delete, update or get all data using this API. 

In short, users send a request to API that what do want to do? Then the API responds to the user’s requests. 

Let’s explain with an example-
API like a waiter in a restaurant. Someone is waiting to place an order to the waiter from the menu. 

Then the waiter goes to the kitchen and tells the chafe about the order. Now chafe the dish according to the order. After making the food waiter will carry the food to the customer. 

This whole process like an API works.


![what is an API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bpilwkd7i5o8qe7xp2t.png)


## Purpose of API
The main purpose of API is to connect clients with databases. This is like a middleman or connector. Where it helps both sides to connect with each other. 
API gets a request from the client or user and collects data from the database as required by the client. Then it will deliver or respond to the client.

## Uses of Get
Get is a method that helps us to get or fetch all data from the server a client or user requested for. 
In short Get method loads data from the server as client requests.

`app.get('/order', async (req, res) => {
            	const cursor = orderCollection.find({});
            	const result = await cursor.toArray();
            	res.send(result);
        	})`

Here, all order data loads from the server requested by the client.

## Uses of Post
This is also related to the server. Using the POST method we can send data to the server from the client-side. 
In short, using POST we can send data to a server to create a resource.

`app.post('/order/add', async (req, res) => {
           	 const cursor = req.body;
            	const result = await orderCollection.insertOne(cursor);
            	res.json(result);
        	});`

In this example, a user sends a new record using the POST method, which will be stored in the database.
JavaScript Array Related Methods
Tags: javascript, tutorial, beginners, iftakher
Published: 2021-12-21 18:00:04

In JavaScript, Array is a variable that stores multiple elements. We used Array to store the list of elements and access with a single name. An array is a reference type, which defines it’s a subclass of Object.

Example of Array:

![Array Code Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozpzh63m8odfnhuuazb2.png)

There are many array methods in JavaScript. Let’s know about them: 

 - `isArray()`: `isArray()` method is used to know if the object is an array or not. When it returns true that means it’s an Array and when it returns false that means it’s not an Array.

 - `concat()`: `concat()` method is used to concat/join two or more arrays together. After using this method it returns the new array.  It never changes the existing arrays.

 - `every()`: `every()` method is used to execute a specific function for every element of an array. If the function returns true it clarifies all the elements are true and if the function returns false it clarifies all the elements are false.

 - `filter()`: `filter()` method is used to filter out some elements in a specific condition. It creates a new array with the results. It returns all the elements that fulfill the condition.

 - `find()`: `find()` method is used to find an element in a specific condition. It returns the first element that fulfills the condition.

 - `findIndex()`: `findIndex()` method is used to find out the index of an element that fulfills the condition. If there’s no match it returns -1.

 - `forEach()`: `forEach()` method is used to execute a function for each array element. 

 - `indexOf()`: `indexOf() `is used to get the index of a specific value. If there’s no match it returns -1.

 - `join()`: `join()` method is used to return the array as a string.

 - `map()`: `map()` method is used to execute a function for each array element. 

 - `lastIndexOf()`: `lastIndexOf()` is used to get the last index of a specific value. If there’s no match it returns -1.

 - `pop()`: `pop()` method is used to delete the last element of an array.

 - `push()`: `push()` method is used to add an element to the end of an array.

 - `Reduce()`: `Reduce()` method is used to execute a reducer function for an array element to calculate the numbers of an array.

 - `Reverse()`: `Reverse()` method is used to reverse the order of the items of an array.

 - `shift()`:  `shift()` method is used to delete the first element of an array.

 - `slice()`: `slice()` method is used to get specific elements in a new array.

 - `sort()`: `sort()` method is used to sort the elements of an array in alphabetical and ascending order.

 - `splice()`: `splice()` method is used to delete a specific element of an array.

 - `unshift()`: `unshift()` method is used to add an element to the beginning of an array.


Thank you for reading this!
Introduction
Tags: programming, introduction, music, blog
Published: 2021-12-21 17:58:33

Today is Tuesday, 21st of December, 2021. I'd just finished my Fall semester the week before and felt pretty optimistic about the future, but also a little lost.

### Fall 2022

I just had a pretty eventful semester (probably my toughest one yet, academically) did a lot of things, made a lot of mistakes, and learned a lot more. Long story short, I slacked off midway and left a backlog of tests and assignments on finals week. But perseverance helped me get through it, finish up my work, and I ended up learning quite a lot. Kind of funny how that turned out.

Either way, it's exciting, this year I felt significant growth as a programmer. Learning both practically from my Internship earlier this year, and theoretically in school. Concepts are starting to click and programming in general is becoming a lot less overwhelming and clear to me. I don't know what it is, the dopamine, serotonin, whatever brain chemicals reward you for learning something new, but it feels amazing, and I'm eager to keep this momentum going.

On the other hand, I've been working all year on my other hobby which is producing music. School had me put it on the backburner for a while but I'd planned to finish a project I'd been working on before the end of the year during the holiday break.

### Mindfulness

Yesterday was a day of mindfulness. I sat down and tried to analyze my thoughts. Sometimes my mind races too fast that it gets overwhelmed by a lot of thought and possibilities. I applied to that to my critical thinking, problem solving skills that run when coding. Then analyzed my thought/work process when making music and found that it's quite parallel (Especially since I've been leaning heavily towards programming electronic music lately)

### What's next?

I've been at a crossroads lately. Figuring out what I want to do with my life that will satisfy me professionally, and for so long I always thought it was either programming or music, and that whichever took off first is the boat I jump on. At the same time, I thought to really improve my skill on either crafts, required time and effort on only one, mutually exclusive. Yesterday I realized it doesn't have to be one or the other. There's a reason that they both intrigue me. It's because I have an understanding and appreciation of what code and music is, and their crafts, and how I perceive and understand both are very similar.

### Looking forward

And so 2022 is coming along. I've written my thoughts down and my goals are clear. Write code, write music, read code, listen to music. (and maybe a little exercise thrown in there too) And what better way to start off this new voyage with a blog to journal my coding learning experiences and little updates of the music on the way

Joel

<a href="https://soundcloud.com/joelazwar/darkforesttheory">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2csdyto6h1zxr49hy7ak.png"></a>

[blujazz](https://soundcloud.com/joelazwar) · [darkforesttheory](https://soundcloud.com/joelazwar/darkforesttheory)

P.S. Here's a track I just finished the other day
Network Streaming Analytics With IoT

Tags: security, iot, networking, networkanalytics
Published: 2021-12-21 17:43:23

Hello Everyone,

I am requesting you to fill this survey. it will help me to archive my final year research project. this project is based on developing network streaming analytics in nearly real-time with IoT devices. link is given below.

Thanks.

https://docs.google.com/forms/d/e/1FAIpQLSeXVeRCn43xodLsY86RK226Nhkq3A0CVS7HLyaaPNOv1VOSeg/viewform?usp=sf_link
What is API? Difference between Get and Post?
Published: 2021-12-21 17:24:14

`API stands for Application Programming Interface.`
Differences between the most common HTTP method get and post.

**Get**
- Get requests are used to only request data
- Get requests can be cached
- Get requests remain in the browser history
- Get requests can be bookmarked
- Get requests have restrictions on data length

**Post**
- Post requests are used to create or update data	
- Post requests can’t be cached
- Post requests don’t remain in the browser history
- Post requests can’t be bookmarked
- Post requests have no restrictions on data length
React Life Cycle - Mounting 
Tags: react
Published: 2021-12-21 17:23:26

React a lifecycle is an event that is used to operate components throughout the duration of the Document Object Model. It has mainly three phases - 

**Mounting** - It means putting elements on the dom.
**Updating** - Whenever the components state and props are changed, the component updated
**Unmounting** - When a component is removed from the dom, then this lifecycle method happens

Today we are discussing the mounting phase.

**Mounting**
In mounting, there are some built-in methods called. they are-

**1. constructor()** - when the component is initiated, The constructor method is called before anything else. In this method, props are passed as an argument. To inherit methods from its parent, we should call super(props) before anything else.

```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

```


**2. render()**- render method outputs the HTML to the Browser DOM.

```
class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

**3. componentDidMount()** - The componentDidMount method is called after the component is rendered. 


```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```
Week 2 is here!
Tags: javascript, webdev, programming, beginners
Published: 2021-12-21 17:14:22

Week 1 was crazy! Every time I begin to feel comfortable with one topic, I find theres yet another layer of depth to conquer. At times I found myself second guessing everything and re-reading everything over and over again. I learned that alot of coding comes down to "what the frick is this?" and "what the frick is that?" but its rewarding when things finally click. I found myself procrastinating at some points just lost in my computer screen. Luckily, I think I've found a way to make the learning experience more enjoyable as I go along. I was looking through my phone and came across an app I had forgotten about for at least a couple of years, it was my Nintendo Gameboy emulator! That's when the idea hit me. Games in the early 2000's were all simple coding much like the material that I'm currently studying. Next thing I knew I found myself on Github looking for older Nintendo favorites of mine such as Super Mario Bros or Pokemon. The plan is to create my own version of these games by going through the game files and changing the contents inside. I even told some friends about the projects and they were overjoyed at the idea and even wanted to try the games when I finish them! It gives me even more motivation to get good at this coding business so I can take on bigger and bigger projects. It's a massive amount of work, I'll need all the motivation I can get at this point.