teleren/devto huggingface dataset:
Most commonly used commands for NPM and YARN !
Tags: javascript, react, beginners, webdev
Published: 2021-10-18 21:30:31

# Hello everyone! 💙 


In this article, we look into the commonly used package managers - NPM and YARN🤩 Probably you already know about these two package managers and have used them in your React JS projects or while building React JS or Node JS web apps. But you may often have been relying on a quick google search every now and then for the commands used differently by both the package managers! So here we explore the similar and different commands used by both package managers! 

# Let's get started !!


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633992800865/cw2eMdJGx.png)


## So what are NPM and YARN basically? 

A package manager is a tool that automatically handles a project’s dependencies in a variety of ways. For example, with the help of a package manager, we can install, uninstall, update, and upgrade packages, configure project settings, run scripts, and so on. The package manager handles all of the heavy work, leaving us with only the coding which is the most enjoyable part.

NPM - It stands for Node Package Manager.  This was released in 2010.
NPM involves a command-line interface (CLI) for interacting with npm via the terminal, the CLI tool. It ships as a default package manager with each fresh Node installation, which means we can start using it right away!
  
YARN - It stands for Yet Another Resource Negotiator, It is an alternative for npm. 
It was released in 2016. 
Yarn was created to address npm's shortcomings, such as performance and security concerns. It quickly established itself as a secure, speedy, and dependable JavaScript dependency management tool.

So what we get to know here is that package managers like NPM and Yarn make it easier to handle a project's dependencies.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633993594626/kee7klA6W.png)


## So what are the commands which are * DIFFERENT * for both NPM and YARN?
## What are they used for?

Let's look into this little sheet I prepared 👇



![Screenshot 2021-10-12 at 4.33.48 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633995630894/aS1PdjoN_.png)



# So what are the commands which are *SAME* for both NPM and YARN? 

Let's look at another sheet I prepared 👇


![Screenshot 2021-10-12 at 3.21.37 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633993726786/uPp44ki_f.png)


So that's it for today! You have reached the end of the article 😁    
Hope you liked this article and learned something and maybe it helped you remind the commands! 


If you find this helpful please share and like it 😁 💙 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633994516650/UbdOn2ydT.png)

