DEV Community: Amit Mondal

React router Lazy load route components

Amit Mondal — Sun, 18 Sep 2022 13:11:28 +0000

Performance optimization is the key to having an efficiently functional application and is done by monitoring and analyzing various metrics of an application and identifying ways to improve it. One of the most fundamental and important ways is to lazily load the routes/pages based on user requirements and not fetch the whole chunk at the beginning which can lead to a high load time of the page that results in an increase in user dropoff number.

For best practice, web developers code split large bundles into smaller ones because it enables them to lazy load files on demand and improves the performance of the React application. In this post, we’ll look at how to split our code based on routes using React Router. The idea is simple, don’t download code until the user needs it. The below example is just a simple boilerplate example. In practice, it can be a little more complicated.

Enough of Theory let's dive in...

Install the dependency:

yarn add react-router-dom@6

Wrapping App component:

Import BrowserRouter from react-router-dom near the top of your file and wrap your in a so that all the necessary routing methods are available across your application.

File: main.tsx



import React from 'react';

import ReactDOM from 'react-dom/client';

import { BrowserRouter } from 'react-router-dom';

import App from './App';

import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

  <React.StrictMode>

    <BrowserRouter>

      <App />

    </BrowserRouter>

  </React.StrictMode>

);

Creating routes config:

This config will hold all the necessary mapping for our routes like route name, element/component to load lazily, and path. Here we are using useRoutes hook, it is basically the functional equivalent for <Routes>.

File: routes/index.ts



import { useRoutes } from 'react-router-dom';

import { lazyLoadRoutes } from './LazyLoadRoutes';

export function RouterElement() {

  const routes = [

    {

      path: '/',

      name: 'Home',

      element: lazyLoadRoutes('Home'),

    },

    {

      path: 'about',

      name: 'About',

      element: lazyLoadRoutes('About'),

    },

    {

      path: 'services',

      name: 'Services',

      element: lazyLoadRoutes('Services'),

    },

  ];

return useRoutes(routes);

}

Lazy load component:

As the name says the main purpose of this component is to lazily load the mentioned component. First we lazy load the mentioned component using React.lazy, we wrap around React.Suspense with the fallback text(this can be a loader component as well). Please note that we can tweak the function component so that it takes the path and not just the component name.

File: routes/LazyLoadRoutes.tsx



import { lazy, Suspense } from 'react';

/**


Lazily load the mentioned component which resides in the page directory
This method will be used in routes so that the files are loaded only
When users are on that route
*/
export function lazyLoadRoutes(componentName: string) {
const LazyElement = lazy(() => import(../pages/</span><span class="p">${</span><span class="nx">componentName</span><span class="p">}</span><span class="s2">.tsx));



// Wrapping around the suspense component is mandatory

  return (

    <Suspense fallback="Loading...">

      <LazyElement />

    </Suspense>

  );

}

Navigation bar for route redirection:

Creating navigation route for our pages which are Home, About and Services.

File: App.tsx



import { Link } from 'react-router-dom';

import { RouterElement } from './routes';

import './App.css';

function App() {

  return (

    <div className="App">

      <nav>

        <Link to="/">Home</Link>

        <Link to="about">About</Link>

        <Link to="services">Services</Link>

      </nav>

      <RouterElement />

    </div>

  );

}

export default App;

Working Example Link:

As you can see below the chunk for About and Services loads only when we visit that route and the chunk gets cached in the browser so that it is not fetched again in the same session.

Do let me know if there are any other nifty ways in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you liked it.

Dynamic SVG component in Vite + React + TS

Amit Mondal — Wed, 07 Sep 2022 12:10:19 +0000

After hearing many amazing things about vite I decided to try it and create something and I am not at all disappointed with the DX. So when I was developing this fun project of mine (which is currently WIP) I thought of creating a dynamic SVG component that would load up just by giving the SVG icon name with all the SVG customizable attributes under my control.

The first hurdle was to find a plugin that can transform SVG to React component just like we have in CRA. After a few google searches landed on vite-plugin-svgr.

Install vite-plugin-svgr:

If you are using CRA for your React project then this step can be skipped as it configures SVGR(SVGR lets you transform SVGs into React components) under the hood for you.

To install the plugin run:

yarn add -D vite-plugin-svgr

Setting up vite-plugin-svgr:

File: vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr"; // transform svg to react component

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()], // register the plugin
});

Writing the custom hook:

Once SVGR setup is done we are ready to create the functionality that will grab the icon-name and fetch it from assets and load the same. We can also modify the hook so that it can take the icon's path and load it. From this hook, we export the loading state, error state, and the component itself.

File: useDynamicSvgImport.ts

import React, { useEffect, useRef, useState } from "react";

export function useDynamicSvgImport(iconName: string) {
  const importedIconRef = useRef<React.FC<React.SVGProps<SVGElement>>>();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    setLoading(true);
    // dynamically import the mentioned svg icon name in props
    const importSvgIcon = async (): Promise<void> => {
      // please make sure all your svg icons are placed in the same directory
      // if we want that part to be configurable then instead of iconName we will send iconPath as prop
      try {
        importedIconRef.current = (
          await import(`../../assets/icons/${iconName}.svg`)
        ).ReactComponent; // svgr provides ReactComponent for given svg path
      } catch (err) {
        setError(err);
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    importSvgIcon();
  }, [iconName]);

  return { error, loading, SvgIcon: importedIconRef.current };
}

Writing the component:

Let's write the wrapper component for our SVG, main aim of this wrapper is to provide the loading shimmer when the icon is not present to be displayed and apply some wrapper style and SVG attributes.

File: SvgIcon.tsx

import { useDynamicSvgImport } from "./useDynamicSvgImport";

interface IProps {
  iconName: string;
  wrapperStyle?: string;
  svgProp?: React.SVGProps<SVGSVGElement>;
}

function SvgIcon(props: IProps) {
  const { iconName, wrapperStyle, svgProp } = props;
  const { loading, SvgIcon } = useDynamicSvgImport(iconName);

  return (
    <>
      {loading && (
        <div className="rounded-full bg-slate-400 animate-pulse h-8 w-8"></div>
      )}
      {SvgIcon && (
        <div className={wrapperStyle}>
          <SvgIcon {...svgProp} />
        </div>
      )}
    </>
  );
}

export default SvgIcon;

Using component:

Now the component is ready to be used with all the SVG element attributes and wrapper styles that can be passed on as a prop.

File: App.tsx

import './App.css';
import SvgIcon from './SvgIcon';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <SvgIcon
        iconName="react"
        svgProp={{ width: 100, height: 100, fill: "#61dafb" }}
      />
      <SvgIcon iconName="react" svgProp={{ stroke: "white", fill: "blue" }} />
    </div>
  );
}

export default App;

Working example link:

Do let me know if there are any better ways in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you liked it.

State of Vue.js in 2021

Amit Mondal — Fri, 16 Apr 2021 20:33:19 +0000

Vue is an open-source progressive framework that is designed to be incrementally adoptable, as the core library is focused around the view layer only. That being said it's more than capable of powering sophisticated Single Page Applications, Mobile Applications, and Desktop Applications with the help of modern tools. Unlike Facebook's React.js or Google's Angular.js, Vue.js is developed and financed solely from donations.

Since its initial release in 2014 Vue has seen a large growth as it becomes popular among the web development industry this is because it offers some nice benefits when compared to other frameworks.

Few points on why you should try Vue.js:

Reactivity:
This is Vue's one of the most distinct features. Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner, this means that when you set a variable in Vue it will automatically update the user interface which in return makes state management simple and intuitive. Since Vue automatically updates the component this means the system knows precisely which components actually need to be re-rendered when the state changes. With the release of Vue 3, we now have even more control over the underlining reactivity system that powers Vue due to which removes the need for a whole class of performance optimization from the developer's plate and allow them to focus more on building the application itself.
Scalability and Flexibility:
Vue is extremely flexible and scalable and it can be used for large applications as well as for small interactive parts to be integrated with different technology, in other words, it could be anything you need it to be either just a library in your project or a fully-featured framework used to build an entire product.
Standardized tools:
Before I started using Vue I would frequently get frustrated with the number of choices I had when creating a project Vue provides official support for several essential add-ons including Vue-router for client-side routing, Vuex for state management, Vue test utils for unit testing, Vue devtools browser extension for debugging and Vue CLI for creating project boilerplate and are the recommended defaults.
Developer Experience:
Developers love Vue.js not just because it's a great technology but because it was made with them in mind. Vue CLI mentioned in the above point, which is a handy tool for creating a Vue project using whatever tools you choose from the CLI. The CLI is much more flexible compared to similar offerings from competitors and provides a lot of pre-configured steps additionally there is a GUI available for the same.
Other factors devs love about Vue.js:
- Easy learning curve (This allows newcomers to quickly catch on with just HTML, CSS, and JS knowledge)
- Intuitive API
- Elegant programming style and patterns
- Good documentation
- Fast Performance
Composition API:
Vue 3 now offers the Composition API. It is new to interact with the Vue's reactivity system, it provides some major benefits over the Options API:
- It allows to extract common use cases into reusable functions and then call them in different components a nice example of this is the Vue use library which provides some common composition functions you would need when building any type of application.
- It allows for easy separation of concern this means we can group common operations together that are related, this way when a developer comes to look at the code they know exactly where to find what they are looking for unlike mixins from Vue 2.
Popularity:
With 182K Github stars(while writing this post), Vue is inarguably the most popular JavaScript framework. Many well-known companies have web apps made with Vue.js.
Vue users include: Gitlab, Trivago, Euronews, Adobe Portfolio, Behance, Alibaba, Trustpilot, Vice, Nintendo, BMW, Louis Vuitton, Zoom, UpWork, Google(they use Vue for their career page), and many other companies started to use Vue.js.

Conclusion:
Overall I really enjoy working with Vue.js when it comes to building an interface I spend less time wrestling with configuration APIs and worrying about re-renders that I actually get to spend time on the things I enjoy. So if you are considering creating a new project and you don't know which framework to use then I highly recommend Vue.js and I hope the reasons that we went over helps reinforce what I am trying to say.

Thanks for your time reading. Drop a few ❤️ or 🦄 if you like it.

React Stack 2021

Amit Mondal — Sun, 04 Apr 2021 16:15:43 +0000

Over the last few years, there have been some big changes in React itself, and the ecosystem has evolved quite a bit too.

Here’s where things stand in 2021.

React:
Well isn't that obvious, since we are talking about the React Stack after all. We all know how React has seen a rise in popularity to become one of the most loved front-end frameworks of all time. This also means more developers are building projects in React than ever before.
TypeScrpt:
TypeScript is a typed superscript of JavaScript that compiles to plain Javascript, by using React and TypeScript together we get the benefit of statically typed language for the user interface and also lowering the probability of shipping and bugs to the front-end.
React Router:
React Router is still the dominant router when building medium to large scale Single Page Applications. It is currently up to v5 (almost v6) and the API has changed a bit since earlier versions.
Redux:
State management libraries help us to manage the data in our application. The new official Redux Toolkit is excellent and is the recommended approach to use Redux in 2021. If you are going to use Redux, be sure to check those out.
Other alternatives available MobX, Recoil and also using React hooks (useContext + useReducer)
React Query:
On the data-fetching front, the strategy of putting everything in Redux or a global store is getting less common. React Query does a good job at fetching data and managing loading/success/error states and we can definitely use both Redux and React Query in the same project. It takes care of maintaining that global data cache across component boundaries without you really having to think about it. Definitely worth a look if you are working with a lot of async data fetching.
Chakra UI:
Chakra UI has an abundance of components and works with the styled system approach which I personally prefer. Another alternative Material UI. Using a component library is a personal choice.
React Forms:
Formik and React Hook Form seem to be the favorites right now, with hook-form gaining steam. Both supports schema-based form validation with Yup where you can pass your schema as an optional config. The form will validate your input data against the schema and return with either errors or a valid result. Formik or React Hook For with Yup validation library is definitely a swiss knife for all things related to forms in React.
Jest + React Testing Library:
When it comes to testing I personally prefer Jest with React Testing Library as my go-to packages and they are in fact recommended by the react official documentation. What is great about react-testing-library is that it encourages you to write tests that resemble the way the users would interact with your software this helps you avoid implementation details.
Storybook:
Storybook is basically a development environment and playground for UI components. It enables you to create components independently and showcase those components interactively in an isolated development environment. When working on projects storybook allows the front-end team to show the components to the stakeholders.
Next.js:
Next Js is a React framework that gives an excellent developer experience with all the features that you would need to build a fantastic application, there is hybrid, static and server-side rendering, Optimized SEO, image caching, TypeScript support, built-in routing, API conventions, and a lot more. It might probably be most if not every React project might be built in the coming years.

