teleren/devto huggingface dataset:
INFORMATION RESEARCH -IP ADDRESS
Published: 2023-03-04 11:43:52

You might be wondering what **IP ADDRESS** is all about,well I am about to give you the simplest explanation of it.

**IP ADDRESS** is also known as INTERNET PROTOCOL ADDRESS,it is a unique identifier assigned to each device connected to a computer network. They are like phone numbers assigned to our devices. Devices cant talk to each other without an IP address. For a postal service to work,it needs unique address for each house,the same goes for an IP address. Each computer network needs to have a unique address called an IP address.

The IP ADDRESS is separated into two parts,the first part is the network while the second part is the host

![image of how an IP address looks like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrimlikekbo1sbagvwj2.png)

Network number is like a street address while the host number number is the house number. For example,if you are 192.168.5.3,it means your house number is 3 and you want to give something to someone in house number 5 living on your street,all you do is change the host number to 5 i.e 192.168.5.5 (this will work if you are in the same network or neighborhood).

An IP ADDRESS contains 32 binary digits and each octet contains 0-255. It is separated into four lot of eight and 255 is the largest number that can be made from eight bits(255.255.255.255).

IP ADDRESSES are mathematically produced and allocated by the "INTERNET ASSIGNED NUMBER AUTHORITY (IANA)",a division of the "INTERNET CORPORATION for ASSIGNED NAMES and NUMBERS(ICANN)".

There are several IP address security threats such as Online Stalking, Downloading Illegal content, tracking down your location, directly attacking your network,hacking into your device and so on.

A good way to protect or hide IP ADDRESSES is by;

1. Using a proxy server
2. Using a Virtual Private Network (VPN).

WE SHOULD ALWAYS PROTECT OUR IP ADDRESSES LIKE WE PROTECT OUR HOME ADDRESS.
BASIC NETWORKING DEVICES.
Published: 2023-03-04 11:42:40

Networks connect computing devices together so that users can share resources such as data,printers and other devices. Any device with an IP address is a host but you will see them referred to as clients or nodes. Network devices are like the utensils used in a kitchen,they are the ones to bring about a good,they help in cooking the food for a person.

There are several network devices but the ones I will be talking about are;

1. Hub
2. Bridge
3. Switch
4. Router
5. Firewalls and
6. Modem

Let us dive into it one after the other.

**HUB**

It is a layer one device i.e it has no knowledge of addresses.It helps to connect devices in a network together but it is not intelligent. It has multiple ports and if a data comes into one port,the hub will just rebroadcast the data to every port that has a device connected to it thereby wasting bandwidth. Hubs have one collision domain and uses half duplex. It has security risks. Hubs are old technology.


![Image of how a hub works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpgxgbj0l9xyutu6px0z.gif)

**BRIDGE**

It is a layer two device i.e it understands and learn MAC address. It has two collision domain i.e data can be sent or received on each section of the network at the same time. It has two ports. 


![Image of how a bridge device works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1x8chrblrvzgdo0oh6u7.jpg)

It is better than hub in the sense that it can send and receive data.

**SWITCH**

It is a layer two device,it can learn MAC addresses which is known as layer 2 addresses. A switch can use full duplex i.e it can send and receive data at the same time which means each port has its own collision domain. A switch is a huge improvement over a hub. It saves huge amount of bandwidth. A switch can detect specific devices that are connected to it and keeps a record of the MAC address of those devices.


![Image of how a switch works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjh63j5xvmqkp9c7w3x5.gif)

**ROUTER**

A router is a device that routes or forward data from one network to another based on their IP address. It is a doorway out of the internal network and into the outside world. It is a layer three(3) device because it not only uses MAC addresses but also IP address (which is a layer 3 address). It has two ports and it is highly configurable.


![Image of what a router does](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0nq10epjiwawphy1fz2.jpg)

Hubs and switches are used to Create networks while routers connect networks.

**FIREWALLS**

They protect your network from authorized access and threats.


![Image of how a firewall works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fqz5jobwunyvy4b7p1k.png)

**MODEM**

It connects your network to the internet.


![Image of how a modem works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s2yj4etjxyqeomwr76j.jpg)

It is safe to say that without these network devices,we won't be able to send and receive data and they help to make things easier like how our kitchen utensils helps to make cooking easier for us.
Working with Modals in React.JS | Context API | MUI v5 Dialog Component
Tags: react, tutorial, webdev, beginners
Published: 2023-03-04 11:16:55

Modals play an important role in any medium to large size of application, they are used for multiple purposes - Confirmation Box, Alerts, Displaying UI (Login/ Sign up) so it's no secret that Modals are integral to any application nowadays. 

