1. Largest Contentful Paint → Frist

   Improving the Largest Contentful Paint (LCP) metric. Using a CDN reduces server response times, minimizing third-party scripts lowers JavaScript execution delays, optimizing images and videos enhances their load speed, and reducing HTTP requests overall boosts performance, making them all essential for better web loading efficiency.

2. INP → interaction to next paint

   

3. Cumulative Layout Shift → Visual Stabillity on a website, Font Change

Good Blogs on web performance →

https://www.dckap.com/blog/

https://bloggingwizard.com/page-load-time-statistics/#:~:text=“At the BBC we've,20.7 million users lost%2Fmonth

https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

Google Web Vitals

Web Vitals | Articles | web.dev

• Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

• Interaction to Next Paint (INP): measures interactivity. To provide a good user experience, pages should have a INP of 200 milliseconds or less.

• Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

What is TBT?

The Total Blocking Time (TBT) metric measures the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.

By default, Lighthouse stops monitoring TBT after Time to Interactive (TTI), as do some other lab tools that measure page load. See How does TBT relate to TTI?.

The main thread is considered "blocked" any time there's a Long Task a task that runs on the main thread for more than 50 milliseconds. We say the main thread is "blocked" because the browser cannot interrupt a task that's in progress. So in the event that a user does interact with the page in the middle of a long task, the browser must wait for the task to finish before it can respond.

Optimising Javascript

1. Minification and Compression - Webpack/ Vite, Gzip

2. Javascript File Loading → Script tag, defer, async

3. Loops and iterations Optimisation → use forEach, map or reduce

4. Dom manipulation optimizations → minimise dom operations, use document fragments

   • https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

   • User Request Animation Frame → We can batch multiple dom update into one update

5. Event Delegation → Event Bubbling to the parent element to reduce the no. of event listeners

6. Use JS libraries and Frameworks → react, vue, and angular

Optimizing CSS

1. Minification and Compression → Webpack/Vite,

   1. https://www.projectwallace.com/

   2. https://cssstats.com/

   3. https://makersaid.com/tools/css-performance-testing/

Opimizing Images →

• Image Type → Vector graphics

• Tools →

  • https://imagemagick.org/index.php

  • https://www.npmjs.com/package/sharp

  • https://github.com/ApoorvSaxena/lozad.js

  • ffmpeg

  • svgomg

• CDNS → 40 to 80 % image size delivery optimization

<aside> 💡

Lazy Loading →

</aside>

Tips →

1. Reduce IFrames

2. Use Preload attribute

3. Avoid Inline styles

4. reduce cookies size → maximum 20

5. page size → 1500KB

6. minimise http requests → Like graphql

7. Use PWA

Tips to improve your Chrome Core Vitals →

Chrome Dev Tools Performance Tab →

Server Side Bottlenecks →

Common issues →

inefficient database queries

slow third-party services → payment gateways,

insufficient hardware

server-side code

not-caching, not proper caching

Db optimization →

1. Database Index → for data retrieval

2. Denormalisation

3. Materialised Views →

4. Partitioning

5. Connection Pooling

6. Minimise Join operations

7. Optimise where clauses

8. Use Pagination

9. Regular Database Updates

Query Execution Plan →

Detailed a blueprint the step and operations take plan to execute the query .

https://pganalyze.com/docs/explain/basics-of-postgres-query-planning

NOSQL database optimization →

Indexes allow the database to quickly locate and retrieve data.

Third Party services →

1. Message Queue → Kafka, RabbitMQ

2. Connection Polling

3. Caching

4. Backup integrations

Caching →

1. Memcached

   Memcached is an open source in-memory caching system designed for high performance and distributed environments.

2. Redis

   Redis is an in-memory data structure store that can function as both a database and a cache.

   It offers a rich set of data structures and supports advanced caching features such as data exploration,publishing and messaging, subscription and persistence options.

   Both Memcached and Redis offer mechanisms for cache invalidation, such as setting time based expiration

3. Cache Invalidation

• Resources → https://redis.io/solutions/caching/

Microservices →

• Modular, Deployment, Scalability,

• Service Mesh → Istio, Linkered, and Consul

Algo Complexity →

• Check the Algo Complexity in your code

Profiling →

• CPU Usage

• Memory Usage

• Event Loop Delay ms

  Resources

• https://www.npmjs.com/package/clinic

    clinic doctor -- node main.js
  

  This Generates an HTML file report

• https://www.jetbrains.com/profiler/

• https://learn.microsoft.com/en-us/visualstudio/profiling/profiling-feature-tour?view=visualstudio

Server Side Implementation

• Data Types

• Simple code

• Use better Data structures

• Performance Testing

Resources

https://gettaurus.org/

https://en.wikipedia.org/wiki/RAID

Network Stack →

    traceroute yourwebsite.com

• f5.com/products/nginx → nginx Loadbalancing

Performance Monitoring and Planning Improvements →

https://www.npmjs.com/package/web-vitals

https://www.npmjs.com/package/node-os-utils

Database Monitoring → Queries/sec, Throughput, Compute Time, connection counts, storage usage, query time execution ,

Monitoring tools →

• Prometheus

• Grafana → dashboards

• Datadog → Cloud based analytics

• New Relic

• Elastic → Search

• Kibana

Notifications →

Set Alerts for monitoring performance issues, decrease downtimes, SLA Compliance,

Set Grafana with Promethesus with alert rules

But if you’ve switched to pnpm, you might wonder — where did my npm link go?
Good news: pnpm has better, faster, and more reliable ways to handle local linking.

Let’s dive in 👇

🧩 What npm link Actually Does

When you run npm link, npm creates a symbolic link (symlink) between a local package and another project.

Example structure:

/packages/ui
/app

With npm:

1. Go into your local library:

    cd packages/ui
    npm link
   

   This registers the package globally.

2. Then, inside your app:

    cd ../app
    npm link ui
   

   This tells npm to use your local version of ui instead of the one from the npm registry.

Result → Any changes you make inside /packages/ui reflect instantly in /app without reinstalling.

⚡ Why pnpm Is Different

pnpm was designed for speed, disk efficiency, and workspace management.
Instead of scattering node_modules everywhere, pnpm uses a content-addressable store and symlinks under the hood.

So naturally, pnpm gives us a few better ways to handle linking — depending on your setup.

🚀 Option 1 — Use Workspaces (Recommended)

If you have a monorepo, pnpm workspaces make linking automatic.

Example structure:

pnpm-workspace.yaml
packages/
  ui/
  app/

pnpm-workspace.yaml

packages:
  - "packages/*"

Then, in your app’s package.json, declare:

{
  "dependencies": {
    "ui": "workspace:*"
  }
}

Run:

pnpm install

✅ Done — pnpm automatically symlinks your local ui package into app/node_modules.

➡️ No need to manually link anything.
➡️ Every edit in /packages/ui is reflected instantly in /app.

This is the cleanest and most reliable way to work with local packages in pnpm.

🧩 Option 2 — Manual Linking (Like npm link)

If you’re working outside a monorepo, you can still manually link.

Step 1: Create a global link

cd ~/projects/ui
pnpm link --global

Step 2: Link in your app

cd ~/projects/app
pnpm link ui

This behaves just like npm link, but uses pnpm’s internal linking system.

🔗 Option 3 — Direct Local Linking

You can also directly link a local path without touching the global store:

pnpm link ../ui

This instantly symlinks your local folder into node_modules.

Useful for quick experiments or smaller projects.

🧠 Quick Comparison

🧰 Handy Extras

List all global links:

pnpm link --global list

Remove a link:

pnpm unlink ui

🧭 Final Thoughts

While npm link served developers well for years, pnpm workspaces make local development between multiple packages smoother and more predictable.

If you’re maintaining multiple interdependent packages — say a design system and a frontend app — setting up a monorepo with pnpm workspaces will save you endless linking headaches.

