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.

Introduction

Most Next.js projects never reach their full SEO potential. Common issues include:

• Pages are only partially indexed

• Missing structured data

• Incorrect Open Graph previews

• Wrong canonical URLs

• Broken sitemap configuration

• Duplicate metadata

Next.js 16 solves the majority of these problems — if you configure it correctly.
The App Router makes SEO predictable, typed, and deeply integrated into the framework.

In this guide, we cover everything you need to make your Next.js 16 project:

• fully indexable

• fast for Core Web Vitals

• optimized for Google Search & AI Overviews

• ready for rich snippets (FAQ, Article, Breadcrumbs, etc.)

• shareable in social networks

• correctly structured for sitemaps and robots.txt

This is the modern SEO stack for Next.js 16.

Rendering Strategies & SEO in Next.js 16

Next.js 16 supports three primary rendering strategies:

1. SSG — Static Site Generation

Best for:

• marketing pages

• blogs

• product listings

• documentation

SEO impact:

• Excellent

• Pre-rendered HTML

• Fastest load time

• Best choice for most public content

In the App Router, SSG happens automatically when no dynamic data is used.

2. SSR — Server-Side Rendering

Best for:

• user dashboards

• dynamic feeds

• constantly updated content

SEO impact:

• Great

• HTML is fresh on every request

• Slower than SSG but still SEO-friendly

In App Router, you enable SSR by calling dynamic data inside server components or route handlers.

3. CSR — Client-Side Rendering

Best for:

• admin panels

• private tools

• dashboards

SEO impact:

• Poor

• Content appears only after hydration

• Google might index it, but slowly and inconsistently

Avoid CSR for public pages.

4. ISR — Incremental Static Regeneration

Best hybrid strategy.
You statically pre-render pages but allow them to revalidate in the background.

export const revalidate = 60; // seconds

SEO impact:

• Fantastic — combines SSG speed with SSR freshness

• Ideal for blogs, product pages, news portals

Metadata API in Next.js 16

Next.js 16 uses a fully typed Metadata system that replaces:

❌ <Head> tags
❌ next-seo
❌ manually writing <meta> tags

Metadata configuration example: app/layout.tsx

import type { Metadata } from “next”;

export const metadata: Metadata = {
  metadataBase: new URL(”https://my-app.com”),
  title: {
    default: “My Awesome Site”,
    template: “%s | My Awesome Site”,
  },
  description: “Modern web platform built with Next.js 16.”,
  openGraph: {
    title: “My Awesome Site”,
    description: “Explore modern features and lightning-fast performance.”,
    url: “/”,
    siteName: “My Awesome Site”,
    images: [”/og-default.jpg”],
    locale: “en_US”,
    type: “website”,
  },
  twitter: {
    card: “summary_large_image”,
    title: “My Awesome Site”,
    description: “Next.js 16 powered web experience.”,
    images: [”/twitter-default.jpg”],
  },
  alternates: {
    canonical: “/”,
  },
};

Dynamic Metadata Example

For blog posts or products:

import type { Metadata } from “next”;
import { fetchArticle } from “@/lib/content-api”;

export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const article = await fetchArticle(params.slug);

  return {
    title: article.title,
    description: article.excerpt,
    alternates: {
      canonical: `/blog/${params.slug}`,
    },
    openGraph: {
      title: article.title,
      description: article.excerpt,
      url: `/blog/${params.slug}`,
      images: [article.coverImage],
      type: “article”,
    },
  };
}

Robots.txt in Next.js 16

Next.js 16 generates robots.txt through app/robots.ts.

import type { MetadataRoute } from “next”;

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: “*”,
        allow: “/”,
        disallow: [”/admin/”, “/api/private/”],
      }
    ],
    sitemap: “https://my-app.com/sitemap.xml”,
  };
}

No physical file required.

Sitemap Generation in Next.js 16

Native support via app/sitemap.ts:

import type { MetadataRoute } from “next”;

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: “https://my-app.com”,
      lastModified: new Date(),
      changeFrequency: “monthly”,
      priority: 1.0,
    },
    {
      url: “https://my-app.com/blog”,
      lastModified: new Date(),
      changeFrequency: “weekly”,
      priority: 0.8,
    },
  ];
}

