Forem: Code of Relevancy

Take your notifications to the next level with Laravel Notify

Code of Relevancy — Mon, 08 May 2023 13:05:06 +0000

Life can get busy sometimes and it's easy to let our passions fall to the wayside. I know how important it is to regularly publish articles and stay engaged with the community. With other responsibilities, it can be challenging to find the time to write.

It's been a month since I last published an article on DEV Community, but I'm excited to be back and sharing my thoughts with the community once again. Thank you for your patience and continued support.

So, without further ado, let's dive right in!!!

Flash notifications are a useful way of providing feedback to users after they perform an action on a website or application. These notifications typically appear for a short period of time before disappearing and can be used to inform the user of the status of the action they have just performed. We will explore how to use the Laravel-Notify package to create flash notifications in a Laravel application.

Installation

You can install the package using composer

composer require mckenziearts/laravel-notify

Then add the service provider to config/app.php. In Laravel versions 5.5 and beyond, this step can be skipped if package auto-discovery is enabled.

'providers' => [
    ...
    Mckenziearts\Notify\LaravelNotifyServiceProvider::class
    ...
];

You can publish the configuration file and assets by running:

php artisan vendor:publish --provider="Mckenziearts\Notify\LaravelNotifyServiceProvider"

Now that we have published a few new files to our application we need to reload them with the following command:

composer dump-autoload

Usage

Add styles links with @notifyCss
Add scripts links with @notifyJs
use notify() helper function inside your controller to set a toast notification for info, success, warning or error
Include notify partial to your master layout @include('notify::components.notify')

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Laravel Notify -->
    @notifyCss

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    <!-- Laravel Notify -->
    @include('notify::components.notify')
    @notifyJs
</body>

</html>

By way of illustration

Within your controllers, before you perform a redirect call the notify method with a message.

notify()->success(__('Role has been changed.'));

Type of notifications

Let's take a look at the different types of notifications that Laravel Notify can display. There are a total of five types of notifications, each with its unique features and use cases.

First up is the toast notification, which is also the default notification for Laravel Notify. With this type of notification, you can display a message and an optional custom title. To show you what I mean:

notify()->success('Welcome to Laravel Notify ⚡️') or notify()->success('Welcome to Laravel Notify ⚡️', 'My custom title')

The second type of notification is the connectify notification, which is perfect for displaying basic messages with a specified level (e.g., success, warning, error). To show you what I mean:

connectify('success', 'Connection Found', 'Success Message Here')

Next, we have the drakify (😎) notification which displays an alert without any additional message or title. This notification is perfect for drawing the user's attention to a specific event or condition. To show you what I mean:

drakify('success') // for success alert
drakify('error') // for error alert

The fourth type of notification is the smilify notification, which displays a simple custom toast notification using the smiley (😊) emoticon. This notification is perfect for conveying a positive message or a sense of happiness. To show you what I mean:

smilify('success', 'You are successfully reconnected')

Finally, we have the emotify notification, which displays a simple custom toast notification using a vector emoticon. This notification is perfect for conveying a specific emotion or feeling. To show you what I mean:

emotify('success', 'You are awesome, your data was successfully created')

Preset Notifications

The package also allows you to define preset notifications in your config file. This is particularly useful if you have a specific notification that you use frequently across multiple areas of your system. Defining the notification as a preset allows you to maintain it in one place, making it easier to manage.

To use a preset notification in your code, simply call the notify()->preset() method with the name of the preset notification you have defined in your config file. To show you what I mean:

notify()->preset('common-notification')

You can also override any of the preset values that are set in the config file by passing in an array of key-value pairs with the attributes you want to modify. This can be helpful if you need to customize a specific aspect of a preset notification without having to create an entirely new one. To show you what I mean:

notify()->preset('common-notification', ['title' => 'This is the overridden title'])

In this example we are overriding the title of the common-notification preset with a custom title. This approach allows you to quickly and easily modify notifications without having to rewrite the entire notification code block.

Config

The Laravel Notify package provides a configuration file that allows you to customize various aspects of the package's behavior. The configuration file can be found at config/notify.php after you publish the provider element.

One of the cool features that you can configure in the notify.php file is the theme of the notifications. You can activate the dark mode by updating the theme config to 'dark' or by adding a global variable NOTIFY_THEME on your .env file.

'theme' => env('NOTIFY_THEME', 'dark'),

You can define preset notifications in the config file. This is useful if you have notifications that are frequently used across your application. The structure for defining preset notifications is straightforward and follows this example:

'preset-messages' => [
    'user-updated' => [
        'message' => 'The user has been updated successfully.',
        'type'    => 'success',
        'model'   => 'connect',
        'title'   => 'User Updated',
    ],
    'user-deleted' => [
        'message' => 'The user has been deleted successfully.',
        'type'    => 'success',
        'model'   => 'connect',
        'title'   => 'User Deleted',
    ],
],

The example above shows the config for two preset notifications: 'user-updated' and 'user-deleted'.

To wrap things up

Laravel Notify is a powerful package for displaying notifications in your Laravel applications. It offers a variety of notification types and customization options that make it easy to create notifications that fit your specific needs.

If you're looking to display simple toast notifications or more complex custom notifications, Laravel Notify has got you covered. The package also offers the ability to define preset notifications in the configuration file which can save you time and help you maintain consistency throughout your application.

Laravel Notify is a great package that can help you create effective and visually appealing notifications that enhance the user experience of your application. If you haven't already, give Laravel Notify a try and see how it can benefit your application.

Laravel package:

https://github.com/mckenziearts/laravel-notify

❤ Motivation:

🍀Support

Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!

YouTube
Discord
GitHub

What is prop drilling in React?

Code of Relevancy — Wed, 05 Apr 2023 05:28:18 +0000

Yo ho, my hearties!!!

Prop drilling is the process of passing down data or state through multiple layers of a component hierarchy. By the way, it refers to the practice of passing data from a parent component to its children and then from the children to their own children and so on, until the data reaches the desired component that needs it..

Prop drilling can be a necessary and effective way to manage application state, it can also become a problem when the hierarchy of components becomes too deep or complex. This can lead to several issues. Let's say, code duplication, increased cognitive load and decreased maintainability..

With this article, we will discuss what are props, what prop drilling is and how it can impact your application. We will also explore some best practices for fixing prop drilling in your codebase..

The horizon's embrace, with the wind at our back and the sun on our face. Let's set sail into the depths of prop drilling..

What are Props in React?

Props (aka "Properties") are inputs to components. They are single values or objects containing a set of values that are passed to components on creation similar to HTML tag attributes. Here, the data is passed down from a parent component to a child component.

Props are read-only, meaning that they cannot be modified by the component itself. Used to customize the behavior or appearance of a component and they are passed down through the component tree in a unidirectional flow.

To show you what I mean..

function Snake(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function DeadliestSnakes() {
  return (
    <div>
      <Snake name="Inland Taipan" />
      <Snake name="King Cobra" />
      <Snake name="Russell's Viper" />
      <Snake name="Black Mamba" />
    </div>
  );
}

Let's Understand the Prop Drilling

Prop drilling occurs when a parent component passes data down to its children and then those children pass the same data down to their own children. This process can continue indefinitely. At the end, it's a long chain of component dependencies that can be difficult to manage and maintain.

Let's say you have a component that displays a list of blog posts. Each blog post has a title, date, author and content. In order to display this information, the parent component would need to pass down all of this data to its child components and those child components would need to pass it down to their own children and so on..

As you can imagine, this process can become quite complex and unwieldy, especially as your application grows in size and complexity..

The Problems with Prop Drilling

Prop drilling can lead to several issues in your codebase, let's bring it on surface:

Code Duplication

When data needs to be passed down through multiple layers of components, it can result in code duplication. This occurs when the same data is passed down to multiple child components, even though they may not need all of it.

This can lead to bloated and redundant code which can be difficult to maintain and debug..

Increased Cognitive Load

Prop drilling can also increase the cognitive load on developers who need to understand and navigate the component hierarchy. As the number of components and layers increases, it can become difficult to keep track of which components are passing which data and where that data is being used.

This can make it more difficult to identify and fix bugs, as well as to make changes or updates to the codebase.

Decreased Maintainability

Prop drilling can lead to decreased maintainability over time. As your application grows in size and complexity, it can become more difficult to add new features or make changes to existing ones.

At the end, a codebase that is difficult to work with, which can lead to decreased productivity and increased frustration for developers.

A Hunt of Prop Drilling for Cleaner React Code

There are several ways that you can follow to fix prop drilling in your codebase. Let's bring it on surface:

Use a State Management Library

One of the most effective ways to fix prop drilling is to use a state management library, such as Redux or MobX. These libraries provide a centralized store for managing application state which can help to eliminate the need for prop drilling.

Instead of passing data down through multiple layers of components, you can simply connect each component to the store, and access the data that you need directly..

You could refactor your code to use Redux:

Define a Redux store that holds the list of snakes:

import { createStore } from "redux";

const initialState = {
  snakes: [],
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_SNAKE":
      return {
        ...state,
        snakes: [...state.snakes, action.payload],
      };

    case "DELETE_SNAKE":
      return {
        ...state,
        snakes: state.snakes.filter((snake) => snake.id !== action.payload.id),
      };

    case "TRACK_SNAKE":
      return {
        ...state,
        snakes: state.snakes.map((snake) => {
          if (snake.id === action.payload.id) {
            return { ...snake, tracked: true };
          } else {
            return snake;
          }
        }),
      };
    default:
      return state;
  }
}

const store = createStore(rootReducer);

Connect your components to the Redux store using the connect() function:

import { connect } from "react-redux";