Once you try it, you’ll never go back to manual linking again.

Vector Search

Vector Search return similar items based on their semantic meaning, rather than exact matches. This is different from traditional keyword-based searches.

Traditional Search works like:

query: King results: King, Kingbird, Kingcup, Kingdom

Vector Search Example:

query: King

results: King, Queen, Kingdom, Monarch, Ruler, Prince

Vector Search in TiDB

Here a diagram explaining vector search by TiDB. https://docs.pingcap.com/tidbcloud/vector-search-overview/?plan=starter

• Vector type in TiDB

When creating a table, you can define a column as a vector column by specifying the VECTOR data type.

example

USE test;
CREATE TABLE embedded_documents (
    id        INT       PRIMARY KEY,
    -- Column to store the original content of the document.
    document  TEXT,
    -- Column to store the vector representation of the document.
    embedding VECTOR(3)
);

Inserting:

INSERT INTO embedded_documents
VALUES
    (1, 'dog', '[1,2,1]'),
    (2, 'fish', '[1,2,4]'),
    (3, 'tree', '[1,0,0]');

Querying :

SELECT * FROM embedded_documents;

Output:

+----+----------+-----------+
| id | document | embedding |
+----+----------+-----------+
|  1 | dog      | [1,2,1]   |
|  2 | fish     | [1,2,4]   |
|  3 | tree     | [1,0,0]   |
+----+----------+-----------+
3 rows in set (0.15 sec)

Vector Search

SELECT id, document, vec_cosine_distance(embedding, '[1,2,3]') AS distance
FROM embedded_documents
ORDER BY distance
LIMIT 3;

Output from vector search

+----+----------+---------------------+
| id | document | distance            |
+----+----------+---------------------+
|  2 | fish     | 0.00853986601633272 |
|  1 | dog      | 0.12712843905603044 |
|  3 | tree     |  0.7327387580875756 |
+----+----------+---------------------+
3 rows in set (0.15 sec)

Now, you would have a lot of question. Why did we only chose vector size of 3 ? How to convert text to vectors/embeddings? What is vec_cosine_distance for querying TiDB Database ? Does the Query vector has to be the same size as that of stored in database?

How vector search is calculated ?

Let’s take a look at how vector search typically work:

1.Vector embeddings generation: Data items are first converted into vectors using a feature extraction or embedding technique. For example, images can be represented as vectors using convolutional neural networks (CNNs), and text documents can be represented as vectors using word embeddings or sentence embeddings.

2. Indexing & querying: The vectors are then indexed in the vector search database. Indexing is the process of organizing the vectors in a way that allows for efficient similarity search. Various indexing techniques and data structures, such as k-d trees, ball trees, and approximate nearest neighbor (ANN) algorithms, can be used to speed up the search process.

For text data, embeddings can be created using methods such as Word2Vec, GloVe or BERT. These methods create vector representations of words, phrases, or sentences based on the semantic and syntactic relationships between them. The embeddings are typically generated by training neural network models on large collections of text. Some popular methods for creating text embeddings include:

• Bag-of-words (BoW) model

• Word embeddings (Word2Vec, GloVe)

• Pre-trained language models (BERT, GPT)

How indexing and querying works

Vector search finds similar data using approximate nearing neighbor (ANN) algorithms. Compared to traditional keyword search, vector search yields more relevant results and executes faster.

Approximate Nearest Neighbors (ANN) is a class of algorithms used to find the nearest neighbors of a query point in a high-dimensional dataset. These algorithms are called "approximate" because they trade off a small amount of accuracy for a significant speedup compared to exact nearest neighbor search algorithms. ANN algorithms are commonly used in applications such as recommendation systems, image retrieval, natural language processing, and more.

Cosine Similarity

We use the term “cosine similarity” or “cosine distance” to denote the difference between the orientation of two vectors. For example, how far would you turn to face the front door?

We begin by lining the vectors on top of each other again. Start by multiplying the numbers down and then adding all of the results up. Now save that number; call it “x”. Next, we must square each number and add the numbers in each vector. Imagine squaring each number horizontally and adding them together for both vectors.

How does Vector Search helps in RAG System ?

Vector Search becomes a key component of the knowledge base in a RAG System.

RAG with Vector Search

1. Ingest documents → Break into chunks → Convert to embeddings → Store in a Vector Database (like TiDB Vector, etc.).

2. User Query → Embed into vector.

3. Vector Search → Retrieve top-k similar chunks.

4. Pass retrieved chunks + query → LLM → Generate grounded, accurate response.

Using Vector Search with drizzle and TiDB

Create a Custom Vector Type

import { sql } from "drizzle-orm";

import { mysqlTable, varchar, text, float, timestamp, int, customType } from "drizzle-orm/mysql-core";

export const vector = customType<{
    data: number[];
    config: { length: number };
    configRequired: true;
    driverData: string;
}>({
    dataType(config) {
        return `VECTOR(${config.length})`;
    },
    toDriver(value: number[]) {
        // TiDB expects `[x,y,z]`
        return `[${value.join(",")}]`;
    },
    fromDriver(value: string) {
        // TiDB returns "[0.1,0.2,...]"
        try {
            return JSON.parse(value) as number[];
        } catch {
            return value
                .replace(/^\\[|\\]$/g, "")
                .split(",")
                .map(Number);
        }
    },
});

Let’s Create a Media Chunks Table. As you can see we can only create vector of specific sizes. The usual process is to use a text Clunker/splitter that would create small vector chunks for the document uploaded.

export const mediaChunks = mysqlTable("media_chunks", {
    id: varchar("id", { length: 36 })
        .primaryKey()
        .default(sql`(UUID())`), // use MySQL's UUID()

    mediaId: varchar("media_id", { length: 36 })
        .notNull()
        .references(() => media.id, { onDelete: "cascade" }),
    chunk: text("chunk").notNull(),
    embedding: vector("embedding", { length: 768 }).notNull(),
    order: int("order").notNull(),
})

We will create a media table.

 export const media = mysqlTable("media", {
    id: varchar("id", { length: 36 })
        .primaryKey()
        .default(sql`(UUID())`), // use MySQL's UUID()
    title: text("title").notNull(),
    fileUrl: text("file_url").notNull(),
    type: varchar("type", { length: 50 }), // pdf, image, doc
    size: float("size").notNull(), // in MB
    createdAt: timestamp("created_at")
        .default(sql`CURRENT_TIMESTAMP`)
        .notNull(),
});

Let’s Connect drizzle with TiDB

import { serverOnly } from "@tanstack/react-start";
import { drizzle } from "drizzle-orm/tidb-serverless";

import * as schema from "~/lib/db/schema";

const getDatabase = serverOnly(() =>
  drizzle({
    connection: { url: process.env.DATABASE_URL },
    schema,
  }));

export const db = getDatabase();

Now, Let’s Create an upload api that would upload the component to CMS provider, use the text splitter to create chunks.

Example of api route

// getting the text from the website, you can use pdf as well 
const url = "<https://coolhead.in>";

// we will use the reaper api by jina.ai to get the content from the website
const result = await fetch(`https://r.jina.ai/${url}`);

const content = await result.text();  //<--- Content

//Chunking
const segmentsResult = await fetch(`https://segment.jina.ai`, {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.JINA_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    content,
    return_tokens: true,
    return_chunks: true,
    max_chunk_length: 1000,
  }),
});

//Now we will create small chunks content for the 

 const segmentsData =
    (await segmentsResult.json()) as JinaSegmenterResponse;

// Creating Embeddings of size 768    

const embeddingsResult = await fetch(
  "<https://api.jina.ai/v1/embeddings>",
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.JINA_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "jina-embeddings-v3",
      task: "retrieval.passage",
      late_chunking: true,
      dimensions: 768,
      embedding_type: "float",
      input: segmentsData.chunks,
    }),
  },
);

