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 tasks:

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_TASK", 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:

1. Theming
2. Current account
3. 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

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

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

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

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:

1. Components with side effects
2. Deprecated or unsafe lifecycle methods
3. Unsafe use of certain built in functions
4. 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..

Warning About Legacy String ref API Usage

React 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..

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

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
Twitter

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

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

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
GitHub
Twitter

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

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
GitHub
Twitter

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

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
GitHub
Twitter

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

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
GitHub
Twitter

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:

1. React import
2. Library imports (Alphabetical order)
3. Absolute imports from the project (Alphabetical order)
4. Relative imports (Alphabetical order)
5. Import * as
6. 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

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
GitHub
Twitter

Occasionally, you may come across an HTML document that includes the use of href="JavaScript:void(0);" within an <a> element. This usage of JavaScript void is often employed when inserting expressions into a web page may result in undesired side effects.

You can effectively eliminate these negative outcomes as it returns the undefined primitive value.

A frequent use case for JavaScript:void(0) is with hyperlinks. When you need to call JavaScript within a link, clicking the link typically causes the browser to either load a new page or refresh the current page or lost the current scroll position. But, if you have attached some JavaScript to the link, you may not want this behavior to occur.

JavaScript:

javascript: is a pseudo URL. A way to embed JavaScript code directly into an HTML document. It can be used as the value of a hyperlink's href attribute or as the value of an event handler such as onclick.

For example, if you have a link that needs to perform a specific JavaScript function when clicked, instead of navigating to a different page, you can use the javascript: pseudo URL:

<a href="javascript:myFunction()">Click here</a>

When the user clicks on the link, the JavaScript function myFunction() will be executed and the page will not navigate away.

<a href="javascript:console.log('Code of Relevancy');">Click me</a>

It is important to note that this method can be a security risk as it allows for potentially malicious code to be executed on the user’s computer, so it should be used with caution.

void(0)

The void operator is a valuable tool in JavaScript that evaluates an expression and returns the undefined value. It is frequently used to simply obtain the undefined primitive value by using void(0) or void 0. Even, it's worth noting that the global variable undefined can be used as a substitute for the void operator in most cases, provided it has not been reassigned to a non-default value.

Examples

<a href="JavaScript:void(0)">Click me, nothing will happen</a>

This anchor tag specifies a hyperlink with a javascript:void(0) URL. When clicked, the JavaScript function void is executed, which returns undefined and has no effect on the page. The purpose of using javascript:void(0) as the href value is to prevent the page from refreshing and changing the URL when the link is clicked. It's often used when a link is desired but no action is needed to happen.

<a href="#section2">Go to Section 2</a>

<a href="#">Click me</a>

This anchor tag specifies a hyperlink with a URL of #. The # symbol is often used as a placeholder URL, and clicking on the link jumps to the top of the page. It's also used to create an internal link within the same page, allowing the user to jump to a specific section within the page.

Conclusion:

javascript:void(0) is used as a placeholder URL when a link is needed but no action is desired, while # is used as a placeholder URL to jump to the top of the page or to create internal links within the same page.

🍀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
GitHub
Twitter

How to use this app:

To use the app simply enter your last period date and cycle length, and the app will automatically calculate your fertile window, ovulation date, next period date, pregnancy test date and expected due date. It’s a simple, yet powerful tool that can help you better understand and track your menstrual cycle. The app is user-friendly and easy to navigate, making it a valuable resource for anyone looking to plan or prevent pregnancy.

Tutorial and Basic Source Code:

Learn more about Ovulation Calculator

What is Fertile Window?

The fertile window is the period of time during a woman’s menstrual cycle when she is most likely to conceive. This typically occurs in the days leading up to and including ovulation, when an egg is released from the ovary. The fertile window is usually determined by tracking changes in cervical mucus and basal body temperature, and can also be predicted by ovulation predictor kits or fertility tracking apps. It is important to note that the fertile window can vary from woman to woman and cycle to cycle and there is no guaranteed “safe” period for intercourse if a woman wishes to avoid pregnancy.