Add dynamic URLs by fetching from your DB:

const posts = await getAllPosts();
return posts.map((post) => ({
  url: `https://my-app.com/blog/${post.slug}`,
  lastModified: post.updatedAt,
  changeFrequency: “weekly”,
  priority: 0.7,
}));

Structured Data / JSON-LD in Next.js 16

Next.js 16 supports JSON-LD natively.

Example for an article page:

export default function ArticlePage({ article }) {
  const articleJsonLd = {
    “@context”: “https://schema.org”,
    “@type”: “Article”,
    headline: article.title,
    description: article.excerpt,
    datePublished: article.publishedAt,
    author: {
      “@type”: “Person”,
      name: article.author,
    },
    image: article.coverImage,
  };

  return (
    <>
      <script
        type=”application/ld+json”
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(articleJsonLd)
        }}
      />
      {/* Content */}
    </>
  );
}

Works for:

✔ FAQ
✔ Breadcrumbs
✔ Product
✔ Sitelinks SearchBox
✔ Organization
✔ Events

Social SEO: Open Graph + Twitter Cards

Handled via Metadata API:

Example for page.tsx:

export const metadata = {
  openGraph: {
    title: “Discover New Features”,
    description: “Next.js 16 powerful tools for SEO and performance.”,
    images: [”/blog/og-preview.jpg”],
    type: “article”,
  },
  twitter: {
    card: “summary_large_image”,
    title: “Discover New Features”,
    description: “Learn about Next.js 16’s SEO capabilities.”,
    images: [”/blog/og-preview.jpg”],
  },
};

Canonical URLs & Multilingual SEO

