Forem: Abhirupa Mitra

The Best bit about UI is its Speed and Performance :-)

Abhirupa Mitra — Thu, 26 Dec 2024 07:38:36 +0000

The art of Smooth UX : Debouncing and Throttling for a more performant UI

Abhirupa Mitra ・ Dec 24 '24

#webdev #javascript #programming #frontend

The art of Smooth UX : Debouncing and Throttling for a more performant UI

Abhirupa Mitra — Tue, 24 Dec 2024 08:54:57 +0000

In the fast paced world, most of the jobs we do are on the Web, and fast. Creating a seamless, smooth user experience becomes all the more important. Consumers love a UI which works fast, without lags or delays. Achieving a near perfect experience is possible, although tricky. Have you heard of Event Loops?

In JavaScript, Event loop is a fundamental concept that manages the order of execution of code, collects processes, puts instructions in queued sub-tasks and runs asynchronous operations efficiently. Here's a quick breakdown of how an event loop works:

Call stack: All functions, when invoked, are added to this stack, and flow of control returns from the function, it's popped out of the stack
Heap: All variables and objects are allocated memory from this heap
Queue: A list of messages/ instructions - that get executed one after another

This event loop continuously checks the call stack. Execution of a JavaScript code continues until the call stack is empty.

Event handling is a very crucial part of building JavaScript applications. In such an application we may need to associate multiple events with an UI component.

Imagine...

You have a Button in a UI which helps populate a table with the latest news in Sports. Now this requires you to:

Click a Button (Associate "click" event handler with a button.
Fetch results from an API
Parse the output (Json) and display

These 3 processes are chained together in a synchronous manner. Now repeatedly pressing on the Button would mean multiple API calls - resulting in the UI being blocked for quite a couple of seconds - a seemingly laggy User Experience.

This is a good use case for approaches like Debouncing and Throttling. For events like this, that trigger a chain of complex events - we can use such maneuvers to limit the number of times we are calling the API, or in a general sense - limit the rate at which we process an event.

What is Debouncing Versus throttling?

Debouncing: Deferring the execution of a function until a specified cooldown period has elapsed since the last event.

For example:

If we debounce handleOnPressKey() for 2 seconds, it will execute only if the user stops pressing keys for 2 seconds.

Scenario:

Initial key press: Start a 2000ms timer to call handleOnPressKey().
Subsequent key press within 1000ms: The timer is reset; we wait another 2000ms from this latest key press.
No key press for 2000ms: The timer completes, and handleOnPressKey() is called.

Code Snippet:

let debounceTimer; // Timer reference

const handleOnPressKey = () => {
    console.log("Key pressed and debounce period elapsed!");
};

const debouncedKeyPress = () => {
    // Clear any existing timer
    clearTimeout(debounceTimer);

    // Start a new debounce timer
    debounceTimer = setTimeout(() => {
        handleOnPressKey(); // Execute the function after cooldown
    }, 2000); // Cooldown period of 2000ms
};

// Attach debouncedKeyPress to keypress events
document.getElementById("input").addEventListener("keypress", debouncedKeyPress);

Throttling: Ensuring a function is called at most once within a specified time period, regardless of how often the event occurs.

For example:

If we throttle handleOnScroll() with a 2-second interval, the function will execute at most once every 2 seconds, even if the scroll event triggers multiple times within that period.

Scenario:

Initial scroll event: handleOnScroll() is called, and a 2000ms cooldown starts.
Subsequent scroll events within 2000ms: These are ignored as the cooldown period is active.
Scroll event after 2000ms: handleOnScroll() is called again.

Code Example:

let throttleTimer; // Timer reference

const handleOnScroll = () => {
    console.log("Scroll event processed!");
};

const throttledScroll = () => {
    if (!throttleTimer) {
        handleOnScroll(); // Execute the function immediately
        throttleTimer = setTimeout(() => {
            throttleTimer = null; // Reset timer after cooldown
        }, 2000); // Cooldown period of 2000ms
    }
};

// Attach throttledScroll to scroll events
document.addEventListener("scroll", throttledScroll);

Now Let's Build something

This project is a modern To-Do List application designed to explore the concepts of debouncing and throttling in event handling. It features real-time task addition, search functionality powered by Fuse.js, and a dropdown for dynamic suggestions.

Let's quickly take a look at the HTML code before jumping on the more critical script.js

We have used TailwindCSS for quick styling. You can check their documentation here Tailwind Documentation - it's massively helpful for making quick prototypes

Header: The header contains the title of the page.
Input Field: An input field for adding notes, styled with Tailwind CSS.
Dropdown for Suggestions: A hidden dropdown that will display suggestions as the user types.
Static Task List: A list to display the added tasks.
Scripts: Includes the Fuse.js library for fuzzy searching and the script.js file for custom JavaScript logic.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Loop Practice</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* Tailwind Extensions (Optional for Customizations) */
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
    <div class="container max-w-lg bg-white p-8 rounded-lg shadow-lg">
        <!-- Header -->
        <h1 class="text-2xl font-bold text-gray-800 text-center mb-6">Make Notes</h1>

        <!-- Input Field -->
        <div class="relative">
            <input 
                id="input" 
                type="text"
                placeholder="Add your note..."
                class="w-full px-5 py-3 text-gray-700 bg-gray-100 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all duration-300"
            />
            <!-- Icon (Optional for Styling) -->
            <div id="submitButton" class="absolute right-4 top-1/2 transform -translate-y-1/2 cursor-pointer" >
                <i class="material-icons text-gray-400 hover:text-blue-500 transition duration-200">send</i>
            </div>
        </div>

        <!-- Dropdown for Suggestions -->
        <ul 
            id="dropdown" 
            class="mt-2 bg-white border border-gray-300 rounded-lg shadow-lg hidden p-4 space-y-2 text-gray-700 text-sm hover:bg-gray-50 transition-all">
        </ul>

        <!-- Static Task List -->
        <div class="mt-8">
            <h2 class="text-lg font-semibold text-gray-800">Static Task List</h2>
            <ul class="mt-4 space-y-2 text-gray-600" id="taskList">
            </ul>
        </div>
    </div>

    <!-- Script -->
    <script src="https://cdn.jsdelivr.net/npm/fuse.js"></script>
    <script src="script.js"></script>
</body>
</html>

Why Use Fuse.js?

Fuse.js is a lightweight, customizable library for fuzzy searching. It handles typos and partial matches, offers high performance for large datasets, and has an intuitive API. This will help enhance your search functionality with flexible, user-friendly search experiences. Additionally, this provides you with a CDN link, so it can work right of the bat, no imports or local storage required.

Now let's Code in the Real Deal - The JS

1. Task Array and Variables

const tasks = new Array (
    "Complete Blog on Throttling + Debouncing",
    "Make a list of 2025 Resolutions",
);
let fuse = undefined;
let debounceTimer;
let throttleTimer;

This section initializes an array of tasks and declares variables for Fuse.js, debounce timer, and throttle timer. We have hardcoded some tasks already - for the sake of this project

Now let's build the onSubmit function. This function will be triggered once the user clicks on the Submit Arrow. It prevents the default form submission, retrieves the input value, clears the input field, adds the new task to the tasks array, and updates the task list.

const onSubmit = (event) => {
    //Prevent default
    event.preventDefault();

    const text = document.getElementById("input").value.trim();
    document.getElementById("input").value = "";
    tasks.push(text);
    updateList();
}

Now we need to ensure that once a task has been submitted, it gets updated in the Task list

const updateList = () => {
    const lists = document.getElementById("taskList");
    lists.innerHTML = "";

    //Loop through all elements in tasks
    tasks.forEach(task => {
        const taskElement = document.createElement("li");
        taskElement.classList.add("flex", "items-center", "space-x-2");

        //Add Bullet Point Element
        const bullet = document.createElement("span");
        bullet.classList.add("h-2", "w-2", "bg-blue-500", "rounded-full");

        //Add Span Tag
        const taskText = document.createElement("span");
        taskText.textContent = task;

        taskElement.appendChild(bullet);
        taskElement.appendChild(taskText);
        lists.appendChild(taskElement);
    })
}

The updateList() function renders the task list by looping through the tasks array and creating list items for each task. Each list item includes a bullet point and the task text.

Now we need to ensure that the list gets update after Page is loaded, the first time. We also would want to initialize Fuse.js on Page load - and associate the tasks array with it. Remember, we would want to render suggestions from this tasks array within the dropdown.

const init = () => {
    console.log("Initializing...");
    //Update and render the list
    updateList();

    //Initialize Fuse with the updated array
    try{
        fuse = new Fuse(tasks, {
            includeScore: true,
            threshold: 0.3 //For sensitivity
        })
    } catch(e) {
        console.log("Error initializing Fuse:"+ fuse);
    }
}

document.addEventListener("DOMContentLoaded", init);

Now we need to ensure that on every 'input' we search through the list to show suggestions in the dropdown. This has 3 parts:

Write the Search Logic: searchTasks()
Populate the dropdown on every input: updateDropdown()
Associate the updateDropdown() to be called on every input (Well atleast for now :-) -> Until we implement the debouncing/ throttling logic)