// Save the Embedding the data to out TiDB database. 
const embeddingsData =
  (await embeddingsResult.json()) as JinaEmbeddingsResponse;

const mediaId = "9203fd63-869b-11f0-bb4b-9ee057d67487" // already present in the media table

const values = embeddingsData.data.map((embedding, index) => ({
  mediaId,
  chunk: segmentsData.chunks[embedding.index],
  embedding: embedding.embedding,
  order: index,
}));

await db.insert(mediaChunks).values(values);  //<---- return this from api

Querying: Create an vector embeddings for the query . Then use vector cosine search to get the required Chunks of the document.

//get the query from the request
const body = await request.json();
const { query } = body as { query: string };

//Create embeddings for the query

const embeddingsResult = await fetch("<https://api.jina.ai/v1/embeddings>", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.JINA_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "jina-embeddings-v3",
    task: "retrieval.query",
    dimensions: 768,
    embedding_type: "float",
    input: [query],
  }),
});

const embeddingsData = await embeddingsResult.json();
const queryEmbedding = embeddingsData.data[0].embedding as number[];

const embeddingLiteral = [JSON.stringify(queryEmbedding)]

const embeddingLiteral = [JSON.stringify(queryEmbedding)]

  const { rows } = await db.execute(
    sql/*sql*/`
  SELECT 
    id,
    media_id,
    chunk,
    \\`order\\`,
    vec_cosine_distance(
      embedding,
      ${embeddingLiteral}
    ) AS distance
  FROM ${mediaChunks}
  ORDER BY distance
  LIMIT 5
`
  );

const chunks = rows?.map((r) => r.chunk).join("\\n\\n");

// use the chunks and give to LLM to generate an response to the query. 
const { text } = await generateText({
  model,

  prompt: query,
  system: `You are an question answer assistant. 
Context:\\n${chunks}\\n\\n
`,
});

There are other Vector distance functions as well in TiDB. I would suggest you to try other as well. Learn More about TiDB Vector Functions.

This code was taken from my RAG FamCare. FamCare shows how RAG + vector search can turn raw medical data into actionable, context-aware insights and create medicine Scheduling all powered by AI. If you’d like to explore the code, experiment, or even extend it with your own ideas, head over to the GitHub repo and give it a ⭐️.

In Retrieval-Augmented Generation (RAG) and other LLM-based applications, PDF parsing is one of the trickiest challenges. PDF files are everywhere—invoices, academic papers, scans, reports—and getting reliable, semantically meaningful text out of them is harder than you’d think. Below, we explore what makes PDF parsing hard (“PDF Hell”), the major challenges, what features you need in a good parser, and compare some of the best tools & libraries (open-source and commercial) you can use.

Key Challenges When Parsing PDFs for RAG / LLM Use

Here are the major obstacles you’ll face, drawn from the article and from general experience:

What Features a Good PDF Parser / Extraction Pipeline Should Have

To deal well with PDF Hell, a parser or extraction system should satisfy many of the following:

• Layout preservation or at least metadata about positions, so that paragraphs, tables, columns etc can be reconstructed.

• Mode detection / switching, e.g. detect if a page is native text, or image / scanned, or mixture, and choose different extraction strategy (text extraction vs OCR vs hybrid).

• Preprocessing of images: de-skewing, noise reduction, rotation correction, contrast adjustments.

• Table extraction support: detecting tables visually or via layout, reconstructing rows and columns in a useful format.

• Form / interactive element support: being able to extract data from checkboxes, radio buttons, filled fields.

• Header/footer detection and removal (or at least tagging) to avoid token bloat.

• Scalability & performance: ability to process large numbers of pages, large documents, efficiently.

• Privacy / deployment options: e.g. on-premise vs SaaS, encryption etc.

• Robust error handling & fallback strategies: what to do when the PDF is weird (curves, mixed types, bad layouts etc).

Survey: Popular Tools & Libraries

Given those challenges & requirements, here are some of the leading tools / frameworks you might consider. I’ll compare them on strengths, weaknesses, suitability for RAG use.

npm install nprogress

in the ___root.tsx file

import {
  createRootRouteWithContext,
  useRouterState,
} from "@tanstack/react-router";

import Nprogress from "nprogress";

