Howto Use IMask.js for Input Masking in JavaScript Forms

Tue, 17 Mar 2026 00:00:00 GMT

Introduction

Form handling is one of the most underestimated parts of frontend development.

It looks simple: just a few inputs, maybe a submit button. But in reality, forms are where most user frustration happens. Incorrect formats, unclear validation rules, and inconsistent input behavior all lead to errors, abandoned flows, and bad data.

Input masking solves this at the source.

Instead of reacting to bad input after submission, you guide the user while they type.

In this article, we’ll go deep into IMask.js — a lightweight, flexible library that allows you to control input formatting in real time. This is not just a basic tutorial. You’ll learn patterns, edge cases, and production-ready practices.

Why Input Masking Is a Core UX Layer

Without masking:

users guess formats
validation fails often
error messages increase friction
backend receives inconsistent data

With masking:

input is guided instantly
errors are prevented early
formatting becomes predictable
UX feels faster and more professional

Masking is not just visual formatting — it's a data normalization layer at the UI level.

What Makes IMask.js Different

IMask.js stands out because it combines flexibility with performance.

Key characteristics:

no dependencies
small bundle (~15kb gzipped)
works with plain JS and frameworks
supports multiple mask types
allows custom logic via functions
handles mobile input well

Unlike many libraries, IMask doesn’t lock you into one approach. It gives you primitives to build your own behavior.

Installation

pnpm add imask

import MaskCore from "imask"

Mental Model of IMask

Before writing code, understand how IMask works internally.

There are three key concepts:

Input Element – the DOM node
Mask Configuration – rules defining formatting
Mask Instance – runtime controller

const inputNode = document.querySelector("#phone")

const maskController = MaskCore(inputNode, {
  mask: "+{1} (000) 000-0000"
})

The instance acts as a bridge between raw input and formatted output.

Basic Example: Phone Input

<input id="contact-phone" placeholder="+1 (___) ___-____" />

const phoneNode = document.querySelector("#contact-phone")

const phoneController = MaskCore(phoneNode, {
  mask: "+{1} (000) 000-0000"
})

As the user types, formatting is applied automatically.

Static Masks (Fixed Structure)

Use static masks when format is strictly defined.

const cardNode = document.querySelector("#card")

const cardController = MaskCore(cardNode, {
  mask: "0000 0000 0000 0000"
})

Best for:

credit cards
IDs
formatted codes

Dynamic Masks (Multiple Formats)

const phoneDynamic = MaskCore(document.querySelector("#phone"), {
  mask: [
    { mask: "+{1} (000) 000-0000" },
    { mask: "+{44} 0000 000000" }
  ]
})

IMask automatically selects the correct pattern based on input.

Number Mask (Currency & Prices)

const amountNode = document.querySelector("#amount")

const currencyController = MaskCore(amountNode, {
  mask: Number,
  min: 0,
  max: 1000000,
  thousandsSeparator: ",",
  radix: ".",
  precision: 2,
  prefix: "$ "
})

This handles:

formatting
decimal precision
limits
separators

Date Mask

const dateNode = document.querySelector("#date")

const dateController = MaskCore(dateNode, {
  mask: Date,
  pattern: "yyyy-mm-dd",
  lazy: false
})

This prevents invalid formats like 2026-99-99.

Regex Mask

const emailNode = document.querySelector("#email")

const emailController = MaskCore(emailNode, {
  mask: /^\S+@\S+\.\S+$/
})

Good for:

simple validation rules
constrained input

Function Mask (Full Control)

const evenNode = document.querySelector("#even")

const evenController = MaskCore(evenNode, {
  mask: (value) => {
    const parsed = Number(value)
    return parsed % 2 === 0 ? value : value.slice(0, -1)
  }
})

This approach is powerful but should be used carefully.

Real-World Example: Credit Card Detection

const ccNode = document.querySelector("#cc")

const ccController = MaskCore(ccNode, {
  mask: "0000 0000 0000 0000"
})

ccController.on("accept", () => {
  const raw = ccController.unmaskedValue

  let type = "unknown"

  if (/^4/.test(raw)) type = "visa"
  else if (/^5[1-5]/.test(raw)) type = "mastercard"
  else if (/^3[47]/.test(raw)) type = "amex"

  console.log(type)
})

Events System

IMask exposes lifecycle hooks:

maskController.on("accept", () => {
  console.log(maskController.value)
})

maskController.on("complete", () => {
  console.log("complete")
})

maskController.on("reject", (input) => {
  console.log("rejected", input)
})

These allow integration with UI state, validation, and analytics.

Advanced Configuration

MaskCore(inputNode, {
  mask: "0000-00-00",
  lazy: true,
  nullable: false,
  unmask: true,
  placeholderChar: "_",
  prepare: (val) => val.toUpperCase(),
  validate: (val) => val.length === 10
})

Important options:

lazy → allow partial input
unmask → return raw value
prepare → transform input
validate → enforce rules

React Integration

import { useEffect, useRef } from "react"
import MaskCore from "imask"

export function MaskedInput() {
  const nodeRef = useRef(null)

  useEffect(() => {
    const instance = MaskCore(nodeRef.current, {
      mask: "+{1} (000) 000-0000"
    })

    return () => instance.destroy()
  }, [])

  return <input ref={nodeRef} />
}

Common Pitfalls

1. Changing Value Directly

Wrong:

inputNode.value = "123"

Correct:

maskController.value = "123"

2. Autofill Conflicts

<input autocomplete="off" />

Or sync manually:

inputNode.addEventListener("change", () => {
  maskController.updateValue()
})

3. Mobile Input Issues

Use:

lazy: true

to reduce input jitter.

Best Practices

keep masks readable
avoid over-engineering regex
always use unmaskedValue for backend
keep commits atomic (if integrating with forms logic)
test on mobile devices

When NOT to Use Masking

Avoid masking when:

input is free text
validation is business-driven (not format-driven)
accessibility would suffer

Conclusion

IMask.js is not just a utility — it's a UX upgrade.

It allows you to:

enforce structure at input level
reduce validation complexity
improve perceived performance
create predictable user flows

Once integrated properly, your forms stop being fragile.

They become reliable systems.

And in modern frontend development, that’s a huge advantage.

Git for Beginners: Branches, Commits, and Your First Pull Request

Mon, 16 Mar 2026 00:00:00 GMT

Git is one of the most important tools in modern software development. Nearly every team relies on it to manage source code, collaborate, and track project history.

Yet for beginners, Git often feels intimidating.

Developers create branches with names like test123 or asd. Commits say things like “update”, “fix”, or even “...”. Pull requests contain dozens of unrelated files, temporary changes, and sometimes even accidental edits.

And the worst part? Many developers don’t realize this is a problem.

In a real team environment, sloppy Git usage quickly turns into chaos. Imagine trying to find the commit that broke the build when the history looks like this:

fix
update
changes
fix again

Good luck.

Git is not just a storage system for code. It is a communication tool between developers.

In this guide, you'll learn how Git actually works and how to use it in a way that makes collaboration smooth and professional.

Git Is Not Magic — It’s Just a Graph

Before learning commands, it's important to understand what Git really stores.

Git keeps project history as a graph of commits.

Each commit represents a snapshot of the project at a specific moment in time.

A commit contains:

file changes
author information
timestamp
a unique hash
a commit message

A branch is simply a pointer to a commit.

When you create a new commit, the branch pointer moves forward.

A simplified commit graph might look like this:

A --- B --- C (main)
       \
        D --- E (feature/auth)

In this example:

main contains the stable project history
feature/auth is a separate branch for developing a new feature
once the feature is complete, it gets merged back into main

This isolation is what allows teams to work safely without interfering with each other.

Types of Git Branches

For small projects, teams often only use one main branch and a few temporary branches.

But larger projects usually follow a structured workflow. One popular example is Git Flow.

Git Flow defines several types of branches.

Main branches

main

The production-ready branch. Everything here should be stable and deployable.

develop

The integration branch where new features are combined before release.

Temporary branches