Do let me know if I have missed some of them in the comments below.
Thanks for your time reading. Drop a few ❤️ or 🦄 if you like it.

JavaScript Internationalization

Amit Mondal — Sat, 29 Aug 2020 16:47:44 +0000

Intl is a powerful object that exposes the JavaScript Internationalization API.
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. I won't be mentioning all but a few which caught my attention and can be handy.

1) Convert digits into currency:

new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR',
  minimumFractionDigits: 0
}).format(1150000); // "₹11,50,000"

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0
}).format(1150000); // "$1,150,000"

new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY',
  minimumFractionDigits: 0
}).format(1150000); // "￥1,150,000"

2) Convert Digits to Compact(rounding with notation):

new Intl.NumberFormat(undefined, {
  notation: 'compact'
}).format(1150000); // "1.2M"

new Intl.NumberFormat(undefined, {
  notation: 'compact'
}).format(11500); // "12K"

3) Format Date to mentioned locale prefers:

const date = new Date();
dateTimeFormatter = new Intl.DateTimeFormat('en-IN');
dateTimeFormatter.format(date); // "29/8/2020"

dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) // "8/29/2020"

/*The formatToParts() method returns an array with all the date parts:*/
const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-IN')
dateTimeFormatter.formatToParts(date)
/*
[
  {
    "type": "day",
    "value": "29"
  },
  {
    "type": "literal",
    "value": "/"
  },
  {
    "type": "month",
    "value": "8"
  },
  {
    "type": "literal",
    "value": "/"
  },
  {
    "type": "year",
    "value": "2020"
  }
]
*/

4) Plural Rules Formatting tells you which form applies based on a given number for a specific locale:

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

// Every time we get other, we translate that to th. If we have one, we use st. For two we use nd. few gets rd.
const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

const format = (number) => `${number}${suffixes[pr.select(number)]}`

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

Everything in JavaScript is not an Object

Amit Mondal — Sun, 24 May 2020 11:26:55 +0000

It is a very common misbelief or misstatement that "everything in JavaScript is an object" in the JavaScript world. Objects definitely are the general building blocks in which JavaScript is built on but that does not mean that everything is an object.

JavaScript has two main kinds of values: Primitive and Object. Primitive values are immutable whereas Objects are mutable.

The following values are primitive:

string: "Amit"
number: 10, 3.57 (all numbers in JavaScript are floating-point)
boolean: true, false
null: Assignment value that means "no value". Usually explicitly assigned. Many of us might have encountered typeof null returning "object" but this is a well-known bug in JavaScript that can’t be fixed because it would break existing code. That does not mean that null is actually an object
undefined: Javascript sets unassigned variables with a default value of undefined.

All other values are objects. Objects can be partitioned further:

Wrappers for primitives: Boolean, Number, String. Rarely used directly.
Creatable by literals. The following literals produce objects that can also be created via a constructor. Use literals whenever you can.
- Array: [] is the same as new Array()
- Object: {} is the same as new Object()
- Function: function() {} is the same as new Function()
- RegExp: /\s*/ is the same as new RegExp("\s*")
- Date: new Date("2011-12-24")
- Error: Usually you create an Error object with the intention of raising it using the throw keyword. throw new Error('Whoops!').

These built-ins have the appearance of being actual types or even classes. But in JavaScript, these are actually just built-in functions.

var strPrimitive = "This is a string";
typeof strPrimitive;  // "string"
strPrimitive instanceof String;  // false

var strObject = new String("This is a string");
typeof strObject;  // "object"
strObject instanceof String;  // true

In the above code-snippet the primitive value "This is a string" is not an object, it's a primitive literal and immutable value. To perform operations on it, such as checking its length, accessing its individual character contents, etc, a String object wrapper is required.

Luckily, the JavaScript automatically coerces a "string" primitive to a String object wrapper when necessary, which means you almost never need to explicitly create the Object form.

Now consider,

var strPrimitive = "My name is Amit";

console.log( strPrimitive.length ); //15

console.log( strPrimitive.charAt( 11 ) ); //"A"

In both the console statements, we call a property or method on a string primitive, and the engine automatically coerces it to a String object, so that the property/method access works. Similarly, we have object wrapper for number and boolean. null and undefined have no object wrapper form, only their primitive values.