function SnakeList(props) {
  const { snakes } = props;

  return (
    <ul>
      {snakes.map((snake) => (
        <Snake key={snake.id} snake={snake} />
      ))}
    </ul>
  );
}

function mapStateToProps(state) {
  return {
    snakes: state.snakes,
  };
}

export default connect(mapStateToProps)(SnakeList);

Dispatch Redux actions to add, delete or track snakes:

function Snake({ snake, deleteSnake, trackSnake }) {

  const onTrackSnake = (id) => () => {
    trackSnake(id);
  };

  const onDeleteSnake = (id) => () => {
    deleteSnake(id);
  };

  return (
    <li>
      <input
        type="checkbox"
        checked={snake.tracked}
        onChange={onTrackSnake(snake.id)}
      />
      {snake.title} ({snake.tracked ? "Tracked" : "Not Tracked"})
      <button onClick={onDeleteSnake(snake.id)}>Delete</button>
    </li>
  );
}

function mapDispatchToProps(dispatch) {
  return {
    deleteSnake: (id) => dispatch({ type: "DELETE_SNAKE", payload: { id } }),
    trackSnake: (id) => dispatch({ type: "TRACK_SNAKE", payload: { id } }),
  };
}

export default connect(null, mapDispatchToProps)(Snake);

Implement Context API

If you don't want to use a full fledged state management library, you can also consider using the Context API in React. This API provides a way to share data between components without the need for prop drilling.

Using the Context API, you can create a context object that holds the data that you need to share. You can then pass this context object down to the child components that need it, without having to pass it down through..

You could use the Context API to share a snake object between components:

Create a snake context object:

import { createContext } from 'react';

export const SnakeContext = createContext({
  name: "Black Mamba",
  fangs: "6.5 mm",
  speed: "12.5 miles per hour",
  color: "#964B00", // dark brown
});

Wrap your components in a provider component that provides the snake context:

function Jungle(props) {
  const snake = {
    name: "Black Mamba",
    fangs: "6.5 mm",
    speed: "12.5 miles per hour",
    color: "#964B00", // dark brown
  };

  return (
    <SnakeContext.Provider value={snake}>
      <Header />
      <Main />
    </SnakeContext.Provider>
  );
}

Use the useContext() hook to access the snake object in your child components:

import { useContext } from "react";

function Header() {
  const { color } = useContext(SnakeContext);

  return (
    <header style={{ backgroundColor: color }}>
      <h1>Snake</h1>
    </header>
  );
}

function Main() {
  const { name, fangs, speed } = useContext(SnakeContext);

  return (
    <main>
      <p>
        Name: <span>{name}</span>
      </p>
      <p>
        Venom Fangs: <span>{fangs}</span>
      </p>
      <p>
        Speed: <span>{speed}</span>
      </p>
    </main>
  );
}

Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below!!! This is why context is often used in combination with state.

Use cases for context:

Theming
Current account
Managing state

If some information is needed by distant components in different parts of the tree, it's a good indication that context will help you..

In the vast ocean of React development, prop drilling can be a stormy challenge to navigate through.. But my fellow captains, fear not! With the right tools and techniques, you can hoist the sails of clean and efficient code and steer your React application towards smoother waters⛵️🌊

Happy coding and smooth sailing on your React adventures!!! 🚀🌟🌈🏴‍☠️

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

You Need to Know About Pure Functions & Impure Functions in JavaScript

Code of Relevancy — Tue, 28 Mar 2023 05:51:27 +0000

With this article, we will explore what pure/impure functions are and their differences in JavaScript. Let's dive in..

What is a function?

In the ocean of JavaScript, functions are an essential building block for creating complex and interactive apps.

One of the most common uses of functions is mapping, where they take input values and produce corresponding output values. This allows for the transformation and manipulation of data, which is critical in creating dynamic user experiences.

What is a pure function?

A pure function is a function where the return value is only determined by its arguments without any side effects. Let's say, if you call a function with the same arguments n number of times and n number of places in the application then it will always return the same value. Pure functions do not modify any external state, such as variables or objects outside the function. They only use the input arguments to perform calculations and return the result.

To show you what I mean..

Below function takes two numbers, a and b, as input arguments and returns their sum. This function is a pure function because it always produces the same output for the same input and does not have any side effects.

function add(a, b) {
  return a + b;
}

What is an impure function?

An impure function is a type of function, given the same input, may produce different output at different times. This is because impure functions can rely on external factors such as changes in global variables or other functions, that affect their behavior and output.

Below function modifies the external variable counter by increasing its value by one each time it is called. This means that it has side effects and is not a pure function.

let counter = 0;

function increment() {
  counter++;
  return counter;
}

Why are pure functions useful?

Pure functions have several advantages over impure functions:

1) Predictability
Because pure functions always produce the same output for a given input, they are predictable and easy to reason about. Its easier to test and debug and reduces the likelihood of unexpected behavior in your code.

2) Reusability
Pure functions are modular and self contained, meaning that they can be reused in different parts of your codebase without affecting other parts. This can save time and reduce the amount of code you need to write.

3) Parallelization
Because pure functions do not modify external state, they can be executed in parallel without worrying about race conditions or other synchronization issues. This can lead to faster and more efficient code.

How to create pure functions in JavaScript?

1) Use only input arguments
Pure functions should use only their input arguments to perform calculations and return the result. They should not modify any external state or rely on external variables.

2) Avoid side effects
Pure functions should not have any side effects, such as modifying external variables or objects. They should only return a value based on the input arguments.

3) Avoid global state
Pure functions should avoid using global state, such as global variables or objects. This can make your code less predictable and harder to debug.

4) Return a value
Pure functions should always return a value based on the input arguments. They should not rely on external variables or objects to produce their output.

Pure vs Impure Functions

Inbuilt pure functions in JavaScript:

Math.abs(): Returns the absolute value of a number.

Math.ceil(): Returns the smallest integer greater than or equal to a given number.

Math.floor(): Returns the largest integer less than or equal to a given number.

Math.max(): Returns the maximum value from a set of numbers.

Math.min(): Returns the minimum value from a set of numbers.

Math.round(): Returns the nearest integer to a given number.

Math.sqrt(): Returns the square root of a given number.

parseInt(): Converts a string to an integer.

parseFloat(): Converts a string to a floating point number.

JSON.parse(): Converts a JSON string to a JavaScript object.

Array.prototype.concat(): Returns a new array that contains the elements of the original array plus any additional elements that were passed in as arguments.

Array.prototype.slice(): Returns a new array that contains a portion of the original array, specified by a start and end index.

Array.prototype.map(): Returns a new array that is the result of calling a provided function on each element of the original array.

Array.prototype.filter(): Returns a new array that contains only the elements of the original array that satisfy a provided testing function.

Array.prototype.reduce(): Returns a single value that is the result of applying a provided function to each element of the array.

String.prototype.toUpperCase(): Returns a new string that contains the original string in all uppercase letters.

String.prototype.toLowerCase(): Returns a new string that contains the original string in all lowercase letters.

Inbuilt impure functions in JavaScript:

Math.random(): Returns a random number between 0 and 1. This function relies on external state which is the current state of the random number generator and its output changes every time it is called.

Date.now(): Returns the current timestamp which is the number of milliseconds that have elapsed since January 1, 1970. This function relies on external state which is the current time and its output changes every time it is called.

console.log(): Writes a message to the console. It does not return a value but it has a side effect of logging information to the console.

setTimeout(): Executes a function after a specified delay which is specified in milliseconds. This function has a side effect of scheduling a function to be executed in the future.

setInterval(): Executes a function at a specified interval which is specified in milliseconds. This function has a side effect of scheduling a function to be executed repeatedly at a fixed interval.

document.write(): Writes HTML content to the document. It does not return a value but it has a side effect of modifying the document.

Math.floor(Math.random() * (max - min + 1) + min): Returns a random integer between a given range. This function relies on external state which is the current state of the random number generator and its output changes every time it is called.

Math.pow(): Returns the result of raising a number to a given power. While this function is mathematically pure, it may result in floating point rounding errors that can make its output impure.

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

What is Strict Mode in React?

Code of Relevancy — Fri, 24 Mar 2023 16:05:31 +0000

Hello React developers, you've probably heard of strict mode. But what the hell is it, exactly? In short term, React.StrictMode is a useful component for highlighting potential problems in an application. Just like <Fragment>, <StrictMode> does not render any extra DOM elements.. With this article, we'll dive into the details of what strict mode is, how it works and why you should consider using it in your applications..

What is Strict Mode in React?

Strict mode is a set of development tools that help you catch potential problems in your code before they become actual bugs. When you enable strict mode in your React application, you're essentially telling React to turn on a bunch of extra checks👀 and warnings that are designed to help you write better code. These checks and warnings can catch things like:

Components with side effects
Deprecated or unsafe lifecycle methods
Unsafe use of certain built in functions
Duplicate keys in lists

Enabling Strict Mode

Enabling strict mode in your React application is actually very easy. You can do it by adding a single line of code to your main index.js file. Let's see:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Enabling strict mode for a part of the app

You can also enable Strict Mode for any part of your application:

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

In this instance, Strict Mode checks will not run against the Header and Footer components. But, they will run on Sidebar and Content, as well as all of the components inside them, no matter how deep it is..

Strict mode affects only the development environment

It's important to note that strict mode has no effect on the production build of your React application. This means that any checks or warnings that are enabled by strict mode will not be present in the final version of your application that users see. As we have seen, strict mode turns on extra checks and warnings, it can potentially slow down your development environment..

Strict mode can help you catch subtle bugs