What is Ovulation Date?

The ovulation date is the day that a woman releases an egg from her ovary, which is the most fertile time of her menstrual cycle. Ovulation typically occurs around day 14 of a 28-day menstrual cycle, but this can vary depending on the length of a woman’s cycle. Ovulation can be predicted by tracking changes in cervical mucus, basal body temperature, and hormone levels. Ovulation predictor kits and fertility tracking apps can also be used to determine the ovulation date.

What is Next Period Date?

The next period date is the date on which a woman’s menstrual cycle is expected to begin again. This date is typically calculated based on the length of a woman’s menstrual cycle, which is the number of days from the first day of one period to the first day of the next period. The average menstrual cycle is 28 days, but this can vary from woman to woman and cycle to cycle.

To calculate the next period date, you can start by identifying the first day of your last period, and then add the number of days in your menstrual cycle. For instance, if your last period began on the 1st of the month and your cycle is 28 days, your next period is expected to begin on the 29th of the same month.

What is Pregnancy Test Date?

A pregnancy test date is the date on which a woman plans to take a pregnancy test to determine if she is pregnant. This date is typically determined based on the timing of a woman’s menstrual cycle, and the earliest date that a pregnancy test can accurately detect the presence of the pregnancy hormone, human chorionic gonadotropin (hCG) in the urine.

What is Expected Due Date?

The expected due date, also known as the estimated due date (EDD), is the date on which a woman is expected to give birth. This date is typically calculated based on the first day of a woman’s last menstrual period (LMP) and is usually calculated as 40 weeks or 280 days from the first day of the LMP. However, only about 5% of women will give birth on their due date, most women give birth within a window of two weeks before or after the due date.

Technologies

Next.js:

Next.js is a framework that allows for the development of server-rendered React applications, providing a powerful and efficient tool for building web apps. TypeScript, on the other hand, is a superset of JavaScript that adds static typing and other features that make it a great choice for building large-scale applications.

Tailwind CSS:

The app designed using Tailwind CSS, a utility first CSS framework that makes it easy to build responsive, scalable and consistent interfaces. Tailwind CSS provides a set of pre defined classes that allow developers to quickly and easily create UI elements that are visually consistent across the app.

TypeScript:

TypeScript is an open source programming language that is a superset of JavaScript. It was developed and is maintained by Microsoft. TypeScript adds optional static typing, class-based object oriented programming and other features to JavaScript. This allows for better code organization, improved developer productivity and more robust code.

Code

useReducer hook:

The useReducer hook is generally considered to be a better choice when managing complex state in a React application. It allows you to handle state updates in a more centralized and predictable way and also makes it easier to manage updates to state that are dependent on the current state. But, it might be an overkill for small or simple cases, in these cases useState Hook is more than enough.

useEffect hook:

Calculator component uses the useEffect Hook to create a side effect that sets the outcomes when the lastPeriod or cycleLength state values change.

The useEffect Hook takes in a callback function, which is executed when the component is rendered for the first time and subsequently whenever the values of the lastPeriod or cycleLength state variables change.

The callback function first checks if the lastPeriod or cycleLength state variables have been defined (i.e. not null or undefined) using the logical NOT operator (!). If either of them are not defined the function returns and the effect is not executed.

Otherwise, the callback function dispatches an action to the outcomes reducer using the dispatchOutcomes function, which is passed as a prop. The action has a type of SET_OUTCOMES and a payload of the result of calling the calculateOutcomes function, which takes in lastPeriod and cycleLength as arguments.

The second argument of the useEffect Hook is an array of dependencies that the Hook should watch for changes. In this case, it is watching for changes in the lastPeriod and cycleLength state variables, so that the effect is only executed when those values change.

Date formatting helper:

The toFormatted function takes in a date and an optional formatString as arguments. The formatString defaults to DATE_FORMAT if it is not provided. The function first checks if the date is valid using the isValid function. If the date is not valid, the function returns null. If the date is valid, the function returns the date formatted using the format function of date-fns library.

🍀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
GitHub
Twitter