Hi, I'm Amlan, a React Developer, and a CS Engineering student! This is my first blog article on DEV and I'm glad I finally decided to hop on the learning in public journey 😁  
If you find this useful, please feel free to connect with me on any of the platforms below! 

 [Twitter](https://twitter.com/AmlanDev10) 
 [LinkedIn](https://www.linkedin.com/in/amlanjyoti-bora/)
Failed to login in Netlify CMS website
Published: 2021-10-18 20:43:35



This was not my first time. I don't know if I lost the password or I changed it in the past and didn't update it, the truth is that I try to login into my website admin and nothing seems to work.

Then the case get's more strange when I reset the password but the email that is sent to me to reset it opens my website with a token as a link.

To add an extra layer to this small challenge my two months computer just died basically and nothing inside was salved. Why does this matter?

Because during those 2 months I changed some backends of my website and end up creating a new one with the front end that I add.

So I think that in the middle of that, I had lost some pieces of info here and there.

So let's talk about solutions.

After some search on our old friend Google, I end up in this [thread](https://spectrum.chat/academic/help/unable-to-get-netlify-cms-to-work~3c8d0e90-a283-46e4-b572-714dac6e2bdd) that leads to [here](https://www.netlifycms.org/docs/add-to-your-site/#add-the-netlify-identity-widget). Then I remember that I did in fact put on my header the code that is mention there.

So first thing you have to do is include in the header of your website this script:



```js
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
```

After that, I realized that nothing was working still as the recovery email was still sending me to my website. 

The thread says that we need more steps but then I start to remember, I did this before but not from here but from the [snippet injection](https://docs.netlify.com/site-deploys/post-processing/snippet-injection/). How does this work? 

First, go to the Netlify website, and inside the dashboard of your website in Netlify go to **Site Settings -> Build & Deploy.** Scroll till you find Snippet Injection and add snippet and chose insert before the body. Past this code:



```js
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>
```



And just like that, when you press again the link to recover the email it directs you to the page where you can change your password. Happy days. This widget basically is what sends the information from the backend to the frontend about your token and identity.

And that's all. You are back on your admin page again. If you want more tips about code and productivity, or read about the products I am [launching](https://bizbox.club/) follow me on [Twitter](https://twitter.com/moreira_creates) where I keep posting and updated almost daily.
Como a internet funciona?
Tags: beginners, braziliandevs
Published: 2021-10-18 20:43:06

Você ja se perguntou como a internet funciona? 


###O que é a internet?
É um imenso conjunto de redes interligadas

Imagine agora: Você provavelmente possui dispositivos na sua casa como notebook, celular, smart tv, todos conectados a um roteador. Essa é a sua rede local. 

![imagem de roteador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8npc2dt500nclxmqubl8.jpg)

Mas se  você parar para pensar existem outras redes: A minha, do mercadinho, do vizinho. Ficaria complicado nos conectarmos com cabos diretamente. 

Para que sua rede local possa ter conexão com o resto do mundo, o roteador vai se conectar a um modem. Esse dispositivo transmite a informação da sua rede para a rede do provedor de Internet.
Então a mensagem da sua rede é transportada para outra rede, que vai passar por outra rede de redes até que chegue a rede de destino. A internet é o conjunto de tudo isso.

###O que é um Host?

São dispositivos clientes ou servidores.
Por exemplo, um computador desktop, pode ser um servidor e um notebook/laptop o cliente.

###O que é um Cliente?

É um host que faz a requisição de um serviço. 

###O que é um Servidor?

É um host que oferece serviços e aceita conexões.


###O que é IP? 
Para um dispositivo ser achado e comunicar-se com outros dispositivos é necessario ter um ip.

**Exemplo de um ip ipv4: 173.192.123.32** 
**Exemplo de um ip ipv6: 2001:0DB8:AD1F:25E2:CADE:CAFE:F0CA:84C1**

Todos os seus dispostivos possui um ip e sem ele não da para conectar a internet. O website que você acessa também possui um ip. Essa série de números é como se fosse o “rg” do dispositivo.

###O que é uma porta?

Portas são softwares associados a um serviço especifico.
No caso a porta 80 ou 443, indica que um software que usa http/https está rodando naquele host.



###O que é DNS? 
Como você ja sabe, na internet os dispostivos/hosts são identificados pelo IP.
Porém para nós meros mortais, seria dificil memorizar esses números.

Quando o host cliente acessa um recurso web utilizando o hostname:
```
  www.google.com
```
Fica a cargo dos servidores DNS traduzir as solicitações de hostnames em endereços IP, e vice-versa.




**Isso é tudo pessoal, até a proxima!**
HacktoberFest 21 Update
Tags: hacktoberfest
Published: 2021-10-18 20:38:52

My fourth HacktoberFest PR has been accepted. This is the second year I've hit four PR thanks to the Virtual Coffee @virtualcoffee community. 

Currently 
* One PR has Matured.
* A second Matures later this week.
* Another Matures next week.
* Number four matures in 14 days.


I gonna get a few more PRs in before the end of the month.
It all Asynced in I promise
Tags: bootcamp, javascript, beginners
Published: 2021-10-18 20:09:40

Last Week Boot Camp at NorthCoders was all about Asynchronous Code, We learned how to use the node API to do things while we did other things.


## Such a good week
I really enjoyed the last week at boot camp it was incredibly interesting. I Loved the sprint's from Last week as well, especially NC Leaks, the premise of the sprint was to connect to an API (HTTP Requests) that was set up to retrieve the secret this secret had the rest of the instructions for the rest of the sprint, I really enjoyed this style of sprint where the information wasn't directly given to us and we had to work through the sprint to find the information.

![Futurama Fry Not sure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa9cjn63fizewkty5equ.jpg)


### Pair Programming
Also this past week I've really been starting to love pair programming a lot more especially being remote, its really good to have someone to work with and talk through the problems and as always its good to see how other developers solve things, since they might have a way of doing it you hadn't thought of. I admittedly have found myself wishing I was in a pair on solo sprints just to have someone to bounce ideas off.

### Bye bye fundamentals...But not really

This last week has seen a close to the "fundamentals block". The course has moved onto back end, I say a close , its more of a not going to be very formal thing, fundamentals are still going to be there, Were still going to be using them on every sprint and morning Kata, there just not being taught formally. 

Now moving on to back end were going to be learning about everything from server/API's to Databases and I'm very excited for this, looking at the calendar where going to start building out some smaller projects that we can keep a hold of and use, In our Portfolios.

A few Notes, For this Blog going forward I hope to include more code Snippets where relevant or something I think was Just REALLY awesome,like a function I'm proud of or an interesting thing I learned, For this week, I've got a Snippet of how I used Axios to "Catch EM ALL, getting all Pokemon from the Pokeapi

```javascript
const axios = require('axios');

axios.get("https://pokeapi.co/api/v2/pokemon").then((result) => {
    console.log(result.data.results);
}).catch((err) => {
    console.log(err)
});

 ```


I'm also hoping to write more blog Posts since I'm enjoying them.
array.prototype.map()
Published: 2021-10-17 03:50:42

In this tutorial, we will be exploring how the method `map()` works and how to use it effectively.

Method `map()` that only works on arrays that goes through an array and iterates all the data inside and creates a new array along with a function applied to the elements of the array, leaving the original array untouched.

###The syntax is as follows:
`array.map(function(element, index, array), thisValue)`

the method works by creating a callback function and every time it is called, it goes through each `element`, `index` or `array` and returns the result as a new array.

**Parameters**
*element: This parameter holds the value of the elements.
*index(optional): This parameter holds the current index of the current value of the array.
*array: The original array that was created.
*thisArg(optional): This function is used when we execute the callback function.


###Map in action
 First things first, we need to create an array, to do so, we need to declare a name of the array and in this case we are going to call our array `myToys`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0sv64tpgy3p53eegxgv.PNG)

Now we are ready for the next step which is using `map()`.

In this example, we are going to convert all the letters from our `myToys` array into uppercase letters and use the `thisArg` function.

To use `map()` we will need to create a new variable for the array, so for our new variable we will call it `myToys2`.

Then we will create a name for our callback function so for that we will name it `convertToys`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx4ydlf7oinf9tncd7wk.PNG)
Then we will use `this.` function in order to convert them all to uppercase.

The result should look like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aacwvkv1yofm5kdoe9cx.PNG)

###Arrow function
We can also use the `arrow` function to further shorten our code which makes it less cluttered in your workspace.

In this example, we are going to create a new array that contains the number of letters in each toy.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zh2ur64u1c60tbe58gj.PNG)