Sometimes bugs in React applications can be difficult to track down, especially if they're caused by subtle issues like race conditions or incorrect assumptions about component state. By enabling strict mode and taking advantage of the extra checks and warnings it provides, you may be able to catch these bugs before they cause serious problems..

Strict mode can help you stay up-to-date with best practices

React is a rapidly evolving framework and best practices can change over time. By enabling strict mode and paying attention to the warnings and suggestions it provides, you can ensure that your React code is up-to-date and following current best practices. Such as using the key prop when rendering lists or avoiding side effects in render()..

Highlighting potential problems early

Strict mode can catch issues in your code that may cause problems in coming future, before they become serious problems. Let's say, it can detect and warn about deprecated lifecycle methods as well as access to findDOMNode() which is no longer recommended..

Preventing common mistakes

By enabling strict mode, you can avoid common mistakes that may not be immediately obvious, such as modifying the state directly instead of using setState() or using undeclared variables.

Identifying Unsafe Lifecycles

React Strict Mode can help identify the use of unsafe lifecycle methods in your components. For instance, it can warn you about the use of the componentWillUpdate and componentWillReceiveProps methods which are both considered unsafe and will be removed in future versions of React..

Let's say you have a component that uses componentWillReceiveProps() to update its state based on incoming props:

class BlackMamba extends React.Component {
  constructor(props) {
    super(props);
    this.state = { venom: props.venom };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ venom: nextProps.venom });
  }

  render() {
    return <div>{this.state.venom}</div>;
  }
}

With regular mode, this component would work as expected, but in React.StrictMode, you would see a warning in the console:

Warning: BlackMamba uses componentWillReceiveProps, which is considered an unsafe lifecycle method. Instead, use static getDerivedStateFromProps.

Warning About Legacy String ref API Usage

Strict Mode can also warn you about the use of the legacy string ref API, which is considered deprecated. But, you should use the createRef API, which is safer and easier to use..

Let's say, you have a component that uses a string ref like this:

import { Component } from "react";
import { createRoot } from "react-dom/client";

class BlackMamba extends Component {
  componentDidMount() {
    this.refs.venom.focus();
  }

  render() {
    return (
      <>
        <h1>Black Mamba</h1>
        <input ref="venom" />
      </>
    );
  }
}

const root = createRoot(document.getElementById("root"));

root.render(<BlackMamba />);

Legacy string ref API is considered deprecated, still you'll not see any errors in console.

When you enable React.StrictMode in your app like this:

import { StrictMode, Component } from "react";
import { createRoot } from "react-dom/client";

class BlackMamba extends Component {
  componentDidMount() {
    this.refs.venom.focus();
  }

  render() {
    return (
      <>
        <h1>Black Mamba</h1>
        <input ref="venom" />
      </>
    );
  }
}

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <BlackMamba />
  </StrictMode>
);

You'll see a warning in the console that looks like this:

Warning: A string ref, "venom", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

Let's fix it with createRef API:

import { StrictMode, Component, createRef } from "react";
import { createRoot } from "react-dom/client";

class BlackMamba extends Component {
  constructor(props) {
    super(props);

    this.venom = createRef();
  }

  componentDidMount() {
    this.venom.current.focus();
  }

  render() {
    return (
      <>
        <h1>Black Mamba</h1>
        <input ref={this.venom} />
      </>
    );
  }
}

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <BlackMamba />
  </StrictMode>
);

Bravo, it's fixed :)

Detecting Legacy Context API

The legacy Context API is deprecated in React and has been replaced with the new Context API. React Strict Mode can help you detect any usage of the legacy Context API and encourage you to switch to the new API

If you're not already using strict mode, it's definitely worth considering!!!

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

Unexpected Moments of JavaScript That Will Challenge Your Understanding of the Language

Code of Relevancy — Sat, 18 Mar 2023 09:32:37 +0000

As one of the most popular programming languages in the world, JavaScript is widely used for building dynamic and interactive websites, web applications and even desktop and mobile applications. JavaScript is a gateway to other web technologies, because of its widespread use and compatibility with various platforms. It has become a foundational language in modern web development. It is also a complex language with many unexpected moments that can leave even the most experienced developers scratching their heads.

In this article, we'll see various unexpected JavaScript moments that can confuse, test your limits and frustrate you. It will also help you to change the way you code.

Are you ready to make your brain explode🤯? If so, let's enter the jungle..

1️⃣

2 == [2] // true

== operator in JS performs type coercion which means it tries to convert the values being compared to a common data type before making the comparison.

In this instance, the number 2 is converted to a string and the array [2] is converted to a string as well. Resulting in both values being 2. That's why, the comparison evaluates to true.

It's generally recommended to use the strict equality operator === instead of == to avoid unexpected results due to type coercion..

Explore more:

'123' == 123        // true 
'foo' == NaN        // false
undefined == null   // true 
NaN === NaN         // false
NaN == NaN          // false
0 == null           // false

2️⃣

[] == ![] // true

Comparing an empty array [] with a boolean value created by negating (using the ! operator) a non empty array []. The result of this comparison is true, which might seem unexpected at first glance..

In JS, every value can be either true or false in a boolean context. An empty array is a truthy value, which means it's considered true in a boolean context. When we apply the ! operator to it, it's converted to false.

On the other side, the boolean value created by negating a non empty array is false. When we compare an empty array (truthy) with a false value (falsy) using the == operator, JS performs type constraint which means it tries to convert the values to a common type before comparing them. So, the empty array is converted to false which results in both sides being false. At the end, the comparison returns true.

Explore more:

['a', 'b'] !== ['a', 'b']   // true
['a', 'b'] == ['a', 'b']    // false
[1, 2] + [3, 4]             // "1,23,4"

3️⃣

null == undefined // true

The double equals == operator is used to compare two values for equality, while ignoring their data type. When comparing the values null and undefined using the double equals operator they are considered equal and the result of the comparison will be true. This is because both null and undefined represent a lack of a value and are so equivalent to each other in this context.

With strict equality operator:

null === undefined // false

4️⃣

typeof NaN   // number
typeof null  // object

In JS, typeof is an operator used to determine the type of a value or variable.

NaN stands for Not a Number and is a special value in JS that represents an undefined or unrepresentable numerical value.

When you use typeof with NaN, it will return number. This might seem strange but it's because NaN is technically a numeric data type in JS even though it represents something that isn't actually a number.

When typeof is applied to null, it returns the string object. This is because null is considered to be a special value that represents an empty object reference. null is not an object itself but rather a primitive value. This is considered to be a quirk or oddity in the language design of JS.

Explore more:

typeof function(){}     // "function"
null instanceof Object  // false

5️⃣

true == "1"  // true
false == "0" // true

JS converts the string 1 to the boolean value true and string 0 to false because any non empty string is considered truthy and on other side falsy. So, the comparison becomes true == true which is true and false == false which is true.

Explore more:

1 + true      // 2
1 - true      // 0
'' == false   // true
0 == false    // true
true + false  // 1

6️⃣

"1" + 1    // "11"
2 + "2"    // "22"
"5" - 3    // 2

When you use the + operator with a string and a number, the number is converted to a string and concatenated to the string.

If the string can be parsed as a number, it will subtract the number from the string.

So,
"1" + 1 becomes the string "11"
2 + "2" becomes the string "22"
"5" - 3 becomes the number 2

Explore more:

+"1"                  // 1
-"1"                  // -1

+true                 // 1
-true                 // -1

+false                // 0
-false                // -0

+null                 // 0
+undefined            // NaN

1 / "2"               // 0.5
"2" / 1               // 2

1 / 0                 // Infinity
-1 / 0                // -Infinity

3 * "abc"             // NaN

true > false          // true  

undefined + 1         // NaN
undefined - 1         // NaN
undefined - undefined // NaN
undefined + undefined // NaN

null + 1              // 1
null - 1              // -1
null - null           // 0
null + null           // 0

Infinity + 1          // Infinity
Infinity - 1          // Infinity
Infinity - Infinity   // NaN
Infinity + Infinity   // Infinity
Infinity / Infinity   // NaN

7️⃣

"b" + "a" + + "a" + "a" // "baNaNa"

It concatenates the string b, the string a, the string resulting from the expression +"a" and the string a.

+"a" force the string a into a number which evaluates to NaN (Not a Number) because a is not a valid number.

When we concatenate b, a, NaN (represented as an empty string) and a, we get the string baNaNa.

8️⃣

!{}       // false
{} == !{} // false
{} == {}  // false

When, we are comparing an empty object {} to a negated empty object !{}. The exclamation mark ! is a logical operator that negates the value of the object so !{} returns false since an object is considered truthy in JS. We are actually comparing {} to false which results in a false value since they are not equal in value or data type.

In the last expression, we are comparing two empty objects {}. Despite the fact that they may appear to be identical, they are two separate objects with distinct references in memory so they are not equal in value or data type. In the end the comparison also results in a false value.

When you use the plus operator + between two objects wrapped in curly braces {}, it tries to concatenate the objects as strings.

Explore more:

{} + [] === ""  // false
!!{}            // true 
!![]            // true 
[] + []         // ""
[] + {}         // "[object Object]"
{} + []         // "[object Object]"
{} + {}         // "[object Object][object Object]"
[] == false     // true
!!''            // false
!!0             // false
!!null          // false
!!undefined     // false

9️⃣

7 > 6 > 5 // false

First, 7 > 6 evaluates to true because 7 is greater than 6.
Next, true > 5 is evaluated. In JS, true is force into the number 1 and false is force into 0. So 1 > 5 is false, since 1 is not greater than 5.

So at the end, 7 > 6 > 5 is equivalent to true > 5 which is false.

