DEV Community: Pratik sharma

Best PDF Parsers for RAG Applications

Pratik sharma — Mon, 22 Sep 2025 17:06:14 +0000

Tool / Library	Strengths / Best For	Weaknesses / Limitations
Datalet (Marker)	Likely good for structured extraction, maybe layout awareness. Note: specific details depend on documentation.	May have limited community / maturity; possibly less flexible for unusual layouts.
llamaindex	Popular in the RAG / LLM community; good for embedding + indexing + pipelines. You can plug in different document loaders / parsers.	Parsing support depends on external libraries; handling really bad PDFs / scans may require additional modules / custom logic.
jina ai	Strong in search, embeddings, building vector indexes; likely has tools or connectors for document ingestion.	Might require configuration / customization for advanced table extraction or for scans / OCR.
Unstructured.io	Very strong in extracting structured info from complex documents; good tools for handling layout, splitting etc.	Might be more resource intensive; licensing / cost if using commercial or enterprise versions.
Vectorize.io	Good commercial options; probably optimized for speed / production usage.	May cost; may limit customization; handling odd edge cases might require fallback logic.
GroundX by eyelevel.ai	Likely focused, perhaps with custom models; possibly good quality for particular domains.	Might have less documentation / community; possibly domain-specific bias.
LangChain	Excellent orchestration framework; many existing document loaders that use PDF libraries + OCR; great for building full RAG pipelines.	LangChain itself is not a PDF extractor — quality depends on underlying extraction tool; for many edge cases you’ll need to extend/customize.
PyMuPDF (fitz)	Strong low-level library; very good for getting text, images, extracting metadata, positions. Fair speed.	Doesn’t do OCR out of the box; tables detection is minimal; complex layout rebuilding / semantic understanding has to be built on top.
pdf-js	Good for browser / NodeJS usage; rendering, interacting with PDFs in client side or server side. Can extract text.	Limited in table detection, forms, OCR; not ideal if you need heavy layout or image-based extraction.

How Atlassian’s Forge Quest Hackathon Helped Me Revive My Postman Doc App

Pratik sharma — Mon, 23 Jun 2025 13:13:13 +0000

Recently, I participated in the Forge Quest Hackathon by Atlassian—and it turned out to be exactly the kick I needed.

For a long time, I had let my Postman Doc app on the Atlassian Marketplace go stale. Life happens. Forge evolves. My app, once useful, had fallen behind—especially after major updates in the Atlassian Forge platform and the deprecation of older UI components.

But Forge Quest brought the spark back.

What is Forge Quest?

Forge Quest is Atlassian’s global hackathon for developers to build or upgrade apps using Forge, Atlassian’s modern cloud app development platform. The challenge? Build something cool using Forge, with bonus points if you ship it to the Marketplace.

For me, it wasn’t just about the challenge—it was the perfect opportunity to finally update my app and explore something I had been avoiding for a while: UI Kit 1.

The App: Postman Doc

The Postman Doc app helps teams embed API documentation directly into their Confluence pages, powered by Postman’s public docs. It was designed to reduce the back-and-forth between product managers, devs, and API consumers.

But since Forge and the Atlassian ecosystem are fast-evolving, my app had been flagged as deprecated due to lack of updates and use of outdated APIs.

Learning UI Kit 1

UI Kit 1 is the newer, more structured, and opinionated UI library for Forge. It offers:

Better layout and design consistency across Atlassian products.
Stronger support for accessibility.
Components like Form, TextField, ModalDialog, Select, and Table that feel native inside Confluence and Jira.

Before the hackathon, I had mostly stuck with the older UI Kit or used custom HTML rendering in Forge. But Forge Quest nudged me to modernize.

What I learned:

Migrating to UI Kit 1 wasn’t as daunting as I thought.
It dramatically improved the UX of my app. Components like DynamicTable and ModalDialog helped me clean up messy interfaces.
Forms became easier to validate and hook into Forge’s function backend.

What I Built

For the hackathon, I:

Refactored the core UI of the app to use UI Kit 1.
Added new features like searchable Postman collections, and smart error handling using ModalDialog.
Improved the layout and responsiveness across Confluence screen sizes.
Brought the app back to life on the Atlassian Marketplace 🎉

Final Thoughts