feature/*

Branches used to develop new functionality.

Example:

feature/user-authentication

release/*

Used to prepare a new release.

Tasks may include:

bug fixes
documentation updates
version bumps

hotfix/*

Urgent fixes applied directly to production code.

Example:

hotfix/security-patch

A simpler workflow for beginners

Most teams teaching Git to newcomers use a simpler model:

main
  ├─ feature/add-login
  ├─ feature/create-api
  └─ fix/email-validation

Each task gets its own branch.

When the task is done, the branch is merged and deleted.

Creating Your First Branch

git clone https://github.com/example/project.git

Move into the project directory:

cd project

Make sure your main branch is up to date:

git switch main
git pull origin main

Now create a new branch for your task:

git switch -c feature/add-user-model

This command:

creates a new branch
switches to it immediately

Older Git versions used:

git checkout -b feature/add-user-model

Both commands do the same thing.

Naming Branches Correctly

Branch naming conventions matter more than beginners think.

Bad example:

branch1
new-feature
test

Good examples:

feature/add-user-service
bugfix/login-error
hotfix/token-expiration

General rules:

use lowercase
avoid spaces
use hyphens or slashes
avoid non-ASCII characters

Clear names help the entire team understand what the branch contains.

Making Meaningful Commits

After writing some code, the next step is creating commits.

Imagine we add a simple JavaScript class:

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

Before committing, Git needs to know which files to include.

Add the file to the staging area:

git add src/main/project/User.js

You can also add all changes:

git add .

But this is risky — temporary files might accidentally be committed.

It is usually safer to add files explicitly.

Creating the commit

git commit -m "Add User class"

This works, but the message could be better.

A good commit message answers two questions:

What changed?
Why did it change?

Writing Good Commit Messages

A commonly used structure is:

Short summary (max ~50 characters)

Detailed explanation of why the change was needed.
Explain important technical details if necessary.

Example:

Add User class for authentication module
Stores name and email fields used in login flow.
Email must be unique and will be validated by database
constraints in the next task.

Good commit messages help future developers understand the reasoning behind code changes.

And often that future developer is you six months later.

Conventional Commits

Many teams use the Conventional Commits standard.

It adds a prefix describing the type of change.

Examples:

feat: add password reset endpoint
fix: prevent crash on empty email
docs: update installation guide
refactor: move validation logic to service
test: add login unit tests
chore: update dependencies

Common prefixes:

Prefix	Meaning
feat	new feature
fix	bug fix
docs	documentation changes
style	formatting only
refactor	code improvements without behavior change
test	new or updated tests
chore	tooling or configuration changes

Example commit history:

feat: add User entity
fix: validate email format
refactor: extract email validation utility
test: add negative login tests

This makes the project history easy to understand.

It also enables tools that automatically generate changelogs.

Sending Code to GitHub

Once your work is committed, push it to the remote repository.

git push origin feature/add-user-model

If the branch doesn't exist on the server yet, Git will create it.

After pushing, go to GitHub (or GitLab) and you'll see a button:

Create Pull Request

What Is a Pull Request?

A Pull Request (PR) is a request to merge your changes into another branch.

Usually:

feature branch → main

Pull requests allow teammates to:

review code
suggest improvements
detect bugs early

This …

Meet Effect TS: A New Way to Structure TypeScript Apps

Fri, 13 Mar 2026 00:00:00 GMT

The JavaScript ecosystem evolves extremely fast. New frameworks appear constantly, each promising better performance, better developer experience, or a simpler programming model.

Effect TS is different.

It is not primarily a UI framework. It is not a backend framework in the traditional sense either. Instead, Effect is an attempt to solve something deeper: how complex TypeScript applications should be structured.

Most real-world applications suffer from the same problems:

asynchronous code becomes messy
errors are unpredictable
dependency injection becomes fragile
background tasks are hard to manage
libraries do not compose well together

Effect TS approaches these problems from a new angle. Instead of solving them separately, it introduces a unified programming model where errors, dependencies, concurrency, and resources are all part of the type system.

At first glance this model may look unusual. But once developers start building real systems with it, many realize that it solves issues they previously handled with dozens of separate libraries.

This article introduces the core ideas behind Effect and explains why more developers are experimenting with it in their TypeScript projects.

Why Developers Are Trying Effect

Effect has been gaining attention because it combines several powerful ideas into a single framework.

Below are ten practical reasons why developers start exploring it.

1. Errors Become Part of the Type System

Traditional JavaScript error handling is chaotic. A function can throw anything: an Error instance, a string, or even an arbitrary object.

In many projects this leads to code where the real failure scenarios are not clearly defined.

Effect changes this by making errors explicit.

Instead of writing:

async function getUser(id: string): Promise<User>

you describe both success and failure:

Effect<User, UserNotFoundError | NetworkError>

Now the compiler knows exactly which errors are possible. When those errors are handled later, the type system verifies that no cases were forgotten.

This makes applications far more predictable.

2. Dependency Injection Without Magic

Many backend frameworks use dependency injection containers based on decorators or runtime reflection.

While these systems work, they also hide dependencies behind runtime behavior.

Effect takes a different approach.

Dependencies are represented directly in types. If a function requires a service, the type signature reflects that requirement. The compiler ensures the dependency is provided before the program runs.

This eliminates an entire category of runtime errors.

3. Testing Becomes Much Simpler

Because dependencies are explicit, testing becomes easier.

Instead of mocking modules globally or configuring complicated containers, you can simply replace a service implementation with a test version.

This leads to tests that are:

easier to understand
easier to maintain
less dependent on internal implementation details

For large systems this improvement alone can be extremely valuable.

4. Everything Is Designed to Compose

Effect encourages a compositional style of programming.

Instead of deeply nested async code, logic is built as small pieces that combine through pipelines.

For example:

pipe(
  fetchUsers(),
  Effect.map(filterActiveUsers),
  Effect.tap(logUserCount),
  Effect.flatMap(saveUsers)
)

Each step transforms the previous result.

This approach keeps complex workflows readable and easy to refactor.

5. Gradual Adoption Is Possible

One of the biggest advantages of Effect is that it does not require rewriting an entire application.

Existing Promise-based code can be wrapped using helper utilities. Effects can also be executed as regular Promises.

This means teams can adopt Effect incrementally. A project might start with a few critical services and expand from there.

6. Concurrency Is Built Into the Model

JavaScript applications often require complex asynchronous workflows.

Typical solutions involve combining:

Promise.all
retry libraries
AbortController
custom scheduling logic

Effect replaces this with a unified concurrency model.

The framework provides tools for:

parallel execution
task cancellation
retries with backoff
scheduling
background tasks

All using the same abstractions.

7. A Rich Built-In Toolkit

Effect is not just a runtime. It also includes a large ecosystem of utilities.

Examples include:

Streams
Queues
PubSub channels
Schedulers
Date/time helpers
transactional memory
schema validation

Instead of installing many unrelated libraries, developers often rely on the tools provided by Effect itself.

This reduces fragmentation in large codebases.

8. Observability Is Built In

Modern applications require visibility into their behavior.

Logging, metrics, and tracing are essential for debugging and monitoring production systems.

Effect integrates observability directly into the framework and supports standards such as OpenTelemetry.

This makes it easier to instrument applications without complex integrations.

9. A Growing Ecosystem

The core Effect team maintains several official packages that extend the framework.

Some examples include:

@effect/platform -- platform utilities like HTTP and filesystem
@effect/sql -- typed database access
@effect/cli -- command‑line application framework
@effect/rpc -- typed remote procedure calls
@effect/cluster -- primitives for distributed systems
@effect/ai -- abstractions for language model integrations

Because these packages follow the same design philosophy, they integrate smoothly with each other.

10. Strong Type Feedback Helps AI Tools

AI‑assisted development tools rely heavily on compiler feedback.

Effect's strong typing provides extremely clear signals when generated code is incorrect.

This often leads to faster corrections and fewer runtime bugs when using AI coding assistants.

The Core Idea: Effects

At the heart of the framework lies a single abstraction:

Effect<A, E, R>

This type represents a computation.

The three parameters describe:

A --- the successful result
E --- the error type
R --- required dependencies

Compared to a Promise, which only represents success, Effect provides a complete description of a computation.

This allows the compiler to reason about behavior that would otherwise only appear at runtime.

Creating Effects

The framework provides several helpers for constructing effects.

For example:

const value = Effect.succeed(42)

Creating a failure:

const error = Effect.fail("Unexpected error")

Wrapping synchronous logic:

const random = Effect.sync(() => Math.random())

These operations describe work rather than executing it immediatel…

Howto Deploy OpenClaw and Build Your Personal AI Second Brain

Fri, 13 Mar 2026 00:00:00 GMT

Most AI assistants today are little more than chat interfaces. They answer questions but cannot access your tools, remember your preferences, or perform real work. OpenClaw takes a different approach.

Instead of functioning purely as a chatbot, OpenClaw acts as a programmable cognitive partner. It can:

remember long‑term context
connect to external tools
automate workflows
run entirely on infrastructure you control

This guide explains how to deploy OpenClaw from scratch and configure it on Windows, macOS, or Linux.

By the end of this tutorial you will have a working OpenClaw instance running locally.

Why Use OpenClaw

Private Deployment

All conversations and memory stay on your own machine or server.

Tool Integration

OpenClaw can interact with tools such as:

GitHub
calendars
APIs
automation workflows

Persistent Memory

OpenClaw includes both short‑term and long‑term memory, allowing it to remember:

user preferences
project details
conversation context

Open Source

OpenClaw is released under the MIT license, meaning the entire system is fully auditable and customizable.

System Requirements

Minimum environment:

Node.js 18+
npm or pnpm
8 GB RAM recommended
2 GB disk space

Supported platforms:

macOS
Linux
Windows (PowerShell or WSL2)

Verify Your Environment

macOS / Linux

node --version
npm --version

If Node is missing, install it from:

https://nodejs.org

Installation Method 1: One‑Step Installer

macOS / Linux

curl -fsSL https://docs.openclaw.ai/install.sh | bash

After installation open:

http://localhost:18789

Windows (PowerShell)

Clone the repository and start the gateway manually:

git clone https://github.com/openclawai/openclaw.git
cd openclaw
npm install
npm run start:gateway

Windows with WSL2 (Recommended)

Install WSL:

wsl --install

Then inside WSL:

curl -fsSL https://docs.openclaw.ai/install.sh | bash

Access the interface via:

http://localhost:18789

Installation Method 2: Manual Installation

Clone Repository

git clone https://github.com/openclawai/openclaw.git
cd openclaw

Install Dependencies

npm install -g pnpm
pnpm install

npm install

Configure Workspace

macOS / Linux

export OPENCLAW_WORKSPACE=~/.openclaw/workspace
mkdir -p $OPENCLAW_WORKSPACE

Windows PowerShell

setx OPENCLAW_WORKSPACE "%USERPROFILE%\.openclaw\workspace"
mkdir %USERPROFILE%\.openclaw\workspace

Copy Configuration

cp config.example.yaml config.yaml

Windows

copy config.example.yaml config.yaml

Start Gateway

pnpm start:gateway

Docker Deployment

Create docker-compose.yml

    version: "3.8"

    services:
      openclaw:
        image: ghcr.io/openclaw/openclaw:latest
        container_name: openclaw
        ports:
          - "18789:18789"
          - "18792:18792"
        environment:
          - OPENCLAW_WORKSPACE=/workspace
          - NODE_ENV=production
        volumes:
          - ./workspace:/workspace
          - ./config.yaml:/app/config.yaml
          - ./logs:/var/log/openclaw
        restart: unless-stopped

Start the container:

docker-compose up -d

View logs:

docker-compose logs -f

Configuring AI Models

Example configuration in config.yaml:

    agents:
      defaults:
        model: "siliconflow/deepseek-ai/DeepSeek-V3.2"

Alternative models:

openai/gpt-4
anthropic/claude-3-opus
google/gemini-2.0

Enabling Skills

Skills allow OpenClaw to interact with external services.

Example configuration:

    skills:
      enabled:
        - github
        - weather

Install additional skills:

openclaw skills install github

Creating Your First Custom Skill

Create directory:

mkdir ~/.openclaw/workspace/skills/my-skill

Create SKILL.md:

# Custom Skill

## Description
Automation skill for internal APIs.

## Usage
/my-skill [arguments]

## Capabilities
- API access
- file reading
- workflow automation

Troubleshooting

Port Already In Use

macOS / Linux

lsof -i :18789

Windows

netstat -ano | findstr 18789

Kill process:

Linux/macOS

pkill -f openclaw

Windows

taskkill /PID <pid> /F

Conclusion

OpenClaw is more than a chatbot. It is a programmable AI platform capable of integrating with real workflows, remembering context, and evolving through custom skills.

Once deployed, it can become a powerful personal AI infrastructure layer that helps automate tasks, analyze code, and manage complex workflows.

For developers interested in building their own AI ecosystem, OpenClaw provides a strong foundation for creating a true digital second brain.

Friday Links #36 — JavaScript Ecosystem Weekly

Fri, 13 Mar 2026 00:00:00 GMT

The JavaScript ecosystem never slows down.
Over the past two weeks we’ve seen major updates across runtimes, frameworks, tooling, and security.

In this issue of Friday Links, we highlight the most interesting developments across the JavaScript world — from infrastructure changes and new tools to security research and ecosystem trends.

🧠 Ecosystem Highlights

TypeScript 6 Prepares the Path to TS7

The TypeScript team released an early preview of TypeScript 6.

This release is mainly about internal changes preparing for the future Go-based compiler planned for TypeScript 7.

Key goals:

faster compilation
reduced memory usage
better incremental builds
improved large project performance

Large monorepos could see dramatic speed improvements once the Go compiler lands.

Deno 2.7 Improves Node Compatibility

The latest Deno runtime release continues improving Node compatibility.

Highlights:

improved npm integration
Node API compatibility
Temporal API stabilization

Example:

const now = Temporal.Now.instant()
console.log(now.toString())

📜 Articles & Tutorials

Under the hood: Security architecture of GitHub Agentic Workflows

Beating JavaScript Performance Limits With Rust and N-API: Building a Faster Image Diff Tool

The Different Ways to Select <html> in CSS

The Big Gotcha of Anchor Positioning

How to steal npm publish tokens by opening GitHub issues

How to Decode a VIN in JavaScript

Making a Flappy Bird clone using pure HTML and CSS, no JavaScript

How to build a pnpm monorepo, the right way

React is changing the game for streaming apps with the Activity component

Using CSS animations as state machines to remember focus and hover states with CSS only

You Don’t Know HTML Tables

5 React Hooks Techniques to Improve Component Performance

⚒️ Tools

Repomix — Turn Any Repo Into a Single AI-Readable File

Repomix packs an entire repository into a single AI-friendly document.

Cursor Cloud Telegram Connector

npmx is an experimental tool designed to improve npm package exploration.

Wely — Lightweight Web Component Framework

Ink allows developers to build CLI tools using React components.

Cron Expression Generator

📚 Libs

Node File Trace - determines exactly which files a Node application needs to run.

JavaScript Minification Benchmarks: SWC Still Leads

RevoGrid - High-Performance Data Grid Component

VMPrint - A pure-JS, tiny typesetting engine with bit-perfect PDF output on everything—from Cloudflare Workers to the browser.

markdown-to-jsx - A very fast and versatile markdown toolchain. Output to AST, React, React Native, SolidJS, Vue, HTML, and more!

clipboardy - Access the system clipboard (copy/paste)

⌚ Releases

Solid v2.0.0 Beta: The <Suspense> Era Comes to an End

After a long experimental phase, Solid 2.0 has released its first beta, introducing native asynchronous reactivity as a core feature of the framework.

In this new model, reactive computations can directly return Promises or async iterables, and Solid’s reactive graph will automatically suspend and resume around those async operations. This removes much of the complexity developers previously had to manage when dealing with asynchronous state.

One notable change is that <Suspense> has been retired. For initial renders, it is now replaced by a simpler component called <Loading>.

Astro 6 is here!

Node.js 25.8.0 (Current)

ESLint v10.0.3 released

Ember 6.11 Released

Ionic Framework 8.8

React Native 0.85 RC.0, pnpm 10.32, Jest 30.3, Recharts 3.8, OpenPlayer.js 3.0.2, Prisma 7.5, SQLite JS 1.3, React Helmet Async 3.0, Preact 10.29.0

📺 Videos

Build Your Own Video Sharing App – Loom Clone with Next.js and Mux JavaScript Tutorial

You Can Just Ship Agents: Architecting for the Agentic Era | Dom Sipowicz, Vercel

The Future of TypeScript

Build Your Own Video Sharing App – Loom Clone with Next.js and Mux JavaScript Tutorial

Cloudflare just slop forked Next.js…

7 new open source AI tools you need right now…

Zod

Valibot

Zod has been the standard for years. Valibot, however, is a newer library designed with a different philosophy: smaller bundles and faster validation.

Why Validation Libraries Matter

TypeScript provides compile‑time guarantees, but it cannot guarantee runtime correctness.

Example:

const response = await fetch("/api/user/1")
const user = await response.json()

Runtime data might not match expectations.

Validation libraries ensure data integrity before it reaches business logic.

Validating API Responses with Valibot

import * as v from "valibot"

const ProductSchema = v.object({
  id: v.number(),
  title: v.string(),
  price: v.number(),
  rating: v.number(),
  images: v.array(v.string())
})

type Product = v.InferOutput<typeof ProductSchema>

export async function loadProduct(id:number):Promise<Product>{

  const res = await fetch(`https://dummyjson.com/products/${id}`)
  const data = await res.json()

  try{
    return v.parse(ProductSchema,data)
  }
  catch(error){
    console.error("Invalid API response",error)
    throw new Error("Product validation failed")
  }

}

Validating Form Input

import * as v from "valibot"

const RegistrationSchema = v.object({

  username:v.pipe(
    v.string(),
    v.minLength(3)
  ),

  email:v.pipe(
    v.string(),
    v.email()
  ),

  age:v.pipe(
    v.string(),
    v.digits(),
    v.transform(Number)
  ),

  password:v.pipe(
    v.string(),
    v.minLength(6)
  )

})

type RegistrationData = v.InferOutput<typeof RegistrationSchema>

Cross‑Field Validation

const RegistrationSchema = v.pipe(

  v.object({

    email:v.pipe(
      v.string("Email must be text"),
      v.email("Enter a valid email")
    ),

    age:v.pipe(
      v.string(),
      v.digits("Age must contain digits"),
      v.transform(Number),
      v.minValue(18,"You must be at least 18")
    ),

    password:v.pipe(
      v.string(),
      v.minLength(6,"Password must contain at least 6 characters")
    ),

    confirmPassword:v.string()

  }),

  v.forward(
    v.partialCheck(
      [["password"],["confirmPassword"]],
      ({password,confirmPassword}) => password === confirmPassword,
      "Passwords do not match"
    ),
    ["confirmPassword"]
  )

)

Code Comparison

Valibot

import * as v from "valibot"

const BookSchema = v.object({
  title:v.string(),
  price:v.number()
})

v.parse(BookSchema,{title:"JavaScript Guide",price:30})

Zod

import {z} from "zod"

const BookSchema = z.object({
  title:z.string(),
  price:z.number()
})

BookSchema.parse({title:"JavaScript Guide",price:30})

Benchmark Scripts

Valibot

import * as v from "valibot"

const schema = v.object({
 id:v.number(),
 name:v.string(),
 price:v.number(),
 rating:v.number(),
 tags:v.array(v.string())
})

const sample = {
 id:1,
 name:"Laptop",
 price:1500,
 rating:4.8,
 tags:["tech","computer"]
}

function benchmarkValibot(iterations:number){

 const start = performance.now()

 for(let i=0;i<iterations;i++){
  v.parse(schema,sample)
 }

 return performance.now() - start

}

console.log("Valibot:",benchmarkValibot(10000),"ms")

Zod

import {z} from "zod"

const schema = z.object({
 id:z.number(),
 name:z.string(),
 price:z.number(),
 rating:z.number(),
 tags:z.array(z.string())
})

const sample = {
 id:1,
 name:"Laptop",
 price:1500,
 rating:4.8,
 tags:["tech","computer"]
}

function benchmarkZod(iterations:number){

 const start = performance.now()

 for(let i=0;i<iterations;i++){
  schema.parse(sample)
 }

 return performance.now() - start

}

console.log("Zod:",benchmarkZod(10000),"ms")

Benchmark Results

Valid data

Library	min (ms)	max (ms)
Valibot	26.58	27.31
Zod	67.02	70.25

Invalid data

Library	min (ms)	max (ms)
Valibot	48.63	54.70
Zod	143.63	147.79

Bundle Size

Replacing Zod with Valibot reduced bundle size by ~11.4 KB (gzip) in a medium project.

Popularity

Library	Weekly downloads
Valibot	~1.2M
Zod	~89.5M

Conclusion

Validation libraries protect applications from unreliable external data.

Valibot proves that validation can be fast, lightweight, and developer‑friendly.

For new projects, Valibot is definitely worth considering.

Why Blindly Using JSON.parse() Can Be Dangerous

Fri, 06 Mar 2026 00:00:00 GMT

If you write JavaScript for long enough—whether in the browser or on a Node.js server—you’ll almost certainly use JSON.parse() countless times.

It’s one of the most common APIs in the ecosystem.

Developers rely on it for everything from reading configuration files to handling API requests:

const user = JSON.parse(localStorage.getItem("user"))

const payload = JSON.parse(req.body.payload)

const config = JSON.parse(fs.readFileSync("config.json", "utf-8"))

It’s simple, fast, and built directly into the language.

But here’s the problem:

Many developers treat JSON.parse() as a harmless utility, when in reality it can become a security risk if used carelessly.

The function itself isn’t dangerous—but blindly parsing untrusted input can expose your application to attacks such as:

Prototype pollution
Denial of Service (DoS)
Data injection attacks
Unexpected runtime crashes

In this article, we’ll explore why this happens and how to implement secure JSON parsing strategies in modern JavaScript applications.

Understanding What JSON.parse() Actually Does

JSON.parse() converts a JSON string into a JavaScript object.

Example:

const json = '{"name": "Alice", "role": "admin"}'

const user = JSON.parse(json)

console.log(user.name)
// Alice

The function faithfully reconstructs the entire object structure contained in the JSON string.

That includes every property name provided by the input.

And that’s where the problems start.

Security Risk #1: Prototype Pollution

One of the most common vulnerabilities related to unsafe JSON handling is prototype pollution.

Prototype pollution occurs when attackers manipulate an object's prototype to inject properties into every object in the application.

If your code merges or copies parsed objects without validation, an attacker can inject special keys like:

__proto__
constructor
prototype

These keys can modify global object behavior.

Example of a Prototype Pollution Payload

const payload = '{"__proto__": {"isAdmin": true}}'

Now imagine parsing it and merging the object into your system:

const data = JSON.parse(payload)

Object.assign({}, data)

console.log({}.isAdmin)
// true

Suddenly every object in your application has a new property.

This can lead to severe consequences:

Authentication bypass
Privilege escalation
Corrupted application logic
Security policy violations

Many well-known vulnerabilities in JavaScript ecosystems have involved prototype pollution through unvalidated input.

Why This Happens

JavaScript objects inherit from Object.prototype.

If attackers manage to inject properties into the prototype chain, the impact becomes global.

For example:

console.log({}.toString)

This works because every object inherits from Object.prototype.

If attackers add properties there, every object in your system changes behavior.

Security Risk #2: Denial of Service (DoS)

Another common attack vector is resource exhaustion.

Attackers can send extremely large or deeply nested JSON strings that consume huge amounts of CPU or memory during parsing.

Example: Deep Nesting Attack

const evil = '{"a":{"a":{"a":{"a":{"a":{"a":{}}}}}}}'

Even small nested objects can cause heavy recursion.

With enough depth, parsing can freeze the event loop.

Example: Huge Array Attack

const payload = `[${"1,".repeat(10000000)}1]`

A JSON string representing ten million elements can:

Allocate gigabytes of memory
Freeze Node.js for seconds
Crash the process with an Out Of Memory error

For public APIs, this effectively becomes a remote kill switch.

Secure JSON Parsing Strategy

The safest approach combines three defensive layers:

Input size limits
Key filtering
Schema validation

Let’s look at each one.

Step 1: Limit Input Size

Before parsing JSON, always check the size of the input.

function safeParse(jsonString, maxSize = 100 * 1024) {
  if (typeof jsonString !== "string") {
    throw new Error("Invalid input type")
  }

  if (jsonString.length > maxSize) {
    throw new Error("JSON payload too large")
  }

  return JSON.parse(jsonString)
}

This prevents attackers from sending extremely large payloads.

In production APIs, limits are often set between 50KB and 1MB, depending on use case.

Step 2: Block Dangerous Keys

JavaScript allows a reviver function when parsing JSON.

This lets you inspect every property during parsing.

You can use it to reject suspicious keys.

function secureParse(jsonString) {
  return JSON.parse(jsonString, (key, value) => {
    if (key === "__proto__" || key === "constructor" || key === "prototype") {
      throw new Error("Forbidden key detected")
    }

    return value
  })
}

This simple check prevents prototype pollution payloads.

Step 3 (Best Practice): Runtime Schema Validation

Modern JavaScript applications rarely trust raw data.

Instead, they validate data structures using schema validation libraries like:

These tools ensure the parsed data matches an expected structure.

Example Using Zod

import { z } from "zod"

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  isAdmin: z.boolean().optional()
})

function parseUser(json) {
  const parsed = secureParse(json)

  return UserSchema.parse(parsed)
}

Benefits:

Automatic runtime validation
Clear error messages
Type inference for TypeScript
Protection against unexpected fields

Schema validation is considered modern best practice in production systems.

Additional Risks in Node.js

Server environments are especially vulnerable because JSON often comes from external sources.

Common risky inputs include:

HTTP Requests

req.body

Uploaded Configuration Files

Users may upload JSON configuration files.

If parsed blindly, they can trigger crashes.

Database Data

Stored JSON may contain unexpected fields or corrupted structures.

Third-Party Webhooks

External services send JSON payloads that should never be trusted blindly.

Recommended Defensive Checklist

Before parsing JSON in production systems, verify:

The data source is trusted
The payload size is limited
Dangerous keys are filtered
The structure matches a schema

This layered approach dramatically reduces attack surfaces.

Is `JSON.parse()` Actually Unsafe?

Not exactly.

JSON.parse() itself does not execute JavaScript code.

Unlike eval(), it only reconstructs objects.

However:

Using it without validating input is equivalent to trusting user data blindly.

And trusting user input is one of the most common sources of security vulnerabilities.

Final Thoughts

JSON.parse() is not a bad API.

But using it without safeguards is like handling a powerful tool without protective equipm…

Tailwind CSS v4 vs MUI, Ant Design & Styled Components

Fri, 06 Mar 2026 00:00:00 GMT

In 2026, picking a styling approach is less about taste and more about architecture.

Teams don’t just “choose CSS.” They choose:

how design decisions are encoded and shared,
how fast UI can change without regressions,
how much runtime work happens on every render,
how quickly a codebase accumulates styling debt,
and how portable the solution is across frameworks and products.

This article compares four popular directions:

Tailwind CSS v4 (utility-first styling engine)
MUI and Ant Design (component libraries with strong opinions)
Styled Components (CSS-in-JS)

The goal isn’t to crown a universal winner. It’s to help you pick the right tool for your system’s constraints.

1. These tools are different “layers” of the stack

The biggest mistake is to compare them as if they are interchangeable.

MUI and Ant Design: component systems (not just styling)

MUI and Ant Design are ready-made UI component ecosystems. You’re not just getting colors and spacing. You’re getting:

behavior,
accessibility (A11Y) defaults,
keyboard navigation,
focus management in modals,
edge-case handling that took years to harden.

If you need to ship an internal admin tool quickly, this matters.

But you pay for it in other ways:

They impose a DOM structure (wrappers, internal elements, slots).
They impose an opinionated design language (Material for MUI, Ant’s system for Ant).
Customization often becomes an ongoing negotiation between your design system and theirs.

If your product design is “close enough” to their defaults, you move fast. If your goal is “pixel-perfect Figma that looks like none of the defaults,” you can end up fighting the library.

Tailwind v4: styling engine (not a component library)

Tailwind doesn’t know what a Date Picker is. It doesn’t ship one. It gives you low-level primitives to build your own.

Tailwind’s advantage is control:

you decide markup structure,
you decide constraints,
you can match a custom design system without constantly overriding component internals.

Tailwind v4 also reduced setup friction: you can start with a single CSS import (@import "tailwindcss";) instead of the older directive-heavy setup.

Styled Components: component-local styling with runtime generation

Styled Components sits between the two extremes:

not a component library,
but tightly binds CSS to components.

This is productive—until the project grows and you start asking:

Which styles are still used?
Which are dead?
What’s the real cost of style generation during renders?
How do we maintain consistent tokens without duplicating logic across many components?

Tailwind and CSS-in-JS solve different problems. If you treat them as the same category, you’ll make architectural tradeoffs accidentall

2. Performance: static CSS vs runtime style generation

Performance isn’t just about “Tailwind is fast.” It’s about where work happens.

Runtime overhead (especially visible at scale)

CSS-in-JS solutions and some UI libraries generate and manage styles at runtime. That means:

extra JavaScript execution,
extra style insertion/management,
more work during render-heavy scenarios (large tables, infinite lists, fast state updates).

Tailwind’s output is static CSS. The browser receives it once and applies it like normal styles.

That’s not automatically “always faster,” but it changes the performance profile in a way that becomes very noticeable in high-frequency UI updates.

Build performance in Tailwind v4

Tailwind v4 shipped with a “ground-up” performance rewrite and a faster build engine—reported as up to ~5× faster full builds and 100× faster incremental builds in the official announcements and coverage.

That matters in real teams because build speed directly affects:

iteration loops,
design token tweaking,
refactoring velocity,
developer experience.

3. “Self-cleaning CSS”: why dead styles don’t stick around (as much)

Large projects die by a thousand cuts—most of them are “small”:

unused classes,
abandoned component variants,
theme overrides nobody remembers,
CSS specificity battles that accumulate over years.

The typical CSS-in-JS failure mode

CSS-in-JS keeps styles “close” to components, which is great for local reasoning.

But when components get removed or rewritten, styles can still remain in the bundle depending on usage patterns, exports, barrel files, and how build tooling marks code as reachable.

Teams end up with a question they can’t easily answer:

“Is this style still used anywhere?”

Tailwind’s approach: generate only what’s referenced

Tailwind’s workflow is built around scanning your source for class usage and generating the necessary CSS for those classes. That “only what you used” approach is central to Tailwind’s output model.

So when you delete a component, the classes that disappear from your markup will stop being included in the compiled CSS.

This is one reason Tailwind projects often avoid the classic “CSS landfill” problem.

What about helpers like `tailwind-variants`?

Utilities like tailwind-variants (or any class-composition helper) don’t change the fundamental logic: Tailwind still cares about class strings it can discover. The important architectural point is that Tailwind’s output is driven by class usage, not “a stylesheet someone forgot to delete.”

4. Design tokens: from Figma to code without losing alignment

Modern UI teams don’t want “colors in CSS.” They want tokens:

--color-brand
--spacing-section
--radius-card
--font-sans

Tailwind v4’s CSS-first theming

Tailwind v4 introduced a CSS-first workflow where theme variables are defined using the @theme directive. Tailwind describes these as special CSS variables that influence which utilities exist.

Example:

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.55 0.22 260);
  --color-brand-hover: oklch(0.45 0.22 260);
  --font-sans: "Inter", system-ui;
  --spacing-section: 4rem;
}

Once defined, Tailwind can expose utilities based on those variables (for example, color-related tokens become usable via utility classes). The docs describe how theme variables map into usable styling in your project.

Then UI usage becomes simple and consistent:

export function BrandButton() {
  return (
    <button className="bg-brand hover:bg-brand-hover text-white px-4 py-2 rounded">
      Button
    </button>
  );
}

This token-driven flow aligns well with Figma Variables / token pipelines because it creates a single “source of truth” layer that can be shared across apps.

How this compares to MUI / Styled Components theming

MUI theming is powerful, but it typically lives in JavaScript objects and flows through providers and library AP…

JavaScript Note: ToggleEvent.source and dialog.closedBy

Fri, 06 Mar 2026 00:00:00 GMT

The modern web platform continues evolving with small but powerful improvements. Two recent additions --- ToggleEvent.source and the closedby attribute for <dialog> --- make working with dialogs and popovers significantly easier.

ToggleEvent.source allows developers to determine which element triggered a popover or dialog visibility change, while closedby allows you to declare how a dialog can be closed without writing extra JavaScript.

These additions move the web platform further toward declarative UI behavior.

ToggleEvent.source

The source property of the ToggleEvent interface is a read‑only reference to the element that triggered the toggle event.

In simple terms, it tells you:

Which element opened or closed a popover or dialog.

The property returns an instance of Element.

If the visibility change was triggered programmatically, the value will be null.

Browser support

Most modern browsers already support the property. Safari currently exposes it behind an experimental flag.

Elements that can trigger popovers

A popover can be triggered by:

<button commandfor="..."> commandfor attribute
<button popovertarget="..."> popovertarget attribute
<input type="button" popovertarget="...">

Elements that can behave as popovers

<dialog>
Any element with the popover attribute

Example

Consider a dialog with multiple buttons that close it.

We want to determine which button closed the dialog and display the result.

<div>
  <button commandfor="my-dialog" command="show-modal">
    Show modal dialog
  </button>

  <dialog id="my-dialog">
    <h3>Do you like modern Web APIs?</h3>

    <div style="display:flex; gap:10px">
      <button commandfor="my-dialog" command="close" data-answer="yes">
        Yes
      </button>

      <button commandfor="my-dialog" command="close" data-answer="sure">
        Sure
      </button>
    </div>
  </dialog>

  <p>No answer yet</p>
</div>

Now we listen for the toggle event.

const paragraph = document.querySelector("p");

document.querySelector("dialog").addEventListener("toggle", (event) => {

  if (!(event.source instanceof HTMLButtonElement)) return;

  const { answer } = event.source.dataset;

  if (answer) {
    paragraph.textContent = `Answer: ${answer}`;
  }

});

With ToggleEvent.source, determining the trigger element becomes trivial.

<Codepen id="019cbfd7-7afe-776d-afbe-461c3c60fb50" />

HTMLDialogElement.closedBy

The closedby attribute defines which user actions are allowed to close a dialog.

Previously, developers often needed custom JavaScript logic to control this behavior. Now it can be defined directly in HTML.

This attribute is supported by all major browsers (Safari currently ships it behind an experimental flag).

Supported closing actions

Dialogs can be closed by:

Clicking outside the dialog on the overlay (light dismiss).
Platform actions such as pressing Esc.
A developer-defined action such as a button calling dialog.close().

Attribute values

any

The dialog can be closed using all methods above.

closerequest

The dialog can be closed by:

pressing Esc
developer-defined logic

none

The dialog can only be closed programmatically or by explicit UI controls.

Default behavior

The default value depends on how the dialog is opened.

If opened using: showModal(), the default becomes: closerequest.

Otherwise the default is: none

Why this matters

Before closedby, implementing overlay click closing required JavaScript logic, such as custom hooks (useClickOutside in React).

Now this behavior can be defined purely declaratively.

Example with multiple dialogs

<div class="demo">
  <button class="open" commandfor="dlg-any" command="show-modal">
    Open dialog (closedby="any")
  </button>

  <!-- 1) closedby="any" -->
  <dialog id="dlg-any" closedby="any">
    <div class="dialog">
      <header class="header">
        <h3>Dialog A — closedby="any"</h3>
        <button class="icon" commandfor="dlg-any" command="close" aria-label="Close">
          ✖
        </button>
      </header>

      <p>
        This dialog can be closed by clicking the backdrop, pressing Esc, or using a Close button.
      </p>

      <footer class="footer">
        <button class="cancel" commandfor="dlg-any" command="close">Close</button>

        <button class="confirm" commandfor="dlg-closerequest" command="show-modal">
          Open dialog B
        </button>
      </footer>
    </div>
  </dialog>

  <!-- 2) closedby="closerequest" -->
  <dialog id="dlg-closerequest" closedby="closerequest">
    <div class="dialog">
      <header class="header">
        <h3>Dialog B — closedby="closerequest"</h3>
        <button class="icon" commandfor="dlg-closerequest" command="close" aria-label="Close">
          ✖
        </button>
      </header>

      <p>
        This dialog closes via Esc or explicit controls. Clicking the backdrop should NOT close it.
      </p>

      <footer class="footer">
        <button class="cancel" commandfor="dlg-closerequest" command="close">Close</button>

        <button class="confirm" commandfor="dlg-none" command="show-modal">
          Open dialog C
        </button>
      </footer>
    </div>
  </dialog>

  <!-- 3) closedby="none" -->
  <dialog id="dlg-none" closedby="none">
    <div class="dialog">
      <header cla…



How to Build an LRU Cache from Scratch in JavaScript
Fri, 06 Mar 2026 00:00:00 GMT
Caching is a fundamental optimization technique used across nearly every modern software system. Whether you're building a web API, a database engine, or a frontend application, caching can dramatically improve performance by storing frequently accessed data in memory.
One of the most common cache eviction strategies is LRU (Least Recently Used). You’ll encounter it in systems like Redis, operating systems, browser caches, and backend frameworks. It also appears frequently in technical interviews because implementing it correctly requires understanding both data structures and time complexity.
Many developers initially find LRU confusing, especially because interview questions usually require O(1) time complexity for both retrieval and insertion operations. However, once you understand the right combination of data structures, the implementation becomes surprisingly elegant.
In this guide, we’ll build an LRU cache from scratch, following a clear progression:

Understanding what LRU actually means
Defining the required operations
Choosing the right data structures
Implementing the cache step by step
Testing the implementation
Avoiding common mistakes

By the end, you'll have a production-ready LRU cache implementation in JavaScript.
What Is an LRU Cache?
LRU stands for Least Recently Used.
The idea is simple:

When the cache reaches its capacity, remove the item that hasn't been used for the longest time.

Every time an item is accessed or inserted, it becomes the most recently used entry.
A Simple Real-World Analogy
Imagine a small bookshelf that can only hold three books.
Capacity = 3
Step 1
Add Algorithms

Step 2
Add Java
[Algorithms, Java]

Step 3
Add Python
[Algorithms, Java, Python]

The shelf is now full.
Step 4 – Access "Algorithms"
Because you used it recently, it moves to the end:
[Java, Python, Algorithms]

Step 5 – Add "JavaScript"
Since the shelf is full, remove the least recently used item (Java):
[Python, Algorithms, JavaScript]

This behavior is exactly how an LRU cache works.
Core Requirements of an LRU Cache
In most implementations (and interviews), the cache supports two operations.



Operation
Description
Required Complexity




get(key)
Return the value associated with the key, or -1 if not found. Also mark it as recently used.
O(1)


put(key, value)
Insert or update a value. If capacity is exceeded, remove the least recently used item.
O(1)



The O(1) requirement is critical.
If operations become O(n), the implementation is no longer optimal.
Why Arrays Won’t Work
A naive solution might store items in an array.
But arrays cause problems:
Finding an item
Requires scanning → O(n)
Moving an item
Requires shifting elements → O(n)
Removing the least used item
Also O(n)
This violates the O(1) requirement.
So we need a better approach.
The Key Insight: Combine Two Data Structures
To achieve constant time operations, we combine:
1. Hash Map (Map)
Provides:
key → node

Benefits:

Instant lookup
O(1) access

But a Map cannot track usage order.
2. Doubly Linked List
Maintains item order:
Least used  ←→  Most used

Benefits:

Fast removal
Fast insertion
Fast reordering

Operations on linked lists can be O(1) if you already have the node reference.
Final Architecture
We combine both structures:
Map:
key → linked list node

Doubly Linked List:
[Least Recently Used ... Most Recently Used]

Rules

Head = least recently used
Tail = most recently used

Step 1: Create a Linked List Node
Each node stores:

key
value
previous pointer
next pointer

class CacheNode {
  constructor(key, value) {
    this.key = key
    this.value = value
    this.prev = null
    this.next = null
  }
}

Important detail:
We store the key inside the node so we can remove it from the Map during eviction.
Step 2: Implement a Doubly Linked List
We’ll use sentinel (dummy) nodes for easier boundary handling.
class DoublyLinkedList {
  constructor() {
    this.head = new CacheNode(null, null)
    this.tail = new CacheNode(null, null)

    this.head.next = this.tail
    this.tail.prev = this.head

    this.length = 0
  }

  remove(node) {
    node.prev.next = node.next
    node.next.prev = node.prev

    node.prev = null
    node.next = null

    this.length--
  }

  addToEnd(node) {
    const prevLast = this.tail.prev

    prevLast.next = node
    node.prev = prevLast
    node.next = this.tail
    this.tail.prev = node

    this.length++
  }

  removeFirst() {
    if (this.length === 0) return null

    const first = this.head.next
    this.remove(first)

    return first
  }

  size() {
    return this.length
  }
}

Step 3: Build the LRU Cache
Now we combine the Map and linked list.
class LRUCache {
  constructor(capacity) {
    if (capacity <= 0) {
      throw new Error("Capacity must be greater than zero")
    }

    this.capacity = capacity
    this.cache = new Map()
    this.list = new DoublyLinkedList()
  }

  get(key) {
    if (!this.cache.has(key)) {
      return -1
    }

    const node = this.cache.get(key)

    this.list.remove(node)
    this.list.addToEnd(node)

    return node.value
  }

  put(key, value) {
    if (this.cache.has(key)) {
      const node = this.cache.get(key)

      node.value = value

      this.list.remove(node)
      this.list.addToEnd(node)

      return
    }

    if (this.list.size() === this.capacity) {
      const removed = this.list.removeFirst()

      if (removed) {
        this.cache.delete(removed.key)
      }
    }

    const newNode = new CacheNode(key, value)

    this.list.addToEnd(newNode)
    this.cache.set(key, newNode)
  }
}

Testing the Implementation
Let's verify the behavior.
function testLRUCache() {
  const cache = new LRUCache(3)

  cache.put("Algorithms", 1)
  cache.put("Java", 2)
  cache.put("Python", 3)

  console.log(cache.get("Algorithms"))
  // 1

  cache.put("JavaScript", 4)

  console.log(cache.get("Java"))
  // -1 (evicted)

  console.log(cache.get("JavaScript"))
  // 4

  cache.put("Python", 33)

  console.log(cache.get("Python"))
  // 33
}

testLRUCache()

If the output matches expectations, the cache works correctly.
Common Mistakes Developers Make
1. Forgetting to store the key in nodes
Without the key, eviction cannot remove the Map entry.
2. Using a singly linked list
Deleting nodes becomes O(n) because the previous node must be searched.
3. Not using sentinel nodes
This causes many edge cases when inserting or deleting.
4. Forgetting to update the size counter
This breaks capacity checks.
5. Updating value without updating position
Accessing an item sho…


How to Build a Safe JSON Parser for Node.js APIs
Fri, 06 Mar 2026 00:00:00 GMT
Parsing JSON in Node.js looks trivial at first glance.
Most developers start with something like this:
const data = JSON.parse(rawBody)

And for a while, that feels good enough.
Then real traffic arrives.
A client sends malformed JSON. A webhook includes fields you did not expect. A bot posts a giant payload. A malicious user tries to poison object prototypes. Suddenly, one innocent-looking JSON.parse() call turns into a source of crashes, broken validation, or security issues.
That is why production APIs should not parse JSON blindly.
A safer approach is to build a JSON parser wrapper that handles the boring but critical work for you:

reject oversized payloads
block dangerous keys
validate structure at runtime
return consistent errors
integrate cleanly with Express, Fastify, Hono, or custom Node.js servers

In this article, we will build a reusable safe JSON parser wrapper for Node.js APIs, explain the design decisions behind it, and finish with production-ready examples you can adapt to your own backend.
Why a Wrapper Is Better Than Plain JSON.parse()
JSON.parse() is not bad. It is fast, built-in, and perfectly fine when the input is trusted.
The real problem is this:

In APIs, input is often untrusted.

That includes:

request bodies
webhooks
uploaded JSON files
queue messages
Redis payloads
database JSON blobs
third-party callbacks

When raw input comes from outside your system, parsing should do more than just convert a string into an object.
A proper parser layer should answer these questions:

Is the payload too large?
Is the JSON valid?
Does it contain suspicious keys?
Does it match the shape the API expects?
Can the application return a clean error instead of crashing?

That is exactly what a wrapper solves.
What a Safe JSON Parser Should Do
A strong implementation should provide five protections.
1. Type checks
Only strings or buffers should be accepted as raw JSON input.
2. Payload size limits
This helps reduce DoS risk and prevents huge request bodies from consuming memory.
3. Dangerous key filtering
Keys like __proto__, constructor, and prototype can become a problem in unsafe merge flows.
4. Runtime validation
Even valid JSON is not necessarily valid application data.
5. Consistent error handling
The API should return predictable, human-readable errors instead of generic crashes.
The Core Design
We will build the wrapper in layers.
First, a small custom error class.
Then a secure parser with size checks and key filtering.
Then a schema-aware parser using Zod.
Finally, an Express middleware example.
This approach keeps the code modular and easy to test.
Step 1: Create Custom Error Types
A parser wrapper becomes much easier to integrate when it throws structured errors instead of generic Error objects.
export class JsonParseError extends Error {
  public readonly statusCode: number
  public readonly code: string
  public readonly details?: unknown

  constructor(message: string, options?: {
    statusCode?: number
    code?: string
    details?: unknown
  }) {
    super(message)
    this.name = "JsonParseError"
    this.statusCode = options?.statusCode ?? 400
    this.code = options?.code ?? "INVALID_JSON"
    this.details = options?.details
  }
}

This gives the rest of the application useful metadata:

statusCode for HTTP responses
code for machine-readable error handling
details for debugging or validation reports

Step 2: Define Safe Defaults
Now define the parser configuration.
export type SafeJsonParserOptions = {
  maxBytes?: number
  forbiddenKeys?: string[]
}

const DEFAULT_FORBIDDEN_KEYS = ["__proto__", "constructor", "prototype"]

const DEFAULT_OPTIONS: Required<SafeJsonParserOptions> = {
  maxBytes: 100 * 1024,
  forbiddenKeys: DEFAULT_FORBIDDEN_KEYS,
}

These defaults are intentionally conservative.
A 100KB default is reasonable for many APIs, but you can raise or lower it depending on your use case.
For example:

small JSON commands: 10KB
standard API forms: 50KB to 200KB
large content payloads: 500KB to 1MB
file uploads: do not parse with raw JSON.parse() at all

Step 3: Normalize Raw Input
In Node.js, raw request data may arrive as a string or a buffer.
A wrapper should handle both cleanly.
function normalizeInput(raw: string | Buffer): string {
  if (typeof raw === "string") {
    return raw
  }

  if (Buffer.isBuffer(raw)) {
    return raw.toString("utf8")
  }

  throw new JsonParseError("Unsupported input type", {
    code: "INVALID_INPUT_TYPE",
  })
}

This prevents accidental misuse and keeps the main parser logic simpler.
Step 4: Enforce a Payload Size Limit
Before calling JSON.parse(), check size first.
This is one of the easiest and most effective hardening steps.
function assertPayloadSize(raw: string, maxBytes: number): void {
  const byteLength = Buffer.byteLength(raw, "utf8")

  if (byteLength > maxBytes) {
    throw new JsonParseError(
      `JSON payload exceeds the ${maxBytes} byte limit`,
      {
        statusCode: 413,
        code: "PAYLOAD_TOO_LARGE",
        details: { maxBytes, actualBytes: byteLength },
      }
    )
  }
}

Why check bytes instead of string.length?
Because network payloads are measured in bytes, not characters. UTF-8 characters can take more than one byte, so Buffer.byteLength() is the safer choice.
Step 5: Reject Dangerous Keys During Parsing
The reviver argument of JSON.parse() lets you inspect every key-value pair during parsing.
That makes it a good place to block suspicious keys.
function createSecureReviver(forbiddenKeys: string[]) {
  const blocked = new Set(forbiddenKeys)

  return function secureReviver(key: string, value: unknown) {
    if (blocked.has(key)) {
      throw new JsonParseError(`Forbidden key found in JSON: ${key}`, {
        code: "FORBIDDEN_JSON_KEY",
        details: { key },
      })
    }

    return value
  }
}

This does not magically solve all object safety issues across your application, but it reduces risk significantly when dealing with untrusted payloads.
Step 6: Build the Base Safe Parser
Now combine the pieces into one reusable function.
import { JsonParseError } from "./json-parse-error"

export type SafeJsonParserOptions = {
  maxBytes?: number
  forbiddenKeys?: string[]
}

const DEFAULT_FORBIDDEN_KEYS = ["__proto__", "constructor", "prototype"]

const DEFAULT_OPTIONS: Required<SafeJsonParserOptions> = {
  maxBytes: 100 * 1024,
  forbiddenKeys: DEFAULT_FORBIDDEN_KEYS,
}

function normalizeInput(raw: string | Buffer): string {
  if (typeof raw === "string") {
    return raw
  }

  if (Buffer.isBuffer(raw)) {
    return raw.toString("utf8")
  }

  throw new JsonParseError("Unsupported input type", {
    code: "INVALID_INPUT_TYPE",
  })
}

function assertPayloadSize(raw: string, maxBytes: number): void {
  const byteLength = Buffer.byteLength(raw, "utf8")

  if (byteLength > maxBytes) {
    throw new JsonParseError(
      `JSON payload exceeds the ${maxBytes} byte limit`,
      {
     …


Friday Links #35: Dev Tools, AI & JS Ecosystem Updates
Fri, 27 Feb 2026 00:00:00 GMT

Another week, another wave of interesting releases across the JavaScript ecosystem. From emerging developer tools and AI-powered workflows to framework updates and experimental projects, the pace of innovation keeps accelerating.
In Friday Links #35, we’ve gathered the most notable discoveries worth a developer’s attention — tools that improve productivity, libraries pushing frontend boundaries, and projects that might quietly become tomorrow’s standards.
Whether you're building production apps, experimenting with AI tooling, or just staying current with modern web development, this week’s picks have something valuable to explore.
📜 Articles & Tutorials
Building Next.js for an agentic future
Yes, Learning to Code Is Still Valuable
Potentially Coming to a Browser :near() You 
Death to Scroll Fade!
6 React Server Component performance pitfalls in Next.js
Virtual Scrolling for Billions of Rows — Techniques from HighTable
Getting Started with the Vercel AI SDK in Node.js
Loop Performance Anti-Patterns: A 40-Repository Scan and Six-Module Benchmark Study
Reduce the JS Workload with no- or lo-JS options
Tips on How to Pick the Right Icons for Your Website
AGENTS.md outperforms skills in our agent evals
border-shape: the future of the non-rectangular web
An in-depth guide to customising lists with CSS
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design
⚒️ Tools
React Doctor - is an open-source CLI tool created by the Million.js (millionco) team that scans React codebases and automatically detects common issues: anti-patterns, performance bottlenecks, accessibility gaps, architectural flaws, and even critical security vulnerabilities that can quietly slip into production.
SVAR React Gantt - is a modern, high-performance Gantt chart component designed specifically for React applications.
LLM Timeline
The JavaScript Oxidation Compiler
Blop - A typed language for the web that compiles to Virtual DOM. Blop uses real control flow statements — for loops, if/else — directly in templates, without JSX constraints.
Sciter – Embeddable HTML/CSS/JavaScript Engine for modern UI development
BullMQ - Message Queue and Batch processing for NodeJS, Python, Elixir and PHP based on Redis
TanStack Hotkeys -  Type-Safe keyboard shortcuts library with awesome devtools
Mina Rich Editor - A powerful, elegant rich text editor built with Shadcn UI. Experience unparalleled customization, beautiful design, and seamless integration. Built with React, TypeScript, and meticulous attention to detail.

Temporal Playground — an interactive online environment for experimenting with the JavaScript Temporal API, allowing developers to run real code and explore modern date and time handling directly in the browser.
Zerobyte - Powerful backup automation for your remote storage
📚 Libs
voxcss -  A CSS voxel engine. A 3D grid for the DOM. Renders HTML cuboids by stacking grid layers and applying transforms.
portless - Replace port numbers with stable, named .localhost URLs. For humans and agents.
react-split-pane -  React split-pane component
Basic FTP -  FTP client for Node.js, supports FTPS over TLS, passive mode over IPv6, async/await, and Typescript.
Lume.js - Minimal reactive state management using only standard JavaScript and HTML. No custom syntax, no build step required, no framework lock-in.
fp-pack -  A functional toolkit focused on type-safe pipelines, not FP dogma, for JavaScript and TypeScript.
tambo -  Generative UI SDK for React
⌚ Releases
Biome v2.4—Embedded Snippets, HTML Accessibility, and Better Framework Support
Prsma 7.4.0 Released
Phaser Editor v5 Beta now available
Emscripten 5.0.2 — the well-established LLVM-to-WebAssembly compiler that enables running native low-level code in Node.js without native bindings — receives internal cleanups, removing legacy Node-specific workarounds that are no longer required.
Hono 4.12 — a lightweight, multi-runtime web framework built around Web Standards, designed to run seamlessly across Node.js, Bun, Deno, Cloudflare Workers, and other edge environments.
Orange ORM 5.2 — a powerful and modern ORM designed for efficient database interaction, offering type-safe queries, clean abstractions, and strong performance across modern JavaScript runtimes.
ESLint 10.0.2 Released
📺 Videos
TanStack Router - How to Become a Routing God in React
Build Your Own Claude Code with Mastra Workspaces
Build & Deploy AI Agent Workflow Builder using NextJs, Mongodb, React, Prisma, Upstash
How One Engineer and AI Crashed IBM's Stock Price
The wild rise of OpenClaw...
My Multi-Agent Team with OpenClaw
Understanding SOLID Principles

Why SOLID Still Matters in React
SOLID principles were originally introduced for object-oriented programming by Robert C. Martin.
React is not object-oriented in the classical sense.
Yet modern React applications map surprisingly well to SOLID ideas:



OOP Concept
React Equivalent




Class
Component


Method
Hook / handler


Dependency
Service / API


Composition
Component composition


Abstraction
Hook interface



React didn’t remove architecture problems.
It simply changed where they appear.
Let’s explore the three SOLID principles that have the biggest real-world impact in React systems.

Single Responsibility Principle (SRP) in React
Software architecture often sounds abstract until a project starts
growing. Messy components, duplicated logic, and unpredictable bugs
begin to appear.
The Single Responsibility Principle states:

A module should have only one reason to change.

In React, responsibilities usually split into:

data logic
rendering
composition

SRP does not mean:

one function
small component
minimal lines of code

Instead, it means:
A module should change for one category of reason.
Bad Example
export function AccountProfile() {
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/profile")
      .then(res => res.json())
      .then(data => {
        setProfile(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <section>
      <h2>{profile.name}</h2>
      <p>{profile.email}</p>
    </section>
  );
}

Component responsibilities:

fetching data
managing state
rendering UI

Multiple reasons to change.
Correct SRP Architecture
A scalable React architecture separates logic from presentation.
Data Hook
export function useProfileData() {
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/profile")
      .then(res => res.json())
      .then(setProfile)
      .finally(() => setLoading(false));
  }, []);

  return { profile, loading };
}

This hook answers one question:
How do we obtain data?
Nothing else.
View Component
export function ProfileView({ profile, loading }) {
  if (loading) return <p>Loading...</p>;

  return (
    <section>
      <h2>{profile.name}</h2>
      <p>{profile.email}</p>
    </section>
  );
}

Pure UI.
No knowledge about APIs or storage.
Container
export function ProfileContainer() {
  const state = useProfileData();
  return <ProfileView {...state} />;
}

Now each part has one responsibility.
Changing backend logic never affects rendering.

Real SRP Benefit
SRP enables:

safer refactoring
reusable UI components
independent testing
predictable scaling

Large React applications survive long-term mainly because of this separation.
Open Closed Principle (OCP) in React
The Open Closed Principle states:

Software entities should be open for extension but closed for
modification.

You should add new behavior without rewriting existing components.
Typical Violation
export function ActionButton({ type, onClick }) {
  if (type === "primary") {
    return <button className="primary" onClick={onClick}>Primary</button>;
  }

  if (type === "danger") {
    return <button className="danger" onClick={onClick}>Danger</button>;
  }

  if (type === "success") {
    return <button className="success" onClick={onClick}>Success</button>;
  }

  return null;
}

Every new variation requires modifying the component.
Over time this becomes fragile and error-prone.
OCP-Friendly Approach
const buttonVariants = {
  primary: "primary",
  danger: "danger",
  success: "success",
};

export function ActionButton({ variant, onClick, children }) {
  return (
    <button
      className={buttonVariants[variant]}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Adding new behavior:
buttonVariants.warning = "warning";

No component modification required.
Composition-Based Extension
Modern React strongly favors composition.
export function Button({ className, ...props }) {
  return <button className={className} {...props} />;
}

export function DangerButton(props) {
  return <Button className="danger" {...props} />;
}

export function PrimaryButton(props) {
  return <Button className="primary" {...props} />;
}

The base abstraction remains stable while functionality grows externally.
This is OCP applied naturally.

Dependency Inversion Principle (DIP)
This principle separates scalable architecture from tightly coupled applications.
Definition:

High-level modules should not depend on low-level modules.

Translated to React:
UI should not depend directly on infrastructure.
Hidden Dependency Problem
export function OrdersPage() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    fetch("/api/orders")
      .then(r => r.json())
      .then(setOrders);
  }, []);
}

This component depends directly on:

transport layer
backend structure
API implementation

Backend change → UI rewrite.
Introducing Abstraction
Provider Interface
export interface OrdersProvider {
  getOrders(): Promise<any[]>;
}

Concrete Implementation
export class ApiOrdersProvider implements OrdersProvider {
  async getOrders() {
    const res = await fetch("/api/orders");
    return res.json();
  }
}

Hook Depends on Abstraction
export function useOrders(provider: OrdersProvider) {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    provider.getOrders().then(setOrders);
  }, [provider]);

  return orders;
}


SQL Crash Course: JOINs, CTEs, and Window Functions
Mon, 23 Feb 2026 00:00:00 GMT
SQL is one of the very few technologies in software engineering that
does not fade with trends.
Frameworks change every few years. Backend stacks rotate. Frontend
ecosystems reinvent themselves. But SQL stays.
That is not nostalgia. That is infrastructure.
SQL became the universal language of data. Whether a team uses
PostgreSQL, MySQL, ClickHouse, Snowflake, or something distributed and
exotic --- chances are, they still speak SQL.
Understanding SQL today is not optional for serious developers.
Backend engineers need it to avoid pushing database logic into
application code. Analysts rely on it daily. QA engineers use it to
validate system state. Product managers use it to inspect metrics
without waiting for analytics pipelines.
This article walks through SQL step by step --- from simple SELECT
queries to advanced window functions --- using practical examples and a
PostgreSQL‑friendly syntax.

1. Database Anatomy: What We Actually Work With
Before writing queries, it helps to understand what the database really is.
A relational database is simply structured tables connected by rules. Think of it as Excel with strict discipline — no messy types, no broken references, no silent mistakes.
Each table contains:

Columns (structure)
Rows (actual data)

The power comes from constraints and relationships.
Unlike spreadsheets, relational databases enforce:
. Strong typing
. Explicit relationships
Primary Keys and Foreign Keys
Primary Key (PK) --- unique row identifier.
Foreign Key (FK) --- reference to another table's primary key.
Example:

users(id, name)
orders(id, user_id, total)

orders.user_id references users.id.
This guarantees consistency: the database will reject an order for a
non‑existent user.
Common Data Types
Most projects rely on a core set:

INT / BIGINT --- numeric identifiers and counters
TEXT / VARCHAR --- strings
TIMESTAMPTZ --- date-time stored in UTC
JSONB (PostgreSQL) --- flexible semi‑structured data

Always store timestamps in UTC. Convert on the client side.

2. Reading Data: SELECT
The most common SQL operation is reading.
Basic query:
SELECT name, price
FROM products;

Avoid:
SELECT *
FROM products;

Why? Because production systems scale. Fetching unnecessary columns wastes bandwidth, memory, and sometimes performance advantages from indexes.
Aliases
SELECT
  name AS product_name,
  price AS product_price
FROM products;

This is especially helpful in complex JOIN queries.
DISTINCT
Use DISTINCT when you care about unique values, not raw rows.
SELECT DISTINCT category
FROM products;

Pagination
SELECT id, name
FROM products
ORDER BY id
LIMIT 10 OFFSET 20;

Large OFFSET values are inefficient. Prefer keyset pagination in
high‑load systems:
SELECT id, name
FROM products
WHERE id > 1000
ORDER BY id
LIMIT 10;

OFFSET works for small pages. For large datasets, keyset pagination is more efficient.

3. Filtering and Sorting
Filtering uses WHERE.
Filtering narrows data down to what actually matters.
Instead of loading everything and filtering in application code, push logic into the database — it is optimized for this.
SELECT name, price
FROM products
WHERE category = 'phones'
  AND price > 50000;

IN
Cleaner than multiple OR statements.
WHERE category IN ('phones', 'laptops')

BETWEEN
Readable range filter.
WHERE price BETWEEN 30000 AND 60000

LIKE / ILIKE
Pattern matching for text.
WHERE name LIKE 'iPhone%'

Postgres case-insensitive:
WHERE name ILIKE 'iphone%'

NULL Handling
NULL means “unknown”, not empty.
Incorrect:
WHERE description = NULL

Correct:
WHERE description IS NULL

ORDER BY
Sorting is expensive on large datasets — especially without indexes.
SELECT name, price
FROM products
ORDER BY price DESC, name ASC;

Sorting large datasets without indexes is expensive.

4. Aggregation and GROUP BY
Aggregation turns raw data into insight.
Instead of looking at thousands of rows, we compute metrics.

Aggregate functions:

COUNT
SUM
AVG
MIN
MAX

Example:
SELECT
  MAX(price) AS max_price,
  AVG(price) AS avg_price,
  COUNT(*) AS total_products
FROM products;

GROUP BY
Grouping splits rows into logical buckets before aggregation.
SELECT
  category,
  COUNT(*) AS product_count,
  AVG(price) AS avg_price
FROM products
GROUP BY category;

Rule:
Every non-aggregated column in SELECT must appear in GROUP BY.
HAVING
HAVING filters groups after aggregation — unlike WHERE.
Incorrect:
SELECT category, COUNT(*)
FROM products
WHERE COUNT(*) > 10
GROUP BY category;

Correct:
SELECT category, COUNT(*)
FROM products
GROUP BY category
HAVING COUNT(*) > 10;


5. JOINs
Real SQL begins with JOINs.

JOINs connect tables. This is where relational databases shine.
Instead of duplicating data, we combine normalized structures dynamically.
INNER JOIN
SELECT u.name, o.total
FROM users u
JOIN orders o ON u.id = o.user_id;

Only matching rows are returned.
LEFT JOIN
SELECT u.name, o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id;

All users appear. Missing matches become NULL.
Find users without orders:
SELECT u.name
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE o.id IS NULL;

SELF JOIN
Used when a table references itself (hierarchies, managers, categories).
SELECT e.name AS employee,
       m.name AS manager
FROM employees e
LEFT JOIN employees m ON e.manager_id = m.id;


6. Data Modification (DML)
These queries change actual data.
Use carefully.

INSERT
INSERT INTO users (name, email)
VALUES ('Alex', '[email protected]');

Always list columns.
UPDATE
UPDATE products
SET price = 65000
WHERE id = 42;

Never run UPDATE without WHERE unless intentional.
DELETE
DELETE FROM users
WHERE last_login < '2020-01-01';

TRUNCATE
TRUNCATE TABLE logs;

Instantly removes all rows.

7. Schema Changes (DDL)
DDL modifies structure, not data.
Think of it as plumbing — not water.
CREATE TABLE
Defines structure and constraints.
CREATE TABLE orders (
  id BIGSERIAL PRIMARY KEY,
  user_id BIGINT NOT NULL,
  total NUMERIC(10,2) DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

ALTER TABLE
Adds or modifies columns safely.
ALTER TABLE orders
ADD COLUMN promo_code TEXT;

DROP TABLE
DROP TABLE orders;

<…


Polymorphic Decorators in React: HOCs on Steroids
Sun, 22 Feb 2026 00:00:00 GMT
Modern React applications rarely fail because of rendering complexity.
They fail because logic spreads across components in unpredictable ways.
Analytics. Routing. Permissions. Feature flags. Loading states. A/B
testing. Logging.
All of these are cross-cutting concerns. When they are implemented
directly inside JSX trees, components become deeply nested, hard to
maintain, and almost impossible to scale in large teams.
This article explores a production-grade architectural approach:
Polymorphic decorators implemented as strongly typed Higher-Order
Components (HOCs).
The objectives:

Separate logic from rendering
Preserve strict TypeScript safety
Enable reusable composition
Avoid JSX nesting hell
Scale across large React applications

This is not theory. Everything Here is practical and
production-oriented.

The Core Problem: JSX Nesting Explosion
Imagine a simple requirement.
A button must:
. Generate an href from /product/:id
. Inject route parameters
. Send analytics on click
. Stay polymorphic
. Remain fully type-safe
The typical JSX composition quickly becomes unreadable:
<TrackClick
  as={(props) => (
    <ResolveRoute
      as={PrimaryButton}
      template="/product/:id"
      params={{ id: "42" }}
      {...props}
    />
  )}
  elementKey="hero-btn"
  eventLabel="hero_click"
/>

Or using asChild-style composition:
<ResolveRoute template="/product/:id" params={{ id: "42" }} asChild>
  <TrackClick elementKey="hero-btn" eventLabel="hero_click" asChild>
    <PrimaryButton variant="solid">
      Buy Now
    </PrimaryButton>
  </TrackClick>
</ResolveRoute>

Even though it works, readability suffers.
Now compare with:
const SmartButton = withRouteResolver(
  withAnalyticsTracking(PrimaryButton)
)

<SmartButton
  template="/product/:id"
  params={{ id: "42" }}
  elementKey="hero-btn"
  eventLabel="hero_click"
  variant="solid"
/>

Flat. Predictable. Maintainable.

Turning Polymorphic Components into Decorators
Classic polymorphic component:
import {
  ElementType,
  createElement,
  MouseEventHandler,
} from "react"

type MergeProps<Base, Extra> =
  Omit<Base, keyof Extra> & Extra

type PropsOf<T extends ElementType> =
  React.ComponentPropsWithoutRef<T>

function WithSideEffect<
  TComponent extends ElementType<{ onClick?: MouseEventHandler }>
>({
  as,
  onClick,
  sideEffect,
  ...rest
}: MergeProps<
  PropsOf<TComponent>,
  {
    as: TComponent
    sideEffect?: MouseEventHandler
    onClick?: MouseEventHandler
  }
>) {
  const handleClick: MouseEventHandler = (event) => {
    onClick?.(event)
    sideEffect?.(event)
  }

  return createElement(as, {
    ...rest,
    onClick: handleClick,
  })
}

The transformation is simple:
Remove as from props and accept the component as a function parameter.
That converts polymorphic behavior into a reusable decorator.

Analytics Decorator (Production-Ready)
import { ComponentType, MouseEventHandler } from "react"

type AnalyticsProps = {
  elementKey: string
  eventLabel?: string
}

export function withAnalyticsTracking<
  TBase extends {
    onClick?: MouseEventHandler
    label?: string
  }
>(BaseComponent: ComponentType<TBase>) {
  return function AnalyticsWrapped(
    props: TBase & AnalyticsProps
  ) {
    const {
      elementKey,
      eventLabel,
      onClick,
      ...rest
    } = props

    const handleClick: MouseEventHandler = (event) => {
      console.log("Tracking event:", {
        elementKey,
        label: eventLabel ?? props.label ?? elementKey,
      })

      onClick?.(event)
    }

    return (
      <BaseComponent
        {...(rest as TBase)}
        onClick={handleClick}
      />
    )
  }
}

This decorator:

Preserves original props
Injects analytics
Keeps type inference intact
Works with any compatible component


Route Resolver Decorator
Centralized routing logic prevents chaos.
type RouteProps<T extends string> = {
  template: T
  params: Record<string, string>
}

export function withRouteResolver<
  TBase extends { href?: string }
>(BaseComponent: ComponentType<TBase>) {
  return function RouteWrapped<
    TTemplate extends string
  >(props: TBase & RouteProps<TTemplate>) {
    const { template, params, ...rest } = props

    const resolvedHref = Object.entries(params).reduce(
      (url, [key, value]) =>
        url.replace(`:${key}`, value),
      template
    )

    return (
      <BaseComponent
        {...(rest as TBase)}
        href={resolvedHref}
      />
    )
  }
}

This enables:

Template validation
Central formatting
Localization integration
Analytics chaining
Strict parameter control


Composing Decorators Safely
const EnhancedButton = withRouteResolver(
  withAnalyticsTracking(PrimaryButton)
)

Composition remains predictable because:

Each decorator isolates logic
Rendering remains untouched
TypeScript enforces compatibility


Building a Decoratable Card System
Base card:
type CardBaseProps = {
  className?: string
  style?: React.CSSProperties
  children?: React.ReactNode
}

export function CardBase({
  className,
  style,
  children,
}: CardBaseProps) {
  return (
    <div
      className={`rounded-lg p-4 shadow ${className ?? ""}`}
      style={style}
    >
      {children}
    </div>
  )
}

Loading decorator:
export function withLoadingState<
  T extends { children?: React.ReactNode }
>(BaseComponent: ComponentType<T>) {
  return function LoadingWrapped(
    props: T & { isLoading?: boolean }
  ) {
    const { isLoading, children, ...rest } = props

    return (
      <BaseComponent {...(rest as T)}>
        {isLoading ? <div>Loading...</div> : children}
      </BaseComponent>
    )
  }
}

Compose utility:
function compose(
  ...decorators: Array<
    (component: ComponentType<any>) => ComponentType<any>
  >
) {
  return (base: ComponentType<any>) =>
    decorators.reduceRight(
      (acc, decorator) => decorator(acc),
      base
    )
}

Final card:
export const Card = compose(
  withLoadingState
)(CardBase)


TypeScript Limitation: Generic Collisions
Decorators work perfectly --- until multiple introduce computed
generics.
Example:
return function WithRoute<TTemplate extends string>(
  props: ExtractProps<TBase> & LinkProps<TTemplate>
)

Stacking several generic-heavy decorators may:

Collapse inference
Override template literal types
Reduce safety guarantees

Practical rule:
Use only one computed-generic decorator per chain.

Where This Pattern Excels
Ideal for:

Analytics
Logging
Permission layers
Feature flags
Centralized routing
Business rule injection
UI library extensions

Less ideal for:

Highly dynamic render patterns (FACC is stronger there)


Architectural Impact
In large React + TypeScript applications:

Components are not always under your cont…


Nexus State: A Modern Atomic State Manager for JavaScript
Fri, 20 Feb 2026 00:00:00 GMT
State management remains one of the most complex areas in frontend engineering. Over the years, we’ve seen Redux, MobX, Zustand, and Jotai attempt to balance structure, performance, and developer experience.
Nexus State introduces an atomic model built around simplicity while still offering powerful capabilities such as:

Built-in DevTools
Time Travel debugging
Async state primitives
Persistence plugins
Middleware system
Multi-framework support

This article explores its architecture, core patterns, and practical usage.

Core Concept: Atoms
Atoms are minimal, isolated pieces of state.
import { atom, createStore } from '@nexus-state/core'

const sessionCounter = atom(0, 'sessionCounter')

const multipliedValue = atom((read) => read(sessionCounter) * 5, 'multipliedValue')

const mainStore = createStore()

mainStore.set(sessionCounter, 4)
console.log(mainStore.get(multipliedValue)) // 20

Derived atoms recompute automatically when dependencies change.

Store & Subscriptions
const unsubscribeHandler = mainStore.subscribe(sessionCounter, (value) => {
  console.log('Updated:', value)
})

mainStore.set(sessionCounter, 12)
unsubscribeHandler()

The store handles dependency tracking and batched updates.

React Example
import { useAtom } from '@nexus-state/react'

const progressAtom = atom(0, 'progress')
const percentAtom = atom((read) => read(progressAtom) * 10, 'percent')

export function ProgressPanel() {
  const [progress, updateProgress] = useAtom(progressAtom)
  const [percent] = useAtom(percentAtom)

  return (
    <div>
      <h2>Progress: {progress}</h2>
      <p>Percentage: {percent}%</p>
      <button onClick={() => updateProgress(prev => prev + 1)}>
        Increase
      </button>
    </div>
  )
}

Only components depending on changed atoms re-render.

Async Atoms
import { asyncAtom } from '@nexus-state/async'

const [accountAtom, fetchAccount] = asyncAtom({
  fetchFn: async () => {
    const response = await fetch('/api/account')
    return response.json()
  }
})

Async atoms encapsulate loading, error, and resolved states.

Persistence Example
import { persist, localStorageStorage } from '@nexus-state/persist'

persist(progressAtom, {
  key: 'app_progress',
  storage: localStorageStorage
})(mainStore)

State is automatically restored on reload.

Middleware Example
import { middleware } from '@nexus-state/middleware'

const auditMiddleware = middleware(progressAtom, {
  beforeSet: (_, next) => {
    console.log('Before:', next)
    return next
  },
  afterSet: (_, next) => {
    console.log('After:', next)
  }
})


Performance Characteristics
Nexus State optimizes:

Selective component updates
Batched state mutations
Lazy evaluation of derived atoms
Zero DevTools overhead in production builds


Comparison Snapshot
Compared to Redux:

Less boilerplate
No action types
Native async support
Smaller bundle

Compared to Zustand:

Built-in Time Travel
Multi-framework support

Compared to MobX:

Explicit dependency graph
Smaller runtime size

Compared to Jotai:

Store instance isolation
Built-in persistence


When Nexus State Makes Sense
Use it when:

You want atomic isolation
You need computed state out of the box
Debugging tools matter
You work across multiple frameworks
You build micro-frontends


Resources
Documentation: nexus-state.website.yandexcloud.net
Source Code: sourcecraft.dev/astashkin-a/nexus-state
Demo Applications: codesandbox.io/p/sandbox/nryqsj
Related articles

Understanding Big O Notation with JavaScript
Mastering Web Animations with Anime.js
Optimizing await fetch(): Why It Slows Down and How to Speed It Up



How to Fix Circular Imports in a React/TypeScript Application
Fri, 20 Feb 2026 00:00:00 GMT
Circular (recursive) imports are one of those issues that look small at first — until they start breaking runtime behavior, tests, hot reload, or production builds.
They rarely appear as a single obvious mistake. More often, they are a symptom of deeper architectural problems: unclear module boundaries, excessive barrel files, and uncontrolled cross-feature dependencies.
In this guide, we’ll walk through a practical approach to:

Detect circular imports
Understand why they happen
Refactor the structure safely
Prevent them from coming back


A Real Module Structure Example
modules/
  client/
    index.ts              # Public API of the module
    redux/
      actions.ts
      reducer.ts
      types.ts
      index.ts
    ui/
      ClientComponent.tsx
    service.ts
    types.ts

This is a common structure:

redux/ contains state logic
ui/ contains components
service.ts contains business logic
index.ts exposes the public API

Nothing looks wrong at first glance. But this structure can easily create circular dependencies if not handled carefully.

Barrel Files: The Hidden Source of Cycles
Barrel files (index.ts) are useful — but dangerous when overused.
The Common Mistake
modules/index.ts
export * from "./client";
export * from "./order";

This expands your dependency graph and increases the risk of circular imports.
Instead of importing specific modules, developers start importing from @modules, which forces evaluation of everything.

Correct vs Incorrect Imports
Correct
import { clientActions } from "@modules/client";

Incorrect
import { clientActions } from "@modules";

The second option hides the dependency path and makes cycles easier to create accidentally.

Internal Module Imports: Always Use Relative Paths
Incorrect
import { clientActions } from ".";

Correct
import { clientActions } from "./redux/actions";
import { clientTypes } from "./types";

Always use direct relative imports inside the same module.

High Cohesion: Export Only What Is Public
Incorrect
export { clientActions, clientReducer } from "./redux";
export { ClientComponent } from "./ui";
export { clientTypes } from "./types";

This exposes internal implementation details.
Correct
export { ClientService } from "./service";
export type { Client } from "./types";

Only export what external modules truly need.

Understanding Dependency Graphs
utils/                   ← leaf node
 ├─ index.ts
 ├─ format.ts
 └─ validate.ts

modules/
 ├─ client/              ← depends on utils
 │   └─ index.ts
 └─ order/               ← depends on client and utils
     └─ index.ts

Safe dependency direction:
utils → client → order

No back-references. No cycles.

Example of a Circular Dependency
Before
client/service.ts
import { orderService } from "@modules/order";

order/service.ts
import { clientService } from "@modules/client";

Dependency graph:
client → order → client


How to Fix It
Option 1: Extract Shared Logic
@modules/shared/types.ts
export type { Client, Order };

Now both modules depend on shared:
client → shared
order  → shared


Option 2: Split Large Modules
Break a feature into:

client-core (business logic)
client-ui (UI components)

Then:
import { clientCoreService } from "@modules/client-core";

Smaller modules reduce coupling.

Detecting Circular Imports
Recommended tools:

madge
dependency-cruiser
eslint-plugin-import


Final Thoughts
Circular imports are not just annoying errors — they are architectural feedback.
A clean dependency graph:

Improves maintainability
Makes testing easier
Reduces unpredictable runtime behavior
Keeps teams aligned

The real goal isn’t just “no circular imports”.
It’s a clean, predictable module architecture.
Related articles

Validate ENV Variables in TypeScript with Zod
Resolving Missing flat, flatMap, and Flatten on any[] in TypeScript
Declaring and Managing Global Variables in TypeScript



Friday Links #34: Modern JavaScript Picks & Highlights
Fri, 13 Feb 2026 00:00:00 GMT

Friday Links #33 brings together a fresh set of modern JavaScript highlights — from new tools and framework updates to useful libraries and developer resources. This edition focuses on practical discoveries you can try immediately, plus a few notable releases that may shape upcoming workflows. If you like staying current without scrolling through endless feeds, this digest is for you.
Pinterest processes more searches than ChatGPT

According to Pinterest CEO Bill Ready, who made the comparison while discussing the company’s latest quarterly results. He positioned Pinterest as a major standalone search and discovery entry point, especially for commercial intent.
According to third-party estimates, ChatGPT handles around 75B searches per month, while Pinterest sees roughly 80B, generating about 1.7B monthly clicks. Ready noted that more than half of Pinterest searches are commercial in nature, versus roughly 2% for ChatGPT (by his estimate).
The quarter itself came in slightly below expectations:
— revenue: $1.32B vs $1.33B expected
— EPS: $0.67 vs $0.69 expected
— Q1 2026 outlook: $951–971M vs $980M expected
Pinterest attributed the softness to reduced advertiser budgets (especially in Europe) and new tariffs affecting home and furniture categories. Despite this, user growth beat forecasts, reaching 619M monthly active users (+12% YoY). Shares dropped about 20% in after-hours trading.
The company says it’s doubling down on visual search, recommendations, personalization, and tighter e-commerce integrations (including Amazon partnerships) to capture buying intent earlier in the discovery journey.
📜 Articles & Tutorials
Gemini 3 Deep Think: Advancing science, research and engineering
Email RFC Protocol Support - Complete Standards & Specifications Guide
CSS in 2026: The new features reshaping frontend development
Greedy Rectangle Merging: Turning Binary Grids into Simple Geometry – JavaScript example
You probably don’t need useCallback here
agent-browser -  Browser automation CLI for AI agents
syntux -  Generative UIs for the web.
JavaScript Frameworks - Heading into 2026
The Browser Hates Surprises
A new meta tag for respecting text scaling on mobile
Measuring SVG rendering time
The logo soup problem (and how to solve it)
Debugging with AI: Can It Replace an Experienced Developer?
⚒️ Tools
npmx — A Faster, More Informative npm Registry Browser — A new high-performance interface for exploring packages from the official npm registry. Search is quick and accurate, and package pages (for example, axios) surface richer metadata and insights at a glance. It’s not meant to replace the official registry, but it makes the default npmjs.com browsing experience feel dated. The built-in package comparison feature is especially useful.
Rari – Rust-powered React framework
almostnode — Run a Node.js Environment in the Browser — An experimental project that brings a Node.js (v20) runtime directly into the browser, including basic npm package support. It’s still early and not production-ready, but the concept is intriguing and the live demo on the homepage shows promising potential.
Everything Claude Code - The complete collection of Claude Code configs from an Anthropic hackathon winner.
Atlas - Network Infrastructure Visualizer -  Open-source tool for network discovery, visualization, and monitoring. Built with Go, FastAPI, and React, supports Docker host scanning.
Awilix -  Extremely powerful Inversion of Control (IoC) container for Node.JS
Aedes -  Barebone MQTT broker that can run on any stream server, the node way
broz -  A simple, frameless browser for screenshots
Shaka Player -  JavaScript player library / DASH & HLS client / MSE-EME player
SVG Studio — A Browser-Based SVG Editing Tool
Baseline Status for Video - An Easy Way to Show Baseline Support in Videos. A small, practical utility for quickly displaying Baseline support status in video content. It helps creators visually communicate browser feature support and compatibility without building custom overlays or graphics.
Promptefy - Prompt-Driven Video Generator with Gemini
📚 Libs
Fireshare -  Self host your media and share with unique links
Fleetbase -  Modular logistics and supply chain operating system (LSOS)
Peek -  Light Weight "Headroom Style" scroll intent library that hides the site header on scroll down and shows on scroll up
ChatKit — A Framework for Building AI Chat Experiences — A developer framework for adding polished, AI-powered chat interfaces to applications with minimal setup. It provides ready-made building blocks for conversational features and orchestration, helping teams ship advanced chat functionality quickly without rebuilding common patterns from scratch.
image-js -  Image processing and manipulation in JavaScript
⌚ Releases
TypeScript 6.0 has entered beta. This release isn’t about flashy new features — it focuses on simplifying and cleaning up tsconfig settings. Think of it as a transitional version designed to smooth the path toward the future Go-based “native” TypeScript 7 compiler.

Improved type inference for functions without this: TypeScript now treats functions that don’t actually use this as less context-sensitive, improving inference in more cases.
Support for subpath imports starting with #/: You can now use imports like import x from "#/module" in supported environments, simplifying internal package aliasing.
New --stableTypeOrdering flag:…


Choosing the Right State Strategy in React
Mon, 19 Jan 2026 00:00:00 GMT
State management in React is both a superpower and a recurring source of complexity. As applications grow, state stops being “just some useState hooks” and turns into a mix of:

local UI state (inputs, dialogs, tabs),
shared UI state (layout, theme, auth),
server state (queries, caches, background refresh),
domain state (entities, workflows, lifecycles),
and performance constraints (minimizing wasted renders).

There is no single perfect tool that solves every case. Instead, each approach makes different trade‑offs around subscriptions, granularity, debuggability, and team workflow.
This article walks through several state management strategies that React developers actually use in production today. Instead of yet another todo list, we will use more realistic examples: a market dashboard, trade lifecycle, user preferences, and reactive UIs.
We will look at:

When local state is enough.
When Context helps, and when it hurts.
How Redux Toolkit enables event logs and workflows.
How Zustand provides simple global stores with selectors.
How Jotai models state as small atoms.
How MobX and Valtio embrace reactive, mutable models.
How to decide which tool to use for which problem.


The Two Fundamental Problems of React State
Every state management discussion eventually runs into two opposite pain points:


Data changes, but the UI does not update.

This is a data flow problem: React does not know what changed, or the change happened outside its subscription graph.


UI updates even though the relevant data did not change.

This is a subscriptions problem: components subscribed to too much state or subscribe in a way that always returns new values.


Every library in the React ecosystem is, in one way or another, an attempt to make these two problems manageable.

Approach 1: Local State with useState and useReducer
The simplest and often the most reliable approach is to keep state local to the component that needs it.
Local state is a great fit for:

widget‑level interactions (modals, dropdowns, accordions);
form inputs and validation inside a single screen;
transient data that does not need to be shared.

Consider a small sparkline chart that visualizes the last 50 price ticks of a stock. This is pure UI state; nothing else needs to know about it.
import { useReducer, useEffect } from "react";

interface Candle {
  t: number;
  p: number;
}

type Action = { type: "tick"; price: number };

function chartReducer(state: Candle[], action: Action): Candle[] {
  switch (action.type) {
    case "tick":
      return [...state.slice(-49), { t: Date.now(), p: action.price }];
    default:
      return state;
  }
}

export function Sparkline({ feed }: { feed: () => number }) {
  const [candles, dispatch] = useReducer(chartReducer, []);

  useEffect(() => {
    const id = setInterval(() => {
      dispatch({ type: "tick", price: feed() });
    }, 500);
    return () => clearInterval(id);
  }, [feed]);

  return (
    <pre style={{ fontSize: 12 }}>
      {JSON.stringify(candles.slice(-5), null, 2)}
    </pre>
  );
}

React does not need a state library to manage this. The logic is:

encapsulated,
easy to test,
and easy to throw away if the component is refactored.

When local state is ideal

The data does not need to be shared across distant components.
The component can own the entire lifecycle of that state.
Performance characteristics are simple and local.

When local state becomes a problem

Many siblings need the same state and start lifting it up repeatedly.
Different screens must coordinate around shared entities or workflows.
Debugging requires inspecting the evolution of state over time.

As soon as state needs to be shared or observed by many components, we usually escalate beyond pure useState/useReducer.

Approach 2: React Context for Shared UI State
React Context solves a specific problem: prop drilling. Instead of passing props through multiple levels, a Provider at the top of a subtree can expose state and APIs to any descendant.
Context is a great fit for:

theme,
locale,
the current authenticated user,
feature flags,
routing metadata,
“ambient” UI state that rarely changes.

However, Context has a sharp edge: when the Provider value reference changes, all consumers re‑render. Memoization is critical.
Example: Shared Watchlist with Context
Imagine a market dashboard where multiple components show and modify a user’s stock watchlist.
import {
  createContext,
  useContext,
  useCallback,
  useMemo,
  useState,
  ReactNode,
} from "react";

interface WatchlistContextShape {
  symbols: string[];
  add: (symbol: string) => void;
  remove: (symbol: string) => void;
}

const WatchlistContext = createContext<WatchlistContextShape | null>(null);

export function WatchlistProvider({ children }: { children: ReactNode }) {
  const [symbols, setSymbols] = useState<string[]>(["AAPL", "MSFT"]);

  const add = useCallback(
    (sym: string) =>
      setSymbols(prev => (prev.includes(sym) ? prev : [...prev, sym])),
    [],
  );

  const remove = useCallback(
    (sym: string) => setSymbols(prev => prev.filter(s => s !== sym)),
    [],
  );

  const value = useMemo(
    () => ({ symbols, add, remove }),
    [symbols, add, remove],
  );

  return (
    <WatchlistContext.Provider value={value}>
      {children}
    </WatchlistContext.Provider>
  );
}

export function useWatchlist() {
  const ctx = useContext(WatchlistContext);
  if (!ctx) throw new Error("WatchlistProvider is missing");
  return ctx;
}

Any descendant can call useWatchlist() to read or update the watchlist. For state that changes rarely, this works very well.
Pros of Context

No external dependencies.
Perfect for ambient state (theme, locale, auth, feature flags).
Natural lifetime scoping: unmounting a Provider resets state.

Cons of Context

All consumers re‑render whenever value changes (unless you split Providers).
No built‑in selectors or fine‑grained subscriptions.
No action log, no time travel, and limited debugging visibility.

Context is powerful but should not be the default for high‑frequency or large shared state. For those cases, other tools are better suited.

Approach 3: Redux Toolkit for Workflow‑Oriented State
Redux was designed around a very specific philosophy:

State follows actions. Every change is an event in a log.

In its modern form (Redux Toolkit + React‑Redux), Redux is best used when:

there are clear business events with semantic meaning,
debugging requires inspecting how and when state changed,
multiple teams need a shared, predictable architecture,
reproducibility and time‑travel debugging are important.

Think of a trade order lifecycle in a trading system:

draft → submit…


How to Add Months to a Date in JavaScript
Tue, 13 Jan 2026 00:00:00 GMT
Working with dates in JavaScript looks simple until you need real calendar arithmetic. Adding months is a subtle operation because month lengths vary, timezones affect results, and end-of-month behavior is not always obvious.
Before diving in, if you also work with timezones, you may benefit from this related article:
Previous related guide (timezone handling):

Timezone-Safe Development with date-fns and date-fns-tz

Why Adding Months Is Not Just Adding 30 Days
Some developers assume that one month equals 30 days:
const date = new Date("2024-01-31");
const result = new Date(date.getTime() + 30 * 24 * 60 * 60 * 1000);
console.log(result.toISOString());

This does not guarantee an accurate month shift. For January 31, this often produces a date in early March instead of the end of February.
Adding Months Using Native JavaScript
The native approach uses setMonth:
const date = new Date("2024-01-31");
const result = new Date(date);
result.setMonth(result.getMonth() + 1);
console.log(result.toISOString());

However, this may result in an overflow. January 31 plus one month produces a date in March because February has fewer days.
Fixing End-of-Month Behavior
If your domain needs end-of-month semantics (billing, subscriptions), you can enforce it:
function addMonthsEndSafe(date, months) {
  const d = new Date(date);
  const day = d.getDate();
  d.setMonth(d.getMonth() + months);
  if (d.getDate() < day) {
    d.setDate(0);
  }
  return d;
}

console.log(addMonthsEndSafe(new Date("2024-01-31"), 1));

This correctly yields 2024-02-29 when applicable.
Adding Months Using date-fns
The date-fns library provides addMonths for clean edge-case handling:
import { addMonths } from "date-fns";

console.log(addMonths(new Date("2024-01-31"), 1));
// → 2024-02-29

Subtracting months:
import { subMonths } from "date-fns";

console.log(subMonths(new Date("2024-05-20"), 3));
// → 2024-02-20

Handling Timezones
If your application involves user timezones, use date-fns-tz for formatting:
import { addMonths } from "date-fns";
import { utcToZonedTime, format } from "date-fns-tz";

const utc = addMonths(new Date("2026-01-12T15:00:00.000Z"), 1);
const zone = "America/New_York";
const local = utcToZonedTime(utc, zone);

console.log(format(local, "yyyy-MM-dd HH:mmXXX"));

This helps avoid DST-related formatting issues.
Comparison Summary



Method
End-of-month safe
DST aware
Recommended




+30 days
No
No
Never


setMonth
Partial
Yes
Good


Custom safe function
Yes
Yes
Billing scenarios


date-fns addMonths
Yes
Yes
Most applications



Choosing the Right Strategy



Use Case
Approach




Billing
custom EOM logic


UI calendars
date-fns addMonths


Internal UTC timestamps
native setMonth


Finance
custom logic + UTC



Summary
Adding months is not just arithmetic. Calendar correctness requires accounting for month length differences, handling overflows safely, respecting user timezones when needed, and choosing the right approach for the domain.
date-fns simplifies most real-world scenarios, while custom logic may be necessary for financial systems and subscription billing.
Related articles

Mastering Array Flattening in JavaScript
Mastering Advanced Binary Operations in JavaScript
Mastering Early and Late Binding in TypeScript & JavaScript



How to Convert a String to a Date in JavaScript
Tue, 13 Jan 2026 00:00:00 GMT
Parsing dates from strings in JavaScript can be tricky due to locale differences, ambiguous formats, and browser inconsistencies. For example:

"01/02/2026" could mean January 2nd or February 1st depending on locale,
"2026-01-12" parses reliably but may be interpreted in local timezone,
"2026-01-12 10:00" is parsed differently by different engines,
new Date(string) handles formats inconsistently.

To avoid these pitfalls, developers should take control over parsing rules rather than relying on automatic behavior.
Before moving on, if timezones are also part of your workflow, this related article might be useful:
Related guide (timezone handling):
Timezone-Safe Development with date-fns and date-fns-tz
Built‑in Parsing: Pitfalls
Avoid relying on native parsing for non-ISO strings:
new Date("2026-01-12 10:00"); // ambiguous, local parsing rules
new Date("01/12/2026");      // locale-dependent

Better:
new Date("2026-01-12T10:00:00Z"); // explicit UTC

Or using a parsing library like date-fns to enforce expected formats.
Using date-fns for Safe Parsing
date-fns enables explicit parsing patterns:
import { parse, isValid } from "date-fns";

const input = "12.01.2026";
const pattern = "dd.MM.yyyy";
const reference = new Date();

const result = parse(input, pattern, reference);

if (isValid(result)) {
  console.log(result.toISOString());
}

This prevents locale ambiguity and ensures reproducibility.
React Form Parsing Demo (Practical Example)
For more advanced form handling patterns, see

React Form Primitives:
The following example demonstrates how to parse a date string entered by a user inside a React controlled form, validate it, and show a formatted output.
import React, { useState } from "react";
import { parse, isValid, format } from "date-fns";

type SupportedFormat = "yyyy-MM-dd" | "dd.MM.yyyy" | "MM/dd/yyyy";

const formatExamples: Record<SupportedFormat, string> = {
  "yyyy-MM-dd": "2026-01-12",
  "dd.MM.yyyy": "12.01.2026",
  "MM/dd/yyyy": "01/12/2026",
};

export function DateStringForm() {
  const [raw, setRaw] = useState("");
  const [pattern, setPattern] = useState<SupportedFormat>("yyyy-MM-dd");
  const [parsed, setParsed] = useState<Date | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit: React.FormEventHandler = (e) => {
    e.preventDefault();
    const trimmed = raw.trim();
    if (!trimmed) {
      setParsed(null);
      setError("Please enter a date string.");
      return;
    }
    const reference = new Date();
    const result = parse(trimmed, pattern, reference);
    if (!isValid(result)) {
      setParsed(null);
      setError(
        \`Cannot parse "\${trimmed}" as \${pattern}. Example: \${formatExamples[pattern]}\`
      );
      return;
    }
    setParsed(result);
    setError(null);
  };

  return (
    <div style={{ maxWidth: 480, margin: "2rem auto", fontFamily: "system-ui" }}>
      <h2>String to Date parsing demo</h2>
      <p style={{ marginBottom: "1rem" }}>
        This example shows how to convert a date string into a JavaScript{" "}
        <code>Date</code> object using controlled form inputs and{" "}
        <code>date-fns</code>. For more advanced form patterns, see{" "}
        <a
          href="https://jsdev.space/react-form-primitives/"
          target="_blank"
          rel="noreferrer"
        >
          React Form Primitives
        </a>
        .
      </p>

      <form onSubmit={handleSubmit} style={{ display: "grid", gap: "0.75rem" }}>
        <label style={{ display: "grid", gap: "0.25rem" }}>
          <span>Date string</span>
          <input
            type="text"
            value={raw}
            onChange={(e) => setRaw(e.target.value)}
            placeholder={formatExamples[pattern]}
            style={{
              padding: "0.5rem 0.75rem",
              borderRadius: 6,
              border: "1px solid #ccc",
              fontFamily: "inherit",
            }}
          />
        </label>

        <label style={{ display: "grid", gap: "0.25rem" }}>
          <span>Expected format</span>
          <select
            value={pattern}
            onChange={(e) => setPattern(e.target.value as SupportedFormat)}
            style={{
              padding: "0.5rem 0.75rem",
              borderRadius: 6,
              border: "1px solid #ccc",
              fontFamily: "inherit",
            }}
          >
            <option value="yyyy-MM-dd">yyyy-MM-dd (2026-01-12)</option>
            <option value="dd.MM.yyyy">dd.MM.yyyy (12.01.2026)</option>
            <option value="MM/dd/yyyy">MM/dd/yyyy (01/12/2026)</option>
          </select>
        </label>

        <button
          type="submit"
          style={{
            marginTop: "0.5rem",
            padding: "0.5rem 0.75rem",
            borderRadius: 6,
            border: "none",
            background: "#111827",
            color: "white",
            cursor: "pointer",
            fontFamily: "inherit",
          }}
        >
          Parse date
        </button>
      </form>

      <div style={{ marginTop: "1rem", fontSize: 14 }}>
        {error && (
          <p style={{ color: "#b91c1c", margin: 0 }}>
            {error}
          </p>
        )}

        {parsed && !error && (
          <div
            style={{
              marginTop: "0.75rem",
              padding: "0.75rem",
              borderRadius: 6,
              background: "#f9fafb",
              border: "1px solid #e5e7eb",
            }}
          >
            <div>
              <strong>Parsed Date object:</strong>
            </div>
            <div>
              <code>{parsed.toString()}</code>
            </div>
            <div style={{ marginTop: "0.5rem" }}>
              <strong>ISO (UTC):</strong>{" "}
              <code>{parsed.toISOString()}</code>
            </div>
            <div style={{ marginTop: "0.25rem" }}>
              <strong>Formatted (yyyy-MM-dd):</strong>{" "}
              <code>{format(parsed, "yyyy-MM-dd")}</code>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Summary
Key takeaways:

Native Date parsing is inconsistent for non-ISO formats,
Using explicit parsing rules prevents locale ambiguity,
React integration is straightforward with controlled inputs,
date-fns improves reliability and validation.

This updated MDX now includes both conceptual guidance and a practical UI demo.
Related articles

Practical Month Arithmetic and Calendar Logic in JavaScript
Mastering Array Flattening in JavaScript
Mastering Advanced Binary Operations in JavaScript



How to Handle Timezones with date-fns and date-fns-tz
Tue, 13 Jan 2026 00:00:00 GMT
Why Timezones Matter
Working with dates is deceptively complex. Different regions have local timezone offsets, daylight saving rules (DST), and historical changes.
Almost every backend stores timestamps in UTC, while frontends must show them in local time. Mistakes lead to wrong displayed times, off-by-one-day bugs, incorrect scheduling, and misaligned business rules.
Instead of building logic manually, this article uses date-fns and date-fns-tz, two lightweight libraries designed for timezone-safe manipulation.
Installation
npm install date-fns date-fns-tz

Basic Concepts


UTC is the universal storage format

Example: "2024-10-11T10:30:00.000Z"


Local time is a presentation layer

UI must render times in the user’s timezone.


date-fns-tz gives explicit control

Prevents “magic conversion bugs”.


Parsing a UTC Timestamp into Local Time
import { format } from "date-fns";
import { utcToZonedTime } from "date-fns-tz";

const iso = "2026-01-12T15:00:00.000Z";
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

const date = utcToZonedTime(iso, timezone);
console.log(format(date, "yyyy-MM-dd HH:mm:ssXXX"));

Converting Local Time to UTC
import { zonedTimeToUtc } from "date-fns-tz";

const userInput = "2026-01-12 18:30:00";
const timezone = "Europe/Berlin";

const utc = zonedTimeToUtc(userInput, timezone);
console.log(utc.toISOString());

Formatting With Timezones
import { format, formatISO } from "date-fns";
import { utcToZonedTime } from "date-fns-tz";

const iso = "2026-07-01T12:00:00Z";
const zone = "America/New_York";

const local = utcToZonedTime(iso, zone);

console.log(format(local, "PPpp"));
console.log(formatISO(local));

Handling Daylight Saving Time (DST)
const winter = "2026-01-10T12:00:00Z";
const summer = "2026-07-10T12:00:00Z";
const zone = "America/New_York";

console.log(format(utcToZonedTime(winter, zone), "HH:mmXXX"));
console.log(format(utcToZonedTime(summer, zone), "HH:mmXXX"));

Comparing Dates Across Timezones
import { getTime } from "date-fns";

const same = getTime(new Date(a)) === getTime(new Date(b));

Scheduling Use Case
import { zonedTimeToUtc } from "date-fns-tz";

function schedule(userLocalDateTime, userZone) {
  const utc = zonedTimeToUtc(userLocalDateTime, userZone);
  return utc.toISOString();
}

For rendering:
import { utcToZonedTime } from "date-fns-tz";

function present(utcIso, userZone) {
  return utcToZonedTime(utcIso, userZone);
}

Browser Timezones
const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;

Common Pitfalls
Wrong:
new Date("2026-01-12 10:00");

Correct:
new Date("2026-01-12T10:00:00Z");

or convert using zonedTimeToUtc.
When to Use Which Function



Task
Function




UTC → local
utcToZonedTime(utc, zone)


Local → UTC
zonedTimeToUtc(local, zone)


Format
format(date, pattern)


Store
date.toISOString()



Summary
Working with timezones is not simple subtraction. It requires:

consistent UTC storage,
correct local presentation,
DST-aware conversions,
predictable comparisons.

date-fns and date-fns-tz help avoid most timezone-related pitfalls while staying lightweight.
Related articles

Practical Month Arithmetic and Calendar Logic in JavaScript
Mastering Array Flattening in JavaScript
Mastering Advanced Binary Operations in JavaScript



Howto Build Reactive Declarative UI in Vanilla JavaScript
Mon, 12 Jan 2026 00:00:00 GMT
Modern UI frameworks offer abstraction layers that make user interfaces declarative and reactive. However, the web platform itself exposes primitives that can be composed to achieve similar patterns without introducing a dedicated UI library. This article demonstrates an experimental approach for creating a reactive, declarative UI flow using only vanilla JavaScript, Web APIs, and Proxy-based state tracking.
The purpose of the experiment is to examine how far native capabilities can be pushed without framework-level abstractions and to illustrate architectural benefits of declarative behavior in UI code: improved clarity, maintainability, and reduced coupling.

The Target Behavior
The experiment focuses on a practical business scenario:

Display a modal dialog that performs periodic polling of an API endpoint. The dialog should remain open until a specific condition is met, then resolve or reject accordingly.

The modal dynamically:

mounts itself into the DOM
starts and manages a polling process
exposes reactive internal state
updates based on the polling result
closes automatically when finished
provides optional developer controls

The primary requirement is that consumer code defines what should happen, not how to wire it.

Declarative Usage Example
Example invocation:
uiModalEngine.showPollingDialog({
  endpoint: `${getServiceBaseUrl()}/process/wait_for/confirmation`,

  requestPayload: () => ({
    taskId: currentTask.id,
    mode: "rapid",
    includeAudit: true,
  }),

  requestOptions: {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  },

  shouldContinue: (response) => response.ok && response.pending === true,

  intervalMs: 1000,

  buildContent: (mountNode) => {
    const contentBlock = uiModalEngine.createContentBlock({
      title: "Waiting for confirmation...",
      description: "This dialog will close automatically once the operation completes.",
    })
    mountNode.appendChild(contentBlock)
  },

  onResolved: ({ dialogNode, response }) => {
    metrics.track("operation_confirmed")
    dialogNode.remove()
  },

  onRejected: ({ dialogNode, error }) => {
    logger.error("operation_polling_failed", error)
    dialogNode.remove()
  },

  devToolsEnabled: false,
})

Declarative Takeaways



Concern
Ownership




UI behavior
Declarative configuration


UI rendering
Modal orchestrator


DOM structure
DOM utility layer


polling logic
polling helper


reactive state
Proxy-based tracker



No framework is involved, yet responsibilities remain clearly segmented.

Core Building Block: DOM Utility Layer
To keep high-level code focused on behavior, DOM creation is delegated to a lightweight utility:
class DomToolkit {
  constructor(doc) {
    this.doc = doc
  }

  static getInstance(doc) {
    if (!DomToolkit.instance) DomToolkit.instance = new DomToolkit(doc)
    return DomToolkit.instance
  }

  createElement({ tag, classes, id, attrs = {}, styles = {}, html }) {
    const el = this.doc.createElement(tag)

    if (id) el.id = id

    if (typeof classes === "string") el.classList.add(classes)
    if (Array.isArray(classes)) classes.forEach(c => el.classList.add(c))

    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v))
    Object.entries(styles).forEach(([k, v]) => el.style[k] = v)

    if (html != null) el.innerHTML = html

    return el
  }
}

const domToolkit = DomToolkit.getInstance(document)

This removes boilerplate from business logic and centralizes standard element configuration.

Reactive State via Proxy
Next, the experiment introduces deep reactive state using the native Proxy object. This allows mutations at arbitrary depth to be observed without requiring explicit setters.
class DeepStateProxy {
  constructor(target, { onSet, onDelete } = {}) {
    this.onSet = onSet
    this.onDelete = onDelete
    return this.wrap(target, [])
  }

  wrap(node, path) {
    if (!node || typeof node !== "object") return node

    const handler = {
      set: (target, key, value) => {
        const fullPath = [...path, key]
        target[key] = this.wrap(value, fullPath)
        this.onSet?.(value, fullPath)
        return true
      },
      deleteProperty: (target, key) => {
        if (!(key in target)) return false
        const fullPath = [...path, key]
        delete target[key]
        this.onDelete?.(fullPath)
        return true
      },
    }

    Object.keys(node).forEach(k => {
      node[k] = this.wrap(node[k], [...path, k])
    })

    return new Proxy(node, handler)
  }
}

Usage example:
const state = new DeepStateProxy({
  attempts: 0,
  lastResponse: null,
}, {
  onSet: (value, path) => console.debug("state changed:", path.join("."), value),
})

This approach:
enables deep mutation tracking

does not require libraries

keeps state as plain objects

keeps consumer code minimal

Polling Logic as a Reusable Abstraction
To isolate asynchronous logic:
async function runPolling({ task, shouldStop, intervalMs }) {
  while (true) {
    const result = await task()
    if (shouldStop(result)) return result
    await new Promise(res => setTimeout(res, intervalMs))
  }
}

Isolating polling enables:

testability (polling logic has no DOM dependencies)
readability (consumer describes behavior declaratively)
reusability (polling can be embedded into other flows)


Modal Orchestrator
The orchestrator integrates DOM utilities, polling, and reactive state into a coherent unit:
ModalOrchestrator.prototype.showPollingDialog = function (cfg) {
  const {
    endpoint, requestPayload, requestOptions,
    shouldContinue, intervalMs,
    buildContent, onResolved, onRejected,
    devToolsEnabled = false,
  } = cfg

  const dialogNode = this.createDialogShell({ buildContent })
  document.body.appendChild(dialogNode)

  const state = new DeepStateProxy({
    attempts: 0,
    polling: true,
    aborted: false,
    lastResponse: { ok: false },
  }, {
    onSet: (value, path) => {
      if (devToolsEnabled) console.debug("state:", path.join("."), value)
    },
    onDelete: () => { throw new Error("state mutation violation") },
  })

  state.polling = true

  runPolling({
    task: async () => {
      const payload = requestPayload()
      const res = await fetch(endpoint, { ...requestOptions, body: JSON.stringify(payload) })
        .then(r => r.json())
        .catch(err => ({ ok: false, error: err.message, errored: true }))

      if (!shouldContinue(res) && !res.errored) state.polling = false
      else state.attempts++

      state.lastResponse = res
      return res
    },
    shouldStop: () => !state.polling,
    intervalMs,
  })
    .then(res => onResolved?.({ dialogNode, response: res }))
    .catch(err => onRejected?.({ dialogNode, error: err }))
}

Note the absence of framework-specific concepts such as:

components
hooks
virtual DOM
stores

Yet the intent remains clear and maintainable.

Observations & Takeaways
Key architectural observations include:


Declarative descriptions scale better than imperative wiring

The consumer code reads…


Meet Ripple: The Elegant TypeScript UI Framework
Sun, 11 Jan 2026 00:00:00 GMT
Ripple is a compiler-first TypeScript UI framework for building fast, clean, reactive applications with minimal boilerplate and optimal performance.
Why the Frontend World Needs Ripple in 2026
Front-end development has reached an unusual point in its history:

writing code is easy — maintaining it is hard.
AI accelerated code output, but did not solve code quality, consistency, or review overhead.
Traditional frameworks are powerful but often come with:

verbose state handling
over-rendering components
heavy abstraction layers
confusing refs/signals/hooks
bloated bundle sizes

Ripple was designed for this moment. It prioritizes simplicity, clarity, and reactivity.

“Code should read like it does.”


What is Ripple?
Ripple is a compiler-first, fine-grained reactive UI framework with:

TypeScript-first components
reactive variables with track() + @
no Virtual DOM
automatic dependency tracking
inline control flow
scoped CSS


Ripple’s Design Goals
1. Compiler Before Runtime
The compiler performs:

DOM dependency analysis
dead CSS removal
scoped styling
code transformation

2. Reactive by Default
let count = track(0);
<button onClick={() => @count++}>{@count}</button>

No useState, ref(), .value, $:, or signals.
3. Low Cognitive Load
Less to memorize. Business logic remains obvious.
4. Granular DOM Updates
Only updated nodes mutate — not whole components.

Getting Started
Initialize a new project:
npx create-ripple-app ripple-todo-app

Move inside:
cd ripple-todo-app

If integrating manually:
npm install ripple ripple-compiler ripple-dom

Scripts
npm run dev
npm run build
npm run preview

Folder Structure
my-ripple-app/
├─ src/
│  ├─ App.ripple
│  ├─ index.tsx
│  └─ components/
├─ public/
├─ ripple.config.ts
├─ tsconfig.json
├─ package.json

Verify Setup
component App() {
  <h1>{"Hello Ripple"}</h1>
}

If it renders, you're ready.

Ripple in 2 Minutes: Core Syntax
Reactive Variables
let count = track(0);

Read + Write
<button onClick={() => @count++}>{@count}</button>

Reactive Collections
const todos = #[];
const user = #{ name: "Tom" };

Components
component Greeting({ name }) {
  <h1>{"Hello "}{name}</h1>;
}

Inline Control Flow
for (const item of items) {
  <Item data={item}/>
}

Productivity Advantages
Ripple reduces maintenance cost by:

fewer primitives
direct reactivity
compiler constraints
minimal boilerplate
tiny runtime


Building a Real Demo: Todo List
We’ll demonstrate Ripple’s power with a fully reactive Todo List.
TodoInput Component
import { track } from "ripple";

component TodoInput({ onAdd }) {
  let text = track("");

  function submit() {
    const v = @text.trim();
    if (v) {
      onAdd(v);
      @text = "";
    }
  }

  <div class="input">
    <input
      placeholder="Add a task..."
      value={@text}
      onInput={(e) => @text = e.target.value}
      onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
    />
    <button onClick={submit}>{"Add"}</button>
  </div>
}

TodoItem Component
component TodoItem({ todo, onToggle, onDelete }) {
  <li>
    <input type="checkbox" checked={todo.completed} onChange={onToggle} />
    <span class={todo.completed ? "done" : ""}>{todo.text}</span>
    <button onClick={onDelete}>{"×"}</button>
  </li>
}

App Component
export component App() {
  const todos = #[];

  function add(text) {
    todos.push(#{ id: Date.now(), text, completed: false });
  }

  function toggle(t) {
    t.completed = !t.completed;
  }

  function remove(id) {
    const idx = todos.findIndex(t => t.id === id);
    if (idx >= 0) todos.splice(idx, 1);
  }

  const remaining = () => todos.filter(t => !t.completed).length;

  <div class="app">
    <h1>{"Todo List"}</h1>

    <TodoInput onAdd={add} />

    <ul>
      for (const t of todos) {
        <TodoItem
          todo={t}
          onToggle={() => toggle(t)}
          onDelete={() => remove(t.id)}
        />
      }
    </ul>

    <p>{todos.length}{" total / "}{remaining()}{" remaining"}</p>
  </div>
}

Framework Comparison



Feature
Ripple
React
Vue 3
Svelte




State model
track() + @
Hooks
ref() / reactive
Stores


DOM updates
Fine-grained
VDOM diff
VDOM diff
Compile


Boilerplate
Very low
High
Medium
Low


CSS
Scoped
Modules
SFC Scoped
Scoped


AI-friendly
High
Medium
Medium
High


Runtime size
Small
Large
Medium
Tiny



Who Should Use Ripple?
Ripple is ideal for:

AI-assisted codebases
dashboards & realtime UIs
enterprise maintainability
mobile/web hybrid UIs
developers who dislike overengineering


Official Links

Website
GitHub


Final Thoughts
If React gave us JSX, Vue gave us SFCs, and Svelte gave us compilation, Ripple asks:

“What if UI could be reactive without ceremony?”

And it answers convincingly.
Related articles

Mastering Bun for Maximum Developer Productivity
Mastering Modern Monorepo Development with pnpm, Workspaces
Get All Files and Folders in Node.js Directories



Clean React Architecture for Sustainable Front-End Development
Fri, 09 Jan 2026 00:00:00 GMT
React projects tend to live much longer than developers expect. Features evolve, products pivot, team members change, and soon a “quick MVP” becomes a multi-year codebase. In that reality, the winning mindset isn’t “ship the UI fast”, but organize UI so future developers can ship fast too.
Clean code in React is not about pedantic rules or academic purity. It's about:

predictable component structure
transparent data flow
minimal hidden assumptions
separation of concerns
reusable behavior and presentation layers

In this extended guide, we’ll explore real-world patterns that keep React components clean, readable, and maintainable at scale — with improved examples, new entities, and modern TypeScript-friendly patterns.
1. Extracting List Rendering Into Dedicated Components
A common early smell: components that mix business logic, screen-level state, and large .map() rendering blocks.
Overloaded Component
export function ProjectTabsPanel(props) {
  const {
    projectsArray,
    selectedProjectId,
    onProjectSelect,
    filtersArray,
    selectedFilterId,
    onFilterSelect,
  } = props;

  const hasProjects = projectsArray.length > 0;
  const hasFilters = filtersArray.length > 0;

  if (!hasProjects && !hasFilters) {
    return null;
  }

  return (
    <div className="panel">
      {hasProjects && (
        <div className="project-section">
          {projectsArray.map((item) => {
            const isChosen = item.id === selectedProjectId;
            return (
              <button
                key={item.id}
                className={isChosen ? "btn active" : "btn"}
                onClick={() => onProjectSelect(item.id)}
              >
                {item.label}
              </button>
            );
          })}
        </div>
      )}

      {hasFilters && (
        <div className="filter-section">
          {/* Filter rendering */}
        </div>
      )}
    </div>
  );
}

