teleren/devto huggingface dataset:
3 Dev hacks of JS ...spread Operator for Arrays
Tags: javascript, webdev, react, programming
Published: 2022-08-20 15:08:40

Being a software Engineer, it's always learning new things, and implementing them on a loop😉. This post is about the JavaScript ES6 ...spread operator, to make your life easier, and code like a pro.😎

## What is Spread Operator?

How MDN defines it?
![MDN Defination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hwln4xwyd2i4vbuh4zz.png) 
 
In simple words, it's just 3 dots(...) which can be applied to iterable, such as Arrays, Sets to combine/copy the elements. When applied to objects, it helps in updating/adding key-value pairs. 

Let's understand how it's applied to arrays by a story.

_**Scene 1**_: You are working on a feature and you got 2 arrays with different elements to combine, how will you do it. 

```
cosnt array1 = ["JS", "REACT", "GIT"]
const array2 = ["Node", "Mongo"]
```

Is this the approach you are following?

```
const newArray = array1.concat(array2);

console.log(newArray)
// output -> ["JS", "REACT", "GIT", "Node", "Mongo"]

```
If yes, then start using the below one, it's recommended, understandable, and more transparent.

```
const mergedArray = [...array1, ...array2];

console.log(mergedArray)
// output -> ["JS", "REACT", "GIT", "Node", "Mongo"]
```

> Just for sake of understanding consider spread as "_remove bracket and get all the elements inside them_"😜

_**Scene 2**_: Let's say you have mergedArray, and now you want to clone it and perform some operations.

```
// we now have mergedArray= ["JS", "REACT", "GIT", "Node", "Mongo"]
```
Let's clone the array, it's super easy. Just an assignment.
```
const cloneArray = mergedArray;

clonedArray[0] = "Python";

conosle.log(clonedArray) 
// ["Python", "REACT", "GIT", "Node", "Mongo"]😎

console.log(mergedArray) 
// ["Python", "REACT", "GIT", "Node", "Mongo"]😲
```
Woo! you did not expect that to happen. Remember, an array is a reference type, when assigned to a variable, it will store the reference, not the actual value. So when you cloned merged array via "=" assignment operator, it stored the address, not the value. So the change made in cloned array, mutated actual array.

Then how to do it, don't worry spread operator to the rescue.✨

```
const clonedArray = [...mergedArray];

clonedArray[0] = "Python";

conosle.log(clonedArray) 
// ["Python", "REACT", "GIT", "Node", "Mongo"]😎

console.log(mergedArray) 
// ["JS", "REACT", "GIT", "Node", "Mongo"]😃
```
Here spread operator is not referring to the address of mergedArray, instead it's copying the array at a new address, so that changes made on clonedArray does not mutate mergedArray.

_**Scene 3**_: Let's say you have an number array, how to get the max and min element from the array. Believe in ...spread😂

```
const numberArray = [22, 58, 46, 20, 5]

console.log(Math.max(...numberArray)) // -> 58
console.log(Math.min(...numberArray)) // -> 5
```

Thank you for spending valuable time reading this post, I am sure you learned something today.😄
Timeout with the fetch API
Tags: fetch, javascript, timeout
Published: 2022-08-20 15:05:00

Some time ago I shifted from Axios to fetch, to get rid of another dependency. Nowadays the fetch API is available everywhere, in the browser and also in node, so no need to take something else and it also supports streaming that is not available in Axios.

But when it comes to set a timeout for a request, how could this be done?

I saw solutions using setTimeout but far better seems the following solution.

Simply add

```
signal: AbortSignal.timeout(<number>)
```

to your fetch like in this example and you are done — at least for the timeout.

```
fetch(<url>, {
  ...
  signal: AbortSignal.timeout(5000)
})
```

Hope this helps to get more comfortable with the fetch API.
Typescript Series - Length of a Tuple
Tags: typescript, javascript, webdev, programming
Published: 2022-08-20 14:51:09

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

## Let's write a Type to get the length of a tuple.

First, what it a tuple, tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same. 

Lets have a look to our tuple

```
const tesla = ['tesla', 'model 3', 'model X', 'model Y'] as const
```

Notice how we define it _**as const **_ so it can't be modified.

Now we need to create a type that expects a tuple, and returns its length.

```
type Length<Type extends readonly unknown[]> = Type['length']
```
Let's break it down.