Explore more:

5 < 6 < 7  // true
0 > null   // false

1️⃣0️⃣

Math.max() // -Infinity
Math.min() // Infinity

Math.max() & Math.min() are functions that can be used to find the largest and smallest values in a set of numbers respectively.

When called without any arguments, Math.max() returns -Infinity which represents the smallest possible number in JS, on other side, Math.min() returns Infinity which represents the largest possible number in JS.

This behavior makes sense because if there are no numbers provided, there is no largest number to return for Math.max() and following same way, there is no smallest number to return for Math.min()

1️⃣1️⃣

parseInt('08')       // 8
parseInt('08', 10)   // 8 
parseInt('0x10')     // 16

parseInt('08') converts the string 08 into the integer number 8. If you were to write parseInt('08', 10), the function will still return 8.

The reason behind this is because the second parameter of parseInt function is the radix which specifies the numbering system to be used. Let's say: binary, octal, decimal, hexadecimal etc.. If the radix is not specified parseInt will try to detect the radix based on the string format. In above case, 08 is considered an octal number because it starts with 0 so it gets converted into 8 as a decimal number.

parseInt('0x10') converts the hexadecimal string 0x10 into the integer number 16. The radix is not specified either, but the prefix 0x indicates that the number should be treated as a hexadecimal number so it gets converted into 16 as a decimal number.

Explore more:

parseFloat('3.14.15')  // 3.14 
parseFloat('0.0')      // 0

1️⃣2️⃣

(function(x) { delete x; return x; })(1);   // 1

An anonymous function that takes an argument x. Inside the function it tries to delete the x variable which is not possible because x is a function argument and cannot be deleted. The function then returns the value of x.

When this function is called with the argument 1, the value of x inside the function is set to 1. In this case, the delete operation has no effect, the function simply returns the value of x which is 1

1️⃣3️⃣
@tohodo from the DEV Community had a great point to add to this article. Let's see..

for (var i = 0; i < 3; ++i) {
  setTimeout(() => console.log(i), 1000); // returns 3 three times
}

for (let i = 0; i < 3; ++i) {
  setTimeout(() => console.log(i), 1000); // returns 0 1 2
}

This is because var creates a single binding at the function scope, so after a one-second timeout the loop has already run its course, hence you get 3 three times. By using let you bind the variable at the block scope (loop), so it returns the values you expected since i refers to the value at that loop iteration.

Thanks to @tohodo for sharing this insight.

Great job exploring and understanding these JavaScript concepts!!! This knowledge will definitely help you in interviews and enable you to assess the skills of potential candidates as an interviewer. Keep up the good work and continue learning something Ctrl+N

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti

Code of Relevancy — Mon, 13 Mar 2023 14:44:37 +0000

Welcome to the Island of Relevancy.

Tic Tac Toe is a classic game that has been enjoyed by people for generations. It's a simple game that can be played anywhere, anytime with just a pen and paper. But with modern technology we can take this game to the next level. In this video, we'll explore how you can build a Tic Tac Toe game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti.

To create the game board, we'll use HTML and CSS. We'll create a 3x3 grid of squares that players can click on to place their symbols. We'll also use Tailwind CSS to style the board and make it responsive.

To make the board interactive, we'll use JavaScript to handle player moves and game logic. When a player clicks on a square, we'll check if the square is empty. If it is, we'll place the current player's symbol in the square and check if they have won. If there's no winner yet, we'll switch to the other player's turn.

To make the game more personalized, we'll add the ability for players to upload their own avatars. We'll use the HTML5 file input tag to allow players to select an image from their local machine. We'll then use JavaScript to display the selected image as the player's avatar.

When a player wins, we'll celebrate their victory with confetti animations, an animated Tic Tac Toe trophy over the winning player's avatar and a highlight of the three squares that make up the winning line. We'll use the Canvas Confetti library to create the confetti animations.

We'll keep track of each player's score using JavaScript and store it in the client side storage of the browser. This means that the scores will persist even if the player closes the page. We'll also provide a "Reset Score" button that players can use to reset the scores to zero.

To reset the game after a victory or a draw, we'll provide a "Reset Game" button that players can use to start a new game.

How it works?

The game starts with player X's turn and they can click on an empty square to place their symbol. After player X makes their move, it becomes player O's turn to place their symbol in an empty square. During each turn, the game shows a bounce animation on the current player's name to indicate whose turn it is. This makes it easy for players to keep track of whose turn it is and adds a fun element to the game.

By default, you'll see Davy Jones and Jack Sparrow representing X and O respectively. But if you want to personalize the game, you can upload your own avatars from your local machine. Note that the uploaded avatars won't persist after a page refresh since there's no database connectivity.

When a player wins, the game will display confetti animations over winner's avatar and at the top of the page to celebrate the victory. The player's avatar will also be adorned with an animated Tic Tac Toe trophy. And to help you see the winning move more clearly, the game will highlight the three squares that make up the line.

Each player has a score that increases by one after securing a victory. The scores are stored on the client side (in the local storage of your browser) so you can keep track of your progress even if you close the page. And if you ever want to start over, you can reset the scores to 0 for both players with a click of "Reset Score" button.

To reset the game after a victory, you can click the "Reset Game" button.

At the end of the game, players can download an image of the board with the winning trophy and the score. This image can be saved or shared with others.

In case the game ends in a draw, a popup message is displayed notifying you that the game ended in a draw.

📦 Demo:
https://t3-game.vercel.app

⚓️App

So what are you waiting for? Let's play some Tic Tac Toe!!!

Files:

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

Sail on a Sea of React Libraries That Will Make You the Captain of your Code

Code of Relevancy — Mon, 06 Mar 2023 14:17:44 +0000

Ahoy there, As a React developer it's always good to have a trusted library by your side. Just like the famous Pirates of the Caribbean, who had their trusty compasses and maps to navigate the seas. We have our libraries to navigate the world of React development. In this trip of sea of React libraries, we'll take a look at some of the most popular libraries you should know as a React developer.

Secure your ship for the storm ahead, let's batten down the hatches together..

I. Redux - The Treasure Chest

Just like a treasure chest that holds all the valuable treasure for the pirates, Redux holds all the state data in your React app. It's a predictable state container that helps you manage the state of your app in a structured way. Redux helps you maintain a single source of truth, making it easier to manage your app's state.

To integrate Redux, you can install it using npm or yarn and then create a store with the createStore function.

To show you what I mean..

II. Axios - The Parrot

Just like a parrot that can deliver messages between different pirates. Axios is a library that helps you send HTTP requests to a server. It's a promise based library that makes it easy to communicate with APIs and fetch data for your app. Axios can be used in both client side and server side apps.

Let's say you can use it to manage your app's state in a centralized store. Yo ho, yo ho! It's now easy to share data between components.

III. React Spring - The Cannon

Just like a cannon that provides firepower to a pirate ship, react-spring provides the firepower to your React components. It's a library that makes it easy to add animation and interactivity to your components. With react-spring you can create fluid and dynamic animations that bring your app to life.

Let's say you can use it to create smooth and dynamic animations and transitions.

IV. React Popper - The Telescope

Just like a telescope that helps a pirate see things from a distance, react-popper helps you position and align elements in your app. It's a library that makes it easy to create tooltips, dropdowns and popovers in your React app. Using it you can create dynamic and interactive UI elements that enhance your app's user experience.

V. SWR - The Spyglass

Just like a spyglass that helps a pirate see what's ahead, SWR helps you manage data fetching in your React app. It's a library that provides a caching mechanism for data fetching. With SWR, it's easy to manage and update data in real time and you can create fast and responsive apps that keep your users engaged.

Components will get a stream of data updates constantly and automatically. The UI will be always fast and reactive.

VI. Recharts - The Sextant

Just like a sextant that helps a pirate navigate the seas, Recharts helps you navigate your data in your React app. It's a library that provides a set of charting components that can be easily integrated into your app. With Recharts, you can create beautiful and dynamic charts that help you visualize and understand your data.

You can refer to the tutorial below to view Recharts in action:

VII. Tailwind CSS - The Ship's Flag

Just like a ship's flag that represents the identity and spirit of a pirate crew, TailwindCSS represents the identity and style of your React components. It's a utility-first CSS framework that allows you to quickly and easily style your components. With TailwindCSS, you can create beautiful and responsive designs without writing any CSS.

You can refer to the tutorial below to view Tailwind CSS in action:

VIII. React Big Calendar - The Schedule Treasure

react-big-calendar helps you manage your schedule in your React app. It's a library that provides a set of customizable calendar components that can be easily integrated into your application. With react-big-calendar, you can create dynamic and interactive calendars that help you manage your schedule.

IX. Prettier - The Ship's Crew

Just like a pirate crew that works together to keep the ship sailing smoothly, Prettier works together with other libraries to keep your React code formatted and consistent. It's a library that provides a set of code formatting rules that can be easily integrated into your development workflow. With Prettier, you can ensure that your code is formatted consistently and is easy to read and maintain.

To integrate Prettier, you can install it using npm or yarn and then add a .prettierrc file to your project with your desired configurations:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

X. React Hook Form - The Compass

Just like a compass that helps a pirate navigate their way, React Hook Form is a library that helps you build forms in your React application. It's a lightweight library that makes it easy to validate and manage form data in a simple and efficient way.

XI. Framer Motion - The Jolly Roger

Just like the Jolly Roger that represents a pirate crew, Framer Motion represents your app's animations and transitions. It's a library that provides a set of animation and transition components that can be easily integrated into your app. With Framer Motion, you can create dynamic and engaging animations that bring your app to life such as page transitions, hover effects and scroll animations.

