DEV Community: Mandeep Singh Panwar

6 VScode Extensions to boost your Code

Mandeep Singh Panwar — Tue, 30 Jun 2020 14:54:50 +0000

6 VScode Extensions to boost your Code

Lets get to it then 🚀

Live Server
- Live server is useful to create local server of your file.
- It also gets updated automatically on save
- No more reloading the pages 🤣
- Link 🔗
Auto Rename Tag
- This extension automatically renames the tag on change
- good for working with html
- Link 🔗
Prettier
- Prettier is used to beautify the code, It supports variety of languages
- To format on save go to VScode settings then search and enable Format on Save
- Link 🔗
EsLint
- EsLint is a JavaScript linter, It identifies problems in your JavaScipt code leading to less bugs
- To use EsLint one must have installed EsLint globally or locally, tho global install is recommended
- for global install run npm install -g eslint in your terminal
- Link 🔗
TabNine
- TabNine is an AI Code Completions for All Languages and IDEs
- It indexes all your files and predicts what you may write
- Though still in infancy, it is worth a try
- Link 🔗
Bracket Pair Colorizer 2
- This extension allows matching brackets to be identified with colours.
- It saves time looking for the closing tag 🕶
- Saves from syntax typos
- Link 🔗

Difference in Asynchronous & Synchronous JavaScript Code

Mandeep Singh Panwar — Tue, 30 Jun 2020 14:00:52 +0000

Hello beautiful people on the internet 🙋‍♂️

This blog points out difference between Asynchronous & Synchronous JavaScript code

All developer eventually have to know about these two in order to write good code

Lets get to it then 🚀

Synchronous Programming ▶ Synchronous basically means that you can only execute one thing at a time
- Like in JavaScript, the code runs from top to button executing single line of code at a time
Asynchronous Programming ▶ Asynchronous means that you can execute multiple things at a time and you don't have to finish executing the current thing in order to move on to next one

Why does it even matter 🤔

Now that you know about this why does this even matter?

It is important because the code that might take more time (like API calls) must be written Asynchronously otherwise rest of the code will have to wait till the data is fetched.

In simple words 💁‍♂️

If we make API calls or fetch data Synchronously, our code written after the call will have to wait till out call is made
Assuming that fetching data takes 200ms, JavaScript will wait for 200ms and then execute rest of your code.
While if the data fetching is written Asynchronously the 200ms wait is no longer there, the rest of the code runs without waiting for the data fetching making code run faster.

Now how to write code Asynchronously 🤔

There are various ways, most preferred are

promises
- under this you fetch data inside a promise. Read more 🔗
async await
- this is used to make normal function act Asynchronously. Read more 🔗

Thank you for reading 💙👨‍💻

Dark Art of centering elements in CSS

Mandeep Singh Panwar — Tue, 30 Jun 2020 13:19:11 +0000

Hello folks, this is my first blog 😊

Alright, lets dive into it.

What will you learn 🤔

How to magically center anything in FLEXBOX

Lets get to it, then

First create a pen at codepen.io

Lets add some code

Add this to the html sections
<div class="box"> <div class="sm-box"></div> </div>
We have created a 🙎‍♂️ parent div of class box which has 👶 child div sm-box
and this to the css
.box {height: 200px; width: 200px; border: 1px solid #c51244;}
.sm-box{ height: 100px; width: 100px; background-color: red; }
It will look like this -
this css is used for us to see 👶child div layout in 🙎‍♂️parent div
We are ready now

Flexbox basics 🚀

In order to use flex box u must add display: flex to the parent div i.e .box
Flex box uses two axis to layout out elements
- main axis
- cross axis
flexbox uses flex direction property to define the main axis, it takes any of these value
- row row-reverse column column-reverse
the diagram above defines the direction of main axis for all different flex-direction properties
by default (when not defined) flex-direction is row

Alright we are done with theory lets center our 👶 child div now

Since now u know about axis and flex-direction, we can move on to the main properties justify-content and align-items
- justify-content handles the main axis
- align-items handles the main axis
to center child element we add justify-content: center and align-items: center to the parent css
and voila!! child div is centered

Overview

In order to center all elements inside a parent element u can use flexbox
Add display: flex to parent div
Add justify-content: center to center the main axis
Add align-items: center to center the cross axis ## Keep Coding 👨‍💻

DEV Community: Mandeep Singh Panwar

6 VScode Extensions to boost your Code

6 VScode Extensions to boost your Code

Lets get to it then 🚀

Difference in Asynchronous & Synchronous JavaScript Code

Hello beautiful people on the internet 🙋‍♂️

This blog points out difference between Asynchronous & Synchronous JavaScript code

All developer eventually have to know about these two in order to write good code

Lets get to it then 🚀

Why does it even matter 🤔

Now that you know about this why does this even matter?

In simple words 💁‍♂️

Now how to write code Asynchronously 🤔

Thank you for reading 💙👨‍💻

Dark Art of centering elements in CSS

What will you learn 🤔

How to magically center anything in FLEXBOX

First create a pen at codepen.io

Lets add some code

We are ready now

Flexbox basics 🚀

Alright we are done with theory lets center our 👶 child div now

Overview