export const metadata = {
  metadataBase: new URL(”https://my-app.com”),
  alternates: {
    canonical: “/blog/my-post”,
    languages: {
      “en-US”: “/en/blog/my-post”,
      “de-DE”: “/de/blog/my-post”,
    },
  },
};

Best Practices for SEO in Next.js 16 (2025 Edition)

✔ Always use Metadata API (never <Head>)

✔ Always set metadataBase

✔ Avoid CSR for public pages

✔ Use ISR (export const revalidate = …)

✔ Add structured data for Articles, Products, FAQs

✔ Provide canonical links

✔ Optimize Core Web Vitals

✔ Ensure OG + Twitter images are 1200x630

✔ Add sitemap and robots

✔ Validate everything in Google Search Console

✔ Use “AI-friendly” structured data for AEO (Answer Engine Optimization)

FAQ + JSON-LD dramatically increases chances of being featured by Gemini, ChatGPT Search, Perplexity, DuckDuckGo AI.

Common SEO Mistakes in Next.js

❌ Mixing next-seo with Metadata API
❌ Missing canonical links
❌ Using CSR for SEO pages
❌ Incorrect robots.txt blocking assets
❌ Forgetting Open Graph preview images
❌ Duplicate title/description tags
❌ Sitemap missing or wrong domain

Conclusion

Next.js 16 provides one of the most complete SEO toolsets available in any modern framework:

• Typed Metadata API

• Native structured data support

• Native sitemap + robots

• Advanced rendering strategies (SSG/SSR/ISR)

• Automatic image optimization

• Predictable URL routing

• Fast server components

When combined with modern SEO practices, correct metadata, structured data, and fast performance, your Next.js site becomes:

• easier to index

• AI-overview ready

• social-share optimized

• faster for users

• compliant with modern ranking signals (CWV, INP, AEO)

GPT-5.1 Emerges as a Top Performer in Coding Benchmarks

GPT-5.1 arrived in the API just a day after its ChatGPT release and is now integrated into the Codex coding agent along with new development tools. Built on the GPT-5 architecture, it inherits strong long-context reasoning, enabling deep repository analysis and high-quality patch generation.

On benchmarks, GPT-5.1 shows consistent gains over GPT-5. In SWE-bench Verified—where models fix real bugs—it achieved 76.3%, up from 72.8%, placing it among the best coding models available. Other tests (MMMU, GPQA, Tau²-bench) also show targeted improvements, putting GPT-5.1 alongside the latest Claude Sonnet and Doubao-Seed-Code models.

OpenAI also upgraded Codex with gpt-5.1-codex and gpt-5.1-codex-mini, tuned for long code analysis and agent workflows. Two major tools were added to the API:

• apply_patch for clean diff-based patch generation

• shell for safe, sandboxed command-line access

These updates are already being integrated into IDEs and agent systems that rely on multi-step edits and test-driven feedback loops.

API pricing for GPT-5.1 Thinking remains the same as GPT-5:

• $1.25 per 1M input tokens

• $10 per 1M output tokens

• $0.125 per 1M cached tokens

Prompt caching now lasts 24 hours, reducing costs for long sessions and large-project coding workflows.

📜 Articles & Tutorials

Google researchers released a 50-page guide on building practical, useful AI agents. It covers agent architecture, how an LLM operates inside an agent, tool integration and configuration, multi-agent coordination, and methods for evaluating performance. Original guide is available here.

Why is Zig so Cool?

Should You Stop Using Prisma? Why Database ORMs Might Be the Worst Thing That Happened to Backend Development

TypeScript’s rise in the AI era: Insights from Lead Architect, Anders Hejlsberg

Programming principles for self taught front-end developers

Perfectly Pointed Tooltips: To The Corners

From VS Code to Helix

Create Sick Web Animations in Three.js with GSAP

Frontend Aesthetics: A Prompting Guide

StyleX: A Styling Library for CSS at Scale

From GraphQL to Zod: Simplifying Arte’s API Architecture

3 MCP servers you should be using (safely)

Why we migrated from Python to Node.js

A One File PWA to Tell You When Time Is Lying

Nano Banana can be prompt engineered for extremely nuanced AI image generation

Pose Animator - An open source tool to bring SVG characters to life in the browser via motion capture

⚒️ Tools

FileMock: A Free Tool for Generating Test Files in Any Format

vibesdk - An open-source vibe coding platform that helps you build your own vibe-coding platform, built entirely on Cloudflare stack

Mediabunny: Read and Convert Media Files Directly in the Browser

bash-screensavers – Turn your idle shell into a visual playground.

Google osv-scanner

Placeholder Image Generator

Tiny Docker Healthcheck Tools That Cut Image Size by Megabytes

A developer released microcheck, a set of ultra-small, statically compiled utilities designed specifically for Docker healthchecks. Instead of installing curl or wget—adding 10MB or more to an image—you can drop in a single 70–500 KB binary that works even in scratch and distroless environments.

The toolkit includes:

• httpcheck — HTTP endpoint checks (~75 KB)

• httpscheck — same, with TLS and protocol autodetection (~500 KB)

• portcheck — TCP/UDP port checks (~70 KB)

Each tool returns standard Docker exit codes (0 = healthy, 1 = unhealthy), making them ideal for bare Docker setups or runtimes without built-in healthchecks.

Example:

# Before (+10MB)
RUN apt update && apt install -y curl
HEALTHCHECK CMD curl -f http://localhost:8080/ || exit 1

# After (+75KB)
COPY --from=ghcr.io/tarampampam/microcheck /bin/httpcheck /bin/httpcheck
HEALTHCHECK CMD [”httpcheck”, “http://localhost:8080/”]

They support major architectures (x86_64, ARM, ppc64le, s390x) and provide ready-to-use images.

Source code, examples, and binaries: https://github.com/tarampampam/microcheck

Nixopus - Open Source alternative to vercel, heroku, netlify with Terminal integration, and Self Hosting capabilities.

podman-desktop - Podman Desktop is the best free and open source tool to work with Containers and Kubernetes for developers. Get an intuitive and user-friendly interface to effortlessly build, manage, and deploy containers and Kubernetes — all from your desktop.

React Syntax Highlighter Demo

Gerbil - A desktop app to easily run Large Language Models locally.

OneUptime: The Complete Open-Source Observability Platform

📚 Libs

waveterm - An open-source, cross-platform terminal for seamless workflows

image-dimensions - Get the dimensions of an image

VibeThinker - Tiny Model, Big Logic: Diversity-Driven Optimization Elicits Large-Model Reasoning Ability in VibeThinker-1.5B

⌚ Releases

Node.js v25.2.0 (Current)

Sitemap.js 9.0: A Faster Way to Generate XML Sitemaps

Debounce 3.0: A Modern ESM Utility for Delaying Function Calls

bcrypt.js 3.0.3: Faster Pure-JS Password Hashing

Fortune Sheet 1.0.4 – Google Sheets/Excel-style spreadsheet control.

MongoDB Node.js Driver 7.0 Released

react-chrono 3.2.1 - Modern Timeline Component for React

pg-promise v12.3: A More Powerful Postgres Client for Node.js

Marked 17.0 – Markdown parser and compiler.

Fastify 5.6.2 released

React Email 5.0 Released

Prisma 6.19, Storybook 10, htmx 4.0 Alpha 1,

React Date Picker 8.9, react-jsonschema-form 6.1, React Native Apple Authentication 2.5,

Bun v1.3.2, Helm v4.0.0

📺 Videos

Why Ripple.js Is The Most Interesting Framework of 2025

MERN Stack Project: Video Calling Interview Platform with React & Node.js

This React Document Editor (DOCX) Is All Your App Needs

Extremely Underrated Programming Skills

The magic of auto-fit and auto-fill (and the difference between them)

account suspended from github

AWS Explained: The Most Important AWS Services To Know

$100 to train an LLM

AI Fatigue is real

From QA to DevOps - How I Learned DevOps to future-proof my career

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

OpenAI May Spend Over $5B a Year Running Sora, Analysts Say

Analysts estimate that OpenAI spends around $15 million per day to operate its video generator Sora—over $5 billion annually. The calculation is based on an estimated $1.3 cost per 10-second clip and a daily volume of roughly 11 million videos.

Despite these huge expenses, OpenAI is prioritizing market dominance: grow the user base now, collect training data, and monetize later. Free access to Sora helps expand adoption while generating massive datasets to improve model quality.

Sam Altman has already confirmed that free video generation will be reduced over time. According to him, no ad model can cover the current cost of producing short videos, so scaling and training remain the priority over immediate profit.

The towering costs highlight how resource-intensive large-scale AI video generation is—and reinforce OpenAI’s strategy to lead the generative video market.

Anthropic announced a major $50B investment program to expand AI infrastructure in the US. The company plans to build its own data centers in partnership with Fluidstack, a UK provider of GPU cloud services and custom AI-optimized clusters. According to Anthropic, the initiative is essential to meet rising demand for Claude models and to secure the compute needed for advancing frontier AI research.

Cloudflare Adds Python Support to Workflows for AI and Data Pipelines

Cloudflare has expanded its Workflows service by adding full Python support, previously limited to TypeScript. Workflows is used to orchestrate multi-step processes on the Workers platform, making it useful for automation, data processing, and AI agent pipelines.

Python support opens the door for developers working in AI/ML and large-scale data workflows. Use cases include data pipeline orchestration, ML model training, and complex agent systems—benefiting from built-in error handling and state persistence.

The feature is powered by Pyodide, a WebAssembly port of CPython, allowing Python code to run directly in the browser or on Cloudflare’s servers without installing a local interpreter. This makes Workflows a more flexible and accessible tool for enterprise and research applications.

Python integration also simplifies bringing existing Python libraries into Workflows, accelerating development and deployment of cloud-based solutions.

Report: 65% of Top AI Companies Leaked Secrets on GitHub

A new report from cloud security firm Wiz found that 65% of companies listed in the Forbes AI 50 leaked API keys, tokens, or other credentials on GitHub. Experts warn that such leaks could expose private models, training data, or internal infrastructure, creating serious security risks.

Most exposed secrets were found in Jupyter Notebooks and Python scripts, including tokens for Hugging Face, Azure, and W&B. In one case, a compromised Hugging Face token could have granted access to roughly a thousand private models, highlighting the severity of the issue.

Wiz publicly named only two companies—ElevenLabs and LangChain—that responded quickly and addressed their leaks. Nearly half of the other organizations did not reply to disclosure notifications, leaving their data and models potentially vulnerable.

Researchers emphasize that GitHub leaks remain one of the most common security failures in the AI ecosystem. They recommend strict secret-management practices, encryption, and automated pre-commit checks to prevent accidental exposure of sensitive credentials.

Disrupting the first reported AI-orchestrated cyber espionage campaign

Pakistani newspaper mistakenly prints AI prompt with the article

That wraps up this week’s highlights. The JavaScript world continues evolving through a mix of new frameworks, refined utilities, and ambitious platform updates — and following these shifts helps developers stay sharp and build better software. Check back next Friday for another curated roundup of tools and trends worth your attention.

As front-end developers, staying ahead of JavaScript’s evolution isn’t optional — it’s survival.
When the ES2025 proposals dropped, many developers (myself included) were shocked. JavaScript could finally be written like poetry — expressive, readable, and ridiculously elegant.

Let’s explore some of these groundbreaking new features that are shaping the next generation of JS.

🎯 Pattern Matching — Goodbye if/else Hell

Tired of endless conditionals?
Pattern matching transforms branching logic into declarative expressions.

Old approach:

function handleResponse(response) {
  if (response.status === 200 && response.data) {
    return response.data;
  } else if (response.status === 401) {
    throw new Error(’Unauthorized’);
  } else if (response.status === 404) {
    throw new Error(’Not Found’);
  } else if (response.status >= 500) {
    throw new Error(’Server Error’);
  } else {
    throw new Error(’Unknown Error’);
  }
}

New ES2025 magic:

function handleResponse(response) {
  return match (response) {
    when ({ status: 200, data }) -> data
    when ({ status: 401 }) -> throw new Error(’Unauthorized’)
    when ({ status: 404 }) -> throw new Error(’Not Found’)
    when ({ status: s if s >= 500 }) -> throw new Error(’Server Error’)
    default -> throw new Error(’Unknown Error’)
  };
}

It’s concise, readable, and surprisingly powerful — like switch statements on steroids.

Array pattern matching:

const analyzeArray = (arr) => match (arr) {
  when ([]) -> “Empty array”
  when ([x]) -> `Single element: ${x}`
  when ([x, y]) -> `Two elements: ${x}, ${y}`
  when ([first, ...rest]) -> `First: ${first}, Remaining: ${rest.length}`
};

🚀 Pipeline Operators — Fluent, Elegant Data Flow

The pipeline operator |> lets you chain operations without deep nesting.

Old way (callback spaghetti):

const result = encodeURIComponent(
  JSON.stringify(
    Object.values(
      Object.fromEntries(
        Object.entries(data).filter(([k, v]) => v != null)
      )
    )
  )
);

ES2025 way:

const result = data
  |> Object.entries(%)
  |> (%.filter(([k, v]) => v != null))
  |> Object.fromEntries(%)
  |> Object.values(%)
  |> JSON.stringify(%)
  |> encodeURIComponent(%);

Readable. Linear. Beautiful.
And yes — it supports async pipelines too!

🔒 Record & Tuple — True Immutable Data Structures

Finally, native immutability without libraries like Immutable.js.

// Record — immutable object
const user = #{
  id: 1,
  name: “Alice”,
  profile: #{
    age: 25,
    email: “alice@example.com”
  }
};

