Forem: Abhinav Vp

Yet another 4 JavaScript tips for shorter code

Abhinav Vp — Sun, 25 Dec 2022 06:33:46 +0000

Seems like JavaScript never ceases to surprise me, perhaps that would explain why I’m writing another blog on JavaScript tips, and I honestly don't see this blog series ending in near future.

This will be my continuation to my previous two blogs on the same topic : 4 JavaScript Tips for Shorter Code and Another 4 JavaScript Tips for Shorter Code. It’s not necessary that you read those, but it is recommended as they can be really useful.

1. Conditionally add keys to an object.

Javascript object contains props and its values, and some times we might have to conditionally add more prop value pairs in it. The following syntax can be used for it.

const obj = {
  ...(condition && { someprop: propvalue }),
  ...otherprops,
};

In the below example, hobbies are added in the personDetails object only if the number of hobbies are greater than 0

const hobbies = ["painting", "cooking", "reading"];
const personDetails = {
  name: "John Doe",
  age: 25,
  ...(hobbies.length > 0 && { hobbies }),
};

2. Keys, Entries and Values.

Another tip for dealing with objects ? Yes.

Object.keys() returns the list of property names.
Object.values() returns the list of property values,
Object.entries() returns the list of pairs of property names and corresponding values

Above functions will take the object as a parameter and returns the output accordingly

const personDetails = {
  name: "John Doe",
  age: 25,
};

Object.keys(personDetails) will return [ 'name', 'age' ].
Object.values(personDetails) will return [ 'john doe', 24 ].
Object.entries(personDetails) will return [ [ 'name', 'john doe' ], [ 'age', 24 ] ].

3. Defaut values using `||`.

You can assign a default value to a variable using || operator. This tip is very useful if you’re dealing with APIs, and will act as a failsafe mechanism. In case an API breaks we can use this method to give a default value accordingly.

In the below example, age is evaluated to false since its undefined, giving newAge a value of 5.
const age = undefined;

const newAge = age || 5;

4. Formatting json using JSON.stringify().

JSON.stringify() can be used to convert a javaScript value to JSON string. The value to be converted can be passed in as a parameter. It also takes in two optional parameters, replacer and space. We can use the third parameter to format the output.

const personDetails = {
  name: "John Doe",
  age: 25,
};

Now if we run the below line, the output would be a single lined.
console.log(JSON.stringify(personDetails))
Output : {"name":"John Doe","age":25}

But if we were to add the other two parameters, the output would be formatted.
console.log(JSON.stringify(personDetails,undefined,2))
Output :

{
  "name": "John Doe",
  "age": 25
}

Behold, React 18 !

Abhinav Vp — Sat, 09 Apr 2022 06:16:05 +0000

A new version of React was released on the 29th of March this year. The latest version, React 18, includes some out-of-the-box improvements, including concurrent rending, new APIs, and much more. In this article, we shall go through some of the new features that have been introduced in React v18.

What is Concurrent React?

Many of the new features in React v18.0 are on top of a concept called Concurrent Renderer. This enables us to use concurrent React, which helps us to prepare multiple versions of a UI at the same time. Right now, the concurrent React is optional, which means it is only enabled when you use a concurrent feature.

Previous versions of React used a single, uninterrupted, synchronous transaction. That is, with synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on the screen.

In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later, or It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted.

React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.

Almost all the updates in the new version are based on the new concurrent rendering mechanism.

New Features in React

Automatic Batching

Most often you might have faced a situation where multiple state updates had to be performed. Batching is when React groups multiple state updates into a single re-render for better performance.

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

React till now had only executed Batching inside React event handlers, whereas updates inside promises, setTimeout, native event handlers or any other event were not batched by default. With automatic batching, these updates will be batched automatically.

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Transitions

