DEV Community: Shailesh Kumar

5 cool vs code extensions for web developers

Shailesh Kumar — Fri, 22 Jul 2022 12:25:02 +0000

Hi all, today is this blog I am going to show 5 vs code extensions which I use that boosts my productivity.

1. Inline Fold

If you have been using Tailwind css(which you definitely should) then you might want to hide the styles you have applied once you are done with the styling. Using this extension the classNames collapses to three dots and help us focus more on the code.

before

after

Inline Fold

2. Tailwind CSS IntelliSense

The second extension is also on Tailwind CSS 😛 . As it is clear from the name, this extension provides auto-complete suggestions for Tailwind CSS. I can't emphasis how slick it makes writing CSS. See below for yourself.

Tailwind CSS IntelliSense

3. Peacock

Peacock gives different colors to different instances of Vs code. This helps in quick identification of which project we are currently working on

Peacock

4. Rainbow Brackets

Rainbow Brackets gives different colors of nested brackets in Vs code, by which you can distinguish easily closing and opening of the brackets it can be parenthesis, square bracket, curly bracket .

Rainbow Brackets

5. CodeSnap

When you have writing a blog or make documentation of your projects and want to give your code with cool looking then this extension is best for you. You can easily install this extension on Vs code then three steps you have to follow.

Select the code you want to take snap.
Right click, choose CodeSnap📸.
After you get an snap of your code, click the image and press the copy keyboard shortcut (defaults are Ctrl+C on Windows and Linux, Cmd+C on OS X)

CodeSnap📸

React Memo, useMemo, useCallback - Optimize your performance

Shailesh Kumar — Fri, 17 Jun 2022 13:37:37 +0000

Hello everyone!
In this blog we talk about how to optimize your react project.

In react there is a hook React.memo for optimizing the performance , and there is a React.useMemo also for optimizing the performance , another one is React.useCallback also for optimizing performance. so you are confused 😑 which one to used ?
let's dive in to the examples to understand you perfectly.

Scenario where need to optimize

In the above example there is component named as Child
and there is a counter state in parent/app.js. When you increment the counter the Child component also will be re-rendered (You can see the console after each click on the button)
while there is no state change in the child element ,then component will be re-rendered.

What is the solution for stop un-usual re-rendering ?

There is a concept called Memoization.
Let's see the definition of memoization

What is memoization ?

Memoization is an optimization technique that makes applications more efficient and hence faster🚀. It does this by storing computation results in cache, and retrieving that same information from the cache the next time it's needed instead of computing it again.

A memoized function remembers the result of an output for a given set of inputs. It means when you give it set of inputs it remembers those inputs and also output associative with it. Whenever passing a set of input to the memoized function first it check in the cached memory whether the set of inputs is available or not, if they have its give you computed value from the cached memory.
In React, we can memoized components (where the inputs are props) or functions.

Let's memoize our previous example:
We use React Memo for optimize this component example.

You can now check the console only first time render the child component after using React Memo.

What is Callback ?

MDN definition

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Let's add an input field to the above example and pass props to child component function(setCounter) in which increase the counter value by calling this function.

In above codeSandBox example if we type in the input field then child component get re-rendered(You can see console), while there is no props pass to the Child component which is related to state Input text field. Then why this happening ?🤔

The child component get re-render because when the parent component render in each time the inline function which is pass in the child component is redefining the function calls another function which is called setCounter.

// passing function to the component
<Child updateCounter={() => setCounter((counter) => counter + 1)} />

Now, we want to pass callback function with memoize, so React Memo working properly. We use useCallback to memoize the callback functions. Let's code and look how can we use useCallback hook.

export default function App() {
// ...
const updateCounterFromChild = useCallback(() => setCounter(counter + 1), [
    counter
  ]);

return (
// Some Jsx returns
<Child updateCounter={updateCounterFromChild} />
 )
}

In useCallback({},[]) there is a dependency array list and we add dependency counter because the updateCounterFromChild function redefined only when the counter state is changed.

What is useMemo ?

Definition by ⚛️reacts.org:

useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

Let's understand with the above statement they said avoid expensive calculations on every render.

In above example you can notice that there is very expensive calculation will be done as below you can see.

(function () {
    console.log("Expensive calucation to be started...");
    let tempNumber = 0;
    for (let i = 0; i < 500_000_000; i++) {
      tempNumber++;
    }
  })();

In every click there is an delay for render the state of counter, because every click IIFE is called and doing expensive calculations. we don't want to re-rendered IIFE because every render we get same value from the previous render and this reason memoization comes.

We do two types of memoization in single example:

Don't calculate expensive calculation in each render.
I want to we update only Second counter in above example.

useMemo vs useEffect

If you think we can do second part of the above statement with the help of useEffect then you can't do with this because, useEffect work for whole component of the app but useMemo can work for some part of the component. let's see with the code how useMemo work for some part of the HTML code.

As you can see the above codeSandBox output the re-render after every click becomes smooth and there is no console of the IIFE.
First counter not get affected by the Increment click. If you want to update also the state of first counter then you pass dependencies array counter to the useMemo.

Thanks for reading this blog with the patience 😊, and i suppose to be that you will get learn something from this blog.
Give your love💖 and feedback💬 to this blog.

Why Intersection Observer ?

Shailesh Kumar — Wed, 15 Jun 2022 22:09:14 +0000

What is Intersection Observer API

By the mdn docs

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Understand

This concept made by two words first is Intersection and another one is Observer. let's take basic view on this topic first.

By the name you can understand that the intersection means minimum to objects, in this concept the intersection taken with the one is viewport and another one is with the element such as div,img.

Observer is observe the viewport when the specific target element by you comes in the viewport then its give you an details the item you targeted is comes to your viewport. Obviously target element comes in to the viewport by scroll the page.

What can we do by observing the element 🤔 ?

Nowdays the website using this concept for giving animation on the element like:

The most impressive and bit a complex example of this Apple website

Why not scroll event ? 😒

Scroll event is an event listener when the target element scroll is keep calling the function when the element comes in the viewport and by this reason your animation get continuously render without any delay and it will not giving you output as your desired.

let's see this example.

For handle this you need to use Throttling for delay on your event handler function calling.

When you use Intersection Observer you don't need for any throttling.
For handle the this type of problem there is an Intersect Ratio by the observer this tells that how much part of the targeted element rendered in to the viewport.
There is an Threshold value which provided by the Intersection Observer API. It provide one or more numeric values representing percentages of the target element which are visible on the viewport.
In scroll event you need to calculate some complex calculation for get the value of the height view of the targeted element. In intersection observer you get these all values.
Intersect Ratio you can use for observe the targeted element. By the docs

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.

Here 0.0 means 0%, 0.5 means 50%, 1.0 means 100% visible on the viewport.

Example for change the page background color on scrolling by Intersection Observer API

Let's Start with code

By the reference of MDN Docs

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

When the targeted element meet the threshold value specified by the IntersectionObserver the function callback is invoked.

The callback receives a list of IntersectionObserverEntry objects.

Example by MDN

Thanks for reading my blog 😊
Give your feedback and suggestions.