// Tuple — immutable array
const settings = #[”dark”, “en-US”, true];

Records and Tuples compare by value, not by reference:

#{ x: 1, y: 2 } === #{ x: 1, y: 2 } // true!

In React:

const UserCard = React.memo(({ user }) => {
  const processed = #{
    ...user,
    displayName: `${user.firstName} ${user.lastName}`
  };
  return <div>{processed.displayName}</div>;
});

No useMemo, no shallow comparison headaches.

💰 Decimal Type — Precision You Can Bank On

No more 0.1 + 0.2 !== 0.3 memes.

const total = 0.1m + 0.2m; // 0.3m
const tax = 19.99m * 0.08m; // 1.5992m

function calculateOrder(price, qty, taxRate) {
  const subtotal = price * qty;
  const tax = subtotal * taxRate;
  return (subtotal + tax).round(2);
}

The new Decimal type (m suffix) gives exact arithmetic — crucial for finance, billing, and scientific calculations.

🔄 Iterator Helpers — Superpowers for Generators

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) { yield a; [a, b] = [b, a + b]; }
}

const evenSquares = fibonacci()
  .take(20)
  .filter(n => n % 2 === 0)
  .map(n => n ** 2)
  .toArray();

Readable streaming, chainable processing, and lazy evaluation — finally built-in.

