Forem: Shubhra Agarwal

The only Media Queries Cheatsheet you'll need

Shubhra Agarwal — Fri, 12 Nov 2021 17:40:05 +0000

You learnt about media queries but now you're thinking how do I implement them, there are so many devices that it's practically impossible for someone to write media queries for each and every device.

There is a common observation that a certain type of device has a particular range and we can easily implement media queries in this range rather than making it device specific.

Let's take a look into what these groups are

1️⃣ Mobile Devices

The general width of any mobile device ranges from 320px-480px,

you can set the minimum to be 320px and max to be 480px. This is how I like to write breakpoints for my media queries

2️⃣ iPads and Tablets

The general width of any tablets ranges from 481px-768px,

There are cases when the tablet is being used in landscape mode instead of portrait mode, but that dimensions are covered by laptop breakpoints

This is how I write breakpoints

3️⃣ Laptops

The general width of any laptop ranges from 769px-1024px,

This is how I write breakpoints

4️⃣ Desktops and Larger Screens

The general width of any laptop ranges from 1025px-1200px,

This is how I write breakpoints

5️⃣ Desktops and Larger Screens

The general width of any laptop ranges from 1025px-1200px,

This is how I write breakpoints

TL;DR

Mobile Devices (320-480px)
Tablets (481-768px)
Laptops (769-1024px)
Desktops (1025px- 1200px)
TVs (1200px and further)

Thank you for reading this blog post. Do leave your reviews in the replies, I would love to hear them 🧡

Keyboard shortcuts which will make sure you don't have to touch your mouse while writing code

Shubhra Agarwal — Tue, 09 Nov 2021 17:24:22 +0000

There are times when you might feel like reaching for the mouse to execute a certain task. But we all know that shifting our hand to and fro from the mouse reduces our productivity. So,

Here are 10 keyboard shortcuts that will help you to speed up your coding process 🧵

These shortcuts work with a majority of code editors and IDEs like VS Code, Atom, Sublime etc. If these doesn't work for you, make sure to check the settings of you editor.

Let's Begin 👇

1️⃣ Copy/Cut/Paste Entire Line

You might be aware about Ctrl+C/X/V but there's a trick to it, if you don't select any portion in the line, your editor will copy/cut/paste the whole line including the line break.

2️⃣ Comment and Uncomment Lines

Comments are extremely handy for us, but instead of going to each and every line individually and commenting it, just highlight whatever lines you want commented and then hit

Ctrl + /

This command will comment and uncomment the entire line

3️⃣ Search for a file in your file

Navigating through a project can get hard, especially when the project is pretty big. You can just use

Ctrl + P

to search for any file in your whole project.

4️⃣ Search for a keyword in a file and in the whole project

Searching for a keyword inside a file can be done using

Ctrl + F and then pressing Enter will let you navigate through the keywords

To search in the whole project,

Ctrl + Shift + F is used.

5️⃣ Indent and Un-indent code

Select the code block that you need to indent and then press the Tab key to indent the whole code block.

Similarly, to un-indent the code block, select it and press Shift + Tab

6️⃣ Create a new file

This might not be the most useful shortcut in bigger projects but you can create new files using

Ctrl + N

7️⃣ Create a new line

Usually, when we have to create a new line, we place our cursor at the end of the line and press Enter, but pressing

Ctrl + Enter

will create a new line just below the line where your cursor is present.

8️⃣ Navigate across the whole word rather than a character at a time

Ctrl + Arrow Key will allow you to navigate across a whole word at a time as compared to just a character

Ctrl + Backspace will allow you to delete a whole word at a time

9️⃣ Highlighting characters and words

Holding down Shift key and pressing allow keys will allow you to highlight characters.

Similarly,

Shift + Ctrl + Arrow keys will allow you to highlight a whole word at a time.

1️⃣ 0️⃣ The OG Shortcuts

Ctrl + S -> Save the file

Ctrl + A -> Select All

Ctrl + Z -> Undo

Ctrl + Y -> Redo

These are all the shortcuts you'll need to speed up your coding. Initially, it might be a little bit difficult to use them regularly.