Forge Quest wasn’t just a hackathon for me—it was a nudge to learn, refactor, and relaunch. It reminded me how much value a well-timed community event can bring to indie developers like myself.

If you're someone who has old Forge apps gathering dust, or just want to explore Forge’s latest capabilities, I’d highly recommend jumping into the next Forge Quest or checking out the Forge developer documentation.

You might just find yourself shipping something you thought was long gone.

Check out the app: Postman Doc on Atlassian Marketplace
Try Forge: https://developer.atlassian.com/platform/forge/
Join the hackathon (if it’s still live): https://forgequest.devpost.com/

Creating a Performant Rectangle Selection Box with Callbacks Using Web Components

Pratik sharma — Fri, 07 Feb 2025 16:52:39 +0000

In this article, you'll learn how to create a performant rectangle selection box using web components and JavaScript. The objective is to build an interactive tool that allows users to select multiple elements within a defined rectangular area, with a callback function that provides all the elements within the selection.

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));
  document.addEventListener('touchstart', (event) => this.onTouchStart(event));
  document.addEventListener('touchend', (event) => this.onTouchEnd(event));
  document.addEventListener('touchmove', (event) => this.onTouchMove(event));
}

removeEventListeners() {
  document.removeEventListener('mousedown', this.onMouseDown);
  document.removeEventListener('mouseup', this.onMouseUp);
  document.removeEventListener('mousemove', this.onMouseMove);
  document.removeEventListener('touchstart', this.onTouchStart);
  document.removeEventListener('touchend', this.onTouchEnd);
  document.removeEventListener('touchmove', this.onTouchMove);
}

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:

The component listens for mouse events to define the selection rectangle.
When the selection completes, the selection-complete event fires with the selected elements.
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));
   document.addEventListener('touchstart', (event) => this.onTouchStart(event));
        document.addEventListener('touchend', (event) => this.onTouchEnd(event));
        document.addEventListener('touchmove', (event) => this.onTouchMove(event));
    }

    removeEventListeners() {
        document.removeEventListener('mousedown', this.onMouseDown);
        document.removeEventListener('mouseup', this.onMouseUp);
        document.removeEventListener('mousemove', this.onMouseMove);
 document.removeEventListener('touchstart', this.onTouchStart);
        document.removeEventListener('touchend', this.onTouchEnd);
        document.removeEventListener('touchmove', this.onTouchMove);
    }

  onTouchStart(event) {
      console.log("mobile touch start", event.touches[0])
        this.onMouseDown(event.touches[0]);
    }

    onTouchEnd(event) {
            console.log("mobile touch end", event.changedTouches[0]);

        this.onMouseUp(event.changedTouches[0]);
    }

    onTouchMove(event) {
                  console.log("mobile touch move", event.touches[0]);

        this.onMouseMove(event.touches[0]);
    }

    onMouseDown(event) {

        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.

CSS Animation Performance - CheatSheet

Pratik sharma — Fri, 07 Feb 2025 10:43:33 +0000

Here’s a comprehensive table of CSS properties categorized by their impact on browser rendering performance, specifically focusing on Layout, Paint, and Composite:

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

CSS Property	Layout	Paint	Composite	Notes
`width`, `height`	✅	❌	❌	Affects element and child layout
`margin`, `padding`	✅	❌	❌	Triggers layout changes
`border`	❌	✅	❌	Repaints element boundary
`box-shadow`	❌	✅	❌	Complex paints for shadows
`top`, `left`, `right`, `bottom`	✅	❌	❌	Reflows and triggers layout
`position`	✅	❌	❌	Changes element's positioning model
`display`	✅	❌	❌	Can remove or reflow elements entirely
`color`, `background-color`	❌	✅	❌	Simple paint update
`background-image`	❌	✅	❌	Complex paint updates
`transform`	❌	❌	✅	GPU accelerated; efficient compositing
`opacity`	❌	❌	✅	Composited efficiently
`z-index`	❌	❌	✅	Layer stacking order
`visibility`	❌	❌	✅	Affects visibility without layout
`overflow`	✅	❌	❌	Layout affected by scrollbars
`clip-path`	❌	❌	✅	Efficient compositing
`border-radius`	❌	✅	❌	Paint complexity increases
`filter`	❌	❌	✅	GPU optimized for modern browsers
`box-sizing`	✅	❌	❌	Changes size calculations
`font-size`, `font-family`	✅	✅	❌	Relayout and repaint text
`line-height`, `letter-spacing`	✅	✅	❌	Text rendering changes

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

Phase	Triggered By	Performance Impact
Layout	Size and position changes	High
Paint	Visual appearance changes	Moderate
Composite	GPU-based transforms and effects	Low

Further Read:

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

Reference:

10 Exciting Web Trends to Watch in 2025

Pratik sharma — Sun, 05 Jan 2025 13:59:42 +0000

Web GPU
Web Components
Container Queries
Css Animation → View Transition, Scroll Animation
Going Vanilla instead of Frameworks
Chrome Browser AI
New Component Based Libraries
1. Fancy Components
2. Aceternity UI
React 19
Routing Libraries
Signal API

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

Explaining Scoped Context in React with example

Pratik sharma — Sat, 21 Dec 2024 15:25:53 +0000

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:

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');
```
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');
```
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:

Top 10 Books on Design System that i Read last year

Pratik sharma — Sat, 14 Dec 2024 05:51:58 +0000

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, email me at pratik@coolhead.in . I will share them with you.

buy me a coffee: https://buymeacoffee.com/biomathcode

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

Mixins in typescript

Pratik sharma — Sat, 07 Dec 2024 12:45:01 +0000

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

takes a constructor,
creates a class that extends that constructor with new functionality
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://www.youtube.com/watch?v=LvjNGo5ALyQ]

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

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

https://javascript.info/mixins

Symbol in Javascript with Example

Pratik sharma — Sat, 30 Nov 2024 06:23:58 +0000

Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that's guaranteed to be unique. Symbols are often used to add unique property keys to an object that won't collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object. That enables a form of weak encapsulation, or a weak form of information hiding.

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.

Logging System with Proxy and Fetch

Pratik sharma — Sat, 30 Nov 2024 06:20:44 +0000

Proxy Object: The fetchLogger wraps the fetch function.
It uses the apply trap to intercept calls to fetch.
Request Logging:Logs the url and options of the request.
Response Handling: Logs the response status, status text, and URL.
Clones the response to ensure the body can be read multiple times.
Error Handling: Captures and logs any errors encountered during the fetch.
Using the Proxy: You can replace fetch globally by assigning the proxy to window.fetch.

// Create a logging wrapper for fetch using Proxy
const fetchLogger = new Proxy(fetch, {
    apply: (target, thisArg, args) => {
        // Log the request details
        const [url, options] = args;
        console.log("Fetch Request:");
        console.log("URL:", url);
        console.log("Options:", options);

        // Call the original fetch function
        return Reflect.apply(target, thisArg, args)
            .then(response => {
                // Log response details
                console.log("Fetch Response:");
                console.log("Status:", response.status);
                console.log("Status Text:", response.statusText);
                console.log("URL:", response.url);

                // Return the response for further use
                return response.clone(); // Clone to allow response reuse
            })
            .catch(error => {
                // Log errors
                console.error("Fetch Error:", error);
                throw error; // Rethrow the error for caller handling
            });
    }
});

// Example usage of the logging fetch
fetchLogger("https://jsonplaceholder.typicode.com/posts", {
    method: "GET",
    headers: {
        "Content-Type": "application/json"
    }
})
    .then(response => response.json())
    .then(data => console.log("Data:", data))
    .catch(error => console.error("Error in fetch:", error));

Replace Global fetch with Logging

window.fetch = fetchLogger;

Garbage Collector in javascript

Pratik sharma — Tue, 15 Aug 2023 18:31:36 +0000

In JavaScript, memory management is handled by the JavaScript engine and its runtime environment. One crucial memory management component is the Garbage Collector (GC), which is responsible for automatically identifying and reclaiming memory that the program no longer uses.

This helps prevent memory leaks and ensures efficient memory utilization. The specifics of how the Garbage Collector works can vary between different JavaScript engines, but I'll provide a general overview of the process.

Roots:

Roots are the starting points for the Garbage Collector to determine which objects are in use and which are not. Roots include:

Global variables in JavaScript code.
Local variables of currently executing functions.
Reference chains from roots to other objects, such as objects referenced by properties of other objects.

Mark and Sweep Algorithm:

The most common type of Garbage Collection algorithm used in JavaScript is the "Mark and Sweep" algorithm. Here's how it works:

Mark Phase: The Garbage Collector traverses the entire object graph starting from a set of roots (global variables, local variables, and other references that are directly accessible from the program's execution context). It marks all objects and references that are still reachable as "alive."
Sweep Phase: After marking all reachable objects, the Garbage Collector sweeps through the memory, deallocating memory occupied by objects that were not marked as "alive" during the mark phase. These unreferenced objects are considered garbage and are candidates for collection.

Reference Counting (Limited Use):

Some older JavaScript engines might use reference counting as part of their Garbage Collection strategy. This involves keeping track of the number of references to an object. When the reference count drops to zero, the object can be safely collected. However, this approach doesn't handle circular references well and can lead to memory leaks in certain cases.

Let's consider a simple example to illustrate how the Mark and Sweep algorithm and the Reference Counting approach work differently in terms of garbage collection.

Example:
Let's say we have two objects objA and objB with a circular reference between them. In the Mark and Sweep algorithm, we'll see how the GC handles this circular reference, and in the Reference Counting approach, we'll see its limitations.

In the Reference Counting approach, the reference counts of objA and objB remain nonzero due to the circular reference, preventing the objects from being garbage collected, and thus leading to a memory leak.

// Reference Counting Approach

function exampleReferenceCounting() {
  let objA = {};
  let objB = {};

  objA.refCount = 1; // objA is referenced by itself
  objB.refCount = 1; // objB is referenced by itself

  objA.ref = objB;
  objB.ref = objA;

  // At this point, both objA and objB are referenced

  objA = null;
  objB = null;

  // At this point, no direct reference to objA or objB exists

  // In reference counting, even though objA and objB have circular references,
  // their reference counts don't drop to zero because they still reference themselves
  // This leads to a memory leak, as the memory occupied by these objects is not reclaimed
}

In the Mark and Sweep algorithm, the Garbage Collector is able to identify the circular reference between objA and objB during the mark phase, and during the sweep phase, it can deallocate the memory of these objects.

// Mark and Sweep Algorithm

function exampleMarkAndSweep() {
  let objA = {};
  let objB = {};

  objA.ref = objB;
  objB.ref = objA;

  // At this point, both objA and objB are reachable
  // However, no root directly references them

  objA = null;
  objB = null;

  // At this point, no direct reference to objA or objB exists

  // The Garbage Collector will identify the circular reference
  // and mark objA and objB as "alive" during the mark phase

  // During the sweep phase, the GC will recognize that
  // there are no external references to objA and objB
  // and will deallocate their memory, thus breaking the circular reference
}

This example highlights the differences between the two approaches, with the Mark and Sweep algorithm being more effective at handling complex reference structures like circular references, while Reference Counting has limitations, particularly when dealing with cyclic references. Modern JavaScript engines generally use the Mark and Sweep approach, often with additional optimizations like generational garbage collection.

References:

How does garbage collection work in JavaScript? | Deep dive | Code along with Vishal https://www.youtube.com/watch?v=FZkCh_GeftY
Garbage collection https://javascript.info/garbage-collection

Demystifying JavaScript Terminology

Pratik sharma — Wed, 09 Aug 2023 12:21:54 +0000

Learn the terms that are highly used in javascript, and that would help you learn javascript better.

Syntax Parser: A Program that reads and determines what it does and if the grammar is valid.
Lexical Environment: where something sits physically in the code you write.
Execution Contexts: A wrapper to help the code that is running.
Variable Environment: where the variables live and how they relate.
Scope: Where variables are available in your code.
Callbacks: A callback is a function passed as an argument to another function. This technique allows a function to call another function. A callback function can run after another function has finished.
Asynchronous: two or more objects or events not existing or happening at the same time.
Asynchronous Callback: Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished.

ELI5:

Imagine you're playing with building blocks. You ask your friend to tell you when they're done building a tower. When they're finished, they'll shout "done!" That shout is like the asynchronous callback – your friend lets you know when they're done with their task, so you can continue playing without waiting for them.
Event Queue: The event queue is responsible for sending new functions to the stack for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution.
Types: Types help us understand and manage the different kinds of data we use in our code. Think of them as different categories for things.
Dynamic Typing: Dynamic typing is a concept in programming where the data type of a variable is determined at runtime, while the program is running, rather than at the time of writing the code
Static Typing: Static typing is a concept in programming where the data type of a variable is determined and explicitly declared at the time of writing the code, and it cannot change during runtime.
Primitive Types: A type of data that represents a single value.
7 data types in Javascript:
1. Undefined
2. Null
3. Boolean
4. String: sequence of characters
5. Number: Floating point number
6. Symbol
7. BigInt
Operators: Take two parameters and return a single value;
Infix notation: Infix notation is the notation commonly used in arithmetical and logical formulae and statements.
Operator Precedence: which operator functions get called first?
Associativity: what order operator functions get called in left-to-right or right-to-left
Coercion: Converting a value from one type to another
First Class Functions: Everything you can do with other types, you can do with functions.
Function Expression: A Function Expression works just like a function declaration or a function statement, the only difference is that a function name is NOT started in a function expression, that is, anonymous functions are created in function expressions. The function expressions run as soon as they are defined.
Function Statement: A Function Declaration( or a Function Statement) defines a function with the specified parameters without requiring a variable assignment. They exist on their own, i.e, they are standalone constructs and cannot be nested within a non-function block. A function is declared using the function keyword.
IIFE: IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
Prototype: A JavaScript prototype is a shared set of properties and methods that objects can inherit from, serving as a blueprint for creating and interacting with objects.

ELI5:

Alright, imagine you have a special toy box that has all the rules for making other toy boxes. This special toy box is like the "prototype" in JavaScript.

Every time you want to make a new toy box that works just like the special one, you can use it as a guide. This means the new toy box will have the same features and abilities as the special toy box.

So, the special toy box is the "prototype" that shows other toy boxes how to be, and those other toy boxes are like objects in JavaScript that use the prototype's rules to work properly.

DEV Community: Pratik sharma

Best PDF Parsers for RAG Applications

How Atlassian’s Forge Quest Hackathon Helped Me Revive My Postman Doc App

What is Forge Quest?

The App: Postman Doc

Learning UI Kit 1

What I Built

Final Thoughts

Creating a Performant Rectangle Selection Box with Callbacks Using Web Components

1. Getting DOM Elements within a Rectangle

How It Works:

2. Drawing/Rendering the Selection UI

3. Creating a Component Using Web Components

Constructor

Connecting and Disconnecting Event Listeners

4. Adding Props/Attributes to Web Components

5. Propagating Custom Events with Callbacks

6. Using the Component and Listening for Callbacks

How It Works:

Full Javascript Code

Codepen

Conclusion

CSS Animation Performance - CheatSheet

Legend:

Performance Tip:

How to use Will-change ?

Browser Rendering :

1. Layout (Reflow)

2. Paint (Repaint)

3. Composite (Layer Composition)

Summary Table

Further Read:

Reference:

10 Exciting Web Trends to Watch in 2025

1. Web GPU

2. Web Components

3. Container Queries

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

5. Going Vanilla Instead of Frameworks

6. Chrome Browser AI

7. New Component-Based Libraries

8. React 19

9. Routing Libraries

10. Signal API

Explaining Scoped Context in React with example

Explaining Scoped Context in React with Examples

What is React Context?

Why Scoped Context?

Challenges in Compound Components

Example with Radix Primitives

Scoped Context Solution

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

Benefits of Scoped Context

How It Applies to the Example

References:

Top 10 Books on Design System that i Read last year

Creating a Design System - The Why Book

1. CONTINUOUS DISCOVERY HABITS - by Teresa Torres

2. Laying the Foundations - by Andrew Couldwell

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

4. Articulating Design Decisions:

Designing Design System - The What Books

1. Design Systems - By Alia Kholmatova

2. Design School - Type

3. Design School - Layout

Building Design System - The How Books

1. Frontend Architecture for Design Systems

2. Design System for Developers - By Michael Mangialardi

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

4. Practical Web Inclusion and Accessibility - Ashley Firth

5. Inclusive Design Patterns - By Heydon Pickering

Mixins in typescript

References:

Symbol in Javascript with Example

Example: Using Symbol as Unique Property Keys

Example: Using Symbol.iterator to Make an Object Iterable

Symbols usable in popular npm library :

Logging System with Proxy and Fetch

Replace Global fetch with Logging

Garbage Collector in javascript

Example: Using `Symbol` as Unique Property Keys

Example: Using `Symbol.iterator` to Make an Object Iterable