function RootComponent() {
  const routerState = useRouterState();

  useEffect(() => {
    if (routerState.isLoading) {
      Nprogress.start();
    } else {
      Nprogress.done();
    }
  }, [routerState.isLoading]);
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

export const Route = createRootRouteWithContext()({
  component: RootComponent,
});

Let me give you an example. In the beginning the toughest task for me was how to setup a MongoDb database. I thought it would be super easy. It was not. I had to create an account, setup billing, create cluster, and what not on a pretty slow website. This would lead to procrastination. Now, finally after a day or two i did it. i would get random error connecting to MongoDb. I would search through the errors, try to solve it. Obviously i was making mistake in the syntax of the connection string.

The thing was i would face the same problem, again and again. This would become a great pain point in my learning process.

Now, think of doing the same with other databases Postgres, MySQL, Neo4j, TigerDB, and Redis.

Then in the Stackoverflow Forums i would see this word again and again. DOCKER, followed by a ORCHESTRATION, CONTAINER.

I would stop myself from learning new tech(Docker in my case), because

• Didn’t had the time

• More focused on learning concept, or in my case mongodb

• would that work with my hardware(windows)

After few years, I learnt used docker. I had to deploy something for my company and i had to just go through the process.

Docker reduced my procrastinating time.

I am always asked this one question again and again in tech. Why do we have to learn so many things?

In tech, we try to solve for scale, performance and availability. We have to learn the tech, and with time you get to know the tools as well.

Problem starts when we start learning the tools. Tool learning highly dependent on the problems that you have faced.

When you are asked ( in interviews) about virtualisation for performance in react, people wanna know if you have faced that pain points or not. And this Pain Points come when you have worked with something that scale. ( this is what i think, interviews are crazy )

Learning tools without having those pain points, would lead to shallow understanding. Wouldn’t compound as well. Docker might compound your productivity. You wouldn’t become a successful engineer, just by learning docker, you have to used it. Use it to solved your Pain Points.

✨ Web Components provide encapsulated, reusable UI with native browser support. Let’s use that power to create a badge that adapts to any theme or language direction!

1. Create a Simple Badge Web Component

We start by defining a basic custom element using the HTMLElement class.

main.js

class BadgeComponent extends HTMLElement {
  static get observedAttributes() {
    return ['dir', 'size', 'theme', 'variant'];
  }

  constructor() {
    super();
    const template = document.createElement('template');
    template.innerHTML = `
      <link rel="stylesheet" href="./styles.css" />
      <slot name="icon"></slot><slot></slot>
    `;
    this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
  }

  attributeChangedCallback(name, _oldVal, newVal) {
    if (name === 'dir') {
      this.style.setProperty('--dir', newVal);
    }
  }
}

customElements.define('x-badge', BadgeComponent);

attributeChangedCallback

This lifecycle method lets us respond to attribute changes:

attributeChangedCallback(name, _oldVal, newVal) {
  if (name === 'dir') {
    this.style.setProperty('--dir', newVal);
  }
}

“This is where your component becomes reactive to external changes, just like frameworks do under the hood.”

🧑‍🎨 2. Styling the Badge with Variants and Themes

Why use :host and ::slotted?

• :host lets us style the outermost custom element (<x-badge>) based on its attributes.

• ::slotted() targets user-provided content like <span slot="icon">.

styles.css

:host {
  display: inline-flex;
  align-items: center;
  font-family: sans-serif;
  font-weight: 500;
  border-radius: 1em;
  white-space: nowrap;
  direction: var(--dir, ltr);
  font-size: var(--badge-font-size, 0.75rem);
  gap: 0.4em;
  padding: 0.2em 0.6em;
  background-color: var(--badge-bg, #e0e0e0);
  color: var(--badge-color, #000);
}

/* Themes */
:host([theme="light"]) {
  --badge-bg: #f0f0f0;
  --badge-color: #000;
}

:host([theme="dark"]) {
  --badge-bg: #333;
  --badge-color: #fff;
}

/* Variants */
:host([variant="info"])     { --badge-bg: #2680eb; --badge-color: #fff; }
:host([variant="positive"]) { --badge-bg: #2d9d78; --badge-color: #fff; }
:host([variant="negative"]) { --badge-bg: #e34850; --badge-color: #fff; }
:host([variant="warning"])  { --badge-bg: #fca73c; --badge-color: #000; }

/* Sizes */
:host([size="s"])  { --badge-font-size: 0.625rem; padding: 0.1em 0.4em; }
:host([size="m"])  { --badge-font-size: 0.75rem;  padding: 0.2em 0.5em; }
:host([size="l"])  { --badge-font-size: 0.875rem; padding: 0.3em 0.6em; }
:host([size="xl"]) { --badge-font-size: 1rem;     padding: 0.4em 0.7em; }

/* Icon */
::slotted([slot='icon']) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 1em;
  inline-size: 1em;
  color: currentColor;
  margin-inline-end: 0.3em;
}

:host([dir="rtl"]) ::slotted([slot='icon']) {
  margin-inline-start: 0.3em;
  margin-inline-end: 0;
}

📏 3. Add Size Property

The badge supports size="s", "m", "l", and "xl".

This is handled by setting --badge-font-size and adjusting the padding accordingly using the :host([size="..."]) CSS selectors.

“Using CSS custom properties for sizing allows easy overrides and scaling.”

🌐 4. Add Support for RTL and LTR

We can use the dir attribute to support right-to-left languages like Arabic or Hebrew.

<x-badge dir="rtl" variant="info" size="m">
  <span slot="icon">🔔</span> إشعار
</x-badge>

When dir="rtl" is present, we switch icon spacing using :host([dir="rtl"]).

The attributeChangedCallback in JavaScript dynamically updates a --dir property so it can be used in direction.

✨ 5. Icons Inside Badges

Use <slot name="icon"> for inline icons:

<x-badge size="m" variant="positive">
  <span slot="icon">
    <svg ...>...</svg>
  </span>
  Success
</x-badge>

The icon remains scalable and vertically centered, with automatic margin on the correct side depending on direction.

📄 6. Putting It All Together

index.html

<x-badge size="m" variant="info" theme="light">Info</x-badge>

<x-badge size="l" variant="positive" theme="dark" dir="rtl">
  <span slot="icon">✅</span>
  ناجح
</x-badge>

You can dynamically create or update badges via JavaScript:

const badge = document.createElement('x-badge');
badge.setAttribute('variant', 'warning');
badge.setAttribute('theme', 'light');
badge.setAttribute('size', 'xl');
badge.textContent = 'Alert!';
document.body.appendChild(badge);

🧠 Final Tips

• Use CSS variables for all spacing, colors, and typography.

• Add aria-label or use <slot> meaningfully for accessibility.

• Consider adding icon-only mode or badges with dismiss buttons.

Final Codepen - with Full Code

🔗 Stay Connected & Explore More

If you found this article helpful or want to see more UI experiments, open-source components, and thoughts on building better interfaces:

👉 Check out my work:

• 🌐 Website – coolhead.in

• 📝 Blog – blog.coolhead.in

• 💼 LinkedIn – @biomathcode

• 💻 GitHub – @biomathcode

Let's break down the implementation into small, manageable problems.

1. Getting DOM Elements within a Rectangle

To identify all elements within the selection rectangle, we need to check if the rectangle boundaries intersect with the bounding boxes of the elements on the page.

getElementsWithinSelection(rect) {
  const allElements = Array.from(document.body.querySelectorAll('*'));
  return allElements.filter(element => {
    const elRect = element.getBoundingClientRect();
    return (
      elRect.top < rect.bottom &&
      elRect.bottom > rect.top &&
      elRect.left < rect.right &&
      elRect.right > rect.left
    );
  });
}

How It Works:

• getBoundingClientRect() gets the position and dimensions of an element.

• We filter the elements whose bounding boxes intersect with the given rectangle.

2. Drawing/Rendering the Selection UI

To visually represent the selection area, we'll create an overlay element styled with a transparent background.

<style>
  :host {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
  }
  .selection-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 255, 0.2);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
  }
</style>
<div class="selection-overlay"></div>

3. Creating a Component Using Web Components

Web components encapsulate the functionality and styling, making the selection tool reusable and modular.

Constructor

constructor() {
  super();
  this.attachShadow({ mode: 'open' });

  this.startX = 0;
  this.startY = 0;
  this.isSelecting = false;

  this.shadowRoot.innerHTML = `
  <style>
    :host {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      pointer-events: none;
    }
    .selection-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 255, 0.2);
      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
      opacity: 0;
    }
  </style>
  <div class="selection-overlay"></div>
`;

  this.overlay = this.shadowRoot.querySelector('.selection-overlay');
}

Connecting and Disconnecting Event Listeners

We add mouse event listeners to capture user interactions.

connectedCallback() {
  this.addEventListeners();
}

disconnectedCallback() {
  this.removeEventListeners();
}

addEventListeners() {
  document.addEventListener('mousedown', (event) => this.onMouseDown(event));
  document.addEventListener('mouseup', (event) => this.onMouseUp(event));
  document.addEventListener('mousemove', (event) => this.onMouseMove(event));
}

removeEventListeners() {
  document.removeEventListener('mousedown', this.onMouseDown);
  document.removeEventListener('mouseup', this.onMouseUp);
  document.removeEventListener('mousemove', this.onMouseMove);
}

4. Adding Props/Attributes to Web Components

We can define attributes that control the behavior or appearance of the component. In this case, let's support a customizable background.

static get observedAttributes() {
  return ['background'];
}

attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'background') {
    this.setBackground(newValue);
  }
}

setBackground(background) {
  this.overlay.style.background = background;
}

5. Propagating Custom Events with Callbacks

When the selection is complete, dispatch a custom event with the selected elements.

this.dispatchEvent(new CustomEvent('selection-complete', {
  detail: { elements: elementsWithinSelection },
  bubbles: true,
  composed: true,
}));

6. Using the Component and Listening for Callbacks

To use the custom selection tool component and handle the callback, add the following code:

<cr-selection id="selection-tool" background="rgba(255, 0, 0, 0.1)"></cr-selection>

const selectionTool = document.getElementById('selection-tool');

// Listen for the selection-complete event
selectionTool.addEventListener('selection-complete', (event) => {
  const selectedElements = event.detail.elements;

  // Log the selected elements
  console.log('Selected Elements:', selectedElements);

  // Highlight the selected elements
  selectedElements.forEach(el => {
    el.style.border = '2px solid red';
  });
});

How It Works:

1. The component listens for mouse events to define the selection rectangle.

2. When the selection completes, the selection-complete event fires with the selected elements.

3. The callback function handles highlighting the selected elements.

Full Javascript Code

class CrSelection extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });

        this.startX = 0;
        this.startY = 0;
        this.isSelecting = false;

        this.shadowRoot.innerHTML = `
        <style>
          :host {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            pointer-events: none;
          }
          .selection-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 255, 0.2);
            clip-path: polygon(0 0, 0 0, 0 0, 0 0);
            opacity: 0;
          }
        </style>
        <div class="selection-overlay"></div>
      `;

        this.overlay = this.shadowRoot.querySelector('.selection-overlay');
    }

    static get observedAttributes() {
        return ['background']
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'background') {
            this.setBackground(newValue);
        }
    }

    setBackground(background) {
        this.overlay.style.background = background;
    }



    connectedCallback() {
        this.addEventListeners();
    }

    disconnectedCallback() {
        this.removeEventListeners();
    }

    addEventListeners() {
        document.addEventListener('mousedown', (event) => this.onMouseDown(event));
        document.addEventListener('mouseup', (event) => this.onMouseUp(event));
        document.addEventListener('mousemove', (event) => this.onMouseMove(event));
    }

    removeEventListeners() {
        document.removeEventListener('mousedown', this.onMouseDown);
        document.removeEventListener('mouseup', this.onMouseUp);
        document.removeEventListener('mousemove', this.onMouseMove);
    }

    onMouseDown(event) {
        if (event.button !== 0) return; // Only left-click

        this.startX = event.clientX;
        this.startY = event.clientY;
        this.isSelecting = true;

        this.overlay.style.clipPath = 'none'; // Reset the clip-path
    }

    onMouseMove(event) {
        if (!this.isSelecting) return;

        const currentX = event.clientX;
        const currentY = event.clientY;

        const x1 = Math.min(this.startX, currentX);
        const y1 = Math.min(this.startY, currentY);
        const x2 = Math.max(this.startX, currentX);
        const y2 = Math.max(this.startY, currentY);
        this.overlay.style.opacity = '100'


        this.overlay.style.clipPath = `
            polygon(
                ${x1}px ${y1}px, 
                ${x2}px ${y1}px, 
                ${x2}px ${y2}px, 
                ${x1}px ${y2}px
            )
        `;
    }

    onMouseUp(event) {
        if (!this.isSelecting) return;

        this.isSelecting = false;

        const selectionRect = {
            top: Math.min(this.startY, event.clientY),
            left: Math.min(this.startX, event.clientX),
            right: Math.max(this.startX, event.clientX),
            bottom: Math.max(this.startY, event.clientY),
        };

        const elementsWithinSelection = this.getElementsWithinSelection(selectionRect);

        this.dispatchEvent(new CustomEvent('selection-complete', {
            detail: { elements: elementsWithinSelection },
            bubbles: true,
            composed: true,
        }));

        console.log('elements in selection', elementsWithinSelection);

        this.overlay.style.clipPath = 'none'; // Clear selection area
        this.overlay.style.opacity = '0'
    }

    getElementsWithinSelection(rect) {
        const allElements = Array.from(document.body.querySelectorAll('*'));

        return allElements.filter(element => {
            if (element === this || this.contains(element)) {
                return false;
            }
            const elRect = element.getBoundingClientRect();
            return (
                elRect.top < rect.bottom &&
                elRect.bottom > rect.top &&
                elRect.left < rect.right &&
                elRect.right > rect.left
            );
        });
    }
}