XII. React Spinners - The Anchor

Just like an anchor that helps a pirate's ship stay stable in rough seas, React Spinner helps you manage loading states in your React app. It's a library that provides a set of customizable loading spinner components that can be easily integrated into your app. With React Spinner, you can create smooth and responsive loading states.

You can refer to the examples of storybook

XIII. React Intl - The Parrot's Tongue

Just like a parrot that can speak different languages, React Intl helps you internationalize your React app. It's a library that provides a set of tools for formatting and displaying localized content. With React Intl, you can create apps that can be easily translated and localized for different regions and languages.

XIV. Moment - Sailing the Seas of Time

MomentJS is a JavaScript library which helps is parsing, validating, manipulating and displaying date/time in JavaScript in a very easy way. This chapter will provide an overview of MomentJS and discusses its features in detail. Moment JS allows displaying of date as per localization and in human readable format.

moment().format('MMMM Do YYYY, h:mm:ss a'); // March 6th 2023, 7:25:45 pm
moment().format('dddd');                    // Monday
moment().format("MMM Do YY");               // Mar 6th 23
moment().format('YYYY [escaped] YYYY');     // 2023 escaped 2023
moment().format();                          // 2023-03-06T19:25:45+05:30

XV. Lodash - The Secret Weapon

Lodash library provides a set of utility functions that can help you simplify your code and make it more efficient. With Lodash, you can do things like iterate over arrays and objects, manipulate strings and numbers and perform other common tasks.

import _ from 'lodash';

function MyComponent() {
  const numbers = [1, 2, 3, 4, 5];
  const sum = _.sum(numbers);

  return (
    <div>
      <h1>The sum of {numbers.join(', ')} be {sum}</h1>
    </div>
  );
}

XVI. Formik: The Black Pearl

Formik is third party React form library. It provides basic form programming and validation. It is based on controlled component and greatly reduces the time to do form programming. In ReactJS, the purpose of Formik is to create a scalable and performant form helper with a very simple API. Other React form management tools such as Redux Form are available.

You can refer to the tutorial below to see Formik in action:

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

Build an EMI Calculator with Next.js, TypeScript, Tailwind CSS, Recoil and Recharts

Code of Relevancy — Fri, 03 Mar 2023 22:05:18 +0000

Are you interested in building a next level and attractive EMI Calculator? If so, you're in luck. Through this tutorial, we'll explore how to create your own calculator using Next.js, TypeScript, Tailwind CSS, Recoil and Recharts.

Let's take a look at the tools we'll be using.

Next.js is a popular JavaScript framework that allows you to build web applications with ease.

TypeScript is a powerful language that adds static typing to JavaScript which making it easier to write and debug code.

Tailwind CSS is a flexible and powerful CSS framework that makes it easy to style your applications.

Recoil is a state management library that makes it easy to manage complex state in your application.

Recharts is a charting library that allows you to create attractive and informative data visualizations.

At the moment we know what tools we'll be using, let's get started! We'll need to set up our development environment. Make sure you have Node.js, Git and a code editor installed on your machine. My all time favorite editor is VSCode.
You can then create a new Next.js project using the command line. Make sure to include TypeScript in your project setup.

Going forward, we'll install and set up Tailwind CSS. This will allow us to style our calculator and make it look next level. You can install Tailwind CSS using npm or yarn and then include it in your Next.js project. You can then create a simple layout for your calculator, including input fields for loan amount, interest rate and loan tenure.

Let's add some functionality to our calculator using Recoil. We can use Recoil to create an atom for loan amount, interest rate and loan tenure. We can then use state atom to update the display of our calculator.

To make it more interesting, we can add some data visualization to our calculator using Recharts. We can create a simple pie chart that shows the user how their total payments will change over the course of the loan tenure. This can be a great way to help them understand the impact of their loan payments over time.

While these tools can be incredibly helpful in automating complex calculations, it's important to thoroughly test your calculator and ensure that it is accurate and reliable. It's important to remember that while technology can make our lives easier in many ways, it is not a substitute for human expertise and judgment. When it comes to making financial decisions, make sure to seek advice from qualified professionals and not rely solely on the results of a calculator.

Why Next.js with Tailwind CSS?

Next.js and Tailwind CSS are two popular technologies in the web development world. Next.js is a React based framework for building server side rendered (SSR) applications, on Other Side Tailwind CSS is a utility first CSS framework for building responsive and customizable UIs.

Improved Developer Experience

Next level benefit of using Next.js with Tailwind CSS is the improved developer experience it provides. With Tailwind CSS, you can easily style your components using pre defined utility classes instead of writing custom CSS code. This saves a lot of time and effort in the development process. Tailwind CSS comes with a built in JIT (Just In Time) compiler that compiles your CSS code on demand, which further reduces development time.

Next.js, on the other side, provides a great developer experience by providing features such as hot module replacement (HMR) and automatic code splitting. This means that changes made to your code are reflected in the browser immediately without the need for a page refresh. If I say more, Next.js automatically splits your code into smaller chunks, which makes your application load faster.

Performance Optimization

Performance is a crucial factor in web development and using Next.js with Tailwind CSS can help you optimize your app's performance. With Tailwind CSS, you can write highly optimized CSS code that is lightweight and fast loading. This can lead to faster load times and better overall performance.

Next.js also provides a number of performance optimization features, such as server side rendering (SSR) and static site generation (SSG). With SSR, your app's HTML is generated on the server instead of the client, which leads to faster load times and better SEO. SSG, on the other side, generates static HTML files for your app, which can be cached by the browser and served quickly to the user.

Customization

Tailwind CSS is highly customizable, I mean, that you can easily customize the framework to fit your specific needs. You can customize everything from the colors and fonts to the spacing and borders. It comes with a number of pre built themes and templates which can be a great starting point for your project.

Next.js is also highly customizable with a number of configuration options available for things like routing, server side rendering, and much more. This allows you to tailor your app to your specific needs and requirements.

Seamless Integration

Using Next.js with Tailwind CSS is a seamless experience with both technologies working together seamlessly. Next.js provides built in support for CSS modules, allows you to import your Tailwind CSS styles directly into your components. This makes it easy to use Tailwind CSS in your Next.js app without any extra setup.

Next.js provides a number of other features that make integrating with Tailwind CSS easy such as dynamic imports and code splitting. With these features you can ensure that only the necessary CSS code is loaded for each page, it can improve performance and reduce page weight.

📦 Demo:
EMI Calculator App

By following this article, you can create your own calculator and customize it to meet your needs.

⚓️App

❤ Motivation:

🍀Support

YouTube
Discord
GitHub

Take Your Code to The Other Side

Code of Relevancy — Wed, 01 Mar 2023 09:38:05 +0000

In today's adventure I will take you to the Other Side of code development. As ONE, we'll explore the art of code refactoring and see how it can revolutionize your codebase. Sounds marvelous!!! After going through this adventure, you'll learn how to transform your code from Good to Great or Great to Next level. You're a developer and it's your responsibility to take your application to new heights of performance, scalability and maintainability.

As software projects grow, it's common for the codebase to become complex & difficult to manage. At this point, code refactoring comes into light from the darkness. It's the process of improving existing code by restructuring it in a more efficient and effective way without changing its behavior.

Refactoring does not add any new features or functionalities to the software or product. It can improve the quality, readability and maintainability of your codebase. Which makes it easier to work with in the long run.

Why Refactor Your Code?

Improved Code Quality:

Refactoring improves code quality by reducing code complexity, removing duplication and improving the overall design of the code. This ends in code that is easier to read and understand, reducing the risk of introducing errors or bugs.

Increased Maintainability:

By reducing code complexity and improving the design of your code, refactoring makes it easier to maintain and update your code in the long term. This can save time and effort for developers working on the project and reduce the risk of introducing bugs when making changes.

Better Performance:

Refactoring can help improve the performance of your code by optimizing algorithms, removing unnecessary code and reducing resource usage. This can lead to faster execution times and improved efficiency.

Easier Collaboration:

By improving code quality and reducing complexity, refactoring can make it easier for developers to collaborate on a project. This can improve team productivity and reduce the risk of introducing errors or bugs when working on shared code.

By moving forward on our adventure, it's time to perform the code refactoring and break on through to the Other Side.

Code Formatting

It's important to consider code formatting when working on a team or maintaining a codebase. Different developers may have varying preferences for indentation, line breaks and quotation marks. That ends in an inconsistent code style. Inconsistent code style can make the code look cluttered and challenging to read. So it's crucial to maintain a consistent code style across the project.

It's beneficial to use refactoring tools such as Prettier. In case you're not familiar with Prettier, let's break it.. Prettier is a popular and user friendly tool that automates code formatting. Once added to the project, it will take care of formatting the code according to pre set style settings. Also you can customize the formatting rules to your preference by creating a .prettierrc file with below configs:

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleAttributePerLine": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

Class Component Without State or Lifecycle Methods in React

Original code:

import React, { Component } from "react";

class Adventure extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log("Migration happened");
  }

  render() {
    return (
      <div>
        <p>Break on Through To the Other Side</p>
        <button onClick={this.handleClick}>Migrate me</button>
      </div>
    );
  }
}

Refactored code:

import React from "react";

function Adventure() {
  const handleClick = () => {
    console.log("Migration happened");
  };

  return (
    <div>
      <p>Break on Through To the Other Side</p>
      <button onClick={handleClick}>Migrate me</button>
    </div>
  );
}

If the component needs state or lifecycle methods then use class component otherwise use function component.

From React 16.8 with the addition of Hooks, you could use state, lifecycle methods and other features that were only available in class component right in your function component. So, it is always recommended to use Function components, unless you need a React functionality whose Function component equivalent is not present yet, like Error Boundaries.