📦 Secure Module Imports — Explicit and Type-Safe

import config from ‘./config.json’ with { type: ‘json’ };
import styles from ‘./styles.css’ with { type: ‘css’ };
import wasmModule from ‘./algo.wasm’ with { type: ‘wasm’ };

Supports conditional and environment-based imports:

const config = await import(
  `./config-${process.env.NODE_ENV}.json`,
  { with: { type: ‘json’ } }
);

🛡️ Try Expressions — Elegant Error Handling

const data = try fetchUserData(userId) catch (err) {
  console.warn(’Failed to fetch user:’, err);
  return getDefaultUser();
};

Functional, concise, and expressive — no need for nested try/catch.

⏰ Temporal API — The End of Date() Confusion

Finally, JavaScript dates that make sense.

const now = Temporal.Now.instant();
const birthday = Temporal.PlainDate.from(’2024-01-15’);
const meeting = Temporal.ZonedDateTime.from(’2024-12-25T10:30:00[Asia/Shanghai]’);
const nextWeek = now.add({ days: 7 });

It’s like Luxon and Day.js, but native.

🎨 Smarter Template Strings — Write HTML, SQL, and Styles Safely

const renderHTML = (title, content) => html`
  <div class=”container”>
    <h1>${title}</h1>
    <div>${content}</div>
  </div>
`.dedent();