You need to use these shortcuts consciously and in no time they'll get into your habit without you even knowing.

CSS Concepts every beginner should know

Shubhra Agarwal — Mon, 08 Nov 2021 15:35:35 +0000

CSS is a very vast topic and can be intimidating to people getting started with CSS and can cause imposter syndrome.

But, worry not here is a list of the topics you need to learn if you're just getting started with CSS and you can learn the else on the fly while working on a project.

1️⃣ CSS Basics

Adding CSS (Inline, Internal and External)
CSS Selectors (Classes and IDs)
Display property
Fonts and other formatting properties

2️⃣ Elements Arrangement

Float and Clear
Positioning
Box Sizing

3️⃣ Layouts

Flex
Grids

4️⃣ Responsive Design

Text effects
Images and video resizing
Different Viewports
Media Queries

5️⃣ Advanced

CSS Variables
Transitions and Animations
2D and 3D transforms
Shadows and Gradients

TL;DR

CSS Basics
Elements Arrangements
Layouts
Responsive Design
Advanced

That was it for this blog post. Thank you for reading it till the end.

If you liked it, do give your views and opinions in the replies section below.

NPM packages for custom hooks that you wouldn't wanna miss out on

Shubhra Agarwal — Sat, 06 Nov 2021 08:00:54 +0000

Saloni : Hello, Shubh. Hooks have always been handy for me in react. They've made my job a lot easier. I wish React had more hooks than just useState, useEffect

Shubh : You can create your own custom hooks in react and there are some awesome custom hooks on NPM as well.

Let me tell you more about such hooks 🧵

The first one is use-clippy

useClippy is a TypeScript-friendly React hook for reading from and writing to the user's clipboard.

https://www.npmjs.com/package/use-clippy

Second in this list is useScript

It loads a third party script and returns a value when it's loaded or fails to load.

https://www.npmjs.com/package/use-script

Third is react-use-idb (useIdb)

It is a react side-effect hook that manages a single indexDB item.

It's a drop-in replacement over useLocalStorage.

https://www.npmjs.com/package/react-use-idb

The fourth is my personal favourite and it is use-dark-mode

It's a custom React Hook which helps you implement a "dark mode" component for your application. The user setting persists to localStorage.

https://www.npmjs.com/package/react-use-idb

The last one is useDocumentTitle

React Hook (using useEffect()) to set your document title.

https://www.npmjs.com/package/use-document-title

You can look for more custom react hooks on this website

https://reacthooks.org/

I hope I was able to help you out Saloni.

Saloni : Yes!! Thank you so much for telling me about it. I'm going to give you a like and a follow too!!

Simple Linear Regression explained so simply that even a 5yo can understand

Shubhra Agarwal — Tue, 21 Sep 2021 07:28:14 +0000

Linear regression is an algorithm used to predict or visualise a relationship between two different features/variables. In linear regression tasks, there are two kinds of variables being examined: the dependent variable and the independent variable.

Let us build our first Simple Linear Regression Model and learn along the way by building.

This particular model is called as simple because it has only one independent variable.

Let's start by importing the modules

import matplotlib.pyplot as plt
import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LinearRegression

matplotlib: used to plot the data in a graphical manner
pandas: used for working with the dataset
sklearn: used to split the dataset and then apply the linear regression class onto the data.

Importing the dataset

dataset = pd.read_csv("Salary_Data.csv")
X = dataset.iloc[:, :-1].values
y = dataset.iloc[:, -1].values
# X is taking all the values except the last 
# column whereas y is taking the last value

Here we are using the data containing people's salary and working experience to predict someone's salary based on their experience.

This is what the dataset looks like

Splitting the dataset into training and test set

We need to split the dataset into two models i.e. the test set and the training set.

X_train, X_test, y_train, y_test = train_test_split(
        X,y, test_size = 0.2, random_state = 0)
# X_train contains the independent varibale
# y_train contains the dependent variable

Here we have used the train_test_split function that we imported from sklearn.model_selection.
x and y are the variables, test_size tells the function about the size of the test set.

So, if there exists 100 lines of data, It will be split into following segments,

Training: 80 lines
Testing: 20 lines

Training the model