Avoid extra wrapping `<div>` in React

Original code:

import React from "react";

function Adventure() {
  return (
    <div>
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </div>
  );
}

Refactored code:

import React, { Fragment } from "react";

function Adventure() {
  return (
    <Fragment>{/* or use a shorter syntax <> </> */}
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </Fragment>
  );
}

It's a common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

Why fragments are better than container divs?

Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships and adding divs in the middle makes it hard to keep the desired layout.

Naming Conventions

Naming is a important part of writing clean and maintainable code and it's required to take the time to choose descriptive and meaningful names for your functions and variables. When naming functions and variables, it's important to choose names that are self explanatory and convey the purpose and function of the code.

For React, a component name should always be in a Pascal case like UserDashboard, Dashboard etc.. Using Pascal case for components differentiate it from default JSX element tags.

Methods/functions defined inside components should be in Camel case like getUserData(), showUserData() etc.

For globally used Constant fields in the application, try to use capital letters only. As an instance,

const PI = 3.14;

Remove Unnecessary Comments from the Code

Original code:

import React, { Fragment } from "react";

function Adventure() {
  console.log("test");

  return (
    <Fragment>
      {/* <h1>Adventure</h1> */}
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </Fragment>
  );
}

Refactored code:

import React from "react";

function Adventure() {
  return (
    <>
      <p>Break on Through To the Other Side</p>
      <button>Migrate me</button>
    </>
  );
}

Add comments only where it's required so that you do not get confused while changing code at a later time.

Also don't forget to remove statements like console.log, debugger, unused commented code.

Destructuring Props in React

Original code:

function Adventure(props) {
  return (
    <>
      <h1>Hello, {props.username}</h1>
      <button>Migrate me</button>
    </>
  );
}

Refactored code:

function Adventure({ username }) {
  return (
    <>
      <h1>Hello, {username}</h1>
      <button>Migrate me</button>
    </>
  );
}

Destructuring was introduced in ES6. This type of feature in the JavaScript function allows you to easily extract the form data and assign your variables from the object or array. Also, destructuring props make code cleaner and easier to read.

Respecting the Import Order

Original code:

import { formatCurrency, toNumber } from "@/utils";
import { useDrag } from "react-dnd";

import "./styleB.css";
import { useFormik } from "formik";
import React, { useEffect, useState } from "react";
import Button from "@/components/Button";
import TextField from "@/components/TextField";
import PropTypes from 'prop-types';

Refactored code:

import React, { useEffect, useState } from "react";
import PropTypes from 'prop-types';

import { useDrag } from "react-dnd";
import { useFormik } from "formik";

import { formatCurrency, toNumber } from "@/utils";

import Button from "@/components/Button";
import TextField from "@/components/TextField";

import "./styleB.css";

Organizing imports is a required part of writing clean and maintainable React code.

Import orders:

React import
Library imports (Alphabetical order)
Absolute imports from the project (Alphabetical order)
Relative imports (Alphabetical order)
Import * as
Import ‘./.

Each kind should be separated by an empty line. This makes your imports clean and easy to understand for all the components, 3rd-party libraries and etc.

Split your code into multiple smaller functions. Each with a single responsibility.

One of the key principles of writing clean and maintainable code is to keep functions and components small and focused. This means splitting your code into multiple smaller functions, each with a single responsibility.

When a function or component has too many responsibilities, it becomes harder to read, understand and maintain. By breaking it down into smaller, more focused functions, you can improve the readability and maintainability of your code.

To show you what I mean:

Don't Repeat Yourself

Don't Repeat Yourself (DRY) is a fundamental principle of software development. Which encourages developers to avoid duplicating code or logic throughout their codebase. The DRY principle is a required aspect of writing maintainable and scalable code and it applies to both coding standards and code refactoring.

In terms of coding standards, the DRY principle suggests that you should avoid duplicating code or logic in your codebase. This means that you should strive to write reusable code that can be used in multiple places in your application. As an instance, instead of writing the same validation logic for every input field in your application, you could write a reusable function that performs the validation and use it in each input field.

It's Highly Recommended to Avoid Arrow Functions in Render

One way to improve the performance of your components is to avoid using arrow functions in the render() method.

What's the problem with below instance?
Every time a component is rendered, a new instance of the function is created. Actually, it's not a big deal in case the component is rendered one or two times. But in other cases, it can affect performance. Arrow functions in the render() method can cause unnecessary re renders of your components.

Original code:

function Adventure() {
  const [message, setMessage] = useState("Migration not started");

  return (
    <>
      <h1>Mesage: {message}</h1>
      <button onClick={() => setMessage("Migration happened")}>
        Migrate me
      </button>
    </>
  );
}

So if you care about performance, declare the function before using it in render as below instance:

Refactored code:

function Adventure() {
  const [message, setMessage] = useState("Migration not started");

  const onMessage = () => {
    setMessage("Migration happened");
  };

  return (
    <>
      <h1>Mesage: {message}</h1>
      <button onClick={onMessage}>Migrate me</button>
    </>
  );
}

Instead of using arrow functions in the render() method, you can declare methods as instance methods outside of the render() method. This ensures that the method is only created once and is not recreated on each render.

Decrease React Bundle Size

When you're using third-party libraries in your React app, it's very important to keep the bundle size as small as possible. A large bundle size can negatively impact the performance of your application, especially on slower internet connections.

One way to reduce the bundle size is to only load the parts of the library that you actually need. Instead of importing the entire library, you can import only the specific method that you need using a technique called tree shaking. This can significantly reduce the size of your bundle.

Let's say you're using the popular library Lodash and you only need the pick() method to pick certain properties from an object. Instead of importing the entire Lodash library, you can import only the pick() method as below:

import pick from 'lodash/pick';

const pickedUserProps = pick(userProps, ['name', 'email']);

instead of

import lodash form 'lodash';

const pickedUserProps = lodash.pick(userProps, ['name', 'email']);

Use `useMemo` to cache expensive calculations

When building a React app, it's common to perform calculations or generate data that can be computationally expensive. This can negatively impact the performance of your app, especially if these calculations are performed frequently or in large amounts.

To kill the performance issues of your app, you can use the useMemo hook in React to cache expensive calculations. useMemo is a built in React hook that memoizes the result of a function, so that it is only recomputed when its dependencies have changed.

Let's say you have a component that generates a list of items based on some data that is fetched from an API. The list is generated using a function that performs some expensive calculations:

function generateList(data) {
  // Perform some expensive calculations here
  // ...
  return list;
}

function Adventure() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from API
    // ...
    setData(data);
  }, []);

  const list = generateList(data);

  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

With the above instance, the generateList function is called every time the component re-renders, even if the data hasn't changed. This can result in unnecessary computations and slow down the performance of your application.

To optimize this, you can use the useMemo hook to cache the result of generateList:

function Adventure() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from API
    // ...
    setData(data);
  }, []);

  const list = useMemo(() => generateList(data), [data]);

  // ...
}

Remove too many if-else conditions

If-else statements are a common feature in most programming languages and they are often used to control the flow of code execution based on certain conditions. Though, too many if-else statements can make your code difficult to read, maintain and debug..

One approach to removing too many if-else conditions is to use the "switch" statement. The switch statement is similar to an if-else statement, but it is designed to handle multiple cases in a more concise and efficient way. Let's see an instance:

function checkGrade(grade) {
  if (grade >= 90) {
    return "A";
  } else if (grade >= 80) {
    return "B";
  } else if (grade >= 70) {
    return "C";
  } else if (grade >= 60) {
    return "D";
  } else {
    return "F";
  }
}

In above instance, we are using an if-else statement to check the grade of a student and return a letter grade. This code can be refactored using the switch statement:

function checkGrade(grade) {
  switch (true) {
    case (grade >= 90):
      return "A";
    case (grade >= 80):
      return "B";
    case (grade >= 70):
      return "C";
    case (grade >= 60):
      return "D";
    default:
      return "F";
  }
}

As you can see, the switch statement is more concise and easier to read than the if-else statement. It also allows us to handle multiple cases in a more efficient way.

Another approach to removing too many if-else conditions is to use object literals. Object literals are a way of defining key and value pairs in JavaScript.

To show you what I mean:

function getAnimalSound(animal) {
  if (animal === "dog") {
    return "woof";
  } else if (animal === "cat") {
    return "meow";
  } else if (animal === "cow") {
    return "moo";
  } else {
    return "unknown";
  }
}

In above instance, we are using an if-else statement to return the sound of an animal. This code can be refactored using object literals:

function getAnimalSound(animal) {
  const animalSounds = {
    dog: "woof",
    cat: "meow",
    cow: "moo"
  }
  return animalSounds[animal] || "unknown";
}

As you can see, the object literals approach is more concise and easier to read than the if-else and switch statement. It also allows us to define key and value pairs in a more flexible way..

End of an adventure

Code refactoring is all about breaking through the limitations of your current code and pushing towards a better, more efficient and effective version. It can be a daunting task, but with the right mindset, tools and best practices, you can take your code to the Other Side.

Code refactoring is not just about improving the quality of your code, but also about improving the overall user experience of your app. By putting in the effort to refactor your code, you can create a more responsive, intuitive and engaging app that users will love.

So, don't be afraid to break through to the other side. Hug the process of code refactoring and watch as your app rises to new heights..

Motivation

🍀Support

YouTube
Discord
GitHub

Recoil is the Samurai Sword of React State Management

Code of Relevancy — Mon, 27 Feb 2023 05:29:01 +0000