//Utility function to search within already entered values
const searchTasks = (query) => {
    const result = fuse.search(query);
    const filteredTasks = result.map(result => result.item)
    updateDropdown(filteredTasks);
}

const updateDropdown = (tasks) => {
    const dropdown = document.getElementById("dropdown");
    dropdown.innerHTML = "";

    if(tasks.length === 0) {
        dropdown.style.display = "none";
        return;
    }

    tasks.forEach(task => {
        const listItem = document.createElement("li");
        listItem.textContent = task;
        listItem.addEventListener("click", () => {
            document.getElementById("input").value = task;
            dropdown.style.display = "none";
        })
        dropdown.appendChild(listItem);
    });

    dropdown.style.display = "block";
}

document.getElementById("submitButton").addEventListener("input", () => {
searchTasks(event.target.value)
});

So far: The dropdown list will update everytime you type something - in a more bulky UI we would not want this experience

Updating the dropdown list on every keystroke in a bulky UI can lead to performance issues, causing lag and a poor user experience. Frequent updates can overwhelm the event loop, leading to delays in processing other tasks.

We will now see how we can use Debouncing OR throttling to help manage the frequency of updates, ensuring smoother performance and a more responsive interface.

Here's how we can implement either of the techniques in our note-making project.

Debouncing:

Debouncing ensures that a function is only called after a specified amount of time has passed since the last invocation. This is useful for scenarios like search input fields, where we want to wait for the user to finish typing before making an API call.

Code Snippet:

document.getElementById("input").addEventListener("input", (event) => {
    // Implement Debouncing - wait for 1 second of no input
    clearTimeout(debounceTimer); //debounceTimer is already declared in the beginning
    debounceTimer = setTimeout(() => {
        const query = event.target.value;
        searchTasks(query); // Call search function with the input value
    }, 1000);
});

Explanation:

The input event listener is attached to the input field.
The clearTimeout function clears any existing debounce timer.
The setTimeout function sets a new debounce timer for 1 second. If no input is detected within this period, the searchTasks function is called with the input value.

Throttling (In the same use case) - Use either of the two approaches

let lastCall = 0;  // To track the last time searchTasks was called
document.getElementById("input").addEventListener("input", (event) => {
    const now = Date.now();
    const delay = 1000; // Throttle delay (1 second)

    // If enough time has passed since the last call, run the search
    if (now - lastCall >= delay) {
        const query = event.target.value.trim();
        searchTasks(query); // Call search function with the input value
        lastCall = now; // Update last call time
    }
});

Explanation:

let lastCall = 0;: Initializes a variable to track the last time searchTasks was called.
document.getElementById("input").addEventListener("input", (event) => { ... });: Attaches an input event listener to the input field.
const now = Date.now();: Gets the current time in milliseconds.
const delay = 1000;: Sets the throttle delay to 1 second.
if (now - lastCall >= delay) { ... }: Checks if enough time has passed since the last call.
- const query = event.target.value.trim();: Retrieves the trimmed input value.
- searchTasks(query);: Calls the searchTasks function with the input value.
- lastCall = now;: Updates the lastCall time to the current time.

However, please note: Throttling is not the best fit for this scenario because it limits the frequency of function execution to a fixed interval, which might not provide the best user experience for real-time search suggestions. Users expect immediate feedback as they type, and throttling can introduce noticeable delays.

Better Use Cases for Throttling

Throttling is more suitable for scenarios where you want to control the rate of event handling to avoid performance issues. Here are some examples:

Window Resizing: When a user resizes the browser window, you might want to update the layout or perform calculations. Throttling ensures that these updates happen at a controlled rate, preventing excessive function calls.
Scrolling: When handling scroll events, such as loading more content or updating the UI based on scroll position, throttling helps manage the frequency of updates, ensuring smooth performance.
API Rate Limiting: When making API calls, throttling can help you stay within rate limits by controlling the frequency of requests.

By using throttling in these scenarios, you can improve performance and ensure a smoother user experience.