A transition is a new concept in React. Updates are divided into two types in React. Urgent updates and Transition updates
Urgent updates are those updates that reflect direct interaction, like typing, clicking, pressing, and so on. These updates need immediate response to match our intuitions about how physical objects behave. Otherwise, they might feel a bit odd.
Transition updates are those updates that transition the UI from one view to another. Transitions are different because the user doesn’t expect to see every intermediate value on the screen.

For example, when you interact with a filter feature, you expect the filter button itself to respond immediately when you click. However, the actual results may transition separately. A small delay might occur and is often expected. And if you change the filter again before the results are done rendering, you only expect the latest result.

React has introduced startTransition API which can be used inside an input event to inform React which updates are urgent and which are transitions.

Updates inside a startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or keypresses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

New Suspense Features

Suspense lets you declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed.

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

This lets us build higher-level features on top of it. In React 18, the support for Suspense on the server has been added and expanded its capabilities using concurrent rendering features.

New Client and Server Rendering APIs

React introduced some new APIs to implement concurrent react. It has to be used instead of default APIs or else new features in React 18 would not work

React DOM Client - new APIs

createRoot: New method to create a root to render or unmount. Use it instead of ReactDOM.render.
hydrateRoot: New method to hydrate a server-rendered application. Use it instead of ReactDOM.hydrate.

Both createRoot and hydrateRoot accept a new option called onRecoverableError. This notifies when React recovers from errors during rendering. By default, React will use reportError, or console.error in the older browsers.

React DOM Server - new APIs

renderToPipeableStream: for streaming in Node environments.
renderToReadableStream: for modern edge runtime environments, like Deno and Cloudflare workers. The existing renderToString method keeps working but is discouraged.

New Hooks

useId - a new hook for generating unique IDs on both the client and server
useTransition - useTransition and startTransition let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results).
useDeferredValue - lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but there is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn’t block user input
useSyncExternalStore - allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources.
useInsertionEffect - CSS-in-JS libraries to address performance issues of injecting styles in render. This hook will run after the DOM is mutated, but before layout effects read the new layout.

In short, the new updates have been largely focused on optimization, removing unwanted renders, leading to increased performance.

I made a portfolio website using only HTML without any Styles. This is what I learned

Abhinav Vp — Sun, 27 Feb 2022 13:22:18 +0000

I made a portfolio website using only HTML without any styles. The intention was to push the limits of pure HTML and see its capabilities, and it was worth it. These are some of the things I’ve learned during the process.

1.`<body>` tag has some styling properties

The body tag has some styling properties, but most of them are depreciated. There are attributes to change background color, text color, background image, hyperlink colors, and margin. But it is advisable to use CSS properties to achieve that as these are depreciated.

2.`<details>` can be used as a drop down element.

the <details> element is a widget that has an ‘open’ state which can be used to store information. Label can be provided inside the <summary> tag.
When the user clicks on the widget or focuses it then presses the space bar, it opens, revealing its contents.

By default when closed, the widget only displays the disclosure triangle and summary. When open, it expands to display the details contained within.

<details>
    <summary>Data</summary>
    <p>the data to display</p>
</details>

3.`target=’_blank’` and `target=’blank’`

The <a> has a href property which can be used to create hyperlinks. It also has a target property that decides where the linked URL has to be displayed. The keywords are :

