Modern JavaScript keeps getting smaller.

Features that once required helper functions, verbose conditionals, or entire utility libraries are now built directly into the language. Yet many developers continue writing code the same way they did years ago.

The result is unnecessary boilerplate, harder-to-read logic, and bugs that modern syntax was designed to prevent.

This article covers ten JavaScript techniques that can dramatically reduce repetitive code while making applications easier to maintain. Each example includes practical advice and the most common mistakes developers still make.

Subscribe now

1. Optional Chaining Eliminates Nested Property Checks

Checking whether every nested property exists used to produce long, repetitive conditions.

Before

if (
  user &&
  user.profile &&
  user.profile.address &&
  user.profile.address.city
) {
  console.log(user.profile.address.city);
}

Modern JavaScript

console.log(user?.profile?.address?.city);

Optional chaining immediately returns undefined whenever one part of the chain is null or undefined.

The code becomes shorter and far easier to read.

Common mistake

Optional chaining only checks for null and undefined.

Values such as 0, false, and an empty string are perfectly valid and will continue through the chain.

2. Prefer ?? Instead of || for Default Values

One of the most common JavaScript bugs comes from using logical OR to provide defaults.

function setVolume(volume) {
  return volume || 50;
}

setVolume(0); // 50 ❌

Passing 0 should not reset the value.

Instead, use the nullish coalescing operator.

function setVolume(volume) {
  return volume ?? 50;
}

setVolume(0); // 0 ✅
setVolume(null); // 50
setVolume(undefined); // 50

Common mistake

?? cannot be mixed directly with || or &&.

This causes a syntax error:

// ❌
value || other ?? fallback;

Instead, group expressions explicitly.

(value || other) ?? fallback;

3. Learn the Logical Assignment Operators

Modern JavaScript combines assignment and conditional logic into a single operator.

settings.theme ??= "dark";
cache.enabled ||= true;
user.name &&= user.name.trim();

Each operator behaves differently.

let count = 0;

count ||= 10;
console.log(count); // 10

count = 0;

count ??= 10;
console.log(count); // 0

Quick reference

• ||= replaces falsy values.

• ??= replaces only null or undefined.

• &&= updates only truthy values.

Choosing the wrong operator often introduces subtle bugs around 0, false, and empty strings.

4. Use Object.prototype.toString.call() for Reliable Type Detection

typeof works well for primitives but quickly falls apart with complex objects.

typeof [];
// "object"

typeof null;
// "object"

A more reliable solution is:

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

getType([]);
// "Array"

getType(new Map());
// "Map"

getType(new Date());
// "Date"

getType(/js/);
// "RegExp"

This approach correctly distinguishes nearly every built-in JavaScript object.

When to use typeof

Use typeof for:

• string

• number

• bigint

• boolean

• symbol

• undefined

• function

Use Object.prototype.toString.call() when you need precise object types.

5. Always Use Array.isArray()

Checking arrays with instanceof can fail across browser windows or iframes.

value instanceof Array;

The safer solution is built into JavaScript.

Array.isArray(value);

It also avoids confusing array-like objects.

Array.isArray([]);
// true

Array.isArray({ length: 2 });
// false

Whenever you need to detect arrays, this should be your default choice.

6. ES Modules Already Implement the Singleton Pattern

Many projects still include unnecessary singleton classes.

class Config {
  static instance;

  static getInstance() {
    if (!this.instance) {
      this.instance = new Config();
    }

    return this.instance;
  }
}

In modern JavaScript, a module is loaded only once.

// config.js

export const config = {
  apiUrl: "/api",
  timeout: 5000,
};

import { config } from "./config.js";

Every import receives the same object.

No singleton boilerplate required.

Watch out

Exported objects remain mutable.

If multiple modules modify shared state, unexpected side effects can appear.

7. Replace Large if Statements with a Strategy Object

Long chains of conditions become difficult to maintain.

function calculate(type, a, b) {
  if (type === "add") return a + b;
  if (type === "subtract") return a - b;
  if (type === "multiply") return a * b;
  if (type === "divide") return a / b;

  throw new Error("Unknown operation");
}

A lookup table is cleaner.

const operations = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
};

function calculate(type, a, b) {
  const operation = operations[type];

  if (!operation) {
    throw new Error(`Unknown operation: ${type}`);
  }

  return operation(a, b);
}

Adding new functionality now means adding one new property instead of editing existing logic.

TypeScript tip

type Operation = keyof typeof operations;

function calculate(type: Operation, a: number, b: number) {
  return operations[type](a, b);
}

This catches invalid operation names before runtime.

8. Build a Tiny Event Emitter

The Observer pattern powers everything from UI events to state management.

A minimal implementation is surprisingly small.

class EventEmitter {
  #listeners = new Map();

  on(event, listener) {
    const list = this.#listeners.get(event) ?? [];

    list.push(listener);
    this.#listeners.set(event, list);
  }

  off(event, listener) {
    const list = this.#listeners.get(event);

    if (!list) return;

    this.#listeners.set(
      event,
      list.filter(fn => fn !== listener)
    );
  }

  emit(event, ...args) {
    for (const listener of this.#listeners.get(event) ?? []) {
      listener(...args);
    }
  }
}

Usage is simple.

const events = new EventEmitter();

events.on("login", user => {
  console.log(`${user.name} signed in`);
});

events.emit("login", {
  name: "Alex",
});

Common mistake

Always remove listeners when components are destroyed.

Forgotten subscriptions remain one of the most common causes of memory leaks.

9. Proxy Can Create Smarter Read-Only Objects

Object.freeze() freezes everything.

Proxy lets you intercept only the operations you care about.

function readonly(object) {
  return new Proxy(object, {
    set(_, property) {
      throw new Error(`${String(property)} is read-only`);
    },

    deleteProperty(_, property) {
      throw new Error(`${String(property)} cannot be deleted`);
    },
  });
}

const config = readonly({
  api: "/v1",
});

config.api = "/v2";
// Error

Common mistake

The original object is still mutable.

const original = {
  api: "/v1",
};

const safe = readonly(original);

original.api = "/v2";
// succeeds

Deep read-only protection requires recursively wrapping nested objects.

10. Decorate Functions Instead of Editing Them

Adding logging, timing, retries, or authorization directly into business logic quickly creates messy functions.

A higher-order function keeps concerns separate.

function withLogging(fn) {
  return (...args) => {
    console.time(fn.name);

    const result = fn(...args);

    console.timeEnd(fn.name);

    return result;
  };
}

const sum = withLogging((a, b) => a + b);

sum(10, 20);

The original function stays clean while additional behavior can be reused everywhere.

This technique is one of the foundations behind middleware, React higher-order components, and many modern frameworks.

Common mistake

Wrapping anonymous functions makes debugging harder because stack traces become less descriptive.

Whenever possible, decorate named functions instead.

function calculateTotal(price, tax) {
  return price + tax;
}

const loggedCalculateTotal = withLogging(calculateTotal);

Final Thoughts

Most JavaScript developers don’t need more libraries.

They need to make better use of the language they already have.

Optional chaining, nullish coalescing, logical assignment, lookup tables, modules, proxies, and decorators remove hundreds of lines of repetitive code across a typical project.

The biggest productivity improvement rarely comes from writing clever code.

It comes from letting modern JavaScript solve problems that developers used to solve manually.

There is a particular kind of modern frustration that did not exist five years ago. A person is in the middle of good work, the model is cooperating, ideas are landing, and then a message appears: limit reached, try again later. The work does not pause. It stops.

What makes it sting is not the limit itself. It is the ambush.

Nobody warned them. There was no meter creeping toward empty, no yellow light, no sense that the edge was close. Everything worked, and then it did not. For people who now run their days through AI tools, this has quietly become a recurring tax. Small each time, but paid over and over.

The meters exist. They are just scattered

Modern AI tools are not stingy. They are opaque.

Every provider tracks usage. Claude counts against five hour and weekly windows. Codex has its own rhythm. Cursor measures fast requests by the month. ChatGPT keeps separate ceilings for research, for images, for uploads. Perplexity limits Pro searches. Grok works in windows of its own.

The information is all there. It is simply spread across six dashboards, in six formats, speaking six dialects of the same idea. To hold a clear picture of where they stand, a person has to open every tab and assemble the answer by hand. Most people never do. They just work until something breaks, then react.

That is the gap. Not missing data, but missing a place to see it together.

A tool built out of one bad Friday

AI Karma Tracker started as one developer’s answer to that exact problem. It is a Chrome extension with a narrow job. It reads the real usage limits across the tools someone already uses, and it shows them in one place.

The numbers are live. Not decorative percentages, but the actual balance remaining and the time until it resets, read straight from sessions the person is already signed into. When a ceiling gets close, the extension says so in advance, which is the whole point. A warning an hour early turns a wall into a scheduling decision.

It also remembers. Small charts per provider mean that after a week, patterns emerge. The heavy days, the quiet ones, the hours when shared capacity tightens and limits burn faster than usual. Work starts getting planned around reality instead of colliding with it.

And it stays in its lane. The extension runs locally, in the browser. It does not ship usage data to a server, does not touch passwords or cookies or the contents of conversations. The design that makes it work, reading from sessions where the person is already logged in, is the same design that keeps their data on their own machine.

Who should ignore this

Plenty of people. Anyone who opens an AI tool a couple of times a week does not have this problem and does not need a fix for it.

The tool is for the other group. The ones who live inside these products. Whose code, writing, research, and images all pass through daily sessions. The ones who have felt that specific jolt of a limit landing at the worst possible moment, and who would happily trade a couple of dollars a month to never be surprised by it again.

There is a free tier for trying the idea on one tool, with no card and no signup. The paid tiers open up the full stack, the history, and alerts in Telegram, and they cancel anytime.

Where to find it

AI Karma Tracker is on the Chrome Web Store Plugins.

More about the project lives here.

The pitch is smaller than most software pitches, and that is on purpose. It does not promise to change how anyone works. It just removes one recurring, avoidable surprise, and hands back the quiet confidence of knowing, at a glance, exactly how much runway is left.

Another week, another wave of releases across the JavaScript ecosystem.

🧠 Language & Runtime Updates

TypeScript 7.0

The biggest release of the week is finally here. TypeScript 7 has officially landed, introducing the long-awaited Go-based compiler that’s designed to dramatically reduce compilation times, especially for large codebases.

It’s still early days, though. Much of the ecosystem continues to target TypeScript 6 while tooling authors update plugins, language servers, and build integrations. If you’re planning to upgrade, it’s worth checking compatibility with your existing toolchain first.

npm 12

npm has reached another major milestone with the release of version 12.

The new version includes CLI improvements, dependency management updates, performance refinements, and plenty of internal cleanup. While there aren’t many headline-grabbing features, it’s an important release that lays the groundwork for future improvements across the Node.js ecosystem.

Bun 1.3.14

Bun continues its rapid release cadence. Version 1.3.14 focuses primarily on bug fixes, compatibility improvements, and runtime performance.

The Bun team also published one of the most interesting engineering stories of the year: a detailed write-up explaining how the runtime is being rewritten from Zig to Rust using dozens of parallel Claude Code sessions. The Rust implementation will become the foundation of Bun 1.4.

Node.js 26.5.0

Node.js 26 continues to evolve with another feature-packed release. Version 26.5 adds support for importing text files using ESM import attributes, making it easier to work with non-JavaScript assets without custom loaders.

The release also introduces blob.textStream() along with several smaller improvements across the runtime, performance, and platform APIs.

📜 Articles & Tutorials

LiteRT.js, Google’s high performance Web AI Inference

6 security settings every GitHub maintainer should enable this week

How to Read Large JSON Files Without Losing Your Mind

Building Persistent Page Transitions with WebGPU and Vanilla JavaScript

SolidJS 2.0: A React Developer’s First Look at Signals and Async

Do we still need build tools?

How to create awesome staggered animations in CSS, Color.js v0.7.0

Password Hashing Done Right: Argon2, bcrypt, Salt and Pepper

Next.js Security Release and Our Next Patch Release

Mastering JavaScript String Algorithms

Observer vs Publish-Subscribe: What’s the Difference?

Master Docker Swarm with Real Production Examples

How to Design URLs: Routing, Query Parameters, and Fragments

⚒️ Tools

HTML Formatter Online - A simple online tool for formatting and beautifying HTML code. It supports various formatting options, including indentation styles, line breaks, and attribute sorting, making it easy to clean up messy HTML code.

Babylon Lite: A Fresh Take on Babylon.js — What if the Babylon.js team could rebuild their 3D engine from scratch today? That’s exactly the idea behind Babylon Lite. Designed exclusively for WebGPU, the new engine is significantly smaller and faster than the original, thanks to a cleaner architecture and the removal of years of legacy compatibility. The trade-off is that some features haven’t made the jump yet, but Babylon Lite offers a glimpse of what the next generation of web-based 3D engines could look like.

HYPERBLAM lets you make music with HTML

web-ext 10.5 - A command line tool to help build, run, and test web extensions

WordPalette – Generate a brand palette and visual identity from a word or image

Blur and Unblur Faces – A simple web tool that uses AI to blur or unblur faces in images. It can be useful for privacy protection, content moderation, or creative effects.

eslint-node-test — An ESLint plugin that catches common mistakes and enforces best practices when writing tests with Node.js’s built-in node:test runner.

Nub — A TypeScript-first toolchain that runs TypeScript files, package.json scripts, and local CLIs using your existing Node.js installation, with no custom runtime or vendor lock-in.

DepsGuard — A native cross-platform security tool that scans and hardens npm, pnpm, Yarn, Bun, uv, pip, and Poetry configurations to reduce supply chain risks with a single command and zero dependencies.

📚 Libs

tailwindcss-motion - A new animation library for Tailwind CSS that adds more than 20 ready-to-use animations with a simple drop-in setup. Every effect can be previewed, tweaked, and customized directly in the browser, and the project even includes a visual animation builder for creating your own motion presets without writing complex CSS.

Flue - The Open Agent Framework. Build durable AI agents and workflows with Flue’s programmable TypeScript harness. Write once, deploy anywhere, use any LLM.

CrustJS — A lightweight, dependency-free CLI framework built specifically for Bun and written with a TypeScript-first approach. It features a fluent builder API, composable modules, and a modern developer experience, making it easy to build fast, maintainable command-line applications without pulling in a large dependency tree.

Gea — A compiler-first UI framework that shifts most of the work to build time instead of runtime. Rather than relying on a virtual DOM, hooks, or signals, Gea analyzes ordinary classes and functions during compilation and generates highly targeted DOM updates. The result is a lightweight runtime with minimal overhead while letting developers write familiar JavaScript and TypeScript code.

eve — A framework for building AI agents with a Next.js-like developer experience, combining Markdown-based instructions, TypeScript tools, and durable execution by default.

Wely — A lightweight Web Components framework with a single defineComponent() API, offering a simple, framework-agnostic way to build reusable UI components.

SVAR React Gantt — A modern React Gantt chart component for building everything from simple project timelines to complex enterprise scheduling applications.

GraalVM - compiles applications into native executables that start instantly, scale fast, and use fewer compute resources 🚀

⌚ Releases

Storybook 10.5 focuses on polishing the developer experience. The release includes performance optimizations, workflow improvements, and a number of fixes that make component development faster and more reliable.

Vite DevTools 0.4 - The official Vite DevTools continue to mature. Version 0.4 delivers a smoother debugging experience, additional inspector capabilities, and numerous quality-of-life improvements for Vite developers.

The project is quickly becoming one of the most useful additions to the Vite ecosystem.

ESLint v10.7.0 released

np 12.0 - A better npm publish

Fuse.js 7.5, Nano ID 6.0, HyperExpress 7.0, Helmet 8.3, node-auth0 6.0, React Router 8.2, React Email 6.7

JWT Handbook – A Complete Knowledge Base for Developers and LLMs

📺 Videos

I finally used GSAP… and I get the hype now

The Outbox Pattern Explained (Complete Guide)

What we can learn from the Bun Rust rewrite

DuckDB is becoming unstoppable…

Every Data Structure Simply Explained in 25 Minutes

Redis will finally make sense after this video

HTMX vs React: The honest verdict (with receipts)!

This Rust Rewrite Passes 100% of PostgreSQL’s Tests (pgrust)

Claude Code Crash Course For Developers

🗞️ News & Updates

Claude Code Now Uses AI Agent Teams for Code Reviews

Anthropic has redesigned Code Review in Claude Code, replacing a single reasoning-heavy review with a multi-agent pipeline that scales from quick local checks to distributed cloud analysis.