Find the Complete Code here

Happy Coding!

Please leave a feedback!

I hope you found this blog helpful! Your feedback is invaluable to me, so please leave your thoughts and suggestions in the comments below.

Feel free to connect with me on LinkedIn for more insights and updates. Let's stay connected and continue to learn and grow together!

Create Simplified Parallax Effects Using Next.js + GSAP

Abhirupa Mitra — Sat, 07 Dec 2024 12:42:16 +0000

I used to be apprehensive about parallax-focused designs. Despite finding them visually appealing, I thought it was challenging to make all the elements work together. However, last weekend, I decided to give it another try, this time using Next.js and GSAP.

I was amazed at how effortlessly everything came together. Adapting the design for mobile view was still challenging, requiring me to create a different set of clouds, but everything else remained the same.

What is GSAP?

GSAP (or, Greensock Animation Provider) is a JavaScript library that enables developers to create high performing animated websites by providing configuration objects, tweens and timelines to help create seamless animations.

Tweens: A tween is an animation property setter that takes the object that you want to animate, a duration and the property that you would want to animate through (eg. axes)

Timelines: A timeline is a sequencing tool that will help you sequence multiple tweens, and lets you position animation and create an entire sequence of beautiful animation.

How do you build a Parallax Powered Page in under 5 minutes?

Step 1 :

To create a new Next.js app, open your terminal and run: `npx create-next-app@latest`

Follow the prompts to configure your project (e.g., project name, TypeScript, ESLint, Tailwind CSS, etc.). Next.js now ships with TypeScript, ESLint, and Tailwind CSS by default.

To install GSAP, run `npm install gsap` or `yarn add gsap`

Step 2:

Create a Design in Figma. To create a captivating Parallax, you would need multiple components playing our simultaneously, and it’s best to have a design in mind before going ahead. The Pen tool in Figma will easily help you craft basic designs (like the ones I made above). Or, you could simply reuse the images I have created (GitHub link shared at the end).

Import the images into your NextJs component and layer then with position: absolute.

const parallaxCloudBackgroundStyles = 'z-10 absolute bottom-[0vw] w-[100vw]';
const parallaxCloudForegroundStyles = 'z-30 absolute bottom-[0vw] w-[100vw]';    
const parallaxCloudTopLayerStyles = 'z-30 absolute bottom-[-5vw] w-[100vw]';
const parallaxStarStyles = 'absolute top-0 w-[100vw]';
const parallaxSunStyles = 'z-0 absolute top-[30%] left-[35%] right-[35%] w-[30%]';
const parallaxFlightStyles = 'z-20 rotate-45 absolute bottom-[-15%] left-[5%] w-[30vw]';

<img ref= {sun} src="./img/Sun.png" className={parallaxSunStyles}/>
<img ref= {cloudlayer1} src="./img/Wave L1.png" className = { parallaxCloudBackgroundStyles}/>            
<img ref= {flight}src="./img/Designer.png" className = {parallaxFlightStyles}/>
<img ref= {cloudlayer2}src="./img/Wave L2.png" className = { parallaxCloudForegroundStyles }/>
<img ref= {cloudlayer3} src="./img/Wave L3.png" className = { parallaxCloudForegroundStyles }/>
<img ref= {cloudlayer4} src="./img/Wave L4.png" className = { parallaxCloudTopLayerStyles }/>
<img ref= {starrySky} src="./img/Starry Sky.png" className = {parallaxStarStyles}/>

What is z-index?

In web design, we have something similar called z-index. It helps us control the order in which elements (like images, buttons, or text) appear on a webpage.

Tailwind CSS provides a set of predefined z-index classes that you can apply to your elements. These classes range from z-0 (which sets the z-index to 0) to z-50 (which sets the z-index to 50). In the code above we have used z-indexes to layer our components. The bottom layer should be z-0, increasing as you move to the top.

Step 3: Create Refs for each element.

You would need to create Refs for each element and attach the ref to the element. This would help us control the animation for each layer.

const parallaxRef = useRef(null);
const cloudlayer1 = useRef(null);
const cloudlayer2 = useRef(null);
const cloudlayer3 = useRef(null);
const cloudlayer4 = useRef(null);   
const flight = useRef(null); 
const sun = useRef(null);
const starrySky = useRef(null);

STEP 4: Add all animation sequences in your timeline

It is time to unlock the power of GSAP.