`Length<Type extends readonly unknown[]>`
You can read this as, Type extends an array of unknown type that its length won't change, remember for tuples we do know it's length, that is why we define the tuple variable as const so we cant modify it.

`Type['length']` Lastly, we access the length property from our Type.

This one was an easy one

Thank you!

you can find me here [My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)
[Desafio] - Front-end: Scroll Infinito
Published: 2022-08-20 14:31:00

> Conteúdo original em https://twitter.com/zanfranceschi/status/1560996767252234240

---

Ei dev front-end,

É chegada a hora de mais um desafio para o fortalecimento da nossa amizade. Um Toma Lá, Dá Cá de qualidade!

Quero ver você fazer um SCROLL INFINITO parecido com o do vídeo (que está na thread original do Twitter) e sem qualquer framework! 🤭

Cola mais pros detalhes!

cc @sseraphini

↓

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

Como sempre e com muito carinho, fiz uma API bonitinha pra você consumir no front. 💕

É só executar...

docker run --rm -p 8000:80 zanfranceschi/desafio-20220820-scroll_infinito

...e acessar http://127.0.0.1:8000/ (lá tem os links para a API e um exemplo de solução).

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

---

É esse o desafio!

Se quiser ver o código, tá tudo em https://github.com/zanfranceschi/desafio-20220820-scroll_infinito ❤️ 

Se você curtiu, dá um RT do amor no primeiro tweet, like, comenta, tá?

Agora dá um abraço aqui ó 🫂
Why firebase was not the right fit for my app
Tags: firebase
Published: 2022-08-20 14:26:00