Dealing with Modals become cumbersome as the application grows, as there are certain challenges which come along the way - Too many modals, re-using (opening) modals from different parts of the application(different screens), Passing of data to the modals, etc.

In this tutorial, you will learn how to build up an organised structure using the React Context API which will help you overcome the stated problems in an efficient manner.

We will also build a custom hook 

```
useModal()
```
Check out the video tutorial -  
https://www.youtube.com/watch?v=4BvvJ_HXyRE&ab_channel=DesiCodes
A simple trick for your dotenv files
Tags: javascript, dotenv, env
Published: 2023-03-04 11:08:30

---
title: A simple trick for your dotenv files
published: true
description: Write better dotenv files by storing boolean values as yes/no strings
tags: javascript, dotenv, env
cover_image: https://images.unsplash.com/photo-1580402427914-a6cc60d7d44f?h=420&q=70
---

I'm sure most of you know and use [dotenv files](https://12factor.net/config). They are great for storing app configs: **everything that is likely to vary between deploys**

```js
MY_APP_KEY=supersecret
```

These app configs are stored in a convenient key/value pair in a dotenv file. But what may come as a surprise to you is that **every value is a string**

```js
DAYS_UNTIL_DATA_DELETION=60
AWS_DISABLE=true
```

Both are in fact **strings**. Later on, when you will want to check if AWS is disabled, you will have to write this code (which I have seen over and over again in many projects)

```js
if (process.env.AWS_DISABLE === "true") { ... } // what???
```

That is just silly! When faced with boolean values I always write them with yes/no instead of true/false. 

Furthermore, I quote every value in the dotenv files to make sure that every developer that reads the file knows the values are strings.

Here is the result:

```js
MY_APP_KEY="supersecret"
DAYS_UNTIL_DATA_DELETION="60"
AWS_DISABLE="yes"
```

Hope you enjoyed reading the article as much as I enjoyed writing it. And please do not store your boolean config values as strings. Give the yes/no option a try.

Photo by <a href="https://unsplash.com/@tekton_tools?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tekton</a> on <a href="https://unsplash.com/photos/B5jHf_4vBeg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Shopify Flow: Passing customer data to orders
Tags: shopify, flow, metafields
Published: 2023-03-04 10:57:47

Hi,

Lookign for some help with i hope is a basic task in Shopify Flow. 

I am trying to create a flow which sets the value of an order meta field to the value of customers meta field who created it. See attached visual of what i am trying to do. 

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

Louise
Fetching Data Made Easy with the useQuery Hook in React
Tags: javascript, react
Published: 2023-03-04 10:44:19

As a developer, fetching data from an API endpoint is a common task that you will encounter in almost every project you work on. To simplify this process and make it more efficient, many libraries and frameworks have emerged that provide tools for managing API requests and responses.

One such library is **react-query**, a powerful tool for managing data in React applications. One of the most useful features of **react-query** is the **useQuery** hook, which makes fetching data from an API endpoint incredibly easy.

In this post, we will explore how to use the **useQuery** hook to fetch data from an API and manage the results in a React application.

## Getting Started with useQuery ✨

To use **useQuery** in your React application, you first need to install the react-query library. You can do this by running the following command in your terminal:

```
npm install react-query

```

With the **useQuery** hook imported, you can now use it to fetch data from an API endpoint. Here's an example of how to use **useQuery** to fetch a list of companies from an API endpoint:

```
const { isLoading: isLoadingCompanies, isFetching: isFetchingCompanies, data: dataCompanies, refetch: refetchCompanies } = useQuery(["queryCompanies", searchTerm],()=> companySearchQuery(currentPage, searchTerm, token))

```

In the above code, we're using destructuring assignment to retrieve four variables from the useQuery hook:

- **isLoadingCompanies**: A boolean indicating whether the query is currently loading data or not.
- **isFetchingCompanies**: A boolean indicating whether the query is currently fetching data or not.
- **dataCompanies**: The response data returned from the query after it has successfully fetched data.
- **refetchCompanies**: A function that can be called to manually refetch the query and update the data.

The first argument to the **useQuery** hook is an array of dependencies that determine when the query should be re-executed. In this case, the query will be re-executed whenever either the **queryCompanies** or **searchTerm** variables change.

The second argument to the **useQuery** hook is a function that will be executed to fetch the data. In this case, we're using an arrow function that takes no arguments and returns a promise that resolves to the data fetched by the API.

## Conclusion 🚩

In this post, we've explored how to use the **useQuery** hook from the **react-query** library to fetch data from an API endpoint and manage the results in a React application. With **useQuery**, fetching data has never been easier or more efficient, and it's a tool that every React developer should have in their arsenal.