Setting Up GSAP Context:

You start by creating a GSAP context using gsap.context(() => { ... }). The context allows you to define animations and plugins within a specific scope.

Registering the ScrollTrigger Plugin:

You register the ScrollTrigger plugin using gsap.registerPlugin(ScrollTrigger). The ScrollTrigger plugin is essential for creating animations based on scroll position.

Creating a Timeline:

Next, you create a timeline using gsap.timeline({ ... }). A timeline is like a container for your animations. It lets you sequence and control multiple animations together. The defaults object specifies default properties for all animations within this timeline (in this case, a duration of 1 second).

ScrollTrigger Configuration:

You set up the scrollTrigger for your timeline:

trigger: The element that triggers the animation (in this case, parallaxRef.current).
start: The position of the trigger element when the animation starts (here, “top top” means when the top of the trigger element reaches the top of the viewport).
end: The position of the trigger element when the animation ends (here, “5000 bottom” means when the bottom of the trigger element reaches 5000 pixels from the top of the viewport).
scrub: Enables smooth scrubbing (changes animation progress as you scroll).
pin: Pins the trigger element during the animation.
onUpdate: A callback function that runs whenever the scroll position updates. In your case, it adjusts the background based on scroll progress.

useEffect(() => {
        let ctx = gsap.context(() => {
            gsap.registerPlugin(ScrollTrigger);
            var timeline = gsap.timeline({
                defaults: { duration: 1},
                scrollTrigger: {
                    trigger: parallaxRef.current,
                    start: "top top",
                    end: "5000 bottom",
                    scrub: true,
                    pin: true,
                    onUpdate: (self) => {
                        setBackground(Math.ceil(self.progress * 100 + 30))
                        console.log(Math.ceil(self.progress * 100))
                    },
                },
            });
      });
});

STEP 5: Animate

Animating Elements:

Inside the timeline, you define animations:

timeline.to(flight.current, { y: "-=1500", x: "+=1500" }, 0): This animates the flight element by moving it up (y: "-=1500") and diagonally (x: "+=1500").

You’re starting with a zero offset (the last argument is 0), which means this animation starts immediately.

You can animate other elements similarly. A tip here would be to add a good mix of both positive and negative final offset values to get a better effect.

timeline.to(
    flight.current,
    {
        y: "-=1500",
        x: "+=1500"
    },
    0
);
timeline.to(
    sun.current,
    {
        y: "-=400"
    },
    0
);
timeline.to(
    starrySky.current,
    {
        y: "-=150"
    },
    0
);

STEP 5: RUN your website

npm run dev — See your code in action

Find the working code here: Visit Github.com/abhirupa-tech

Want to get on a 1:1 call? Click here to connect with me

Happy Coding!

Please leave a feedback

I hope you found this blog helpful! Your feedback is invaluable to me, so please leave your thoughts and suggestions in the comments below.

Feel free to connect with me on LinkedIn for more insights and updates. Let's stay connected and continue to learn and grow together!

Building Visually Accessible Websites by Supporting Contrast Theming

Abhirupa Mitra — Sat, 07 Dec 2024 12:30:08 +0000

“Accessibility” as the word suggests is the concept of making products available to different spectrums of people. Making tech accessible means designing it in a way that it can be used by people with a diverse range of movement, sight, hearing, and cognitive abilities, people with a diverse range of devices, and those with a lower network bandwidth. However, the scope of accessibility is not limited to the ones that I just mentioned, and the general idea is to bring our technology to as many people as we can.

As of January 2024, 5.35 billion people are using the internet worldwide, which amounts to 66.2% of the global population [Source: Statista]. As networks become more widely available, these numbers will keep growing, and it makes us as creators of content on the web more responsible for making our content on the internet available to a larger spectrum of internet users.

WCAG Contrast Criteria

The WCAG guidelines (Web Content Accessibility Guidelines) recommend a minimum contrast ratio of 4.5:1 for text and images of text. This means that the difference in luminance between the text and the background should be at least 4.5 times greater. For large text (18pt or larger) or bold text, the minimum contrast ratio is 3:1.

The above guideline is developed by the W3C (World Wide Web consortium) to ensure that creators, designers, and developers build more usable and accessible content on the web.

Visual Accessibility

Windows provides four inherent High Contrast themes to support users with visibility impairments. These themes are built using a small color palette, resulting in a higher contrast ratio, making UI elements easier to see and thus improve navigation, ease of use, and readability.