_self: the current browsing context. (Default)
_blank: usually a new tab, but users can configure browsers to open a new window instead.
_parent: the parent browsing context of the current one. If no parent, behaves as _self.
_top: the topmost browsing context (the "highest" context that's an ancestor of the current one).

Another keyword is blank where the URL will be displayed in a new tab, but on clicking again it will be reloaded in the same tab unlike _blank where new tabs are opened every time.

The website is hosted over here

Why You Should Use Error Boundaries in React

Abhinav Vp — Sat, 12 Feb 2022 12:57:56 +0000

React Error Boundaries were introduced in React version 16 to generate a fallback UI in case a component were to crash. This was to ensure that a JavaScript error in a single component should not crash the whole app.

Consider the following React application which renders the component DisplayName displaying the name according to the input data.

import DisplayName from "./DisplayName";

function App() {
  return (
    <div className="App">
      <DisplayName name={{ firstName: "John", secondName: "Doe" }} />
      <DisplayName name={{ firstName: "Lex", secondName: "Luthor" }} />
      <DisplayName name={{ firstName: "Peter", secondName: "Parker" }} />
    </div>
  );
}

export default App;

The DisplayName component simply displays the name from the passed down name object.

import React from "react";

export default function DisplayName({ name }) {
  return (
    <div
      style={{
        width: "600px",
        backgroundColor: "yellowgreen",
        margin: "auto",
        border: "black 1px solid",
      }}
    >
      {name.firstName} {name.secondName}
    </div>
  );
}

The browser will display something like this.

If there were any errors while rendering any one of the components the entire application would be crashed and an empty page would be displayed on the production build. It would be hard to find and debug the error as well. For example, the following code will crash the application since the prop name is not being passed down to one of the components.

import DisplayName from "./DisplayName";

function App() {
  return (
    <div className="App">
      <DisplayName />
      <DisplayName name={{ firstName: "Lex", secondName: "Luthor" }} />
      <DisplayName name={{ firstName: "Peter", secondName: "Parker" }} />
    </div>
  );
}

export default App;

Implementing Error Boundaries

Error boundaries work as a JavaScript catch {} block, but for components. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. Error boundaries are, in fact class components, but will have two lifecycle methods static getDerivedStateFromError and/or componentDidCatch(). Error prone components can be passed down as their children.

static getDerivedStateFromError() can be used to render a fallback UI after an error has been thrown and componentDidCatch() can be used to log error information.

import React, { Component } from "react";

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false,
    };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div
          style={{
            width: "600px",
            backgroundColor: "yellow",
            margin: "auto",
            border: "black 1px solid",
          }}
        >
          Fall Back UI
        </div>
      );
    }
    return this.props.children;
  }
}

How passing components as children of ErrorBoundary looks

import DisplayName from "./DisplayName";
import ErrorBoundary from "./ErrorBoundary";

function App() {
  return (
    <div className="App">
      <ErrorBoundary>
        <DisplayName />
      </ErrorBoundary>
      <DisplayName name={{ firstName: "Lex", secondName: "Luthor" }} />
      <DisplayName name={{ firstName: "Peter", secondName: "Parker" }} />
    </div>
  );
}

export default App;

The browser will display output as

Instead of crashing the whole application.

You may wrap top-level route components to display a message to the user, just like how server-side frameworks often handle crashes or you may wrap individual components in an error boundary to protect them from crashing the rest of the application like above.

Where Error Boundaries won’t work in React

Event handlers
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
Server side rendering
Errors thrown in the error boundary itself (rather than its children)

What about Event Handlers?

Error boundaries do not catch errors inside event handlers as React doesn’t need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don’t happen during rendering. So if they throw, React still knows what to display on the screen.

If you need to catch an error inside an event handler, use the regular JavaScript try / catch statement.

Another 4 JavaScript tips for shorter code

Abhinav Vp — Sun, 28 Nov 2021 11:40:28 +0000

This is a continuation to my earlier article : 4 JavaScript tips for shorter code

1. Replace Switch or If-Else with key value pairs

The switch statement and if-else statement evaluates an expression and executes statements associated with that case. But as the number of cases increases the code grows as well.

function returnDaySwitch(val) {
      switch (val) {
         case 1:
            return "It's monday";
         case 2:
            return "It's tuesday";
         case 3:
            return "It's wednesday";
         case 4:
            return "It's thursday";
         case 5:
            return "It's friday";
         case 6:
            return "It's saturday";
         case 7:
            return "It's sunday";
         default:
            return "Enter a value between 1 - 7";
      }
   }