customElements.define('cr-selection', CrSelection);

Codepen

Here the Full Code in Codepen :

Try Click and Dragging in the above Codepen

Conclusion

With this approach, we've built a performant and customizable rectangle selection box using web components. This tool can be extended for various applications such as graphic editors, data selection, or visual analysis tools. The modular design ensures it's reusable and maintainable for future projects.

• Layout: Calculate the size and position of elements on the page.

• Paint: Draw the page into graphical layers - essentially individual images that make up the page.

• Composite: Draw these layers to the viewport.

Properties clip-path, opacity , transform, z-index, visibility, filter , are best for performing web animations

Legend:

• ✅: Triggers the specified phase

• ❌: Does not trigger the phase

Performance Tip:

• Prefer transform and opacity changes for animations instead of properties like top, left, or width to avoid costly layout recalculations.

• Reduce unnecessary paints and layout reflows by using GPU-accelerated properties (transform, opacity).

• transform and opacity are cheapest to render in all browsers. Browsers are improving the rendering performance of other styles (and SVG) all the time, with filter, background-color and clip-path on the horizon.

How to use Will-change ?

The will-change css property hints to browsers how an element is expected to change. Browsers may set up optimisations before an element is actually changed.

/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

You can hint to the browser that they should create a new layer by setting the willChange style to "transform":

element.style.willChange = "transform"

Instead of animating boxShadow, animate filter with the drop-shadow function:

// ❌

#box:hover { boxShadow: "10px 10px black" };

// ✅

#box:hover { filter: "drop-shadow(10px 10px black)" };

Browser Rendering :

1. Layout (Reflow)

Definition:

The layout phase calculates the position and size of elements in the document based on the CSS and DOM structure.

When It's Triggered:

• Adding, removing, or changing the size/position of elements (width, height, margin, padding, etc.).

• Resizing the window or changing the font size.

Performance Impact:

• Expensive, as it affects the entire document or subtree of elements.

• Causes reflow for child elements when dimensions change.

2. Paint (Repaint)

Definition:

The paint phase involves filling in pixels for visual elements, such as colors, borders, text, and shadows.

When It's Triggered:

• Changes to visual properties that don’t affect the layout (color, background-color, border, box-shadow).

Performance Impact:

• Moderate cost as it redraws only the visual parts of elements but doesn't impact the layout.

3. Composite (Layer Composition)

Definition:

The composite phase involves assembling the different painted layers on the GPU to display the final image on the screen.

When It's Triggered:

• GPU-accelerated properties such as transform, opacity, and filter.

Performance Impact:

• Least expensive as it avoids recalculating layout or repainting.

• Efficiently handled by the GPU for smoother animations.

Summary Table

Further Read:

1. https://developer.chrome.com/blog/inside-browser-part3

Reference:

1. https://motion.dev/docs/performance

2. https://motion.dev/blog/do-you-still-need-framer-motion

3. https://developer.chrome.com/blog/inside-browser-part3

1. Web GPU

Web GPU is set to revolutionize how we handle graphics and compute workloads in the browser. It provides developers with low-level access to the GPU, enabling high-performance rendering, data processing, and machine learning applications. Unlike its predecessor WebGL, Web GPU is more flexible and closer to modern graphics APIs like Vulkan and DirectX 12. This opens up new possibilities for gaming, 3D modeling, and AI-powered applications directly in the browser.

2. Web Components

Web Components are gaining traction as a standard for reusable and encapsulated UI elements. With technologies like Shadow DOM, HTML templates, and custom elements, developers can create components that work seamlessly across any framework or vanilla JavaScript. As browser support improves, Web Components are becoming a cornerstone for modular and maintainable web applications.

3. Container Queries

CSS Container Queries are a game-changer for responsive design. Unlike media queries, which depend on the viewport size, container queries allow styles to adapt based on the size of a parent container. This enables truly modular and reusable components, making it easier to build responsive layouts in complex, component-based architectures.

4. CSS Animations: View Transition API & Scroll-Linked Animations

CSS animations are evolving with new APIs that make creating sophisticated transitions easier than ever. The View Transition API simplifies animations between different pages or states, providing smoother user experiences. Scroll-linked animations allow developers to tie animations to scrolling behavior, opening up possibilities for storytelling, parallax effects, and interactive designs.

5. Going Vanilla Instead of Frameworks

There’s a growing movement toward using vanilla JavaScript over heavy frameworks for lightweight and performance-critical applications. Modern JavaScript features, along with libraries like Lit and Alpine.js, make it easier to build functional, maintainable web apps without the overhead of larger frameworks. This trend emphasizes simplicity, performance, and better understanding of core web technologies.

6. Chrome Browser AI

Google’s Chrome team is leveraging AI to enhance the browser experience. Features like improved accessibility tools, real-time translation, and intelligent page navigation are becoming standard. The integration of AI-driven features directly into the browser promises to make web applications smarter and more user-friendly.

7. New Component-Based Libraries

New libraries focused on modern UI paradigms are cropping up. Two standout names are:

• Fancy Components: A library emphasizing beautifully designed, out-of-the-box UI components that can be customized for any project.

• Aceternity UI: A sleek and lightweight library for building modular and accessible components, targeting both developers and designers.

These libraries help bridge the gap between design and development, offering robust tools for rapid prototyping and production-ready components.

8. React 19