They now support auto indentation removal, safe variable insertion, and context-specific escaping for HTML, SQL, and CSS templates.

💡 Practical Tips for Adopting ES2025

• Start small: Try pipeline operators and pattern matching first.

• Use Babel plugins: Many features can be used today via transformations.

• Train your team: Modern syntax means modern mental models.

• Use TypeScript: Combine these features with static typing for the ultimate developer experience.

🧭 The Future Is Already Here

ES2025 is more than a syntax upgrade — it’s a mindset shift.
Cleaner, safer, and more expressive code will change how we reason about logic and structure.

JavaScript just became beautifully powerful.
Now it’s your turn to write it that way.

DeepSeek V3.1 Tops AI Stock Trading Challenge — With Some Fine Print

A new open benchmark called AI-Trader is testing how well AI models can handle real-world stock trading. Each model starts with $10,000 and trades Nasdaq-100 stocks using real-time prices and financial news.

After the first month, DeepSeek v3.1 leads with a +16.46% return, followed by MiniMax-M2 (+12.03%), GPT-5 (+9.98%), and Claude 3.7 Sonnet (+9.8%).
Meanwhile, Qwen3-max earned +7.96%, and Gemini-2.5-Flash barely moved the needle at +0.48% despite the most trades.
For comparison, a passive QQQ ETF tracker gained +5.39%, proving DeepSeek’s picks weren’t just lucky — they were smart.

Important Context

Still, the experiment comes with caveats:

• Simulated setup – models trade at the day’s opening price, not in real markets.

• Possible data leaks – some news lacked timestamps, letting models see “future” info.

• Short, bullish window – tech stocks like Nvidia and Microsoft dominated, inflating returns.

DeepSeek shows it can spot patterns and take confident bets, but calling it the best AI trader yet would be premature.

If the AI-Trader team adds hour-level trading and fixes data issues, it could become a reliable benchmark for evaluating how AIs handle risk, discipline, and adaptability in real financial markets.

📜 Articles & Tutorials

Build High-Quality, Domain-Specific Agents at 95% Lower Cost

Zip-bombs vs Aggressive AI Crawlers: Defensive Tactics for Sites

State-based vs Signal-based rendering

Build Your Own Database

Context Inheritance in TanStack Router

Practical Caching Recipes for Next.js (App Router)