After we are done with splitting the model, now is the time to actually train the model with the training set.

regressor = LinearRegression()
regressor.fit(X_train, y_train)

We simply initialise the LinearRegression class and then pass our training sets into the fit() method of the LinearRegression Class

Visualising the training set results

plt.scatter(X_train, y_train, color= "red")

# Plotting the data
plt.plot(X_train, regressor.predict(X_train), color="blue" )

# Add title to the plot
plt.title("Salary vs Experience(train)")

# Labels on x and y axis
plt.xlabel("Years of Experience")
plt.ylabel("Salary")

#Finally, display the plot
plt.show()

The output of the following code block will be

Visualising the test set results

plt.scatter(X_test, y_test, color= "red")

# Here we are not replacing X_train with X_test because this line tells us about the data predicted and how close our results are to the training set
plt.plot(X_train, regressor.predict(X_train), color="blue" )

# Add title and labels
plt.title("Salary vs Experience (test)")

plt.xlabel("Years of Experience")
plt.ylabel("Salary")

# Finally, display the plot
plt.show()

The output of the following code block will be

This was it!! We have successfully built our fully functional simple linear regression model.

If you liked this, don't forget to give a like on the post and share it with your friends.

Do give me a follow for more such blog posts.

Github shortcuts that will make sure that you don't have to use your mouse while browsing

Shubhra Agarwal — Mon, 06 Sep 2021 09:25:27 +0000

You must've heard that pressing the "." key in any Github repository will open it in an online code editor.

But here are a few more shortcuts which will ensure that you don't have to touch the mouse again when using Github

TL;DR

Sitewide shortcuts
Go to shortcuts
Editing code shortcuts
Browsing the code shortcuts
Notifications
Make Changes in a pull request

Getting started with keyboard shortcuts

Before I bore you out with all shortcuts or make you remember all of them, you just have to press the "?" key or "Shift + /" and you will see a dialog box which has all the shortcuts that work on github.

Site wide shortcuts

s or / will focus the search bar
j and k will move selection up and down respectively
x to toggle selection
o or enter to open selection
esc to close selection

Go to Shortcuts

g + c -> Go to code
g + i -> Go to issues
g + p -> Go to PR
g + b -> Go to Projects
g + d -> Go to Homepage of current account
g + n -> Go to your notifications

Editing the source code

ctrl + b/i -> Markdown formatting for bolding/italicizing text
ctrl + k -> Markdown formatting for creating link
e -> Edit source code
alt + g -> Jump to line
ctrl + shift + p -> Toggle between edit file and preview file

Browsing the source code

t -> Activates the file finder
w -> Switch to a new branch or tag
y -> Expand a URL to its canonical form.
i -> Show or hide comments
a -> Show or hide annotations
b -> Open blame view.

Notifications

e -> Mark as done
shift + u -> Mark as unread
shift + i -> Mark as read
shift + m -> Unsubscribe

Make changes in pull request

c -> Open list of commits
t -> Open the list of changed files
j/k -> Move selection down/up in the list

That was it for this post. If you liked it don't forget to

Hit the 🧡 button
Follow @shubhracodes for more such informative posts

Some memes that only developers will relate to

Shubhra Agarwal — Tue, 31 Aug 2021 04:13:55 +0000

Being a developer is a gift.
It teaches you how to think.
It teaches you to be resilient when searching for days to fix a bug or make things work.

“Everybody should learn to program a computer, because it teaches you how to think” — Steve Jobs

1- The Linux lovers:

2- For observers:

3- For starting developers:

4- For smart devs:

5- For developer teams:

6- For developers life:

7- For the production team:

8- For developers & managers relationship:

9- For developers experience:

10- For developers experience:

11- For beginner intern developers

12- For HTML developers

13- For developers life with managers

14- For developers life with Git

15- For debugging

16- For pair programmers

Top 10 Tools🛠 For Web Developers👨‍💻to keep check In 2021🤘🏻

Shubhra Agarwal — Sun, 29 Aug 2021 12:26:12 +0000

Using web development tools always makes your work easier and more smooth. Web dev is a field where you often need them and that’s why I made this list so that you can bookmark it and check any tool you are looking for.