Refactored List Component
type ProjectListProps = {
  items: Array<{ id: string; label: string }>;
  activeId: string | null;
  onSelect: (id: string) => void;
};

function ProjectTabsList({ items, activeId, onSelect }: ProjectListProps) {
  return (
    <>
      {items.map((entry) => {
        const isActive = entry.id === activeId;
        return (
          <button
            key={entry.id}
            className={isActive ? "btn active" : "btn"}
            onClick={() => onSelect(entry.id)}
          >
            {entry.label}
          </button>
        );
      })}
    </>
  );
}

2. Moving Helper Functions Outside of Components
export function TimestampText({ value }) {
  const normalize = (ts: string) =>
    new Date(ts).toLocaleString("en-US", { dateStyle: "medium" });

  return <span>{normalize(value)}</span>;
}

Better Version
export const US_DATE_FORMAT = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  timeStyle: "short",
});

export function formatTimestamp(input: string): string {
  return US_DATE_FORMAT.format(new Date(input));
}

export function TimestampText({ value }: { value: string }) {
  return <span>{formatTimestamp(value)}</span>;
}

3. Destructuring Props Explicitly
function ProfileCard({ fullName, years }: { fullName: string; years: number }) {
  return (
    <>
      <p>{fullName}</p>
      <p>{years}</p>
    </>
  );
}