If you'd like to learn more about **react-query** and how it can help you manage data in your React application, check out the official documentation [here](https://tanstack.com/query/v4/docs/react/quick-start). Happy coding!
Neuroevolution: Genetic Algo and Artificial Neural Network - Free Course
Tags: javascript, deeplearning, ai
Published: 2023-03-04 10:22:24

Neuroevolution is a powerful approach to machine learning and artificial intelligence that uses evolutionary algorithms to evolve neural networks. 

Most neural networks use gradient descent rather than neuroevolution. However, around 2017 researchers at Uber stated they had found that simple structural neuroevolution algorithms were competitive with sophisticated modern industry-standard gradient-descent deep learning algorithms.

[Deep Neuroevolution: Genetic Algorithms are a Competitive Alternative for Training Deep Neural Networks for Reinforcement Learning](https://arxiv.org/abs/1712.06567)

If you want to learn more about this technique, check out this free course. I have created a course that introduces the principles of neuroevolution and the techniques used to design and implement neuroevolution algorithms.

The course covers the following topics:

- Introduction to neuroevolution: basic principles and applications

- Evolutionary algorithms: genetic algorithms, genetic programming, and evolutionary strategies

- Neural networks: types, architectures, and training techniques

- Neuroevolution algorithms: evolutionary algorithms applied to neural networks

- Applications of neuroevolution: games, and optimization problems

- Advanced topics: multi-objective neuroevolution, neuroevolution of recurrent neural networks, and deep neuroevolution.

In this project, we have applied GeneticEvolution to multiple games such as self-driving cars, smart caps and flappy bird.

This course is a follow-up to my other course about [Artificial Neural Networks from scratch](https://www.udemy.com/course/deep-learning-neural-networks-in-javascript-from-scratch), where I show how to create an ANN from scratch without libraries. In that project, the learning process is done using backpropagation(gradient descent). In this project we will learn different approach. We will use [Evolutionary Algorithm](https://en.wikipedia.org/wiki/Evolutionary_algorithm).

By following this course until the end,  students will have a solid understanding of the principles of neuroevolution and the ability to design and implement neuroevolution algorithms for a variety of applications.


{% embed https://youtu.be/iO6Q-ck1rN0 %}

[Check it out](https://www.udemy.com/course/neuroevolution-genetic-algorithms-and-artificial-neuralnets/)
Caching: The Key to Scaling Your Applications
Tags: computerscience, scalability
Published: 2023-03-04 10:00:00

Caching is the process of storing frequently accessed data in a temporary location for quick and easy access. By using caching, developers can achieve scalability, performance, and reduced load on their applications.

## **What is Caching?**

Caching is the process of storing frequently accessed data in a temporary location for quick and easy access. This is done by a cache, a device or software that sits between the client and the data source.

There are different types of caching, such as:

- Memory caching
- Disk caching
- Distributed caching

The cache stores the data in a temporary location and retrieves it when it is requested. This eliminates the need to retrieve the data from the data source, reducing load and increasing performance.

## **The Benefits of Caching**

Caching provides numerous benefits for software development, including:

- **Scalability:** By storing frequently accessed data in a temporary location, caching can handle an increasing amount of load and traffic without a decrease in performance.
- **Performance:** By storing frequently accessed data in a temporary location, caching can achieve faster performance and response times for the user.
- **Reduced load:** By storing frequently accessed data in a temporary location, caching can reduce the load on the data source and improve its performance.
- **Flexibility:** By storing frequently accessed data in a temporary location, caching can be more flexible and easier to maintain.

## **An Example: A News Website**

An example of caching is a news website. The website retrieves articles from a database and displays them to the user. To improve the performance and reduce the load on the database, the website uses memory caching to store the articles in a temporary location.

When a user requests an article, the website checks the cache first to see if the article is already stored there. If it is, the website retrieves the article from the cache, eliminating the need to retrieve it from the database and reducing the load on the database. By using caching, the website can handle a large number of users and a high volume of traffic without a decrease in performance.

## **Conclusion**

Caching is the process of storing frequently accessed data in a temporary location for quick and easy access. By using caching, developers can achieve scalability, performance, and reduced load on their applications. Start exploring the world of caching and see how it can benefit your software development process. Caching is an essential component of any scalable system, and it's important to consider it from the early stages of development to guarantee the success of your application.
Part -1 Become a better you with these 10 visuals
Tags: webdev, beginners, productivity, javascript
Published: 2023-03-04 09:52:46


You may become the best version of yourself with the help of these graphics.

---


## 1.

![visuals first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/np14dmoidsvyo3tzcvzs.png)

---

## 2. 

![visuals second](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hxrdvf8i8wyazyimsc5.png)

---

## 3.


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p2g6fk4cemcn9idnyrv.png)

---

## 4. 


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldapc8aiysj3ggoj4wi0.png)

---

## 5. 


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3w4xltyiks9ke1i3hpd.png)

---

## 6. 


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m627m7uk1137u4ryrwzd.png)