React continues to dominate the frontend ecosystem, and the upcoming React 19 promises to push boundaries even further. With improvements in server-side rendering, streaming, and concurrent rendering, React 19 aims to make applications faster and more responsive. Its focus on developer ergonomics ensures that building complex interfaces remains intuitive and efficient.

9. Routing Libraries

Routing is a fundamental part of web development, and new libraries are taking routing to the next level. Libraries like React Router 7 and TanStack Router offer enhanced features like data fetching, nested routing, and improved performance. These tools simplify the creation of dynamic and scalable web applications while providing better user experiences.

10. Signal API

The Signal API introduces a reactive programming model directly into the browser. It allows developers to create reactive state management systems without relying on external libraries. With its focus on reactivity and efficiency, the Signal API simplifies how we handle application state, making it a promising tool for the future of web development.

Want to discuss/meet with me ? Meet Link

React Context is a Global Variable

In Javascript, variables are scoped within function definitions.

Explaining Scoped Context in React with Examples

React Context is often described as a mechanism to manage global state, acting as a shared variable accessible across a React component tree. While this description is accurate, it oversimplifies the capabilities of Context. In this article, we’ll dive into how to scope Context effectively, ensuring that it is used only where needed and avoids unnecessary re-renders.

What is React Context?

React Context provides a way to pass data through the component tree without having to pass props manually at every level. It’s created using React.createContext and consists of a Provider and Consumer pair. A Provider component supplies the value, and any component wrapped with the Consumer or the useContext hook can access it.

Here’s a basic example:

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{`Theme: ${theme}`}</button>;
}

export default App;

In this example, ThemedButton can access the theme value provided by ThemeContext.Provider without explicitly passing props through Toolbar.

Why Scoped Context?

While Context is powerful, using it indiscriminately can lead to performance issues. When the value provided by a Context.Provider changes, all components consuming that context will re-render. In complex applications, this can cause unnecessary re-renders of unrelated components.

Scoped Context refers to the practice of limiting the usage of Context to only the parts of the component tree that actually need it. This approach helps maintain performance and keeps the component structure clean and understandable.

Challenges in Compound Components

Consider scenarios involving compound components, such as those provided by libraries like Radix Primitives. These components often use Context internally to manage state and interactions. However, issues can arise when similar components are composed together, leading to context collisions.

Example with Radix Primitives

Radix Primitives provides highly composable APIs for building accessible components. Here’s an example:

<AlertDialog.Root>
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Content>
      <AlertDialog.Trigger /> {/* note the alert trigger in dialog content */}
    </Dialog.Content>
  </Dialog.Root>

  <AlertDialog.Content />
</AlertDialog.Root>

An issue arises here because AlertDialog is a composition of Dialog with additional functionality to meet AlertDialog requirements. This means AlertDialog.Root is also a Dialog.Root, so it provides both DialogContext and AlertDialogContext.

In this setup, the AlertDialog.Trigger (which is also a Dialog.Trigger) might retrieve the wrong context via useContext(DialogContext), ending up with the context from Dialog.Root instead of AlertDialog.Root. As a result, clicking the AlertDialog.Trigger could toggle the Dialog.Content rather than behaving as intended.

Scoped Context Solution

To prevent such issues, Radix Primitives uses scoped context. Scoped context ensures that AlertDialog.Trigger only interacts with AlertDialog parts and does not accidentally retrieve context from a similarly composed component. This is achieved by creating a new context internally and passing it to the Dialog component through a custom prop, such as __scopeDialog. The Dialog component then uses this scoped context in its useContext calls, ensuring isolation.

Source code from radix ui github repo:

https://github.com/radix-ui/primitives/blob/dae8ef4920b45f736e2574abf23676efab103645/packages/react/dialog/src/Dialog.tsx#L69

Here’s an abstraction of how scoped contexts work in Radix UI:

1. Scope Creation: A createScope utility generates a unique namespace for each component or compound component. This ensures that each set of contexts is isolated and doesn’t conflict with others.

    import { createScope } from '@radix-ui/react-context';
   
    const [createDialogContext, useDialogScope] = createScope('Dialog');
   

2. Scoped Providers: When creating contexts, they are tied to the scope. This binds the provider and consumer to the same namespace.

     const DialogContext = createDialogContext('DialogContext');
   

3. Consumer Isolation: Scoped hooks, like useDialogScope, ensure that consumers access only the context from their intended scope.

    const useDialogContext = (scope) => useContext(DialogContext, useDialogScope(scope));
   

Benefits of Scoped Context

• Context Collisions Prevention: By scoping contexts, components like AlertDialog.Trigger can always find their associated context (AlertDialogContext), even when nested inside other contexts.

• Flexible Composition: Scoped contexts enable flexible and safe composition of components, ensuring that interactions remain predictable.

• Reusability: Developers can reuse generic components (e.g., Dialog.Trigger) across different scopes without modifications.

How It Applies to the Example

In your example:

• The AlertDialog.Root creates a scoped AlertDialogContext that encapsulates its state and interactions.

• Nested Dialog.Root and AlertDialog.Trigger coexist without conflicts because each references its respective scoped context.

• This design pattern is a key feature of Radix UI, ensuring that complex component hierarchies work seamlessly without unintended behavior.

References:

1. https://dev.to/romaintrotard/use-context-selector-demystified-4f8e

2. https://github.com/radix-ui/primitives

3. https://react.dev/reference/react/createContext

This blog would be helpful for UI/UX designers, product manager, product designers, frontend developers, if you have peer or friends in those roles do share the blog with them. Can be a good new year gift as well. Just saying 🥹!

Creating a Design System - The Why Book

Creating anything of great value requires a great purpose around it. Purpose exists in the problem space. If your purpose is to solve the problems of your stakeholders you must understand their problems better than them. And therefore you need new perspective lense. Reading this book would give you that lense and pattern to discovery user problems, you can then create a framework in your mind to solve the problems.

1. CONTINUOUS DISCOVERY HABITS - by Teresa Torres

Recommended for Product Designers, Product manager, UX Designer much for then Frontend developers or UI Designers.

Few Notes from the book :

• Begin With the End in Mind

• Opportunity Solution Tree

• Frame, refine, and prioritize the opportunity space

• Prioritizing Opportunities, not solutions

• Two way Door Decisions

• Quantity Leads to Quality

• Testing Assumption, Not Ideas

• Measuring Impact

2. Laying the Foundations - by Andrew Couldwell

Design System 101

This book is real talk about creating design systems. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.

Notes:

• How to Sell a design system at your company ?

• Mission, values, and principles of a design System

  

• Much more learning from the book

I would highly recommend the book to UI Designer, Product Designer, the book also focus more on practical tips, and setting up realistic expectations

3. Thinking in Systems: A Primer - By Donella Meadows

Thinking in Systems: A Primer by Donella Meadows is an insightful guide to understanding and working with complex systems.

Here's a brief summary of the book's key concepts:

• What is a System?

• Stocks and Flows

• Feedback Loops, Delays, Leverage Points

• System Traps and Opportunities

• Mental Models

Recommended for Product Manager, Team Leads, or developers as well, anyone who like systems in general.

4. Articulating Design Decisions:

Great Designers are great StoryTellers as well

• Easy to Read,

• Book is highly about communication, meeting, getting consensus, understand client needs or how to handle them.

• Some of the advice may be highly general, but give a good context.

Recommended for Designers, Product Designer, Freelancers.

Designing Design System - The What Books

What and who to Design for, Do you understand the domain, Do you know the Design foundations even ?

1. Design Systems - By Alia Kholmatova

Notes:

• I found the book highly visually appealing, very structured, and filled with example

• Book give you everything, pattern, principles, structure as to how to start creating Design System

• The Books is quite short, have a number of reference after every chapter.

Recommended for Designers, Developers, and Product Managers as well. I quite like the book,i am a bit biased.

2. Design School - Type