For a new next.js project I tried out firebase. It was heavily advertised by one of my favourite youtubers [fireship](https://www.youtube.com/c/Fireship). Coming more from a relational background I was really curious about a document oriented database approach and how firebase would help me to progress quickly. 

The idea for the app was a simple interface that lists trips of users in a similar fashion to the Airbnb listings ui which includes a map that lists the listings as an overlay over the map.

I really love the idea of Backend as a service as it helps to quickly get your frontend to work seamlessly and secure with authentication and storing the data. Yet, there were some issues that quickly made me realise that firebase was **not** the right fit for this app. Here's why:

## 1. Query Limitations

In order to show the trips on the map, I'd have to check if the latitude and the longitude is within the bounds of the google maps view. It turns out that this is **not** possible in firebase:

`You can perform range (<, <=, >, >=) or not equals (!=) comparisons only on a single field`

Inequality operations on latitude AND longitude of the trips is only possible on either latitude or longitude, the rest of the filtering would have to be dealt with by the client. Everyone who starts a project with firebase should keep in mind that filtering on more than one field is not going to be possible.

## 2. Pagination

Since you can't query the total amount of documents within a collection, it's not possible to show the number of pages. It's only possible to show the next and the previous page. Pagination feels strangely complicated in firebase. It's not really a deal breaker for me, but makes searching through a set of data a little less user friendly.
Amazing VSCode Extension
Tags: vscode, programming, extension, terminal
Published: 2022-08-20 12:54:00

### Intro
As you know `Terminal` is one of the most essential tools that we use. 

But in VSCode we have to use following ways to open terminal:


- Shortcut
  - `ctrl + '`(MacOS)
  - `alt + '` (Windows)

- Top Menu > `Terminal`


Sometimes we need `Terminal` access in our hands.

### Extension

So, I am inspired from Jetbrains products such as `PhpStorm`, `WebStorm` or etc. which has `Terminal` button on bottom status bar (bottom menu) as below image:

![PhpStorm bottom menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k3wukskbf84f7f2kqwm.png)

And that is why I decided to create an extension to access my favorite thing - `CLI` easily, with one click.

### Installation

You can easily download this extension from `VSCode Extensions (Marketplace)`
Just search for **`bottom-terminal`** in Extensions Tab as below:

![VSCode Extensions Marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slih94svzw5wi8yeovqg.png)

And ta dammm 🎉. Now we have  `Terminal `button on bottom menu, so we can easily open it. Good codings 😉

![VSCode bottom menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akoj2yhyj20lzp2v98yb.png)

Here is the link to the [extension](https://marketplace.visualstudio.com/items?itemName=fuadpashayev.bottom-terminal) and [github repo](https://github.com/fuadpashayev/vscode-ext-bottom-terminal).
Cannot recall event listener after removing it.
Tags: javascript, webdev, html, css
Published: 2022-08-20 12:53:32

I am trying to create a set of forms which after each click on the next button will animate and bring the next form but unfortunately 
the next button on the 1st form works just one time when its called again its not responding. It will put code below. Any help would be appreciated.


console.log("welcome to form.js");

let form_1 = document.querySelector(".form_1");
let form_2 = document.querySelector(".form_2");
let form_holder = document.querySelector(".form_holder");
let input_holder2 = document.querySelector(".input_holder2");
let submit_1 = document.querySelector(".submit_1")
let submit_2 = document.querySelector(".submit_2");
let previous = document.querySelector(".previous");
//form 3
let form_3 = document.querySelector(".holder3");

/*function form_anim() {
  form_2.style.transform = "translateX(0)";
  form_2.style.transition = "transform 400ms";
}*/

previous.addEventListener("click", () => {

  form_2.style.transform = "translateX(900px)";
  form_holder.classList.remove("anim");
  form_holder.classList.toggle("anim2");
  form_2.style.transition = "transform 400ms";
  
});

submit_1.addEventListener("click", () => {
  
  form_holder.classList.toggle("anim");
  
  form_holder.addEventListener("animationend", call_store);
});

function call_store() {

  console.log('executed');
  form_2.style.transform = "translateX(0px)";
  form_2.style.transition = "transform 200ms";
  form_2.removeEventListener("animationend", call_store);
}
Free Digital Training & Official Practice Test Questions
Tags: aws, certification, career, community
Published: 2022-08-20 12:49:39

Hey Team,

Hope you are all doing Really Well,

I just thought I would post a Resource, I found Incredibly hopeful with my journey along the way of my foundational and associate studies with AWS.

Now there maybe a tonne of paid subscription based courses out there you can use in preparation for your examinations or just developing on hand skills, The AWS Skills Builder Platform is Truly a Great Free to Use Resource that will allow you not to only expand your knowledge in a number of such as Networking, Data Analytics, AWS Cloud Practitioner & even a deep dive into AWS Compute Resources, visit the link to check out some of the incredible content AWS has for the general community.

https://go.aws/3AABYUX

Be sure to check out and test your knowledge after studying each subject matter to scale your understanding in terms of exam readiness or simply to review where you need to upskill yourself in a particular domain.

Wishing you every success in all your studies.
DevonPatrick Adkins
How to hide username and password fields in the WordPress login form
Tags: wordpress
Published: 2022-08-20 12:42:00

Sometimes on your WordPress site, you don’t want to have the default login form anymore. You might want your users to log in with social login or an external identity provider. In that case, you need to remove the **username** and **password** fields.

To achieve that, we’ll use CSS to hide those fields. We’ll only work in the **functions.php** file through the WordPress admin dashboard. So, you don’t need to be a specialist in WordPress to accomplish this manipulation. Our version of WordPress in this tutorial is 6.0.

## Step 1: Log in to your WordPress admin dashboard
After logging in to your WordPress dashboard, navigate to **Tools>Theme File Editor**.

![Open Theme File Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzxl8n9xctwq6q8dl7h4.png)


## Step 2: Open the functions.php file
When you are on the theme editor page, localize and open the **functions.php** file.

![functions.php file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vfba9dwxzahtjzzffxr.png)

## Step 3: Insert the code and save
Finally, we’ll insert the following piece of code at the end of the **functions.php** file and save it.

```
add_action( 'login_head', 'wpse_121687_hide_login' );
function wpse_121687_hide_login() {
    $style = '';
     $style .= '<style type="text/css">';
     $style .= '.login form .user-pass-wrap{ display: none }';
	 $style .= '.login form .submit { display: none }';
	 $style .= '.login form .forgetmenot { display: none }';
	 $style .= '.login form .input { display: none }';
	 $style .= '.login form label { display: none }';
	 $style .= '.login  #nav { display: none }';
	 $style .= '.login  #mo_saml_button b { display: none }';
	$style .= '#login {margin-top: 150px}';
    $style .= '</style>';

     echo $style; 
}
```

![Insert code in the functions.php file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bsd1hm0otbeigr17mfd.png)

And voila, we have the desired result.

![Final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ud9lsh18ub2kfspm0cfa.png)

## Conclusion
The purpose of this tutorial was to show you how to hide the username and password fields from the WordPress login form in a proper way. Everyone has his reasons to hide them. If you have encountered a problem applying this tutorial, don’t hesitate to leave a comment. It would be a pleasure for me to help you.
This Week I Learned - 2022 #Week 33
Tags: javascript
Published: 2022-08-20 12:25:58

- Reduce **bundle size** when using `framer-motion` library: replace `import { motion } from 'framer-motion'` by `import { m } from 'framer-motion'` ([source](https://www.framer.com/docs/guide-reduce-bundle-size/#how-to-reduce-bundle-size))

```diff
Page                                       Size     First Load JS
- ○ /                                      1.14 kB         213 kB
+ ○ /                                      1.14 kB         185 kB
```
You are a software engineer too😯😯😯?
Published: 2022-08-20 12:24:17

Hello and welcome to my blog, my name is Nyasha Karata and I am a freelance software engineer with over 3 years of experience. I created this blog for those who have passion in tech and who are 
currently in tech. I will be posting stuff about software engineering (how to become one, how to make money with it, do’s and don’ts) and will be tackling both the technical and business part of the 
job. If wanna learn more about this, follow me and stay tuned coz I will be dropping some dope content here……………………stay tuned.
Knight Tour - NXN
Tags: javascript
Published: 2022-08-20 12:21:25

```
const trackKnightMoves = () => {
  const inputMatrix = Array.from(Array(8));
  for (let i = 0; i < inputMatrix.length; i++) {
    inputMatrix[i] = Array.from(Array(8)).fill(-1);
  }
  inputMatrix[0][0] = 0;
  const xMoves = [1, 2, 2, 1, -1, -2, -1, -2];
  const yMoves = [-2, -1, 1, 2, 2, 1, -2, -1];

  if (makeNightMove(0, 0, 1, inputMatrix, xMoves, yMoves)) {
    return inputMatrix;
  } else {
    console.log("No Matching Move");
  }
};

const makeNightMove = (x, y, moveCount, inputMatrix, xMoves, yMoves) => {
  let N = 8;
  let k, next_x, next_y;
  if (moveCount == N * N) {
    return true;
  }

  for (k = 0; k < inputMatrix.length; k++) {
    next_x = x + xMoves[k];
    next_y = y + yMoves[k];

    if (isSafeToMoveNext(next_x, next_y, inputMatrix)) {
      inputMatrix[next_x][next_y] = moveCount;
      if (
        makeNightMove(
          next_x,
          next_y,
          moveCount + 1,
          inputMatrix,
          xMoves,
          yMoves
        )
      ) {
        return true;
      } else {
        inputMatrix[next_x][next_y] = -1;
      }
    }
  }
  return false;
};

const isSafeToMoveNext = (x, y, inputMatrix) => {
  if (
    x >= 0 &&
    y >= 0 &&
    x < inputMatrix.length &&
    y < inputMatrix.length &&
    inputMatrix[x][y] === -1
  ) {
    return true;
  } else return false;
};

console.log(trackKnightMoves());

```
Knight Probability - out of borad
Tags: javascript
Published: 2022-08-20 12:20:36

```
const findProbablityOfKnight = (N, K, X, Y) => {
  const dir = [
    [1, 2],
    [2, 1],
    [-1, 2],
    [-2, 1],
    [-1, -2],
    [-2, -1],
    [1, -2],
    [2, -1],
  ];

  let memo = new Map();
  const stayOnBoard = (K, X, Y) => {
    if (X < 0 || Y < 0 || Y >= N || X >= N) {
      return 0;
    }
    if (K === 0) {
      return 1;
    }
    let key = `${K}:${X}:${Y}`;

    if (memo.has(key)) {
      return memo.get(key);
    }

    let probability = 0;

    for (let each of dir) {
      let [r, c] = each;
      probability += stayOnBoard(K - 1, X + r, Y + c) / 8;
    }
    memo.set(key, probability);
    return probability;
  };

  return stayOnBoard(K, X, Y);
};

console.log(findProbablityOfKnight(3, 2, 0, 0));

```
How to git resolve conflicts quickly from two commands lines.
Tags: git, bash, alias, conflicts
Published: 2022-08-20 11:51:27

---
title: How to git resolve conflicts quickly from two commands lines.
published: true
description: Resolve conflicts quickly by accepting incoming changes or current changes from one command line.
tags: git, bash, alias, conflicts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9bf19bn2cg4orvf14gw.jpg
# Use a ratio of 100:42 for best results.
---

When rebasing/merging, you may face sometimes conflicts, and if you're like me... "LAZY", you just want to get all new changes from the main branch or keep all your current changes as fast as possible depending on the file !

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

So, for conflicts on some file, you may need to get incoming changes or keep your current changes ! I made two alias for that, `git add-their` and `git add-our` !

Under the hood, what it's done is quite simple, in your `~/.gitconfig` section, you just have to add those lines :

```toml
[alias]
      add-their = !git checkout --ours $@ && git add $@
      add-our = !git checkout --theirs $@ && git add $@
```

So, how this work, it's mostly two main commands, a checkout command and an add command, let's focus on keywords (theirs and ours) and how they are reverted !

In a context of rebasing, if you're willing to set current changes with these aliases, you should do `git add-our` and `git add-their` for incoming ones, that logic is inverted when you're dealing with merge conflicts. this is a [good article](https://howchoo.com/git/git-merge-conflicts-rebase-ours-theirs) that go deeply on explanations !

**IMPORTANT NOTE** : these aliases are only for the one knowing what they are doing, cuz on a complicated conflicts, there is some stuff you will want to keep on both side !
3 Reasons To Start Learning Quantum Computing Now
Tags: quantum, quantumcomputing, computerscience
Published: 2022-08-20 11:38:00

Quantum Computing is a rapidly-emerging technology that harnesses the laws of quantum mechanics to solve problems too complex for classical computers[1]. To the uninitiated, the term "Quantum" has a sense of complexity and mystery entangled with it that scares us from learning more about it. I've been on the same boat and procrastinated from studying this field for a long time. As I begin my journey into quantum computing, I'd like to share the reasons why you should join me too.

1) Scope

Quantum Computing has future prospects in a broad scope of domains. From Medicine to AI/ML to Chemistry to Finance to Cybersecurity to Biology to Communications to Weather Forecasting, the predicted potential is huge. It could have applications in fields we haven't thought of yet. Therefore, it will likely be the next big field having an impact across domains.

2) Community

Being an intersectional field requiring knowledge of Physics, Mathematics and Computer Science (and some Electronics if you are into hardware), it can be a lot to study. But fret not! The people in this field are very helpful and happily take newbies under their wing. There are so many discord and slack channels to get help. There are free online textbooks, workshops and MOOCs. Just follow the topic in your preferred social media and you are bound to find helpful resources and a friendly community. You will find people from different backgrounds across ages which makes this field all the more exciting.

3) Futuristic

Experts say that it will take a decade to make a breakthrough in Quantum Technology[2]. Therefore, no matter what field you are currently in and how little you are familiar with the prerequisites needed, there is ample time to catch up and make a contribution to this field. If you want to be in the forefront of this cutting edge technology, now is a great time to start learning about it.

Before you take the leap, here are some things to keep in mind:

1. There is a lot of hype around this field. Look up the concepts in your free time, take up a few free courses and workshops to separate the myth from the reality.

2. Currently, many of the job postings require a Ph.D. or at least a masters. Explore the basics before enrolling in a Masters/Ph.D. in Quantum Technology.

I hope I've convinced you to learn Quantum Computing. So where to start your self-study? What do you need to know to enter this field? Stay tuned for the next post to know more.

References:

[1] https://www.ibm.com/topics/quantum-computing

[2] https://www.forbes.com/sites/gilpress/2022/04/14/the-state-of-quantum-computing-future-present-past
From Junior Software Engineer to Mid Level with Anna McDougall
Tags: beginners, career
Published: 2022-08-20 11:21:00

Your boss won't promote you if you just do your job and hope for the best.

That's not how this works. You need to learn to play the game.

There is a lot of information out there on how to get your first job in tech and how to learn to code, but there is very little information on what happens next.

- How do you position yourself as a junior dev at your first job?
- How do you communicate?
- When do you ask for help and when should you show independence?
- How do you actually get promoted to mid level?
- What do you do if you can't get promoted?

There are so many questions that nobody really taught you how to answer.

Together with Anna McDougall we attempted to answer them in our recent Twitter space. I've made the recording into a YouTube video for easy replay:

{% embed https://youtu.be/LFIYn41AW8c %}
Building an infinite scroll game with Go
Tags: gamedev, go, tutorial, beginners
Published: 2022-08-20 11:13:00

Hey folks, I wrote about building an infinite-scroll game (like flappy bird) with Go. I leverage Goroutines to handle some aspects of the game (kinda like the cell processor's SPUs). You can read about it here : https://medium.com/@cheikhhseck/building-an-infinite-scroll-game-with-go-57bcb68642e0?source=friends_link&sk=556d552c92c49c98593633d4c0aea199