Forem: Sridhar Murali

Decoding the Browser: How Your App Loads, Parses, and Paints

Sridhar Murali — Mon, 14 Jul 2025 04:41:29 +0000

Ever wonder what really happens behind the scenes when you hit Enter in the address bar and your Single Page Application magically appears?

Let's pull back the curtain and walk through it step by step, from how the browser chews up your HTML to how your JavaScript bundle brings everything to life. I'm keeping it a bit high level for easier understanding.

1️⃣ The Browser Grabs Your HTML

When you type in a URL and hit Enter:

The browser fires off an HTTP request to your server.
The server responds with your main index.html file.

Usually, this file is pretty minimal, something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My SPA</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

2️⃣ HTML Parsing & DOM Building

The browser doesn't wait around—it starts parsing the HTML as soon as it starts receiving it:

The HTML parser reads the markup and turns it into tokens.
Those tokens get stitched together into the DOM tree.
For example, <div id="root"></div> becomes a node in memory.
If it hits <script> tags without defer or async, parsing pauses while that script runs.

At this point:
✅ The DOM is taking shape

✅ No styles are applied yet

✅ No JavaScript has run

3️⃣ CSSOM: Making Things Pretty

When the parser comes across your <link rel="stylesheet"> tags:

The browser fetches the CSS files.
It parses them into the CSS Object Model (CSSOM).
Your app won't render anything until both DOM and CSSOM are ready.

4️⃣ Building the Render Tree & Painting

Once both the DOM and CSSOM are good to go:

The browser combines them into a Render Tree, which figures out what should be visible on the page.
It calculates layout.
Then it paints pixels to the screen.

5️⃣ Your JavaScript Bundle Arrives

The bundle is downloaded via <script src="/bundle.js">. If it's defer, it waits until parsing finishes. Then the JavaScript starts running.

6️⃣ Webpack Bootstraps Your App

When the browser loads your JavaScript bundle:

Webpack's runtime kicks in—a small piece of code that knows how to load and execute your modules.
All modules are wrapped as functions and stored in an object ({ id: fn }).
It uses a __webpack_require__ function to:
- Load the entry module (like index.js)
- Resolve its dependencies recursively
- Cache modules so they only run once
Then it executes the entry module, which usually renders your app.

Think of it as:

🧳 Your app code = packed luggage
🧠 Webpack runtime = the guy who knows what bag to open and in what order

7️⃣ Initializing Your SPA

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

This mounts the app into the DOM and sets up routing.

8️⃣ Client-Side Routing Takes Over

Routing happens via JS (history.pushState)
Views are swapped without a full reload

9️⃣ Hydration (If Using SSR)

Pre-rendered HTML comes from server
JS attaches interactivity

🧠 Quick Recap

Request: Get HTML
Parse: DOM + CSSOM
Render: Layout + Paint
JS: Bundle executes
App: Mounts and routes

⚡ Why This Matters

Helps optimize load performance
Debug layout/paint issues
Improve time to interactive

🔥 Pro Tip: Use Chrome DevTools to watch this in action

🙌 That's the flow—now you know what's really happening when your SPA boots up.

Creating a modern animated cursor for your website

Sridhar Murali — Thu, 28 Mar 2024 11:00:24 +0000

Introduction
In this article, we'll learn how to create a simple yet engaging effect where a circle follows the mouse cursor on a web page. This effect can be used to add interactivity and visual appeal to your website. We'll achieve this using HTML, CSS, and JavaScript.

Step 1: Setting Up the basic HTML Structure

<title>Random HTML Content</title>
<body>
  <div id="circleId" class="circle"></div>
  <h1>Random HTML Content</h1>
  <div class="random">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum magna id quam mollis, eu porttitor dolor hendrerit. Curabitur vestibulum, neque id molestie blandit, nisl orci hendrerit ligula, et tristique risus odio nec metus. Nulla facilisi.</p>
    <p>Phasellus eget mi vel mauris luctus lacinia. Donec eget interdum eros. Fusce in est enim. Vivamus et enim vehicula, ultricies felis sit amet, bibendum nunc. Donec eget tristique mi.</p>
    <p>Suspendisse potenti. Nulla facilisi. Vivamus eu justo vel odio faucibus facilisis. Morbi tempus arcu sit amet libero rutrum dictum. Nam id justo sed felis auctor lacinia. Sed nec mauris nec tellus scelerisque interdum.</p>
    <p>Nunc dignissim lorem ac libero rutrum, a fermentum arcu convallis. Nullam sed justo in ligula iaculis ultrices. Suspendisse luctus justo eget arcu dapibus, et blandit libero ultricies. In vulputate leo vel elit ultricies ultricies.</p>
  </div>