The Book is a practical and visually engaging guide that delves into the fundamentals of typography and its application in design.

Here's a concise summary of the book's key takeaways:

• Typography Basics

• Type Hierarchy

• okay i like the aesthetics of the book

• Typography in Layouts and Grids

• Typographic Principles

• Just Read the Book it's great

Recommended for Designers, Product Designer.

3. Design School - Layout

Yup I read this first, and then I read the type one. i like the aesthetics of this books

Notes:

• Layout Fundamentals

• Grids, Grid System,

• Layout Composition

• Terminologies

• Book also have a test your knowledge section at the end of each chapter. Nice!

I was really bad with layout understanding, and grids as a developer. This book helped me with that, now i love grids. Good tutorial for css Grid

Building Design System - The How Books

Creating a cohesive and effective design system is no small feat—it requires a deep understanding of design principles, organization, and collaboration.

1. Frontend Architecture for Design Systems

Recommended for Developer, Design Engineers, Team lead, Product Manager

Notes:

• the Book is quite old now, published in pre tailwind era (2016)

• Css Approaches mentioned are good

• a wholesome book, filled with real life example

• Best learning was the way of break down of design into design system at Red hat .com

• As we say basics remain the same, this books will be great refresher on them. code examples are quite outdated.

2. Design System for Developers - By Michael Mangialardi

Recommended for Developer, Design Engineers, It's like a hands on tutorial on creating Design System.

Notes:

• Learn how to code design systems that scale

• Best Hands on guide on Design System for Developers.

• Goes in depth with Naming, creating, developing Design Tokens

• Learn Style-dictionary

• Tailwind example

3. Building Design Systems - by Sarrah Vesselov and Taurie Davis

Recommended for Designers, Developers, Product Managers, Product Designers. Loved the perspective of Sarrah and Taurie.

Notes:

• Creating a Typographic System

• An Accessible Color System

• The Case study of Gitlab is great

• Gives you primers on Open sourcing your Design System

• Loved the Concept of Shared Design Language

4. Practical Web Inclusion and Accessibility - Ashley Firth

Recommended for Designers, Developers, QA, PM, Product Designers.

Notes:

• Chapter are based on Disabilities and how to

• Learn Aria

• Keyboard Accessibility

• Intro to Screen Reader Softwares, Browser build-in ones

• After each chapter there are a number of reference, so that you can learn in depth about the same

• styling cue in audio and video tags, didn't know that

An extensive guide on how to style for RTL in CSS
https://rtlstyling.com/posts/rtl-styling

5. Inclusive Design Patterns - By Heydon Pickering

Recommended for Developers, QA, PM, Product Designers.

Notes:

• Filled with code example for accessibility

• Schematic HTML is explained well

• Using readability checker

• Some of the tips are highly practical

• Explains the bad practise and how to solve them

• Every chapter has things to avoid

• Testing for accessibility

Perks of reading the whole article, or scrolling. If you need any of the book pdf files, do dm me. I will share them with you.

Want to discuss more on Design systems ? https://cal.com/biomathcode

Example: Using Symbol as Unique Property Keys

javascript
Copy code
// Create unique symbols
const id = Symbol('id');
const name = Symbol('name');

// Create an object with symbol-based properties
const user = {
    [id]: 101,
    [name]: 'Alice',
    age: 25
};

// Access the symbol properties
console.log(user[id]); // 101
console.log(user[name]); // "Alice"

// Add another property using a symbol
const email = Symbol('email');
user[email] = 'alice@example.com';

console.log(user[email]); // "alice@example.com"

// Symbols are not enumerable in for...in loops or Object.keys
for (const key in user) {
    console.log(key); // Only "age" is logged
}

console.log(Object.keys(user)); // ["age"]

// You can still access all properties if you know the symbol keys
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id), Symbol(name), Symbol(email)]

Example: Using Symbol.iterator to Make an Object Iterable