Devhints.io

Here you will find sets of ready-made snippets with popular code snippets, configurations, and commands.

If you don’t find the snippet you need, you can request the author to add it.

Bootstrap Cheatsheet

The bootstrap cheat sheet is an interactive list of Bootstrap 5 classes, variables, and mixins. It helps you easily find the differences between Bootstrap 4 and Bootstrap 5.

https://bootstrap-cheatsheet.themeselection.com/

Carbon

If you need to create a piece of code in the form of an image, Carbon is the perfect tool for this purpose. The application has support for many languages and a ready set of different themes, thanks to which we can modify our snippet.

https://carbon.now.sh

Google Lighthouse

It is an open-source, automated tool for measuring the quality of web pages. It audits the performance, accessibility, and search engine optimization of web pages.

MetaTags.io

Meta Tags is a simple online tool that you can use to quickly check the meta tags for your website.

frontendchecklist.io

The process of creating a website can often be long, tedious, and very complicated. The consequence of this is that we can forget some things. The Front-End Checklist is here to help

Gitignore.io

I know that you don’t need higher math to create a .gitignore file, but a ready-made tool was created for that. The only thing you provide is information such as the operating system or development environment.

Regex101

The application offers both instruction for creating regular expressions and a ready environment for writing and testing expressions. Additionally, after creating an expression, we get a detailed explanation of it.

https://regex101.com/

Ngrok

If you create a website on a local server and show off your work results to someone, you can use Ngrok. This tool allows you to “bring to the world” your local application.

https://ngrok.com/

Nibbler

Nibbler is a free online tool that you can use to scan your website. It will give you a report scoring the website for key areas, including accessibility, SEO, social media, and technology.

https://nibbler.silktide.com/

Gamify your CSS learning and learn better

Shubhra Agarwal — Sat, 21 Aug 2021 07:49:06 +0000

CSS Arts is a great way to improve your CSS skills and show your artistic side to the world.

This is what I have been using for the past few weeks and I can already notice considerable amount of improvement in my CSS skills already.

With the help of this website you can gamify your learning experience and make it more interesting.

https://cssbattle.dev

The basic idea is to replicate the drawing displayed to you on the website in the minimum lines of code and then you are given a score on the basis of that.

You can either play it against someone else in real-time or you can play again yourself.

This is a really fun way to learn and get better at CSS without getting bored.

Thank you for reading :)

You can also check out my other social media handles to connect with me.

Do leave your feedback in the comment section

What is up with var, let and const? What the hell is the difference between these three?

Shubhra Agarwal — Tue, 17 Aug 2021 15:56:24 +0000

With ES2016 came two new methods to declare variable i.e. let and const. Before that the developers had access to only var(I feel bad for them, no kidding).

So, what's the catch here? Why are there three different ways to declare variables? Wasn't JavaScript already confusing enough and now they're making it more confusing.

Before we can understand how var and let/const differ we need to understand a computer science-y concept called scope.

Function scope vs Block Scope

JavaScript comes with two kinds of scope i.e Function scope and block scope. Let's have a look at the difference in both of them.

Function Scope



function myFn() {
  var foo = 'peekaboo!';

  console.log(foo); // 'peekaboo!'
}

console.log(foo); // ReferenceError: foo is not defined

Variables are function-scoped when using var because their visibility is restricted to the function. You'll get an error if you try to utilise it outside of the function.

Block Scope



if (true) {
  var foo = 'peekaboo!';
  let bar = 'i see u';
  const baz = 'baby blue!';

  console.log(foo); // 'peekaboo!';
  console.log(bar); // 'i see u';
  console.log(baz); // 'baby blue!';
}

console.log(foo); // 'peekaboo!';
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined

Notice the visibility of foo isn’t limited by the if-statement block. However, both bar and baz are limited in visibility to the block of code.

This concept of scope is the most prominent distinction between the old-fashioned var and modern let/const.

Source: https://twitter.com/mpjme

VAR

Let's have a look at the following code snippet