---

## 7. 

![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0syhc6x3qsycnk725x85.png)

---

## 8. 


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03szeaey6p2q9ornlr9r.png)

---

## 9. 


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pegwhc86lndmjyyfirj.png)

---

## 10.


![visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6zapahxrkws6s8oacc7.png)




Source - [Linkedin](https://www.linkedin.com/feed/update/urn:li:activity:7037421741354229760/)


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my youtube channel 
[https://www.youtube.com/channel/UCTBG1pUL9HtP4ntbj63Fngw](https://www.youtube.com/channel/UCTBG1pUL9HtP4ntbj63Fngw)

3. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

4. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

6. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---
 
--- 
## Support us 
Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

{% youtube  p6t7Iprd-38 %}

---
Cache API calls in Angular using Interceptor
Published: 2023-03-04 09:27:12

Developing web applications can be a challenging task, and among the many issues we face, one of the most common ones is the repetitive API calls that occur every time a component initializes. This can lead to a great deal of pain and frustration, as well as excessive calls that can slow down the performance of your application.

But fear not, there is a strategy that can help you save multiple API hits for the same endpoint. By making use of an Interceptor in your Angular application, you can streamline your code and improve the overall efficiency of your web app.

In the code snippet below, we will demonstrate how to implement this strategy by simply mentioning the endpoints we want to cache and letting the interceptor do its job. This will not only save you time and energy, but also make your application more responsive and user-friendly.

So without further ado, let’s dive in and discover how to implement this powerful tool in your web development process.

Here’s the code:



![Image description](https://miro.medium.com/v2/resize:fit:720/format:webp/1*RjXqZtOygBzeAGbD4ywetA.png)


After the interceptor is created don’t forget to reference it in app.module.ts

![Image description](https://miro.medium.com/v2/resize:fit:720/format:webp/1*XSKXsjEIN9KYQ1uLulJzFg.png)


Alright, lets catch the code explanation:

We have an Angular interceptor called ApiCacheInterceptor that can cache HTTP responses from certain API endpoints. The interceptor uses the HttpInterceptor class and its intercept() method to handle all HTTP requests and responses.

When a request is intercepted, the interceptor checks if the request endpoint is in a predefined set of endpoints to cache. If the endpoint is in the set, the interceptor checks if the response is already cached. If the response is cached, the interceptor returns the cached response. If the response is not cached, the interceptor sends the request to the server, caches the response, and returns the response to the original caller.

The ApiCacheInterceptor class defines two private properties: cache, which is a Map object that stores cached responses, and endpointsToCache, which is a Set object that lists the endpoints to cache. The intercept() method uses these properties to implement the caching logic.

If you found this article informative and helpful, make sure to follow my account for more insightful and useful posts on various topics related to web development, technology, and much more. By following, you’ll be the first to know about my latest articles, tips, and tricks, and stay up to date with the latest trends in the industry.

I am dedicated to providing high-quality content that is easy to understand and helpful for readers of all levels of expertise. Whether you’re a beginner or an experienced developer, you’ll find my posts to be informative, engaging, and relevant to your interests.
Multiple GitHub accounts on the same computer
Tags: github, git, githubaccount, versioncontrol
Published: 2023-03-04 08:19:45

Sometimes we face one common problem which is maintaining our multiple github account. I face this too.
We can do it in many ways. Some generate ssh key for their each account and so on. I am just sharing one way how we can use multiple git account for our multiple projects.  Let's dive into it.


First of all we need to initialize the repository

```git

git init

```

Second we need to add all files to that repo

```git 

git add .

```

Third we need to add our first commit 

```git 

git commit -m "first commit"

```

We need a **token**  which we can generate from our account **Settings/Developer settings/Personal access tokens** . I used **Token (classic)**. you can also use  **Beta**  as well

Now we will get a token


Finally time to push

```git
git push https://user-name:your-token@github.com/user-name/reponame.git

```

For example

```git

git push https://saanchita-paul:token12345token@github.com/saanchita-paul/polymorphic.git

```

sometimes it may say to use

```git

git push --set-upstream git push https://user-name:your-token@github.com/user-name/reponame.git

```

It's because  git push --set-upstream is a command used to push your changes from a local Git repository to a remote Git repository and set the branch you're pushing to as the default upstream branch.

When you first create a branch in your local Git repository and want to push it to a remote repository, you need to specify the upstream branch using --set-upstream or -u option. This allows Git to know where to push the changes and which branch to track.

**Happy Coding 🎉**