javascript
Copy code
const collection = {
    items: ['apple', 'banana', 'cherry'],
    [Symbol.iterator]() {
        let index = 0;
        const items = this.items;
        return {
            next() {
                if (index < items.length) {
                    return { value: items[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

// Iterate over the object
for (const item of collection) {
    console.log(item);
}
// Output:
// apple
// banana
// cherry

This example shows how Symbol.iterator allows a custom object to be iterated using for...of.

Symbols usable in popular npm library :

Example: Using Symbol in a Popular npm Library

A notable example of Symbol usage is in the Express.js framework, a widely used web application framework for Node.js. In Express.js, Symbol is employed to define unique property keys, preventing potential conflicts with user-defined properties.

Code Snippet from Express.js:

javascript
Copy code
// In Express.js, a symbol is used to define a unique property key
const app = express();
app[Symbol('router')] = router;

In this snippet, Symbol('router') creates a unique symbol that serves as a property key for the app object. This approach ensures that the router property is distinct and does not interfere with other properties that might be added to the app object.

Benefits of Using Symbol in Libraries:

• Uniqueness: Symbols guarantee that property keys are unique, reducing the risk of accidental overwrites.

• Immutability: Once created, symbols cannot be changed, providing a stable identifier.

• Non-enumerability: Properties keyed by symbols are not enumerable in loops, which can be beneficial for internal properties that should not be exposed.

A mixin is an abstract subclass; i.e. a subclass definition that may be applied to different superclasses to create a related family of modified classes.

Gilad Bracha and William Cook, Mixin-based Inheritance

• mixin definition: The definition of a class that may be applied to different superclasses.

• mixin application: The application of a mixin definition to a specific superclass, producing a new subclass.

Mixin libraries like Cocktail, traits.js, and patterns described in many blog posts (like one of the latest to hit Hacker News: Using ES7 Decorators as Mixins), generally work by modifying objects in place, copying in properties from mixin objects and overwriting existing properties.

This is often implemented via a function similar to this:

function mixin(source, target) {
  for (var prop in source) {
    if (source.hasOwnProperty(prop)) {
      target[prop] = source[prop];
    }
  }
}

A version of this has even made it into JavaScript as Object.assign.

mixin() is usually then called on a prototype:

mixin(MyMixin, MyClass.prototype);

and now MyClass has all the properties defined in MyMixin.

functors: function which creates a function

function myloggerFunction() {
  return (str) => {console.log(str)}
}

const logger1 = myloggerFunction();

logger1('hello');

functions that creates class

function myloggerFunction() {
    return class MyLoggerClass() {
        private 
    }
}

function myLogFunction() {
  return (str: string) => {
    console.log(str);
  };
}

function myLoggerClass() {
  return new (class Logger {
    private completeLog: string = "";
    log(str: string) {
      console.log(str);
      this.completeLog += `${str}\n`;
    }
    dumpLog() {
      return this.completeLog;
    }
  })();
}

function SimpleMemoryDatabase<T>() {
  return class SimpleMemoryDatabase {
    private db: Record<string, T> = {};

    set(id: string, value: T): void {
      this.db[id] = value;
    }

    get(id: string): T {
      return this.db[id];
    }

    getObject(): Record<string, T> {
      return this.db;
    }
  };
}

const StringDatabase = SimpleMemoryDatabase<string>();

const sdb1 = new StringDatabase();
sdb1.set("name", "Jack");
console.log(sdb1.get("name"));

type Constructor<T> = new (...args: any[]) => T;

function Dumpable<
  T extends Constructor<{
    getObject(): object;
  }>
>(Base: T) {
  return class Dumpable extends Base {
    dump() {
      console.log(this.getObject());
    }
  };
}

const DumpableStringDatabase = Dumpable(StringDatabase);
const sdb2 = new DumpableStringDatabase();
sdb2.set("name", "Jack");
sdb2.dump();

[A mixin is] a function that

1. takes a constructor,

2. creates a class that extends that constructor with new functionality

3. returns the new class

// Needed for all mixins
type Constructor<T = {}> = new (...args: any[]) => T;

////////////////////
// Example mixins
////////////////////

// A mixin that adds a property
function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

// a mixin that adds a property and methods
function Activatable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    isActivated = false;

    activate() {
      this.isActivated = true;
    }

    deactivate() {
      this.isActivated = false;
    }
  };
}

////////////////////
// Usage to compose classes
////////////////////

// Simple class
class User {
  name = '';
}

// User that is Timestamped
const TimestampedUser = Timestamped(User);

// User that is Timestamped and Activatable
const TimestampedActivatableUser = Timestamped(Activatable(User));

////////////////////
// Using the composed classes
////////////////////

const timestampedUserExample = new TimestampedUser();
console.log(timestampedUserExample.timestamp);

const timestampedActivatableUserExample = new TimestampedActivatableUser();
console.log(timestampedActivatableUserExample.timestamp);
console.log(timestampedActivatableUserExample.isActivated);

// Define a simple class with a greet method
class Greeter {
  greet(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

// Define a mixin that adds a log method to a class
type Loggable = { log(message: string): void };

function withLogging<T extends new (...args: any[]) => Loggable>(Base: T) {
  return class extends Base {
    log(message: string) {
      console.log(`[${new Date().toISOString()}] ${message}`);
    }
  };
}

// Create a new class that combines the Greeter and Loggable mixins
const MyGreeter = withLogging(Greeter);

// Use the new class to create an instance and call its methods
const greeter = new MyGreeter();
greeter.greet("Alice"); // Output: "Hello, Alice!"
greeter.log("An event occurred."); // Output: "[2023-04-04T12:00:00.000Z] An event occurred."

This is just the beginning of many topics related to mixins in JavaScript. I'll post more about things like:

• Enhancing Mixins with Decorator Functions new post that covers:

• Caching mixin applications so that the same mixin applied to the same superclass reuses a prototype.

• Getting instanceof to work.

• How mixin inheritance can address the fear that ES6 classes and classical inheritance are bad for JavaScript.

• Using subclass-factory-style mixins in ES5.

• De-duplicating mixins so mixin composition is more usable.

References:

https://bryntum.com/blog/the-mixin-pattern-in-typescript-all-you-need-to-know/

https://medium.com/@saif.adnan/typescript-mixin-ee962be3224d

https://egghead.io/lessons/typescript-use-the-optional-chaining-operator-in-typescript

https://javascript.info/mixins

This article is based on my learning from the book Effective Typescript by Dan Vanderkam

Think of TypeScript’s type system as a "domain for JavaScript." It's a layer that adds structure and safety to JavaScript, which is inherently dynamic and loosely typed. Understanding how TypeScript works helps you write safer, more predictable code. Let's break down some key concepts that will help you form a solid mental model for TypeScript.

1. Types vs. Values in TypeScript

A common source of confusion is the difference between the type space and the value space in TypeScript:

• Type Space: This is where TypeScript defines types like number, string, boolean, Array<T>, and user-defined types like interfaces or types.

• Value Space: This is the actual JavaScript runtime where values like 5, 'hello', or ['item1', 'item2'] exist.

Understanding this separation is crucial because TypeScript types exist only during development (at compile-time) and are erased in the compiled JavaScript output.

2. Interface vs. Type

While both interface and type can be used to define object shapes, there are subtle differences:

• Interface: Best used when you need to define the shape of an object and can extend other interfaces. It's more suited for object-oriented programming models.

    typescriptCopy codeinterface Person {
      name: string;
      age: number;
    }
  

• Type: More flexible and can be used to define unions, intersections, tuples, or primitives. Use it for more complex or conditional types.

    typescriptCopy codetype Point = { x: number; y: number };
    type StringOrNumber = string | number;
  

3. Type Declarations vs. Type Assertions

• Type Declarations: You declare the type of a variable or function parameter. Type declarations enable TypeScript's type-checking capabilities and help catch errors early.

    typescriptCopy codeconst age: number = 25;
  

• Type Assertions: Use when you know more about a value than TypeScript does, and you want to override TypeScript's type inference. Use assertions sparingly, as they can lead to unsafe code.

    typescriptCopy codeconst input = document.getElementById('username') as HTMLInputElement;
    input.value = 'TypeScript';
  

4. Type Checking and Primitives

JavaScript has several primitive types (like string, number, boolean) and their object wrappers (String, Number, Boolean). TypeScript recognizes both but focuses on the primitive versions for type checking.

• TypeScript Primitives: Types like string, number, and boolean are key to defining most TypeScript code.

5. Type Checking Does Not Happen at Runtime

TypeScript is a static type checker; it does not enforce types at runtime. If you want to ensure runtime safety, you need to write runtime checks yourself.

6. Type Assertions and Type Declarations

Prefer type declarations over type assertions because declarations provide TypeScript with more information, helping it catch more errors. For example, this code avoids a common mistake:

typescriptCopy codeconst user = { name: "Alice", age: 25 }; // inferred type

versus:

typescriptCopy codeconst user = { name: "Alice", age: 25 } as const; // type assertion

7. The "Any" Type

Using any is like telling TypeScript to "turn off" type checking for a particular variable. It should be avoided wherever possible because it removes all the benefits TypeScript provides.

8. Type Inference

TypeScript can often infer the type of a variable or function return type:

typescriptCopy codeconst x = 12; // TypeScript infers that x is of type number

However, type inference does not work well for function parameters:

typescriptCopy codefunction greet(name: string) {
  return `Hello, ${name}`;
}

Explicitly typing parameters is necessary for proper type safety.

9. Excess Property Checking

By specifying types for objects, TypeScript checks if there are extra or missing properties, helping catch bugs:

typescriptCopy codeconst user = { name: "Alice", age: 30 };
const person: { name: string; age: number } = user; // OK

10. Widening and Narrowing

TypeScript uses widening and narrowing to infer more general or specific types.

• Widening: When TypeScript expands a specific type to a more general one.

    typescriptCopy codeconst x = 1; // Type is inferred as number (widened)
  

• Narrowing: When TypeScript reduces a broader type to a more specific one, based on control flow.

    typescriptCopy codeconst el = document.getElementById('foo');
    if (el) {
      el.innerHTML = 'Hello'; // Type is narrowed to HTMLElement
    }
  

11. Type Guards

You can define custom functions to help TypeScript narrow down types in complex scenarios:

typescriptCopy codefunction isString(value: any): value is string {
  return typeof value === 'string';
}

12. Contextual Typing

Avoid separating a value from its context. For example:

typescriptCopy codefunction panTo(where: [number, number]) {}
panTo([10, 20]); // OK

const loc = [10, 20]; // Bad, as the type context is lost

Better:

typescriptCopy codeconst loc: [number, number] = [10, 20];

13. Type Design Principles

• Be Liberal in What You Accept and Strict in What You Produce: Accept a broad range of inputs and produce specific outputs.

• Use the Narrowest Possible Scope for Types: The narrower your types, the more specific your functions and objects can be.

14. Version Management for Type Declarations

Understand that every package can have three versions to consider:

• The version of the package.

• The version of its type declarations (e.g., @types package).

• The version of TypeScript itself.

15. Use TSDoc for API Comments

Document your code using TSDoc, the TypeScript standard for inline documentation.

typescriptCopy code/**
 * Generate a greeting.
 * @param name Name of the person to greet
 * @param title The person's title
 * @returns A greeting formatted for human consumption.
 */
function greetFullTSDoc(name: string, title: string) {
  return `Hello ${title} ${name}`;
}

16. Provide a Type for this in Callbacks

Ensure you understand how this works and provide types for it in callbacks, especially when it's part of your API.

17. DOM Types

Know the differences between Node, Element, HTMLElement, and EventTarget. Use the most specific type possible to prevent errors.

18. Debugging TypeScript

Use source maps to debug your TypeScript code, ensuring you can trace errors back to your TypeScript code rather than the compiled JavaScript.