teleren/devto huggingface dataset:
JavaScript for loop vs forEach loop vs map | JS array methods
Tags: javascriptarraymetho, forloop, javascript, arraymethods
Published: 2021-11-13 15:39:07

---
title: JavaScript for loop vs forEach loop vs map | JS array methods
published: true
date: 2021-11-05 19:11:09 UTC
tags: javascriptarraymetho,forloop,javascript,arraymethods
canonical_url: https://gyanendraknojiya.medium.com/javascript-for-vs-foreach-vs-map-js-array-methods-b281daffa32b
---

#### The distinction between a forEach and a for loop is explained in-depth in this article. The key distinctions between the two are listed below.

![](https://cdn-images-1.medium.com/max/1024/1*5vcXaERytXZjul5In06WZw.jpeg)

### 1. for loop

The JavaScript for loop is used to iterate over an array of items for a set number of times. It should be utilized if a particular number of iteration is known.

```
for (initial_value; condition; increment)  
{  
   // code to be perform
}
```

#### Example

```
**// table of 5**
for (let i = 1; i <= 10; i++{
  console.log(5 * i);
}

// output
5
10
15
20
25
30
35
40
45
50
```

### 2. forEach loop

The forEach() method loops across arrays as well, but it does it in a different way than the standard “for loop.” It passes the following arguments along with a callback function for each entry of an array:

- **Current Value (required):** The current array element’s value
- **index (optional):** The current element’s index number
- **array (Optional):** This is the array object to which the current element belongs.

Using the forEach method, we require a callback function to loop through an array.

#### **Example**

```
// Array of all days

const days = [
 “Sunday”,
 “Monday”,
 “Tuesday”,
 “Wednesday”,
 “Thursday”,
 “Friday”,
 “Saturday”,
];

days.forEach(function (day) {
 console.log(day);
});
```

The function will be run for each and every element in the array. At least one parameter in the callback should reflect the items of an array.

**Output**

```
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
```

**Syntax**

```
forEach((element) => { ... } )
forEach((element, index) => { ... } )
forEach((element, index, array) => { ... } )
```

### 3. map loop

The map() method populates a new array with the results of performing a function on each member of the calling array.

#### Example

```
const numbers = [1, 3, 4, 5, 7, 6, 2, 4];
const twoTimes = numbers.map((num) => num * 2);
```

It will loop over all of the elements in the array, multiply them by two, and return an array.

**Output**

```
[2, 6, 8, 10, 14, 12, 4, 8]
```

**Syntax**

```
map((element) => { ... })
map((element, index) => { ... })
map((element, index, array) => { ... })
```

buy a coffee for me [https://www.buymeacoffee.com/gyanknojiya](https://www.buymeacoffee.com/gyanknojiya)
Hand Tracking using MediaPipe
Tags: javascript, css, html, replit
Published: 2021-11-05 19:01:21

## Hand Tracking using MediaPipe

Hey everyone! This is a Hand Tracking app using MediaPipe!

***
### Description/Instructions

Use your camera and put your hands up!

***
### Outro

Thanks for reading and playing! Here are some socials.

Repl Profile: [dudeactualdev](https://replit.com/@dudeactualdev)

Github Profile: [dudeactual](https://github.com/dudeactual)

OG Codepen: [MediaPipe Hands](https://codepen.io/mediapipe/pen/RwGWYJw)

#### DEMO: [handtracking](https://handtracking.dudeactualdev.repl.co)
Who's Going To RubyConf?
Tags: ruby, networking, watercooler, discuss
Published: 2021-11-05 19:00:05

[RubyConf](https://rubyconf.org/) is starting next week (November 8-0), both in person in Denver and remotely online.

This year it's especially exciting for me; it's my first in-person conference in exactly two years (the vaccine mandates and mask policy helped me feel safe with the decision to attend in person), AND I'll be giving a talk (which you should totally [come watch](https://rubyconf.org/program/sessions#session-1164) if you'll be there)!

Who else is planning on attending?

Come say hi (either in person or in the discord)!
Open VS Code/Insiders directly within any folder in Linux
Tags: visualstudiocode, vscode, contextmenu, bash
Published: 2021-11-05 18:12:20

In Windows operating system, we prefer to enable the context menu option of Visual Studio Code or Visual Studio Code Insiders so that we can open the VS Code/Insiders within any folder we want. 
![VS Code Context Menu in Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmicnwrsdrh8vomrr75o.png)
If I simply zoom in the image a little bit, then we can get a clear view of that. Although I am providing the visual glimpse on a Windows 11 machine, it works similarly in Windows 7, 8, 8.1, 10 as well.
![Zoom in WIndows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9anxhi8sl6m8c1rcvpo.png)
When using Linux Operating System, sometimes we want to open the VS Code/Insiders directly within a folder by using the right mouse button clicking context menu. Sadly, it does not appear there by default. Don't worry, we can enable that feature in any Linux distribution based operating system as well. You can do that by following two simple tricks, but I will show you the most [simple](https://stackoverflow.com/questions/66483057/how-to-add-open-with-code-with-right-click-in-ubuntu-or-pop-os) trick I always use.

- Open the terminal / konsole.
- Copy and paste the following command:
```bash
wget -qO- https://raw.githubusercontent.com/harry-cpp/code-nautilus/master/install.sh | bash
```
- Press on the `Enter` key. Provide the password as well if it asks for that.
- **Optional:** Run an update and upgrade of the system. You can do that using the terminal as well. Like, for the debian based distributions, you can use the following command.
```bash
sudo apt update && sudo apt upgrade -y
```
Change the necessary command (sudo dnf / pamac) if you are on other distributions (Arch/RPM/etc.).
- Now you are good to go. The feature has been enabled globally.

![Open with code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk1rh99kurjw2rl1213w.png)

Thanks for reading this entire article. You may follow me on [GitHub](https://github.com/FahimFBA), [LinkedIn](https://www.linkedin.com/in/fahimfba/), [Twitter](https://twitter.com/Fahim_FBA), [YouTube](https://www.youtube.com/c/InnovationWithIphim) as well. Have a nice day!
JSON - YAML - Base64 and more
Tags: json, yaml, base64, tree
Published: 2021-11-05 18:06:11

Here is a tool that you can use to transform valid JSON String to YAML, Base64, URL Parameters or just visualise it as JSON tree.

https://www.apps4developers.com/json/

Following is an example of the same object in different formats.

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

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

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

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

**Tree View**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfgq7c937zgzkvyrnoq9.png)
Creating Star using only CSS
Tags: css, ui, star, shape
Published: 2021-11-05 17:24:12

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

```css
.apps4developers_css_shape {
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    margin: 32px 0;
    color: #CFB53B;
    border-left: 64px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 44.8px solid #CFB53B;
    transform: rotate(35deg);
}

.apps4developers_css_shape::before {
    content: '';
    position: absolute;
    top: -28.8px;
    left: -41.6px;
    display: block;
    height: 0;
    width: 0;
    border-left: 19.2px solid transparent;
    border-right: 19.2px solid transparent;
    border-bottom: 51.2px solid #CFB53B;
    transform: rotate(-35deg);
}
.apps4developers_css_shape::after {
    content: '';
    position: absolute;
    top: 1.8px;
    left: -67.2px;
    display: block;
    width: 0px;
    height: 0px;
    color: #CFB53B;
    border-left: 64px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 44.8px solid #CFB53B;
    transform: rotate(-70deg);
}
```

See more shares on Apps4Developers.com - https://www.apps4developers.com/css-shapes/
Biographie 
Published: 2021-11-05 17:21:32


Oz lad, de son vrai nom Cédric Sékou Djaby, est un artiste peintre, réalisateur, animateur congolais, né le 12 janvier 2002 à Kinshasa-matonge-Inzia.

Origine et enfance

Oz lad naît le 12 janvier 2002 à Kinshasa, d’une mère commerçante et d’un père docteur. Oz lad est originaire de Kinshasa (République démocratique du Congo). D’ascendance Bamako-Mali, il réside avec sa mère et ses 4 frères et sœurs au quartier matonge , avant d’emménager au quartier yolo aux alentours de ses 11 ans.
A l’âge de 13 ans oz lad débute ses études secondaires à l’académie des beaux arts de Kinshasa.

Membre familial 

Père: Jerry Gahoussou Djaby

Mère: Sylvie Popo Betongo

Frères: Greck Tidiane Djaby, David Mohamed Djaby

Sœurs: Benedicte Asta Djaby, Daniella Fatou Djaby 

Œuvre 

Abstraction éléphant 

La femme enceinte 

Musique traditionnelle abstraite 

Bande dessinée kin bopeto
Let's create pac-man using CSS
Tags: css, shapes, pacman, ui
Published: 2021-11-05 17:16:24

![Pac-Man image, build using CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x29uzf4cs508q3u26tcw.png)


 ```css
.apps4developers_css_shape {
    width: 0px;
    height: 0px;
    border-top: 120px solid yellow;
    border-right: 120px solid transparent;
    border-bottom: 120px solid yellow;
    border-left: 120px solid yellow;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    border-bottom-left-radius: 120px;
    border-bottom-right-radius: 120px;
}
```

See more shapes on Apps4Developers.com - https://www.apps4developers.com/css-shapes/
Laravel Macroable Trait
Tags: php, laravel, trait, webdevs
Published: 2021-11-05 17:08:29

Laravel is very popular with developers for its beautiful features. Macroable trait is one of its many beautiful features.
###Definition in my language:
Speaking of this trait, I would like to say that it is a virtual method maker of class. That means there is a class in your project where you want to call some methods dynamically, but those methods do not have any physical presence in that class. In that case, you can get help from Macroable Trait.
###How to use:
The first requirement to use this is to use the macroable trait in the class in which you want to create the macro. Then in the boot method of AppServiceProvider class, you have to write the code to create a macro of your class. A format of code is written below:
```php
public function boot (){
    YourClass::macro('methodName', function ($arg)
        // Your method body and your code
    });
}
```

Suppose you think Laravel's Str class should have a method to connect two strings. But there is no such method in this class. Then you can create your own method for this class, without making any changes anywhere in this class. Because Laravel has some classes that use the Macroable trait by default. Among them Str class one. I will give the list of classes below. So how do we create a method in Str class to concat? You have already seen a demo format. That is the format we will use now.
```php
public function boot (){
    Str::macro('concat', function ($str1, $str2)
        return $str1. ' '. $str2;
    });
}
```
Now if you write <code>$str = Str::concat('My String 1', 'My String 2');</code>  then you will see that the two strings are connected. This means that a virtual method has been created in this class without any change in the Str class.
###How it works:
 When you call the macro method in a class Macroable, it enters the static macro method of the Macroable Trait. I mentioned the method below:
```php
public static function macro($name, $macro)
{
    static::macros[$name] = $macros;
}
```
It registers custom macros and stores them in its static macro property. Here comes the name of the custom method in the name variable and the instance of Closure in the macro variable.
And when you call the custom method, the `` __call() `` and `` __callStatic() `` magic methods of Macroable Trait handle it dynamically.
There is one more feature called mixin in Macroable Trait. I will try to talk about it in a later post InshaAllah.
How do i connect with www.mywifiext.net login setup page for Netgear Extender setup
Tags: mywifiext, localhackday, setup
Published: 2021-11-05 17:04:12

To get to mywifiext Setup, plug in your Netgear extender and turn it on. Using your web browser, go to the mywifiext configuration page right now. Mywifiext.net is a local url that cannot be found online. On the configuration tab, you should see a New extender setup button.  Click on the finish Setup button.

Connect your Netgear extender and toggle it on to access mywifiext Setup. Go to the mywifiext setup page right now in your web browser. Mywifiext.net is a private address that cannot be searched on the internet. A New extender setup button should appear on the configuration page. To complete the setup, click the Finish button.
[Mywifiext net login](https://www.mywifiextsetuphelp.com/mywifiext-net-setup)
[Mywifiext.local](https://www.mywifiextsetuphelp.com/mywifiext-local/)


Mywifiext Setup might be a great starting point for connecting our wireless and wired devices to the internet. We can't imagine our lives now if we don't have simple access to the internet wherever we are. With the help of such WiFi boosters, you'll be able to take benefit of our house's perfect connection.
5 Articles every WebDev should read this week (#44)
Tags: webdev, tutorial, javascript, programming
Published: 2021-11-05 17:03:39

 
## What's New In DevTools (Chrome 96)
https://developer.chrome.com/blog/new-in-devtools-96/

---

## Photoshop's journey to the web
> Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new standardized web technologies, Adobe has now brought a public beta of Photoshop to the web.
https://web.dev/ps-on-the-web/

---

## How To Use Aspect-Ratio CSS Property In Responsive Web Designs?
> CSS developers have introduced a new property called aspect-ratio that can take care of a lot of such stuff. This post will guide you along with this new property and introduce various implementations in different scenarios and how aspect-ratio reacts in those situations.
https://www.lambdatest.com/blog/how-to-use-aspect-ratio-css-property/

---

## Understanding React’s useEffect cleanup function
>React’s useEffect cleanup function saves applications from unwanted behaviors like memory leaks by cleaning up effects. In doing so, we can optimize our application’s performance.
https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

---

## 4 Essential Tips for Better Asynchronous Code in JavaScript
> We'll share a list of essential "Asynchronous programming 201" tips and tricks with examples that can help you beat single thread in JavaScript and improve your code efficiency. Let's pretend the history of asynchronous code started with Promises to avoid the "dawn of time/callback hell" intros and concentrate on the recent JavaScript asynchronous patterns
https://www.ditdot.hr/en/4-tips-better-asynchronous-javascript-code?utm_source=ESnextNews.com&utm_medium=Weekly+Newsletter&utm_campaign=2021-11-02

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---
 
[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)
 
---
Useful tools for contribution
Tags: opensource, java, linter, formatter
Published: 2021-11-05 16:53:43

As seventh lab of OSD600, I added some useful tools for the future contribution. 
Here are some revisions I made

### IDEA setup
I used IntelliJ for my SSG application. The ide setting were already pushed in the GitHub, I did not have much things to do for the default project setting for the contributors.

### Added maven to the project
For smoother dependencies/plugin managements for other developers, I decided to add Maven to my project. We do not have to have physical .jar files to use dependencies when we use maven. Maven is a great build tools especially when the project is not only being revised locally. 

### Source code formatter
I used google-java-formatter in my project, and added instruction on how to use it. 
It is very simple to use in IntelliJ. It is easily addable in IntelliJ Marketplace, and once its been enabled, user can use the regular reformat shortcut, which is "CTRL+ALT+L". 

### Linter
SpotBug is a tool for spotting some silly mistakes that might cause bug in the future. Through maven, I was able to add spotbug plugin easily, and it is in "pom.xml" of the project. 
It is very simple to run spotbug.
```
mvn spotbugs:gui
```
This command above will inspect the code and show you some possible bugs with some UI. 

### CONTRIBUTING.md
I created an [instruction](https://github.com/irenejoeunpark/ssgApplication/blob/master/CONTRIBUTING.md) for the contributors. 
It has step-by-step instructions on what requirements you need, how to install and run the project, what you need to do after fixing issues. 
Through Release0.2, I got a chance to contribute in other projects, but it was way easier to contribute in a project that has detailed instructions, and their own standards. 

You can find all of those changes [here](https://github.com/irenejoeunpark/ssgApplication/commit/5be3d6b654ab8c07448ec571b1802be4c84dd230).
Redux The Easiest Way [Part 1]
Tags: redux, javascript, react
Published: 2021-11-05 16:26:42

## What is redux?
Well in the web if you search for this question then you might see that redux is a state management tool which helps up to manage the state of the application.

**Now you will think what the heck now is the state**

To understand this, let's take an example of a building. Suppose there are 5 floors in the building. Then there is a lift in that building. 

There is a person named Clark in that building who takes stuff from each floor, stores it in a box (which is present in that lift). 

**Now let's take a case:**
You are standing with a box of pizza in the ground floor and your sister is in the 3rd floor whom you want to give the pizza. Now you will give the pizza to Clark and he will store it in the box. Then your sister will order clark to give her the pizza you bought and clark will deliver it to you. 

Now, your sister needs to give a watch that she bought for your father who lives in the 1st floor. She will give the watch to Clark. When your father asks about the watch, Clark will hand it to him.

### Now where is redux in this story?

The building is your app. The lift system, including Clark, the box is actually redux. You, your sister, your father are the screens in your app. And the pizza, watch are data. 

So basically what redux is doing is that it is helping to pass the data between the screens of your app.

**This is why redux is required. Take redux as a system which helps you to store data and that data can be accessed by any of the screens you want. This is why redux can be even a lifesaver for you.**
Capture full screen shot of the website without browser extension
Tags: productivity, tutorial
Published: 2021-11-05 16:20:03

Hi Everyone!! I am new, this is my 1st post for taking website screenshot without any browser extension.

Steps to follow:
1. Inspect the element you wish to capture.
2. Open the Command Menu with Cmd + Shift + P / Ctrl + Shift + P.
3. Type in screenshot within the Command Menu.
4. You can now capture the screenshot of only the specific element, a viewport screenshot, or a full-page screenshot.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

Thank you for reading!
Squid Game 3D hover flip
Tags: hoverflip, webdev, squidgame, naemazam
Published: 2021-11-05 15:58:02

Let's make a 3D Hover Flip with HTML, CSS, JS. 

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEJpyjE" data-user="naemazam" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naemazam/pen/ZEJpyjE">
  Squid Game hover flip</a> by Naem Azam (<a href="https://codepen.io/naemazam">@naemazam</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Web Services 101: The client is downstream, the service is upstream
Tags: programming, web
Published: 2021-11-05 15:57:50

---
title: Web Services 101: The client is downstream, the service is upstream
published: true
description: "Downstream" and "upstream" have a technical definition that people often invert.
tags: programming,web
series: Web Services 101
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g8luu29tnuy1r6icw2th.jpg
---

Sometimes I read a conversation between two devs online or I overhear one while filling up my water bottle that goes something like this:

Dev 1: 

> "I think there's something wrong with the downstream service. It keeps timing out so we keep sending 500's to our clients and it's becoming a big issue."

Dev 2:

> "That service actually talks to like four others to return the response. I bet its some issue even further downstream."

This usage of "downstream" is actually wrong, and this is not a subjective observation.

## What does up/downstream actually mean?

In web services, upstream and downstream are actually [defined by the HTTP specification](https://www.w3.org/Protocols/rfc2616/rfc2616-sec1.html#sec1.3) as follows:

> upstream/downstream

> Upstream and downstream describe the flow of a message: all messages flow from upstream to downstream. 

In other words, in any HTTP interaction, the requesting service is downstream. The service responding is upstream. 

This isn't just a random definition thrown into the opening portion of the specification and then ignored thereafter, either. You will find this specific usage of up/downstream throughout the specification. Consider the definition of a [504 Gateway Timeout](https://httpstatuses.com/504) response for example:

> The server, while acting as a gateway or proxy, did not receive a timely response from an upstream server it needed to access in order to complete the request.

You will also find the same usage in documentation for things like nginx.

To visualize this, consider a series of service calls initiated by some external client, as follows:

```
client -> service A -> service B -> service C
```

The above is the request flow, but the response flow is:

```
client <- service A <- service B <- service C
```

The response flow is the flow that is the basis for "upstream" and "downstream" in web services.

For another take on this, check out [this old Stack Overflow question](https://stackoverflow.com/questions/32364579/upstream-downstream-terminology-used-backwards-e-g-nginx).

Hope it helps!