Today, I have taken a new approach to present this article by adding a Samurai touch. I sincerely hope that it adds value to your reading experience. Your feedback is always welcome and appreciated so please share your thoughts in the comments section below..

🚨Important Notice

Recoil is currently experiencing a lack of updates and maintainer support which has caused concern among developers in the community. On other side many developers have enjoyed using Recoil and found it to be a helpful state management library. So we recommend exercising caution when deciding whether to continue using it in new projects.

The most recent update to Recoil was made on Oct 12, 2022. This lack of updates has caused some developers to switch to other state management libraries and may indicate that Recoil is no longer a reliable choice for future projects. The lack of maintainer support may mean that issues and bugs are not addressed in a timely manner which could cause problems for your app.

In case you choose to continue using Recoil we recommend keeping an eye on its development and considering alternative options as well. It's always important to make informed decisions when selecting tools for your project and we want to ensure that our readers are aware of the current state of Recoil before making a decision.

Please note that this message was last updated on March 9, 2023 and the situation with Recoil may have changed since then.

Happy coding..

Recoil was created to provide an alternative to Redux which is another popular state management library for React. In today's adventure, we will see what Recoil is, how it works, why you might want to use it in your React apps and much more..

With a spirit of the samurai, let's begin our adventure..

Installing Recoil - The Way of the Samurai

You can install Recoil using npm or yarn by running the following command in your terminal:

npm install recoil

Components that use recoil state need RecoilRoot to appear somewhere in the parent tree. A good place to put this is in your root component:

import React from "react";
import ReactDOM from "react-dom/client";
import { RecoilRoot } from "recoil";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

This ensures that the state is available to all child components that require it and avoids any potential issues with components not being able to access the state due to missing RecoilRoot components. In the way of the samurai, there is no room for error. So proceed with vigilance and honor.

What is Recoil?

Recoil is a state management library for React that was released by Facebook in 2020. It provides a simple and intuitive way to manage the state of a React application. Recoil is built on top of React's Context API which is used to pass data down the component tree. Anyway, Recoil provides a more powerful and flexible way to manage the state of an application than the Context API.

The core idea behind Recoil is that state should be defined as a collection of atoms. An atom is a piece of state that can be read and updated by components. Components can subscribe to atoms to be notified when their value changes.

Recoil also has a secret weapon - The Selectors, powerful functions that derive new state from atoms or other selectors. Selectors can be used to compute derived data from the state of an application.

How does Recoil work?

The art of Recoil is rooted in the samurai's keen understanding of the world around them. It works by defining a collection of atoms and selectors that represent the state of an application. Atoms are defined using the atom() function, it takes an initial value as a parameter. Selectors are defined using the selector() function which takes a function that computes the derived state as a parameter. Together, atoms and selectors form the backbone of Recoil.

Create an atom

In the way of the Samurai, an atom in Recoil is like a sword. It's an unit of state that can be read and written to by different parts of your app. To create an atom you can use the atom function from the Recoil library.

To show you what I mean..

import { atom } from 'recoil';

export const weaponState = atom({
  key: 'weaponState',
  default: {
    name: 'Katana',
    damage: 50,
  },
});

Use the atom in a component

Components can subscribe to atoms and selectors.
To use the weaponState atom in a component you can use the useRecoilState hook from the Recoil library.