</body>

Step 2: Styling the Circle with CSS
Now, let's style our circle to make it visually appealing.

.circle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
  pointer-events: none;
}

Explanation

We position the circle in the center of the viewport using absolute positioning and transform: translate(-50%, -50%)
The circle has a width and height of 50 pixels and a border-radius of 50% to make it round.
We set pointer-events: none; to ensure that the circle does not interfere with mouse interactions with other elements.

Step 3: Adding JavaScript Functionality
Next, let's add JavaScript code to make the circle follow the mouse cursor.

const circle = document.getElementById('circle');
document.addEventListener('mousemove', (e) => {
  circle.style.left = `${e.clientX}px`;
  circle.style.top = `${e.clientY}px`;
});

Explanation:
We select the circle element using its ID circle.
We add a mousemove event listener to the document.
Inside the event listener, we update the left and top CSS properties of the circle element to match the current mouse cursor position.

Another tip:
To hide your cursor completely add this line to the circle class.

cursor: none;

Conclusion:
Congratulations! You've successfully created an animated circle that follows the mouse cursor. You can further customize the appearance and behaviour of the circle to fit your project's requirements. Experiment with different sizes, colors, and animation effects to make it unique!

Here's a codepen link to see it in action:
https://codepen.io/Sridhar-Murali/pen/poBrBEM

Created a realistic moon using just CSS

Sridhar Murali — Wed, 18 Oct 2023 15:08:47 +0000

Yes, I created a realistic moon using just CSS.
Let's dive right into the step by step process.

Add a div element into your HTML file and give a class name.

<div class="animated-moon"></div>

Now let's start the craft using CSS:
Start out by giving a basic shape to the element.

  width: 20rem;
  height: 20rem;
  position: absolute;
  border-radius: 50%;

Here's an image from Solar System Scope with a moon texture :

https://www.solarsystemscope.com/textures/download/2k_moon.jpg

Add this as background image for your element and give a background size a little extra for the X axis rotation to be possible.

background-image: url('https://www.solarsystemscope.com/textures/download/2k_moon.jpg')
background-size: 110% 100%;

The moment has come to craft an animation that spins and dazzles.

@keyframes moonRotation {
    0% { background-position: 0% 0%; }
    50% { background-position: 150% 0%; }
    100% { background-position: 300% 0%; }
}

Add this code to your .animated-moon class.

animation-name: moonRotation;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;

Now, your moon would look something like this

Now, all your gotta do is unleash the superstar potential of the box-shadow property to create a stellar 3D effect for the moon.

box-shadow: inset -10px 8px 6px -5px #ffffff, // Shine of light hitting on the moon (top right )
inset 20px -20px 50px 43px rgba(0, 0, 0, 0.9), // Shadow regions on moon
7px -6px 14px rgba(255, 255, 255, 0.3215686275); // Glow outside the moon for light reflection

Final Output

Here's a codepen link to play around : https://codepen.io/Sridhar-Murali/pen/yLGmNbb?editors=1100

Thanks for your time
Sridhar

UI/ UX - Design Decisions - Perspective

Sridhar Murali — Fri, 18 Nov 2022 09:17:21 +0000

I am a frontend developer and an Ex-QA. I am just here to share some takeaways on UI/UX from my experience.

Most of the times we keep arguing with our collegues about the best user experience for our product. We generally go with the decision which is agreed upon by most number or just our product manager. :D

Here's a truth, you might not be wrong about your idea of UX for the feature. We keep missing on one key point. Its called Perspective.

We need to be open and vocal about why we feel so about the UX of a certain feature. Dont go with stretched conversations and arguments on whose perspective is right, instead support your points with some facts from experience or some online content based on user's perspective. When the other person's perspective seems more apt for the feature, then go ahead with it. There is no need to feel invalidated. Learn from this and gain a better perspective for UX.

Where we go wrong generally ?
While taking decisions for a new feature which is going to be a part of a huge enterprise product.

There are two points which would make sense here.

For a user who is already familiar with UX of such huge product, discoverability of a new feature will never be a problem. Just make some minor announcements with popovers/ notification badges like Slack does. We make the biggest mistake by bringing in most of the features onto the top level and making the UI more clumsy just for the sake of discoverability. Navigations to the feature must be given more importance.
Stop thinking that your users are dumb. We need not think from a layman's perspective for UI/UX of every new feature. A few more clicks would actually make sense and makes the UX enjoyable to the user. Think very clearly before you take this decision. If this is the most prominent feature of your product, then you might have to reconsider this point.

These points were hard hitting for me when a fellow designer pointed out. Its actually true. In this digital era, we need to stop thinking that our users are dumb.