Instead of simply increasing how long the model “thinks,” Claude Code now offers five review levels: Low, Medium, High, X-high, and Ultra. Developers can choose a mode manually (for example, /code-review high) or let Claude select the most appropriate level automatically.

Low performs a fast pass over the modified files. Medium expands the review to the entire project, searches the repository for related code, and verifies potential issues before reporting them.

The biggest architectural change starts with High. Rather than relying on a single model session, Claude delegates bug discovery and validation to multiple independent AI agents, each working with a fresh context. This helps reduce anchoring bias, where a model is more likely to defend code it recently generated itself.

X-high goes a step further by analyzing how a change could affect the rest of the codebase instead of focusing only on the current diff.

The new Ultra mode runs in a cloud sandbox. Claude Code clones the repository or GitHub pull request, launches a team of specialized AI reviewers, and independently reproduces every reported issue before including it in the final report.

Ultra is currently available as a Research Preview. Pro and Max subscribers receive three free reviews, after which each run typically costs $5–20, depending on the size of the changes.

According to Anthropic’s internal benchmarks, review quality improves steadily as the analysis becomes more sophisticated. Using Claude Opus 4.8, the system detected roughly 17% of labeled bugs in Low mode, 22% in Medium, 24% in High, and 25% in X-high. Anthropic also reports that a competing system achieved between 8% and 12% on the same benchmark.

The company says Ultra Review is already being used internally to review every pull request before changes are merged.

Rather than relying solely on larger language models, Anthropic is betting on agent-based software engineering, where multiple specialized AI reviewers collaborate to analyze, validate, and verify code before it reaches production. This approach could become the next major step in AI-assisted development.

That’s a wrap for Friday Links #41.

The JavaScript ecosystem continues to move at an incredible pace. New runtimes are getting faster, AI coding workflows are becoming more sophisticated, and the tooling around TypeScript and modern web development keeps improving almost every week.

We’ll be back next Friday with another curated collection of the most interesting releases, libraries, engineering articles, and AI tools. Until then, happy coding, and don’t forget to star the projects you find useful.

For years, browser automation has usually meant reaching for Puppeteer or Playwright. They’re incredibly powerful, but they also come with a price: large Chromium downloads, extra dependencies, platform-specific setup, and a lot of boilerplate before you can accomplish something simple.

With Bun, there’s now another option.

Bun.WebView is an experimental API built directly into Bun that provides a lightweight way to automate browsers, capture screenshots, execute JavaScript, and simulate real user interactions—all without installing another npm package.

Taking a Screenshot in Three Lines

Getting a screenshot of a webpage really is this simple:

await using view = new Bun.WebView();

await view.navigate("https://example.com");

await Bun.write(
  "page.png",
  await view.screenshot(),
);

Run it:

bun run demo.ts

That’s it.

No Puppeteer installation.

No Chromium download.

No browser launch configuration.

Why Bun.WebView Exists

Many developers only need to:

• capture screenshots

• scrape page content

• test UI interactions

• automate repetitive browser tasks
  

Yet a typical Puppeteer setup often involves:

• installing another package

• downloading hundreds of megabytes of Chromium

• dealing with missing Linux dependencies

• waiting for browsers to launch

Bun.WebView aims to remove that friction.

Because it’s built directly into Bun, there’s nothing extra to install.

Platform Support

Bun uses native browser engines whenever possible.

macOS

Uses the system WKWebView.

No configuration required.

Windows & Linux

Bun automatically searches for installed versions of:

• Chrome

• Chromium

• Microsoft Edge

In most cases it simply works.

Install Bun

You’ll need Bun 1.3.12 or newer.

curl -fsSL https://bun.sh/install | bash

bun --version

Then simply execute your script:

bun run demo.ts

Running JavaScript Inside the Page

You can evaluate JavaScript directly in the loaded document.

const view = new Bun.WebView();

await view.navigate("https://example.com");

const title = await view.evaluate(
  "document.title",
);

console.log(title);

evaluate() automatically:

• executes JavaScript

• waits for Promises

• serializes the returned value

Fetching API data becomes trivial:

const posts = await view.evaluate(`
  fetch("/api/posts")
    .then(res => res.json())
`);

No manual serialization is required.

Simulating Real User Actions

Bun.WebView generates native browser input events.

Clicking an element:

await view.click("input[name='search']");

Typing text:

await view.type("Bun WebView");

Pressing keyboard shortcuts:

await view.press("Enter");

Unlike directly changing input.value, these generate actual keyboard events.

That means frameworks like:

• React

• Vue

• Svelte

receive normal user input events exactly as if someone were typing.

Advanced Click Options

Double-click while holding Shift:

await view.click("a.article", {
  button: "left",
  count: 2,
  modifiers: ["Shift"],
  timeout: 5000,
});

Bun automatically waits until the element:

• exists

• is visible

• is stable

• isn’t covered by another element

before clicking.

Scrolling and Window Resizing

Scrolling the page:

await view.scroll(0, 600);

Changing browser dimensions:

await view.resize(1920, 1080);

Useful when testing responsive layouts or generating screenshots at multiple resolutions.

Capturing Screenshots

Entire Page

await Bun.write(
  "full.png",
  await view.screenshot({
    format: "png",
    fullPage: true,
  }),
);

Specific Elements

Capture only one component:

const hero = await view.screenshot({
  selector: "header.hero",
  format: "jpeg",
  quality: 85,
});

await Bun.write("hero.jpg", hero);

Supported formats include:

• PNG

• JPEG

• WebP

WebP files are typically much smaller than equivalent PNG images while maintaining excellent quality.

Choosing a Browser Manually

If automatic browser detection doesn’t find Chrome, specify it yourself.

const view = new Bun.WebView({
  backend: {
    type: "chrome",
    path: "/usr/bin/google-chrome",
  },
});

Reusing an Existing Chrome Instance

If you’re already debugging Chrome:

chrome --remote-debugging-port=9222

Connect directly:

const view = new Bun.WebView({
  backend: {
    type: "chrome",
    url: "ws://127.0.0.1:9222/devtools/browser/xxx",
  },
});

Keeping Chrome running between executions can significantly reduce startup time during development.

Scraping Multiple Pages

Here’s a simple crawler that collects page titles.

const urls = [
  "https://bun.sh/blog",
  "https://bun.sh/docs",
  "https://bun.sh/docs/cli/run",
];

await using view = new Bun.WebView();

for (const url of urls) {
  await view.navigate(url);

  const title = await view.evaluate(`
    document.querySelector("h1")?.textContent
      || document.title
  `);

  console.log(`${url} → ${title}`);
}

Multiple WebView instances share the same browser subprocess, making them much lighter than launching separate browser instances.

Persisting Login Sessions

Need cookies to survive between runs?

Simply specify a data directory.

const view = new Bun.WebView({
  dataStore: {
    directory: "./browser-profile",
  },
});

Bun automatically preserves:

• cookies

• localStorage

• browser storage

Log in once, and future runs reuse the same session.

Capturing Browser Console Output

Debugging frontend code becomes much easier.

const view = new Bun.WebView({
  console(type, ...args) {
    console.log(`[${type}]`, ...args);
  },
});

This captures:

• console.log

• console.warn

• console.error

directly from the webpage.

Using Chrome DevTools Protocol

Need lower-level browser control?

Bun exposes the Chrome DevTools Protocol (CDP).

Execute a command:

const metrics = await view.cdp(
  "Page.getLayoutMetrics",
);

console.log(metrics);

Subscribe to browser events:

const unsubscribe = view.cdpSubscribe(
  "Network.requestWillBeSent",
  ({ request }) => {
    console.log(request.url);
  },
);

await view.navigate("https://example.com");

unsubscribe();

With CDP you can build advanced tooling for:

• network inspection

• performance profiling

• cookie management

• browser instrumentation

• request monitoring

Things to Keep in Mind

Bun.WebView is currently experimental, so expect the API to evolve as Bun continues development.

Before using it:

• install Bun 1.3.12 or newer

• ensure Chrome (or Chromium/Edge) is installed on Linux

• remember that macOS uses the built-in WebKit engine automatically

One more important detail: browser sessions create temporary directories. If you don’t dispose of a WebView, those temporary files can accumulate over time.

Using:

await using view = new Bun.WebView();

ensures the browser is cleaned up automatically when execution finishes.

Final Thoughts

Bun.WebView isn’t trying to replace mature automation frameworks like Puppeteer or Playwright for complex end-to-end testing. Instead, it targets a different sweet spot: everyday browser automation with almost no setup.

For quick scripts, screenshots, scraping, or lightweight UI automation, the developer experience is refreshingly simple. If you’re already using Bun, you can start experimenting immediately—no extra packages, no massive browser downloads, and only a handful of lines to get real work done.

While the API is still experimental, it’s an exciting glimpse at how browser automation could become a first-class feature of modern JavaScript runtimes.

Welcome to Friday Links #40.

The JavaScript ecosystem continues to move at an incredible pace, with new libraries, framework updates, open-source releases, and AI-powered developer tools appearing almost every day. Keeping up with everything can be challenging, so we’ve gathered the most interesting announcements, projects, articles, and resources from the past two weeks into one place.

Whether you’re looking for something new to use in production, an open-source project to explore, or simply a few good engineering reads for the weekend, there’s plenty to discover in this edition.

📜 Articles & Tutorials

A former Microsoft engineer has rebuilt Notepad, and it’s 2.5KB in size and has zero AI bloat

The Goldilocks customizable select height

Different hydration and rendering strategies

Introducing the <usermedia> HTML element

The Shifting Line Between CSS States and JavaScript Events

Experimenting with random() in CSS

An animated radial gradient mask over text in CSS

WebGL without a GPU

Grid algorithm adventures

Actions steps can now be run in parallel

Announcing Genkit Agents: A full-stack foundation for conversational AI

VSCode - Iterating faster with TypeScript 7

How to Read Large JSON Files Without Losing Your Mind

⚒️ Tools

JSON Formatter - A simple and fast JSON formatter and validator for developers. It can format, validate, and beautify JSON data in a user-friendly interface.

JSON Handbook

Recall - fully-local project memory for Claude Code

Orca - is the ADE for working with a fleet of parallel agents. Run any coding agent with your own subscription. Available on desktop and mobile.

Infographic - An Infographic Generation and Rendering Framework, bring words to life with AI!

Drawbridge - Design editor for Claude Code and Cursor. “Figma Comments” for the browser, are sent directly to Claude Code and Cursor as prompts.

Claude HUD - A Claude Code plugin that shows what’s happening — context usage, active tools, running agents, and todo progress. Always visible below your input.

Lore - Lore is a next-generation, open source version control system

📚 Libs

DaloyJS - The secure TypeScript API framework that runs anywhere

pdfme - Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities.

hiraki - A zero-dependency React drawer component. All 4 directions, velocity-aware gestures, snap points, 6 variants, and a pure CSS animation system without Radix, Framer Motion, or any external runtime dependencies.

Gridland - Terminal apps that run anywhere - even the browser!

rari - High-performance React Server Components framework powered by a Rust runtime, delivering 18.1x faster response times (0.12ms vs 2.17ms) and 67.4x higher throughput (97,826 vs 1,452 req/sec) than Next.js with zero-config setup.

Mantic.sh - A structural code search engine for Al agents.

ArtPlayer - ArtPlayer.js is a modern and full featured HTML5 video player

<qr-code> - Web Component for generating QR Codes

whatwg-url - An implementation of the WHATWG URL Standard in JavaScript

⌚ Releases

Astro 7.0 Released

Astro 7 is the biggest release since Astro 5, with a strong focus on build performance and AI-powered workflows. The framework now ships with Vite 8, a brand-new Rust-based .astro compiler, Rust-powered Markdown/MDX processing, queued rendering, and stable route caching. The Astro team reports 15–61% faster builds, with some large documentation sites building more than twice as fast. Astro 7 also introduces Advanced Routing, astro dev —background for AI coding agents, and structured JSON logging.

Announcing Angular v22

Intelligent Terminal 0.1.1 is here: bash support, new slash commands, and more customization

Vite 8.1 is out!

Node.js 26.4.0 (Current)

Announcing Rspack 2.1

React Hook Form v7.80, React Native v0.86, Motion v12.40, Electron 43, Next.js 16.3: Instant Navigations, React-Router 8.1

Announcing Rspack 2.1, nuqs 2.9, RedwoodSDK 1.5, Prettier 3.9, Deno 2.9, Webpack 5.108, ESLint v10.6.0 released

Highlights from Git 2.55

📺 Videos

NestJS Full Course for Beginners in 2026 | Build a Production-Ready API

Modern UI Patterns - Una Kravets - CSS Day 2026

Postgres Replicas Explained

Linus Torvalds: AI Can’t Think Like a Programmer

99% of Developers Don’t Get WebSockets

Local AI Coding is Finally Good Enough

The Real Reason Discord Left Cassandra

The most trusted code on Earth is being rewritten in Rust

Midjourney has a new side quest… death

Software Architecture’s Biggest Enemy (Not What You Think)

Command Line Basics for Beginners - Full Course

🗞️ News & Updates

California Just Plugged Its Government Into Claude

On June 29, 2026, Governor Gavin Newsom’s office announced that California is making Anthropic’s Claude available across state government.

Every state agency can now access Claude through a shared government IT portal at a 50% discount. The same deal extends to cities and counties, with Anthropic also providing staff training and workflow support.

The state says this is its first AI productivity tool available to all agencies. The DMV is already using Claude to reduce customer service wait times, while health and human services teams are testing it in Medicaid-related workflows.

Newsom framed the move carefully: AI should not replace government workers, but help them work faster.

The interesting part is not just the discount. It is the strategy.

California is doing what many organizations should probably do: choose one model, put it behind a single access point, train people properly, and define a clear rule for how it should be used. That is much better than letting every department experiment with random tools in isolation.

But there is a tradeoff.

Once workflows, documents, support systems, and internal habits are built around one model, switching becomes harder. The vendor is no longer just a tool provider. It becomes part of the operating system.

That does not mean California made a bad move. A 50% statewide deal plus training is valuable. But every good enterprise AI deal also creates dependency.

The real lesson is simple: standardize the model, but own the system around it.

Your prompts, processes, escalation rules, knowledge base, audits, and workflow design should belong to you. The model underneath may change, get more expensive, become outdated, or be replaced by something better.

Claude may be the engine today. Tomorrow it could be another model.

The organizations that win will not be the ones that merely “use AI.” They will be the ones that build an operational layer strong enough to survive the model changing underneath it.

That wraps up Friday Links #40.

As always, if you discover a project you like, consider starring it on GitHub, supporting the maintainers, or sharing it with your team. Open source grows because developers contribute, provide feedback, and spread the word.

Thanks for reading, have a great weekend, and we’ll be back soon with another collection of the best JavaScript news, libraries, tools, and AI developments in Friday Links #41.

AI coding assistants have become a permanent part of modern software development.

Developers use them to generate boilerplate, write tests, create database queries, refactor legacy systems, and even implement entire features. According to recent industry surveys, the majority of engineers now rely on AI tools in some form during their daily workflow.

Yet many teams are learning an uncomfortable lesson:

The biggest risk of AI-generated code is not obvious bugs.

The real danger is code that looks correct.

It passes review.

It passes CI.

It passes automated tests.

And then it fails in production.

The problem isn’t that AI is inherently unreliable. The problem is that most development processes were designed for humans and have not yet adapted to AI-generated output.

What follows are eight recurring anti-patterns that appear across teams using AI-assisted development—and practical ways to prevent them before they become expensive incidents.

1. Automation Bias

The first trap is psychological.

When developers know that code was generated by an AI assistant, they often review it differently.

The pull request looks clean.

Variable names follow conventions.

Formatting is perfect.

Nothing immediately appears suspicious.

As a result, reviewers unconsciously assume the implementation is safe.

This phenomenon is known as automation bias—the tendency to trust automated systems more than our own judgment.

Unfortunately, clean syntax does not guarantee correct behavior.

An AI-generated implementation may still contain subtle authorization flaws, incomplete validation logic, unsafe assumptions, or incorrect business rules.

The solution is simple:

AI-generated code should receive more scrutiny, not less.

Teams should explicitly review business logic, data handling, and security-critical paths regardless of how polished the code appears.

2. Hallucinated Dependencies

One of the most dangerous AI failure modes has little to do with code itself.

It involves packages.

AI models occasionally invent dependency names that sound legitimate.

Developers see an import statement or installation command, assume the package exists, and continue.

Attackers have already realized this creates an opportunity.