4. Extracting Complex Conditions Into Named Constants
useEffect(() => {
  const shouldIgnoreScroll =
    firstLoad && messages.length === 0 && newArrived;

  if (shouldIgnoreScroll) return;

  scrollDown();
}, [firstLoad, messages.length, newArrived]);

5. Collapsing Deep Property Access
function StatsValue({ record }: { record: any }) {
  const stats = record?.details?.stats;
  const value = stats?.value ?? "N/A";

  return <div>{value}</div>;
}

6. Avoiding Magic Numbers
const BONUS_SCORE_THRESHOLD = 200;
const BONUS_MULTIPLIER = 1.1;

Conclusion
Writing clean React code is about creating systems that survive time and team growth. By separating responsibilities, extracting logic, naming conditions, and removing magic values, you make code easier to maintain, onboard, and refactor. Clean code reduces cognitive load and speeds up development — today and years from now.
Related articles

10 Must-Know Custom React Hooks for Your Projects
25 React Tips to Boost Performance and Quality
Build React UIs Faster with Chakra UI



Friday Links #33:  Modern JavaScript Picks & Highlights
Fri, 09 Jan 2026 00:00:00 GMT
JavaScript moves fast — and staying up to date can feel overwhelming. Each week we curate the most relevant updates, new libraries, and ecosystem changes so you don’t have to dig through 50 tabs and timelines. From framework releases to niche tooling improvements, this collection is designed to give developers a quick pulse check on what matters right now.
Welcome to edition #33 of Friday Links — your weekly window into the ever-evolving JavaScript ecosystem.