Conditional Border Radius with Modern CSS

React Performance Optimization Trio Explained

Master Web Workers for Faster Front-End Apps

GSoC 2025, Building a Semantic Search Engine for Any Video

Mastering URLPattern for Cross-Platform Routing

Tanstack Directives and the Platform Boundary

Why developers are leaving Next.js for TanStack Start, and loving it

I Run a Full Linux Desktop in Docker Just Because I Can

Bun Install vs Bun Add: Choosing the Right Command

Mastering Bun for Maximum Developer Productivity

⚒️ Tools

VSCode Vercel Extention

Jujutsu — a version control system

Workflow DevKit - A toolkit for building Vercel Workflow integrations

WebMCP - WebMCP allows a website to be an MCP server. No sharing API Keys. Use any model you want.

ASCII Drawing Board

Hono CLI - Command Line Interface for Hono framework

Typing SVG Generator

Explore color as we see it - A tool to visualize colors in the Oklch color space

Helium - Private, fast, and honest web browser

Handy - the free and open source app for speech to text

📚 Libs

Yaak - The most intuitive desktop API client. Organize and execute REST, GraphQL, WebSockets, Server Sent Events, and gRPC 🦬

Ky - 🌳 Tiny & elegant JavaScript HTTP client based on the Fetch API

QGIS - QGIS is a free, open source, cross platform (lin/win/mac) geographical information system (GIS)

Ovi - Twin Backbone Cross-Modal Fusion for Audio-Video Generation

⌚ Releases

Vitest 4.0 is out!

Next.js 16 Released

Biome v2.3 Released

Bun v1.3.1 Released

Boa release v0.21

ESLint v9.38.0 released

Rspack 1.6.0 Beta 1

Storybook 10.0 Released — Major Update Adds Module Automocking, Next.js 16, Vitest 4, and Async Svelte Component Support

shadcn/ui 3.5 Released — Now Fully Compatible with Next.js 16

pnpm 10.20, Astro 5.15, uuidv47 v1.2.0

📺 Videos

Is this the end for Adobe?

The coolest feature of Hono

Next.js 16 Full Course | Build and Deploy a Production-Ready Full Stack App

I Will Never Use Shadcn Form Components Again

Cursor 2.0 is here… 5 things you didn’t know it can do

React wants to win you back…

Master React 19.2 Async Everywhere — Boost Performance

WebAssembly might actually save web dev…

React Native Tutorial for Absolute Beginners - Build a Mobile App in 2 Hours

99% of Developers Don’t Get PostgreSQL

Build Docker Images in a Git Repo but Only Committed Changes

The Standup - Jira Bought 2 Browsers???

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

OpenAI Reportedly Preparing for a $1 Trillion IPO

According to Reuters, OpenAI is preparing for an IPO following its recent restructuring into a public benefit corporation — a move that clears the path for going public. Sources say the company aims to file with the U.S. SEC in the second half of 2026, with a potential listing in early 2027.

The valuation under discussion is reportedly up to $1 trillion, which would make it one of the most significant IPOs in tech history. OpenAI expects to reach around $20 billion in annual revenue by the end of 2025, showcasing steady demand for its AI services.

The company is also in talks to raise over $60 billion in private funding before the IPO to expand its data centers, acquire chips, and strengthen partnerships like its collaboration with Microsoft.

While OpenAI told Reuters that “IPO is not a focus,” its restructuring and growing investor interest signal that a public listing in 2026–2027 is becoming increasingly likely.

New Domains Registrar API for domain search, pricing, purchase, and management (Vercel)

How Wi-Fi Signals Can Be Used to Detect Your Heartbeat The advance opens up new contactless heart-monitoring possibilities

That’s it for this week’s roundup of JavaScript Trends and Tools. If you found something worth trying, share it with your team or community. See you next Friday for another collection of tools and stories shaping the JavaScript landscape.

At first glance, JavaScript and blockchain seem worlds apart — one was designed to make buttons interactive, the other to power distributed, cryptographically secure systems.
And yet, JavaScript turned out to be the key that unlocked Web3 for millions of developers.