If an AI repeatedly invents the same package name, someone can register that package and distribute malicious code through it.

This attack pattern has become known as slopsquatting.

The defense is process-driven:

• Verify every new dependency.

• Require human approval for package installation.

• Use lockfiles and integrity verification.

• Review package provenance, maintainers, download history, and signatures.

Treat AI-suggested dependencies exactly as you would treat links received from an unknown sender.

3. Tests That Verify Nothing

Coverage is one of the most misunderstood metrics in software engineering.

AI-generated tests often maximize coverage numbers while minimizing actual verification.

Common patterns include:

• Assertions that only check for non-null values.

• Tests that merely verify execution completed.

• Excessive mocking.

• Snapshot tests that preserve incorrect behavior.

The result is a green pipeline that provides false confidence.

Effective tests validate business behavior, edge cases, and expected outcomes.

A useful technique is mutation testing:

Intentionally break the implementation.

If no test fails, the test suite is providing little protection.

4. Using AI Where Verification Is Expensive

AI performs best when the generated output is easy to verify.

Problems emerge when teams apply it to areas where correctness is difficult to validate.

Examples include:

• Financial calculations

• Concurrency systems

• Security controls

• Database optimization

• Distributed infrastructure

The issue isn’t model capability.

The issue is verification cost.

If validating correctness requires deep expertise, AI should be treated as a brainstorming tool rather than a source of truth.

5. Scope Creep and Interface Drift

Most developers have experienced this.

A simple request becomes:

“While we’re here, let’s improve this.”

Then:

“Let’s refactor this section too.”

A small change gradually becomes a massive pull request spanning multiple modules.

AI assistants encourage this behavior because they naturally suggest additional improvements.

The result is larger diffs, reduced review quality, and increased risk.

The fix is disciplined scoping:

One problem.

One change.

One pull request.

6. Mock Data That Reaches Production

Mock data is useful during development.

It becomes dangerous when it survives deployment.

AI-generated prototypes frequently contain placeholder values, fake responses, and temporary shortcuts.

Because everything appears to work locally, these artifacts are easy to overlook.

Teams should establish automated checks that detect temporary markers and prevent them from reaching production environments.

If a feature has only been validated against mocks, it has not truly been validated.

7. Context Rot

AI assistants do not remember project rules the way humans do.

In long conversations, earlier constraints gradually lose influence.

Toward the end of a session, the model may begin suggesting:

• Deprecated APIs

• Old architecture patterns

• Previously rejected solutions

The longer the interaction, the more likely this becomes.

Successful teams avoid relying on conversational memory.

Instead, they store critical rules in persistent project documentation such as:

• CLAUDE.md

• AGENTS.md

• Cursor rules

• Architecture guides

The source of truth should live outside the chat.

8. Architecture Built One Prompt at a Time

Perhaps the most subtle AI anti-pattern is architectural degradation.

Every pull request looks reasonable.

Every function appears well written.

Yet over time the system becomes increasingly fragmented.

Why?

Because AI optimizes locally.

Architecture requires global thinking.

Without explicit boundaries, systems slowly drift toward:

• God services

• Duplicate logic

• Blurred module ownership

• Increasing coupling

This is why architectural decisions should be documented and reviewed independently of feature implementation.

AI can build inside boundaries.

Humans must define those boundaries.

Conclusion

The biggest misconception about AI-generated code is that its primary risk is bad code.

In reality, its greatest danger is believable code.

Code that looks professional.

Code that feels finished.

Code that earns quick approval.

Modern engineering is no longer about generating software faster.

AI already does that.

The new challenge is determining which generated changes deserve trust.

The strongest teams are not the ones using the most AI.

They are the ones that have built the best systems for questioning it.

Another packed week across the JavaScript ecosystem.

TypeScript continues its transition toward a faster future, AI tooling shows up in more developer workflows, and open-source maintainers keep shipping new libraries, utilities, and experiments at an impressive pace.

This edition covers the most interesting releases, articles, tools, and discussions from the past week—from frontend development and backend runtimes to AI-assisted engineering and developer productivity.

Whether you’re building with React, Node.js, TypeScript, Astro, or the latest AI tools, there’s something here worth bookmarking.

🧠 Language & Runtime Updates

TypeScript 7.0 Beta Continues To Generate Excitement

The TypeScript team continues refining TypeScript 7.0 and its new Go-based compiler architecture. Early benchmarks and community testing suggest substantial performance improvements for large codebases, monorepos, and editor tooling. The transition marks one of the most significant architectural changes in TypeScript’s history.

VoidZero Joins Cloudflare

One of the biggest JavaScript ecosystem stories this week: the team behind Vite, Rolldown, Oxc, Vitest, and VoidZero is joining Cloudflare. The move could accelerate development across the next generation of JavaScript tooling and infrastructure.

The Cloudflare Blog

npm 12 Will Disable Install Scripts By Default

npm is preparing a major security-focused change. Future versions will no longer execute preinstall, install, and postinstall scripts automatically by default. The goal is to reduce supply-chain attack risks and improve package installation security.

Node.js Security Releases Land Across Multiple Branches

Node.js shipped security updates for multiple active release lines, including fixes for high-severity vulnerabilities. Teams running production workloads should review the latest security advisories and update accordingly.

rfcs

Node.js 24 Continues To Improve Developer Experience

Recent updates to Node.js 24 introduced support for UUID v7 generation, additional testing utilities, and improvements across the platform. The project continues pushing toward a more batteries-included developer experience.

Node.js Security Releases Land Across Multiple Versions

The Node.js team released security updates across several supported release lines, including Node.js 22, 24, and 26. The updates address multiple high-severity vulnerabilities affecting core dependencies and runtime components. Teams running production workloads should review the advisories and upgrade as soon as possible to ensure their applications remain protected.

Node.js Security Releases

📜 Articles & Tutorials

How to Build ChatGPT From Scratch: Understanding LLMs Step by Step

TypeScript Performance in TanStack Table V9

Introducing eve, an open-source agent framework

How to Use Lazy Loading Without Hurting Web Performance

An Interactive Cover Component

Streaming HTML

A backdoor in a LinkedIn job offer

The problem with useEffect

AI-assisted engineers are burning out, is this fine?

How To Make Your Design System AI-Ready

Introducing the MDN MCP server

Software Is Made Between Commits

⚒️ Tools

NextWeekAI - Curated directory of cutting-edge AI tools.

View Transitions Toolkit

A collection of utility functions to more easily work with View Transitions.

eslint-plugin-unicorn 67.0 - Adds Even More Ways to Improve Your Code

Nodemailer 9.0 Tightens Email Security in Node.js

Nodemailer 9.0 is out, bringing updates to one of the most widely used email libraries in the Node.js ecosystem. The package continues to support SMTP, Amazon SES, and Sendmail-based delivery, while version 9.0 adds a notable security improvement: TLS connections are now validated by default when fetching remote content. For projects that generate rich emails with external assets, this is a small but important hardening update.

Tabulator 6.5 - Easy to use, simple to code, fully featured, interactive JavaScript tables and data grids.

<relative-time> element - Web component extensions to the standard <time> element.

MiniPixelFont generator

React Foundation Launches to Support the Future of React

The newly announced React Foundation aims to provide long-term sustainability for one of the world’s most widely used frontend ecosystems. The organization introduces a community-driven governance model focused on transparent decision-making, direct funding for maintainers, and financial support for critical open-source projects. By creating a dedicated foundation, the React community hopes to ensure the continued health, stability, and growth of the ecosystem for years to come.

Is Your Site Agent-Ready? - A simple tool to check if your website is ready for AI agents.

Taste Skill - Helps frontend projects escape the generic SaaS look

Gemma Gem - Your personal AI assistant living right inside the browser. Gemma Gem runs Google’s Gemma 4 model entirely on-device via WebGPU — no API keys, no cloud, no data leaving your machine. It can read pages, click buttons, fill forms, run JavaScript, and answer questions about any site you visit.

Desktop Commander MCP - This is MCP server for Claude that gives it terminal control, file system search and diff file editing capabilities

DepsGuard - Hardens Package Manager Configs Against Supply-Chain Attacks

📚 Libs

zod-compiler Brings Zero-Overhead Validation to Zod

zod-compiler is a new build-time optimization tool that transforms existing Zod schemas into highly optimized validators during bundling. Designed to work with Vite, Webpack, and other modern build systems, it preserves the familiar Zod API while generating tree-shakeable validation code with virtually no runtime overhead. The project claims validation performance improvements ranging from 2× to 75× depending on schema complexity—all without requiring changes to application code. For teams heavily invested in Zod, this could be one of the most interesting performance-focused tooling releases of the year.

PolyCSS - Render textured 3D meshes in the DOM with CSS. No WebGL or <canvas> needed: each polygon is a real DOM element.

CalendarJS

sem - Semantic version control => entity-level diffs, blame, and impact analysis on top of git. 28 languages via tree-sitter. Built for coding agents.

⌚ Releases

Vite 8.1 Released

Astro 7.0.0 Beta 4 Released

Vue 3.6

SvelteKit 3.0 Released

TanStack AI Beta

ESLint v10.5.0 released

Biome v2.5 — 500 Lint Rules, Plugin Code Fix, and Cross-File Linting

Introducing Nub - an all-in-one toolkit for Node.js

Playwright 1.61, billboard.js 4.0.1, React Native 0.86, Fable 5.2,

axios v1.18.0, Node Telegram Bot API 1.0/1.1, graphql-js 17.0, node-gyp v13.0.0

React Native Windows v0.83 is here!!

📺 Videos

Copying other website’s Design.MD File. Is it stealing?

Signs you’re cracked at programming

Distributed Transactions Explained: 2 Phase Commit vs Saga Pattern

The Rise of Generative UI for Developers (CopilotKit)

MERN Stack Project: Realtime Chat App Tutorial - React.js & Socket.io 2026

Adapting to dynamic content using modern CSS

99% of Developers Don’t Get WebSockets

Most Important Programming Languages In 2026

🗞️ News & Updates

Jeff Bezos Says AI Will Create a Labor Shortage — As Amazon Cuts 30,000 Jobs

Speaking at the VivaTech conference in Paris, Amazon founder Jeff Bezos pushed back against one of the most common fears surrounding artificial intelligence: mass unemployment. Instead, Bezos argued that AI will eventually create a shortage of workers rather than replace them.

The statement comes at an interesting moment. Amazon has eliminated roughly 30,000 corporate positions in recent years—about 10% of its white-collar workforce—with automation and AI-driven efficiency playing a role in those reductions.

According to Bezos, AI expands what people are capable of accomplishing rather than making them obsolete. Human ambition, he argues, is effectively unlimited. There will always be more products to build, services to improve, and problems to solve. The real constraint isn’t imagination—it’s execution. By increasing productivity, AI could allow smaller teams to tackle significantly larger projects, creating demand for entirely new categories of work.

Bezos also believes rising productivity could reshape participation in the labor market itself. If AI-driven gains substantially increase incomes, some households may no longer require two full-time earners to maintain the same standard of living. In that scenario, labor shortages would emerge not only because businesses need more workers, but also because fewer people choose to remain in the workforce.

Whether that prediction proves accurate remains an open question. For now, the debate continues as companies invest heavily in AI while simultaneously restructuring parts of their workforce. The long-term impact of AI on employment may depend less on how many jobs it eliminates and more on how quickly new opportunities emerge to replace them.

Google Is Testing a New reCAPTCHA That Requires Hand Gestures

Google has begun testing a more advanced version of reCAPTCHA that verifies users through hand gestures performed in front of a device’s camera. Instead of selecting traffic lights, clicking bicycles, or solving image puzzles, users may be asked to perform a specific hand movement that the system can recognize and validate.

According to reports, the experimental system tracks 21 hand landmarks and analyzes whether the performed gesture matches the requested action. Google says the captured video is not linked to a user’s identity and is deleted immediately after verification. Alternative verification methods will remain available for users who cannot complete gesture-based challenges.

The idea has already sparked privacy concerns. Critics argue that any authentication system requiring camera access introduces additional privacy risks, regardless of how temporary or anonymous the collected data may be. Others question whether increasingly complex CAPTCHA systems are becoming more frustrating for humans than for the bots they’re designed to stop.

Google has not announced when—or if—the feature will be rolled out more broadly. For now, it remains an experimental test, and the company may still adjust or abandon the approach based on user feedback and real-world results.

That’s all for Friday Links #39.

The pace of change across software development shows no signs of slowing down. Between evolving JavaScript tooling, new AI workflows, and a constant stream of open-source releases, there’s never been a better time to be building on the web.

Thanks for reading, and if you discover something interesting during the week, there’s a good chance it will appear in the next edition.

See you in Friday Links #40.

Algorithms often sound more intimidating than they really are.

Someone says sorting algorithm and many people immediately imagine:

• scary computer science lectures

• mathematical notation

• Big-O formulas everywhere

• complicated whiteboard interviews

But most beginner algorithms are surprisingly ordinary once you strip away the terminology.

Selection sort is a perfect example.

Its entire strategy can be explained using something you already do naturally in everyday life:

find the best candidate, put it where it belongs, then repeat.

That’s all.

No magic.

No hidden computer science ritual.

Let’s make it visual.

Imagine Cleaning a Messy Desk

Suppose your desk is covered with books.

Not organized.

Not stacked nicely.

Just chaos.

You want to arrange them from thinnest to thickest.

Your pile looks like this:

[ thick ] [ medium ] [ tiny ] [ huge ] [ thin ]

How would a human solve this?

Probably like this:

1. Look through all books.

2. Find the thinnest one.

3. Put it in the first position.

4. Ignore it forever.

5. Repeat with the remaining books.

That process is selection sort.

The algorithm’s name suddenly becomes very literal.

You’re simply selecting the best candidate during each round.

The Core Mental Model

Selection sort quietly divides your array into two invisible regions.

Think of the data as having two zones:

Sorted Part | Unsorted Part

At the beginning:

[] | [64, 25, 12, 22, 11]

Nothing is sorted yet.

Everything belongs to the unsorted zone.

Each round follows the same pattern:

• search the unsorted section

• find the smallest value

• move it into position

• expand the sorted section

Simple.

Predictable.

Repeatable.

Walking Through a Real Example

Let’s sort this array:

const values = [64, 25, 12, 22, 11];

Round 1

Current state:

[] | [64, 25, 12, 22, 11]

Search for the smallest value.

Scan through everything:

64 → 25 → 12 → 22 → 11

Smallest value:

11

Move it to the front.

Result:

[11] | [25, 12, 22, 64]

The first slot is finished forever.

We never need to touch it again.

Round 2

Ignore the sorted section.

Focus only on:

[25, 12, 22, 64]

Search again.

Smallest value:

12

Swap it into place.

Result:

[11, 12] | [25, 22, 64]

Two positions solved.

Round 3

Remaining section:

[25, 22, 64]

Find the smallest:

22

Swap.

Now we have:

[11, 12, 22] | [25, 64]

Round 4

Remaining numbers:

[25, 64]

Smallest value?

Already:

25

No swap required.

Final result:

[11, 12, 22, 25, 64]

Done.

No mystery.

Just repetition.

Writing Selection Sort in JavaScript

Now that the behavior feels intuitive, the implementation becomes much easier to understand.

Here’s a clean version.

function selectionSort(items) {
  const result = [...items];

  for (let boundary = 0; boundary < result.length - 1; boundary++) {
    let smallestIndex = boundary;

    for (let cursor = boundary + 1; cursor < result.length; cursor++) {
      if (result[cursor] < result[smallestIndex]) {
        smallestIndex = cursor;
      }
    }

    if (smallestIndex !== boundary) {
      [result[boundary], result[smallestIndex]] = [
        result[smallestIndex],
        result[boundary],
      ];
    }
  }

  return result;
}

const numbers = [64, 25, 12, 22, 11];

console.log(selectionSort(numbers));

Output:

[11, 12, 22, 25, 64]

Understanding the Algorithm Step by Step

Let’s slow down and unpack what’s actually happening.

The Outer Loop

The outer loop controls rounds.

Each round permanently solves exactly one position.

Think of it like this:

Round 1 → fill slot 0
Round 2 → fill slot 1
Round 3 → fill slot 2

Each iteration grows the sorted region.

The Inner Loop

The inner loop performs the search.

Its only responsibility:

find the smallest remaining value.

It scans the unsorted section and continuously updates the current minimum.

Imagine somebody repeatedly saying:

“This is the smallest thing I’ve seen so far.”

Then:

“Wait, this one is smaller.”

Then:

“Nope, this one wins.”

By the end of the scan, you know exactly which element belongs next.

Making Selection Sort Visual in JavaScript

Reading algorithms is useful.

Watching them evolve is even better.

Let’s log every round.

function visualizeSelectionSort(values) {
  const array = [...values];

  for (let start = 0; start < array.length - 1; start++) {
    let minIndex = start;

    for (let scan = start + 1; scan < array.length; scan++) {
      if (array[scan] < array[minIndex]) {
        minIndex = scan;
      }
    }

    if (minIndex !== start) {
      [array[start], array[minIndex]] = [
        array[minIndex],
        array[start],
      ];
    }

    console.log(`Round ${start + 1}:`, [...array]);
  }
}

visualizeSelectionSort([64, 25, 12, 22, 11]);

Console output:

Round 1: [11, 25, 12, 22, 64]
Round 2: [11, 12, 25, 22, 64]
Round 3: [11, 12, 22, 25, 64]
Round 4: [11, 12, 22, 25, 64]

This is where algorithms often become satisfying.

You can literally watch order emerge.

Why Selection Sort Is Slow

Selection sort is simple.

But simplicity has a cost.

Even if your array is already perfectly sorted:

[1, 2, 3, 4, 5]

The algorithm still performs almost the same amount of scanning.

It keeps searching.

It keeps comparing.

It does not become dramatically smarter.

Time complexity:

Best case: O(n²)
Average case: O(n²)
Worst case: O(n²)

That consistency is selection sort’s biggest weakness.

Faster algorithms like quicksort or mergesort can outperform it dramatically on large datasets.

Where Selection Sort Still Makes Sense

You probably won’t use selection sort for processing millions of records.

That’s okay.

Not every algorithm exists to dominate benchmarks.

Selection sort still shines in a few areas.

Learning Core Programming Ideas

Selection sort teaches important programming concepts:

• nested loops

• boundaries

• searching

• state reduction

• incremental problem solving

That’s incredibly valuable for beginners.

Small Data Sets

Tiny arrays.

Lightweight utilities.

Simple scripts.

Sometimes readability matters more than raw performance.

Low-Memory Scenarios

Selection sort uses:

O(1)

extra space.

It sorts in place.

No helper arrays required.

That property can still matter in certain environments.

Why Visual Learning Changes Everything

Many algorithm tutorials start from code.

That’s often backwards.

Beginners end up memorizing syntax before understanding behavior.

A smoother learning path looks like this:

1. Understand the movement.

2. Understand the strategy.

3. Understand the implementation.

Selection sort becomes much less abstract once you visualize the process.

You’re not really sorting numbers.

You’re solving a shrinking problem.

Each round removes uncertainty.

Each round reduces chaos.

Each round makes the remaining task smaller.

That’s a powerful programming pattern you’ll encounter far beyond sorting algorithms.

Final Thoughts

Selection sort will not power massive search engines.

It will not replace highly optimized production sorting algorithms.

But that was never its real purpose.

Selection sort teaches a much more important lesson:

solve one small piece completely, then move forward.

Find the smallest value.

Place it.

Shrink the problem.

Repeat.

Simple.

Visual.

Surprisingly elegant.

And an excellent way to start thinking like a programmer.

Welcome to Friday Links #38 — your weekly roundup of JavaScript news, AI tooling, releases, and modern web development updates.

This week’s edition covers new framework releases, developer tools, AI coding workflows, frontend ecosystem updates, open-source launches, and practical engineering trends shaping the modern JavaScript landscape. Whether you’re building with React, TypeScript, Node.js, or experimenting with AI-powered development, there’s plenty to explore.

📢 Special partner message

🗓️ React Norway — Oslo, June 5 🇳🇴

Join 350+ React and full-stack developers for a unique single-track conference with a strong “Rock & React” vibe, great talks, community energy, and modern web engineering discussions.

🎟️ Use code TWIR for 10% off your ticket.

🧠 Language & Runtime Updates

TypeScript 6.0 Is Official — And It’s Preparing the Road to TypeScript 7

One of the biggest ecosystem updates remains TypeScript 6.0.

This release is not just another incremental version bump. It acts as a transition layer between the current JavaScript-based compiler and the upcoming native TypeScript 7 compiler. According to the TypeScript team, 6.0 is effectively the bridge release that prepares projects for the future architecture.

Some notable changes include:

• alignment with future TS 7 behavior

• deprecations aimed at modern ESM workflows

• simplified DOM library behavior

• stricter compiler rules

• migration tooling for upcoming changes

The broader direction is clear: TypeScript is increasingly optimizing for modern evergreen runtimes, ESM tooling, and native performance improvements.

Bun’s Rust Rewrite Has Been Merged

The Bun story continues.

One of the more talked-about updates recently: Bun’s experimental Rust rewrite effort has now been merged, generating substantial discussion across developer communities. Questions quickly emerged around maintainability, AI-assisted code generation quality, and long-term runtime strategy.

At the same time, Bun keeps strengthening its position inside the TypeScript ecosystem.

Developers increasingly evaluate Bun not just as a runtime, but as a broader replacement for parts of the traditional Node toolchain:

• package manager

• bundler

• test runner

• TypeScript execution environment

• server runtime

The “Should new TypeScript projects start with Bun?” conversation is becoming more common.

Deno 2.8 ships this week with a focus on improving the developer experience around TypeScript, ESM, and modern JavaScript features.

📜 Articles & Tutorials

Install web apps with the new HTML install element

Prompts are advisory. Structure is binding.

Building an Astro Blog While Exploring Fate

An Excruciatingly Detailed Guide To SSH

How To Make Your Text Look Futuristic

MASTER THE NODE.JS INTERNALS

Let’s Use the Nonexistent ::nth-letter Selector Now

Hardening TanStack After the npm Compromise

Using safe-area-inset to build mobile-safe layouts

What’s new in Node.js 26

The Modern React Stack Explained for 2026

Fixing JavaScript observability, one library at a time

Your Recursion Is Lying to You

HTTP/3 Over QUIC in Node.js

Async React: Building Non-Blocking UIs with useTransition and useActionState

Better fluid sizing with round()

The Truth About GPT Shortcuts and “Secret” AI Commands

Moving away from Tailwind, and learning to structure my CSS

600+ million people write right-to-left: 2 fixes your app needs

Gap decorations: Now available in Chromium

A few ways of specifying per-theme colours in only CSS

When to use (and not use) CSS shorthand properties

5 Docker Compose Settings Missing From Most Production Setups

How to Make The Fluffiest Grass With Three.js

⚒️ Tools

Open-source Discord alternative GoofCord has been released, promising a faster, cleaner, and far more customizable experience than the official client.

According to the project, GoofCord:

• runs noticeably faster than the standard Discord client, with fewer slowdowns and UI hiccups;

• blocks built-in telemetry and user data collection;

• supports password-encrypted conversations;

• allows screen sharing at any resolution and frame rate;

• lets users choose which application audio gets streamed;

• automatically updates your status based on games, music, or videos;

• supports Vencord, Equicord, and Shelter customization plugins out of the box;

• includes global hotkeys that keep working even when the app is minimized;

• supports audio streaming on Linux, while also running on Windows and macOS.

Awesome CUDA Books is a new curated list of resources for learning CUDA programming, covering everything from beginner-friendly introductions to advanced optimization techniques.

An open-source project called tokenspeed (including an online version) has been released to make LLM token throughput easier to understand visually.

Most local LLM benchmarks report raw generation speed:

• 47 tokens/sec on an M3

• 180 tokens/sec on an RTX 4090

• 500 tokens/sec on Groq

But unless you’ve actually watched tokens stream at those speeds, those numbers can feel pretty abstract.

tokenspeed solves that problem.

It’s a terminal utility that simulates token streaming at any speed you choose, allowing you to see what different throughput numbers actually look like in practice.

Instead of reading benchmark figures in isolation, you can visually compare generation speeds and better understand the real-world difference between various hardware setups, runtimes, and inference environments.

Pica 10.0 Brings Modern Browser Image Resizing to TypeScript and ESM

Counterfact Turns OpenAPI Specs Into Live API Simulators

Introducing deepsec: The security harness for finding vulnerabilities in your codebase

Feed validation service

SVG Studio Brings Layer-Based SVG Animation to the Browser

phantom-ui Creates Structure-Aware Skeleton Loaders from the DOM

cssdb Tracks the Implementation Status of Modern CSS Features

React Review Audits Pull Requests for React Anti-Patterns

Cascade - An Icon Set Built Around CSS Concepts

flexboxle Turns CSS Flexbox Practice Into a Daily Puzzle

Typescale AI Helps Generate Typography Systems and Design Tokens

ASCII Sketch Brings Diagram Drawing to the World of ASCII Art

agentmemory is a persistent memory layer designed for AI coding agents, helping them retain context across sessions instead of starting from scratch every time.

SecretScanner is an open-source tool for discovering passwords, API keys, tokens, and other sensitive data hidden inside applications.

It scans Docker images and file systems to uncover secrets that may be buried in configs, binaries, or application files.

What Models? is an open-source online tool that helps you find local AI models that can realistically run on your hardware without exhausting system resources.

Enter your PC specs — GPU, VRAM, and RAM — and the service generates a compatibility list showing suitable models, including the AI project name, quantization format, inference speed, and context window.

📚 Libs

A repository featuring 10,000+ ready-to-use APIs has been released, covering everything from automation and web scraping to AI integrations and market intelligence.

The collection includes APIs for:

• automation — handling repetitive workflows, recurring tasks, and everyday operational processes;

• data extraction — scraping websites, parsing pages, and pulling structured information from across the web;

• analytics — gathering market, competitor, and business intelligence data;

• e-commerce — tracking products, monitoring prices, and analyzing market trends;

• social media — collecting posts, measuring audience engagement, and identifying emerging trends;

• AI integrations — connecting to language models, processing content, and generating structured outputs;

• job market analysis — tracking vacancies, salary trends, and new career opportunities;

• real estate — searching, monitoring, and analyzing property listings for personal use or investment research.

easy-vibe, an open educational project for learning vibe coding, has been released.

• The course includes four levels, from beginner basics to building AI product prototypes, deployment, databases, and cross-platform development.

• It covers nine domains and 80+ interactive topics with animations and visuals, ranging from computer fundamentals to advanced AI workflows.

• The knowledge base evolves continuously alongside new AI models, prompting techniques, and development practices.

Alien Signals describes itself as “the lightest signal library”, combining ideas from Vue, Preact, and Svelte into an extremely small reactive system.

MDXEditor 4.0 - A Rich Markdown Editor Component

Claude Cookbooks is a collection of notebooks and recipe-style examples demonstrating useful, creative, and sometimes unexpected ways to work with Claude.

GitClassic Offers a Lightweight Alternative to Browsing GitHub

⌚ Releases

Node.js 22.22.3 (LTS)

Jest 30.4.0 Improves ESM, Temporal, and React 19 Support

Bun 1.3.14 Expands Image APIs, HTTP Support, and Node Compatibility

Syncpack 15.0 has been released, bringing new features to the dependency management tool widely used in large JavaScript monorepos, including projects at Electron, Cloudflare, and Vercel.

pnpm 11.1 Introduces New Commands for Debugging, Security, and GitHub Packages

Mozilla Thunderbird 151.0 Released

Angular 22 Release Candidate Lands Ahead of June Launch

ESLint Config Inspector 3.0

TypeORM 1.0 Released

ESLint v10.4.0 released

Relay 21.0, Rolldown 1.0.1, Critical 8.0, SQL Formatter 15.8,
Shiki 4.1, Redux Toolkit 2.12.0, React Redux 9.3, Next.js 16.2.6 & 15.5.18 Security Releases,
PixiJS 8.17, Ant Design 6.4.0, react-qr-scanner 2.6, styled-components v7, Storybook 10.4

📺 Videos

Why React Developers Are Leaving Next.js for TanStack

Learn Tanstack Start in 30 Minutes

Why React Native is Still King in 2026

It was more fun before AI

The Most Popular Claude Code Skills (And What They’re Missing)

Is Software Engineering Dead?

The Future of SEO: Building AI-Ready Sites with Astro & AEO

🗞️ News & Updates

The End of an Era: Iconic Ask.com Domain Hits the Auction Block

The digital landscape is losing another piece of its foundation. Ask.com, one of the web’s original search heavyweights, has officially put its domain name up for sale.

According to reports from Domain Incite, the high-stakes sale is being spearheaded by domain brokers Andrew Miller (ATM Holdings) and Larry Fisher (LPL Financial). Miller didn’t mince words about the magnitude of the listing, calling it “one of the most valuable domain assets to ever hit the market.”

Creator of C++ Criticizes Vibe Coding

Bjarne Stroustrup, the creator of C++, delivered a sharp critique of vibe coding in a recent interview. His argument: AI-generated code may look convincing in demos, but in real systems it often creates bugs, bloated codebases, security issues, and maintenance problems. The burden usually lands on senior engineers, who end up reviewing, debugging, and rewriting prompt-generated code instead of moving faster.

Large GitHub Security Incident: Malicious VS Code Extension Linked to 3,800 Repository Breach

A major security incident has hit GitHub, and the company has already confirmed that an unauthorized compromise took place.

According to preliminary findings, attackers gained access to at least 3,800 repositories. GitHub is still investigating the full scope of the breach and determining what systems, credentials, or internal data may have been affected.

The incident reportedly originated from a compromised VS Code extension. The malicious extension infected a GitHub employee’s machine, giving attackers a foothold that eventually led to access inside GitHub’s internal environment.

The investigation is ongoing, and the company continues to assess the scale of the impact. The case is another reminder that development tooling and third-party extensions can become critical attack vectors, especially inside large engineering organizations.

An OpenAI model has disproved a central conjecture in discrete geometry

That wraps up Friday Links #38.

The JavaScript ecosystem continues to move fast — new runtimes, framework releases, AI developer tooling, and experiments seem to arrive every week. We filter the noise and surface the updates, launches, and discussions that matter most to modern web developers.

If you discovered something useful, consider sharing this edition with your team, friends, or fellow developers. See you in the next roundup.

AI-assisted development is rapidly shifting from cloud-only workflows to local-first environments.

Instead of relying entirely on external services, developers can now run powerful language models directly on their own machines and integrate them into their editor, terminal, and everyday workflow.

This approach offers several advantages:

• private local inference

• offline development

• zero API costs

• customizable tooling

• faster experimentation

• complete environment control

In this guide, we will build a fully local AI development setup using:

• Visual Studio Code

• LM Studio

• Node.js

• Cline

Why Developers Are Moving Toward Local AI

Cloud-based coding assistants are convenient, but they also introduce limitations that become more noticeable over time.

Common problems include:

• subscription pricing

• privacy concerns

• internet dependency

• API rate limits

• slow responses during peak usage

• lack of control over models and infrastructure

Local AI environments solve many of these issues.

Instead of sending requests to external servers, everything runs directly on the developer’s machine. That means projects remain private, inference works offline, and the environment becomes fully customizable.

Of course, there is a tradeoff.

Local language models require significantly more hardware resources than traditional developer tools.

Hardware Requirements Matter More Than Most People Expect

Running local models is heavily dependent on system performance.

A weak machine may technically load a model, but the actual experience can become frustrating very quickly. Response generation slows down, inference becomes inconsistent, and larger projects become difficult to work with.

Mid-range systems usually provide a much more comfortable experience, especially for small and medium-sized projects.

The most important hardware components are:

• GPU memory

• RAM

• SSD speed

• CPU performance

Operating system optimization also plays a surprisingly large role. Different Windows builds can noticeably affect model performance and inference speed.

Skipping the Obvious Setup

Most JavaScript developers already have:

• Visual Studio Code

• Node.js

• npm

• terminal tooling

installed and configured.

Because of that, there is no reason to spend half the article installing VS Code and Node.js from scratch.

Instead, it makes more sense to jump directly into the interesting part: building a fully local AI workflow with LM Studio.

Installing LM Studio

The next step is installing LM Studio.

Download:

LM Studio

LM Studio acts as the foundation of the entire local AI workflow.

It provides:

• local model downloads

• GPU acceleration

• model management

• chat interfaces

• OpenAI-compatible APIs

• inference servers

During installation, it is usually better to:

• skip automatic model downloads

• disable auto-start services

• configure a custom models directory

Large models can consume hundreds of gigabytes over time, so storing them on a secondary drive is often the better option.

Example:

D:\models 

Choosing a Local Model

After installing LM Studio, the next step is downloading a model.

At the moment, LM Studio itself recommends the:

google/gemma-4-e4b

model by default.

And honestly, for most developers, this is currently a pretty solid starting point.

Gemma 4 E4B is part of Google DeepMind’s newer Gemma 4 family and is designed specifically for efficient local inference on consumer hardware. The model supports:

• reasoning

• coding tasks

• tool calling

• multimodal workflows

• long context windows

while remaining relatively lightweight compared to larger models.

This is exactly why LM Studio currently pushes it as the default recommendation.

For laptops and mid-range desktop machines, E4B is usually much easier to run than massive 26B or 31B models while still delivering surprisingly good coding performance.

That said, the local AI ecosystem changes ridiculously fast.

A model that is considered “the best default” today may be outdated in a few months. New open-source models appear constantly, and performance improvements happen almost weekly.

Because of that, developers should absolutely spend time researching newer models later instead of treating the default LM Studio recommendation as permanent.

Right now, though, Gemma 4 E4B is a very reasonable place to start.

Configuring Virtual Memory

Systems with limited RAM may run into memory allocation issues when loading larger models.

Windows virtual memory can help stabilize the environment.

Open:

System Properties → Performance → Advanced

Then configure virtual memory as:

System managed size

for all drives.

After applying the changes, Windows will usually require a restart.

This simple adjustment can significantly improve stability on weaker systems.

Understanding Context Length

One setting that many developers overlook is context length.

Modern coding workflows benefit heavily from large context windows because AI models need to understand multiple files simultaneously.

A common configuration is:

32768

tokens.

Larger context windows help models:

• preserve conversation history

• analyze larger codebases

• understand project structure

• generate more coherent edits

For AI-assisted development, context size often matters just as much as model size.

Testing the Model Before Integration

Before connecting the model to external tools, it is a good idea to verify that everything works correctly inside LM Studio itself.

A simple prompt is enough:

What are tokens in language models?

If the model responds normally, the inference pipeline is working correctly.

At this stage, developers can also estimate generation speed and determine whether the hardware configuration feels comfortable enough for daily work.

Turning LM Studio into a Local API Server

One of LM Studio’s most useful features is its OpenAI-compatible API server.

Inside the Developer section:

1. Load the model

2. Verify context settings

3. Enable CORS

4. Start the local server

Once enabled, external applications can communicate with the local model exactly like they would with a cloud AI provider.

This transforms the machine into a fully local AI backend.

Installing the Cline Extension

Now it is time to integrate AI directly into the editor.

Inside VS Code Extensions, search for:

Cline

Install the extension and grant workspace trust permissions.

Unlike traditional autocomplete plugins, Cline behaves more like an autonomous development agent.

It can:

• execute terminal commands

• create files

• refactor projects

• install dependencies

• update configuration files

• explain errors

This makes the workflow feel very different from traditional autocomplete systems.

Connecting Cline to LM Studio

Inside Cline settings:

Choose:

OpenAI Compatible

Then configure the local endpoint:

http://127.0.0.1:1234/v1

The /v1 suffix is important because LM Studio exposes an OpenAI-style REST API.

The API key field can contain any placeholder value since everything runs locally.

Finally, copy the model identifier directly from LM Studio and paste it into the model configuration field.

Once connected, VS Code gains direct access to locally running AI models.

Working with AI Coding Agents

AI coding agents work differently from traditional assistants.

Instead of only suggesting snippets, they can actively interact with the project itself.

For example, an agent can:

• initialize projects

• install dependencies

• generate files

• modify configuration

• launch development servers

• refactor existing code

The most interesting part is transparency.

Every command, file change, and generated edit remains visible to the developer.

This makes it much easier to supervise the workflow and intervene when necessary.

AI Agents Still Require Supervision

Even powerful models make mistakes.

Incorrect assumptions, outdated configurations, and broken project structures still happen regularly.

Sometimes the AI fixes its own mistakes automatically. Other times, manual intervention becomes necessary.

This is why modern AI workflows work best when developers treat the model as a collaborator rather than a replacement.

The quality of results depends heavily on:

• prompt quality

• project constraints

• developer supervision

• iterative refinement

Developers who expect perfect output from a single prompt usually end up disappointed.

Better Prompts Produce Better Results

One of the biggest differences between mediocre AI workflows and excellent ones is instruction quality.

Specific prompts dramatically improve reliability.

For example, instead of writing:

Migrate styles to Tailwind

it is much better to write:

Migrate all styles to Tailwind CSS v4
and remove old CSS files.

Version numbers matter.

Explicit constraints matter.

Clear expectations matter.

The more structured the prompt becomes, the more predictable the output becomes.

Local AI Works Best for Repetitive Development Tasks

AI coding tools are especially effective for:

• scaffolding

• repetitive refactoring

• style migrations

• configuration generation

• boilerplate creation

• documentation

• debugging assistance

These systems are not replacing software engineers.

They are reducing friction.

For solo developers and small teams, this can dramatically accelerate everyday development work.

Final Thoughts

Local AI development has evolved from an experimental niche into a genuinely practical workflow.

With tools like:

• LM Studio

• Cline

• Visual Studio Code

developers can build fully private AI-powered workspaces directly on their own machines.

The ecosystem is still evolving rapidly, and local models still lag behind the most advanced cloud systems in some areas. But the gap is shrinking much faster than many people expected.

For developers willing to experiment, local AI already offers a surprisingly capable and highly flexible development experience.

JavaScript keeps moving fast, but not all updates are worth your time. Friday Links #37 focuses on the releases, tools, and ideas that actually matter—from performance improvements in runtimes and libraries to new developer workflows powered by AI. This issue highlights what’s changing across the ecosystem and why it matters for real-world projects.

🧠 Language & Runtime Updates

Node.js 26 (Current) — almost here The upcoming release of Node.js 26 is expected to ship with V8 14.6 and enable the Temporal API by default—a major step toward handling dates natively without relying on third-party libraries.

JavaScript (ES2025 → ES2026) The language continues evolving toward ES2026, with ongoing improvements to the standard library and deeper integration with AI-driven tooling and workflows.

🍋 Fresh 2.3 — the Deno-native full-stack framework — introduces first-class WebSocket support, eliminates unnecessary JavaScript for pages that don’t need it, and makes the View Transitions API effortless with a single attribute in your views.

📜 Articles & Tutorials

The end of responsive images

<dialog> and popover: Baseline layered UI patterns

Scroll-Driven Animations

How to Use Lazy Loading Without Hurting Web Performance

Compositing & Blending

Looking at New CSS Multi-Column Layout Wrapping Features

Recreating Apple’s Vision Pro Animation in CSS

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root

CSS Recently In All Browsers

Session Timeouts: The Overlooked Accessibility Barrier In Authentication Design

The React Compiler at Eighteen Months: The Arc, the Debates, and What’s Next

Migrating from Radix UI to Base UI: Step-by-Step Guide

font-family Doesn’t Fall Back the Way You Think

A Guide to React Compiler Rendering

⚒️ Tools

TypeScript 7.0 Beta — gaining traction

TypeScript 7 is generating significant discussion. It introduces a native compiler written in Go, promising substantial performance gains and a redesigned architecture for large-scale projects.

TypeScript 6 — a transitional release TypeScript 6.0 acts as a bridge toward TS 7, bringing:

Deprecation of legacy APIs Updated DOM typings Adoption of modern import attributes (with)

Perry is a cross-platform TypeScript compiler that compiles code directly into native executables, offering an alternative to traditional JavaScript runtimes.

OpenWarp - Bring any AI model into your terminal

View Transitions Mock — a non-visual polyfill for the View Transitions API — provides a JavaScript implementation of same-document transitions without the visual layer. You can write a single code path for all browsers: supported ones render transitions, while others fall back to a DOM swap, with the same promises and API behavior.

DESIGN.md is a proposed format for describing a product’s visual identity—colors, typography, spacing, and UI rules—in a structured, machine-readable way. It’s designed for AI agents and tooling, enabling them to generate consistent interfaces, designs, or code based on a single source of truth.

Formisch — a schema-based, headless form library for JavaScript frameworks that handles form state and validation. It’s type-safe, fast by default, and keeps bundle size small thanks to its modular design.

Datatype is a variable font that turns text into charts, providing a unique way to visualize data.

Boneyard — generates pixel-perfect skeleton loading screens directly from your real UI, with no manual measurements or placeholder tuning.

Works across frameworks including React, Preact, Vue, Svelte 5, Angular, and React Native.

crashcat — a JavaScript physics engine built for games, simulations, and creative web projects. It includes rigid body simulation, support for multiple shape types, continuous collision detection, and more for building dynamic, interactive experiences.

officeParser — a robust, strictly typed library for Node.js and the browser that parses office documents into a clean, hierarchical AST. It preserves rich metadata, text formatting, and supports embedded attachments.

Bifrost — a high-performance AI gateway that unifies access to 15+ providers (including OpenAI, Anthropic, Amazon Web Services, and Google) through a single OpenAI-compatible API.

📚 Libs

Portless lets you replace port-based URLs with clean, stable local domains—so instead of http://localhost:3000, you can use something like https://myapp.localhost. It’s built on Node.js and now adds new features for Tailscale users.

Honker brings PostgreSQL-style NOTIFY/LISTEN semantics to SQLite—no daemon required. The honker-node package adds support for Node.js, making it easy to integrate event-driven messaging into your apps.

whatsapp-api-js — a lightweight, dependency-free library for interacting with the WhatsApp Cloud API, built for efficiency and full TypeScript support.

⌚ Releases

pnpm 11.0 Released

AVA 8.0 — the popular Node.js test runner is now fully ESM and introduces two new test modifiers: test.skipIf() and test.runIf().

BWIP-JS 4.10 — a pure JavaScript port of the original Barcode Writer in Pure PostScript, designed to run in any modern browser or JavaScript-based server environment.

It supports 100+ barcode formats, including both linear and 2D standards. Barcodes can be generated as PNG images (Node.js, React Native), rendered to a canvas (browser), or exported as SVG across all platforms.

Hono Node.js Adapter 2.0 — the latest version delivers up to 2.3× higher throughput compared to v1, based on body-parsing benchmarks from bun-http-framework-benchmark. Other scenarios like Ping and Query also see smaller, but noticeable, performance gains.

basic-ftp 6.0 — a modern FTP client for Node.js with support for FTPS over TLS, passive mode over IPv6, async/await APIs, and built-in TypeScript types.

Mongoose 9.6 — the popular object data modeling (ODM) library for MongoDB, widely used with Node.js to structure and manage application data.

Vine 4.4 — a fast form data validation library for Node.js, designed for performance and clean schema-based validation.

React Hook Form 7.74 — introduces setValues, a new API for updating multiple form fields at once, making bulk state updates simpler and more efficient.

React Tooltip 6.0 — adds portalRoot and autoClose props, introduces support for React 19, and removes the legacy HTML string API.

shadcn CLI 4.5 — introduces a new --pointer flag that re-enables cursor: pointer on buttons.

Chakra UI 3.35 — a multi-package release covering React, charts, CLI, panda-presets, and codemods. It introduces a new Splitter component, adds support for React 19, and includes new CLI commands for generating docs and props.

TanStack Query 5.100 — adds a new retryOnMount callback for finer control over retries, along with internal cleanup of Svelte test infrastructure.

📺 Videos

Why Rust is Replacing JavaScript for Full Stack Web Apps in 2026

GitHub is facing HUGE problems!

GitHub is having some major issues right now…

This Coding Tool Kills AI Code Slop

End of Vibe Coding? Github Copilot Changes

🗞️ News & Updates

C:/Deb — A Linux-Based OS with a Windows-Like Environment

A new project called C:/Deb introduces a working prototype of a Win32/Linux system built on Debian 13. It delivers a Windows-like experience using Wine and components from ReactOS, running on the Linux kernel, with a UI styled after Windows 95/98.

Test images are available for QEMU and VirtualBox, along with build scripts. The project follows earlier experiments like Loss32, while ongoing ReactOS progress has improved compatibility with legacy Windows drivers (Intel, NVIDIA, AMD).

That’s it for this week’s roundup. Try a few of these tools, keep an eye on the trends, and don’t just read—experiment. The JavaScript ecosystem rewards builders who stay curious and adapt quickly. More updates, releases, and insights are coming next week.

Frontend developers spend a lot of time thinking about UI, state, routing, and performance. But there is one area that quietly causes a surprising number of real-world problems: file handling.

It usually starts innocently.

You add image uploads. Then someone wants drag-and-drop PDF previews. Then product asks for CSV export. Then users upload 200MB videos from low-end mobile devices. Suddenly the browser starts freezing, memory climbs, tabs crash, and your “simple file feature” becomes one of the most fragile parts of the application.

This is exactly where Blob objects become useful.

Blob is one of those browser APIs that many developers have seen, but not everyone has really learned to use properly. It often appears in quick snippets for downloads or image previews, but its actual role in file-heavy applications is much bigger. Blob sits at the center of modern client-side file workflows: generating files, slicing large files, converting formats, previewing content, and controlling memory more carefully than naive string-based approaches.

In this article, we’ll take a practical approach to Blob objects. No abstract theory for the sake of theory. Just real use cases, better patterns, and production-friendly code.

We’ll cover:

• what Blob actually is

• why it’s better than huge strings or data URLs in many cases

• how to generate files efficiently

• how to split large files into chunks

• how to build image compression pipelines

• how to preview files in the browser

• how to export data safely

• how to avoid memory leaks caused by object URLs

If you work on dashboards, admin panels, editors, media tools, or upload-heavy products, this API deserves a place in your toolkit.

What a Blob Actually Is

A Blob is short for Binary Large Object. In browser terms, it represents raw immutable data that can be treated like a file, even if it didn’t come from the filesystem.

That last part matters.

A Blob can come from:

• plain text

• JSON

• canvas output

• image transformations

• sliced file chunks

• fetched binary content

• generated CSV or HTML

You can think of a Blob as a browser-friendly wrapper around file-like data. It lets you package content with a MIME type and pass it into APIs that expect binary or file-based input.

Here’s a very simple example:

const reportPayload = new Blob(
  [’Hello from a generated file’],
  { type: ‘text/plain’ }
)

That Blob can now be:

• downloaded

• previewed

• uploaded

• passed into URL.createObjectURL

• wrapped in a File

• read as text, bytes, or streams in modern APIs

This is much more efficient and flexible than stuffing everything into long strings and hoping the browser handles it well.

Why Developers Run Into Trouble Without Blob

A common beginner approach to file generation looks like this:

const hugeText = ‘row,data\\n’.repeat(200000)
const downloadHref = ‘data:text/plain;charset=utf-8,’ + encodeURIComponent(hugeText)

This works for small examples. It becomes painful for larger payloads.

Why?

Because:

• the string itself already consumes memory

• encodeURIComponent creates more work and more memory pressure

• the resulting URL can become extremely large

• browsers may struggle or fail with very long data URLs

Blob is usually the cleaner and safer choice.

const hugeText = ‘row,data\\n’.repeat(200000)

const exportBlob = new Blob([hugeText], {
  type: ‘text/plain;charset=utf-8’
})

Now you have a file-like object without forcing the browser to build a massive inline data URL.

That difference becomes more important as payload size grows.

1. Creating Blob Objects the Right Way

The Blob constructor accepts an array of parts. Those parts can be strings, typed arrays, ArrayBuffers, or other Blob instances.

That means you can assemble files incrementally and explicitly.

function makeJsonBlob(payload) {
  const serialized = JSON.stringify(payload, null, 2)

  return new Blob([serialized], {
    type: ‘application/json’
  })
}

function makeHtmlBlob(markup) {
  return new Blob([markup], {
    type: ‘text/html;charset=utf-8’
  })
}

function makeTextBlob(lines) {
  return new Blob([lines.join(’\\n’)], {
    type: ‘text/plain;charset=utf-8’
  })
}

This is already a step up from ad hoc string handling because you’re making the file type explicit.

For example:

const profileBlob = makeJsonBlob({
  id: 42,
  username: ‘anton’,
  plan: ‘pro’
})

A few practical tips here:

First, always set the MIME type when you know it. It improves interoperability with previews, downloads, and downstream consumers.

Second, think of Blob creation as a boundary. Once you create the Blob, treat it as a file artifact, not just “some random string.”

Third, don’t confuse Blob with File. File extends Blob and adds metadata like file name and last modified timestamp. If you need filename semantics, wrap the Blob:

const notesBlob = makeTextBlob([’First line’, ‘Second line’])

const notesFile = new File([notesBlob], ‘notes.txt’, {
  type: ‘text/plain’
})