OpenAI Launches ChatGPT Health

OpenAI has introduced ChatGPT Health, a dedicated section inside ChatGPT focused entirely on personal health. It’s more than a themed chat — users can discuss symptoms, interpret lab results, track metrics over time, and get clear explanations of medical terms.
A key feature is integration with health and fitness services. Users can connect Apple Health, MyFitnessPal, and similar apps so the AI can analyze sleep, activity, nutrition, and wellness trends. In the U.S., it can also sync with electronic health records for reviewing test results and medical history.
Privacy is a major emphasis: ChatGPT Health uses separate infrastructure with layered encryption, and its data is not used to train base models or mixed with regular chats by default.
📜 Articles & Tutorials
Mathematics for Computer Science
Introducing CSS Grid Lanes
Replacing JS with just HTML
React2Shell exploit: What happened and lessons learned
Azure Boards integration with GitHub Copilot
Automatically load .env files in Node.js scripts
Streaming JSON in just 200 lines of JavaScript
Introducing WebF Beta: Bring JavaScript and the Web dev to Flutter
Ink 6.6 — a library for building CLI apps with React, used by Claude Code, Gemini CLI, and others.
Olmo 3: Fully Open-Source LLM from AI2 (Models, Data, & Code)
Use native dialog with Turbo (and no extra JavaScript)
How microservice architectures have shaped the usage of database technologies
TypeScript Types as a Programming Language
⚒️ Tools
A new free open-source service called Maltrail has been released for analyzing inbound and outbound network traffic and detecting malware. The project can:

detect malicious domains, URLs, and IP addresses
identify harmful HTTP User-Agent strings
spot modern attack tools on workstations
provide strong network security without complex setup — installable in one click
help reveal viruses, miners, and other unwanted network-active software

npmgraph is a web-based tool that visualizes npm package dependencies. You can enter one or more package names (or upload a package.json) to see how their dependency graphs intersect. It also supports coloring packages by different metrics (like number of maintainers) and exporting the result as an SVG.
Bruno - Bruno is a fully local and Git-native solution to accelerate and secure API work and collaboration
Free Certifications - A curated list of free courses with certifications.
worktrunk - A CLI tool to manage multiple worktrees in Git repositories.
The Concise TypeScript Book - A concise and practical guide to TypeScript, covering essential concepts and features.
Vibium - Browser automation for AI agents and humans.
📚 Libs
ConvertX - Self-hosted online file converter. Supports 1000+ formats.
Fabric.js 7 - is a JavaScript library for working with the HTML5 canvas. It runs in both browsers and Node (via node-canvas) and provides an object model for canvas elements along with SVG-to-canvas and canvas-to-SVG conversion. The project also offers many demos with full source code.
jsPDF -  Client-side JavaScript PDF generation for everyone.
JoltPhysics.js - A JavaScript/WebAssembly port of the Jolt Physics engine for real-time physics simulation in web applications.
ChordSheetJS -  A JavaScript library for parsing and formatting chords and chord sheets
PlayCanvas Model Viewer - A JavaScript library for displaying 3D models in the browser using WebGL and WebXR.
recharts - A composable charting library built on React components and D3.js.
nats.js -  JavaScript client for Node.js, Bun, Deno and browser for NATS, the cloud native messaging system
bundlemon - A tool to monitor and enforce bundle size budgets for JavaScript projects.
tinypdf - A lightweight PDF manipulation library for Node.js and the browser.
Markdown UI - An open standard for rendering interactive widgets in plain Markdown.
⌚ Releases
pnpm 10.27 Released
Prisma 7.2
Deno 2.6.4
file-type 21.2 - Detect the file type of a file, stream, or data
Fast HTML Parser 7.0.2 Released
Middy 7.0 brings middleware to AWS Lambda for Node.js, now with Durable Functions support.
Node File Trace 1.2 - determines the minimal set of files required for an app to execute.
Orange ORM 4.8 — an Object-Relational Mapper for Node, Bun, and Deno.
Repomix 1.11 — package an entire repository into a single, LLM-friendly file.
hot-shots 12.0 / 12.1 — a Node.js client for statsd, DogStatsD, and Telegraf.
React Form Events & TypeScript does an excellent job of breaking down onChange, onSubmit, onBlur, onFocus, and their TypeScript typings in a clear, practical way.
However, even with a solid understanding of form events, another problem quickly appears. Knowing how forms work doesn’t automatically tell you how to structure them once your application grows. A simple form with a few inputs is easy to manage, but as soon as you have 10–20 fields, shared validation rules, server errors, and multiple screens using the same inputs, ad‑hoc solutions stop scaling.
This article focuses on that next layer of complexity. Instead of discussing events and handlers, we’ll look at how to design a predictable, reusable form system built on four ideas:

UI primitives — small, “dumb” components responsible only for appearance.
A Cell wrapper — a single place for labels, hints, and error messages.
Field components — thin adapters between React Hook Form and your UI.
Schemas — one source of truth for validation and TypeScript types.

Together, these layers help turn forms from a recurring source of chaos into a solved, scalable part of your UI architecture.
The Scaling Problem: “Toy Form” vs “Product Form”
A typical first form is built with local state and a submit handler. It works — until it doesn’t.
import * as React from "react";

export function SignInToy() {
  const [email, setEmail] = React.useState("");
  const [secret, setSecret] = React.useState("");
  const [issues, setIssues] = React.useState<{ email?: string; secret?: string }>(
    {}
  );

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const next: typeof issues = {};
    if (!email.includes("@")) next.email = "Please enter a valid email.";
    if (secret.trim().length < 6) next.secret = "Minimum 6 characters.";
    setIssues(next);

    if (Object.keys(next).length === 0) {
      // send request...
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label>Email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
        {issues.email && <div>{issues.email}</div>}
      </div>

      <div>
        <label>Password</label>
        <input
          type="password"
          value={secret}
          onChange={(e) => setSecret(e.target.value)}
        />
        {issues.secret && <div>{issues.secret}</div>}
      </div>

      <button type="submit">Sign in</button>
    </form>
  );
}

Now imagine this pattern multiplied across a large application. More fields mean more state, more branching validation logic, and more duplicated markup. At that point, reviewing, testing, and maintaining forms becomes disproportionately expensive.
Form Libraries Help Logic, Not UI
Libraries like React Hook Form reduce boilerplate and improve performance, but they mainly solve state management and validation wiring. They don’t define how your fields should look, how errors are rendered, or how consistency is enforced across the UI.
That missing layer is where most form complexity actually lives.
The Structured Approach
The solution is to separate concerns clearly:

Primitives define how inputs look and behave at the lowest level.
Cell defines how a “field” is presented: label, hint, error.
Field components connect form state to UI.
Schemas define validation and typing in one place.

This separation keeps each piece small and understandable — and makes the whole system easier to scale.
Step 1: UI Primitives
Primitives are intentionally boring. They know nothing about forms or validation.
import * as React from "react";

export const TextInput = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>(function TextInput(props, ref) {
  return <input ref={ref} {...props} className="input" />;
});

Because primitives are generic, you can reuse them outside forms — in filters, search bars, or settings panels.
Step 2: The Cell Wrapper
The Cell component standardizes layout and error display.
import * as React from "react";

type CellProps = {
  label?: string;
  hint?: React.ReactNode;
  error?: string;
  children: React.ReactNode;
};

export function Cell({ label, hint, error, children }: CellProps) {
  return (
    <div className="cell">
      {label && <label className="cell__label">{label}</label>}
      <div className="cell__control">{children}</div>
      {hint && <div className="cell__hint">{hint}</div>}
      {error && <div className="cell__error">{error}</div>}
    </div>
  );
}

All visual consistency flows through this component.
Step 3: Field Components
Field components glue React Hook Form to your UI.
import { useFormContext } from "react-hook-form";

export function TextField({ name, label, ...props }) {
  const {
    register,
    formState: { errors },
  } = useFormContext();

  return (
    <Cell label={label} error={errors[name]?.message}>
      <TextInput {...register(name)} {...props} />
    </Cell>
  );
}

Each field type lives in its own small file, making behavior explicit and predictable.
Step 4: Schemas and Validation
Schemas (for example, with Zod) give you a single source of truth.
import { z } from "zod";

export const ProfileSchema = z.object({
  email: z.string().email("Invalid email"),
  password: z.string().min(6, "Minimum 6 characters"),
});

export type ProfileValues = z.infer<typeof ProfileSchema>;

Validation rules and TypeScript types stay in sync.
Step 5: Assembling a Form
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

export function ProfileForm() {
  const methods = useForm({
    resolver: zodResolver(ProfileSchema),
  });

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(console.log)}>
        <TextField name="email" label="Email" />
        <TextField name="password" label="Password" type="password" />
        <button type="submit">Save</button>
      </form>
    </FormProvider>
  );
}

The form reads like intent, not implementation details.
Conclusion
Understanding React form events is the foundation — but structure is what makes forms scale. By layering primitives, a shared Cell wrapper, and small field components on top of a form library, you get consistency, reuse, and clarity without sacrificing flexibility.
Once this system is in place, forms stop being a special problem and become just another predictable part of your UI.
Related articles

 are a set with a single element

never is the empty set

Because never has no possible values, no actual value can ever belong to it. That’s why the following function is valid:
export function triggerFailure(reason: string): never {
  throw new Error(reason);
}

TypeScript ensures that functions returning never cannot complete normally.
const outcome = triggerFailure("Unexpected state!");
//    ^? never

outcome has type never, because TypeScript knows the function cannot return.

Exhaustive error handling
type ApiResult =
  | { status: "success"; data: string }
  | { status: "error"; error: Error };

function assertNever(value: never): never {
  throw new Error(`Unhandled case: ${JSON.stringify(value)}`);
}

function handleResult(result: ApiResult) {
  switch (result.status) {
    case "success":
      return result.data;

    case "error":
      throw result.error;

    default:
      return assertNever(result);
  }
}

Here, never ensures that every possible state of ApiResult is handled.
If a new status is added later, TypeScript will immediately report an error.
This is where never becomes valuable — not as a theoretical type,
but as a guardrail for evolving codebases.
The Common Mistake: Using never for Error Modeling
Developers sometimes attempt this pattern:
export function safeDivide(x: number, y: number): number | never {
  if (y === 0) {
    throw new Error("Division by zero!");
  }
  return x / y;
}

They expect the return type to reflect both “good” and “error” states.
But TypeScript evaluates:
number | never → number

The empty set adds nothing to the union — never collapses and becomes meaningless.
This is why:
const result = safeDivide(10, 0);
// result: number

This code successfully compiles but is misleading.

The never type should never be used to describe an error state.

Why never Collapses in Unions
Unions represent the set‑theoretic union of their members.
(number-set) ∪ (empty-set) = number-set

This is not a TypeScript quirk — it is mathematically correct.
Thus:

string | never → string
boolean | never → boolean
T | never → T

never disappears because it cannot contribute any valid value.

The Correct Use of never: Exhaustiveness Checking
never becomes powerful when used to model impossible states.
Step 1 — Create a discriminated union
type CircleShape = { kind: "circle"; radius: number };
type SquareShape = { kind: "square"; side: number };
type RectShape = { kind: "rectangle"; width: number; height: number };

type ShapeEntity = CircleShape | SquareShape | RectShape;

Step 2 — Write an exhaustiveness checker
function assertImpossible(value: never): never {
  throw new Error("Encountered an impossible case: " + JSON.stringify(value));
}

Step 3 — Use it inside a switch
export function computeArea(geom: ShapeEntity): number {
  switch (geom.kind) {
    case "circle":
      return Math.PI * geom.radius ** 2;

    case "square":
      return geom.side ** 2;

    case "rectangle":
      return geom.height * geom.width;

    default:
      return assertImpossible(geom);
  }
}

If someone later updates:
type TriangleShape = { kind: "triangle"; a: number; b: number; c: number };
type ShapeEntity = CircleShape | SquareShape | RectShape | TriangleShape;

The compiler immediately screams:
Argument of type 'TriangleShape' is not assignable to parameter of type 'never'.

This is exactly how never should be used:

catching missing branches

preventing silent logic failures

enforcing total coverage of all cases

A Better Model for Error Handling: The Result Pattern
Instead of misusing never, model error states explicitly using a discriminated union:
type FailureInfo = { status: "fail"; message: string };
type SuccessInfo<T> = { status: "ok"; data: T };

type ResultBox<T> = FailureInfo | SuccessInfo<T>;

Helper creators:
const createFailure = (msg: string): FailureInfo => ({
  status: "fail",
  message: msg,
});

const createSuccess = <T>(value: T): SuccessInfo<T> => ({
  status: "ok",
  data: value,
});

A safe division using proper error modeling:
export function robustDivide(n1: number, n2: number): ResultBox<number> {
  if (n2 === 0) return createFailure("Division by zero");
  return createSuccess(n1 / n2);
}

Usage:
const output = robustDivide(8, 0);

if (output.status === "fail") {
  console.error("Error:", output.message);
} else {
  console.log("Result:", output.data);
}

This is explicit, predictable, and fully typed.

Wrapping Unsafe Functions: A try-Safe Wrapper
Sometimes an existing function throws. Wrap it safely:
export function handleSafely<Args extends unknown[], Ret>(
  fn: (...p: Args) => Ret,
  ...inputs: Args
): ResultBox<Ret> {
  try {
    return createSuccess(fn(...inputs));
  } catch (err: any) {
    return createFailure(err?.message ?? "Unknown failure");
  }
}

Example:
function riskyDivide(a: number, b: number) {
  if (b === 0) throw new Error("Boom!");
  return a / b;
}

const checked = handleSafely(riskyDivide, 10, 0);


Converting ResultBox to a Throwing Function
If needed, convert the safe result back into a throwing workflow:
export function unwrapOrCrash<T>(supplier: () => ResultBox<T>): T {
  const outcome = supplier();
  if (outcome.status === "ok") return outcome.data;
  throw new Error(outcome.message);
}

Usage:
const finalAnswer = unwrapOrCrash(() => robustDivide(10, 2));

Why never Often Fails in Real Projects
Using never does not automatically make code safer.
Common mistakes include:

assuming never replaces runtime validation
overusing it in public APIs
hiding real errors behind “impossible” states

In production, never works best when combined with:

discriminated …


Chakra UI: A Complete Guide to Faster, Cleaner, and Accessible UI
Mon, 24 Nov 2025 00:00:00 GMT
In day‑to‑day frontend work, we keep solving the same problems:

building consistent buttons, forms, layouts, and modals
making everything responsive on phones, tablets, and desktops
keeping colors, typography, and spacing uniform across the app
implementing accessibility and keyboard navigation correctly
fighting with ever‑growing CSS files and design drift

Writing CSS from scratch for every new page quickly turns into a chore. That’s exactly the type of repetitive work Chakra UI removes from your life.
In this guide, we’ll look at how Chakra UI v3 paired with React helps you:

stop hand‑writing CSS for every component
keep a single source of truth for design tokens
ship accessible UI without memorizing every WAI‑ARIA rule
build responsive layouts without writing @media queries
keep performance under control with tree‑shaking and minimal styling runtime

Along the way we’ll use improved code samples, renamed variables, and modern patterns.

Official docs: chakra docs


Why Styling Libraries Exist at All
Let’s be honest: vanilla CSS is powerful, but it doesn’t scale nicely in large React apps.
Typical problems when you style everything manually:
1. Slowness
You might spend hours on details like hover states, focus rings, input errors, spacing between elements, and layout quirks.
2. Visual Inconsistency
You start with a clean design, but six months later:

different border radii, slightly different blues, spacing that "almost" matches, and three button variations that should have been one.
3. Accessibility Debt
Screen readers, roles, ARIA attributes, focus management, ESC handling, keyboard navigation – all this is crucial, but hard to do correctly and consistently with plain HTML + CSS.
4. Bloated CSS
Legacy styles accumulate: old classes, unused helpers, and confusing overrides. Bundle size grows, and nobody wants to delete anything because "it might be used somewhere".
Component styling libraries like Chakra UI solve these with:

ready‑made building blocks (Button, Stack, Modal, Menu, etc.)
theme tokens instead of magic values
accessibility first approach
built‑in responsiveness

Chakra takes this approach and makes it very ergonomic for React.

1. Styling with Props Instead of Raw CSS
In Chakra, style props are the core idea:

you describe what the component should look like directly in JSX instead of switching between JS and CSS files.
A basic button, Chakra style
import { Button } from "@chakra-ui/react"

export function SendMessageButton() {
  return (
    <Button
      colorScheme="teal"
      size="lg"
      borderRadius="xl"
      boxShadow="md"
      _hover={{
        boxShadow: "xl",
        transform: "translateY(-1px)",
      }}
    >
      Send message
    </Button>
  )
}


This one component includes:

colors
size
border radius
shadow
hover state

No separate CSS file, no BEM class names, no :hover selectors.
Equivalent CSS for comparison
.primary-button {
  background-color: #319795;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
  transition: all 0.15s ease-out;
}

.primary-button:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, .15);
  transform: translateY(-1px);
}

export function SendMessageButtonRaw() {
  return <button className="primary-button">Send message</button>
}

Both work, but the Chakra version:

keeps markup and styles in one place
is more discoverable (props are auto‑completed in your IDE)
plays nicely with dynamic values coming from state or props

Style props reference

2. A Single Theme Controls the Whole App
Instead of scattering values like #319795 and 1.5rem across components, Chakra encourages you to put them into a theme.
You can extend the default theme or create your own system.
Minimal theme setup with design tokens
import {
  ChakraProvider,
  createSystem,
  defaultConfig,
  defineConfig,
} from "@chakra-ui/react"

const designConfig = defineConfig({
  theme: {
    tokens: {
      colors: {
        accent: { value: "#6ED209" },
        surface: { value: "#F8FFF2" },
      },
      radii: {
        pill: { value: "999px" },
      },
    },
  },
})

const designSystem = createSystem(defaultConfig, designConfig)

export function RootApp({ children }: { children: React.ReactNode }) {
  return <ChakraProvider value={designSystem}>{children}</ChakraProvider>
}

Now you can use accent and surface anywhere:
import { Box, Button } from "@chakra-ui/react"

export function AccentCard() {
  return (
    <Box bg="surface" p={6} borderRadius="lg">
      <Button bg="accent" borderRadius="pill">
        Accent action
      </Button>
    </Box>
  )
}

Change accent in one place → entire app updates.
Theming guide
Extracting theme configuration into its own file
A common pattern is to keep all theme logic in something like theme/system.ts:
// theme/system.ts
import { defineConfig, createSystem, defaultConfig } from "@chakra-ui/react"

const designConfig = defineConfig({
  globalCss: {
    "html, body": {
      margin: 0,
      padding: 0,
      fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
      scrollBehavior: "smooth",
    },
  },
  theme: {
    tokens: {
      colors: {
        "ink-strong": { value: "#1A202C" },
        "ink-soft": { value: "#718096" },
        "paper": { value: "#F7FAFC" },
      },
    },
    semanticTokens: {
      colors: {
        appBackground: {
          value: {
            base: "{colors.paper}",
            _dark: "#1A202C",
          },
        },
        appText: {
          value: {
            base: "{colors.ink-strong}",
            _dark: "{colors.paper}",
          },
        },
      },
    },
  },
})

export const designSystem = createSystem(defaultConfig, designConfig)

Then in your entry point:
// app/providers.tsx
import { ChakraProvider } from "@chakra-ui/react"
import { designSystem } from "@/theme/system"

export function Providers({ children }: { children: React.ReactNode }) {
  return <ChakraProvider value={designSystem}>{children}</ChakraProvider>
}

This gives you one place to tune your entire design language.

3. Accessibility Built In by Default
Manually making UI accessible means dealing with:

role, aria-* attributes
focus traps for modals
escape handling
tab order for menus
keyboard navigation for lists and dialogs
aria-live for announcements

Chakra UI bakes this into its components.
WAI‑ARIA specs
Accessible alert message
import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@c…


Mastering React Form Events with TypeScript
Mon, 24 Nov 2025 00:00:00 GMT
Working with forms is one of the most common tasks in React — and one of the most misunderstood. Beginners often struggle with event types, how to strongly‑type form handlers, how to extract values, and how to work with keyboard, mouse, focus, and form‑submission events correctly.
This improved guide explains every major React form event, adds better TypeScript examples, and focuses heavily on real‑world patterns like validation, debouncing, controlled inputs, preventing default behavior, and working with form data.

Why React Form Events Matter
Any time a user:

types into an input
clicks a button
submits a form
focuses or blurs a field
presses a key
interacts with checkboxes, selects, radios, sliders

…React fires an event object you can react to.
TypeScript helps us ensure correctness, catch mistakes, and avoid bugs like undefined values or invalid event targets.

1. onChange: The Most Important Form Event
TypeScript Type:
React.ChangeEvent<HTMLInputElement>

onChange fires whenever the value of an input changes.
Improved Real‑World Example: Typing with Validation
import { useState } from "react";

export function UsernameField() {
  const [username, setUsername] = useState("");
  const [error, setError] = useState("");

  const handleUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setUsername(value);

    if (value.length < 3) {
      setError("Username must be at least 3 characters.");
    } else {
      setError("");
    }
  };

  return (
    <div>
      <label>
        Username:
        <input type="text" value={username} onChange={handleUsername} />
      </label>

      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}


2. onSubmit: Handling Entire Form Submission
TypeScript Type:
React.FormEvent<HTMLFormElement>

Improved Example with FormData Extraction
import { useState } from "react";