So going forward if someone says "everything in javascript is an object" just politely explain to them why that's not true or just share this post with them.
But yes you can always say that "Most of them are objects but not everything"

I would highly recommend everyone to read You Don't Know JS by Kyle Simpson. Before reading this book I was one of them who thought "Everything in JS is an Object".

Thank you for reading.

Handy Javascript Tricks ✨

Amit Mondal — Sat, 09 May 2020 20:22:18 +0000

In this article 📝, we will look at some JavaScript tricks that can be handy.

While many of these tricks are handy in any context, a few of them may be better suited for code golf than production-level code, where clarity is often more important than concision. You are the best judge of that! 😄

In no particular order, here are a few neat ways to write concise and more performant code.

Copy and paste the code snippets in your browser's console to see the output.

1) Swap two values:

let num1 = 10;
let num2 = 20;
[num1, num2] = [num2, num1];

2) Array Flatten:

// Flatten one level:
const array = [1, [2, [3]]];
array.flat();

// Flatten the array recursively:
array.flat(Infinity);

3) When we want to use javascript object as a hash map(purely for storing data), you might want to create it as follows.

const dirtyMap = {};
const cleanMap = Object.create(null);

dirtyMap.constructor    // function Object() { [native code] }

cleanMap.constructor    // undefined

4) Removing Duplicate value and occurrence from an array:

// Time complexity O(n²)
const duplicateValues = [1,2,2,3,6,4,1,4,3,5,2];
duplicateValues.filter((num,i,arr) => arr.indexOf(num) === arr.lastIndexOf(num))

// Time complexity O(n)
const duplicateValues = [1,2,2,3,63,6,4,1,4,3,5,2];
const counter = {}

duplicateValues.forEach(num => {
  if (counter[num]){
    counter[num] += 1
  } else {
    counter[num] = 1
  }
})

Object.keys(counter).forEach(key => {
    if (counter[key] !== 1) {
        delete counter[key]
    }
});

const removedDuplicates = Object.keys(counter);

5) Get unique values from an array:

const repeatedValues = [1,2,2,3,4,1,4,3,5,2];
const uniqueValues = [... new Set(repeatedValues)];

6) Sorting in JavaScript:

// Sort number in ascending order
unsortedArr = [5,6,2,4,1,8,0,-3,-6,-1,45]
unsortedArr.sort((num1, num2) => num1 - num2);

// Sort number in descending order
unsortedArr = [5,6,2,4,1,8,0,-3,-6,-1,45]
unsortedArr.sort((num1, num2) => num2 - num1);

// Sort string in ascending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort();

// Sort string in descending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort().reverse();

// Sort string length in ascending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort((str1, str2) => str1.length - str2.length);

// Sort string length in descending order
unsortedArr = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 
'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter']
unsortedArr.sort((str1, str2) => str1.length - str2.length).reverse();

// Using localeCompare() enables case-insensitive sorting for an array in ascending order.
unsortedArr = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
unsortedArr.sort( (a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));

7) Setting CSS using JavaScript in object form:

const event_type = document.createElement('span');
Object.assign(event_type.style, {
   fontWeight: 'bold',
   display: 'inline-block',
   width: '128px',
   paddingLeft: '10px',
   paddingRight: '10px',
   color: eventName === 'text-change' ? '#22d' : '#8af', //conditionally assign value
 });

8) Using document.createDocumentFragment():
Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree.

// Normal Approach:
for (let i = 0; i < 1000; i++) {
  const paragraph = document.createElement('p');
  document.body.appendChild(paragraph )
}

// Optimized Approach:
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const p = document.createElement('p');
  fragment.appendChild(p)
}
document.body.appendChild(fragment)

9) Prettify stringified JSON output:

const person = {
  firstName: 'Amit',
  lastName: 'Mondal',
  gender: 'Male',
  interests: ['Coding', 'Gaming', 'Solving Rubix Cube']
};

const normalStringify = JSON.stringify(person);
const prettyStringify = JSON.stringify(person, null, 2);
// OR
const prettyStringify = JSON.stringify(person, null, '\t');

console.log(normalStringify);
console.log(prettyStringify);

10) Convert an array to an object:

const fruits = ['banana', 'apple', 'orange', 'watermelon'];
const fruitsObj = { ...fruits };

11) Fill array with data:

const numDummyArr = new Array(10).fill(1);
const strDummyArr = new Array(10).fill("a");

Might add some more in the future.
Thank you for your time⌛.

Simple use of ⚛️React useState Hook

Amit Mondal — Sun, 29 Mar 2020 18:55:45 +0000

Just an ordinary day and was jumping around videos on YouTube and came across a short video tutorial on creating a react app that uses the Advice Slip API. It is a pretty easy and quick example but in this tutorial react's class component was used to make the app.

So I thought let's re-develop it using the latest React Hooks, so used the useState hook of React v16.8 to re-implement the app.

Live Demo

Codesandbox Link

Following is the code:

File: App.js

// Importing useState from react
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  /**
   * We declare a new state variable(advice) by calling the useState Hook,
   * and set it to ''(empty string) initially.
   * React will remember its current value between re-renders,
   * and provide the most recent one to our function.
   * If we want to update the current advice, we can call setAdvice.
   */

  const [advice, setAdvice] = useState("");

  const fetchAdvice = () => {
    const adviceAPI = "https://api.adviceslip.com/advice";

    // Fetch a random advice slip
    fetch(adviceAPI)
      .then(response => response.json())
      .then(data => {
        // destructuring the advice from data
        const { advice } = data.slip;

        // update to new advice we just fetched
        setAdvice(advice);
      })
      .catch(error => console.error(`Error: ${error}`));
  };

  return (
    <div className="app">
      <div className="card">
        <h2 className="heading">{advice}</h2>
        {/* Trigger fetchAdvice on button click */}
        <button className="button" onClick={fetchAdvice}>
          <span>GIVE ME ADVICE!</span>
        </button>
      </div>
    </div>
  );
}

File: styles.css If you want to decorate it a bit.

