Forem: Jaison D Souza

How HTML works? In Simple words.

Jaison D Souza — Thu, 19 Feb 2026 18:30:52 +0000

HTML is a markup language responsible for the structure of a web page.
The skeleton of a web page is HTML.

Instead of talking about various tags and how to use them, let us understand how HTML works, how it renders, and how the browser displays it.

When a client asks a server for a web page (this happens when you load a link), the server sends an HTML text file.
It is a plain text file, nothing else.

<html>
  <head>
    <title> My Web Page </title>
  </head>
  <body>
    <p> Hello World </p>
  </body>
</html>

The browser cannot directly render this raw text in a meaningful way.
So it must convert the text into internal structures that it understands.

I will briefly explain the steps involved.

Tokenization and State Machine

Step 1: Tokenization

The browser reads the HTML character by character and converts it into tokens.
Tokens follow a set of structured rules defined by the HTML specification.

The HTML code shown earlier would be converted into tokens like:

StartTag: html
StartTag: head
StartTag: title
Text: My Web Page
EndTag: title
EndTag: head
StartTag: body
StartTag: p
Text: Hello World
EndTag: p
EndTag: body
EndTag: html

Why is this conversion needed, and how does it happen?

This process is implemented using a state machine.

The diagram shows multiple states with transitions based on characters such as <, >, /, and text content. These transitions help the parser identify opening tags, closing tags, and text nodes.

The state machine follows strict rules to convert the input stream into tokens.
Although it may look complicated, it is essentially a series of conditional transitions (similar to if-else logic).

Why do we need tokens?
Tokens make it easier to convert the HTML into a DOM because each token clearly represents what kind of element it is.

DOM, CSSOM, and Render Tree

Step 2: Tokens → DOM

The next step is building the DOM (Document Object Model).

The tokens are processed and converted into a tree structure called the DOM.
Each node in the tree represents an element, text node, or attribute from the HTML document.

A hierarchical structure starting with the html root node, branching into head (containing title → My Web Page) and body (containing p → Hello World).

Step 3: DOM + CSSOM → Render Tree

When CSS is added, the browser parses it into another structure called the CSSOM (CSS Object Model).

DOM contains structure and content
CSSOM contains styling rules

The browser combines the DOM and CSSOM to build the Render Tree.

The Render Tree contains only visible elements and the styles that apply to them (for example, elements with display: none are excluded).

The Render Tree defines:

what needs to be displayed
how it should be styled

Note on JavaScript:
When JavaScript modifies the DOM, for example:

document.body.innerHTML += "<div>Hello</div>"

the browser may trigger layout recalculation (reflow) and repainting.
However, the entire tree is not always re-rendered—only the affected parts are updated when possible.

Layout and Paint

Step 4: Layout Calculation (Reflow)

In this step, the browser calculates the exact position and size of each node in the Render Tree.

For every node, the browser computes:

width
height
position

This process is recursive and can be expensive, especially when changes affect large portions of the page.

Layout calculation produces precise instructions required to generate the final visual output.

Step 5: Paint

During the paint phase, the browser converts layout information into actual pixels.

This includes painting:

text
colors
borders
backgrounds
shadows

In simple terms:

Layout → Paint → Pixels on the screen

Optional next step (for completeness)

Modern browsers often perform an additional step called Compositing, where painted layers are combined and optimized (often using the GPU) before being displayed on the screen.

That's all. Thank you reading till the end. You might have a basic idea about how HTML and small part of browser works. These were my learning based on studying the working of HTML. If any mistakes are there fell free to correct me.

Ditch JSON, Go Binary: A Simple Message Protocol

Jaison D Souza — Sun, 24 Aug 2025 10:17:49 +0000

Binary Message Protocol — that's what I am calling this method. Sounds cool right? Well maybe not.

Fancy name, but it’s really just a simple method of sending data by message framing.

Problem

In real-time applications, speed and efficiency are critical. Sending large JSON payloads over WebSockets can add unnecessary overhead, making communication slower and more resource-intensive.

At the same time, the server needs a clear way to identify what kind of message it's receiving. For example, whether it's a request to join a session, an update, or some other action.

When I was building a collaboration platform with TypeScript and Golang, I ran into this exact problem: JSON was too heavy for real-time communication, and I needed a faster, lighter protocol that still allowed the server to understand the type of each message.

JSON Examples

Joining:

{
  "type": "join",
  "payload": { "token": "...", "doc_id": "..." }
}

Updating a document:

json { "type": "update", "payload": { "doc_id": "abc123", "delta": [1, 0, 2, 3] } } // The delta could be very large

Looks fine — but that's a lot of extra characters being sent on every message.

Solution: Binary Message Protocol

A simple method where:

First byte = message type
Remaining bytes = payload

That’s it.

So instead of sending the verbose JSON above, we just send something like:

[2, 21, 1212, 1, 21, 2, 4, 243, 544, 4, 5, 67, 7]

Here:

2 = message type (join)
The rest = encoded payload

Message Type Mapping

Here’s an example mapping:

Byte	Type	Description
1	update	Document update (deltas)
2	join	Join a document session
3	leave	Leave a document session
4	ping	Keep-alive / heartbeat
5	auth	Authentication / validation

Encoding & Decoding

This isn’t just theory — here’s how you could implement it.

Encoding in Go

go func (c *Client) HandleNotification(msgType uint, message string) { msgBytes := []byte(message) payload := make([]byte, 1+len(msgBytes)) payload[0] = byte(msgType) copy(payload[1:], msgBytes) c.Send <- payload }

Decoding in TypeScript

ts function parseMessage(message: Uint8Array): { type: number; payload: Uint8Array; } { const type = message[0]; const payload = message.slice(1); return { type, payload }; }

Sending as Binary over WebSocket

In Go, you just tell the WebSocket library that you're writing binary messages:

go func (c *Client) WritePump() { for msg := range c.Send { // websocket.BinaryMessage ensures data is sent as binary if err := c.Conn.WriteMessage(websocket.BinaryMessage, msg); err != nil { log.Println("write error:", err) return } } }

Why Not JSON? Why Not Protobuf?

JSON → Easy to use but heavy.
Protobuf → Lightweight but complex.
Binary Message Protocol → Minimal, custom, and just enough for real-time collaboration.

Closing Thoughts

This might not be advanced, and many senior engineers may find it straightforward, but I just wanted to share what I learned. Hopefully, you found it useful too.

Project

🔗 Kairo on GitHub

Build a GitHub App in 5 Minutes with Probot

Jaison D Souza — Tue, 29 Jul 2025 15:28:13 +0000

Build a GitHub App in 5 Minutes with Probot

In this article I will show you how to build your own GitHub app in 5 minutes. You can put this in your portfolio, show a friend or just do it for fun. Without any further ado, let’s begin.

Prerequisites

ANY code editor.
Node.js installed.
Little bit of programming knowledge. Just a little.
Oh, and a GitHub account.

Step 1: Setup the project

Open a code editor. I will use VS Code. Then open a terminal.

Run this command:

npx create-probot-app app_name

Enter the name, description, and your name. Then it will ask you to choose a template.

If you’re using JavaScript, select basic-js; for TypeScript, choose basic-ts — which is what I'll use in this example.

There are also some built-in templates like checks, deploy, and git-data, which you can explore if you'd like.

Step 2: Initialize your Smee client

Visit https://smee.io/new to generate a channel and copy the URL.

Open terminal and run the following command:

bash npm install --global smee-client

Then open .env.example file and rename it to .env.

Paste the URL from Smee in front of WEBHOOK_PROXY_URL.

You might be wondering what to paste in APP_ID?
We will do that in the next step.

Step 3: Initialize GitHub App

Go to: https://github.com/settings/apps/new

Fill out the name, description, and homepage URL of your app. If you don’t have a homepage URL, just give your GitHub page.

Webhook URL: Use the same WEBHOOK_PROXY_URL from the previous step.
Webhook Secret: Use whatever you set in your .env file.
Permissions: Choose permissions required for your app. If unsure, use checks, contents, issues, push, and pull requests. You can change them later.

Click on Create GitHub App. You will be redirected.

Copy the App ID and paste it into your .env.

Scroll down to the Private Keys section.

Click on Generate a Private Key.

A .pem file will be downloaded. Copy the file into your project folder.

Rename it to github_key.pem.

Remember to add github_key.pem and .env files to .gitignore.

Paste this into the .env file:

env PRIVATE_KEY_PATH="./github_key.pem"

Then in terminal, open your app folder and run:

bash cd app_name npm start

Final Step: Add a Simple Feature

You have successfully created your GitHub App. You can now modify the code to respond to events like push, pull_request, or issues.

Here’s an example that comments "thank you for raising the issue!" on every new issue:

`ts
import { Probot } from "probot";

export default (app: Probot) => {
app.on("issues.opened", async (context) => {
const issueComment = context.issue({
body: "thank you for raising the issue!",
});
await context.octokit.issues.createComment(issueComment);
});
};
`

That’s how you build your own GitHub App with Probot — quick and easy!

Check It Out

I used this same method to build Codexa — a GitHub Copilot-like tool for reviewing pull requests.
Feel free to check out the code and see how it works.

Code: github.com/jsndz/blogs/tree/master/tutorial
Wanna connect? Reach out on LinkedIn
Also, check out more of my projects on GitHub