To show you what I mean..

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponState } from './atoms';

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponState);

  return (
    <div>
      <h1>{weapon.name}</h1>
      <p>Damage: {weapon.damage}</p>
      <button onClick={() => setWeapon({ name: 'Nodachi', damage: 70 })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

As per above instance, we're using the useRecoilState hook to access the weaponState atom and its current value. We're also providing a button that allows the user to upgrade their weapon by setting the atom to a new value.

Create a selector

Selectors are functions that allow you to derive state from your Recoil atoms. They can be useful for computing complex values or aggregating data from multiple atoms.

To show you what I mean..

import { selector } from 'recoil';
import { weaponState } from './atoms';

export const weaponDamageSelector = selector({
  key: 'weaponDamageSelector',
  get: ({ get }) => {
    const weapon = get(weaponState);
    return weapon.damage;
  },
});

Use selector in a component

We can then use selector in our components using the useRecoilValue hook same as atoms.

To show you what I mean..

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponDamageSelector } from './selectors';

function WeaponDisplay() {
  const weaponDamage = useRecoilState(weaponDamageSelector);

  return (
    <div>
      <p>Weapon damage: {weaponDamage}</p>
    </div>
  );
}

Create an atomFamily

In the samurai world, a clan may have multiple samurais and each with their own unique characteristics and abilities. Similarly, in a React application, you may have multiple components that need to share state but with different identifiers or keys.

This is where atomFamily comes in handy. It allows you to create a family of atoms that share the same structure, but with different keys or identifiers. As an instance, let's say we want to create a family of atoms that represent the weapons of different samurais in a clan.

import { atomFamily } from 'recoil';

export const weaponAtomFamily = atomFamily({
  key: 'weaponAtomFamily',
  default: id => ({
    name: `Weapon - ${id}`,
    damage: 50,
  }),
});

In above instance, id argument in the default function is the unique identifier for each atom in the family. So when we call weaponAtomFamily('Wakizashiv'), the default function will be called with 'Wakizashiv' as the id argument and will return an object representing the default weapon for that samurai.

Use atomFamily in a component

An atomFamily() takes almost the same options as a simple atom(). But the default value can also be parameterized. That means you could provide a function which takes the parameter value and returns the actual default value.

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponAtomFamily } from './atoms';

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponAtomFamily('Wakizashiv'));

  return (
    <div>
      <h1>{weapon.name}</h1>
      <p>Damage: {weapon.damage}</p>
      <button onClick={() => setWeapon({ name: 'Weapon - Nodachi', damage: 70 })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

Why use Recoil?

Recoil provides several benefits over other state management libraries for React such as Redux. Let's see some reasons why you might want to use Recoil in your React projects:

Simplified state management

Recoil provides a simpler and more intuitive way to manage the state of a React app. With Recoil you can define atoms and selectors that represent the state of your app. Components can subscribe to these atoms and selectors to be notified when their value changes.

No boilerplate

Recoil also reduces the amount of boilerplate code that is required to manage the state of a React app. It allows you to define atoms and selectors with minimal boilerplate code.
On otherside, in Redux you need to define actions, action creators, reducers and store objects to manage the state of your app.

Better performance

Recoil provides better performance than other state management libraries for React. This is because Recoil uses a new algorithm called the Dependency Graph which allows it to track the dependencies between atoms and selectors more efficiently. The Dependency Graph ensures that only the components that need to be re-rendered are re-rendered when the state of an atom or selector changes which improves the performance of your app.

Familiar syntax

Recoil uses a syntax that is similar to React's built in hooks such as useState() and useEffect(). This makes Recoil easy to learn and use for developers who are already familiar with React.

Flexible and scalable

Recoil is designed to be flexible and scalable. It can be used to manage the state of small or large apps with complex state requirements. It allows you to define atoms and selectors that represent different parts of your app's state and it provides tools for managing the dependencies between these atoms and selectors.

Battle of Recoil and Redux

So my fellow samurais, let's move forward to the final chapter of our adventure together as fearless samurai warriors..

What is Atom Effects?

Atom Effects is a feature in Recoil that allows you to execute side effects when an atom's value changes. Side effects are any operations that have an impact outside of the atom's state. Such as network requests, local storage or logging.

Atom effects are attached to atoms via the effects option. Each atom can reference an array of these atom effect functions which are called in priority order when the atom is initialized.

With the help of Atom Effects, you can add subscriptions to an atom that will be triggered whenever the atom's value changes. The subscriptions can execute any side effects that are necessary for your app. The side effects can be synchronous or asynchronous.

Atom Effects can be useful in situations where you need to execute side effects based on the current state of your app. As instance, you may want to save the user's preferences to local storage whenever they make a change to a settings page.

Atom Effects are the hidden forces that shape the world around us, just as a samurai's sword is shaped by the unseen interactions of its atoms.

To show you what I mean..

import { atom, useRecoilState } from 'recoil';

export const weaponState = atom({
  key: "weaponState",
  default: {
    name: "Katana",
    damage: 50,
  },
  /* Atom Effects */
  effects: [
    ({ onSet }) => {
      onSet(weapon => {
        console.log(`The weapon has upgrade to ${weapon.name}`);
      });
    },
  ],
});

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponState);

  return (
    <div>
      <h1>{weapon.name}</h1>
      <button onClick={() => setWeapon({ name: 'Nodachi' })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

The onSet callback is called whenever the value of the weaponState atom changes. In above instance, we're simply logging the new weapon of the atom to the console, but we could just as easily execute a more complex side effect.

End of adventure

Recoil is built on top of React's Context API and provides a more powerful and flexible way to manage the state of an application than the Context API. It allows you to define atoms and selectors that represent the state of your app. Components can subscribe to these atoms and selectors to be notified when their value changes. Recoil provides several benefits over other state management libraries for React such as simplified state management, no boilerplate, better performance, familiar syntax and flexibility and scalability. If you're looking for a state management library for your React projects, Recoil is definitely worth considering.

My fellow samurais, let's take up the art of Recoil and master the ways of state management.

Motivation

🍀Support

YouTube
Discord
GitHub

All about Promises in JavaScript

Code of Relevancy — Thu, 23 Feb 2023 10:20:01 +0000

In JavaScript, a Promise is an object that represents a value that may not be available yet, but will be resolved in the future. Promises are used to handle asynchronous operations, such as making network requests or accessing databases, where the result is not immediately available.

I'd like to kick off our adventure, if you're ready..

How Promises Work?

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise has three possible states:

Pending: The initial state of a Promise. The Promise is neither fulfilled nor rejected.
Fulfilled: The Promise has been resolved and the resulting value is available.
Rejected: The Promise has been rejected and an error occurred.

Once a Promise is settled, it cannot be resettled. The resolve() or reject() function can only be called once, and any subsequent calls to these functions will have no effect. The immutability of a settled Promise is an important feature because it ensures that the Promise's value remains consistent and predictable. Once a Promise is settled, its value cannot be changed, which helps prevent unexpected behavior and makes it easier to reason about the code.

How to Create Promises?

A Promise is created using the Promise constructor, which takes a single argument, a function called the executor. The executor function takes two arguments: resolve and reject. These are functions that are called when the Promise is either fulfilled or rejected.

To show you what I mean..

The Promise in above example will resolve after one second, and the value of the resolved Promise will be the array of users.

Once a Promise is created, you can use the then method to attach a callback function that will be called when the Promise is fulfilled. The then method takes two arguments: a callback function for the resolved value and a callback function for the rejected value.

To show you what I mean..

Moving forward on our adventure, let's take a look at an example of a Promise that has been rejected.

To show you what I mean..

Chained Promises

Below methods are used to associate further action with a promise that becomes settled. As these methods return promises, they can be chained

Promise.prototype.then()
Promise.prototype.catch()
Promise.prototype.finally()

Chaining promises in JavaScript involves creating a sequence of promises that are executed one after the other. Each promise in the chain depends on the successful completion of the previous promise, so if any promise in the chain fails, the entire chain fails.

Let's see how we can chain promises in JavaScript:

Here, the fetchData() function is used to fetch data from a remote API and perform some operation on it. The fetchData() function returns a Promise that resolves with the result of the operation.

The Promise chain begins by fetching user data from the API, then using the first user's ID to fetch their posts, and finally using the ID of the first post to fetch the comments for that post. Each then() method in the chain handles the resolved value of the previous Promise and the final catch() method handles any errors that occur during the chain.

We can create many chains with then() method as per the requirements. Like synchronous code, chaining will result in a sequence that runs in serial. Let's see a simple instance..

Benefits of Promises

Promises provide several benefits over traditional callback based approaches to handling asynchronous operations in JavaScript. Some of the key benefits include:

Better readability: Promises allow you to write code that is more readable and easier to understand than traditional callback-based approaches. With Promises, you can chain together asynchronous operations in a sequence, which makes it clear what order the operations are executed in.
Improved error handling: Promises make it easier to handle errors that occur during asynchronous operations. With Promises, you can use the catch method to handle errors that occur during any step in the chain, rather than having to handle errors separately for each step.
Avoiding callback hell: Promises can help you avoid "callback hell," a situation where you have a chain of nested callbacks that can become difficult to manage and debug. With Promises, you can chain together asynchronous operations without having to nest multiple levels of callbacks.
Ability to return a value: Promises allow you to return a value from an asynchronous operation, which makes it easier to pass the result of one operation to another operation in a sequence. This is particularly useful when you need to perform multiple asynchronous operations in a sequence and need to use the result of each operation in the next operation.
Better compatibility: Promises are a standardized feature in modern JavaScript, and are supported by all modern browsers and Node.js. This means that Promises can be used across different environments without requiring different code for each environment.

How Do I Cancel a Promise?

In modern JavaScript - No, you cannot cancel a Promise once it has been created. It will execute its code and either resolve or reject, and there is no built in way to cancel the operation.

There are some techniques you can use to simulate cancellation:

Timeout: You can use a timeout to reject the Promise if it takes too long to resolve. This technique is useful if you are making a network request and want to limit the amount of time it takes.
Aborting a network request: You can use an abort controller to abort a network request. The Fetch API provides an AbortController API that allows you to cancel a network request before it completes.
Using a flag: You can use a flag in your code to simulate cancellation. You can set the flag to true to indicate that the operation should be canceled, and then check the flag in your Promise code to determine whether to continue or reject the Promise.

It's worth noting that none of these techniques truly cancel a Promise; they simply reject it early. If you need true cancellation, you may need to use a library that provides cancellation support, such as rxjs or bluebird.

Bluebird Promise Cancellation

Bluebird is a popular Promise library for JavaScript that provides advanced features, including Promise cancellation. Promise cancellation is the ability to cancel a Promise, which is useful for canceling ongoing or long running asynchronous operations.

With the help of Bluebird, Promise cancellation is achieved using the Promise.cancel() method. This method is not part of the standard Promise API and is specific to Bluebird.

To use Promise cancellation in Bluebird, you need to create a cancellable Promise using the new Promise() constructor and passing a cancel function as an argument. The cancel function will be called when the Promise is canceled.

Multiple Promises in Parallel

With the help of Promises, it's easier to manage and execute multiple asynchronous operations in parallel and wait for all of them to complete before continuing.

To show you what I mean..

Four promises are created using the new Promise() syntax. Each promise is resolved or rejected after a certain timeout period using setTimeout() method. The error function is defined to log any error to the console.

After creating above promises, now we will see instances of using different Promise methods.

Promise.all() method

Below instance uses Promise.all() method which takes an array of promises and waits for all promises to be fulfilled. Once all the promises are resolved, then() method is executed which returns an array of values in the order they were passed in the promise array. In this case, all three promises are resolved and their values are logged to the console.

This is great way to, e.g. fetch data using two different requests, and then combine them once both requests complete.

Promise.any() method

Below instance uses Promise.any() method which takes an array of promises and waits for any one of them to be fulfilled. Once the first promise is resolved, then() method is executed which returns the resolved value of the first promise. In this case, the third promise is resolved before the other two and its value is logged to the console.

Promise.race() method

Below instance uses Promise.race() method which takes an array of promises and waits for the first promise to be either resolved or rejected. Once the first promise is settled, then() method is executed which returns the resolved or rejected value of the first settled promise. In this case, the third promise is resolved before the other two, so its value is logged to the console.

Promise.allSettled() method

Below instance uses Promise.allSettled() method which takes an array of promises and waits for all promises to be settled, i.e., either resolved or rejected. Once all promises are settled, then() method is executed which returns an array of objects, each object containing the status and value or reason of each promise. In this case, all promises are settled, so the status and values or reasons of all promises are logged to the console.

Conclusion

The Fetch API is a modern replacement for the older XMLHttpRequest object, and it is based on Promises. When you make a request with the Fetch API, you get back a Promise that resolves to the response object. This allows you to use the then() method to handle the response in a clean and readable way.

Async Functions are a newer addition to JavaScript, and they are built on top of Promises. Async Functions allow you to write asynchronous code that looks like synchronous code, making it easier to read and write. Async Functions use the await keyword to wait for Promises to resolve before continuing, making it possible to write asynchronous code that looks like a sequence of synchronous statements.

In both of these idioms, Promises are used to handle asynchronous operations in a clean and readable way. By using Promises, you can avoid callback hell and write asynchronous code that is easy to reason about..

Motivation

Reminder:
You're awesome no matter what others say and think..

🍀Support

YouTube
Discord
GitHub

Build a Profit Margin Calculator with Vite.js + React.js, TypeScript and Tailwind CSS

Code of Relevancy — Tue, 21 Feb 2023 08:48:21 +0000

In this tutorial, you will learn how to build a profit margin calculator using Vite.js + React.js, TypeScript and Tailwind CSS. I assumes, you have some prior knowledge of these technologies, so it may be helpful to have some familiarity with them before getting started. Please allow me to initiating our adventure..

The journey begins by introducing the concept of a profit margin calculator. Then, I will walk you through the setup process for the project using Vite.js, a lightweight development server that allows you to quickly set up a new project with modern tools like React.js and TypeScript.

Moving forward, I will guide you through the process of building the UI for the profit margin calculator using Tailwind CSS, a popular CSS framework that makes it easy to style your components using pre-defined classes. You'll learn how to use Tailwind to create a responsive design that looks great on both desktop and mobile devices.

After the UI is in place, we will dives into the logic of calculating profit margins. I will walk you through the steps involved in calculating sale price, profit and gross margin and explain the formulas used to do so. You'll learn how to use TypeScript to add type safety to your code and catch errors early in the development process.

You will learn how to dynamically change the theme color based on user preference along with the dark mode. You will gain a solid understanding of how to implement dark mode and dynamic theme color using Tailwind CSS without any splash effect, making your website or application more accessible and user-friendly.

⚡Vite.js Introduction

Next Generation Frontend Tooling

💡 Instant Server Start
⚡️ Lightning Fast HMR
🛠️ Rich Features
📦 Optimized Build
🔩 Universal Plugin Interface
🔑 Fully Typed APIs

Why Vite.js?

Vite is a build tool similar to Webpack. It can be used for React, Preact, Svelte, Vue, Vanilla JS, and LitElements. Vite is 100 times faster than Webpack and bundles your code with Rollup, pre-configured to output highly optimised static assets.

Vite has support for TypeScript projects as well. It provides a smooth and fast experience and makes your app run smoothly regardless of size.

Vite also supports hot module reload to reload a specific component on change during the development.

Unlike, React, where with the increasing app size, the performance slows down and takes a while to start or reload the dev server. On otherside, with vite, the performance doesn't change doesn't matter what the app size is..

⚓️App

To wrap things up, this tutorial is a great resource for anyone looking to learn how to build a profit margin calculator using modern web development tools like Vite.js, React.js, TypeScript, and Tailwind CSS. Whether you're a beginner or an experienced developer, you'll find plenty of valuable insights and practical tips in this tutorial.

🍀Support

YouTube
Discord
GitHub