function returnDayIfElse(val) {
    if(val==1){
        return "It's monday";
    }else if(val==2){
        return "It's tuesday";
    }else if(val==3){
        return "It's wednesday";
    }else if(val==4){
        return "It's thursday";
    }else if(val==5){
        return "It's friday";
    }else if(val==6){
        return "It's saturday";
    }else if(val==7){
        return "It's sunday";
    }else{
        return "Enter a value between 1 - 7";
    }
}
const day = 3;
console.log(returnDaySwitch(day)); //It's wednesday
console.log(returnDayIfElse(day)); //It's wednesday

This can be made simpler by using key-value pairs of an object.

function returnDayKeyValue(val) {
    const returnDayObject = {
        1: "It's monday",
        2: "It's tuesday",
        3: "It's wednesday",
        4: "It's thursday",
        5: "It's friday",
        6: "It's saturday",
        7: "It's sunday",
    }
    if(!returnDayObject[val]){
     return "Enter a value between 1 - 7";
    }
    return returnDayObject[val]
}
cosnt day = 3;
console.log(returnDayKeyValue(day)); //It's wednesday

@lukeshiru gave some tips on how to make it more shorter

const dayToString = day =>
    ({
        1: "It's Monday",
        2: "It's Tuesday",
        3: "It's Wednesday",
        4: "It's Thursday",
        5: "It's Friday",
        6: "It's Saturday",
        7: "It's Sunday",
    }[day] ?? "Enter a value between 1 - 7");

const dayToString = day =>
    [
        undefined,
        "It's Monday",
        "It's Tuesday",
        "It's Wednesday",
        "It's Thursday",
        "It's Friday",
        "It's Satuday",
        "It's Sumday",
    ][day] ?? "Enter a value between 1 - 7";

2. Remove duplicate elements in an array

Duplicate elements in an array can be removed by Set constructor and spread syntax. Set constructor converts an array into a set which cannot have duplicate elements. Spread syntax can be used to convert the set object back to an array.

const array = [1,2,2,3,4,5]
const uniq = [...new Set(array)];
console.log(uniq) // [1,2,3,4,5]

3. Computed property names

You cannot set object keys as variables directly. It will read the variable names as key names

const key1 = "name";
const key2 = "age";
const student = {
    key1:"john Doe",
    key2:26
}
console.log(student)
//{ key1:"john Doe", key2:26 }

Starting with ECMAScript 2015, you can put an expression in brackets [], that will be computed and used as the property name.

const key1 = "name";
const key2 = "age";
const student = {
    [key1]:"john Doe",
    [key2]:26
}
console.log(student)
//{ name:"john Doe", age:26 }

4. Prevent falsey value from evaluating to false

There are six falsey values in JavaScript: undefined, null, NaN, 0, "" (empty string), and false. A falsy value is something which evaluates to FALSE, for instance when checking a variable. There could be scenarios where you wont want any falsy value to evaluate to false.

const number = 5;
if(number){
    console.log('The number exists')
}else{
    console.log('The number do not exist')
}

Will print The number exists. But

const number = 0;
if(number){
    console.log('The number exists')
}else{
    console.log('The number do not exist')
}

Will print The number do not exists. This can be handled by giving an exception at the evaluation

const number = 0;
if(number===0?true:number){
    console.log('The number exists')
}else{
    console.log('The number do not exist')
}

@lukeshiru came to the rescue again simplifying it further in case if you are checking a number

const number = 0;

console.log(
    typeof number === "number"
        ? "The number exists"
        : "The number do not exist",
);

Will print The number exists. 0 at the expression can be changed with any of the falsy values.

How React Rethinks best practises

Abhinav Vp — Sat, 27 Nov 2021 05:21:55 +0000

React.js is currently the most popular front-end JavaScript library for building Web applications. It is an open-source JavaScript library that is used for building user interfaces. It renders the UI as per user requirements and plays nicely with any stack. In this article, we shall go through how React rethinks some of the best practices in web development.

Separation of Concern

The separation of concerns (SoC) is one of the most fundamental principles in software development. The principle states that don’t write your program as one solid block, instead, break up the code into chunks that are finalized tiny pieces of the system each able to complete a simple distinct job.