export function LoginForm() {
  const [message, setMessage] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const form = e.currentTarget;
    const data = new FormData(form);

    const email = data.get("email") as string;
    const password = data.get("password") as string;

    setMessage(`Submitted: ${email} / ${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit">Log In</button>
      <p>{message}</p>
    </form>
  );
}


3. onFocus: Detecting When a User Enters a Field
React.FocusEvent<HTMLInputElement>

Example: Highlight active field
import { useState } from "react";

export function FocusExample() {
  const [focused, setFocused] = useState(false);

  return (
    <div>
      <input
        onFocus={() => setFocused(true)}
        style={{ borderColor: focused ? "dodgerblue" : "#ccc" }}
      />
      {focused && <p>You're typing now!</p>}
    </div>
  );
}


4. onBlur: When the User Leaves a Field
React.FocusEvent<HTMLInputElement>

Example: Email validation
import { useState } from "react";

export function EmailField() {
  const [error, setError] = useState("");

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    const email = e.target.value;
    setError(email.includes("@") ? "" : "Invalid email.");
  };

  return (
    <div>
      <input type="email" onBlur={handleBlur} placeholder="Enter email" />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}


5. onClick: Buttons & Interactions
TypeScript Type:
React.MouseEvent<HTMLButtonElement>

Example: Button loading state
import { useState } from "react";

export function LoadingButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await new Promise(res => setTimeout(res, 1000));
    setLoading(false);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? "Loading..." : "Click me"}
    </button>
  );
}


6. Keyboard Events
React.KeyboardEvent<HTMLInputElement>

Example: Submit on Enter
import { useState } from "react";

export function SearchBox() {
  const [query, setQuery] = useState("");

  const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      alert(`Searching for: ${query}`);
    }
  };

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onKeyDown={handleKey}
      placeholder="Press Enter to search"
    />
  );
}


7. Bonus: Debounced Input
import { useState, useEffect } from "react";

export function DebouncedInput() {
  const [raw, setRaw] = useState("");
  const [debounced, setDebounced] = useState("");

  useEffect(() => {
    const id = setTimeout(() => setDebounced(raw), 400);
    return () => clearTimeout(id);
  }, [raw]);

  return (
    <div>
      <input
        onChange={(e) => setRaw(e.target.value)}
        placeholder="Type slowly..."
      />
      <p>Debounced: {debounced}</p>
    </div>
  );
}


Final Thoughts
You now know how to handle:

change events
submit events
focus/blur
click events
keyboard events
validation
debouncing
extracting FormData

React + TypeScript becomes much easier once you understand event types.
Related articles

10 Must-Know Custom React Hooks for Your Projects
25 React Tips to Boost Performance and Quality
Build React UIs Faster with Chakra UI



Howto Fix the “Role Postgres Does Not Exist” Error in Docker
Mon, 17 Nov 2025 00:00:00 GMT
When deploying a PostgreSQL instance inside a Docker container, one of the most common startup failures is:
psql: FATAL: role "postgres" does not exist

This error typically indicates that the initialization scripts did not create the default postgres superuser. Below we explore the causes and the correct fixes.

1. Why the Error Occurs
1.1 Your data volume already has an old database
PostgreSQL only creates users when the data directory is empty.

If you reuse a volume, the postgres role may simply not exist.
1.2 You changed the default POSTGRES_USER
POSTGRES_USER=myuser

This makes myuser the superuser — not postgres.
1.3 Incorrect filesystem permissions
If PostgreSQL cannot write to /var/lib/postgresql/data, initialization may silently fail.

2. Solutions
A. Delete the old volume (recommended)
docker compose down -v
docker compose up -d

B. Explicitly set POSTGRES_USER
environment:
  POSTGRES_USER: postgres
  POSTGRES_PASSWORD: secret123

Restart:
docker compose down
docker compose up -d

C. Manually create the missing role
docker exec -it <container> bash
psql -U myuser

Inside PostgreSQL:
CREATE ROLE postgres WITH SUPERUSER LOGIN PASSWORD 'changeme';

D. Fix permissions
sudo chown -R 999:999 /path/to/volume
docker compose restart


3. Best Practices

Always specify POSTGRES_USER and POSTGRES_PASSWORD.
Prefer named volumes over bind mounts.
Add healthchecks:

healthcheck:
  test: ["CMD-SHELL", "pg_isready -U postgres"]
  interval: 5s
  timeout: 3s
  retries: 5


4. Conclusion
This error happens because the container is using an already-initialized volume or the default superuser was changed. Resetting the volume, correcting your environment variables, or creating the role manually will resolve the problem.
If you want extended troubleshooting for specific platforms (Railway, Render, Fly.io, Docker Swarm), I can add that too.
Related articles

Setting Up Jaeger with Docker on Windows
Setting Up Local PostgreSQL with Docker Compose
Practical Month Arithmetic and Calendar Logic in JavaScript



How to Develop Accessible Interfaces with WAI-ARIA
Mon, 17 Nov 2025 00:00:00 GMT
Modern web applications have evolved into rich, desktop‑like interactive environments. Components such as modals, dropdown menus, accordions, tabs, and dynamically updated content are now standard. However, accessibility is often overlooked, leaving millions of users unable to interact with applications effectively. WAI‑ARIA provides a way to enrich custom UI components with semantic meaning and behavior for assistive technologies.
What WAI‑ARIA Is
WAI‑ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) is a specification created by the W3C to describe interactive interfaces to screen readers, keyboard users, and assistive devices. While HTML includes semantic elements like <button> and <nav>, developers frequently build UI using <div> or <span>, resulting in missing information for accessibility tools. ARIA fills in those gaps.
ARIA includes three core building blocks:

Roles — define the purpose of an element
States & Properties (aria-*) — describe its current condition
Live Regions — announce dynamic updates

ARIA Roles
Roles communicate what an element represents.
Examples include:

button
navigation
dialog
tab, tablist, tabpanel
menu, menuitem
checkbox, switch

Use native HTML elements whenever possible; use ARIA only when necessary.
ARIA Properties & States
These attributes explain how a UI element behaves and what its current status is.
Properties

aria-label
aria-labelledby
aria-describedby

States

aria-expanded
aria-selected
aria-checked
aria-disabled

Live Regions
Live regions notify users of dynamic content updates:

aria-live="polite"
aria-live="assertive"
aria-atomic="true"
aria-relevant="additions text"

These are essential for notifications, error messages, chat updates, and async content.
ARIA in SPA/React Environments
Frameworks like React sometimes re-render without changing DOM nodes, which can prevent screen readers from detecting updates. Use:

Live regions
Forced DOM updates
Proper role and aria-* attributes
Real testing with assistive tools

Keyboard Accessibility
Keyboard navigation is a core WCAG requirement.
Essential keys:

Tab / Shift+Tab — move focus
Enter / Space — activate
Arrow keys — navigate inside composite widgets
Escape — close dialogs
Home / End — jump to start/end

Use:

tabindex="0"
tabindex="-1"
aria-activedescendant for virtual focus

Testing Accessibility
Browser Tools

Axe DevTools
Lighthouse
WAVE

Screen Readers

NVDA
JAWS
VoiceOver

Linters

eslint-plugin-jsx-a11y

CI

Axe CI
Pa11y CI
Lighthouse CI

Example: Accessible Accordion Component
Here is a completely different example, not related to the previous code and without any internal comments directed at you. It demonstrates a well‑structured, accessible accordion widget using WAI‑ARIA best practices.
HTML Structure
<div class="accordion">
  <h2 id="faq-title">FAQ</h2>

  <div class="accordion__item">
    <button
      class="accordion__trigger"
      aria-expanded="false"
      aria-controls="sect-1"
      id="accordion-btn-1"
    >
      What is accessibility?
    </button>
    <div
      class="accordion__panel"
      id="sect-1"
      role="region"
      aria-labelledby="accordion-btn-1"
      hidden
    >
      <p>
        Accessibility ensures that interfaces can be used by people with
        disabilities or assistive technologies.
      </p>
    </div>
  </div>

  <div class="accordion__item">
    <button
      class="accordion__trigger"
      aria-expanded="false"
      aria-controls="sect-2"
      id="accordion-btn-2"
    >
      What is WAI‑ARIA?
    </button>
    <div
      class="accordion__panel"
      id="sect-2"
      role="region"
      aria-labelledby="accordion-btn-2"
      hidden
    >
      <p>
        WAI‑ARIA provides roles and attributes that describe UI behavior to
        assistive technologies.
      </p>
    </div>
  </div>
</div>

JavaScript Logic (Brand‑New Example)
class AriaAccordion {
  constructor(containerEl) {
    this.containerEl = containerEl;
    this.triggers = Array.from(
      containerEl.querySelectorAll(".accordion__trigger")
    );

    this.triggers.forEach(btn => {
      btn.addEventListener("click", () => this.toggle(btn));
      btn.addEventListener("keydown", e => this.onKey(e, btn));
    });
  }

  toggle(buttonEl) {
    const isOpen = buttonEl.getAttribute("aria-expanded") === "true";
    const newState = !isOpen;

    buttonEl.setAttribute("aria-expanded", newState);

    const panelId = buttonEl.getAttribute("aria-controls");
    const panel = document.getElementById(panelId);
    panel.hidden = !newState;
  }

  onKey(event, buttonEl) {
    const { code } = event;
    const index = this.triggers.indexOf(buttonEl);

    if (code === "ArrowDown") {
      event.preventDefault();
      const next = this.triggers[index + 1] || this.triggers[0];
      next.focus();
    }

    if (code === "ArrowUp") {
      event.preventDefault();
      const prev =
        this.triggers[index - 1] || this.triggers[this.triggers.length - 1];
      prev.focus();
    }
  }
}

document
  .querySelectorAll(".accordion")
  .forEach(acc => new AriaAccordion(acc));

Conclusion
ARIA is powerful, but with that power comes responsibility. Developers should:

use semantic HTML whenever possible,
apply ARIA roles and states only when appropriate,
provide keyboard interaction patterns,
test with real assistive technologies,
and follow W3C ARIA Authoring Practices.

By embracing these principles, you ensure your interface works smoothly for every user—regardless of device, ability, or assistive technology.
Related articles

Mastering Custom Elements in HTML5
The Overlooked Power of the HTML <output> Element
Checking Web Pages for WCAG Compliance



Identify If a Value Belongs to a Class in JavaScript
Mon, 17 Nov 2025 00:00:00 GMT
Introduction
Instance checking in JavaScript appears simple at first—just use instanceof.

But real-world scenarios (and tasks like LeetCode 2618) require correctly handling:

primitive values (42, 'hi', true, 5n)
wrapper constructors (Number, String, etc.)
invalid constructor inputs
functions as instances of Function
prototype chain traversal
custom instance logic via Symbol.hasInstance

This snippet provides three reliable solutions, rewritten and improved for clarity, correctness, and edge-case safety.

Solution 1 — Recommended
Using instanceof + Primitive Mapping
Works for objects and functions, with explicit special rules for built-in primitive wrappers.
function isInstance(candidate, ctor) {
  if (ctor == null || typeof ctor !== "function") return false;
  if (candidate == null) return false;

  if (candidate instanceof ctor) return true;

  const type = typeof candidate;
  if (ctor === Number) return type === "number";
  if (ctor === String) return type === "string";
  if (ctor === Boolean) return type === "boolean";
  if (ctor === BigInt) return type === "bigint";
  if (ctor === Symbol) return type === "symbol";

  return false;
}


Solution 2
Manual Prototype Chain Traversal
function isInstanceByPrototype(value, ctor) {
  if (ctor == null || typeof ctor !== "function") return false;
  if (value == null) return false;

  const type = typeof value;

  if (ctor === Number) return type === "number";
  if (ctor === String) return type === "string";
  if (ctor === Boolean) return type === "boolean";
  if (ctor === BigInt) return type === "bigint";
  if (ctor === Symbol) return type === "symbol";

  if (type !== "object" && type !== "function") return false;

  let proto = Object.getPrototypeOf(value);
  const target = ctor.prototype;

  while (proto) {
    if (proto === target) return true;
    proto = Object.getPrototypeOf(proto);
  }

  return false;
}


Solution 3
Using Symbol.hasInstance
function isInstanceBySymbol(value, ctor) {
  if (ctor == null || typeof ctor !== "function") return false;
  if (value == null) return false;

  const hook = ctor[Symbol.hasInstance];
  if (typeof hook === "function" && hook.call(ctor, value)) {
    return true;
  }

  const type = typeof value;
  if (ctor === Number) return type === "number";
  if (ctor === String) return type === "string";
  if (ctor === Boolean) return type === "boolean";
  if (ctor === BigInt) return type === "bigint";
  if (ctor === Symbol) return type === "symbol";

  return false;
}


Examples
class Creature {}
class Feline extends Creature {}
function Demo() {}

console.log(isInstance(new Date(), Date));        
console.log(isInstance(new Feline(), Creature));  
console.log(isInstance(123, Number));             
console.log(isInstance("ok", String));            
console.log(isInstance(true, Boolean));           
console.log(isInstance(7n, BigInt));              
console.log(isInstance(Symbol("x"), Symbol));     

console.log(isInstance(123, Object));             
console.log(isInstance(null, Object));            
console.log(isInstance(undefined, Number));       
console.log(isInstance(Creature, Creature));      
console.log(isInstance(Demo, Function));          


Related content

WebSocket Client JavaScript Implementation
Deeply Freeze a Nested Object
Convert coordinates from EPSG-4326 to EPSG-3857



Howto Use the Browser’s Four Built-In Multithreading APIs
Sun, 16 Nov 2025 00:00:00 GMT
Modern browsers provide four multithreading mechanisms — Web Worker, Shared Worker, Service Worker, and Worklet — each running on different browser threads. Although JavaScript itself is single‑threaded, these APIs enable parallel computation, background tasks, offline caching, and real-time rendering.
1. Why Workers Enable Multithreading
JavaScript runs on a single thread, but browsers use a multi-process architecture. Worker threads are isolated from the main thread, communicate via message passing, avoid UI blocking, and have thread limits.
2. Overview of the Four Worker Types



Worker Type
Purpose
Thread
Use Case




Web Worker
CPU-heavy tasks
Worker thread pool
Sorting, cryptography


Shared Worker
Shared state across tabs
Shared worker thread
Multi-tab sync


Service Worker
Offline caching and request control
Background thread
PWAs, offline apps


Worklet
Real-time rendering
Rendering pipeline
CSS animation, audio processing



3. Web Worker — Heavy Computation
// main.js
const worker = new Worker('sort-worker.js');
worker.postMessage([5, 1, 3]);

worker.onmessage = (e) => {
  console.log('Sorted:', e.data);
  worker.terminate();
};

// sort-worker.js
self.onmessage = (e) => {
  const sorted = e.data.sort((a, b) => a - b);
  self.postMessage(sorted);
  self.close();
};

4. Shared Worker — Cross-Tab State Sync
// sync-worker.js
const ports = [];
let state = { isLogin: false };

self.onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);

  port.onmessage = (msg) => {
    if (msg.data.type === 'LOGIN') {
      state = msg.data.data;
      ports.forEach(p => p.postMessage(state));
    }
  };
};

5. Service Worker — Offline Proxy
// sw.js
const CACHE = 'v1';

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(['/','/index.html']))
  );
});

6. Worklet — Rendering Pipeline Logic
// bounce-worklet.js
class BounceWorklet {
  process(inputs, outputs) {
    const t = inputs[0][0];
    const y = Math.sin(t * Math.PI);
    outputs[0].value = `translateY(${300 * (1 - y)}px)`;
  }
}
registerAnimator('bounce', BounceWorklet);

7. Combined Multi‑Worker Architecture
A real-world dashboard may combine all four Worker types to achieve smooth rendering, offline use, cross‑tab sync, and fast data parsing.
8. Using self in Workers
Workers use self instead of window and cannot access the DOM. They can only perform non-UI tasks.
9. Production Considerations
Workers require explicit error handling, careful cleanup, same-origin script loading, and performance balancing to avoid overhead.
Conclusion
Each Worker type solves a different class of performance problems. Understanding how they differ enables developers to build fast, reliable, non-blocking web applications.
Related articles

Practical Month Arithmetic and Calendar Logic in JavaScript
Mastering Array Flattening in JavaScript
Mastering Advanced Binary Operations in JavaScript



Making PowerShell More Comfortable: Configuring PSReadLine
Fri, 14 Nov 2025 00:00:00 GMT
Many Windows users rely on PowerShell every day, but out of the box the experience can feel primitive: endless tapping of the Up arrow to find a command, missed typos in long paths, unreliable history search, and awkward navigation. Modern terminals on Linux or macOS offer far more convenience.
Fortunately, PowerShell can be upgraded with PSReadLine, a module that enhances input handling, adds predictive suggestions, improves navigation, and turns the console into a more capable tool. Here's how to install and update PSReadLine correctly, why the built-in version may be outdated, and how to apply a full working configuration that improves everyday workflows.
The goal is simple: by the end, you will have a ready-to-use Microsoft.PowerShell_profile.ps1 and a faster, more pleasant terminal experience.
1. Understanding PSReadLine (and Why the Built-In Version May Not Work)

PowerShell ships with PSReadLine built in — but the version included can be old or inconsistent across systems. This leads to multiple problems noted by users:

Some systems still run PSReadLine v2.0, which does not support -PredictionSource, -PredictionViewStyle, or other modern options.
Updating the module may fail (Module 'PSReadLine' was not installed).
PowerShell 5.1 on Windows 11 may not load the updated version at all.
In some cases, the built-in version must be removed before updates will apply.

Because of this, installing the latest version manually is often easier.
2. Installing or Updating PSReadLine Correctly
The most reliable installation command is:
Install-Module -Name PSReadLine -Force -SkipPublisherCheck -AllowPrerelease

Explanation:

-Force — overrides old module copies
-SkipPublisherCheck — fixes signature mismatches
-AllowPrerelease — enables newest features
-AllowClobber — sometimes required if the built-in version blocks updates

If PowerShell claims the module is already installed or refuses to update, remove it:
Remove-Module PSReadLine -Force

Then install again.
Check which versions are available:
Get-Module PSReadLine -ListAvailable

If prediction options are unavailable, you are still on v2.0.
3. Creating or Editing the PowerShell Profile
The PowerShell profile loads custom PSReadLine settings every time a new session opens.
Find the profile path:
echo $PROFILE

Create it if missing:
if (!(Test-Path $PROFILE)) {
    New-Item -ItemType File -Path $PROFILE -Force
}
notepad $PROFILE

Everything below goes in that file.

4. A Practical PSReadLine Configuration
This setup provides:

Command predictions based on history
Bash-style reverse search (Ctrl+R)
A structured completion menu
Intuitive keybindings
Improved color scheme
A quick command validator (F2)
A more modern, editor-like feel

# PSReadLine Configuration
Import-Module PSReadLine

# Prediction and Useful UI Elements
Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -ShowToolTips

# Color Scheme
Set-PSReadLineOption -Colors @{
    Command         = 'Yellow'
    Parameter       = 'Green'
    String          = 'DarkCyan'
    InlinePrediction = 'DarkGray'
}

# Enhanced Key Bindings
Set-PSReadLineKeyHandler -Key Ctrl+r        -Function ReverseSearchHistory
Set-PSReadLineKeyHandler -Key Ctrl+Spacebar -Function MenuComplete
Set-PSReadLineKeyHandler -Key Tab           -Function Complete
Set-PSReadLineKeyHandler -Key Ctrl+c        -Function Copy
Set-PSReadLineKeyHandler -Key Ctrl+v        -Function Paste
Set-PSReadLineKeyHandler -Key Ctrl+LeftArrow -Function BackwardWord
Set-PSReadLineKeyHandler -Key Ctrl+RightArrow -Function NextWord
Set-PSReadLineKeyHandler -Key Home          -Function BeginningOfLine
Set-PSReadLineKeyHandler -Key End           -Function EndOfLine

# Quick Command Existence Check (F2)
Set-PSReadLineKeyHandler -Key F2 -ScriptBlock {
    $line = $null
    $cursor = $null
    [Microsoft.PowerShell.PSConsoleReadLine]::GetBufferState([ref]$line, [ref]$cursor)

    $firstWord = ($line -split '\s+')[0]

    if ($firstWord -and (Get-Command $firstWord -ErrorAction SilentlyContinue)) {
        Write-Host " Command exists" -ForegroundColor Green -NoNewline
    } elseif ($firstWord) {
        Write-Host " Command NOT FOUND" -ForegroundColor Red -NoNewline
    }

    [Microsoft.PowerShell.PSConsoleReadLine]::RedrawLine()
}

5. Testing the Improvements
After restarting PowerShell, the enhancements should be easy to notice:
Command Predictions
Type git sta → see prediction like git status.

Reverse Search
Press Ctrl+R → type part of a past command → fuzzy matches appear.
Completion Menu
Type Get- → press Ctrl+Space → view all matching commands.

Quick Command Check
Type a typo (Get-ChilItem) → press F2 → get immediate feedback.
Editor-Like Navigation

Ctrl+Left/Right moves by words
Home/End jumps to line boundaries
Ctrl+C/Ctrl+V behave normally

These changes significantly speed up command-line workflows.
6. Notes from Community Feedback
User discussions highlight several important points:
• The built-in PSReadLine often loads an outdated version.
This explains why some users cannot access prediction features.
• Installation and updating can fail.
Removing the module first usually resolves the problem.
• PowerShell 5.1 remains problematic on Windows 11.
Users may need additional steps.
• Alternatives exist.
Some prefer oh-my-posh, starship, or Git Bash tools.
• Even skeptics agree the upgraded experience is far better.
PSReadLine dramatically reduces repetitive effort and errors.
Conclusion
PowerShell can be frustrating in its default state, but PSReadLine transforms it into a much more efficient environment. With prediction, intuitive navigation, improved history search, and a modern editing feel, the console becomes faster and easier to use.
Whether you rarely use PowerShell or rely on it heavily, this configuration acts like an integrated cheat sheet—reducing friction and boosting productivity.
Related articles

5 Essential Error Handling Methods in Bash
Top 10 CSS Tips to Master in 2024
10 Must-Know Custom React Hooks for Your Projects



Howto Use Blob Objects for Efficient File Handling
Fri, 14 Nov 2025 00:00:00 GMT
In modern front-end apps, file handling is everywhere: image uploads, CSV exports, previews, and rich editors. But once files get big or numerous, things start to break: the UI freezes, memory usage spikes, and the browser occasionally dies.
This guide walks through six practical Blob techniques that help handle files efficiently and safely:

Creating Blobs correctly
Chunking large files
Compressing and converting images
Implementing reliable file previews
Exporting data as downloadable files
Managing memory to avoid Blob URL leaks

The goal: make file handling fast, stable, and production-ready.

1. Creating Blob Objects Safely and Efficiently
Common pain
Many developers start by manipulating giant strings or base64 data URLs, which:

Duplicate data in memory
Blow up heap usage
Slow down the UI

//  Bad: huge string + data URL = double memory usage
const hugeText = 'Very long text...'.repeat(100_000);
const dataUrl =
  'data:text/plain;charset=utf-8,' + encodeURIComponent(hugeText);

Use Blobs instead
A Blob is a lightweight wrapper around binary data. The browser can stream it, slice it, and build URLs from it without copying the entire payload.
/**
 * Safely create a Blob from data chunks.
 */
const createBlob = (
  parts: BlobPart[],
  options: BlobPropertyBag = {}
): Blob => {
  return new Blob(parts, {
    type: options.type ?? 'text/plain',
    endings: options.endings ?? 'transparent',
  });
};

// Text Blob
const messageBlob = createBlob(['Hello, Blob!'], {
  type: 'text/plain',
});

// JSON Blob
const userProfile = { name: 'Alex', age: 29 };
const profileBlob = createBlob([JSON.stringify(userProfile)], {
  type: 'application/json',
});

// HTML Blob
const htmlSnippet = '<h1>Dynamically Generated HTML</h1>';
const htmlBlob = createBlob([htmlSnippet], { type: 'text/html' });

Real-world use: “download config as file”
const downloadConfig = (config: unknown) => {
  const serialized = JSON.stringify(config, null, 2);
  const blob = new Blob([serialized], {
    type: 'application/json',
  });

  const url = URL.createObjectURL(blob);
  const anchor = document.createElement('a');

  anchor.href = url;
  anchor.download = 'config.json';
  document.body.appendChild(anchor);
  anchor.click();
  anchor.remove();

  URL.revokeObjectURL(url);
};

Key ideas

Blobs wrap data without copying it.
Always set a correct MIME type (e.g., application/json, image/jpeg).
Use URL.createObjectURL(blob) to get a fast, stream-friendly URL.


2. Chunking Large Files to Avoid Memory Explosions
Common pain
Reading a 2 GB log file with FileReader.readAsText() in one go is a great way to:

Freeze the tab
Hit memory limits
Crash the browser

//  Bad: read entire file into memory
const processLargeFile = (file: File) => {
  const reader = new FileReader();

  reader.onload = (event) => {
    const text = event.target?.result as string;
    // Massive string in memory
    handleWholeFile(text);
  };

  reader.readAsText(file);
};

Better: process in chunks with slice()
/**
 * Process a file in fixed-size chunks to avoid memory pressure.
 */
const processFileInChunks = async (
  file: File,
  chunkSize = 1024 * 1024,
  onProgress?: (info: {
    current: number;
    total: number;
    percentage: number;
  }) => void
) => {
  const totalChunks = Math.ceil(file.size / chunkSize);
  const results: unknown[] = [];

  for (let index = 0; index < totalChunks; index++) {
    const start = index * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const result = await readChunk(chunk, index);
    results.push(result);

    onProgress?.({
      current: index + 1,
      total: totalChunks,
      percentage: Math.round(((index + 1) / totalChunks) * 100),
    });
  }

  return results;
};

const readChunk = (
  chunk: Blob,
  index: number
): Promise<{ index: number; size: number; sample: string }> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (event) => {
      const text = event.target?.result as string;
      resolve({
        index,
        size: chunk.size,
        sample: text.slice(0, 100),
      });
    };

    reader.onerror = () => reject(reader.error);
    reader.readAsText(chunk);
  });
};

Real-world use: chunked upload class
class ChunkedUploader {
  private file: File;
  private chunkSize: number;
  private uploadUrl: string;
  private onProgress?: (info: {
    uploaded: number;
    total: number;
    percentage: number;
  }) => void;

  constructor(file: File, options: {
    chunkSize?: number;
    uploadUrl: string;
    onProgress?: (info: { uploaded: number; total: number; percentage: number }) => void;
  }) {
    this.file = file;
    this.chunkSize = options.chunkSize ?? 2 * 1024 * 1024; // 2MB
    this.uploadUrl = options.uploadUrl;
    this.onProgress = options.onProgress;
  }

  async upload() {
    const totalChunks = Math.ceil(this.file.size / this.chunkSize);
    const uploadId = this.createUploadId();

    for (let index = 0; index < totalChunks; index++) {
      const start = index * this.chunkSize;
      const end = Math.min(start + this.chunkSize, this.file.size);
      const chunk = this.file.slice(start, end);

      await this.uploadChunk(chunk, index, uploadId);

      this.onProgress?.({
        uploaded: index + 1,
        total: totalChunks,
        percentage: Math.round(((index + 1) / totalChunks) * 100),
      });
    }

    return this.mergeChunks(uploadId, totalChunks);
  }

  private async uploadChunk(chunk: Blob, index: number, uploadId: string) {
    const body = new FormData();
    body.append('chunk', chunk);
    body.append('index', String(index));
    body.append('uploadId', uploadId);

    const response = await fetch(this.uploadUrl, { method: 'POST', body });

    if (!response.ok) {
      throw new Error(`Chunk ${index} upload failed`);
    }
  }

  private async mergeChunks(uploadId: string, totalChunks: number) {
    const response = await fetch('/api/merge-chunks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ uploadId, totalChunks }),
    });

    if (!response.ok) {
      throw new Error('Failed to merge chunks');
    }

    return response.json();
  }

  private createUploadId() {
    return `${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
  }
}


3. Image Compression and Format Conversion on the Front End
Common pain
Uploading raw 8 MB photos directly from phones or cameras:

Wastes bandwidth
Slows uploads
Hurts perceived performance

//  No compression: heavy uploads, slow UX
const uploadOriginalImage = (file: File) => {
  const body = new FormData();
  body.append('image', file);
  return fetch('/upload', { method: 'POST', body });
};

Better: compress with <canvas> and Blob
interface CompressionOptions {
  maxWidth?: number;
  maxHeight?: number;
  quality?: number;
  outputType?: string;
}

const compressImage = (
  file: File,
  options: CompressionOptions = {}
): Promise<Blob> => {
  const {
    maxWidth = 1920,
    maxHeight = 1080,
    quality = 0.8,
    outputType = 'image/jpeg',
  } = options;

  return new Promise((resolve, reject) =>…


Friday Links #32: The Latest JavaScript Trends & Tools
Fri, 14 Nov 2025 00:00:00 GMT
Every week, the JavaScript ecosystem produces more innovation than one person can reasonably track—new tools, library updates, surprising experiments, and community conversations. Friday Links #32 brings all of it together in one place. This edition highlights standout releases, useful utilities, performance-focused tools, and forward-thinking ideas shaping the next wave of frontend development. Whether you're building production apps or exploring new workflows, this roundup will keep you in the loop.

GPT-5.1 Emerges as a Top Performer in Coding Benchmarks
GPT-5.1 arrived in the API just a day after its ChatGPT release and is now integrated into the Codex coding agent along with new development tools. Built on the GPT-5 architecture, it inherits strong long-context reasoning, enabling deep repository analysis and high-quality patch generation.
On benchmarks, GPT-5.1 shows consistent gains over GPT-5. In SWE-bench Verified—where models fix real bugs—it achieved 76.3%, up from 72.8%, placing it among the best coding models available. Other tests (MMMU, GPQA, Tau²-bench) also show targeted improvements, putting GPT-5.1 alongside the latest Claude Sonnet and Doubao-Seed-Code models.
OpenAI also upgraded Codex with gpt-5.1-codex and gpt-5.1-codex-mini, tuned for long code analysis and agent workflows. Two major tools were added to the API:

apply_patch for clean diff-based patch generation
shell for safe, sandboxed command-line access

These updates are already being integrated into IDEs and agent systems that rely on multi-step edits and test-driven feedback loops.
API pricing for GPT-5.1 Thinking remains the same as GPT-5:

$1.25 per 1M input tokens
$10 per 1M output tokens
$0.125 per 1M cached tokens

Prompt caching now lasts 24 hours, reducing costs for long sessions and large-project coding workflows.
📜 Articles & Tutorials
Google researchers released a 50-page guide on building practical, useful AI agents. It covers agent architecture, how an LLM operates inside an agent, tool integration and configuration, multi-agent coordination, and methods for evaluating performance. Original guide is available here.
Why is Zig so Cool?
Should You Stop Using Prisma? Why Database ORMs Might Be the Worst Thing That Happened to Backend Development
TypeScript’s rise in the AI era: Insights from Lead Architect, Anders Hejlsberg
Programming principles for self taught front-end developers
Perfectly Pointed Tooltips: To The Corners
From VS Code to Helix
Create Sick Web Animations in Three.js with GSAP
Frontend Aesthetics: A Prompting Guide
StyleX: A Styling Library for CSS at Scale
From GraphQL to Zod: Simplifying Arte's API Architecture
3 MCP servers you should be using (safely)
Why we migrated from Python to Node.js
A One File PWA to Tell You When Time Is Lying
Nano Banana can be prompt engineered for extremely nuanced AI image generation
Pose Animator - An open source tool to bring SVG characters to life in the browser via motion capture
⚒️ Tools
FileMock: A Free Tool for Generating Test Files in Any Format
vibesdk - An open-source vibe coding platform that helps you build your own vibe-coding platform, built entirely on Cloudflare stack
Mediabunny: Read and Convert Media Files Directly in the Browser
bash-screensavers – Turn your idle shell into a visual playground.
Google osv-scanner
Placeholder Image Generator
Tiny Docker Healthcheck Tools That Cut Image Size by Megabytes
A developer released microcheck, a set of ultra-small, statically compiled utilities designed specifically for Docker healthchecks. Instead of installing curl or wget—adding 10MB or more to an image—you can drop in a single 70–500 KB binary that works even in scratch and distroless environments.
The toolkit includes:

httpcheck — HTTP endpoint checks (~75 KB)
httpscheck — same, with TLS and protocol autodetection (~500 KB)
portcheck — TCP/UDP port checks (~70 KB)

Each tool returns standard Docker exit codes (0 = healthy, 1 = unhealthy), making them ideal for bare Docker setups or runtimes without built-in healthchecks.
Example:
# Before (+10MB)
RUN apt update && apt install -y curl
HEALTHCHECK CMD curl -f http://localhost:8080/ || exit 1

# After (+75KB)
COPY --from=ghcr.io/tarampampam/microcheck /bin/httpcheck /bin/httpcheck
HEALTHCHECK CMD ["httpcheck", "http://localhost:8080/"]

They support major architectures (x86_64, ARM, ppc64le, s390x) and provide ready-to-use images.
Source code, examples, and binaries:
microcheck
Nixopus - Open Source alternative to vercel, heroku, netlify with Terminal integration, and Self Hosting capabilities.
podman-desktop - Podman Desktop is the best free and open source tool to work with Containers and Kubernetes for developers. Get an intuitive and user-friendly interface to effortlessly build, manage, and deploy containers and Kubernetes — all from your desktop.
React Syntax Highlighter Demo
Gerbil - A desktop app to easily run Large Language Models locally.
OneUptime: The Complete Open-Source Observability Platform
📚 Libs
waveterm - An open-source, cross-platform terminal for seamless workflows

The button toggles the theme and saves the choice in local storage.

5. Integration with TanStack Router
The theme provider should wrap the entire shell component in routes/__root.tsx:
import { HeadContent, Scripts, createRootRouteWithContext } from '@tanstack/react-router';
import { TanStackDevtools } from '@tanstack/react-devtools';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { ThemeProvider } from '@/providers/theme-provider';
import Header from '../components/header/header';
import appCss from '../styles.css?url';
import type { QueryClient } from '@tanstack/react-query';

interface MyRouterContext {
  queryClient: QueryClient;
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'DaisyUI Theme Switcher' },
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <ThemeProvider>
          <Header />
          {children}
          <TanStackDevtools
            config={{ position: 'bottom-right' }}
            plugins={[
              { name: 'Tanstack Router', render: <TanStackRouterDevtoolsPanel /> },
            ]}
          />
          <Scripts />
        </ThemeProvider>
      </body>
    </html>
  );
}


6. Example Header Integration
src/components/header/header.tsx includes the toggle button alongside navigation links.
import { Link } from '@tanstack/react-router';
import ThemeToggler from '../ui/theme-toggler';

export default function Header() {
  return (
    <header className="px-2 xl:px-40 my-2.5 flex items-center justify-between gap-2 md:gap-4 xl:gap-6 lg:gap-12">
      <div className="flex items-center justify-between w-full">
        <button
          className="btn btn-ghost text-xl"
        >
          Logo
        </button>

        <nav className="flex items-center gap-4" aria-label="Main">
          <Link to="/" className="link link-hover">Home</Link>
          <ThemeToggler />
        </nav>
      </div>
    </header>
  );
}

Result

Building an Accessible Before/After Slider in React
Fri, 07 Nov 2025 00:00:00 GMT
If you’ve ever wanted to show a visual transformation — like a photo edit, a UI redesign, or a before-and-after effect — you’ve probably seen those interactive sliders where you can drag a handle to reveal changes.
In this tutorial, we’ll build one of those sliders entirely in React, from scratch — no dependencies, no CSS hacks, and full keyboard and accessibility support.

By the end, you’ll have a reusable <Slider /> component you can drop into any project.

Why This Matters
Before/after sliders are perfect for:

Product comparisons (old vs new)
Image editing showcases
Design before/after reveals
Visual storytelling

The problem?

Most examples online use outdated event handlers, don’t handle touch events, or completely ignore accessibility.
Let’s fix that. We’ll use:

Pointer Events — for unified mouse & touch input
ARIA roles — so it’s usable with a keyboard or screen reader
React hooks — for clear, modern logic
TailwindCSS — for concise, scalable styling


Step 1 — Setup the Component
Create a new file called Slider.tsx (or .jsx if you prefer).

We’ll start with a minimal structure and a 50/50 default split between “before” and “after” images.
'use client';

import React from 'react';

const Slider: React.FC = () => {
  const [slider, setSlider] = React.useState(50);
  const [dragging, setDragging] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement | null>(null);
  const pointerIdRef = React.useRef<number | null>(null);

  const beforeImage = 'https://iili.io/KtZ58mJ.md.png';
  const afterImage  = 'https://iili.io/KtZ5gXR.png';

This gives us state for:

slider: the current divider position (in percent)
dragging: whether we’re currently dragging the handle
containerRef: the image container reference
pointerIdRef: the pointer that owns the drag session


Step 2 — Handling Drag and Resize
Now let’s convert the pointer’s X position to a percentage inside the container.

This makes the slider responsive to any container width.
const clamp = (n: number) => Math.max(0, Math.min(100, n));

const clientToPercent = React.useCallback((clientX: number) => {
  const el = containerRef.current;
  if (!el) return slider;
  const rect = el.getBoundingClientRect();
  const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
  return clamp((x / rect.width) * 100);
}, [slider]);

Then we’ll use Pointer Events to track dragging:
const onPointerDown = (e: React.PointerEvent) => {
  pointerIdRef.current = e.pointerId;
  (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
  setDragging(true);
  setSlider(clientToPercent(e.clientX));
};

React.useEffect(() => {
  if (!dragging) return;
  const onMove = (e: PointerEvent) => setSlider(clientToPercent(e.clientX));
  const onUp = () => setDragging(false);

  window.addEventListener('pointermove', onMove, { passive: true });
  window.addEventListener('pointerup', onUp, { passive: true });
  return () => {
    window.removeEventListener('pointermove', onMove);
    window.removeEventListener('pointerup', onUp);
  };
}, [dragging, clientToPercent]);

This way, dragging works even if your cursor leaves the component — and supports both mouse and touch automatically.

Step 3 — Keyboard Accessibility
A11Y matters.

Let’s add full keyboard support — with arrows, PageUp/PageDown, Home, and End.
const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
  const step = e.shiftKey ? 5 : 2;
  const big = 10;

  switch (e.key) {
    case 'ArrowLeft': e.preventDefault(); setSlider(s => clamp(s - step)); break;
    case 'ArrowRight': e.preventDefault(); setSlider(s => clamp(s + step)); break;
    case 'PageDown': e.preventDefault(); setSlider(s => clamp(s - big)); break;
    case 'PageUp': e.preventDefault(); setSlider(s => clamp(s + big)); break;
    case 'Home': e.preventDefault(); setSlider(0); break;
    case 'End': e.preventDefault(); setSlider(100); break;
  }
};


Step 4 — Rendering the Markup
We’ll overlay the “after” image above the “before” one and reveal it using a CSS clip-path.
return (
  <div className="relative w-full max-w-lg mx-auto">
    <div
      ref={containerRef}
      className="relative w-full rounded-2xl overflow-hidden select-none"
      style={{ aspectRatio: '4 / 3', touchAction: 'none' }}
      role="group"
      aria-label="Before and after image comparison"
    >
      <img src={beforeImage} alt="Before" className="absolute inset-0 w-full h-full object-cover" />
      <div className="absolute inset-0 overflow-hidden" style={{ clipPath: `inset(0 ${100 - slider}% 0 0)` }}>
        <img src={afterImage} alt="After" className="w-full h-full object-cover" />
      </div>
      <div className="absolute top-0 bottom-0 w-px bg-white/90" style={{ left: `${slider}%` }} />

Then we’ll add the draggable handle with ARIA attributes and a smooth hover effect:
      <button
        type="button"
        className="absolute top-1/2 -translate-y-1/2 group"
        style={{ left: `${slider}%`, transform: 'translate(-50%, -50%)' }}
        onPointerDown={onPointerDown}
        onKeyDown={onKeyDown}
        role="slider"
        aria-label="Move comparison slider"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={Math.round(slider)}
      >
        <span className="grid place-items-center w-8 h-8 rounded-full bg-white shadow-lg ring-1 ring-black/10">
          <span className="grid place-items-center w-6 h-6 rounded-full bg-black/5">
            <span className="w-1 h-4 rounded-full bg-black/60" />
          </span>
        </span>
      </button>
    </div>
  </div>
);


Step 5 — Add Optional Labels and Styles
Want “BEFORE” and “AFTER” text overlays? Just drop these inside the container:
<div className="absolute bottom-4 left-4 text-xs font-medium text-white/80">AFTER</div>
<div className="absolute bottom-4 right-4 text-xs font-medium text-white">BEFORE</div>


Step 6 — Test and Reuse
Now test it on desktop, mobile, and with a keyboard — everything should work smoothly.
You can tweak:

The default percentage
The transition (add CSS transition for smoother motion)
The aspect ratio (change aspectRatio or Tailwind class)


Full Component Code
'use client';

import React from 'react';

const Slider: React.FC = () => {
  const [slider, setSlider] = React.useState(50);
  const [dragging, setDragging] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement | null>(null);
  const pointerIdRef = React.useRef<number | null>(null);

  const beforeImage = 'https://iili.io/KtZ58mJ.md.png';
  const afterImage = 'https://iili.io/KtZ5gXR.png';

  const clamp = (n: number) => Math.max(0, Math.min(100, n));

  const clientToPercent = React.useCallback((clientX: number) => {
    const el = containerRef.current;
    if (!el) return slider;
    const rect = el.getBoundingClientRect();
 …


10 Criminally Underrated JS Features That Slash Boilerplate
Fri, 07 Nov 2025 00:00:00 GMT
While browsing a developer thread recently, I came across a discussion about the most underrated JavaScript features — features that quietly save hundreds of lines of code and make your apps leaner. Here's a curated list with fresh examples and rewritten code for 2025.

1. Set — Instant Deduplication + O(1) Lookups
Use cases: Remove duplicates, prevent event re-binding.
const idPool = [101, 102, 102, 103, 103, 103];
const dedupedIds = [...new Set(idPool)];
console.log(dedupedIds); // [101, 102, 103]

Prevent duplicate event bindings:
const wiredEvents = new Set();

function bindOnce(evtName, handler) {
  if (wiredEvents.has(evtName)) return;
  window.addEventListener(evtName, handler);
  wiredEvents.add(evtName);
}

bindOnce('scroll', () => console.log('scrolling'));
bindOnce('scroll', () => console.log('scrolling'));


2. Object.entries() + Object.fromEntries() — Object Transformer Power Duo
Filter null or empty values from objects:
const rawProfile = {
  fullName: 'Zhang San',
  age: 28,
  avatar: '',
  phone: '13800138000',
};

const compactProfile = Object.fromEntries(
  Object.entries(rawProfile).filter(([k, v]) => v !== '')
);

console.log(compactProfile);
// { fullName: 'Zhang San', age: 28, phone: '13800138000' }

Parse URL queries without regex:
const queryString = window.location.search.slice(1);
const queryMap = Object.fromEntries(new URLSearchParams(queryString));
console.log(queryMap);


3. ?? and ??= — Safer Defaults than ||
Unlike ||, nullish coalescing doesn’t override valid falsy values like 0 or ''.
const qtyInput = 0;
const wrongQty = qtyInput || 10;
const safeQty = qtyInput ?? 10;
console.log(wrongQty, safeQty); // 10, 0

Add default fields safely:
const reqOpts = { timeout: 5000 };
reqOpts.retries ??= 3;
console.log(reqOpts);


4. Intl — Native i18n for Currency, Numbers, Dates
Format prices easily:
const priceValue = 1234.56;
const priceCNY = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(priceValue);
const priceUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(priceValue);
console.log(priceCNY, priceUSD);

Localized dates:
const clock = new Date();
const zhDate = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }).format(clock);
const enDate = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(clock);
console.log(zhDate, enDate);


5. IntersectionObserver — Lazy Images + Infinite Lists
Lazy-load images:
<img data-src="https://site.com/photo.jpg" src="placeholder.jpg" class="js-lazy" />

const imageWatcher = new IntersectionObserver((batch) => {
  for (const entry of batch) {
    if (!entry.isIntersecting) continue;
    const pic = entry.target;
    pic.src = pic.dataset.src;
    imageWatcher.unobserve(pic);
  }
});
document.querySelectorAll('.js-lazy').forEach((img) => imageWatcher.observe(img));

Infinite scrolling:
const sentinel = document.getElementById('load-flag');
const listWatcher = new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting) return;
  const newItems = await fetchNextPage();
  renderList(newItems);
});
listWatcher.observe(sentinel);