body {
  background-color: #666;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #999;
  max-width: 500px;
  padding: 12px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 60%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

Credits

This is a re-implementation of Adrian Hajdin's work 👏:

📝 Source Code: GitHub
🎥 Video Tutorial: YouTube

Personal Developer Blogs to follow

Amit Mondal — Sun, 23 Feb 2020 12:39:45 +0000

When I started my career as a developer I always struggled to find the latest trends, news, and best practices in the web development world or at least some developers who can help with that. Here is the listing of all the personal blogs that I find really useful and helpful.
The listing does not indicate any priority order.

Flavio Copes

C React.js Vue.js DevTools Javascript HTML CSS Database Express Git Go GraphQL Next.js Node.js Services Svelte Web Platform

Flavio Not only writes a blog post every single day, but he has endless handbooks, courses, and tutorials. Some of the posts are more like snippets but are really helpful.

Alligator IO

Javascript HTML CSS React.js Vue.js Angular WebPlatform Stencil GraphQL Gatsby Electron SASS WebComponent RxJS Typescript Redux

Not a Personal Blog but more like a collaboration, I liked it so mentioning this. Alligator.io is born out of a love for the web platform and Open Source software. Their goal is to try and make it easy and quick to understand things that are otherwise daunting to untrained eyes.

Wes Bos

Javascript HTML CSS React.js Redux Node.js CSS-Grid Markdown

Well known for his Javascript 30 a 30 Day Vanilla JS Coding Challenge that helps you in building 30 things in 30 days with 30 tutorials.

Samantha Ming

Javascript HTML CSS

I really appreciate and love the Tidbits section of her blog it has short and simple code snippets that explain various concepts. Also, the articles and tutorials are amazing.

Addy Osmani

Chrome DevTools LightHouse ImageOptimization Performance

Want some tips on optimizing your webpage/website and make it fast?
Want to know some handy tools in chrome dev tools?
Want some productivity tips?
Just follow him.

Tania Rascia

HTML CSS Javascript React.js Vue.js Node.js Bash Script SQL

Tania Rascia is a full-stack developer. She blogs mostly on modern Javascript, HTML, CSS, and everything web development-related.

Dan Abramov

Javascript React.js Redux CreateReactApp

Dan is known for his amazing contributions to JavaScript - Create React App and Redux - and his blog is known for long, insightful posts that cover unique areas of JavaScript and development in general.

Kent C. Dodds

Javascript React.js TypeScript Testing

Kent C. Dodds is a world-renowned speaker, teacher, and trainer and he’s actively involved in the open-source community as a maintainer and contributor of hundreds of popular npm packages. Kent is the creator of TestingJavaScript.com, Epic React and he’s an instructor on egghead.io and Frontend Masters. He’s also a Google Developer Expert.

Dr. Axel Rauschmayer

Javascript fundamentals

Dr. Axel Rauschmayer, author of many books on javascript like Exploring ES6, Javascript for impatient programmers, Exploring ES2018, and ES2019, regularly writes about the newest developments in Javascript's language specification and gives valuable advice for developers from all walks of life. A must-read blog if you ask me!

Tanay Pratap

Javascript HTML CSS React.js Web Development GraphQL Gatsby Typescript Redux Podcast Mentoring
Tanay Pratap is a software engineer at Microsoft. A great mentor and a teacher who teaches for free. Makes candidates job-ready through his Job Challenge and guidance. He also has a podcast and youtube channel.

Ahmad Awais

VS-code Git JAM-stack Node.js Wordpress

Ahmad Awais is an award-winning open-source engineer and a Google Developers Expert. Author of various open-source dev-tools and software libraries used by millions of developers worldwide. He’s known for his open-source community contributions in the Node.js Community Committee.

Robin Wieruch

Javascript React.js Redux Firebase GraphQL

Robin Wieruch is a german software engineer and freelancer located in Berlin. In recent years he has gained experience in single-page applications.

Swyx

Svelte React.js Typescript Netlify

Swyx has a lot of great posts and tutorials, and one of his most famous contributions to the web development zeitgeist is Learn in Public.

Khalil Stemmler

Node.js Typescript GraphQL Gatsby FunctionalProgramming Networking API

Khalil's blog posts are filling a very rare niche in web development, which is how to build large-scale applications properly, specifically with React, TypeScript, GrarphQL, and Node. He's bridging the gap between intermediate and advanced, which is a difficult area to cover.

Dave Cedia

React.js Redux Svelte

He writes mostly on react, redux, svelte, and everything frontend. He runs a couple of courses on React which are Pure React and Pure Redux.

Valentino Gagliardi

Javascript Python Django API HTML Typescript

His articles are very in-depth and informative, and he cares about responding to users and helping them out as well.

David Walsh

AJAX Canvas SVG CSS Dojo HTML5 JavaScript jQuery Media Mobile MooTools Node.js Performance PHP SEO Shell WordPress

David's expertise and interest lie in front-end technologies, including HTML/5, CSS, JavaScript (as well as frameworks like jQuery, MooTools, and Dojo Toolkit). His server-side skills revolve around PHP and Python.

James King

WebDevelopment React Javascript API

Learn JavaScript and React the right way with fun, easy-to-follow tutorials. James writes about React every week.

I might have forgotten a ton, but I wanted to get a list out of the ones that came to my head. You can mention your favorite one in the comments.

VS Code extensions for Python

Amit Mondal — Sun, 09 Feb 2020 13:33:12 +0000

Won't waste your time and will just jump to the list of Visual Studio Code Extensions that I would recommend if you are a 🐍 Python developer.

1. Python

This will be the first and most important extension that I would recommend. It is all in one power packed extension for Python. It includes rich features like IntelliSense, Linting, Code formatting, Debugging, Testing, Jupyter Notebooks, Environments, and Refactoring.

2. autoDocstring

We all know how important it is to comment and document your code. This extension will:

Quickly generates a docstring snippet that can be tabbed through.
Choose between several different types of docstring formats.
Infers parameter types through pep484 type hints, default values, and var names.
Support for args, kwargs, decorators, errors, and parameter types.

3. Python Test Explorer

Yes, I know the Python extension already does this so why install another one? Well, this includes features like:

Showing a Test Explorer in the Test view in VS Code's sidebar with all detected tests and suites and their state.
Showing a failed test's log when the test is selected in the explorer.
Supporting multi-root workspaces.
Supporting Unittest and Pytest test frameworks.

4. AREPL

This extension is a real-time Python scratchpad. It may not sound like a great deal at first but believe me, if you’re doing any sort of exploratory work then this thing can come handy.

I know there are many more extensions available in the Market Place. Please let me know your favorite Python extensions for VS Code in the comments.

Thanks for giving your precious time and reading this.