See how short that syntax is?
This is what it looks like if we print it out
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arsyniyig8hdhxhzhbr2.PNG)

To wrap things up, the `map()` method has a lot of uses, and it is mostly used to clean up your workspace. Sure there are other methods that gets you the same result such as the `for()` loop but the syntax is more complicated than the arrow function that we used; it is clean and fast

Also the benefits of using `map()` is that it does not harm the original array as it creates a new one leaving the original one untouched and can be used as a reference.
Create a unique ID in React JS
Tags: javascript, programming, react
Published: 2021-10-18 19:37:21

Hi Guys
Ok so in this post I will be giving you guys
the simple steps to create a unique reference
ID in react JS.
This has many uses such as giving a user uploaded
image a unique name for saving in a database.

### Step 1: 

Install **UUID** v4 using the following command
```
npm install uuidv4
```

### Step 2: 

Import the package into your component, page or code etc.
```javascript
import { v4 as uuid } from 'uuid';
```
### Step 3: 

You can now assign the Uinique ID to any variable using the below code
_unique_id is an example here, it can be any variable name._

```javascript
const unique_id = uuid();
```

And voila!, you're done.

Thank you all for reading this post.
If it was helpful, please consider following :)
Until next time
Bye!
Git rebase, amend and refactoring
Tags: opensource
Published: 2021-10-18 19:33:27