6. Promise.allSettled() — Batch Requests Without Failing Fast
Unlike Promise.all, allSettled() waits for every result.
const batchTasks = [
  fetch('/api/user/101'),
  fetch('/api/orders/101'),
  fetch('/api/messages/101'),
];

const outcomes = await Promise.allSettled(batchTasks);
const okPayloads = await Promise.all(outcomes.filter(r => r.status === 'fulfilled').map(r => r.value.json()));
const badEndpoints = outcomes.filter(r => r.status === 'rejected').map(r => r.reason?.url ?? '(unknown)');
console.log('OK:', okPayloads);
console.log('Failed:', badEndpoints);


7. Element.closest() — Reliable DOM Traversal
Highlight container when clicking a child:
<ul class="people-list">
  <li class="people-item">Alice</li>
  <li class="people-item">Bob</li>
</ul>

document.querySelectorAll('.people-item').forEach((node) => {
  node.addEventListener('click', (ev) => {
    const wrapper = ev.target.closest('.people-list');
    wrapper?.classList.toggle('is-active');
  });
});


8. URL + URLSearchParams — No More Regex URL Manipulation
const current = new URL(window.location.href);
console.log(current.hostname);
console.log(current.pathname);
console.log(current.searchParams.get('name'));

Modify query parameters:
const link = new URL('https://example.com/page');
link.searchParams.append('page', '3');
link.searchParams.append('limit', '10');
link.searchParams.set('page', '4');
link.searchParams.delete('limit');
console.log(link.href);


9. for...of — Iterable-Friendly and Breakable
Stop mid-loop when found:
const catalog = [
  { id: 1, label: 'Phone', price: 5999 },
  { id: 2, label: 'Laptop', price: 9999 },
  { id: 3, label: 'Tablet', price: 3999 },
];

for (const item of catalog) {
  if (item.price > 8000) {
    console.log('High-value item:', item);
    break;
  }
}

Iterate a Set with indexes:
const tagBag = new Set(['Frontend', 'JS', 'CSS']);
for (const [idx, token] of [...tagBag].entries()) {
  console.log(`Index ${idx}: ${token}`);
}


10. Top-Level Await — Async Modules Without Wrappers
config.mjs
const resp = await fetch('/api/config');
export const runtimeConfig = await resp.json();

api.mjs
import { runtimeConfig } from './config.mjs';

export const httpClient = {
  base: runtimeConfig.baseUrl,
  get(path) {
    return fetch(`${this.base}${path}`);
  },
};

Dynamic import on user action:
document.getElementById('btn-charts').addEventListener('click', async () => {
  const { mountChart } = await import('./charts.mjs');
  mountChart('#chart-area');
});


Wrap-Up
A lot of what we used to need libraries for—uniq, moment, lazy loading—now has native APIs.

Modern JavaScript has matured: it’s fast, expressive, and powerful right out of the box.

Embrace these hidden gems, and you’ll spend more time solving real problems, not rewriting helpers.
Related articles

Understanding Big O Notation with JavaScript
Mastering Web Animations with Anime.js
Optimizing await fetch(): Why It Slows Down and How to Speed It Up



Howto Use EXISTS and NOT EXISTS in SQL
Thu, 06 Nov 2025 00:00:00 GMT
In SQL, filtering results based on the presence or absence of related data often involves the keywords EXISTS and NOT EXISTS. While they may look similar, their behavior and performance characteristics can vary depending on the database engine and query structure.
This article breaks down how each works, when to use them, and how to avoid common mistakes.
What Is EXISTS?
The EXISTS operator checks whether a subquery returns at least one row.
If the subquery finds any result, EXISTS returns TRUE; otherwise, it returns FALSE.
Example
SELECT c.customer_id, c.name
FROM customers c
WHERE EXISTS (
  SELECT 1
  FROM orders o
  WHERE o.customer_id = c.customer_id
);

Explanation: This query returns all customers who have at least one order.
The subquery runs per row of the main query, stopping immediately when a match is found — making it efficient for large datasets with indexes.
What Is NOT EXISTS?
NOT EXISTS is the logical opposite — it checks that a subquery returns no rows.
If the subquery finds even one row, the condition becomes FALSE.
Example
SELECT c.customer_id, c.name
FROM customers c
WHERE NOT EXISTS (
  SELECT 1
  FROM orders o
  WHERE o.customer_id = c.customer_id
);

Explanation: This query returns customers who have never placed an order.
It’s useful for identifying missing relationships, such as users without activity or products not yet sold.
Internal Behavior and Performance

EXISTS: stops as soon as it finds the first matching row (short-circuit evaluation).
NOT EXISTS: must confirm that no matching rows exist, which can be slower on large tables.

Many modern databases (PostgreSQL, MySQL 8+, SQL Server) optimize these checks effectively, especially when proper indexes are in place.
Practical Example
Suppose you have two tables:
-- schemas
users(id, name)
purchases(id, user_id, amount)

Find users with purchases
SELECT name
FROM users u
WHERE EXISTS (
  SELECT 1
  FROM purchases p
  WHERE p.user_id = u.id
);

Find users without purchases
SELECT name
FROM users u
WHERE NOT EXISTS (
  SELECT 1
  FROM purchases p
  WHERE p.user_id = u.id
);

The difference lies in what you're testing for — the existence or nonexistence of related data.
EXISTS vs IN vs JOIN



Operator
Use Case
Behavior




EXISTS
Check if subquery has any rows
Stops at the first match


NOT EXISTS
Check for missing relationships
Confirms no matches exist


IN
Compare values directly
Can be slower with large subquery sets


LEFT JOIN ... IS NULL
Alternative to NOT EXISTS
Watch for duplicates if joins fan out



Best Practices

Prefer EXISTS for correlated subqueries — it’s often clearer and faster than IN.
Index the columns used in the subquery’s join condition.
Beware NULLs with NOT EXISTS: ensure subquery filters exclude unwanted NULL semantics.
Measure on your database — optimizers differ by engine and version.

Conclusion
EXISTS and NOT EXISTS are powerful tools for expressing relationships between datasets.

Use EXISTS to find records with matching entries.
Use NOT EXISTS to find records without matches.

With sound indexing and careful structure, they make queries cleaner, faster, and more expressive.
Related articles

Build Dynamic Date Ranges in SQL with Ease
Practical Month Arithmetic and Calendar Logic in JavaScript
Mastering Array Flattening in JavaScript



Howto Configure Webpack: From Basics to Expert Level
Sun, 02 Nov 2025 00:00:00 GMT
Hi developers!  This guide will demystify Webpack configuration
from beginner to expert. If the webpack.config.js file once looked
like a foreign language, by the end of this article you'll understand
every piece of it --- and how to customize it for real-world projects.

Your First Webpack Config (Hello World)

Let's start with the simplest example to understand the structure.
// my first webpack configuration
const path = require("path");

module.exports = {
  // Entry: where bundling begins
  entry: "./src/index.js",

  // Output: where bundled files go
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },

  // Mode: development or production
  mode: "development",
};

Even this tiny config can bundle your app. Think of it as the "Hello
World" of Webpack.

Core Concepts: Entry, Output, Loaders, and Plugins

Entry --- The Starting Point
// Single entry (SPA)
entry: "./src/index.js";

// Multiple entries (multi-page)
entry: {
  home: "./src/home.js",
  about: "./src/about.js",
  contact: "./src/contact.js",
};

Output --- The Final Destination
output: {
  path: path.resolve(__dirname, "dist"),
  filename: "[name].[contenthash].js",
  clean: true,
  publicPath: "https://cdn.example.com/",
};

Loaders --- The File Translators
Loaders tell Webpack how to handle different file types.
module: {
  rules: [
    { test: /\.css$/, use: ["style-loader", "css-loader"] },
    { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
    {
      test: /\.(png|jpg|jpeg|gif|svg)$/i,
      type: "asset/resource",
      generator: { filename: "images/[name].[hash][ext]" },
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: "asset/resource",
      generator: { filename: "fonts/[name].[hash][ext]" },
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } },
    },
  ],
}

Plugins --- The Feature Boosters
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugins: [
  new HtmlWebpackPlugin({
    template: "./src/index.html",
    title: "My App",
    minify: true,
  }),

  new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css",
  }),

  new CleanWebpackPlugin(),

  new webpack.DefinePlugin({
    "process.env.NODE_ENV": JSON.stringify("production"),
  }),
];


Real-World Setup Example

Here's a practical config used in real projects --- complete and
environment-aware.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, argv) => {
  const isProd = argv.mode === "production";

  return {
    entry: {
      main: "./src/index.js",
      vendor: "./src/vendor.js",
    },

    output: {
      path: path.resolve(__dirname, "dist"),
      filename: isProd ? "[name].[contenthash].js" : "[name].js",
      publicPath: "/",
    },

    module: {
      rules: [
        { test: /\.js$/, exclude: /node_modules/, use: "babel-loader" },
        {
          test: /\.css$/,
          use: [
            isProd ? MiniCssExtractPlugin.loader : "style-loader",
            "css-loader",
            "postcss-loader",
          ],
        },
        { test: /\.(png|jpg|gif)$/i, type: "asset/resource" },
      ],
    },

    plugins: [
      new HtmlWebpackPlugin({ template: "./src/index.html", inject: true }),
      ...(isProd
        ? [new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })]
        : []),
    ],

    optimization: {
      splitChunks: {
        chunks: "all",
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name: "vendors",
            priority: 10,
          },
        },
      },
    },

    devServer: {
      static: "./dist",
      hot: true,
      open: true,
      port: 3000,
    },

    devtool: isProd ? "source-map" : "eval-cheap-module-source-map",
  };
};


Environment Configs: Dev vs. Production

Development
// webpack.dev.js
module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  devServer: {
    static: "./dist",
    hot: true,
    open: true,
    historyApiFallback: true,
  },
  module: {
    rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }],
  },
};

Production
// webpack.prod.js
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
    splitChunks: { chunks: "all" },
  },
  module: {
    rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }],
  },
  plugins: [new MiniCssExtractPlugin()],
};


Advanced Webpack Tricks

Dynamic Configs
module.exports = (env, argv) => {
  const isAnalyze = env && env.analyze;
  const config = { /* base config */ };

  if (isAnalyze) {
    const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
    config.plugins.push(new BundleAnalyzerPlugin());
  }

  return config;
};

Multi-Target Builds
module.exports = [
  {
    name: "client",
    target: "web",
    entry: "./src/client.js",
    output: { filename: "client.bundle.js" },
  },
  {
    name: "server",
    target: "node",
    entry: "./src/server.js",
    output: { filename: "server.bundle.js" },
  },
];


Optimization Essentials

optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: "vendors",
        priority: 20,
      },
      common: {
        name: "common",
        minChunks: 2,
        priority: 10,
        reuseExistingChunk: true,
      },
    },
  },
  runtimeChunk: { name: "runtime" },
};

Summary
Configuring Webpack is like building with LEGO --- start small and
keep improving.
Understand the pillars: Entry, Output, Loader,
Plugin

Separate development and production configs

Use code-splitting and caching wisely

Optimize only where it matters
Keep experimenting --- Webpack mastery comes from practice, not
memorization.
Related articles

Basic Webpack 5 Project with CSS: Step-by-Step
Complete Beginner's Guide to Creating AI Applications with OpenAI
Bun Install vs Bun Add: Choosing the Right Command



7 Bun Workflows to Supercharge Your Full-Stack Development
Fri, 31 Oct 2025 00:00:00 GMT
When someone types npm install, laptop fans roar like a jet engine.
Bun changes that story. It combines a runtime, package manager,
bundler, and test runner into one lightning-fast binary. But
using Bun effectively takes more than just installation --- it requires
the right workflows.
Here are seven practical Bun workflows to help you write, test, and
deploy apps faster and cleaner.
1. Run One-Off Commands with bunx
Forget globally installed CLI tools. They clutter your environment and
version management. Instead, bunx lets you run any package command
without installing it globally.
# Create a new Vite + React project without global installs
bunx create-vite@latest my-react-app --template react-ts

# Run ESLint and auto-fix issues
bunx eslint . --fix

Everyone --- from your local machine to CI pipelines --- uses the exact
same tool versions. No more "works on my machine" moments.
2. Use Reliable Lockfiles with bun install
bun install isn't just fast; it ensures reproducible builds by
generating compact and consistent dependencies.
# Prevent accidental lockfile changes
bun install --frozen-lockfile

# Production install without devDependencies
bun install --production

Commit the bun.lockb binary lockfile to your repo and enable
--frozen-lockfile in CI to keep your dependency tree consistent across
all environments.
3. Simplify Monorepos with Bun Workspaces
Bun makes managing monorepos effortless --- no need for Nx or Lerna.
Just define your workspace structure in the root package.json:
{
  "name": "super-app",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "dev": "bun run --filter \"./apps/*\" dev",
    "build": "bun run --filter \"./packages/*\" build"
  }
}

Shared libraries under packages/ are instantly available to all apps
under apps/, streamlining multi-app development and versioning.
4. Combine Front-End and API in a Single Bun Server
Bun's built-in HTTP server is small and fast. Using frameworks like
Hono or Elysia, you can serve both your API and static front-end
from the same process.
// server.ts
import { Hono } from "hono";
import { serveStatic } from "hono/bun";

const server = new Hono();

server.get("/api/users/:id", (ctx) => {
  const { id } = ctx.req.param();
  return ctx.json({ id, name: `User ${id}` });
});

server.use("/*", serveStatic({ root: "./public" }));

export default {
  port: 8080,
  fetch: server.fetch,
};

Start it with:
bun --watch run server.ts

Your API and client reload automatically as you code --- the dream setup
for full-stack development.
5. Build Ultra-Fast Bundles with bun build
Bun's bundler is extremely efficient for both client and server targets.
# Bundle client code for browsers
bun build ./src/main.ts --outdir ./dist/client --sourcemap --minify

# Bundle backend code for Bun or Node.js
bun build ./src/server.ts --target=bun --outdir ./dist/server

Perfect for microservices, cloud functions, or optimizing CI/CD build
steps.
6. Test Instantly with bun test
Forget Jest configuration chaos. Bun's built-in test runner works out of
the box with TypeScript, parallel execution, and coverage.
// text-utils.test.ts
import { expect, test, describe } from "bun:test";

const toTitleCase = (text: string) =>
  text ? text[0].toUpperCase() + text.slice(1) : "";

describe("toTitleCase()", () => {
  test("capitalizes the first letter", () => {
    expect(toTitleCase("world")).toBe("World");
  });

  test("returns empty string for empty input", () => {
    expect(toTitleCase("")).toBe("");
  });
});

Run tests with:
bun test

Enjoy blazing speed with built-in watch mode and coverage reports ---
testing feels frictionless again.
7. Manage Environment Variables Without dotenv
Bun automatically loads .env files from the project root, no
dependencies required.
DATABASE_URL="postgresql://user:pass@localhost:5432/db"
JWT_SECRET="super-secret-key"

Then simply access them in your code:
// config.ts
function requireEnv(key: string): string {
  const val = Bun.env[key];
  if (!val) throw new Error(`Missing environment variable: ${key}`);
  return val;
}

export const env = {
  db: requireEnv("DATABASE_URL"),
  secret: requireEnv("JWT_SECRET"),
};

This lightweight approach eliminates extra dependencies while enforcing
safer configuration management.
Pitfalls to Watch For

Node.js module compatibility: Not all Node APIs or native C++
modules are supported.\
CJS imports: Some legacy packages require
import pkg from 'old-lib' and then using pkg.default.\
Binary lockfiles: bun.lockb merges can't be resolved manually;
rerun bun install after conflicts.

Takeaway
Bun is about integration --- bundler, test runner, package manager,
and runtime unified into one tool.

It replaces five separate utilities, cuts build times, and simplifies
project setup dramatically.
Start with ServBay to manage your Node and Bun versions easily, then
dive into these workflows to experience true full-stack acceleration.
Related articles

Mastering Modern Monorepo Development with pnpm, Workspaces
Get All Files and Folders in Node.js Directories
Master Code Testing Quality with F.I.R.S.T Methodology



Howto Optimize React with useCallback, useMemo & React.memo
Fri, 31 Oct 2025 00:00:00 GMT
If you've written React apps for a while, you've probably met the three
performance heroes: useCallback, useMemo, and React.memo.

But when should you use them, and how do they differ? This guide breaks
down each concept with clear explanations and practical examples.

Why Components Re-Render

Every time a parent's state updates, its entire function re-runs,
recreating variables and functions. That's why child components
re-render "innocently."
function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = () => console.log("clicked");

  console.log("Parent rendered");

  return (
    <>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </>
  );
}

function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click me</button>;
}

Each render creates a new function reference, so React thinks props
changed.
const fn1 = () => {};
const fn2 = () => {};
console.log(fn1 === fn2); // false


React.memo: Skipping Useless Renders

React.memo is a higher-order component that performs a shallow
comparison of props. If they haven't changed, React skips
re-rendering.
const Child = React.memo(({ onClick }) => {
  console.log(" Child rendered");
  return <button onClick={onClick}>Click me</button>;
});

It compares new vs. old props. If they're equal →  skip render;
otherwise →  re-render.
Limitation: Shallow comparison fails for new object or function
references.
//  These always create new references
<Child onClick={() => {}} />
<Child config={{ theme: "dark" }} />


useCallback: Stable Function References

useCallback memoizes a function and returns the same reference unless
dependencies change.
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

Use it with React.memo for stable props:
const Child = React.memo(({ onClick }) => {
  console.log(" Child rendered");
  return <button onClick={onClick}>Click me</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => console.log("clicked"), []);

  return (
    <>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </>
  );
}

Now the Child component will no longer re-render when the parent
updates unrelated state.
With dependencies:
const [userId, setUserId] = useState(1);
const fetchUser = useCallback(() => {
  fetch(`/api/user/${userId}`);
}, [userId]);


useMemo: Cache Expensive Computations

While useCallback caches a function reference, useMemo caches a
computed value.
Hook          Caches               Returns    Common Use

