teleren/devto huggingface dataset:
✅ node.js Test Framework now in core modules
Tags: node, javascript, news, testing
Published: 2022-07-12 15:42:18

[DOCS](https://nodejs.org/api/test.html)


Good gravy! Node has a test framework, Now what does that actually mean?

You download Jest and test right? well what if you could just

``` js
import assert from 'assert';
import test from 'node:test';

test('a description', () => {
  assert.strictEqual(1, 1);
});

```
output:
``` sh
(node:27143) ExperimentalWarning: The test runner is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
TAP version 13
ok 1 - a
  ---
  duration_ms: 0.000279472
  ...
1..1
# tests 1
# pass 1
# fail 0
# skipped 0
# todo 0
# duration_ms 0.050426448
```

Agh, a reporter only a mother could love!

### Sidenote
Thats exactly how Rust handles its tests, there is no framework and usually all tests in the same file as the source which is actually really nice.

### What does it mean?
Node.js is shooting for you to forget Jest, will you? maybe one day, now? no!

But it's a step in the right direction standardising testing is a very good idea.
public project on GitHub; Now it's time to introduce yourself
Tags: github, webdev
Published: 2022-07-12 15:31:07

Hi, I started a project where every **programmer or developer** can introduce themselves without any restrictions and together we can make the project bigger. If you like it, the project link is below. I will be happy to work together again, my friend
 [Introduce yourself GitHUB](https://github.com/Amirrezaheydari81/Introduce-yourself)
Swap Array Elements with JavaScript's ES6
Published: 2022-07-12 15:20:55

If you are solving a problem and it requires you to swap elements in an array, you might create a function like this:

```
function swap(array, a, b){
    let temp = array[a];
    array[a] = array[b];
    array[b] = temp;
}
```
####Code Breakdown

- We define a function called `swap`, and pass in arguments for an `array`, variable `a`, and variable `b`. These represent the values we want to swap. 

- Next, we declare a temporary variable, `temp`, and set that equal to the value of `a` in the `array`. We need to hold this value in a variable to refer to it later. 

- Then, we set the value of `a` in `array` to the value of `b` in `array`.

- Finally, we set the value of `b` in `array` to the value of our `temp` variable. Notice that we can't set it to the value of `a` in `array` as we have already changed that to equal `b`'s value. 



##BUT - with ES6, there's a simpler way!
```
const swap = (array, a, b) => {
    [array[a], array[b]] = [array[b], array[a]];
};
```
This uses [Destructuring Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to separate the elements of the array into values that can be reassigned. 
####Code Breakdown
- To make the code more compact, we declare the function using an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) named `swap` from ES6.
- This function takes the same arguments: `array`, `a`, `b` 
- Instead of requiring the `temp` variable, we can simply assign the `array`'s value of `a` and `b` to the respective opposite value on the right side of the equal sign.
Demystifying JavaScript - Creating and Inserting Elements
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 13:01:55

In this video, we will learn about how we can create elements usinginnerHTML and document.createElement and then how we can append content to the newly created elements to the DOM. We will also see why innerHTML is not always a good way to replace content on the fly because of unnecessary re-renders and we will see why we should use the document.createElement and how elements created using this method helps in bringing interactivity and binding listeners on it.


{% youtube mQ5nQXEGqSg %}

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 My Blog: https://the-nerdy-dev.com
API Gateway + HTTP Host = no X_forwarded_for header
Tags: aws, api, cloudflare
Published: 2022-07-12 15:08:45

## Background
When deploying our REST API to API Gateway, we found an issue where there was no `HTTP_X_FORWARDED_FOR` header; this was a security concern for our security team as there was no way for us to get the customers IP address.

We are utilising the [x-amazon-apigateway-integration OpenAPI extension](https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-swagger-extensions-integration.html) to add additional data to the API documentation provided to end-users of our API. 

## Example
Below is an example of a very simple Open API 3.0 endpoint where we use the stage variable URL to access our internal backend.

```yaml
/products:
    summary: get all products
    get:
      summary: Retrieve all products
      responses:
        '200':
          description: No issues
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products'
      x-amazon-apigateway-integration:
        type: http
        httpMethod: GET
        uri: https://${stageVariables.url}/products
        requestParameters:
          default:
            statusCode: 200
```

## Solution

When deploying the REST API, we need to pass the x-forwarded-for header to the http endpoint like below.


```yaml
/products:
    summary: get all products
    get:
      summary: Retrieve all products
      responses:
        '200':
          description: No issues
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products'
      x-amazon-apigateway-integration:
        type: http
        httpMethod: GET
        uri: https://${stageVariables.url}/products
        requestParameters:
          integration.request.header.x-forwarded-for: method.request.header.x-forwarded-for
          default:
            statusCode: 200
      parameters:
        - name: x-forwarded-for
          in: header
          required: true
          schema:
            type: string
```


## Next steps
Our x-amazon-API gateway-integration documentation kept growing, so we updated our automated deployment script to add most of these generic items - which helps us keep the documentation clean and without any specific amazon documentation.
I have added an example of our current product endpoint specification. 

```yaml
/products:
    summary: get all products
    get:
      summary: Retrieve all products
      responses:
        '200':
          description: No issues
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/products'
```
Lo bueno y lo malo de aprender Programación de forma autodidacta
Tags: programming, motivation, spanish
Published: 2022-07-12 14:49:35

✅ Lo bueno de aprender Programación en Internet: Hay muchísimo material gratuito y muchas rutas a seguir, lo cual es genial 😍

❌ Lo malo de aprender Programación en Internet: Hay muchísimo material gratuito y muchas rutas a seguir, lo cual es abrumador 🥺

Te dejo algunos tips que te pueden servir 👇

1. Podés armarte una ruta sencilla, simple con bases robustas, es decir, empezar por lo más básico, con lo más importante y dedicarle su tiempo. No intentes saltearte esa parte que son los cimientos de todo el resto. 

Y recordá que no vas a poder aprender todo a la primera.

2. Buscar alguna comunidad en Discord o cualquier otro lugar para seguir una ruta en conjunto y es posible que haya menos desvíos en la ruta de aprendizaje.

3. Buscar material de páginas reconocidas y/o videos donde el material siempre tenga mucha aceptación con gran cantidad de "me gusta" 👍 y comentarios positivos ❤️

No quiere decir que otros artículos/videos sean malos, pero es una forma de saber que es contenido de calidad.

4. Ir estudiando pero a la vez ir practicando para que entendamos mejor el concepto y veamos la realidad del concepto en la práctica. También sirve estudiar "on demand", cuando necesites hacer algo, lo estudiás.

5. A medidas que vayas aprendiendo cosas interesantes, anotalas en un Notion, esto te va a permitir hacer un resumen de lo aprendido y escribir lo que aprendés te ayuda a fijar más el conocimiento.

> No es la guía definitiva, ni tampoco existe una, pero son tips que a mucha gente les sirvió.

¡Ojalá te ayude! 🤗

Saludos 👋
Early Merge Conflict Detection Across All Branches In IntelliJ
Tags: programming, git, productivity, webdev
Published: 2022-07-12 14:44:10

We are happy to announce that GitLive's flagship feature, early merge conflict detection, now works across all branches in IntelliJ! 🎉 

When we first introduced [real-time merge conflict detection](https://blog.git.live/gitlive-11.0-Real-time-merge-conflict-detection), only the changes from each of your teammates’ current branch were shown in the gutter. This meant you could miss a merge conflict from changes in a branch that is not currently being worked on, for instance, changes from a PR waiting for review. Now the change indicators in the gutter of the editor show changes from all branches that contain changes compared to your current branch.

And, as before, and as long as you are not in offline mode, this includes the unpushed changes of your teammates that are also not in offline mode for real-time, instant merge conflict detection!


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


## New gutter indicator filters

Previously you had a simple switch to show or hide the indicators you see in the gutter of the editor. Now, similar to the team window, you can filter the change indicators shown in the gutter of your editor by type.


It’s worth noting that these filters are independent of the [team window filters](https://blog.git.live/gitlive-15.0-offline-merge-conflict-detection-across-all-branches-for-any-git-repository#enhanced-team-window-filters), but when you change the team window filters the gutter indicator filters are automatically updated to match (but not vice versa). To open the gutter filters menu, right-click on the gutter and search for GitLive in the collapsible menu.


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

🔸 **Pushed Changes**. Turning off pushed changes will hide the indicators coming from the pushed changes on other branches.
🔸 **Unpushed Changes.** Turning off unpushed changes will hide the indicators coming from the unpushed changes of your teammates.
🔸 **Non-conflicting changes.** On by default, turn off non-conflicting changes to only show conflicts in the gutter.
🔸 **Include stale changes.** By default, changes from branches that have not been modified in 3 months are hidden, turn this on to show them.

👉 <sup> Both pushed and unpushed changes are on by default, turn both off to hide the indicators completely </sup>

That’s it for now, we would love to know what you think of these updates and how we can make GitLive better for you, so please reach out via the comments section below.

***

Don't have the GitLive extension installed yet? You can find it [here](https://plugins.jetbrains.com/plugin/11955-gitlive), and if want to learn more about the latest release, check out [this blog post](https://blog.git.live/gitlive-15.0-offline-merge-conflict-detection-across-all-branches-for-any-git-repository).
nuxt2 $nuxt.$route.path to nuxt3
Tags: nuxt2, nuxt3
Published: 2022-07-12 14:31:30

---
title: nuxt2 $nuxt.$route.path to nuxt3
published: true
description: Converting nuxt2 routes to nuxt3 routes.
tags: nuxt2, nuxt3
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

nuxt2 => `$nuxt.$route.path`
nuxt3 => `const route = useRoute();//needs to be initialized in the setup`

nuxt3:

```
<script setup>
const route = useRoute();
</script>
```
or

```
<script>
export default {
  setup() {
    const route=useRoute();
  },
}
</script>
```
https://v3.nuxtjs.org/api/composables/use-route/
Explain like I am five: API
Tags: api, programming, discuss, beginners
Published: 2022-07-12 14:28:00

I had an interesting experience in an interview where the specialist asked me what I would say if I had to explain about an API to a ten years old kid.
Before that meeting, I was studying microservices and monolithic to understand Docker. The only image that I had in my head, was the whale with boxes on their heads, then you can imagine that my explanation was not good to a 10 years old kid lol. Usually I take some time to make technical things be easier to understand.

After that, I been thinking about how I would say that to a non-tech person. So, for now, I will share my vision.

Quick technical explanation: API stands for _Application Programming Interface_. We can simplify this saying that API is the interface of an application. It give us the possibility to request and receive a service. 

So, if today I try to explain to a kid, I will say:

"Imagine that you are in your dad's phone and you open the McDonalds App. When you see the menu, you will look for food you want and pay for that, right? After that, you are asking the McDonalds to delivery your food. This is how an API works. You ask and it delivers you."

What do you think about my explanation and how can I improve my knowledge? Do share your thoughts!
React + Firebase (Project)
Tags: webdev, netlify, beginners
Published: 2022-07-12 14:27:58

Hello guys Today i am going to show you a Small project which I created while learning Firebase ,A NoSQL cloud database.

Project link - 
https://e-quotes-2099.netlify.app/

* The UI is created using React Js + TailwindCss
* BackEnd and Server is provided by Firebase
* Google Authentication of Firebase
* Hosted on Netlify

Some SS of my project -

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

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

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

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

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
Drag & Drop Event - HTML5 and JavaScript
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 14:12:39

In this video, we will learn about the lifecycle about the drag and drop event where we will perform the drag and drop operation on an image and move it from one location to one location. 

{% youtube oMfVhc3s8m0 %}

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 My Blog: https://the-nerdy-dev.com
Understanding Debouncing In JavaScript
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 14:11:43

In this video, we will about understanding DEBOUNCING in JavaScript and how it helps to improve the performance of the browser, you will understand how it is getting used in the browser in scroll events when we search for a product from a list of products in an e-commerce website, this helps in minimizing the API calls that we make to the backend and improves the performance of application. 


{% youtube wR6h-hr0OL8 %}

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 My Blog: https://the-nerdy-dev.com
React custom hook npm package to fetch Dev.to blogs
Tags: react, javascript, webdev
Published: 2022-07-12 14:11:07

---
title: React custom hook npm package to fetch Dev.to blogs
published: true
description: A custom hook to fetch dev.to blogs 
tags: react, javascript, webdev
---

## Introduction
I wrote a React custom hook to fetch dev.to blogs. This hook was inspired when I was trying to integrate dev.to blogs to my personal portfolio website

## Installation 
```
yarn add dev-to-blogs-hook
npm i dev-to-blogs-hook
```

## Usage 
The hook provides 3 params : blogs, fetching , error 
```
import { useDevToBlogs } from "dev-to-blogs-hook";

const { blogs, fetching, error } = useDevToBlogs({userName : 'devToUserName'})
```

## Conclusion 
A simple react hook to integrate with your React apps. 

* [Vignesh Iyer](https://vigneshiyer.netlify.app/)
Demystifying JavaScript - Exercise - Handling Multiple Async Fetch Calls using Promise.all & Promise.allSettled
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 14:09:06

In this video, we will do a small exercise and see how we can handle multiple async calls using `Promise.all` and then we will slowly go to `Promise.allSettled` to understand how it does the same thing. The main thing we want is whatever promises error out we should get the errors for them but whatever promises succeed we want the results as well which does not happen in case of `Promise.all` though we will make a small modification to it to see how it can do so just like `Promise.allSettled`.

{% youtube -J_O4D0-syw %}

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 My Blog: https://the-nerdy-dev.com
Download file curl, stripe.
Tags: stripe, php, curl
Published: 2022-07-12 14:07:57

Hello, Tell me please For example. how can I download Files from the Stripe With methods curl, php?

I have this 
curl https://files.stripe.com/v1/files/file_xs8vrJzC/contents \
  -u sk_test_51LEDQjLLD93xWf5fjw6KVcmBcVEV1PXAA8KJMTLhageVjMWJxPEZ3NKahbuT3q0hABr6N5d5P2i79MDUpldHMq9F00WtXaz5RL:
CSSBattle | #25 Blossom
Tags: css, challenge, cssbattle, blossom
Published: 2022-07-12 14:06:32

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #25 Blossom](https://cssbattle.dev/play/25) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Blossom Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3z8zts7q1o9wrt25txx7.png)

---

> #### Solution:

```html
<div class="container">
  <div class="lg-blossom left"></div>
  <div class="lg-blossom right"></div>
  <div class="sm-blossom left"></div>
  <div class="sm-blossom right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    background: #998235;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .lg-blossom {
    position: absolute;
    background: #1a4341;
    width: 100px;
    height: 80px;
    left: 50%;
    top: 50%;
  }
  .lg-blossom.left {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transform: translate(calc(-50% - 50px), calc(-50% - 40px)) rotate(270deg);
  }
  .lg-blossom.right {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    transform: translate(calc(-50% + 50px), calc(-50% + 40px)) rotate(270deg);
  }
  .sm-blossom {
    position: absolute;
    background: #f3ac3c;
    width: 80px;
    height: 60px;
    left: 50%;
    top: 50%;
  }
  .sm-blossom.left {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    transform: translate(calc(-50% - 50px), calc(-50% + 60px));
  }
  .sm-blossom.right {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transform: translate(calc(-50% + 50px), calc(-50% - 60px));
  }
</style>
```

---

> #### Key Takeaway(s):
- using border-radius property to create blossom like shape
- using both translate and rotate properties to control direction and placement of elements 

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Machine Learning Tutorials - From Novice To Pro - - Intuition Behind KNN Algorithm
Tags: 100daysofcode, programming, codenewbie, machinelearning
Published: 2022-07-12 14:06:00

In our previous videos, we introduced Classification, which is a supervised form of machine learning. 
 In this video, we will understand the intuition behind KNN algorithm to understand how we get the decision boundary for KNN algorithm to perform classification.


{% youtube XoMwSeL8y3E %}

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 My Blog: https://the-nerdy-dev.com