teleren/devto huggingface dataset:
Important commands of git(Version Control System) every developer should know
Tags: git, github, webdev, versioncontrolsystem
Published: 2022-05-21 16:43:50

1- git init = used for initializing empty repository.
2- git status = used for checking the current status of the repository(recommended-must after very usual operation performed in git environment)
3- git add .= used for adding the files in git staging area.This area contains a list of all the files you have recently changed.
git commit -m"Initial commit"= This involves committing them locally to record the snapshot of your repository to the project history.
4- git remote add origin url of  the remote repository= for linking the files of local repository with remote repository.
5- git push = to push the the local repository on github.
6- git checkout -b aditya= to create new branch and use it to upload files in a initialized repository
git branch -d aditya = to delete the branch 
7- git merge= The "merge" command is used to integrate changes from another branch.
8- git log =The git log command shows a list of all the commits made to a repository.
9-  git pull =git pull is a Git command used to update the local version of a repository from a remote.
10- git restore --staged index.html= to remove file from staging area.
11- git restore index.html= to discard changes done in file.
12- git push -d origin bugfix = before deleting any branch merge it with master branch to keep your work safe.
13- git branch -r = to checkout branches in remote 
14- git branch -a = to check all branches.
15- git commit --ammend = vs code will open to change the message of commit.
16- git rm -r --cached bin/= all files present in the directory will be unstaged/removed.
17- git switch -adi = new branch with the adi name created.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0tdvhdqd2xc6u55ihuu.png)
Data types conversion in JavaScript
Tags: javascript, beginners, tutorial, programming
Published: 2022-05-21 16:36:21

## **Changing value from one data types to another **
conversion of the value of the declare variable to a different data types can be done by ensuring that the data type to be converted to, is the one used and begins with a Capital letter. For example:

```
let year = String(1980); 
console.log(year);  //"1980"
```
![methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40nb9jg82kf0xeigbf8i.png)

## **Generally: let x = Data-types(value);**

List of Data-types
1. Number
2. String
3. Boolean _e.t.c_

**JavaScript has some in built conversion one can explore without the use of methods:**

```
let result;
//For example =>
// String conversion
result = '3' + 2;  // "32"
result = '10' + true;  //"10true"

//Number conversion
result = '10' - '2'; // 8 
result = '10' - 2; //8

//NaN conversion
result = 'hello' - 'world'; // NaN 
result = '4' - 'hello'; //NaN

//Boolean conversion
result = '8' - true;  // 7 
result = 4 + true; //5

//Null conversion
result = 15 + null;  // 15
result = 4 - null; //4
```
**To check what type of data type, make use of** `typeof`

```
console.log(typeof(num)); //Number

```

**while with method**

## **_/* convert to number */_**
string can be converted to number using `Number ` keyword even other data types such as boolean and null in JavaScript. 
for example: 
`true` is known as `1` while `false`, empty string `""` and `null` is `0` or empty value. 
A text, `NaN` and `undefined` will return Not a number `NaN`
![Number Conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyner44iisn6naaioov5.png)

## **_/* method in Number*/_**
some specific method can be used to convert one data types to a number. Method like:

```
1. parseInt()
2. parseFloat()
3. /*unary operator*/ +"" 
4. Math.floor()
```
example:
![Number Conversion using methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y1b0wfspd4lewz8l57b.png)

## **_/* convert to string */_**
conversion to string is  done with `String /*or*/ toString()`. example: 
![String Conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d46lvcfxeaxthbg3o6wg.png)

## **_/* convert to boolean */_**
empty `string`, `0`, `undefined`, `NaN` and `null` return `false` when passed with boolean but others return `true`. 
example: 
![Boolean Conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c771cnd3zjybg6y9bnff.png)

## Let us connect with each other

> connection between two or more parties bring solution to a problem 