This article explores how the world’s most ubiquitous front-end language became the backbone of decentralized apps — from wallets and RPC nodes to smart contract tooling.

👉 For a deeper dive into Web3 development with JavaScript and related tools, check out Web3 on jsdev.space →

From UI Scripting to Blockchain Integration

Once upon a time, JavaScript was used to make buttons glow on a web page. Then it handled 3D graphics in browsers. Now, it’s used to move assets worth millions across the blockchain.

Even though many developers still joke that “you can’t trust JS with real logic,” Web3 engineers rely on it as their universal toolkit — it runs everywhere: inside wallets, browser extensions, backend services, and blockchain SDKs.

It’s almost ironic: in a world obsessed with cryptographic immutability, the most dynamic language ever invented became the bridge between humans and the blockchain.

How JavaScript Became the Language of Web3

It all started with ethers.js and web3.js — libraries that let browsers talk directly to the Ethereum blockchain.

Previously, you had to run a node, write code in Go or Python, and manually send JSON-RPC requests. Now, just a few lines of JS can do all that:

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(address, abi, signer);

await contract.transfer(recipient, amount);

Five lines — and your browser becomes a decentralized gateway.

The Frontend Is the New Wallet

What used to be a simple interface is now responsible for security and cryptographic signing.

In Web3, the phrase “frontend is the new backend” isn’t a joke — it’s a fact.

Functions like:

window.ethereum.request({ method: ‘eth_sendTransaction’, params: [...] });

turn a regular website into a financial application.

It’s powerful — and a bit terrifying.

Node.js: The Bridge Between Smart Contracts and DevOps

Node.js plays a central role in blockchain development.
Every deployment script, test suite, and migration tool runs on Node.

JavaScript drives:

• Contract deployment and verification

• Gas estimation and signature management

• Integration with RPC nodes and CI/CD pipelines

Even major infrastructure platforms — The Graph, Alchemy, Infura — provide official JavaScript SDKs.

JS isn’t just convenient anymore — it’s become the standard language of the Web3 stack.

WebAssembly, Rust, and the Future of JS on Blockchain

Some argue that JavaScript is being replaced by Rust or Solidity.
In reality, they complement each other.

• Rust compiles into WebAssembly (Wasm)

• Wasm runs inside environments orchestrated by JavaScript

Frameworks like NEAR, Solana, and ICP even allow developers to write smart contracts in TypeScript, compiling them into safe, low-level bytecode.

In other words, JavaScript is evolving into the glue that binds together contracts, APIs, and user interfaces.

Mistakes, Pain, and Progress

Let’s be honest — JavaScript wasn’t designed for financial logic.
Miss a single character in BigNumber, forget an await, and your transaction is gone.

These issues led to classic Web3 errors:

• Lost signatures

• Incorrect nonces

• Duplicate transactions

But this chaos also fueled innovation — better SDKs, stricter type systems, and safer wrappers.
Tools like TypeScript and modern EVM libraries now enforce type safety and input validation by default.

How JS Developers Changed the Blockchain Industry

Blockchain used to be the realm of cryptographers and C++ engineers.
Now, frontend developers have joined the game — and they’re reshaping it.

They bring UX, color, animations, and design systems into dApps.
They create buttons like Connect Wallet or Mint NFT that hide immense complexity behind a friendly UI.

Without JavaScript, Web3 would still look like a command-line interface for the elite.
Now, anyone with React and ethers.js can build a dApp that feels like a modern web app — but runs entirely on decentralized networks.

What Comes Next

Web3 is becoming modular.

Libraries like viem, wagmi, and rainbowkit are turning dApp development into a plug-and-play experience.

In a few years, developers might stop importing web3.js directly — but underneath, it will still be JavaScript running the show.
The same language that once handled a form’s “Submit” button now powers decentralized finance.

Conclusion

JavaScript has proven to be the most resilient programming language of our time.
It survived browser wars, the callback hell of jQuery, and the rise of frameworks — and now, it stands at the center of Web3.

Not because it’s perfect — but because it’s everywhere.

Where there’s an interface, there will eventually be JavaScript — even if that interface manages wallets, crypto assets, and millions in digital value.