Separation of concern aims to reduce coupling and to increase cohesion.

Coupling is the degree to which each module in a program relies on another. It is helpful as isolated problems are easy to deal with and the modules are highly likely to be unit testable. An increase in coupling means that the modules depend on each other and any change in one module might lead to cascading changes in others and it would be a nightmare to debug.

Cohesion is the degree to which elements of a module belong together. This is important as functionality wise the elements must make sense. Reduction in cohesion makes code harder to maintain. It won’t be easy to figure out where to make the change on need.

Templates encourage a poor separation of concern

JavaScript templating refers to the client-side data binding method implemented with the JavaScript language. In templates, you will have display logic in one file and markup in another file. Display logic and markup are inevitably tightly coupled as well as highly cohesive. We can observe that templates, in fact, separate technologies, not concerns. above all that, they are deliberately underpowered.

Let’s take the case of Partial feature in handlebars: Templates rely on primitive abstractions often. “Partial” is used for reusing templates. They are basically mini templates that can be included in other templates. The drawback of this approach is that reused child template gets all the variables the parent has in the current scope.
Flow control abstraction like “Each”: “Each” iterates through each item of a sequence and emits some markup in the traditional templating language. The downfall is that it is really hard to change the way it iterates through the list. You don’t have the power of a programming language but the power of templating language which is deliberately underpowered.
Inventing lots of new concepts that already exist in JavaScript: Directives are classes that add additional behavior to elements in AngularJs. It creates a lot of concepts that were already there in JS. The framework cannot know how to separate your concerns for you. it should only provide tools for the user to do it correctly. Rather than the language of the framework itself.

React — a highly cohesive and loosely coupled library

React uses components that mix markup and display logic. Markup and logic can be incorporated into individual components that match the app better unlike templating language. Moreover, the components display abstraction, composition, and expressivity.

Abstraction: Components can be created using JavaScript function or class. They are unit testable and lintable.
Composition: They are reusable.
Expressivity: They use regular JavaScript expressions.

React ensures security from Cross-Site Scripting as it uses a library called React DOM, which is used to generate DOM. The library escapes the input automatically, so HTML is also escaped hence ensuring safety from XSS.

There is also an optional pre-processor that lets the user use HTML-like syntax for development called JSX. It makes it easier for designers to contribute code.

React ensures that there is the accessibility of templates and the power of JavaScript.

The Virtual DOM

Building UI is hard because there are so many states to be managed over a web page. There are lots of UI elements, design iteration, user input, etc.

Data changing over time is the root of all evil.

We can no longer just refresh the page when the data changes. Currently, that is not a feasible solution and is also quite annoying from a user experience perspective.

React on the other hand re-renders the entire component on change. Components are idempotent functions that describe your user interface at any point in time. React isolate data changes by using setState function in the case of Class components and user-defined functions in functional components. Now the question is it expensive?

React achieves this by using something called virtual DOM. Virtual DOM makes re-rendering fast. It is optimized for performance and memory footprint.

On every update, React build a new virtual DOM sub-tree and diff it with the old one. Then it computes the minimal set of DOM mutations and puts them in a queue and batch executes all updates.

It is fast because DOM is slow and react computes minimal DOM operations batched reads and writes for optimal DOM performance.

These are some of the ways in which React rethinks the best practices in web development. This article was based on a talk by Pete Hunt from 2013. This was insightful as most of the tutorials on React deals with the How rather than the Why.

React explained and made Simple

Abhinav Vp — Sun, 31 Oct 2021 06:27:17 +0000

Is React a Framework ?

As per the landing page of React , it is a JavaScript library to build user interfaces. Its not a framework, but a library.
Angular, Vue, Next.js, Gatsby, Redwood.js etc are examples for frameworks. A framework includes resources that a large-scale application might need : creating forms, running automated tests, making network requests etc.
Whereas React itself does not include many of these functionalities. Core react is used only to build User Interfaces. In order to build complete React applications, you will need to choose the required packages and tools on your own. For example, for forms and validation React Hook Form or Formik can be used and for testing React Testing Library or Jest can be used.