The High Contrast settings can be changed through Start Menu > Settings > Contrast Themes.

(A screenshot of Windows Contrast Setting Screen showing the Different High Contrast modes — Aquatic, Desert, Dusk, Night Sky)

Windows Supports 4 High Contrast Themes — Aquatic, Desert, Dusk, and Night Sky

You can check High Contrast mode using forced-colors media feature. This can be paired with prefers-color-scheme to determine whether it’s a dark mode high contrast or a light mode high contrast.


const highContrast = matchMedia('(forced-colors: active)');
const darkTheme = matchMedia('(prefers-color-scheme: dark)t.');

function checkThemes() {
    if (highContrast.matches) {
        console.log('High contrast enabled');
    }
    if (darkTheme.matches) {
        console.log('Dark mode enabled');
    }
}

For Windows users, a dark theme with high contrast would mean that the contrast theme is either Aquatic, Night sky, or Dusk. A light theme with High Contrast would indicate a Desert Theme.

In High Contrast mode the following changes happen:

Background colors and background images are removed and replaced with white or black, or a corresponding theme color.
Any CSS styling furthermore is overridden. This is the opposite for border, or outline colors.
Any UI opacity is turned to 100%. Images remain unaffected unless manually replaced.

A Snip From the Bing Homepage in an Aquatic High Contrast Mode

High contrast mode is primarily an operating system (OS)-controlled feature, and developers don’t need to explicitly build it into their products. Browsers automatically adjust web content when High Contrast Mode is active. However, as a developer, you may need to tweak your code or write your code in a way that enables the OS to effectively wrap its High Contrast Palette around your code.

You will need to style your UI to support High Contrast Users.

The best way to do this is to use Semantic HTML. Semantic HTML refers to using HTML elements that convey meaning about the structure and content of a web page. Note the <a/> and the <button/> tags being used explicitly for UI Elements.

<a href="https://www.example.com">Visit Example</a>
<button type="button">Click Me</button>

A non-semantic HTML would be written like this

<div style="cursor: pointer; text-decoration: underline; color: blue;">Visit Example</div>
<p>To Visit the Docs <span style="color:blue;">Click Here</span></p>

Windows uses these semantic tags to enforce a High Contrast mode. A would look like a Button but a Button built using a div would look like any other text.

Another way would be to use the ‘transparent’ property correctly. Surrounding text containers with a border: 1px solid transparent would ensure that these borders pop up correctly while on a High Contrast mode.

.textContainer {
    border: 1px solid transparent;
}

Any additional styling that you feel may be necessary can be written using the following CSS queries to detect Forced Colors/ High Contrast mode.

@media (forced-colors: active) {
    /* Your high contrast styles go here */
    /* For example: */
    body {
        background-color: black;
        color: white;
    }
}

However, it is recommended that you keep manual forced colors styling to a minimum, and let the operating system do the heavy lifting.

There may be an instance when you want your custom styles to persist over the forced styles that Windows is applying on your components. forced-color-adjust is the CSS Property that does the job. Setting it to auto will allow the element to be of the color specified by the OS. Setting it to none will allow your custom styling to persist.

/* In forced colors mode, the element will keep its custom colors */
.custom-box {
    border: 2px solid gray;
    background-color: #f0f0f0;
    padding: 10px;
    forced-color-adjust: none; /* Custom styling persists */
}

Instead of building your own components, using a 3rd party library always turns out to be helpful, because they're developed with best accessibility practices in mind. You can try out using Bootstrap, Material UI, Semantic UI and the likes.

Have a great time building the web!

Please leave a feedback <3

I hope you found this blog helpful! Your feedback is invaluable to me , so please leave your thoughts and suggestions in the comments below.

Feel free to connect with me on LinkedIn for more insights and updates. Let's stay connected and continue to learn and grow together!

Quick Optimization for your ReactJS Application for Performance and Size

Abhirupa Mitra — Sat, 07 Dec 2024 12:06:13 +0000

React being massively used for frontend-intensive applications comes with its unique ways of performance and size optimizations. Improving both will have a considerable measurable impact on the React package bundle size. The lower the bundle size, the faster the loading time, considering that we are focusing on client-rendered applications.

Server-side rendering would further improve load time. In server-side rendering when a user requests a web page, the React components are rendered as HTML code in the server itself. Then this pre-rendered page is sent to the browser, allowing the user to see the page immediately without the overhead of the JS loading time.