Subscribe now

2. Splitting Large Files Instead of Reading Everything at Once

One of the easiest ways to crash a browser tab is to read a large file all at once and then process it in memory.

This is especially risky for:

• CSV imports

• big JSON files

• video uploads

• logs

• archives

A safer pattern is to use slice() and process the file in chunks.

async function readChunkAsText(blobPart) {
  return await blobPart.text()
}

async function scanFileByChunks(sourceFile, options = {}) {
  const partSize = options.partSize ?? 1024 * 1024
  const onProgress = options.onProgress ?? (() => {})

  const partCount = Math.ceil(sourceFile.size / partSize)
  const summary = []

  for (let partIndex = 0; partIndex < partCount; partIndex++) {
    const offsetStart = partIndex * partSize
    const offsetEnd = Math.min(offsetStart + partSize, sourceFile.size)

    const filePart = sourceFile.slice(offsetStart, offsetEnd)
    const textPreview = await readChunkAsText(filePart)

    summary.push({
      partIndex,
      bytes: filePart.size,
      preview: textPreview.slice(0, 80)
    })

    onProgress({
      done: partIndex + 1,
      total: partCount,
      percent: Math.round(((partIndex + 1) / partCount) * 100)
    })
  }

  return summary
}

This approach gives you several benefits.

You avoid loading the entire file at once. You can show progress. You can retry failed chunks individually. And you can build resumable upload pipelines much more easily.

Here’s a cleaner upload-oriented version:

class ResumableUploader {
  constructor(fileHandle, config) {
    this.fileHandle = fileHandle
    this.endpoint = config.endpoint
    this.segmentSize = config.segmentSize ?? 2 * 1024 * 1024
    this.onUpdate = config.onUpdate ?? (() => {})
  }

  async start() {
    const totalSegments = Math.ceil(this.fileHandle.size / this.segmentSize)
    const transferId = crypto.randomUUID()

    for (let segmentNumber = 0; segmentNumber < totalSegments; segmentNumber++) {
      const byteStart = segmentNumber * this.segmentSize
      const byteEnd = Math.min(byteStart + this.segmentSize, this.fileHandle.size)

      const segmentBlob = this.fileHandle.slice(byteStart, byteEnd)

      await this.sendSegment({
        segmentBlob,
        segmentNumber,
        transferId
      })

      this.onUpdate({
        uploadedSegments: segmentNumber + 1,
        totalSegments,
        percent: Math.round(((segmentNumber + 1) / totalSegments) * 100)
      })
    }

    return this.finishUpload(transferId, totalSegments)
  }

  async sendSegment({ segmentBlob, segmentNumber, transferId }) {
    const payload = new FormData()
    payload.append(’segment’, segmentBlob)
    payload.append(’segmentNumber’, String(segmentNumber))
    payload.append(’transferId’, transferId)

    const response = await fetch(this.endpoint, {
      method: ‘POST’,
      body: payload
    })

    if (!response.ok) {
      throw new Error(`Failed to upload segment ${segmentNumber}`)
    }

    return response.json()
  }

  async finishUpload(transferId, totalSegments) {
    const response = await fetch(’/api/uploads/complete’, {
      method: ‘POST’,
      headers: { ‘Content-Type’: ‘application/json’ },
      body: JSON.stringify({
        transferId,
        totalSegments
      })
    })

    if (!response.ok) {
      throw new Error(’Failed to finalize upload’)
    }

    return response.json()
  }
}

This is the kind of pattern that scales much better than “read the whole thing and hope.”

3. Using Blob for Image Compression and Format Conversion

Client-side image processing is one of the most practical Blob use cases.

Uploading the original photo straight from a phone is often wasteful. It might be 5MB, 8MB, or even larger. In many products, that’s unnecessary. A resized image with reasonable compression can look almost identical while being dramatically smaller.

The browser already gives us the tools: Image, canvas, and canvas.toBlob().

async function compressPhoto(sourceFile, settings = {}) {
  const maxWidth = settings.maxWidth ?? 1600
  const maxHeight = settings.maxHeight ?? 1600
  const quality = settings.quality ?? 0.82
  const outputType = settings.outputType ?? ‘image/jpeg’

  const sourceUrl = URL.createObjectURL(sourceFile)

  try {
    const bitmap = await loadImage(sourceUrl)
    const { width, height } = fitIntoBounds(
      bitmap.width,
      bitmap.height,
      maxWidth,
      maxHeight
    )

    const canvas = document.createElement(’canvas’)
    canvas.width = width
    canvas.height = height

    const context = canvas.getContext(’2d’)
    context.drawImage(bitmap, 0, 0, width, height)

    const compressedBlob = await canvasToBlob(canvas, outputType, quality)

    return {
      blob: compressedBlob,
      width,
      height,
      beforeBytes: sourceFile.size,
      afterBytes: compressedBlob.size
    }
  } finally {
    URL.revokeObjectURL(sourceUrl)
  }
}

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.onload = () => resolve(image)
    image.onerror = reject
    image.src = src
  })
}

function canvasToBlob(canvas, mimeType, quality) {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (!blob) {
        reject(new Error(’Canvas export returned null’))
        return
      }

      resolve(blob)
    }, mimeType, quality)
  })
}

function fitIntoBounds(originalWidth, originalHeight, maxWidth, maxHeight) {
  let nextWidth = originalWidth
  let nextHeight = originalHeight

  if (nextWidth > maxWidth) {
    nextHeight = (nextHeight * maxWidth) / nextWidth
    nextWidth = maxWidth
  }

  if (nextHeight > maxHeight) {
    nextWidth = (nextWidth * maxHeight) / nextHeight
    nextHeight = maxHeight
  }

  return {
    width: Math.round(nextWidth),
    height: Math.round(nextHeight)
  }
}

This is more than a demo. It’s the foundation of avatar uploaders, CMS media tools, admin dashboards, and image-heavy forms.

You can build on it like this:

async function prepareAvatarUpload(rawImageFile) {
  if (!rawImageFile.type.startsWith(’image/’)) {
    throw new Error(’Only image files are allowed’)
  }

  const result = await compressPhoto(rawImageFile, {
    maxWidth: 400,
    maxHeight: 400,
    quality: 0.9,
    outputType: ‘image/jpeg’
  })

  const previewLink = URL.createObjectURL(result.blob)

  return {
    fileBlob: result.blob,
    previewLink,
    savedPercent: Math.round(
      (1 - result.afterBytes / result.beforeBytes) * 100
    )
  }
}

This creates a compressed Blob for upload and a preview URL for the UI.

That’s exactly the kind of workflow Blob is meant for.

4. Building a File Preview System That Doesn’t Turn Into a Mess

File preview features often start small and then grow into unmaintainable code. One function handles images, another handles text, another handles PDFs, another handles videos, and eventually every new type becomes its own special case.

A better approach is to centralize the logic.

class PreviewHub {
  constructor(rootElement) {
    this.rootElement = rootElement
    this.activeObjectUrl = null
  }

  async show(fileEntry) {
    this.reset()

    const majorType = this.detectCategory(fileEntry)

    if (majorType === ‘image’) {
      return this.renderImage(fileEntry)
    }

    if (majorType === ‘text’) {
      return this.renderText(fileEntry)
    }

    if (majorType === ‘video’) {
      return this.renderVideo(fileEntry)
    }

    if (majorType === ‘audio’) {
      return this.renderAudio(fileEntry)
    }

    return this.renderFallback(fileEntry)
  }

  detectCategory(fileEntry) {
    const mime = (fileEntry.type || ‘’).toLowerCase()

    if (mime.startsWith(’image/’)) return ‘image’
    if (mime.startsWith(’text/’) || mime === ‘application/json’) return ‘text’
    if (mime.startsWith(’video/’)) return ‘video’
    if (mime.startsWith(’audio/’)) return ‘audio’

    return ‘unknown’
  }

  renderImage(fileEntry) {
    const imageNode = document.createElement(’img’)
    imageNode.style.maxWidth = ‘100%’
    imageNode.style.maxHeight = ‘480px’
    imageNode.style.objectFit = ‘contain’

    const objectUrl = URL.createObjectURL(fileEntry)
    this.activeObjectUrl = objectUrl
    imageNode.src = objectUrl

    this.rootElement.append(imageNode)
  }

  async renderText(fileEntry) {
    const rawText = await fileEntry.text()
    const previewText = rawText.length > 12000
      ? rawText.slice(0, 12000) + ‘\\n\\n...truncated for preview’
      : rawText

    const codeBlock = document.createElement(’pre’)
    codeBlock.textContent = previewText
    codeBlock.style.whiteSpace = ‘pre-wrap’
    codeBlock.style.overflow = ‘auto’
    codeBlock.style.maxHeight = ‘420px’

    this.rootElement.append(codeBlock)
  }

  renderVideo(fileEntry) {
    const videoNode = document.createElement(’video’)
    videoNode.controls = true
    videoNode.style.maxWidth = ‘100%’

    const objectUrl = URL.createObjectURL(fileEntry)
    this.activeObjectUrl = objectUrl
    videoNode.src = objectUrl

    this.rootElement.append(videoNode)
  }

  renderAudio(fileEntry) {
    const audioNode = document.createElement(’audio’)
    audioNode.controls = true
    audioNode.style.width = ‘100%’

    const objectUrl = URL.createObjectURL(fileEntry)
    this.activeObjectUrl = objectUrl
    audioNode.src = objectUrl

    this.rootElement.append(audioNode)
  }

  renderFallback(fileEntry) {
    const message = document.createElement(’div’)
    message.textContent = `Preview is not available for ${fileEntry.name || ‘this file’}`
    this.rootElement.append(message)
  }

  reset() {
    this.rootElement.innerHTML = ‘’

    if (this.activeObjectUrl) {
      URL.revokeObjectURL(this.activeObjectUrl)
      this.activeObjectUrl = null
    }
  }
}

This gives you one interface for many file types and keeps the preview lifecycle under control.

The important detail here is not just rendering. It’s cleanup. Preview systems that use object URLs without revoking them can leak memory over time, especially in file managers and media-heavy dashboards.

5. Generating Downloads Without Data URL Headaches

Export features are everywhere:

• CSV exports

• config downloads

• JSON backups

• generated reports

• text logs

• HTML snapshots

Blob is one of the safest ways to build these features.

function triggerBlobDownload(fileBlob, fileName) {
  const tempUrl = URL.createObjectURL(fileBlob)
  const anchor = document.createElement(’a’)

  anchor.href = tempUrl
  anchor.download = fileName
  anchor.style.display = ‘none’

  document.body.append(anchor)
  anchor.click()
  anchor.remove()

  setTimeout(() => {
    URL.revokeObjectURL(tempUrl)
  }, 1000)
}

Now wrap that in useful helpers:

function exportAsJson(payload, fileName = ‘export.json’) {
  const fileBlob = new Blob(
    [JSON.stringify(payload, null, 2)],
    { type: ‘application/json;charset=utf-8’ }
  )

  triggerBlobDownload(fileBlob, fileName)
}

function exportAsText(content, fileName = ‘notes.txt’) {
  const fileBlob = new Blob(
    [content],
    { type: ‘text/plain;charset=utf-8’ }
  )

  triggerBlobDownload(fileBlob, fileName)
}

function exportAsCsv(rows, fileName = ‘table.csv’) {
  if (!rows.length) {
    throw new Error(’Cannot export an empty dataset’)
  }

  const headers = Object.keys(rows[0])
  const csvLines = [headers.join(’,’)]

  for (const row of rows) {
    const values = headers.map((key) => {
      const value = String(row[key] ?? ‘’)
      const escaped = value.replaceAll(’”’, ‘”“’)
      return `”${escaped}”`
    })

    csvLines.push(values.join(’,’))
  }

  const csvBlob = new Blob(
    [’\\uFEFF’ + csvLines.join(’\\n’)],
    { type: ‘text/csv;charset=utf-8’ }
  )

  triggerBlobDownload(csvBlob, fileName)
}

This approach is simple, predictable, and much more scalable than embedding giant payloads into data URLs.

6. The Part Everyone Forgets: Memory Management

Blob itself is usually not the problem.

The real trouble often starts with object URLs created through URL.createObjectURL(blob).

These URLs are incredibly useful. They let you point img, video, audio, or download links to Blob-backed content. But they also need cleanup.

If you keep creating object URLs and never revoke them, memory usage can slowly grow.

A safer pattern is to track them intentionally.

class ObjectUrlRegistry {
  constructor() {
    this.liveUrls = new Set()
  }

  allocate(blobValue) {
    const objectUrl = URL.createObjectURL(blobValue)
    this.liveUrls.add(objectUrl)
    return objectUrl
  }

  release(objectUrl) {
    if (!this.liveUrls.has(objectUrl)) return

    URL.revokeObjectURL(objectUrl)
    this.liveUrls.delete(objectUrl)
  }

  releaseAll() {
    for (const objectUrl of this.liveUrls) {
      URL.revokeObjectURL(objectUrl)
    }

    this.liveUrls.clear()
  }
}

And then use it in components or modules:

const urlRegistry = new ObjectUrlRegistry()

function mountPreview(imageBlob, mountPoint) {
  const objectUrl = urlRegistry.allocate(imageBlob)

  const imageNode = document.createElement(’img’)
  imageNode.src = objectUrl
  imageNode.style.maxWidth = ‘100%’

  mountPoint.innerHTML = ‘’
  mountPoint.append(imageNode)

  return () => {
    urlRegistry.release(objectUrl)
    mountPoint.innerHTML = ‘’
  }
}

This becomes especially useful in:

• image editors

• file galleries

• drag-and-drop uploaders

• long-lived admin apps

• preview modals that open and close many times

If you’ve ever had a file-heavy SPA get progressively slower during a session, forgotten object URLs may be one of the causes.

Practical Rules I’d Actually Follow in Production

After working with Blob-based flows, a few rules stand out.

Use Blob when you are generating or transforming file-like data. It gives you cleaner boundaries and better interoperability.

Prefer object URLs over giant data URLs for previews and downloads, but always clean them up.

Chunk large files instead of processing them in one shot. A slightly more complex implementation is worth the stability.

Compress images before upload when your product doesn’t require the original full-resolution asset.

Use Blob-backed exports for CSV, JSON, and text generation. It scales better and is easier to maintain.

Keep file preview logic centralized. Scattered preview code becomes technical debt very quickly.

And most importantly: think about file features as performance features. A bad upload or preview experience is not just a technical issue. Users feel it immediately.

Final Thoughts

Blob objects are one of those browser APIs that quietly power a huge amount of modern frontend functionality.

They help bridge the gap between raw in-memory data and file-oriented browser workflows. They make previews easier. Downloads cleaner. Upload pipelines safer. Image processing more practical. Large-file handling more realistic.

But the real value isn’t just knowing the API exists.

The real value is knowing when to use it instead of naive strings, oversized data URLs, or “just read the whole thing into memory” patterns.

That’s where Blob stops being a trivia item and starts becoming an architectural tool.

The JavaScript ecosystem continues to evolve at an extraordinary pace. Every week brings new frameworks, faster build tools, smarter AI assistants, and surprising discoveries in existing projects.

This week’s selection includes a particularly interesting mix of updates. Researchers uncovered several previously unknown vulnerabilities in Firefox using AI-assisted analysis. The Solid team released the first beta of Solid 2.0 with a redesigned asynchronous rendering model. Meanwhile, benchmarking data for modern JavaScript minifiers highlights how tools like SWC, Oxc, and Minify are pushing the limits of build performance.

🧠 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

Valibot vs Zod: A Lightweight Validation Alternative

The Different Ways to Select <html> in CSS

The Big Gotcha of Anchor Positioning

Why Blindly Using JSON.parse() Can Be Dangerous

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

Tailwind CSS v4 vs MUI, Ant Design & Styled Components

Designing an Efficient LRU Cache Step by Step

Howto Deploy OpenClaw and Build Your Personal AI Second Brain

⚒️ 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…

NEW Tanstack Hotkeys Library is Amazing

🎤 Talks & Podcasts

Why are we building CodePen v2? — CodePen Radio 419

Stop putting secrets in .env

🗞️ News & Updates

The web industry is gradually shortening the maximum lifespan of TLS certificates.

Starting March 15, 2026, the limit will drop from 398 days to 200 days. The timeline continues with further reductions: 100 days in 2027, and by 2029 the maximum validity period will shrink to just 47 days.

Because of these changes, Heroku recommends enabling automatic certificate renewal to avoid unexpected expirations and potential service disruptions.