for (var i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

According to you what will be the output of the following program??
If you said



//0
//1
//2
//3

then you're absolutely correct.

The variable i is accessible outside of the for-loop. This is expected since variables defined with var have a function scope rather than a block scope i.e they're accessible within the whole function in which they are defined in.

If it's so cool then what's the problem with using var? Why aren't we using it?

I'll use the example below to explain:



    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }

    console.log(greeter) // "say Hello instead"

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realise that a variable greeter has already been defined before.

If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

In layman terms, var can be redefined and it's values can also be changed?

So Shubhra, what can we do to save ourselves from making such blunder in production code???

Well, worry not, the people in the JavaScript headquaters knew that you would be having this problem and already gave a solution for this.

Here comes let to save the day.

LET

In many ways let is like a cousin of var. It has a lot of similarities but differentiates in ways that makes ES2016 a more modern-feeling language.

Let us take the same example we took in var



for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

This time what do you think the output is going to be?? Well if you said



//0
//1
//2
//ReferenceError: i is not defined

then you're in luck.

Hey Shubhra, if let is a cousin of var then why is it coming undefined?
Let me tell you, so let is blocked scope instead of being function scoped.

let can be updated but not re-declared.

Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:



    let greeting = "say Hi";
    greeting = "say Hello instead";

this will return an error:



    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, if the same variable is defined in different scopes, there will be no error:



    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

CONST

The keyword const is an abbreviation for constant. Similar to let, it’s block-scoped, however, you can’t reassign it.

What do you think is the output of this code?



const myBoolean = true;

if (myBoolean) {
  const turtles = [
    'leonardo',
    'donatello',
    'michaelangelo',
    'raphael'
  ];
  // turtles = turtles.concat('Shredder');  // 🙅‍♀️ this would throw an error

  console.log(turtles);
}

console.log(turtles);

The output



// ['leonardo', 'donatello', 'michaelangelo', 'raphael']
// ReferenceError: turtles is not defined

Because the const is not transferred in this scenario, items can still be added to a const variable that links to an array or an object.
This is a topic for another blog. I will discuss it later.

Conclusion

Because function-scope isn't as evident as block-scope, it's best to avoid using var. The objective of ES2016-2019 appears to be to replace var with let/const because they encourage better code habits.

If you need to construct a variable, you should usually use const. Use let instead if you know or suspect you'll need to reassign it (for-loops, switch statements, algorithm swapping).

Some cool JavaScript Shorthand that will make your code cleaner than your peer's

Shubhra Agarwal — Mon, 16 Aug 2021 10:35:30 +0000

Here are 7 JavaScript shorthands that you as a JavaScript developer should know because who doesn't like shorter and cleaner code ¯_(ツ)_/¯

Convert string to number

Normally we use the parseInt() to do this. But, you can do this using the unary operator +. Sick right?

You can also do this by just adding the unary operator to an empty string

The ternary operator

I'm pretty sure all of you must be aware about this but what's the harm in sharing it again.

The short circuit

Ever wanted to check for a condition and output something only if the condition was true? Were you also using && like me? Well, not anymore, I present to you the short circuit.

Flattening an array

A lot of people use various methods to flatten an array like filter(), concat etc. But using the flat() method can get the job done quicker and better.

Merging arrays

Merging of arrays is one of the tasks that we need to do in our day to day coding. Be it the data from an API or whatever. Using the spread operator can get this job done in no time.

Cloning Arrays

Just like merging, spread operator comes in handy even when you want to clone an array

The shorthand of `for` loops

We all have been writing for loops the C++ way up until now, but now it's time to do it the modern way.

TL;DR

Convert string to number
Ternary Operator
Short Circuit
Flattening an array
Merging arrays
Cloning Arrays
The shorthand for loop

8 Projects you should make to take your React Game to the next level

Shubhra Agarwal — Fri, 06 Aug 2021 06:10:52 +0000

We all want to show off our skills in front of others.. Why not make some cool projects so that we also have evidence for our words!!

Let's dive into these 8 projects that will help you improve your react skills...

☑ Build a Photo Gallery with React and Firebase

This tutorial teaches you how to create a photo gallery. The tutorial not only covers the basics and fundamentals of React but also shows you how to create your own custom hooks. Yes, custom hooks!