Features of React

Component Based

In React, a web page can be divided to encapsulated blocks of code called components. These components can be composed to create complex UIs. Component logic is written in JavaScript instead of templates in React. Required data can be passed to the web app via these components easily, which renders accordingly on change.

Declarative

Simple views can be designed for each state in your application and data can be passed into it. React will efficiently update and render just the right components when your data changes.

Learn Once, Write Anywhere

React can be used along with multiple technology stacks. Thus you can develop new features in React without rewriting existing code. React can also render on the server using Node and it can power mobile apps using React Native.

Add React to a Website

React can be added in small parts to your website and then can be gradually expand its presence

Step 1 : Add a DOM Container to the HTML

Open the HTML page you want to edit and Add an empty

tag to mark the spot where you want to display something with React.

A unique id HTML attribute is given to div which will allow us to find it from the JavaScript code later and display a React component inside of it. You can place a “container”
<div> like this anywhere inside the <body> tag. You may have as many independent DOM containers on one page as you need. They are usually empty. React will replace any existing content inside DOM containers.

<!--… existing HTML … --> 
<div id='name-container'></div>
<!-- … existing HTML … -->

Step 2 : Add the Script Tags

You will have to add three <script> tags to the HTML page right before the closing </body> tag. The first two tags load React. The third one will load your component code.

<!-- … other HTML … -->
<script 
  src="https://unpkg.com/react@17/umd/react.development.js" 
  crossorigin
></script>
<script 
  src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
  crossorigin
></script>
<!-- Load our React component. -->
<script src="name_component.js"></script>

Step 3: Create a React Component

Create a file called name_container.js. This code defines a React component called NameContainer.

‘use strict’;
const e = React.createElement;