Eleventy is now Build Awesome

🔐 Security

Supply-Chain Attacks Target Developers

Researchers recently discovered malicious GitHub repositories disguised as job assignments.

When opened in VS Code they may execute scripts automatically.

Developers should always review:

.vscode/tasks.json
.vscode/settings.json
package.json

🔗 thehackernews

vm2 Sandbox Escape Vulnerability

A critical vulnerability was discovered in vm2, a sandbox library used for executing untrusted JavaScript.

This vulnerability allows escaping the sandbox and executing arbitrary code.

🔗 github.com/patriksimek/vm2

Researchers at Brave discovered that web agents often leak user information — even when explicitly instructed not to.

In a study involving 1,080 runs on Amazon and eBay, agents powered by GPT-4o, O3, and O4-mini repeatedly exposed data to third-party services that had nothing to do with the task they were performing.

Examples included:

• inserting conversation history into search fields

• revealing personal details through interaction patterns

• unintentionally sending contextual data to external services

The findings highlight a growing concern: AI web agents may unintentionally expose sensitive user information through their behavior, even when privacy safeguards are in place.

The Anthropic team recently analyzed the Firefox codebase using Claude and uncovered 14 critical vulnerabilities that had gone unnoticed for years.

In total, the investigation led to the discovery of 22 security issues, all of which were assigned CVE identifiers and addressed in Firefox 148.

Some of these vulnerabilities had reportedly been present in the codebase for over a decade, highlighting how AI-assisted analysis can help uncover deeply hidden security flaws in large, mature software projects.

How we got hit by Shai-Hulud: A complete post-mortem

That concludes this week’s collection of JavaScript and developer ecosystem highlights.

If you enjoy staying informed about the latest tools, frameworks, and performance innovations, keep an eye on these weekly roundups. The ecosystem changes quickly, and small improvements in tooling often translate into major productivity gains for developers.

If you discovered an interesting library, tool, or article this week, feel free to share it. The JavaScript community thrives on curiosity, experimentation, and knowledge sharing.

See you next Friday.

TypeScript’s type system is incredibly powerful. In theory, it can catch a huge number of bugs before your code ever runs.

In practice, though, many developers barely use a fraction of what it offers.

Be honest — most of us have written any at least once just to silence the compiler and get the project to build.

The problem is that shortcuts like this tend to come back later as runtime crashes.

In this article, we’ll walk through several practical TypeScript techniques that help you write cleaner, safer, and more predictable code, while letting the type system catch bugs before they reach production.

First Rule: Forget About any

When you assign the any type to a variable, you’re essentially telling the compiler:

“Stop checking this. I’ll handle it myself.”

At that moment, you’ve basically turned off TypeScript.

Even worse, any tends to spread through a codebase. If a function returns any, every variable that receives that value becomes untyped as well.

Instead, use unknown.

It behaves like a safer version of any. You can store anything in an unknown variable, but TypeScript won’t let you access properties or call methods until you explicitly check the value.

Example:

// Dangerous: the compiler allows everything
const rawData: any = JSON.parse(userInput);
rawData.toLowerCase(); // crashes if rawData is a number

A safer version:

const safeData: unknown = JSON.parse(userInput);

// safeData.toLowerCase(); ❌ Compile error

if (typeof safeData === “string”) {
  console.log(safeData.toLowerCase());
}

The unknown type works especially well for:

• API responses

• user input

• error objects in catch blocks

These are situations where you can never be completely sure about the data shape.

Use satisfies Instead of as

The as keyword is a type assertion. It forces TypeScript to trust you.

Sometimes that’s necessary — but it can also hide real errors.

TypeScript 4.9 introduced a better tool: satisfies.

Instead of blindly accepting your assertion, it checks whether the object actually matches the expected type.

Example:

type Status = “draft” | “published” | “archived”;

type Article = {
  title: string;
  status: Status;
  tags: string[];
};

Using as:

const badArticle = {
  title: “TS Tips”,
  status: “published”
} as Article;

This compiles even though the tags field is missing.

Now compare it with satisfies:

const safeArticle = {
  title: “TS Tips”,
  status: “published”
} satisfies Article;

TypeScript immediately reports the problem.

This already makes satisfies safer than as, but there’s another advantage.

satisfies Keeps Precise Types

When you type an object normally, TypeScript often widens literal values.

Example:

const articleA: Article = {
  title: “TS”,
  status: “published”
};

The status field now has type:

‘draft’ | ‘published’ | ‘archived’

TypeScript forgets that the actual value is "published".

But with satisfies, the literal value is preserved.

const articleB = {
  title: “TS”,
  status: “published”
} satisfies Article;

Now the type of articleB.status is exactly "published".

Why does this matter?

Because TypeScript can now detect impossible conditions.

if (articleB.status === “draft”) {
  // TypeScript warns: this condition will never be true
}

You get stricter validation and better autocomplete at the same time.

Write Your Own Type Guards

Simple checks like typeof or instanceof are often not enough.

When working with complex objects, TypeScript allows you to define custom type guards.

These are functions that tell the compiler what type a value has when the function returns true.

Example:

interface PaymentSuccess {
  status: “success”;
  transactionId: string;
}

interface PaymentFailed {
  status: “error”;
  errorMessage: string;
}

type PaymentResult = PaymentSuccess | PaymentFailed;

Now we define a custom type guard:

function isSuccess(result: PaymentResult): result is PaymentSuccess {
  return result.status === “success”;
}

And use it like this:

function handlePayment(result: PaymentResult) {
  if (isSuccess(result)) {
    console.log(`Success! ID: ${result.transactionId}`);
  } else {
    console.error(`Error: ${result.errorMessage}`);
  }
}

TypeScript automatically narrows the type inside each branch.

Type guards are especially powerful with array methods:

const successfulPayments = results.filter(isSuccess);

The resulting array automatically becomes:

PaymentSuccess[]

Avoid Enums in Favor of Union Types

Developers coming from languages like Java or C# often reach for enum.

But TypeScript enums have a hidden downside.

Most TypeScript types disappear during compilation. The compiler strips them away and outputs clean JavaScript.

Enums are different — they become actual runtime code.

Example:

enum Role {
  Admin,
  Editor
}

This compiles into something like:

var Role;
(function (Role) {
  Role[Role[”Admin”] = 0] = “Admin”;
  Role[Role[”Editor”] = 1] = “Editor”;
})(Role || (Role = {}));

This adds unnecessary code to your bundle.

There’s another historical issue: numeric enums allowed assigning arbitrary numbers.

A simpler alternative is string unions.

type UserRole = “admin” | “editor” | “viewer”;

function setRole(role: UserRole) {}

setRole(”admin”); // OK
// setRole(”owner”); // Error

You get:

• autocomplete

• compile-time validation

• zero runtime cost

What If You Need to Iterate Over Roles?

Union types cannot be iterated directly.

The solution is to create a constant object and freeze it with as const.

const ROLES = {
  Admin: “admin”,
  Editor: “editor”,
  Viewer: “viewer”
} as const;

Then extract the union from the object:

type AppRole = typeof ROLES[keyof typeof ROLES];

Now you get both:

• a runtime object for loops

• a strictly typed union for TypeScript

Use Record for Dictionaries

Sometimes developers type objects as Object or {}.

Both are problematic.

• Object allows almost anything, including primitives.

• {} means “any value except null and undefined”.

When describing key-value structures, use Record.

Example:

type Config = Record<string, unknown>;

const config: Config = {
  url: “localhost”,
  port: 8080
};

Record becomes even more useful when keys are limited.

type Role = “admin” | “user” | “guest”;

const permissions: Record<Role, string[]> = {
  admin: [”read”, “write”, “delete”],
  user: [”read”, “write”],
  guest: [”read”]
};

If you forget a role or add an extra key, TypeScript will immediately complain.

Generate Types with Template Literal Types

TypeScript also supports template literal types, which allow you to build types dynamically from strings.

Example:

type ButtonSize = “small” | “medium” | “large”;
type ButtonTheme = “primary” | “secondary”;

type ButtonClass = `btn-${ButtonSize}-${ButtonTheme}`;

TypeScript generates all possible combinations:

btn-small-primary
btn-small-secondary
btn-medium-primary
...

Usage:

const myClass: ButtonClass = “btn-medium-primary”;

Incorrect values will immediately produce errors.

Transform Strings at the Type Level

TypeScript also provides built-in utilities for string manipulation:

• Capitalize

• Lowercase

• Uppercase

Example:

type EventType = “click” | “hover” | “scroll”;
type EventHandler = `on${Capitalize<EventType>}`;

This automatically generates:

onClick | onHover | onScroll

Final Thoughts

Writing good TypeScript code isn’t about covering every line with types just for the sake of it.

It’s about using the right tools where they actually help.

Avoid shortcuts like any. Let the compiler guide you instead of fighting it.

When used properly, TypeScript becomes less of an obstacle and more of a powerful safety net that catches bugs long before they reach production.

The JavaScript ecosystem never really slows down — it just shifts direction. This week brings a mix of AI-powered developer tooling, performance-focused libraries, experimental frameworks, and practical utilities aimed at improving everyday workflows.

In Friday Links #35, we highlight projects that help developers build faster, ship safer, and explore new possibilities across frontend, backend, and edge environments. From emerging open-source tools to ecosystem upgrades worth tracking, these are the updates that stood out this week.

📜 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

OpenClaw Full Tutorial for Beginners – How to Set Up and Use OpenClaw (ClawdBot / MoltBot)

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

An AI agent running on a $5 microcontroller — powered by just 35 KB of code.

Developer tnm has released an open-source AI agent called zclaw, designed to run on ESP32 microcontrollers with a total firmware size under 888 KB. The agent itself occupies only about 35 KB, while the remaining space is used by the Wi-Fi stack (~388 KB), TLS encryption (~110 KB), and certificates.

The project is written in C using ESP-IDF and FreeRTOS, and can run on affordable hardware like the Seeed XIAO ESP32-C3 board, which costs around $5. At publication time, the repository had already gained 750+ stars on GitHub and is available under the MIT license.

That wraps up this week’s roundup.

As AI tooling matures and JavaScript continues expanding beyond the browser into servers, edge runtimes, and embedded devices, the developer landscape keeps evolving in exciting ways. Try something new, explore the tools that caught your eye, and stay curious.

See you next week with another collection of tools, ideas, and ecosystem highlights in Friday Links #36.

Most designers rely on the same 2–3 sources for inspiration: Dribbble, Behance, Pinterest. That works — but only up to a point.

Static images don’t show motion.
You can’t inspect real product structure.
You don’t see how interfaces evolve over time.
You rarely understand what actually works in production.

So I decided to go deep. I reviewed every major design reference platform I could find — not just the popular ones — and analyzed how they actually help in real-world work.

The conclusion?
Dribbble and Behance are just the surface. There’s a much bigger ecosystem underneath.

Below are 20 platforms that give you something more: real user flows, video recordings, Figma files, component code, version history, or actionable best practices.

Why deep visual literacy matters

When you’ve seen hundreds of onboarding flows, you stop guessing.
When you’ve studied dozens of pricing pages, you recognize patterns instantly.

The issue with mainstream inspiration sources:

• Dribbble → lots of beautiful concepts, not always realistic.

• Pinterest → random visuals without context.

• Behance → polished case studies, rarely iterative thinking.

The platforms below offer something different:

• Video instead of static images

• Figma files instead of flattened screenshots

• Design evolution instead of one final version

• Code references instead of just visuals

• Best-practice explanations instead of pure galleries

The Platforms

1. Mobbin — Real User Flows in Motion

Best for: Mobile UX patterns

Mobbin’s strength is flow visibility. You don’t just see screens — you see transitions, states, animations, and interaction timing.

It’s heavily categorized (onboarding, payments, recovery flows, forms, etc.), so pattern research is fast and structured.

Cons: Focused mostly on mobile. Paid subscription.
Price: $12/month
Link: https://mobbin.com

2. SaaSFrame — Beyond Landing Pages

Best for: SaaS journeys (emails + product UI)

Most galleries show landing pages. SaaSFrame goes deeper: onboarding emails, product dashboards, internal UI patterns, and complete SaaS journeys.

Some pages include downloadable Figma files, which is rare.

Cons: No motion recordings.
Price: $14/month
Link: https://saasframe.io

3. Muzli — Inspiration in Your New Tab

Best for: Passive visual intake

A Chrome extension that replaces your new tab with curated design content. Inspiration becomes ambient rather than intentional.

Cons: Can distract.
Price: Free
Link: https://muz.li

4. Awwwards — High-End Web Inspiration

Best for: Award-level web experiences

Curated, jury-reviewed websites. Good for studying premium brand execution and creative direction.

Cons: Heavy agency aesthetic. Less practical for SaaS/B2B.
Price: Free
Link: https://www.awwwards.com

5. Refero — Large-Scale UI Library

Best for: Web + iOS interface patterns

A large screenshot database covering dashboards, onboarding flows, marketing, and more. Offers a lifetime option.

Cons: Limited motion content.
Price: €14/month or lifetime option
Link: https://refero.design

6. Component Gallery — Design Systems with Code

Best for: System-level thinking

Instead of screenshots, you get real component implementations across multiple frameworks. Great for engineers and system designers.

Cons: Less visually curated.
Price: Free
Link: https://component.gallery

7. Land-Book — Design Evolution Tracking

Best for: Studying interface change over time

See how websites transform across iterations. Useful for understanding messaging shifts and structural changes.

Cons: Full history often behind PRO plan.
Price: Free + PRO
Link: https://land-book.com

8. Landing Love — Full Page Video Recordings

Best for: Motion-heavy landing pages

Captures complete landing page scroll recordings. Helps analyze animation timing and interaction choreography.

Cons: Focused only on landings.
Price: Free
Link: https://landing.love

9. Page Flows — End-to-End Product Journeys

Best for: Checkout, onboarding, upgrade flows

Structured around full user journeys rather than isolated screens. Excellent for SaaS and product research.

Cons: Subscription required for most content.
Price: ~$13/month
Link: https://pageflows.com

10. CSS Design Awards — Jury-Based Recognition

Best for: Award-winning web work

Another curated award ecosystem with professional review.

Cons: Smaller reach than Awwwards.
Price: Free
Link: https://cssdesignawards.com

11. Really Good Emails — Email UX Reference

Best for: Email structure & lifecycle design

Focused specifically on email UX patterns. Useful for SaaS and product marketing.

Cons: No performance metrics.
Price: Free
Link: https://reallygoodemails.com

12. LandingFolio — Color-Based Search

Best for: Brand-aligned visual exploration

Lets you filter landing pages by color palette. Helpful when working with strict brand systems.

Cons: Smaller dataset.
Price: Subscription
Link: https://landingfolio.com

13. Landing Gallery — Builder-Specific Examples

Best for: Webflow / no-code references

Filter by builder platform to ensure feasibility without custom code.

Cons: Quality varies.
Price: Free
Link: https://landing.gallery

14. SaaSPages — Best Practices Explained

Best for: Learning why sections convert

Explains common patterns for pricing, hero sections, CTAs. More educational than gallery-based.

Cons: Advice can be basic.
Price: Free
Link: https://saaspages.xyz

15. One Page Love — One-Page Focus

Best for: Startup landing formats

Human-curated one-page site collection with interviews and tutorials.

Cons: Narrow specialization.
Price: Free
Link: https://onepagelove.com

16. Scrnshts — App Store Visual Strategy

Best for: iOS marketing screenshots

Focused on App Store presentation design.

Cons: iOS-only.
Price: Free
Link: https://scrnshts.club

17. Collect UI — Component Exploration

Best for: Quick UI pattern scanning

Browse sign-ups, pricing tables, 404 screens, etc.

Cons: Many conceptual pieces.
Price: Free
Link: https://collectui.com

18. Godly — Modern Web Aesthetics

Best for: Trend discovery

Highly curated contemporary web designs.

Cons: Sometimes prioritizes visuals over usability.
Price: Free
Link: https://godly.website

19. Httpster — Experimental Web

Best for: Non-traditional design inspiration

Useful when you need something unconventional.

Cons: Rarely practical for mainstream products.
Price: Free
Link: https://httpster.net

20. Behance — Deep Case Studies

Best for: Portfolio storytelling

Great for showing full project narratives and hiring visibility.

Cons: Usually shows final states, not iterations.
Price: Free + PRO
Link: https://behance.net

How to Use This Without Overwhelm

You don’t need all 20 daily.

Daily:

• Muzli (passive intake)

Weekly:

• Awwwards

• Godly

Before starting a project:

• Mobbin / SaaSFrame / Refero

• Component Gallery

• Page Flows

Occasionally:

• Land-Book

• Httpster

Final Thought

Each tool gives you a different lens: motion, systems, marketing, experimentation, evolution.

Visual literacy isn’t built in a weekend. It’s built through consistent exposure and structured comparison.

After a few months of this approach, you’ll stop reinventing common patterns.
You’ll recognize solutions instantly. And most importantly — you’ll be able to explain your design decisions with confidence.

If you use something not listed here, share it. The ecosystem is bigger than any single list.

Subscribe now

Friday Links #34 brings another curated batch of JavaScript tools, releases, and resources worth your attention. This week’s selection highlights practical libraries, experimental projects, and notable ecosystem updates that can influence real-world workflows. If you like staying current without the noise, this digest delivers the signal.

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: A flag to make type ordering deterministic and closer to TypeScript 7’s behavior, reducing differences between runs.

• ES2025 support for target and lib: The new es2025 target and lib options include newer built-in API types (e.g., RegExp.escape).

• Temporal API types included: Built-in type definitions for the ECMAScript Temporal API are now available.

• New types for Map upsert methods: Types for getOrInsert and getOrInsertComputed methods on Map/WeakMap have been added.

• Simplified DOM lib: dom.iterable and dom.asynciterable are now fully included in lib.dom, so you can drop extra entries in "lib".

• Updated default compiler options: Defaults such as "strict": true, module: "esnext", and target: es2025 reflect modern JS practices.

• Changed default rootDir: Now defaults to the directory containing tsconfig.json, simplifying output layout.

• types defaults to []: The default global types list in tsconfig.json is now empty by default.

Node.js 25.6.1 (Current)

ESLint v10.0.0 released

Bun v1.3.9 Released

Transformers.js v4 Preview: Now Available on NPM!

Prisma 7.4.0 Released

docx 9.5.2 released,

pnpm 10.29.3, Orange ORM v5.0.0

Tamagui 2 Released

Gatsby v5.16 Adds React 19 Support — The latest Gatsby release (v5.16) introduces official support for React 19, bringing compatibility with the newest React features and runtime behavior.

Babel 7.29.0 Released

📺 Videos

Designing a Database Like a Senior Engineer (ERD & PRD)

Improving Performance using React Server Components!

RSC vs SSR Performance: Why LCP Optimization Fails Without Streaming and Suspense

Windows Users Are Switching and Linux Is Where They’re Going

WHO SURVIVES AI? Junior vs Senior

🔒 Master Role-Based Authorization in NestJS (Full Guide)

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

Introducing GPT‑5.3‑Codex‑Spark

A Quick Guide to WCAG 3.0 — An overview of WCAG 3.0, the next generation of the W3C’s web accessibility guidelines. The standard is still in active development, with many details evolving, and a draft candidate recommendation is not expected until around 2027. It’s a helpful early look at where accessibility requirements are heading next.

WCAG 3.0 overview and update 2026

Anthropic raises $30 billion in Series G funding at $380 billion post-money valuation

That wraps up this week’s picks. Try a few tools, explore the releases, and save what fits your stack. More JavaScript finds and ecosystem highlights are coming in the next edition.

Maybe you already use some of them daily — or maybe these are exactly the features that will fill long-standing gaps in your debugging workflow.

Let’s get started.

Understanding Accessibility with DevTools

Large companies often have dedicated accessibility teams, but smaller teams or solo developers still want to deliver accessible products. Chrome DevTools provides helpful tools for that.

1 Simulating Vision Deficiencies

DevTools can simulate visual impairments to show how users with different vision conditions see your UI:

Path: DevTools → Rendering → Emulate vision deficiencies

Available simulations include:

• Blurred Vision

• Reduced Contrast Sensitivity

• Protanopia (no red)

• Deuteranopia (no green)

• Tritanopia (no blue)

• Achromatopsia (no color)

This is extremely helpful for testing visual UX beyond contrast ratios.

If you don’t see the Emulate vision deficiencies option, open the Command Menu with Ctrl+Shift+P, type “Rendering”, select “Show Rendering”, and the panel will appear at the bottom of DevTools.

2 Accessibility in Inspect Element

Open DevTools, pick an element, and look beyond layout metrics like margin, width, or font-style. Chrome DevTools also exposes useful accessibility‑related information.

Contrast: text contrast ratio

One of the most common accessibility issues on the web is insufficient text contrast. Chrome no longer shows contrast in the Accessibility panel — instead, you’ll find it inside the color picker:

Styles → color → click the color square → Contrast ratio

Google provides guidance on how to detect and fix contrast problems, along with recommended minimum values: 3.0 (minimum) and 4.5 (recommended).

DevTools can also display contrast using the newer APCA algorithm. To enable it:

Settings → Experiments → Enable new Advanced Perceptual Contrast Algorithm (APCA)

These built‑in tools make it easier to validate essential accessibility properties without relying on external tooling.

3 Accessibility Tree

On the right panel, there is an Accessibility tab. Selecting an element in the DOM shows:

• how it appears in the accessibility tree, and

• which semantic attributes are relevant (aria-*, roles, content).

DevTools also offers a full accessibility tree, showing how a screen reader perceives the page. This makes it dramatically easier to audit semantic correctness.

To enable it:

1. Enable Accessibility Tree

2. Reload DevTools

3. Click the accessibility icon

You will see only semantically relevant nodes, not every DOM element.

4 Code Coverage for JS + CSS

Coverage shows which parts of your JS and CSS are actually used.

Open via:

DevTools → Cmd/Ctrl + Shift + P → “Show Coverage” → Record

You will see:

• Unused Bytes

• File URL

• Type (JS/CSS)

Inside a file, unused code is highlighted in red, used in green. This helps when:

• optimizing bundle size

• removing legacy code

• evaluating library usage

5 Lighthouse Accessibility Audit

Lighthouse can run an automated accessibility audit:

1. Open Lighthouse

2. Pick Mode and Device

3. Select only Accessibility

4. Click Analyze page load

You will receive:

• an accessibility score (0–100)

• actionable recommendations

Note: Lighthouse does not guarantee full accessibility compliance — it checks only measurable criteria. Manual testing is still required.

6 CSS Overview

CSS Overview provides a global snapshot of CSS usage:

It reports:

• all colors used in text, backgrounds, borders

• contrast issues

• font sizes & line-heights

• media queries

Open via:

Cmd/Ctrl + Shift + P → “Capture Overview” → Record

Very useful for cleanup and design audits.

Console Tricks

The Console is packed with hidden gems. Here are three highly practical ones.

7 Edit the Whole Page Live

Entering:

document.designMode = "on"

makes all elements editable.

Use cases:

• designers can modify text live

• copywriters can adjust content without touching code

• marketing teams can mock ad banners or hero sections

Surprisingly useful.

8 Quick Access to Inspected Elements

DevTools keeps a history of inspected elements:

• $0 — most recently selected

• $1 — previous

• $2, $3, $4 — earlier selections

Example:

$0.style.background = "purple"

Great for quick tests instead of manual querySelector.

9 Live Expressions

Click the eye icon in the Console to create a Live Expression — a JS expression that evaluates every 250 ms.

Useful for watching:

• variable changes

• DOM state

• timers

• scroll positions

• FPS metrics

Final Thoughts

Chrome DevTools contains far more capabilities than most developers regularly touch. This article showcased a handful of rarely discussed but extremely useful features.

If you want to go deeper, the official DevTools documentation is the best place to start.

Good luck and happy debugging.

Welcome to issue #33, covering the latest releases, interesting utilities, and trends in the JS world.

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.

Color.js v0.6 — a standards-compliant color conversion and manipulation library — moves closer to its 1.0 release.

Nitrux 5.1.0 Released — a Linux distribution based on Debian, featuring the KDE Plasma desktop environment.

📺 Videos

I Reviewed 3 REAL React Native Apps (Here’s what I thought)

2026 UI/UX Design Trends - 2 of the Biggest Trends

An Open-Source Alternative to ElevenLabs

PERN Stack Course: Build a Full Stack Product Store with React and Postgres

Build and Deploy a Real Time Crypto Screener & Dashboard App | WebSocket API with Next.js

3 React Experts vs 1 React Interview Challenge | Kent C. Dodds, Jack Herrington & Roadside Coder

Figma MCP vs Claude: UI Building Battle!

The Best React Native Tech Stack for 2026

How To Become Elite at Programming

99% of Developers Don’t Get gRPC

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

Google AI and Vercel Sponsor Tailwind After 80% Revenue Drop Caused by AI

Logan Kilpatrick, Head of Product at Google AI Studio, posted on X that the Google AI team is now a Tailwind sponsor and added:

“I’d love to discuss how we can do more together.”

Guillermo Rauch, CEO of Vercel, also confirmed sponsorship.

Why It Happened

According to Wathan, the crisis was caused by a broken sales funnel. Previously:

• developers googled CSS questions,

• landed on Tailwind’s documentation,

• discovered paid products like component kits and templates.

With modern LLMs such as Claude, ChatGPT, and Cursor, developers now generate code directly. Since LLMs were trained on Tailwind documentation, they produce accurate solutions without the developer visiting the site.

The result:

• documentation traffic dropped 40% since early 2023

• Tailwind reached 75 million downloads/month, making it more popular than ever

• revenue collapsed despite adoption increasing

How Much Sponsorship Was Provided?

Google and Vercel did not disclose amounts. Tailwind’s public sponsorship tiers start at:

• $6,000/year (base tier)

• $60,000/year (top partner tier)

Before today, Tailwind already received ≈$1.1M/year from 29 corporate sponsors, including Cursor. Despite that, layoffs were unavoidable — only one engineer remains from the original four.

For now, three engineers have already lost their jobs, new sponsorship sums remain undisclosed, and only time will tell whether this was a one-time PR move or the start of systemic open-source funding from AI companies.

OpenAI, Anthropic, and Google Share the Top Spot in Intelligence Index 4.0

The platform Artificial Analysis has published the fourth edition of its Intelligence Index, one of the strictest rankings of modern AI models. In this update, the report recorded an effective three-way tie between the largest players. Formally, GPT-5.2 (X-High) takes first place, but Claude Opus 4.5 from Anthropic and Gemini 3 Pro from Google trail by only a statistically insignificant margin.

The key change in version 4.0 is methodology. The authors deliberately toughened evaluation criteria and abandoned the familiar benchmarks that models have become highly optimized for in recent years. As a result, absolute scores dropped: where leaders previously scored above 70, the new ceiling is closer to 50. This isn’t model degradation — it’s an attempt to restore genuine difficulty to the measurements.

Micro QuickJS: a JavaScript Engine for Embedded Devices Using Only 10 KB of RAM

Fabrice Bellard — creator of QEMU, FFmpeg, QuickJS, TinyGL, and TinyCC — has introduced Micro QuickJS, an open-source JavaScript engine designed for embedded systems. It can compile and execute JavaScript programs with as little as 10 KB of RAM. The codebase is written in C and published on GitHub under the MIT license.

The results of the State of HTML 2025 survey are now available.

That’s a wrap for this week’s edition. If you discovered something useful, share it with teammates or send in a link you think deserves a spotlight next time. The JS ecosystem thrives through learning, remixing, and curiosity — see you next Friday for more tools, updates, and ideas.

For more than a decade, every git init quietly created a master branch. Even after GitHub, GitLab, and nearly every major platform migrated to main, the Git CLI itself remained frozen in the past. But that era is finally ending.

Starting with Git 3.0, the default branch for new repositories will no longer be master, but main — aligning Git with the modern tooling ecosystem and long-standing community requests.

This isn’t just a symbolic rename. Git 3.0 arrives with several deep technical changes that will reshape workflows, security, and long-term compatibility across the entire developer ecosystem.

Welcome to the post-master world.

Why Git Is Finally Switching to “main”

The request isn’t new.

Back in 2020, the Software Freedom Conservancy asked major projects to replace the term master with something neutral and inclusive. Within months:

• GitHub switched its default branch to main

• GitLab offered automatic migration

• CI systems, CD pipelines, and dev tooling followed suit

And yet… Git itself didn’t change.

Users had to manually configure:

git config --global init.defaultBranch main

Git maintained the status quo to avoid breaking scripts, tutorials, legacy pipelines, and enterprise workflows that assumed master.

But as of Git 2.52, the team officially confirmed the upcoming switch. Git 3.0 completes that shift — finally aligning the CLI with modern platforms.

For most developers, nothing will change. For companies with giant monorepos, old CI systems, and dusty Bash scripts still referencing master… this may introduce breaking surprises.

What Else Is Coming in Git 3.0

Yes — the main migration is the headline. But the real story?
Git 3.0 contains several major under-the-hood upgrades developers should prepare for.

Let’s break them down.

1. SHA-256 Becomes Git’s Default Hash

For 19 years, Git has relied on SHA-1, a hash once considered secure — until attacks proved otherwise.

Git already introduced optional SHA-256 support in past releases, but Git 3.0 makes it the default.

Why This Matters

• Stronger cryptographic guarantees

• Modern security standards

• Future-proofing against collisions

Example: Checking hash algorithm

git hash-object --hash=sha256 README.md

Older SHA-1 hashes still work. Git includes a compatibility layer for mixed repos, but long-term:

New repos = SHA-256
Old repos = supported but encouraged to migrate

Expect enterprise-level migration tools to appear closer to Git 3.0’s release window.

2. A New Object Storage Format

Git’s traditional .git/objects structure predates Docker, SSDs, and even modern Linux kernels.
Git 3.0 introduces a faster, optimized storage backend designed to reduce overhead, especially on Windows and macOS where Git filesystem I/O is notoriously slow.

Potential Improvements

• Faster cloning

• Faster git checkout

• Reduced disk usage

• Better performance for huge monorepos

Example of inspecting storage backend:

git count-objects -vH

If you’ve ever worked in a repo with 5+ GB of history, this is very good news.

3. Rust Is Becoming Part of Git’s Core

Rust in Git? Yes. And not just experiments.

Git has been incrementally rewriting performance-critical components in Rust, similar to how Linux kernel and Python ecosystems are slowly adopting it.

Git 3.0 is the first release where Rust integration becomes:

• formal

• officially supported

• part of the build system

Why Rust?

• memory-safe

• fast

• perfect for complex low-level tooling

• easier contribution path for modern developers

Expect future Git releases to include more Rust rewrites, reducing segmentation faults, memory errors, and undefined behavior that C-based Git sometimes suffers from.

What Developers Should Do Before Git 3.0 Lands

Git 3.0 isn’t here yet (expected around late 2026), but you should prepare your workflow.

1. Check scripts that reference “master”

Look for anything like:

git checkout master
git push origin master
git merge master

Legacy CI/CD pipelines may break.

Rewrite them now:

git checkout main
git push origin main
git merge main

2. Update deployment pipelines

Examples of pipelines that may break:

• GitHub Actions

• GitLab CI

• Jenkins

• Bitbucket Pipelines

• Bash deploy scripts

Example for GitHub Actions:

on:
  push:
    branches:
      - main

If your workflows still use master, migrate ASAP.

3. Audit internal repositories

Teams often have:

• onboarding docs

• templates

• boilerplates

• shared Bash scripts

• automation tools

All of them should be updated to the new default branch terminology.

Examples for Updating Existing Repos

Rename master → main

git branch -m master main
git push -u origin main
git push origin --delete master

Or on GitHub:

gh repo edit --default-branch main

Will Existing Repositories Break?

No — Git is extremely conservative.

• Repos with master will continue to work.

• Branch names will not be auto-migrated.

• Git 3.0 only changes the default branch name for new repos.

Still, older systems expecting master may require manual fixes.

Why This Change Matters (Even If You Already Use main)

Git’s default branch name is referenced literally everywhere:

• programming tutorials

• textbooks

• CI examples

• open-source templates

• blog posts

• YouTube tutorials

• onboarding guides

Git 3.0’s switch makes the ecosystem consistent for the first time since 2020.

It’s less about politics and more about reducing confusion for new developers.

Git 3.0: A Symbolic Change With Real Technical Upgrades

To summarize:

✔ Git 3.0 default branch = main

✔ SHA-256 = default hash

✔ New optimized object storage

✔ Rust integration goes official

✔ Ecosystem modernized for future decades

It’s the biggest Git update since 2.0 in 2014 — not because of the branch rename, but because Git is evolving into a faster, safer, more modern tool.

By the time Git 3.0 drops, most developers won’t notice the transition.

But the few who do — especially those running large enterprise systems — should start preparing now.