☑ Build an Expense Tracker using React Hooks and Context API

In this tutorial, create an Expense Tracker Application using React Hooks and Context API. Use this to track your expenses and never go broke again.
https://www.youtube.com/watch?v=XuFDcZABiDQ

☑ Build Hangman with React by CodeSTACK

In this tutorial, Brad builds a hangman game using codeStackr. A must watch for those looking to learn React basics, fundamentals and Hooks.
https://www.youtube.com/watch?v=jj0W8tYX_q8

☑ Build an Exercise Tracker using React.js and Hooks

In this video, You will be building a exercise tracker and you'll get to learn Hooks and React Router. Build this and go hang your own man😂😂😂
https://www.youtube.com/watch?v=iqewbHLKkQk

☑ React.js Full Crash Course with a Meetups Project

A crash course by Maximilian Schwarzmuller (Academind) that teaches you all the fundamentals of React.js. This tutorial also includes a project that uses Firebase as a database.
https://www.youtube.com/watch?v=Dorf8i6lCuk

☑ Build a Weather Application

This tutorial uses the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch AP along with React hooks and conditonals.
https://www.youtube.com/watch?v=GuA0_Z1llYU

☑ Build a Todo Application in React.js

DevEd shows you how to create a Todo Application in React.js
https://www.youtube.com/watch?v=pCA4qpQDZD8

☑ How To Build A Better Spotify With React

Spotify is pretty cool, but what if you could make a better version? In this video, you will create a Spotify clone that not only has many of Spotify's features but also includes lyric lookup.
https://www.youtube.com/watch?v=Xcet6msf3eE

Forem: Shubhra Agarwal

The only Media Queries Cheatsheet you'll need

1️⃣ Mobile Devices

2️⃣ iPads and Tablets

3️⃣ Laptops

4️⃣ Desktops and Larger Screens

5️⃣ Desktops and Larger Screens

TL;DR

Keyboard shortcuts which will make sure you don't have to touch your mouse while writing code

1️⃣ Copy/Cut/Paste Entire Line

2️⃣ Comment and Uncomment Lines

3️⃣ Search for a file in your file

4️⃣ Search for a keyword in a file and in the whole project

5️⃣ Indent and Un-indent code

6️⃣ Create a new file

7️⃣ Create a new line

8️⃣ Navigate across the whole word rather than a character at a time

9️⃣ Highlighting characters and words

1️⃣ 0️⃣ The OG Shortcuts

CSS Concepts every beginner should know

1️⃣ CSS Basics

2️⃣ Elements Arrangement

3️⃣ Layouts

4️⃣ Responsive Design

5️⃣ Advanced

TL;DR

NPM packages for custom hooks that you wouldn't wanna miss out on

Simple Linear Regression explained so simply that even a 5yo can understand

Let's start by importing the modules

Importing the dataset

Splitting the dataset into training and test set

Training the model

Visualising the training set results

Visualising the test set results

Github shortcuts that will make sure that you don't have to use your mouse while browsing

TL;DR

Getting started with keyboard shortcuts

Site wide shortcuts

Go to Shortcuts

Editing the source code

Browsing the source code

Notifications

Make changes in pull request

Some memes that only developers will relate to

1- The Linux lovers:

2- For observers:

3- For starting developers:

4- For smart devs:

5- For developer teams:

6- For developers life:

7- For the production team:

8- For developers & managers relationship:

9- For developers experience:

10- For developers experience:

11- For beginner intern developers

12- For HTML developers

13- For developers life with managers

14- For developers life with Git

15- For debugging

16- For pair programmers

Top 10 Tools🛠 For Web Developers👨‍💻to keep check In 2021🤘🏻

Gamify your CSS learning and learn better

What is up with var, let and const? What the hell is the difference between these three?

Function scope vs Block Scope

Function Scope

Block Scope

VAR

LET

let can be updated but not re-declared.

CONST

Conclusion

Some cool JavaScript Shorthand that will make your code cleaner than your peer's

Convert string to number

The ternary operator

The short circuit

Flattening an array

Merging arrays

Cloning Arrays

The shorthand of for loops

TL;DR

The shorthand of `for` loops