But that’s a different story altogether. Let’s mainly focus on trying to improve our client-side rendered site by working on improving the Package bundle size by making tweaks in the code. Let’s dive deep.

1. Code Splitting and Dynamic Imports

“Bundling” of React code is the process of following through all imports and codes and combining it into a single file called a ‘Bundle’. Webpack, Browserify, etc., already do this for us.

Webpack has a feature called ‘Code Splitting’ that is responsible for splitting a single bundle into smaller chunks, deduplicating the chunks, and importing them ‘on demand’. This significantly impacts the load time of the application.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Lazy Loading Components with React Suspense (React 18): This combined with dynamic imports will show a visible improvement in Component Loading time.

Generally, when we import child components within a parent component, we import it statically. To prevent importing this component till we actually have to render it, we can use a combination of dynamic imports with React Suspense. React Suspense enables loading a component on demand. It shows a Fallback UI while the corresponding components are dynamically imported and then rendered.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

2. Tree Shaking

This is a technique used by JavaScript bundlers to remove all unused code before creating bundles. ES6 code can be tree-shaken; however, code that is based out of CommonJS (i.e., uses ‘require’) cannot be tree-shaken.

Webpack Bundle Analyzer is a plugin that will help you visualize the size of a webpack with an interactive map.

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer

Then configure your webpack to add the above as a plugin:

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];

Make sure your script is configured to run Webpack:

"build": "webpack --config webpack.config.js --mode production"

Run yarn build to generate a report.html that will help you visualize your bundle size effectively.

It will look something like this:

3. Concurrent Rendering

Let’s start by understanding what Blocking Rendering is. Blocking rendering is when the main thread (UX updates) is blocked because React was doing some less important tasks in the background. This used to be the case till React 16.

React 18 has introduced concurrent features, which means it will:

Give you more control around how background updates get scheduled and will create a smooth end-user experience by not blocking the main thread.
Initiate automatic batching of state updates: Batching refers to grouping multiple re-renders due to multiple state updates in a way that the state updates just once.

Use the startTransition() hook to manage React updates as non-urgent, helping React prioritize urgent updates like user-input and user-interaction with components over the prior.

import React, { useState, startTransition } from 'react';

function App() {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);

    startTransition(() => {
      const newList = Array(20000).fill(newValue);
      setList(newList);
    });
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

In this example, when the input value changes, the handleChange function is called. The startTransition function is used to mark the update to the list state as non-urgent. This allows React to prioritize the update to the value state, ensuring that the input remains responsive even when the list is large.

Use the useDeferredValue hook to defer a value (usually an expensive calculation) until the UI is less busy.

import React, { useState, useDeferredValue } from 'react';

function App() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const list = Array(20000).fill(deferredValue);

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

In this example, the useDeferredValue hook is used to defer the value state until the UI is less busy. This helps keep the input responsive by deferring the rendering of the large list until after the input update is processed.

Key Benefits of Concurrent Rendering:

Improved Responsiveness: By allowing React to interrupt rendering work, the UI remains responsive to user interactions.
Prioritization: React can prioritize urgent updates over non-urgent ones, ensuring a smoother user experience.
Better Performance: Expensive updates can be deferred, reducing the impact on the main thread and improving the app’s overall performance.

4. Support Pre-loading of Resources (React 19)

If you are aware of any heavy resources that your application would be fetching during loading, then a good idea would be to preload the resource. These resources could be fonts, images, stylesheets, etc.

Scenarios where preloading would be beneficial:

A child component would use a resource. In that case, you can preload it during the rendering stage of the parent component.
Preload it within an event handler, which redirects to a page/component that would be using this resource. This is, in fact, a better option than preloading it during rendering.

import { preload } from 'react-dom';

function CallToAction() {
  const onClickButton = () => {
    preload("https://travellingprogrammer.com/css/styles.css", { as: "style" });
    navigateToPage();
  };
  return <button onClick={onClickButton}>Redirect</button>;
}

Interesting fact: After implementing preloading, many sites, including Shopify, Financial Times, and Treebo, saw 1-second improvements in user-centric metrics such as Time to Interactive and User Perceived Latency.

Please leave a feedback

I hope you found this blog helpful! Your feedback is invaluable to me , so please leave your thoughts and suggestions in the comments below.

Feel free to connect with me on LinkedIn for more insights and updates. Let's stay connected and continue to learn and grow together!