useCallback   Function reference   Function   Child callbacks
useMemo       Computed value       Value      Derived states / calculations
Example: Filter large product lists efficiently.
function ProductList({ products }) {
  const [filter, setFilter] = useState("");

  const filtered = useMemo(() => {
    console.log(" Filtering...");
    return products.filter(p =>
      p.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [products, filter]);

  return (
    <>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      {filtered.map(p => (
        <div key={p.id}>{p.name}</div>
      ))}
    </>
  );
}

Without useMemo: recalculates on every re-render.

With useMemo: recalculates only when dependencies change.

Combined Strategy


useCallback → memoize functions passed to children\
useMemo → memoize derived or heavy computations\
React.memo → skip rendering children with identical props

Together, they stabilize props and eliminate unnecessary renders.

Best Practices


Scenario             Recommended Solution                      Why

Passing callback to  useCallback + React.memo              Stable
child                                                          reference
Filtering/sorting    useMemo                                 Cache
data                                                           computation
Passing              useMemo                                 Stable props
objects/arrays
Component props      React.memo                              Avoid
rarely change                                                  re-render
Simple components     Skip optimization                      Overhead not
worth it
Common Pitfalls

Overuse: Avoid wrapping every function --- measure first!\
Missing React.memo: useCallback alone won't stop re-renders.\
Missing dependencies: Always declare dependency arrays to avoid
stale closures.


Full Example

import React, { useState, useMemo, useCallback, memo } from "react";

const ResultDisplay = memo(({ result }) => {
  console.log(" ResultDisplay rendered");
  return <div>Result: {result}</div>;
});

const ActionButton = memo(({ onAction, label }) => {
  console.log(" ActionButton rendered");
  return <button onClick={onAction}>{label}</button>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const heavyResult = useMemo(() => {
    console.log(" Heavy calculation...");
    let total = 0;
    for (let i = 0; i < 1_000_000; i++) total += i;
    return total + count;
  }, [count]);

  const handleAdd = useCallback(() => setCount(c => c + 1), []);
  const handleReset = useCallback(() => setCount(0), []);

  console.log(" App rendered");

  return (
    <div>
      <h1>React Performance Demo</h1>
      <p>Count: {count}</p>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Type something..."
      />
      <ResultDisplay result={heavyResult} />
      <ActionButton onAction={handleAdd} label="+1" />
      <ActionButton onAction={handleReset} label="Reset" />
    </div>
  );
}


Conclusion


useCallback → remember the function\
useMemo → remember the value\
React.memo → remember the component

These hooks work best together when applied intentionally, not
everywhere.

Measure, identify bottlenecks, and optimize where it truly matters.
Related articles

Fixing React’s “Cannot Read Property createElement of Undefined”
Theme Switcher with DaisyUI and TanStack Router
Properly Configuring Jest for Reac…


Howto Unlock Web Workers for Front-End Performance
Fri, 31 Oct 2025 00:00:00 GMT
In modern front-end applications, performance optimization is no longer
optional. When scrolling becomes choppy or the UI freezes, we often turn
to complex frameworks or micro-optimizations. But there's an overlooked
API that solves most of these problems elegantly: Web Workers.
Why Web Workers Are Underrated
Introduced in 2009, Web Workers still don't get the attention they
deserve. Common myths include:

"Too complicated to use" → It only takes a few lines of code.
"Not widely supported" → 98% of browsers support it today.
"Hard to separate logic" → The performance gain far outweighs
the refactor.

Let's explore how this API transforms front-end performance.

Freeing the Main Thread: Say Goodbye to Lag

JavaScript runs on a single thread, so heavy computations block UI
rendering. Web Workers move that work off the main thread.
//  Traditional approach — blocks UI
function computeReport(data) {
  const result = performHeavyMath(data); // UI freezes!
  updateDashboard(result);
}

//  With Web Worker — smooth interface
const worker = new Worker("worker-calc.js");
worker.postMessage(hugeDataset);
worker.onmessage = (event) => updateDashboard(event.data);

Now your UI stays responsive while computations happen in parallel.

True Parallelism on Multi-Core Devices

JavaScript typically uses only one CPU core. Web Workers finally allow
true multi-core utilization.
// Create a pool of workers
const taskPool = Array(4)
  .fill(0)
  .map(() => new Worker("task-handler.js"));

function runParallel(tasks) {
  const slice = Math.ceil(tasks.length / taskPool.length);

  taskPool.forEach((w, i) => {
    const batch = tasks.slice(i * slice, (i + 1) * slice);
    w.postMessage(batch);
  });
}

Each worker processes data independently, achieving 3--5× speedups.

Smarter Memory Usage

Each worker runs in its own thread with a separate memory space,
preventing main-thread memory spikes.
Example: handling big data filtering.
// filter-worker.js
self.onmessage = (e) => {
  const { list, keyword, filters } = e.data;

  const start = performance.now();
  const result = list
    .filter((item) =>
      item.name.toLowerCase().includes(keyword.toLowerCase())
    )
    .filter((item) => filters.every((fn) => fn(item)))
    .sort((a, b) => a.rank - b.rank);

  const duration = performance.now() - start;

  self.postMessage({ result, time: `${duration.toFixed(2)}ms` });
};

Main thread:
const searchWorker = new Worker("filter-worker.js");

input.addEventListener("input", (e) => {
  searchWorker.postMessage({
    list: massiveDataset,
    keyword: e.target.value,
    filters: activeRules,
  });
});

searchWorker.onmessage = (e) => {
  renderResults(e.data.result);
  showStats(e.data.time);
};


Image and Video Processing Off the Main Thread

Web Workers shine in real-time image manipulation, compression, or
AI-powered filters.
// image-worker.js
self.onmessage = (e) => {
  const { imageData, steps } = e.data;

  const processed = applyImageFilters(imageData, steps);
  const analysis = runImageAI(processed);
  const thumbnails = createThumbnails(processed);

  self.postMessage({ processed, analysis, thumbnails });
};

// main thread
fileInput.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  const data = await getImagePixels(file);

  imgWorker.postMessage({
    imageData: data,
    steps: ["enhance", "denoise", "autoContrast"],
  });
});

Users experience zero lag, even during computation-heavy tasks.

Real-Time Visualization with D3.js in Workers

Rendering large datasets with D3 or Chart.js often blocks the UI --- but
Web Workers fix that.
// chart-worker.js
self.importScripts("d3.min.js");

self.onmessage = (e) => {
  const { data, chartType, size } = e.data;

  const layout = calculateLayout(data, size);
  const paths = generateSVGPaths(layout, chartType);
  const stats = computeStats(data);

  self.postMessage({ layout, paths, stats });
};

Performance Results
Scenario               Traditional          Web Worker      Gain

100k Data Search       1200ms (UI freeze)   45ms (smooth)   ×26
4K Image Processing    2800ms               650ms           ×4.3
Complex Chart Render   850ms                180ms           ×4.7
Advanced Techniques
1. Worker Pool Manager
Avoid repeatedly creating and destroying workers:
class WorkerPool {
  constructor(script, size = 4) {
    this.queue = [];
    this.workers = Array(size).fill(0).map(() => new Worker(script));
  }

  runTask(payload) {
    const freeWorker = this.workers.pop();
    if (freeWorker) {
      freeWorker.postMessage(payload);
      this.workers.push(freeWorker);
    } else {
      this.queue.push(payload);
    }
  }
}

2. Zero-Copy Data Transfer
Use Transferable Objects for massive data arrays.
const buffer = new ArrayBuffer(50 * 1024 * 1024); // 50MB
worker.postMessage(buffer, [buffer]);

3. Graceful Error Handling
worker.onerror = (err) => {
  console.error("Worker error:", err);
  fallbackToMainThread();
};

When to Use Web Workers
Best suited for: - Big data filtering & sorting

Image / video processing
Real-time analytics
Encryption or AI inference

Avoid for: - Simple DOM manipulation

Small synchronous logic
Tasks needing frequent communication

Conclusion
Before rewriting your app or migrating frameworks, ask:
"Can I fix this with Web Workers?"
In most cases, the answer is yes.
This underrated API can transform performance with minimal code changes.
It's the smart, modern way to bring parallelism to the browser and
give users a truly smooth experience.
Web Workers embody the essence of smart optimization --- doing less on
the main thread and more in parallel.
Related articles

Basic Webpack 5 Project with CSS: Step-by-Step
Complete Beginner's Guide to Creating AI Applications with OpenAI
Bun Install vs Bun Add: Choosing the Right Command



Friday Links #31 — JavaScript Trends and Tools (Oct 31, 2025)
Fri, 31 Oct 2025 00:00:00 GMT
Welcome to Friday Links #31, your weekly roundup of the freshest updates in the JavaScript world. From emerging frameworks to powerful dev utilities and clever performance hacks, this week’s list spotlights tools that can make your workflow smoother and your apps faster. Whether you’re building front-end interfaces, optimizing bundles, or experimenting with AI integrations — there’s something here to inspire your next project.

DeepSeek V3.1 Tops AI Stock Trading Challenge — With Some Fine Print
A new open benchmark called AI-Trader is testing how well AI models can handle real-world stock trading. Each model starts with $10,000 and trades Nasdaq-100 stocks using real-time prices and financial news.
After the first month, DeepSeek v3.1 leads with a +16.46% return, followed by MiniMax-M2 (+12.03%), GPT-5 (+9.98%), and Claude 3.7 Sonnet (+9.8%).

Meanwhile, Qwen3-max earned +7.96%, and Gemini-2.5-Flash barely moved the needle at +0.48% despite the most trades.

For comparison, a passive QQQ ETF tracker gained +5.39%, proving DeepSeek’s picks weren’t just lucky — they were smart.


Important Context
Still, the experiment comes with caveats:

Simulated setup – models trade at the day’s opening price, not in real markets.
Possible data leaks – some news lacked timestamps, letting models see “future” info.
Short, bullish window – tech stocks like Nvidia and Microsoft dominated, inflating returns.

DeepSeek shows it can spot patterns and take confident bets, but calling it the best AI trader yet would be premature.
If the AI-Trader team adds hour-level trading and fixes data issues, it could become a reliable benchmark for evaluating how AIs handle risk, discipline, and adaptability in real financial markets.

📜 Articles & Tutorials
Build High-Quality, Domain-Specific Agents at 95% Lower Cost
State-based vs Signal-based rendering
Build Your Own Database
Context Inheritance in TanStack Router
Practical Caching Recipes for Next.js (App Router)
Conditional Border Radius with Modern CSS
GSoC 2025, Building a Semantic Search Engine for Any Video
Tanstack Directives and the Platform Boundary
Why developers are leaving Next.js for TanStack Start, and loving it
I Run a Full Linux Desktop in Docker Just Because I Can
⚒️ Tools
VSCode Vercel Extention
Jujutsu — a version control system
Workflow DevKit - A toolkit for building Vercel Workflow integrations
WebMCP - WebMCP allows a website to be an MCP server. No sharing API Keys. Use any model you want.
ASCII Drawing Board
Hono CLI - Command Line Interface for Hono framework
Typing SVG Generator
Explore color as we see it - A tool to visualize colors in the Oklch color space
Helium - Private, fast, and honest web browser
Handy - the free and open source app for speech to text
📚 Libs
Yaak - The most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 🦬
Ky - 🌳 Tiny & elegant JavaScript HTTP client based on the Fetch API
QGIS - QGIS is a free, open source, cross platform (lin/win/mac) geographical information system (GIS)
Ovi - Twin Backbone Cross-Modal Fusion for Audio-Video Generation
⌚ Releases
Vitest 4.0 is out!
Next.js 16 Released
Biome v2.3 Released
Bun v1.3.1 Released
Boa release v0.21
ESLint v9.38.0 released
Rspack 1.6.0 Beta 1
Storybook 10.0 Released — Major Update Adds Module Automocking, Next.js 16, Vitest 4, and Async Svelte Component Support
shadcn/ui 3.5 Released — Now Fully Compatible with Next.js 16
pnpm 10.20, Astro 5.15, uuidv47 v1.2.0
📺 Videos
Is this the end for Adobe?
The coolest feature of Hono
Next.js 16 Full Course | Build and Deploy a Production-Ready Full Stack App
I Will Never Use Shadcn Form Components Again
Cursor 2.0 is here... 5 things you didn't know it can do
React wants to win you back…
Master React 19.2 Async Everywhere — Boost Performance
WebAssembly might actually save web dev...
React Native Tutorial for Absolute Beginners - Build a Mobile App in 2 Hours
99% of Developers Don't Get PostgreSQL
Build Docker Images in a Git Repo but Only Committed Changes
The Standup - Jira Bought 2 Browsers???
🎤 Talks & Podcasts
<…


Zip-bombs vs Aggressive AI Crawlers: Defensive Tactics for Sites
Thu, 30 Oct 2025 00:00:00 GMT
Some site owners are reporting huge traffic spikes caused by crawlers, especially crawlers targeting web content for LLMs and RAG (retrieval-augmented generation). Fastly's analytics indicate that scrapers and fetchers can create peaks of up to 40,000 requests per minute. In 2025 scraper traffic rose roughly 87%, driven mostly by RAG-style scrapers rather than primary model training.

Today AI crawlers produce about 80% of AI-bot traffic on the web; the remaining 20% are fetchers that cause intense short‑term spikes. For example, ClaudeBot (Anthropic) reportedly sent 1M requests in a day to iFixit.com and 3.5M requests in four hours to Freelancer.com.

One of the most persistent bots among all is Facebook’s crawler.
<iframe width="560" height="315" src="https://www.youtube.com/embed/_N3l6h7bTWU?si=f2c1oUj_OE5zGM2K" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
This bot periodically changes its user-agent after previous ones are blocked.
Perplexity AI crawlers have also been observed operating outside their official IP ranges and ignoring the robots.txt directives.

Recognizing the problem
Common signs of problematic crawlers:

High sustained request rates (thousands per minute).
Rotating user‑agents after blocks.
Requests coming from unexpected IP ranges or ignoring robots.txt.
Requests that refuse compressed content (a potential sign of zip‑bomb probing).

Traditional defenses include rate limiting, CAPTCHAs, user‑agent filtering, IP reputation checks, and behavioural heuristics. There are also more aggressive or creative options — some administrators aim to make scraping expensive for the crawler operator rather than for themselves.
Proof-of-work challenges (client puzzles)
Some systems force clients to perform small computational puzzles, similar to Hashcash. The server issues a challenge; the client must return a value whose hash matches a difficulty rule (leading zeroes, for example). A Go‑style pseudo example:
calcString := fmt.Sprintf("%s%d", challenge, nonce)
calculated := internal.SHA256sum(calcString)

if subtle.ConstantTimeCompare([]byte(response), []byte(calculated)) != 1 {
    // reject
}

// compare the leading zeroes
if !strings.HasPrefix(response, strings.Repeat("0", rule.Challenge.Difficulty)) {
    // reject
}

The idea is to raise the compute or bandwidth cost for the crawler infrastructure. These puzzles are inspired by the old anti-spam system Hashcash. While they may deter casual crawlers, they are not foolproof and can be circumvented by determined actors or distributed infrastructures.
It’s believed that Anubis creates a noticeable computational load on AI data centers running crawlers. While it may not fully block their access, it effectively increases operational costs and slows down large-scale scraping attempts.
The project has earned over 14,100 stars on GitHub
, which indirectly reflects the number of websites using it for protection and its growing popularity among developers.
However, critics argue that the additional load is relatively insignificant for large-scale infrastructures and that the protection mechanism can be easily bypassed with distributed or adaptive crawler networks.

Fingerprinting and heuristics
Fingerprinting techniques can help identify non‑standard crawlers: odd user‑agent strings, refusal to accept compressed responses, unusual request patterns, or lack of human‑like JavaScript/browser behaviour. Fingerprinting is useful for routing suspicious traffic into specialized handling (throttling, challenge pages, or outright blocks).
Zip‑bombs as a defensive tactic
A zip‑bomb is a compressed payload crafted to expand massively when decompressed, exhausting CPU, memory, or disk on the client side. Site owners have started serving intentionally dense or highly repetitive content to make scraping expensive for crawlers that automatically decompress archives or HTML.
Examples used defensively include a 10 MB gzip that expands to ~10 GB of content:
$ dd if=/dev/zero bs=1M count=10240 | gzip -9 > 10G.gzip

Another example builds a valid but hugely repetitive HTML document (shell-ish pseudocode):
#!/bin/fish
# Base HTML
echo -n '<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Valid HTML bomb</title>...</head><body><!--'
# create chunk file
echo -n (string repeat --count 258 'H') >/tmp/H_258
# repeat the chunk many times
for i in (seq 507)
    cat (yes /tmp/H_258 | head --lines=81925)
end
cat (yes /tmp/H_258 | head --lines=81924)
# close comment and body
echo -n '--><p>This is a valid HTML bomb</p></body></html>'
# compress
$ fish zip_bomb.fish | gzip -9 > bomb.html.gz
$ du -sb bomb.html.gz
10180    bomb.html.gz

Because well‑behaved crawlers obey robots.txt, pages containing such payloads are normally disallowed. But crawlers that ignore robots.txt — including some AI crawlers — may still fetch them. Note that compressing repetitive content can reach extreme ratios (reported 1:1030 in some cases).
Some administrators create HTML bombs by streaming repeated tags; this can be done like:
(echo '<html><head></head><body>' && yes "<div>") | dd bs=1M count=10240 iflag=fullblock | gzip > bomb.html.gz

Important: these payloads can also break normal browsers and tools, so they must be placed carefully and never linked from public pages where real users might reach them by accident.
Although such protection methods can harm the overall health of the web, some webmasters still use them when bots generate more than 50% of total server load.
While older search engine crawlers typically respect robots.txt directives, newer AI crawlers often act far more destructively. For instance, one webmaster shared analytics charts showing how GPTBot from OpenAI consumed over 30 TB of traffic within a single month — meaning his entire website, totaling about 600 MB, was downloaded nearly 50,000 times.

Practical considerations and ethics

Effectiveness varies. Modern crawlers may bypass simple protections by ignoring compressed payloads, skipping disallowed paths, or parallelising decompression across many nodes. Researchers have shown that some defensive payloads are easy to work around.
Collateral damage. Zip‑bom…


Using URLPattern as a Framework-Free Router in Node 24
Tue, 28 Oct 2025 00:00:00 GMT
JavaScript finally got a native routing primitive that works the same way in both the browser and Node.js 24. The URLPattern API can now act as a framework-free router, handling route matching with named groups, strict validation, and consistent semantics everywhere.
In Node 24, URLPattern is available globally (no imports). You can define patterns once and reuse them in Service Workers or HTTP servers, all without external dependencies.

1. The Concept
URLPattern matches URLs by parts — protocol, hostname, port, pathname, search, and hash.

It supports named groups, case sensitivity, and a clean pattern syntax.
Examples:
// Named parameter with validation
new URLPattern({ pathname: '/users/:id([0-9]+)' });

// Optional subdomain
new URLPattern({ hostname: '{:sub.}?api.example.com' });

// Relative path resolved against a base
new URLPattern('../admin/*', 'https://example.com/app/');

Browser support is strong (Chrome, Firefox, Safari, Edge), and in Node 24 it’s built-in.

2. A Mini Router with URLPattern
Let’s build a tiny, type-safe router that works in Node and Service Workers — no frameworks, no globals, no dependencies.
// mini-router.js
export class PathRule {
  constructor({ method = 'GET', pattern, base, opts, handler, cast = {} }) {
    if (!pattern) throw new TypeError('Missing URL pattern');
    this.method = method.toUpperCase();
    this.pattern =
      typeof pattern === 'string'
        ? new URLPattern(pattern, base, opts)
        : new URLPattern(pattern, opts);
    this.handler = handler;
    this.cast = cast; // { key: fn(string) => any }
  }

  match(url, base) {
    if (!this.pattern.test(url, base)) return null;
    const result = this.pattern.exec(url, base);
    const params = Object.assign(
      {},
      result.protocol?.groups,
      result.hostname?.groups,
      result.port?.groups,
      result.pathname?.groups,
      result.search?.groups,
      result.hash?.groups
    );
    for (const [k, fn] of Object.entries(this.cast)) {
      if (params[k] != null) {
        const val = fn(params[k]);
        if (val === undefined) return null;
        params[k] = val;
      }
    }
    return { params, result };
  }
}

export class SmartRouter {
  constructor({ base } = {}) {
    this.routes = [];
    this.base = base;
  }

  register(ruleDef) {
    const rule = new PathRule(ruleDef);
    this.routes.push(rule);
    return this;
  }

  find({ url, method = 'GET' }) {
    const href = typeof url === 'string' ? url : url.href;
    const m = method.toUpperCase();
    for (const route of this.routes) {
      if (route.method !== m) continue;
      const match = route.match(href);
      if (match) return { route, ...match };
    }
    return null;
  }
}


3. Declaring Routes
Let’s define a small router with type-safe parameters.
// routes.js
import { SmartRouter } from './mini-router.js';

export function initRouter() {
  const r = new SmartRouter();

  // GET /health
  r.register({
    method: 'GET',
    pattern: { pathname: '/health' },
    handler: async () => new Response('ok', { status: 200 }),
  });

  // GET /users/:id
  r.register({
    method: 'GET',
    pattern: { pathname: '/users/:id([1-9][0-9]*)' },
    cast: {
      id: s => {
        const n = Number(s);
        return Number.isSafeInteger(n) ? n : undefined;
      },
    },
    handler: async ({ params }) => toJSON({ id: params.id }),
  });

  // GET /search?q&limit
  r.register({
    method: 'GET',
    pattern: { pathname: '/search', search: '?q=:q&limit=:limit([0-9]{1,2})' },
    cast: {
      limit: s => {
        const n = Number(s);
        return n >= 1 && n <= 50 ? n : 10;
      },
    },
    handler: async ({ url, params }) => {
      const q = params.q ?? url.searchParams.get('q') ?? '';
      const limit = params.limit ?? 10;
      return toJSON({ q, limit });
    },
  });

  return r;
}

function toJSON(obj, init = {}) {
  return new Response(JSON.stringify(obj), {
    headers: { 'content-type': 'application/json; charset=utf-8' },
    ...init,
  });
}


4. Using It in a Service Worker
// worker.js
import { initRouter } from './routes.js';
const router = initRouter();

self.addEventListener('fetch', e => {
  const req = e.request;
  const url = new URL(req.url);
  if (url.origin !== self.location.origin) return;

  const found = router.find({ url, method: req.method });
  if (!found) return;

  e.respondWith(processRequest(found, req, url));
});

async function processRequest(found, req, url) {
  try {
    const ctx = { request: req, url, params: found.params, match: found.result };
    const res = await found.route.handler(ctx);
    return sanitizeHeaders(res);
  } catch {
    return new Response('internal error', { status: 500 });
  }
}

function sanitizeHeaders(res) {
  const h = new Headers(res.headers);
  if (!h.has('cache-control')) h.set('cache-control', 'no-store');
  return new Response(res.body, { status: res.status, headers: h });
}


5. Using It in Node.js 24
// server.js
import http from 'node:http';
import { initRouter } from './routes.js';

const router = initRouter();
const BASE = process.env.BASE_ORIGIN || 'http://localhost';

const server = http.createServer(async (req, res) => {
  const url = new URL(req.url, BASE);
  const found = router.find({ url, method: req.method });

  if (!found) {
    res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
    res.end('not found');
    return;
  }

  try {
    const ctx = { request: req, url, params: found.params, match: found.result };
    const webRes = await found.route.handler(ctx);
    await respondNode(res, webRes);
  } catch {
    res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' });
    res.end('internal error');
  }
});

server.listen(3000, () => console.log('Server on http://localhost:3000'));

async function respondNode(res, webResponse) {
  const buffer = Buffer.from(await webResponse.arrayBuffer());
  const headers = Object.fromEntries(webResponse.headers.entries());
  res.writeHead(webResponse.status, headers);
  res.end(buffer);
}


6. Performance and Security Notes

Precompile once: reuse URLPattern instances instead of creating them per request.
Avoid unsafe regex input: do not accept user-supplied groups.
Enable ignoreCase only where appropriate.
In Node, always build absolute URLs — relative paths are invalid without a base origin.
In Service Workers, match only your own origin.

URLPattern may not beat optimized routers like find-my-way in raw performance, but it’s ideal for shared client-server logic and unified validation.

7. Example: Matching Hosts and Protocols
const proto = new URLPattern({ protocol: 'http{s}?' });
const host = new URLPattern({ hostname: '{:sub.}?example.com' });
const assets = new URLPattern({ pathname: '/static/*' });
const user = new URLPattern({ pathname: '/users/:id([1-9][0-9]*)' });
const search = new URLPattern({
  pathname: '/search',
  search: '?q=:q&limit=:limit([0-9]{1,2})',
});


8. Benchmark: URLPattern vs RegExp
// bench.js
const N = Number(process.env.N || 1_000_000);
const samples = [
  'http://localhost/users/1?active=1',
 …


The Hidden Power of return in JavaScript Constructors
Fri, 24 Oct 2025 00:00:00 GMT
Most JavaScript developers learn that constructors shouldn’t explicitly return anything. After all, constructors are supposed to create and initialize instances — not hand back arbitrary objects. But there’s a curious exception that’s both legal and powerful: a constructor can return its own function or class.
Let’s explore why this behavior exists, what it enables, and when it’s the only possible way to achieve a certain pattern in JavaScript.
The Basics: What Constructors Usually Return
By default, when you call a function with new, JavaScript implicitly returns the newly created object bound to this.
If the constructor returns an object, that object replaces the implicit one.
If it returns a primitive, JavaScript ignores it and still returns this.
function Example() {
  this.value = 42;
  return 7; // ignored
}

const instance = new Example();
console.log(instance.value); // 42

Only object returns matter — and that opens a subtle door.
The Rare Case: Returning a Function or Class
Functions and classes in JavaScript are objects, so they can be returned from constructors.
That means a constructor can itself produce a constructible function — an instance that can later be called with new again.
function FactoryConstructor() {
  const Inner = function () {
    console.log("Inner constructor called!");
  };

  // Inherit from the outer constructor
  Object.setPrototypeOf(Inner, this);
  return Inner;
}

const Custom = new FactoryConstructor();

console.log(Custom instanceof FactoryConstructor); // true

const innerInstance = new Custom(); // Works!

This creates a fascinating effect:
The instance of the constructor is itself a constructor.
You can now chain new twice — a concept rarely seen in real-world code but perfectly valid.
Why It Works
Object.setPrototypeOf(Inner, this) connects the inner function’s prototype chain to the original constructor’s prototype.
Without this line, instanceof checks would fail.
You can think of it like this:

The first new creates a function object (constructor).
The second new creates an instance of that returned function.

This makes the returned function an extension of the original constructor.
What If We Try Using Proxy Instead?
Some developers might attempt to use Proxy to simulate this dual-constructor behavior. Unfortunately, it doesn’t work:
"use strict";

function Ctor() {
  const proxy = new Proxy(this, {
    construct(target, args) {
      return new target(...args);
    }
  });
  return proxy;
}

const inst = new Ctor();

console.log(inst instanceof Ctor); // true

try {
  new inst();
} catch (err) {
  console.error(err.message);
  // TypeError: inst is not a constructor
}

Even with clever proxy traps, JavaScript doesn’t allow an ordinary instance to suddenly become constructible — unless it’s explicitly returned as a function or class object.
Real-World Application
This pattern might seem academic, but it has a few niche uses:


Dynamic Class Generation:
Creating specialized subclasses on demand that share a common prototype.
function ClassBuilder(name) {
  return class {
    constructor() {
      this.name = name;
    }
  };
}

const UserClass = new ClassBuilder("User");
const user = new UserClass();
console.log(user.name); // "User"



Self-constructing Factories:
Functions that produce new constructors with pre-bound behavior.
function Service(type) {
  const SubService = function (name) {
    this.type = type;
    this.name = name;
  };
  Object.setPrototypeOf(SubService, this);
  return SubService;
}

const Logger = new Service("logger");
const fileLogger = new Logger("FileLogger");

console.log(fileLogger instanceof Logger); // true
console.log(fileLogger.type); // "logger"



TypeScript Considerations
TypeScript doesn’t natively expect constructors to return something other than their instance type.
To make this pattern type-safe, you can define a generic return type:
function Builder<T extends object>(): new (...args: any[]) => T {
  const Inner = function () {} as any;
  return Inner;
}

It’s unusual but possible to express, and may be useful in advanced metaprogramming scenarios.
Key Takeaways

Returning a non-primitive value from a constructor replaces the default this.
Returning a function or class turns your constructor into a constructor factory.
Object.setPrototypeOf() can preserve prototype inheritance and instanceof checks.
This is the only way to make an instance that’s also constructible.

Final Thoughts
Most developers will never need this pattern — and that’s okay. But understanding it deepens your grasp of JavaScript’s object model and reveals just how flexible the language really is.
Sometimes the best way to learn is to find that one “impossible” question — and realize JavaScript already has a quirky, elegant answer.
Related articles

Understanding Big O Notation with JavaScript
Mastering Web Animations with Anime.js
Optimizing await fetch(): Why It Slows Down and How to Speed It Up



Logical Assignment Operators in JavaScript: Cleaner, Smarter Code
Fri, 24 Oct 2025 00:00:00 GMT
When working with JavaScript, we often check whether a variable has a value before assigning something new. These repetitive checks — especially when dealing with props, configuration objects, or component state — can clutter your code.
That’s where logical assignment operators come in. Introduced in ES2021, they allow you to perform conditional assignments in a concise and expressive way without changing the logic of your program.
If you want to learn more about safe assignment syntax in JavaScript, check out this related guide:

Safe Assignment Operator in JavaScript →
What Are Logical Assignment Operators?
Logical assignment operators combine standard logical operators (||, &&, ??) with the assignment operator (=):

||= — assign if the left-hand side is falsy
&&= — assign if the left-hand side is truthy
??= — assign if the left-hand side is null or undefined

They work similarly to normal logical expressions: the right-hand side is evaluated only if needed.

Note: The optional chaining operator (?.) cannot be used on the left side of logical assignment. Doing so will cause a SyntaxError.

1. OR Assignment (||=)
Assigns a value only if the variable is falsy (false, 0, "", null, undefined, or NaN):
user.theme ||= 'light';

Equivalent to:
if (!user.theme) {
  user.theme = 'light';
}

This is perfect for providing default values, but be cautious — values like 0, "", or false will be overwritten.
2. AND Assignment (&&=)
Assigns a value only if the variable is truthy:
user.isLoggedIn &&= checkPermissions(user);

Equivalent to:
if (user.isLoggedIn) {
  user.isLoggedIn = checkPermissions(user);
}

Be aware that the right-hand expression is always assigned, even if it evaluates to false:
let isEnabled = true;
isEnabled &&= false;
console.log(isEnabled); // false

3. Nullish Assignment (??=)
Assigns a value only if the variable is null or undefined:
settings.timeout ??= 3000;

Equivalent to:
if (settings.timeout === null || settings.timeout === undefined) {
  settings.timeout = 3000;
}

Unlike ||=, this preserves valid falsy values like 0, false, or "".
Using Logical Assignment with Component Props
These operators shine in component-based frameworks like React or Vue, where props often need default values:
props.title ||= 'Untitled';
props.visible ??= true;
props.theme &&= props.theme.toLowerCase();

Benefits:

Cleaner, shorter code
Fewer if or ternary expressions
More predictable handling of null, undefined, or falsy values

Examples:
props.showHelpText ??= true;     // Default value
config.apiBase ||= '/api/v1';    // Only set if not defined
formData.username &&= formData.username.trim(); // Update if exists

Things to Watch Out For
1. ||= Overwrites Falsy Values
let count = 0;
count ||= 10; // count becomes 10 — unexpected!

Use ??= if you want to preserve falsy but valid values.
2. Lazy Evaluation Prevents Side Effects
config.apiKey ||= fetchApiKey(); 
// fetchApiKey() runs only if apiKey is falsy

Example with Side Effects
let calls = 0;
let obj = { val: 0 };

obj.val ||= ++calls;
console.log(obj.val); // 1

obj.val ||= ++calls;
console.log(obj.val); // still 1

Explanation:

Initially, obj.val is 0 (falsy), so ++calls runs and assigns 1.
On the second line, obj.val is now truthy, so ++calls isn’t evaluated again.

Browser Support
Chrome 85+, Firefox 79+, Safari 14+, Edge 85+

Node.js 15+

Internet Explorer — not supported
If you need compatibility with older environments, use a transpiler like Babel with @babel/preset-env targeting ES2021.
Final Thoughts
Logical assignment operators may seem like small additions, but they make your JavaScript cleaner, more expressive, and easier to maintain.
They’re especially useful when:

Setting default props or state
Working with configuration objects
Writing form validation or cleanup logic

Once you start using ||=, &&=, and ??=, you’ll wonder how you ever wrote code without them.
Related articles

Understanding Big O Notation with JavaScript
Mastering Web Animations with Anime.js
Optimizing await fetch(): Why It Slows Down and How to Speed It Up

Operation	Description	Required Complexity
`get(key)`	Return the value associated with the key, or `-1` if not found. Also mark it as recently used.	O(1)
`put(key, value)`	Insert or update a value. If capacity is exceeded, remove the least recently used item.	O(1)

OOP Concept	React Equivalent
Class	Component
Method	Hook / handler
Dependency	Service / API
Composition	Component composition
Abstraction	Hook interface

Method	End-of-month safe	DST aware	Recommended
`+30 days`	No	No	Never
`setMonth`	Partial	Yes	Good
Custom safe function	Yes	Yes	Billing scenarios
`date-fns addMonths`	Yes	Yes	Most applications

Use Case	Approach
Billing	custom EOM logic
UI calendars	date-fns `addMonths`
Internal UTC timestamps	native `setMonth`
Finance	custom logic + UTC

Task	Function
UTC → local	`utcToZonedTime(utc, zone)`
Local → UTC	`zonedTimeToUtc(local, zone)`
Format	`format(date, pattern)`
Store	`date.toISOString()`

Concern	Ownership
UI behavior	Declarative configuration
UI rendering	Modal orchestrator
DOM structure	DOM utility layer
polling logic	polling helper
reactive state	Proxy-based tracker

Feature	Ripple	React	Vue 3	Svelte
State model	`track()` + `@`	Hooks	`ref()` / reactive	Stores
DOM updates	Fine-grained	VDOM diff	VDOM diff	Compile
Boilerplate	Very low	High	Medium	Low
CSS	Scoped	Modules	SFC Scoped	Scoped
AI-friendly	High	Medium	Medium	High
Runtime size	Small	Large	Medium	Tiny

Worker Type	Purpose	Thread	Use Case
Web Worker	CPU-heavy tasks	Worker thread pool	Sorting, cryptography
Shared Worker	Shared state across tabs	Shared worker thread	Multi-tab sync
Service Worker	Offline caching and request control	Background thread	PWAs, offline apps
Worklet	Real-time rendering	Rendering pipeline	CSS animation, audio processing

Operator	Use Case	Behavior
`EXISTS`	Check if subquery has any rows	Stops at the first match
`NOT EXISTS`	Check for missing relationships	Confirms no matches exist
`IN`	Compare values directly	Can be slower with large subquery sets
`LEFT JOIN ... IS NULL`	Alternative to `NOT EXISTS`	Watch for duplicates if joins fan out

JavaScript Development Space - Master JS and NodeJS

Howto Use IMask.js for Input Masking in JavaScript Forms

Introduction

Why Input Masking Is a Core UX Layer

What Makes IMask.js Different

Installation

Mental Model of IMask

Basic Example: Phone Input

Static Masks (Fixed Structure)

Dynamic Masks (Multiple Formats)

Number Mask (Currency & Prices)

Date Mask

Regex Mask

Function Mask (Full Control)

Real-World Example: Credit Card Detection

Events System

Advanced Configuration

React Integration

Common Pitfalls

1. Changing Value Directly

2. Autofill Conflicts

3. Mobile Input Issues

Best Practices

When NOT to Use Masking

Conclusion

Git for Beginners: Branches, Commits, and Your First Pull Request

Git Is Not Magic — It’s Just a Graph

Types of Git Branches

Main branches

Temporary branches

A simpler workflow for beginners

Creating Your First Branch

Naming Branches Correctly

Making Meaningful Commits

Creating the commit

Writing Good Commit Messages

Conventional Commits

Sending Code to GitHub

What Is a Pull Request?

Meet Effect TS: A New Way to Structure TypeScript Apps

Why Developers Are Trying Effect

1. Errors Become Part of the Type System

2. Dependency Injection Without Magic

3. Testing Becomes Much Simpler

4. Everything Is Designed to Compose

5. Gradual Adoption Is Possible

6. Concurrency Is Built Into the Model

7. A Rich Built-In Toolkit

8. Observability Is Built In

9. A Growing Ecosystem

10. Strong Type Feedback Helps AI Tools

The Core Idea: Effects

Creating Effects

Howto Deploy OpenClaw and Build Your Personal AI Second Brain

Why Use OpenClaw

Private Deployment

Tool Integration

Persistent Memory

Open Source

System Requirements

Verify Your Environment

macOS / Linux

Installation Method 1: One‑Step Installer

macOS / Linux

Windows (PowerShell)

Windows with WSL2 (Recommended)

Installation Method 2: Manual Installation

Clone Repository

Install Dependencies

Configure Workspace

Copy Configuration

Start Gateway

Docker Deployment

Configuring AI Models

Enabling Skills

Creating Your First Custom Skill

Troubleshooting

Port Already In Use

Conclusion

Friday Links #36 — JavaScript Ecosystem Weekly

Is `JSON.parse()` Actually Unsafe?

What about helpers like `tailwind-variants`?