The time has come! It is now an actual task to improve on our written code. Problem is... I have been doing that as I kept working on my program. Every other improvement I had in mind is already a documented issue and, frankly, not an easy one, since I tried implementing them before. Ah, yes, the old roadblocks I couldn't climb before standing here again.

### Attempt at an issue ###
So far I have 3 "leftovers" in my issues. [Sync/async](https://github.com/sirinoks/SSGNode/issues/13), [default paths](https://github.com/sirinoks/SSGNode/issues/16) (actually means I want to have the user input some options, or choose some things in the console. And for completing this issue I need to first complete the async one.) and [yargs](https://github.com/sirinoks/SSGNode/issues/31). Yargs is a more recent one, while also being an unattempted one so far. Looked doable. Note past tense in look<b>ed</b>. It all went fine at first, I had examples to look at, I knew the steps to change my code. As it usually goes in programming fairy tales, everything was perfect until you had to run the code. I have managed to fix some things, but others I couldn't. What I noticed is the simplicity and stupidity of my mistakes, such as having a different variable name, or not including a file. Sure, some actually taught me things, such as using module.exports. The fact, however is - shit doesn't work. 

### Another way ###
Since I was already behind in the project, I decided to find something else to fix. After all, I know my code has many bad parts. It wasn't difficult to find nitpicks such as.. 
<img src="https://cdn.discordapp.com/attachments/353432193730871296/899738717462335528/Screenshot_747.png" />
Yea, you know the ones. I squashed my changes, which wasn't fun at first, since I had to deal with VIM again and remember my first semester. `:wq` and `i` - literally all I had to know for this (ignoring all the other commands we learned like: replace one character, edit one word, find a specific thing, move with hjkl instead of arrows......... yeeeeeeeeeaaaa I used to know this. Long time ago. In my past life. No more!). 

Rebasing was something I didn't fully understand. Specifically the part on.... why? Amend was understandable, I actually liked that one. 
Here are messages that I changed with amend: 
<img src="https://cdn.discordapp.com/attachments/353432193730871296/899739923907760188/Screenshot_748.png" />
Just some clarifications on what I actually did. Yea, I'm not Einstein, I know. This was really mostly to practice git commands, rather than doing actually useful refactoring. My **actual refactoring** doesn't work. [Look at it!](https://github.com/sirinoks/SSGNode/tree/yargs) Now it's not even up to date with my [smol refactoring](https://github.com/sirinoks/SSGNode/commit/9e70243b2094e78a36d86ddd7dc7fee12584fd4e). There's honestly nothing interesting to look at in the second one.
3 Python Mini Projects with code you can build now.
Tags: python, beginners
Published: 2021-10-18 19:31:38

In today's post, I will be sharing three fun python mini projects with code that you can start building now. So, let's begin -

#### 1. Random Password Generator
*In this project, we will be writing a python program to generate random passwords.*

**Approach** - Here, we are first asking the user for the size of the desired password. After this, we define a long string consisting of alphabets, numbers, and special symbols. Once we have obtained the size, we will use the random.sample() function to generate a string of random characters of a given size.
![import random.py - Visual Studio Code 20-09-2021 10_20_12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7hqi8vcv5ai9q4fp89r.png)

#### 2. Convert PDF Text to Audiobook
*In this project, we will be writing a python program that can be used to convert PDF text to audiobook.*

**Approach** - We will be using pyttsx3 python library to convert text to speech. 
**Installation** - We will first install pyttsx3 and PyPDF2 packages. 
**References** - <https://pypi.org/project/pyttsx3/>
![import random.py - Visual Studio Code 20-09-2021 13_03_50](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byalh1lvpgbfz2bsvfr1.png)

#### 3. Email Slicer Program
*In this project, we will be writing a python program to fetch our username and domain name from our email address*
 
**Approach** - We know that the username and domain name are separated by a @ character, so we will be basically dividing our entire email into 2 strings using @ as a divider.
![import random.py - Visual Studio Code 20-09-2021 13_09_55](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwcka3l709k7efekuy65.png)

I hope you found these mini-projects useful and interesting and will build these projects, as the best way to learn any programming language is by building projects.

If you enjoyed working on these projects, you can also participate in **Hack This Fall 2.0** and explore building advanced projects. Hack This Fall is a 48 Hours virtual hackathon that aims at nurturing your new ideas and prototypes in various domains. You can check out the official website to get more information and register for the hackathon - <https://hackthisfall.tech/>.

Also, don't forget to use my referral code **HTFHE092** while registering.
Hacktoberfest 2021 - Completed as Contributor and Maintainer!
Tags: hacktoberfest
Published: 2021-10-18 18:57:26

I have participated in hacktoberfest for the third time now. This time I was officially participating as a contributor and a maintainer. 
Great thing is, each year I can see more contribution activity in my repositories and some PRs surprise me a lot!

## As a contributor

As a contributor I opened 4 pull requests in those repos:

### Opsdroid

This has already become my tradition to contribute to opsdroid each year, this is an amazing framework for creating bots for any platform.

This time I helped them migrate to aioredis 2.0 (and then used the experience I've got to do the same in my own project), and to set up proper docker images builds:
https://github.com/opsdroid/opsdroid/pull/1835
https://github.com/opsdroid/opsdroid/pull/1836

### Fastkml

Fastkml is a library to read, write and manipulate KML files

Here I helped to drop python 2 support as it is EOL now, as well as to help them migrate to `pygeoif` 1.0 and many intermediate fixes. I learned how the python 2 -> python 3 migrations were actually done (`lib2to3`+`pyupgrade --py36-plus`+manual fixes)

https://github.com/cleder/fastkml/pull/135
https://github.com/cleder/fastkml/pull/136


There were a few more PRs, some were to my own repos, so that doesn't count. 

## As a maintainer

This time the contribution activity has increased. Some PRs were just of amazing quality!

Our `bitcart-store` repository has received the most of PRs.

`MaximeKoitsalu` has helped us to migrate all styles from stylus to sass (to make it themeable later):
https://github.com/bitcartcc/bitcart-store/pull/321
`leovoon` has helped us to reach 100% accessibility score in lighthouse, which is very important to every solid web project:
https://github.com/bitcartcc/bitcart-store/pull/326
`shubham-singh-748` has added Hindi translation to `bitcart-site`:
https://github.com/bitcartcc/bitcart-site/pull/87
The PR of the month, `Xaconi` has added a nice well-animated, responsive cart sidebar to the store:
https://github.com/bitcartcc/bitcart-store/pull/325

For now I've got only 4 pull requests from contributors, but that's already amazing!

If you want to contribute, feel free to do so, any repositories in bitcartcc github organization are open:

{% github https://github.com/bitcartcc/bitcart %}
{% link https://dev.to/bitcartcc/contribute-to-bitcartcc-this-hacktoberfest-4aof %}

By the way we need your help in refactoring our code to make our tests fully independent and upgrade to `fastapi` 0.70.0!

{% github https://github.com/bitcartcc/bitcart/issues/247 %}

## Conclusion

Hacktoberfest is not done yet, and I plan to continue doing my contributions to my own and other projects as always.
This time it was better than before because pull requests were counted only if they were accepted or merged and not just if they were opened, which reduced spam greatly.
Have a happy Hacktoberfest!