[Github](https://github.com/edekeemmanuel/)

[LinkedIn](https://www.linkedin.com/in/ebakecode/)

[Twitter](https://twitter.com/EBakeCode)

[Facebook](https://web.facebook.com/EBakeCode)

[ebakecode](https://ebakecode.web.app/)
What is ECMA and what is the latest version of it ?
Tags: es6, javascript
Published: 2022-05-21 15:49:34

ECMA International is a nonprofit standards organization for information and communication systems.

**JavaScript introduce 1996** 
ECMA Script: when JavaScript introduce into the ECMA International Company then It’s called by ECMA + Script and introduce by 1997

## Version of ECMA Script : 
- ECMA-262 5.1 edition, June 2011.
- ECMA-262, 6th edition, June 2015.
- ECMA-262, 7th edition, June 2016.
- ECMA-262, 8th edition, June 2017.
- ECMA-262, 9th edition, June 2018.
- ECMA-262, 10th edition, June 2019.
- ECMA-262, 11th edition, June 2020.
Content Security Policy Nightmare
Tags: javascript, react, webpack, bug
Published: 2022-05-21 15:29:54

## How a simple package can give you sleepless night

 
Must be thinking about how is this possible? let me give you some details first:-

![Bug Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vprhpzarj3g1xutv2n5i.png)

Looking Scary right🥶, basically i am working on a chrome extension and everything going smooth and one day the devil arise.

The extension was basically a search enhancer Felvin :-
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3920gy8okakwqsw8el75.png)
Like above example it provides lot of dev utilities   around 72(csv to json,image crop,code reference ,corn parser,image compressor) all in your search bar.
Link:[Chrome Store](https://chrome.google.com/webstore/detail/felvin-google-search-enha/dmhgpjahhfannndnaghleelgnpieiljl)

So one day a new version was rolled out then suddenly it throws the above error. So figuring out among 72 apps which causes this.

Those who not aware about CSP policies by google. for them
The content security policy for Chrome Apps restricts you from doing the following:

-  You can't use inline scripting and event handlers like **onClick**

- Can't use eval() and new Function()

- You can't reference any external resources in any of your app files (except for video and audio resources). 

So basically here second point was problem ,we can solve the problem by allowing the unsafe-eval in CSP policy but i was not optimal solution.

Ever heard about **git bisect** 🤔,it works on principle  of binary search .In the same way i check all the packages and Bingo found the culprits and finally all sleepless night come to an end.

## Learnings:-

- while solving the blog i didnot purpose any hypothesis and write down any causes .so it was same as hitting the bush.

- First i suspect may be webpack config causing this error,try to change its configurations as suggested in github issues and stackoverflow

## So Debugging method can be summarized as:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubpk8vwypmcc8r190zet.png)
What do you need to learn to develop robust PCG techniques?
Tags: gamedev, games, pcg
Published: 2022-05-21 15:22:43

## Introduction

The game industry has become the most popular and profitable entertainment industry globally [1]. Since then, more and more games provide massive maps, a high number of game features, and, thus, different ways of gameplay. However, there is a high cost of production to develop such game features. Therefore, to help decrease the cost and increase the speed of the game development is wise to use Procedural Content Generation (PCG) techniques. For instance, PCG techniques may create 3D maps to work as sketches for human designers that can fine-tune the places that require careful designs. We can apply this process to any game level. Besides, we can also use PCG as a game feature by creating content during the game session, thus, providing different playthroughs.

To help beginners, I made this list of things that I think are essential to learning to create robust PCG techniques: programming, data structures, software architecture, and randomness.

## 1. Programming

PCG techniques are software, so there is no way to develop them without learning to program them. The specific programming language does not matter; we can develop PCG methods with any language. The most important is knowing the programming logic to create the sequence of steps required to build content. However, since you want to develop games, it is wise to learn a language used for a game engine, for instance, learn C# and create games with Unity.

## 2. Data Structures

We need to know data structures well and how to create new ones to define good representations (encodings) for the content we want to generate. The way we represent the content is crucial for any PCG technique. For instance, it may be better to represent levels with grids instead of graphs (a more advanced data representation) since we easily control the level space in grids.

## 3. Software Architecture

It is important to maintain our projects well designed when developing software. To do so, we need to learn software architecture and design patterns. Thus, we can fix errors and extend the PCG method more easily. For instance, if we want to add locked doors and keys to our levels, we will need to redesign the data structure that represents our levels. Therefore, it will be easier if we maintain our project well designed.

## 4. Randomness

Finally, we need to understand how the randomness method we use works. Yes, we can develop PCG techniques without randomness; however, we could not generate a wide variety of content, which is the most interesting thing about PCG. Therefore, randomness is crucial when developing PCG techniques. We need to save the seed we use to feed the random number generator. Thus, we can reproduce the sequence of random numbers and, hence, possible errors in our PCG methods.


## References

[1] Gaming: The Most Lucrative Entertainment Industry By Far (https://www.statista.com/chart/22392/global-revenue-of-selected-entertainment-industry-sectors/).
Eazy Way to, How to Fetch API using JavaScript..🎇
Tags: javascript, webdev, programming, beginners
Published: 2022-05-21 15:21:00

So How Do we Fetch API in JavaScript in, javaScript There is a inbuild method which is called `fetch()`The `fetch()` method in JavaScript is used to request to the server and load the information in the webpages. The request can be of any APIs that returns the data of the format `JSON `or `XML`. This method returns a promise, 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n96gmqd754qp0zxh88q.gif)
So lets come up with the Approach, 
Step 1. First make the necessary JavaScript file, HTML file and CSS file.
Step 2.  Then store your API URL in a variable.
Step 3. Define a async function (here `getapi()`) and pass api_url in that function. 
Step 4. Define a constant response and store the fetched data by await fetch() method
So lets get start 

First We will Create HTML file  And Js files
`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Javascript</title>
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>`
**JAVAScript File**


`function getData() {
  fetch("https://reqres.in/api/users")
    .then(res => {
      return res.json();
    })
    .then(json => {
      console.log(json.data);
      const html = json.data
        .map(function(item) {
          return "<p>" + item.first_name + " " + item.last_name + "</p>";
        })
        .join("");
      console.log(html);
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch(error => {
      console.log(error);
    });
}

getData();`

You can find output of this Example in [here](https://jsfiddle.net/roshan100kar/5pg29dt7/)
El truco secreto para encontrar cualquier libro en PDF en Google
Published: 2022-05-21 14:50:16


Google es el mejor buscador del mundo. Sin embargo, hay momentos en los que necesita un poco de ayuda y el gigante tecnológico no proporciona los resultados que estamos buscando.
Por ejemplo, cuando quieres encontrar un libro, normalmente le das un título. Normalmente, Google siempre te dirige a una página donde puedes ver un resumen u opinión, no el texto en sí.

Para filtrar esta búsqueda bibliográfica, existe un pequeño y sencillo truco que sin duda facilitará la lectura a miles de personas que buscan un libro en PDF.

Lo primero que debes hacer es ingresar a Google, luego deberás poner el nombre del libro que estás buscando. Seguidamente deberás escribir el siguiente texto “Filetype:PDF” y darle buscar.

A modo de ejemplo, nosotros buscaremos en Google el libro “Javascript Eloquent”

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

Si seguimos correctamente los pasos anteriormente mencionados nos aparecerá los libros en PDF que estamos buscando.

¿Sencillo verdad? Prueba con todos los libros que quieras leer y comparte esta valiosa información con tus amigos lectores.

NOTA: Recuerda que algunos libros son distribuidos de forma gratuita en la web. Sin embargo, no todos los podrás encontrar y deberás comprarlos para obtener la versión completa.
Paracetamol.js💊| #122: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-05-21 14:34:15

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Avanzado</mark></center>

```js
const p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("p1")
    },3000)
  })
}

const p2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("p2")
    }, 5000)
  })
}

const p3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("Error en p3"))
    }, 2000)
  })
}


Promise.all([p1(), p2(), p3()])
  .then((mensaje) => console.log(mensaje))
  .catch(err => console.log(err))
```

A. `["p1", "p2", "Error: Error en p3"]` (después de 10s)
B. `["p1", "p2"]` (después de 8s)
C. `Error: Error en p3` (después de 2s)
D. Ninguna de las anteriores

Respuesta en el primer comentario.

---
JavaScript typeof null likes to play tricks
Tags: javascript, webdev, beginners, programming
Published: 2022-05-21 14:02:04

As a newbie coder, everything is confusing. I'm always like, wait - what? That was precisely my thought when I asked JavaScript `typeof` `null`, and it told me `object`.


![shows typeof examples in node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4vmqk5cebktju22bkb1.png)

Huh? 

If null is an object, and objects are a collection of properties, that would mean null has some value. But we *know* that's not true; therefore, this is JavaScript playing a trick on us. Let's break down why.

#`Null` isn't an object.
 
<br>

`Null` is just, `null`. In JavaScript, `null` is a structured root primitive value. It stands by itself. It's the *absence* of value, unlike `undefined` which is an *empty* value—two different things.

Then why does JavaScript return object? Because [according to MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof), JavaScript values are represented as a type tag and a value, and the type tag for objects is 0 thus lumping `null` in as an object. 

As we can imagine, representing the *absence of value* is tricky; as an aside, in other programming languages, null is represented as the null pointer 0x00. [Reference](https://softwareengineering.stackexchange.com/questions/128327/what-is-the-difference-between-a-pointer-pointing-to-0x0-location-and-a-pointer).
 

In an effort to fix this bug, in 2015, when JavaScript went through its rework it was proposed to change to `typeof null === null`. Unfortunately, that fix was rejected, but honestly, for a good reason. ES Wiki, the web archive for the ECMAScript programming language, says:  

> "This proposal has been rejected. It was implemented in V8 but it turned out that it broke a lot of existing sites. In the spirit of One JavaScript this is not feasible."

[Check out the ES Wiki page I'm referencing, the full explanation is fascinating.](https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null)

Since developers have always known of the  `typeof` `null` bug, many people wrote their code to account for it. And while the proposed fix would have fixed our brains, it would have broken our apps.

So now we newbies know of this bug too! Don't let this break your brain as it did mine. It's just one of the many fascinating oddities of JavaScript programming.
Creating Responsive Website Design.
Tags: react, webdev, codenewbie, prudyopensourceseries
Published: 2022-05-21 13:19:46

Making a Responsive webpage can sometime go...

![went](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nf2mkhlgvgdgxkyv31h.gif)

---

The goal of a Responsive web design is about making web pages look good on all devices.

A responsive web design will automatically adjust or adapt to different screen sizes and viewports.



![resize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05dqe25onbnsbkbx4qpp.gif)

---

In my little research to creating a responsive webpage, 
I found some gems to help us create responsive designs😂😐

## Responsive Website Design method using HTML

↓↓
**1. Using the `<meta>` tag**
You can achieve responsiveness by adding `<meta>`tag to all your html web pages.

The `<meta>`tag forces the web page to follow the screen-width of the device.


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


This will set the viewport of your page. In order words, it'll give the browser instructions on how to control the page's dimensions and scaling. 

↓↓
**2. Using the `<picture>` tag**

![image fit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ashgbz0o6tut4ih5qleu.jpeg)

If the CSS width property is set to 100%, the image will be responsive and scale up and down. 
That is, If the image max-width is at 100%, the image will scale down if it has to, but never scale up to be larger than the original size.


![Img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nynnholzawmq2vicg09.jpg)


The HTML <picture> element allows you to define different images for different browser window sizes.


![picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b916smgesg92mt8synue.jpg)

↓↓
**3: Responsive Text Size**
The text size can be set with a "viewport width" or"vw" unit.

In that way, the text size would follow the size of the browser window.


![text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2d8v54tf6ybga9h4p4i.jpg)

---

## Responsive Website Design method using CSS

![responsive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxgw9l95v52011g5k928.jpg)

↓↓
**1: Flex Layout**
Establishing a simple `<display:flex;>` layout in our main container and further styling with media query for mobile and desktop can easily create a responsive webpage.

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

Read more on [Flex Layout](https://www.google.com/amp/s/www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/amp/)

↓↓
**2: Media query**

With media queries you can define completely different styles for different browser sizes.


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

Find more on [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

---

I know🥲 

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv9tf7k6soixe00lfevq.jpg)
See you later.
How to get into big tech
Tags: webdev, javascript
Published: 2022-05-21 12:49:40

Right now I am SWE 2 at Uber and previously I was a UI 2 at Flipkart, so here is my opinion on a few questions I receive.

**Q) How do you get interview calls?**

Ans)From my personal experience, having a good college background helps in the initial years. If that is not the case for you, then getting you foot into one of the decent size brands also helps.

From my personal experience, once I got into Flipkart, I was getting interview calls from renowned companies that I was not getting earlier.

Now breaking into the first renowned company is the trick for many out there. For that I suggest to apply from all channels aka

1. Apply on job postings on the company page
2. Apply on Naukri
3. Apply on other job portals
4. Directly ping HRs
5. Directly ping Engineering managers, many of them say they are hiring for their team.
6. Ping engineers working on the company you are targeting.


Points 4,5,6 may get you referrals and that would help you get interviews. 

Closing thought, I feel it requires a bit of luck as well to get the interview call, so keep trying.


**Q) What kind of questions are asked during the interview? Specially DS questions?**

Ans) Every specialization would have it's own set of rounds. 

For example for FE (frontend engineering) it maybe **machine coding round** (where they may ask you to build some project) **javascript round** (where they will assess your FE skills), **design and architecture round** (where they will test your system design skills) **coding round**(where they may ask you DS algo based questions) and finally a **manager round**.

For DS algo based questions, I just did as many questions I could do (around 80 within a time period of 2-3 months) of leetcode mediums.
Just make sure you touch the popular topics and cover some breadth. That should be enough for the most part.