class NameContainer extends React.Component {
  render() {
    return e(‘div’,null,’Joe’);
  }
}
const domContainer = document.querySelector(‘#name-container’);
ReactDOM.render(e(NameContainer), domContainer);

React is used to create components. Create Element function of React takes Three arguments

Type : div, h1, p, span etc
[props] : class, id, onClck etc
[…children] : string, another DOM element

ReactDOM is used to render components in DOM. Render function of ReactDOM takes two arguments

Element to Render
Dom Container into which it should be rendered

Step 4: Try React with JSX ( optional )

In the previous example we only relied on features that are natively supported by browsers. This is why we used a JavaScript function call to tell React what to display: However, React also offers an option to use JSX instead. While JSX is completely optional, many people find it helpful for writing UI code. Add this <script> tag to your page and you can use JSX in any <script> tag by adding type=”text/babel”

<script src=”https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src=”name_component.js” type=”text/babel”></script>

name_container.js can be modified accordingly

‘use strict’;
const e = React.createElement;
class NameContainer extends React.Component {
  render() {
    return <div>Joe</div>
  }
}
const domContainer = document.querySelector(‘#name-container’);
ReactDOM.render(e(NameContainer), domContainer);

Recommended Toolchains

The React team primarily recommends these solutions:

Create React App : If you’re learning React or creating a new single-page app
Next.js : If you’re building a server-rendered website with Node.js
Gatsby : If you’re building a static content-oriented website
Others : Neutrino, Nx, Parcel, Razzle

Create React App is a comfortable environment for learning React. It is the best way to start building a new single-page application in React. You can use the latest JavaScript features and it provides a nice developer experience and optimizes your app for production.
You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine
To create a project, run:

npx create-react-app my-app
cd my-app
npm start

Create React App doesn’t handle backend logic or databases. it just creates a frontend build pipeline which you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them. When you’re ready to deploy to production, running npm run build will create an optimized build of your app.

Check out my blog on JavaScript : 4 JavaScript tips for shorter code

4 JavaScript tips for shorter code

Abhinav Vp — Thu, 21 Oct 2021 15:43:38 +0000

There are plenty of tips which can be followed to make the JavaScript code shorter as well less complicated. I will share four of such tips which have reduced the effort and development time for me a lot while coding.

1. Short Circuiting

This can be used when you’ll have to use a simple if condition.

if( x == 0 ){
  foo()
}

Short circuiting can be achieved by using && operator. Code after && won’t be executed if the condition before && evaluates to false.

x == 0 && foo()

This can be chained to replace multiple if statements

x == 0 && y == 0 && foo()

2. Check if objects exist using ? operator

This is really helpful if you are dealing with scenarios like API calls or with objects of which you aren’t certain whether it or its keys are initialised.
Consider an object studentObject with a key ‘name’ with value an object with key ‘firstName’. Directly accessing the key value using ‘studentObject.name.firstName’ might throw error . One way to evaluate whether the key exists is using nested if conditions.

const studentObject = {
  name : {
    firstName : 'Joe'
  }
}
if(studentObject.name){
  if(studentObject.name.firstName){
    console.log('student First name exists')
  }
}

This can be made shorter using ‘?’ operator. If studentObject.name do not exist it will evaluate to false.

const studentObject = {
  name : {
    firstName : 'Joe'
  }
}
if(studentObject.name?.firstName){
  console.log('student First name exists')
}

Edit : Node has only limited support for optional chaining operator.

3. Using Nullish coalescing operator (??)

Ternary operator already makes the code short as compared to if else statement. It’s handy if the block of code to be executed is small.

const foo = () => {
  return studentObject.name?.firstName ? 
    studentObject.name.firstName : 
    'firstName do not exist'
}
console.log(foo())

In cases where you have to return the operand to the left of ‘?’, you can use the ‘??’ operator to make the code even shorter.

const foo = () => {
  return studentObject.name?.firstName ?? 
  'firstName do not exist'
}
console.log(foo())

4. Terminating the function instead of if else nesting

consider the below function which checks the value of ‘x’

const foo = () => {
  if(x<1){
    return 'x is less than 1'
  }else{
    if(x > 1){
      return 'x is greater than 1'
    }else{
      return 'x is equal to 1'
    }
  }
}

This if else nesting can be made less complicated by removing else conditions, as a return statement will stop code execution and return the function.

const foo = () => {
  if(x<1){
    return 'less than 1'
  }
  if(x>1){
    return 'x is greater than 1'
  }
  return 'x is equal to 1'
}

A good code need not be short

Preference must be given for readability over making the code shorter. In some cases debugging the code would be quite hard especially if the code is maintained by multiple developers.
Short-circuiting is a feature of expression evaluation. In this case, you're using that feature to actually execute code; in other words, a side-effect of the expression is that it executes code.
There are two problems with this idea:

it encourages writing even more complex expressions simply for their side-effects, eventually becoming a maintenance nightmare.
it's doesn't execute the actual code any faster than the explicit (if) form. A good rule of thumb: explicit > implicit

Using clamp() for responsiveness

Abhinav Vp — Thu, 23 Sep 2021 15:54:25 +0000

Clamp() is one of the most useful yet underrated functions in CSS to ensure responsiveness in web design.
Web pages can be viewed from multiple platforms, and you will have to ensure that the design won't break in any of the viewports.

Consider an id 'text' with font-size as 3rem.

#text{
  font-size:3rem;
}

The problem is that irrespective of the viewport, font size remains constant. One way to deal with this is to replace rem with % or vw so that the font size becomes relative to the viewport.

#text{
  font-size:7vw;
}

The issue that one could face with the above method is that there are no minimum and maximum limits. The text could get incredibly bigger or smaller depending upon the viewport.
This is where Clamp() comes to the rescue.

#text {
  font-size:clamp(2rem,7vw,4rem);
}

Clamp() is a combination of min() and max(). It takes 3 arguments: the lower limit, the variable, and the upper limit. It clamps a value between the provided lower and upper limit. This ensures that the width remains relative to the viewport at the same time with a lower and upper bound.