DEV Community: JSDev Space

Friday Links #38 — Frontend Signals, AI Coding & JavaScript Releases

JSDev Space — Thu, 21 May 2026 09:41:57 +0000

Welcome to Friday Links #38 — another curated collection of updates from the fast-moving JavaScript and frontend ecosystem.

This week brings a mix of framework news, AI-assisted developer tooling, fresh open-source releases, experimental projects, performance discussions, and modern engineering ideas shaping how we build for the web. From React and TypeScript to Node.js, tooling, and AI workflows, here are the stories, launches, and links worth checking out.

📢 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

The Modern React Stack Explained for 2026

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

What's new in Node.js 26

The Truth About GPT Shortcuts and “Secret” AI Commands

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()

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

5 Docker Compose Settings Missing From Most Production Setups

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

When to use (and not use) CSS shorthand properties

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

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

jarne 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’s it for Friday Links #38.

Every week the developer ecosystem delivers new frameworks, smarter tooling, unexpected experiments, and enough releases to overflow your bookmarks folder. Our goal stays simple: surface the useful updates, interesting ideas, and projects that deserve a spot on your radar.

Thanks for reading — and if something here sparked an idea, taught you something new, or saved you a few hours, share it with another developer.

Friday Links #36: New JavaScript Tools, Frameworks, and Research

JSDev Space — Fri, 13 Mar 2026 11:47:27 +0000

The JavaScript ecosystem never slows down. Every week brings new tools, framework updates, performance benchmarks, and occasionally discoveries that reshape how we think about existing platforms.

Subscribe to JavaScript Friday Links

This week’s highlights cover a broad spectrum of topics. The release of Solid 2.0 Beta introduces a redesigned async model that simplifies reactive workflows. New benchmarking data compares modern JavaScript minifiers and shows how tools like SWC, Oxc, and Minify are redefining build performance. At the same time, researchers used AI-assisted analysis to uncover multiple previously undiscovered vulnerabilities in Firefox — demonstrating how machine learning is increasingly being used to audit complex codebases.

In this week’s Friday Links, we’ve collected the most interesting stories, tools, and discussions worth your attention.

🧠 Ecosystem Highlights

TypeScript 6 Prepares the Path to TS7

The TypeScript team released an early preview of TypeScript 6.

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

Key goals:

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

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

Deno 2.7 Improves Node Compatibility

The latest Deno runtime release continues improving Node compatibility.

Highlights:

improved npm integration
Node API compatibility
Temporal API stabilization

Example:

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

📜 Articles & Tutorials

Under the hood: Security architecture of GitHub Agentic Workflows

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

The Different Ways to Select <html> in CSS

The Big Gotcha of Anchor Positioning

Valibot vs Zod: A Lightweight Validation Alternative

How to steal npm publish tokens by opening GitHub issues

How to Decode a VIN in JavaScript

Why Blindly Using JSON.parse() Can Be Dangerous

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’s all for this week’s JavaScript roundup.

The ecosystem continues to evolve rapidly, and keeping track of new tools, releases, and discoveries can be challenging. Weekly collections like Friday Links aim to surface the most meaningful updates so developers can stay informed without being overwhelmed.

If you came across an interesting library, experiment, or article this week, consider sharing it — the next edition might include it.

Mastering JavaScript map(): Hidden Pitfalls and Smarter Patterns

JSDev Space — Mon, 17 Nov 2025 00:00:50 +0000

JavaScript’s Array.prototype.map() is simple on the surface yet surprisingly deep once you inspect how callbacks, types, coercion, and encoding work under the hood. One of the most infamous examples — [1,2,3].map(parseInt) — looks harmless but produces confusing output that often appears in interviews.

This guide breaks everything down clearly: how map() really works, why parseInt misbehaves, how NaN is detected, how wrapper objects make "text".length possible, and why emoji “length” is unintuitive. Each section includes modern examples and best-practice patterns.

1. How `map()` Actually Works

1.1 Syntax and Basic Behavior

map() creates a brand-new array using your callback’s return values. The original array is never modified.

const transformed = sourceList.map(
  (itemValue, itemPosition, originalList) => {
    return /* computed value */;
  },
  optionalThisArgument
);

1.2 Practical Examples

Example 1: Transforming numbers

const baseNumbers = [2, 5, 10];
const doubledValues = baseNumbers.map(num => num * 2);
console.log(doubledValues); // [4, 10, 20]

Example 2: Mapping object properties

const studentRecords = [
  { nickname: 'Lara' },
  { nickname: 'Tomas' }
];
const extractedNames = studentRecords.map(entry => entry.nickname);

Example 3: Using map() on array-like structures

const pseudoArray = { 0: 'x', 1: 'y', length: 2 };
const uppercased = Array.prototype.map.call(pseudoArray, val => val.toUpperCase());

1.3 Sparse Arrays and Missing Elements

const weird = [7, , 21];
const output = weird.map(unit => unit * 3);

2. Understanding `parseInt()` — and Why It Breaks with `map()`

2.1 Parsing Rules

parseInt('0xA', 16);   // 10
parseInt('10', 8);     // 8
parseInt('7.8', 10);   // 7
parseInt('xy', 10);    // NaN

3. Why `[1, 2, 3].map(parseInt)` Gives `[1, NaN, NaN]`

3.1 The Output

console.log([1, 2, 3].map(parseInt)); // [1, NaN, NaN]

3.2 The Real Reason

map() passes (value, index, array) while parseInt expects (string, radix).

3.3 Correct Solutions

['1', '2', '3'].map(str => parseInt(str, 10));
['1', '2', '3'].map(Number);

4. Special Numeric Values: `NaN` and `Infinity`

4.1 Properties of `NaN`

Number.isNaN(value);  
isNaN(value);

5. Wrapper Objects

"hello".length;

6. UTF-16, Unicode, and Emoji Length Issues

Array.from("👩‍💻").length;

7. Interviewer Expectations

Higher-order function comprehension
Callback mechanics
Debugging ability
Understanding coercion and Unicode

Conclusion

map() touches many deeper JS concepts, from number parsing to Unicode. Mastering these details helps you write safer, clearer, more predictable code — and ace interview challenges.

TypeScript Generics: The Magic Behind Flexible, Type-Safe Code

JSDev Space — Fri, 07 Nov 2025 07:26:45 +0000

For many developers, the first encounter with TypeScript generics can feel perplexing. Symbols like <T> appear abstract and mathematical — yet they unlock one of the language’s most powerful features. Generics make it possible to write code that is both type-safe and highly reusable, allowing developers to define patterns that adapt to different data structures without losing type precision.

This article examines the concept of generics in depth: what they are, why they matter, and how they elevate the architecture of TypeScript projects — from simple utility functions to enterprise-level abstractions.

🧩 Understanding Generics — From Function Parameters to Type Parameters

In plain JavaScript, functions often lose type context:

function mirror(value) {
  return value;
}

const n = mirror(42);       // returns 42, but type info is lost
const s = mirror("hello");  // returns "hello", but type info is lost

TypeScript addresses this with type parameters:

function mirror<T>(value: T): T {
  return value;
}

const n = mirror(42);       // number
const s = mirror("hello");  // string
const b = mirror(true);     // boolean

Here, <T> acts as a placeholder for a concrete type — a type variable that TypeScript infers automatically. This allows the function to maintain flexibility while preserving safety.

⚙️ The Fundamentals of Generics

1. Generic Classes

A simple example is a type-safe stack implementation:

class SafeStack<T> {
  private store: T[] = [];

  push(item: T): void {
    this.store.push(item);
  }

  pop(): T | undefined {
    return this.store.pop();
  }

  peek(): T | undefined {
    return this.store[this.store.length - 1];
  }

  count(): number {
    return this.store.length;
  }
}

const numbers = new SafeStack<number>();
numbers.push(10);
numbers.push(20);

const words = new SafeStack<string>();
words.push("hello");
words.push("world");

2. Multiple Type Parameters

Functions can also define relationships between multiple types:

function pairOf<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const one = pairOf("age", 25);      
const two = pairOf(1, true);        
const three = pairOf("config", { debug: true });

3. Constrained Generics

Developers can restrict what a generic type can accept:

interface WithLength {
  length: number;
}

function measure<T extends WithLength>(item: T): number {
  return item.length;
}

measure("hello");        
measure([1, 2, 3]);      
measure({ length: 5 });  
// measure(42);          // Error: number has no length

💼 Practical Use Cases

1. Generic API Responses

Generics are extremely useful in API and data-handling layers:

interface ApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
  timestamp: number;
}

async function apiFetch<T>(url: string, opts?: RequestInit): Promise<ApiResponse<T>> {
  const res = await fetch(`/api/${url}`, opts);
  const json = await res.json();
  return json as ApiResponse<T>;
}

interface User {
  id: number;
  name: string;
  email: string;
}

interface Product {
  id: number;
  title: string;
  price: number;
  category: string;
}

const userRes = await apiFetch<User>("users/1");
console.log(userRes.data.name);

const prodRes = await apiFetch<Product>("products/12");
console.log(prodRes.data.price);

2. Utility Function Libraries

Generic utilities enhance flexibility and type inference:

function filterList<T>(arr: T[], test: (item: T, i: number) => boolean): T[] {
  return arr.filter(test);
}

function mapList<T, U>(arr: T[], mapper: (item: T) => U): U[] {
  return arr.map(mapper);
}

function pick<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

function combine<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

These functions scale seamlessly across data structures, avoiding repetitive type definitions.

3. Type-Safe React Hooks

In React applications, generics help ensure predictable form and state handling:

import { useState, useCallback } from "react";

function useForm<T extends Record<string, any>>(initial: T) {
  const [form, setForm] = useState<T>(initial);

  const update = useCallback(<K extends keyof T>(key: K, val: T[K]) => {
    setForm((prev) => ({ ...prev, [key]: val }));
  }, []);

  const reset = useCallback(() => setForm(initial), [initial]);

  return { form, update, reset, setForm };
}

This design makes custom hooks fully type-aware — every field and update operation is validated at compile time.

🧠 Advanced Generic Techniques

Conditional Types

type IsString<T> = T extends string ? "yes" : "no";
type A = IsString<string>; 
type B = IsString<number>; 

type UnwrapArray<T> = T extends (infer U)[] ? U : never;
type Numbers = UnwrapArray<number[]>; 
type Words = UnwrapArray<string[]>;

Mapped Types

type Optional<T> = { [K in keyof T]?: T[K] };
type Immutable<T> = { readonly [K in keyof T]: T[K] };

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Optional<User>;
type ReadonlyUser = Immutable<User>;

⚠️ Common Pitfalls and Best Practices

Avoid overengineering.

Excessively complex generic signatures reduce readability.
Use default type parameters.

   interface PageOptions<T = any> {
     page: number;
     size: number;
     filter?: (x: T) => boolean;
   }

Leverage type inference.

   function buildArray<T>(...items: T[]): T[] {
     return items;
   }

   const nums = buildArray(1, 2, 3);    
   const texts = buildArray("a", "b");  
   const mix = buildArray(1, "two");

🏁 Conclusion

Generics are one of TypeScript’s defining strengths. They allow developers to build systems that are expressive, safe, and reusable — without compromising flexibility. By thinking in terms of generic patterns rather than fixed types, teams can write libraries, hooks, and utilities that adapt naturally to any use case.

Understanding generics is more than mastering syntax; it’s about adopting a mindset where code scales with types. Once internalized, generics turn abstract type definitions into practical tools that make TypeScript both elegant and powerful.

Read more about JavaScript Development and subscribe to our weekly newsletter.

Friday Links #30 — JavaScript Updates, Tools, and Inspiration

JSDev Space — Fri, 17 Oct 2025 13:12:03 +0000

Welcome to Friday Links #30, your curated roundup of the week’s most notable happenings in the JavaScript world. From emerging frameworks and performance breakthroughs to creative experiments and open-source gems, this week’s collection is packed with fresh insights and practical discoveries for web developers.

📜 Articles & Tutorials

Open Social

The future of large files in Git is Git

Best Practices for Building Agentic AI Systems: What Actually Works in Production

Howto Use JavaScript reduce() Like a Pro

How I Built a Full-Stack React Framework 4x Faster Than Next.js With 4x More Throughput

Here's How To Build Fullstack Agent Apps (Gemini, CopilotKit & LangGraph)

Run Express.js on Cloudflare Workers

Next.js App Router: Dynamic, Grouped, Parallel & Intercepted

GitHub Copilot CLI: How to get started

CSS :is() :where() the Magic Happens

The thing about contrast-color

Modern CSS Round-Out Tabs

Mastering Ethers.js — From MetaMask to Smart Contracts

Building Web3 Frontends with React and wagmi

15 Recent Node.js Features that Replace Popular npm Packages

Building an Async Combobox with useSuspenseQuery() and useDeferredValue()

HTML’s Best Kept Secret: The <output> Tag

⚒️ Tools

Mirrow: A DSL for Dynamic SVG Creation and Animation — Instead of treating SVGs as static graphics, Mirrow reimagines them as interactive, code-defined visuals. It introduces a domain-specific language (DSL) that lets you generate and animate SVGs programmatically, making them flexible, reusable, and expressive. Visit the playground to experiment with Mirrow syntax and bring your own SVG animations to life in real time.

ogImage.click

Make Graph

ai-digest: A CLI for Summarizing Your Entire Codebase — This command-line tool automatically compiles your entire project into a single, structured Markdown file. Perfect for feeding into Claude projects, custom ChatGPTs, or AI code assistants, it gives large models full context of your codebase for analysis, documentation, or refactoring.

Crosspost - A JavaScript utility for posting across multiple social networks at once

stackoverflow.ai

n8n-MCP - A MCP for Claude Desktop / Claude Code / Windsurf / Cursor to build n8n workflows for you

📚 Libs

memvid - Video-based AI memory library. Store millions of text chunks in MP4 files with lightning-fast semantic search. No database needed.

PageLM - PageLM is a community driven version of NotebookLM & a education platform that transforms study materials into interactive resources like quizzes, flashcards, notes, and podcasts.

Twake Drive - The open-source alternative to Google Drive.

ReactToPrint - Print React components in the browser

jsonriver - A simple, fast streaming JSON parser built on standards.

xmlbuilder2 - An XML builder for node.js

Coding Agent Template - Multi-agent AI coding platform powered by Vercel Sandbox and AI Gateway

IsAgent SDK - A lightweight SDK for building agent-specific experiences in your app.

react-map-gl - React friendly API wrapper around MapboxGL JS

reactylon - A powerful multiplatform framework built on top of Babylon.js and React, designed to create interactive and immersive XR experiences.

PlayCanvas Model Viewer - 3D Model Viewer supporting glTF and 3D Gaussian Splats

⌚ Releases

React Compiler v1.0 — The React team has officially declared the compiler stable and ready for production use. It automatically applies memoization optimizations based on static code analysis, reducing unnecessary re-renders and improving performance without manual tweaks. You can still rely on useMemo and useCallback for fine-grained control when needed, but many optimizations are now handled seamlessly by the compiler itself.

React Native 0.82 - A New Era

Bun 1.3 Released

Node.js v24.10.0 (Current)

Next.js 16 (beta) released

New Release: CrateDB 6.0

llama.ui v2.38.2 released

playwright v1.56.0 released

Happy DOM v20.0 released

openai-node v6.4.0 released

React Admin v5.12.0, TanStack Router 1.133, React Hook Form v7.65.0, Pixijs v8.14.0

📺 Videos

RabbitMQ Crash Course #1 – Setup, Queues & Why Message Brokers Matter Node js + Docker

React Coding Interview: Kent C. Dodds, Jack Herrington & Roadside Coder Solve React HARD Question

Meta's most dystopian product yet...

99% of Developers Don't Get PostgreSQL

AI Coding Sucks

Big Tech Is Faking Revenue

Extremely Underrated Programming Skills

🎤 Talks & Podcasts

CSS Podcast 93: State queries in 2025

🗞️ News & Updates

🕹️ The JS13KGames 2025 competition has wrapped up, and the winners have been announced! Explore this year’s top entries — all built in under 13KB of JavaScript — to play inventive mini-games or dive into their clever, size-optimized source code.

npm Adopts OIDC for Trusted Publishing in CI/CD Workflows

Triplex Goes Open Source and Moves to Poimandres

🤖 Mastra, a rapidly growing TypeScript-based AI framework founded by former members of the Gatsby team, has secured a $13 million seed round to accelerate development and expand its ecosystem of AI tools for developers.

That’s a wrap for this edition of Friday Links! Keep exploring, building, and sharing your favorite finds with the community. Check back next Friday for another round of JavaScript updates, tools, and ideas that push the web forward.

Understanding CSS Priority — The Cascade Explained

JSDev Space — Thu, 16 Oct 2025 15:11:30 +0000

Mastering the Priority of CSS Styles

CSS Cascading and Specificity are the foundation of how browsers decide which styles to apply. In this article, we’ll explore how multiple CSS rules interact and which one takes precedence — from classic specificity formulas to modern @layer rules.

🤔 Let’s Start with a Simple Example

When multiple CSS classes are applied to one element:

<div class="blue red green">What color is this text?</div>

.blue { color: blue; }
.red { color: red; }
.green { color: green; }

The final color is green.

This happens because CSS follows a cascading order, where later declarations take precedence when all else is equal.

🕰️ The Birth of Cascading

When CSS was first introduced in 1996, cascading was its key concept.

The design goals were:

🎯 Predictability: Developers can reason about the final result.
⚙️ Flexibility: Allow style overrides and inheritance.
⚖️ Balance: Respect both author and user styles.

This concept, created by Håkon Wium Lie, was meant to handle conflicts between multiple sources — author styles, user styles, and browser defaults.

⚖️ The System of Cascading Priorities

🎯 Specificity Formula

Specificity is represented as a four-part tuple:

(Inline, ID selectors, Class/Attribute/Pseudo-class, Element selectors)

Style Type	Weight	Example
Inline style	1000	style="color: red"
ID selector	100	#header
Class/attribute/pseudo-class	10	.active, [type=text]
Element selector	1	div, p
Universal selector	0	*

🔍 Real Examples

/* Specificity: (0, 0, 1, 1) = 11 */
div.blue { color: blue; }

/* Specificity: (0, 1, 0, 0) = 100 */
#content { color: red; }

/* Specificity: (0, 0, 2, 1) = 21 */
div.blue.active { color: green; }

/* Inline style: (1, 0, 0, 0) = 1000 */
<div style="color: yellow;">

⚠️ Note: Ten class selectors will never outweigh a single ID selector.

📝 Overriding Rules at Equal Priority

When selectors share the same specificity, source order decides which one wins.

.blue { color: blue; }
.red { color: red; }
.green { color: green; }

HTML order doesn’t matter — only the CSS definition order does:

<div class="green blue red">Green</div>
<div class="red green blue">Green</div>
<div class="blue red green">Green</div>

🎨 Priority in Complex Scenarios

<!DOCTYPE html>
<html>
<head>
<style>
  div.red { color: red; }           /* 11 */
  .blue.text { color: blue; }       /* 20 */
  #content { color: green; }        /* 100 */
  .yellow { color: yellow; }        /* 10 (later defined) */
</style>
</head>
<body>
  <div id="content" class="red blue text yellow">
    What color is this?
  </div>
</body>
</html>

✅ Result: Green — because the ID selector has the highest priority.

If the ID is removed, blue.text (20) wins over red (11).

⚡ The Power of `!important`

.blue { color: blue !important; }
.red { color: red; }
.green { color: green; }

!important overrides all other declarations, even with lower specificity.

💡 Usage Tips

✅ Use for overriding library defaults or utility classes.

❌ Avoid in component-level styles — it leads to “priority wars.”

🛠️ Best Practices in CSS Architecture

A recommended CSS priority structure:

/* 1. Reset styles — lowest priority */
* { margin: 0; padding: 0; }

/* 2. Base elements */
h1, h2, h3 { font-family: Arial, sans-serif; }

/* 3. Layout classes */
.container { max-width: 1200px; }

/* 4. Components */
.button { padding: 8px 16px; }

/* 5. States */
.button.active { background: blue; }

/* 6. Utilities — highest */
.text-center { text-align: center !important; }

🎯 Avoiding Conflicts

Use BEM naming:

   .card__title--highlighted { color: red; }

Instead of deeply nested selectors:

   .card .content .title.highlighted { color: red; }

Modular CSS-in-JS:

   const styles = {
     title: { color: "red" },
     subtitle: { color: "blue" },
   };

Custom properties for flexibility:

   .theme-blue { --primary-color: blue; }
   .button { color: var(--primary-color, gray); }

🆕 Modern CSS: Cascade Layers

CSS now includes the powerful @layer feature:

@layer base, components, utilities;

@layer base {
  h1 { color: black; }
}

@layer components {
  .title { color: blue; }
}

@layer utilities {
  .text-red { color: red; }
}

Cascade order: base < components < utilities

This gives fine-grained control and clarity for large projects.

🔮 Logical Properties and Modern Trends

As CSS evolves with globalization and layout flexibility, logical properties change how cascading behaves:

.text {
  margin-inline-start: 20px;
  margin-left: 10px;
}

In browsers supporting logical properties, margin-inline-start takes precedence over margin-left.

📚 References

Friday Links 26: This Week in JavaScript

JSDev Space — Fri, 22 Aug 2025 06:08:05 +0000

It’s Friday, which means another edition of Friday Links! In issue #26 we’ve gathered the most interesting JavaScript updates from around the community. From new libraries to thoughtful guides and project showcases, here’s what caught our eye this week.

Subscribe to Friday Links here!

Allie: Human-Like AI Chess Bot on Lichess

Since launch on Lichess, the AI bot Allie has played over 11,600 games, winning more than 6,800. The bot is free and open source, available only in blitz mode, where you can also watch its games live.

Created by Carnegie Mellon PhD student Yimin Zhang, Allie was trained not on engine calculations but on 91 million human games, making its style strikingly human-like. Researchers note it performs at grandmaster level, while remaining an excellent and natural sparring partner for learning.

DBQuacks: A Quest Game to Learn SQL

DBQuacks is a new SQL learning quest game. The first chapter (38 levels) introduces SQL basics with DuckDB through puzzles and story-driven tasks. Players solve mysteries by writing correct SQL queries, with hints and references available. A second chapter with advanced SQL features is coming soon.

📜 Articles & Tutorials

How to Get Started with AWS in 2025

How to Run Frontend & Backend Together with One Command (No Docker Needed)

How to optimize your Next.js app with after()

The Future of JavaScript: What Awaits Us

The Next.js 15 Streaming Handbook — SSR, React Suspense, and Loading Skeleton

An Interactive Guide to SVG Paths

Build a Local AI Chatbot with Ollama, React & Express

How We Exploited CodeRabbit: From a Simple PR to RCE and Write Access on 1M Repositories

Mastering Gemini CLI: Create, Optimize & Automate Commands

Visualizing distributions with pepperoni pizza (and javascript)

Why LLMs Can't Really Build Software

Howto Simplify Redux with RTK Query in React Projects

Teaching GPT-5 to Use a Computer

Accelerating API Development with TanStack Query

Make any website load faster with 6 lines of HTML

Using GitHub Pages as a URL shortener / redirection service

Building Bluesky Comments for My Blog

Fixing Vite Module Federation Errors When Starting Apps Separately

Liquid Glass, but in CSS

⚒️ Tools

🍃 Ethersync

Ethersync enables real-time collaborative editing of local text files. You can use it for pair programming or note-taking, for example. It's the missing real-time complement to Git!

WebSocket DevTools - Complete WebSocket Traffic Control with advanced proxy, simulation, and blocking capabilities

Github

PongHub - Free endpoint monitoring. One-click deployment.

JWTAuditor - A tool to audit JWTs (JSON Web Tokens) for security vulnerabilities and best practices.

MCP Tools - A comprehensive command-line interface for interacting with MCP (Model Context Protocol) servers.

Jobpare CV Generator - A tool to generate professional CVs in various formats.

Trackio - A lightweight, local-first, and free experiment tracking Python library built on top of 🤗 Datasets and Spaces.

Luminal - Deep learninglibrary that uses search-based compilation to achieve high performance.

AGENTS.md - A simple, open format for guiding coding agents, used by over 20k open-source projects.

rendergit - Render any git repo into a single static HTML page for humans or LLMs.

llama-scan - A tool for converting PDFs to text files using Ollama.

Anthropic Cookbook - A collection of examples and best practices for using Anthropic's AI models.

Panda CSS - A CSS-in-JS library that allows you to write CSS in JavaScript with a focus on performance and developer experience.

fuite - A tool to detect memory leaks in JavaScript applications by tracking memory usage over time.

AnimateIcons - A sleek React library that transforms SVGs into smooth, purposeful animations — lightweight, customizable, and built with motion/react.

📚 Libs

Motia - local-first tool for creating professional resumes from JSON data and HTML templates. Features web editor, CLI tool, role-specific guidance, and PDF output. Perfect for developers and professionals who want full control over their CV presentation.

Open Lovable - About
🔥 Clone and recreate any website as a modern React app in seconds

Claudable - Connect Claude Code. Build what you want. Deploy instantly.

KittenTTS - is an open-source realistic text-to-speech model with just 15 million parameters, designed for lightweight deployment and high-quality voice synthesis.

React Native WebGPU - A React Native library that provides WebGPU support for high-performance graphics and compute on mobile devices.

CryptoES - A JavaScript library for cryptographic operations, including hashing, encryption, and decryption.

node-soap - A SOAP client and server for Node.js, allowing you to create and consume SOAP web services.

syntax-highlight-element - A web component for syntax highlighting code snippets in HTML documents, supporting multiple languages and themes.

⌚ Releases

Git 2.51 Released: Preparing for Git 3.0

On August 18, 2025, Git 2.51 was released with 506 changes from 91 contributors. This update prepares for Git 3.0, which will switch the default hash from SHA-1 to SHA-256 and adopt the reftable backend. Key improvements include:

git cat-file: better handling of missing objects and submodules.
git log: faster history search with Bloom filters.
git switch & git restore: now stable replacements for git checkout.
git whatchanged: deprecated, set for removal in Git 3.0.
New options: --start-after for git for-each-ref, --compact-summary for git merge and git pull.
Performance boosts: git push and git fetch are faster, especially with reftable (22× faster fetch, 18× faster push in large repos).
C99 support: broader use of modern C features.
Patch policy: pseudonyms now allowed for contributions.

Next.js 15.4 Released - This release includes new features like next/image improvements, enhanced performance, and more.

Autobase 2.3.0 released

DeepSeek-v3.1 Release

Announcing Nuxt 4.0

Astro 5.12 Released

Node.js v24.6.0 (Current) Released

React Native 0.81 Released

NVM Desktop v4.1.0

📺 Videos

How to Create a Minimap in Three.js with React Three Fiber (Drei View)

Build & Deploy 3 Full-stack Mobile Apps That’ll Get You Hired | Full 10-Hour React Native Course

Multi-Tenant SaaS Architecture in 3 Simple Steps

Linux Full Course - 10 Hours [2025]

Build and Deploy a Multi-Vendor E-Commerce Marketplace with Nextjs, React, Stripe Connect, MongoDB

Create an LMS Course Platform with Next.js, Arcjet, Better-Auth, and Stripe

Build an Enterprise Nextjs Rental App | AWS, EC2, Cognito, Shadcn, RDS, S3, Node, React

Build an AI-Powered Job Board From Scratch with Next.js 15, Drizzle, Tailwind

Next.js 15 Full Course 2025 | Drizzle, Better Auth, Postgres, TypeScript | 14 Hours

Build and Deploy Full Stack AI GitHub SaaS | Next JS 15, Google Gemini AI, Assembly AI, Stripe

Build and Deploy a B2B SaaS AI Support Platform | Next.js 15, React, Convex, Turborepo, Vapi, AWS

Let's build a multi-vendor E-Commerce SaaS by using Microservice Architecture, ImageKit

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

OpenAI CFO: $1B Monthly Revenue, But Compute Shortage Looms

In an interview with CNBC, OpenAI CFO Sarah Friar revealed the company generated over $1 billion in revenue in July 2025, projecting $12.7B for the year. Yet the main challenge remains severe compute shortages.

Key points:

Stargate project launched to expand compute, with partners including Oracle and CoreWeave.
Microsoft partnership remains central — as both investor and primary compute provider.
Despite a rocky GPT-5 launch, OpenAI has seen rising Plus and Pro subscriptions.
Analysts expect an $8B negative cash flow in 2025; Stargate’s long-term investment is valued at $500B, with Altman hinting at “trillions” for future data centers and chips.
Friar notes OpenAI may one day sell compute to third parties, becoming an “AWS for AI”, but for now lacks the capacity even for its own work.

IBM & NASA Launch Surya AI to Predict Solar Storms

IBM and NASA have unveiled Surya, an open-source AI model designed to forecast solar flares and coronal mass ejections before they strike Earth. Built on the world’s largest heliophysics dataset, Surya analyzes high-resolution solar images to predict dangerous events that can disrupt satellites, power grids, telecoms, and navigation systems.

Highlights:

Trained on 9 years of NASA’s Solar Dynamics Observatory images.
Improves solar flare classification accuracy by 16%.
First steps toward visual forecasting of flares, with warnings up to 2 hours ahead.
Openly available for research on Hugging Face.
Builds on IBM & NASA’s earlier Prithvi Earth observation AI models.

Researchers call Surya a “weather forecaster for the Sun”, a critical step in protecting modern infrastructure from Carrington-level solar storms.

That’s a wrap for Friday Links 26. We hope these resources give you fresh ideas to explore over the weekend. Share this roundup with your fellow developers, and check back next Friday for more highlights from the JavaScript ecosystem.

JavaScript Weekly #25 – What Devs Loved This Week (Aug 01, 2025)

JSDev Space — Fri, 01 Aug 2025 12:19:30 +0000

Welcome to Issue #25 of the JavaScript Weekly Roundup — your go-to source for what’s new, useful, and exciting in the JavaScript world.
Each Friday, we gather the most talked-about updates, from powerful new libraries to smart tips and ideas worth exploring. Whether you’re polishing components or digging into server-side logic, this list will keep your dev stack fresh.

Mistral Launches Codestral Ecosystem as Enterprise AI Coding Suite

Mistral has introduced its response to GitHub Copilot: a comprehensive enterprise development ecosystem powered by its Codestral model family. At the core is Codestral 25.08, an updated model fine-tuned for real-world software environments.

🔍 Model Improvements

Codestral 25.08 delivers measurable gains based on real codebase benchmarks:

✅ 30% more accepted completions
📈 10% more preserved code after applying suggestions
❌ 50% fewer overly long or incorrect generations

These enhancements aim to streamline development and reduce common friction points in AI-assisted coding—especially in enterprise-scale projects.

Codestral isn’t just a model update—it’s Mistral’s strategic move toward building a full-featured coding assistant ecosystem for large teams and production systems.

# Qwen 3 Coder: Alibaba’s Open 480B MoE Model for Programming

Alibaba has released Qwen 3 Coder, an open-source Mixture-of-Experts (MoE) model built for programming tasks. The model boasts 480 billion parameters (with 35B active at any time) and was trained on 7.5 trillion tokens, of which 70% are code. It’s designed to solve real-world tasks and demonstrates performance comparable to Claude 4 Sonnet on code and tool usage benchmarks.

🧠 Key Features

480B total / 35B active parameters
7.5T tokens training corpus, heavily code-focused
256K context length, scalable up to 1M tokens using YaRN
Trained using RL at scale, with 20K parallel environments
Emphasizes real-world scenarios and tool usage

The training approach lets the model learn from its own mistakes, thanks to a large-scale reinforcement learning setup.

💰 Pricing & Availability

The major downside of Qwen 3 Coder is its expensive API access:

At 1M context tokens, pricing can reach $6–$60 per million tokens
Developers are encouraged to use alternative API providers that support up to 262K context and are 3–4x cheaper

🔗 GitHub Repository

The model and further resources are available here:

👉 https://github.com/QwenLM/Qwen3-Coder

Qwen 3 Coder is a major step forward in open LLMs optimized for software development and tool interactions. While pricing may be high for some use cases, the availability of alternatives makes it flexible for research and production alike.

📜 Articles & Tutorials

Dynamic nth-child() using sibling-index() and if()

Design to Code with the Figma MCP Server

CI/CD Best Practices for Microservices Architecture

Using the OpenTelemetry Operator to boost your observability

Architecting with Constraints: A Pragmatic Guide

React Server Components: How We Got Here

How to Upload Large Objects to S3 with AWS CLI Multipart Upload

How To Create An NPM Package

Leveraging Docker with TensorFlow Models & TensorFlow.js for a Snake AI Game

The Gap Strikes Back: Now Stylable

Parsing 1 Billion Rows in Bun/Typescript Under 10 Seconds

Liquid Glass on the Web

Creating a scroll-spy with 2 lines of CSS

A Full Code Agent in 200 Lines—Here’s How

Tailwind CSS Grid: Complete Guide & Examples

Howto Generate a Calendar Table in SQL

Hydration in React 19: Smarter, Faster, and Fully Optimized

Git Smarter: 7 Essential Commands Every Dev Should Know

⚒️ Tools

OpenCut - Cap-Cut's open-source alternative

FilePursuit - is a free search tool for finding files online—documents, APKs, ZIPs, images, videos, books, and PDFs—scanned directly from public sources.

Craft Beautiful Patterns Backgrounds

Canine - A modern, open source alternative to Heroku

JavaScript Visualizer

docker-commons - All common docker scripts in one place

PicoSSG - The anti-framework static site generator. No config. No nonsense Just files in, files out.

FossFLOW - Make beautiful isometric infrastructure diagrams

Chatwoot - An Open Source Zendesk Alternative

zen - Selfhosted notes app. Single golang binary, notes stored as markdown within SQLite, full-text search, very low resource usage

CSS Layout Generator

The Open-Source Agentic Browser

SVG Doodles Collection

📚 Libs

awesome-chatgpt-prompts - This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.

apexcharts.js - 📊 Interactive JavaScript Charts built on SVG

chili3d - A web-based 3D CAD application for online model design and editing

upyo - Upyo is a simple and cross-runtime library for sending email messages using SMTP and various email providers. It works on Node.js, Deno, Bun, and edge functions.

concaveman - A very fast 2D concave hull algorithm in JavaScript

ReproZip - is a tool that simplifies the process of creating reproducible experiments from command-line executions, a frequently-used common denominator in computational science.

⌚ Releases

Next.js 15.4 Released

Astro 5.12

RustDesk 1.4.1 - a self-hosted open-source remote desktop app and TeamViewer alternative, was released in July 2025. Built with Rust and Dart, it's AGPL-licensed.

Sourcebot v4.6.0 Released - a self-hosted tool that helps you understand your codebase.

PixiEditor 2.0 - a FOSS Universal 2D Graphics Editor is here!

Announcing Nuxt 4.0

Bun v1.2.19 Released

Tiptap V3 Released

openpgpjs v6.2.0 Released - OpenPGP implementation for JavaScript

ESLint v9.31.0 released

oxlint v1.8.0 - ⚓ A collection of JavaScript tools written in Rust.

wasp v0.17.0 - The fastest way to develop full-stack web apps with React & Node.js.

📺 Videos

How I Built a Web Scraping AI Agent - Use AI To Scrape ANYTHING

99% of Developers Don't Get Git Rebase

Bash Scripting Tutorial for Beginners

How n8n Node Can Cut Your Costs by 90%

React Native Bootcamp in 30 HOURS for FREE 🎉

How I Built My Own Shadcn Library

10x Your Neovim Experience

Build A Sick AI-Voice Memo App W/ Next.js + OpenAI Whisper (Background Jobs / Cron Job / Inngest)

Build and Deploy a Full Stack Car Rental Booking App using React js & ImageKit | MERN Stack Project

Build an Enterprise Ready AI Powered Applicant Tracking System

DON'T Use JSON.parse & JSON.stringify

Introducing React Native Reanimated 4

🎤 Talks & Podcasts

No content this week 😢

🗞️ News & Updates

GitHub Copilot has surpassed 20 million users, Microsoft CEO Satya Nadella announced. GitHub confirmed the number reflects total usage to date.

Figma raised $1.2B in its IPO, selling 36.9M shares at $33 each—above range. The company is now valued at $16.1B ($18.5B with options), nearing its scrapped Adobe deal.

Thanks for reading this week’s roundup!
We’ll be back next Friday with more handpicked JS content. Until then, keep experimenting, stay curious, and build cool things. 🚀

Say Goodbye to Try/Catch Blocks with the ECMAScript ?= Operator

JSDev Space — Tue, 10 Jun 2025 02:57:28 +0000

The ECMAScript proposal for the safe assignment operator (?=) introduces a revolutionary way to handle errors in JavaScript. It borrows ideas from Rust, Go, and Swift—languages known for their clean error-handling patterns—and brings those benefits to JS developers.

Instead of wrapping every async call in try/catch blocks or nesting error-prone logic, ?= offers a clean, tuple-based alternative that promotes readability, consistency, and safety.

Why Traditional `try/catch` Gets Messy

JavaScript's try/catch can clutter your logic, especially when multiple async operations are involved.

❌ Without `?=`: Deep Nesting

async function fetchData() {
  try {
    const res = await fetch("https://api.example.com/data");
    try {
      const json = await res.json();
      return json;
    } catch (parseError) {
      console.error("Failed to parse JSON:", parseError);
    }
  } catch (networkError) {
    console.error("Network error:", networkError);
  }
}

✅ With ?=: Simpler Error Handling

The safe assignment operator turns any async result into a destructurable tuple: [error, value]. This makes code linear and easy to follow.

async function fetchData() {
  const [networkError, response] ?= await fetch("https://api.example.com/data");
  if (networkError) return console.error("Network error:", networkError);

  const [parseError, data] ?= await response.json();
  if (parseError) return console.error("Failed to parse JSON:", parseError);

  return data;
}

🔍 How It Works: The Power of `Symbol.result`

The magic behind ?= lies in a special method: Symbol.result. If an object implements it, that object can define how to unpack into [error, result].

function simulateFailure() {
  return {
    [Symbol.result]() {
      return [new Error("Oops! Something went wrong."), null];
    },
  };
}

const [err, value] ?= simulateFailure();
if (err) console.error(err.message); // "Oops! Something went wrong."

This provides the flexibility to adapt your own APIs or error-handling mechanisms.

📦 Real-World Examples

Example 1: Async File Read with Error Handling

import { readFile } from "fs/promises";

async function readJson(path) {
  const [readErr, data] ?= await readFile(path, "utf-8");
  if (readErr) return console.error("Failed to read file:", readErr);

  const [parseErr, json] ?= JSON.parse(data);
  if (parseErr) return console.error("Invalid JSON:", parseErr);

  return json;
}

Example 2: Custom Result Wrapper for APIs

function safeFetch(url) {
  return {
    async [Symbol.result]() {
      try {
        const res = await fetch(url);
        const json = await res.json();
        return [null, json];
      } catch (e) {
        return [e, null];
      }
    },
  };
}

const [error, result] ?= await safeFetch("/api/data");

Example 3: Using with Resource Cleanup (`using`)

await using [err, connection] ?= await openDatabaseConnection();
if (err) throw err;

const [qErr, results] ?= await connection.query("SELECT * FROM users");
if (qErr) throw qErr;

return results;

The using statement ensures connection is disposed of properly, regardless of errors.

🎯 Benefits of the ?= Operator

✅ Improves readability: Keeps logic flat and linear.
✅ Encourages consistency: Same error pattern across your codebase.
✅ Safer execution: Catches every error without missed edge cases.
✅ Adaptable to any API: Works with Symbol.result for full control.
✅ Better DX: Cleaner logs, simpler testing, easier debugging.

🚫 Current Limitations

The proposal is still experimental and not available in all JavaScript runtimes. Other considerations:

-🔸 Polyfills not possible: Since it's syntax, it can't be polyfilled directly.
-🔸 Tooling required: You’ll need a custom Babel/TypeScript transform or postprocessor.
-🔸 No finally support: You’ll still need try/finally for cleanup logic.

🚀 Bonus: Emulating `?=` in Today's JavaScript

If you want to try it today, you can emulate the behavior like this:

async function safe(fn) {
  try {
    const res = await fn();
    return [null, res];
  } catch (err) {
    return [err, null];
  }
}

const [err, data] = await safe(() => fetch("/api/data"));

🔮 Future Directions

The ?= operator has the potential to reshape our understanding of control flow in JavaScript. Inspired by Go's err, val := fn() and Rust’s Result, it bridges the gap between expressive syntax and safe semantics.

As the proposal matures, expect:

Better integration with async resource handling (using)
Enhanced developer tooling
Wider runtime support in Node.js and browsers

🔗 Relevant Links

Here are some helpful resources to deepen your understanding of the ?= operator and related error-handling improvements in JavaScript:

🔍 The Safe Assignment Operator (?=) Explained – A deep dive into the proposal, use cases, and current status
🧪 The Official TC39 Proposal for ?= – Follow the formal evolution of the feature
🛠️ ECMAScript Proposal Stages – Learn about the process every feature goes through

📘 Summary

The safe assignment operator ?= helps you write cleaner, more reliable JavaScript. With it, you can eliminate deeply nested try/catch blocks, unify your error-handling approach, and write code that’s both safer and more readable.

It's still early days, but this is a feature worth watching—and experimenting with—today.

How TypeScript Infers Generic Types Automatically — and Why It Matters

JSDev Space — Fri, 02 May 2025 14:17:04 +0000

This article explains how type inference works in practice, using a real-world utility function designed for API calls.

1. What Is Type Inference?

Type inference allows TypeScript to deduce types from context, eliminating the need for explicit annotations.

Basic Examples

let score = 100;           // Inferred as number
const nickname = "Nova";  // Inferred as string

ypeScript looks at the assigned values and infers the correct types — even without annotations.

But the true power of inference emerges when generics and higher-order functions come into play.

2. Automatic Inference in Generic Functions

Consider a function that wraps any API call returning a Blob, such as a file download:

type ApiMethod<TArgs> = (args: TArgs) => Promise<Blob>;

export function createDownloader<TArgs>(apiMethod: ApiMethod<TArgs>) {
  return (args: TArgs) => {
    apiMethod(args).then(saveFileLocally);
  };
}

Here's how inference works in practice:

✅ TypeScript infers the generic type TArgs from the passed function

createDownloader(api.downloadPdf)({
  filters: { startDate: "2025-01-01", endDate: "2025-01-31" },
});

When createDownloader is called, TypeScript:

Inspects the parameter type of api.downloadPdf
Infers that it accepts an object with a filters property
Substitutes that structure as TArgs — without requiring manual typing

❌ Argument validation is enforced at compile time

Passing incorrect arguments immediately triggers a type error:

createDownloader(api.downloadPdf)({
  wrongField: "2025-01-01", // ❌ Error: Object literal may only specify known properties
});

🧠 Inferred types persist in the returned function

Even the inner anonymous function maintains strong typing. Wherever it's used, the developer gets autocomplete, validation, and type safety — for free.

3. Why This Pattern Is So Useful

✅ Less Boilerplate
There's no need to write extra type declarations — TypeScript handles everything automatically.

🔒 Strong Type Safety
If the shape of the API changes (e.g., renaming a field), all usages break immediately, catching bugs at compile time.

🔁 Reusability
The createDownloader function can be reused across many API endpoints, as long as they return a Blob.

4. Other Use Cases for Generic Inference

a) Generic API Utility Functions

function makeRequest<TResult, TInput>(fetcher: (input: TInput) => Promise<TResult>) {
  return (input: TInput) => fetcher(input);
}

const fetchUser = makeRequest(api.getUser); // TInput is inferred

b) Typed React Hooks

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  // ...
}

const { data } = useFetch<User[]>("/api/users");

TypeScript infers T from the expected response format.

c) Form Submission Handlers

function createSubmitHandler<TForm>(onSubmit: (values: TForm) => void) {
  return (values: TForm) => onSubmit(values);
}

const handleProfileForm = createSubmitHandler(api.submitProfileForm);

5. Where Inference Might Not Work

TypeScript isn’t always able to infer complex or overloaded types. Here are two examples:

❗ Complex Nested Generics

In deeply nested or conditional types, inference may fail, and you'll need to provide the generic explicitly:

createDownloader<CustomDownloadParams>(api.customDownload);

❗ Function Overloads

Overloaded functions can confuse the type system. In those cases, manual annotations are often necessary.

Conclusion

Automatic type inference is one of TypeScript’s most powerful and underappreciated features — especially in generics. The createDownloader example demonstrates how TypeScript can seamlessly infer argument types, enforce correctness, and maintain type safety throughout the function chain.

Final Tips

Trust inference as your default.
Add explicit types only when TypeScript needs help.
Use this pattern to write reusable, clean utilities with zero boilerplate.

If you're building API layers, React hooks, or utility wrappers — leverage TypeScript's inference. You’ll write less code, avoid bugs, and move faster. 🚀

Mastering Timers in React: A Comprehensive Developer's Guide

JSDev Space — Tue, 18 Mar 2025 00:00:58 +0000

Timers in React can be tricky if you don’t consider key nuances. Let's explore how to properly use timers, avoid memory leaks and closure issues, and examine best practices.

Key Principles of Working with Timers

When working with timers in React, it's essential to consider:

Cleaning up resources when a component unmounts.
Handling closures correctly.
Managing component state changes.

Why `useEffect` and `useRef` Are Important for Timers

The combination of useEffect and useRef solves critical issues that arise in naive timer implementations.

The Role of `useEffect`

useEffect manages the timer’s lifecycle:

Creates a new interval when the component mounts or dependencies change.
Ensures the interval is cleared when dependencies change or the component unmounts, preventing duplicate timers.

The Power of `useRef`

useRef serves two key functions:

Stores the interval ID for later cleanup.
Ensures access to the latest version of the callback function, preventing closure-related issues.

Implementing a Custom `useInterval` Hook

Here's an implementation of a universal interval with pause and resume functionality:

import { useEffect, useRef, useState } from 'react';

export const useInterval = (callback: () => void, interval = 1000) => {
  const [active, setActive] = useState(true);
  const intervalIdRef = useRef<ReturnType<typeof setInterval>>();
  const callbackRef = useRef(callback);

  // Update the reference to the latest callback
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    if (!active) return;

    intervalIdRef.current = setInterval(() => callbackRef.current(), interval);

    return () => clearInterval(intervalIdRef.current);
  }, [active, interval]);

  return {
    active,
    pause: () => setActive(false),
    resume: () => setActive(true),
    toggle: () => setActive(prev => !prev)
  };
};

Code Breakdown

Keeping the callback updated: useRef stores the function reference, avoiding closure issues.
Controlling the timer state: active manages whether the interval is running or paused.
Cleaning up the interval: useEffect ensures clearInterval(intervalIdRef.current); prevents memory leaks.

Alternative Timer Implementations

One-Time Timer with `useTimeout`

For a timer that executes only once, use useTimeout:

import { useEffect, useRef } from 'react';

export const useTimeout = (callback: () => void, delay: number) => {
  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    const timer = setTimeout(() => callbackRef.current(), delay);
    return () => clearTimeout(timer);
  }, [delay]);
};

Conclusion

Timers in React require a thoughtful approach: managing their lifecycle, handling closures, and preventing memory leaks. Use useRef and useEffect for robust timer functionality, and for complex scenarios, consider well-tested libraries that provide optimized timer management.

For further insights on JavaScript timer management, check out this guide.

JavaScript Weekly: Top Links for March 7, 2025

JSDev Space — Fri, 07 Mar 2025 13:49:52 +0000

Welcome to your JavaScript Weekly Roundup! As we approach mid-March, the JavaScript ecosystem continues to evolve with exciting new tools and techniques. This week's collection features breakthrough libraries, time-saving development tips, and thought-provoking articles that will enhance your coding workflow and keep you informed on the latest trends.

📜 Articles & Tutorials

Ramda.js: Enhancing Array and Object Operations in JavaScript

Ramda.js is a powerful functional programming library for JavaScript. Unlike Lodash, it focuses on code purity, supports currying, and ensures data immutability.

Key Features

Currying

Allows calling functions step by step:

import * as R from 'ramda';
const add = R.add(10);
console.log(add(5)); // 15

Function Composition

Replaces .map().filter().reduce() chains with more readable code:

const normalizeNames = R.pipe(
  R.map(R.trim),
  R.map(R.toLower),
  R.filter(name => name.length > 3)
);

Working with APIs

Filtering active users and normalizing their names:

const processUsers = R.pipe(
  R.filter(R.propEq('active', true)),
  R.map(R.pipe(R.prop('name'), R.trim, R.toLower))
);

Objects: assoc, dissoc, evolve

Modify objects without mutations:

const user = { id: 1, name: 'Alice', age: 25 };
const updatedUser = R.assoc('status', 'active', user);
const withoutAge = R.dissoc('age', updatedUser);

Data Grouping

const groupedOrders = R.groupBy(R.prop('status'), orders);

When is Ramda Not Needed?

For simple operations, standard methods like map, filter, and reduce are often more convenient. Ramda is beneficial for complex transformations, ensuring immutability, and writing declarative code.

Build your own chrome extension

Frontend Automation with Github Actions and AWS

React Image Editor: Load and Save Images from a Database Easily

Navigating TypeScript's Type System: 24 Brilliant Advanced Techniques

Understanding the Redux Ecosystem: From Concept to Implementation

Fuzz Testing REST APIs in Node.js

A CSS-Only Star Rating Component and More!

Micro Frontends with Angular and Native Federation

How to Combine Two Nodes into One

How to Master JavaScript Closures: Theory, Practice, and Examples

How to Implement Routing with Hash and History API in JavaScript

Building a VSCode Chat Extension to Order Lunch

Building a Telegram Clone with Next.js and TailwindCSS - Part One, two, three

⚒️ Tools

shadcn UI theme generator

Modern fluid typography editor

lume: A lightweight CLI and local API server to create, run and manage macOS and Linux virtual machines (VMs) natively on Apple Silicon.

Agno: A lightweight library for building Multimodal Agents with memory, knowledge and tools.

ricochet: A peer-to-peer instant messaging system built on Tor hidden services.

📚 Libs

Usertour: An alternative to: Appcues, Userpilot, Userflow, userguiding, Chameleon , Etc...

Algora TV: A React component to embed a live streaming video player.

Drag-and-Drop-Email-Designer: A drag and drop email designer for SES.

Pruvious: A reliable CMS for your Nuxt app.

webjsx: A library for building web applications with JSX and Web Components.

kreuzberg: A text extraction library supporting PDFs, images, office documents and more

Memory: A self-hosted editor and note taking app.

InfoShop: Free and open source laravel + Inertia JS (React JS) Point of Sale platform

fast-png:PNG image decoder and encoder written entirely in JavaScript.

mercurius: A GraphQL HTTP Server for Fastify with TypeScript and hooks support.

⌚ Releases

AI SDK 4.1: Vercel AI SDK 4.1 is out with new features and improvements.

Next.js 15.2 Released

Astro 5.4: Astro 5.4 is out with new features and improvements.

Bun v1.2.3 Released

ESLint v9.21.0 Released

Angular v19.2 Released

Ember 6.2 Released

📺 Videos

How To Setup Rich Text Editor In Next.js
Build your first MCP Server in TypeScript

New React Animation API Is Insane

The BEST UI Animation Library of 2025? 🤯 You NEED to See This!

Using web sockets on Next.js | NO third party solution

CSS Clamp: Responsive design in one line

Stream Video In React & Next.js OPTIMALLY (WebM, CDN, m3u8 / HLS / ABS, ImageKit)

How to create a Glassmorph Navbar (Next.js 15, Shadcn, Tailwind)

The Ultimate React Native Course | Build Your First Mobile App in 2025

Fix Your Slow React App With React-Scan

Claude 3.7 goes hard for programmers…

This one tool forever changed how I use Docker

Ultimate Next 15 Course: Build a YouTube Clone (2025)

🎤 Talks & Podcasts

Beyond Aesthetics: What the Next Generation of Frameworks Should Offer - JsJ_670

AI Has Broken the Web Developer Job Market w/ Kent C. Dodds

🗞️ News & Updates

Tailwind UI is now Tailwind Plus - Tailwind UI is now Tailwind Plus, with new features and improvements.

Announcing TanStack Form v1

Thanks for checking out this week's JavaScript roundup! We hope these resources help you build better applications and solve challenging problems. Join us next Friday when we'll be back with another curated selection of JavaScript excellence from around the web.

DEV Community: JSDev Space

Friday Links #38 — Frontend Signals, AI Coding & JavaScript Releases

📢 Special partner message

🗓️ React Norway — Oslo, June 5 🇳🇴

🎟️ 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

Bun’s Rust Rewrite Has Been Merged

📜 Articles & Tutorials

⚒️ Tools

📚 Libs

⌚ Releases

📺 Videos

🗞️ News & Updates

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

Creator of C++ Criticizes Vibe Coding

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

Friday Links #36: New JavaScript Tools, Frameworks, and Research

Subscribe to JavaScript Friday Links

🧠 Ecosystem Highlights

TypeScript 6 Prepares the Path to TS7

Deno 2.7 Improves Node Compatibility

📜 Articles & Tutorials

⚒️ Tools

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

📚 Libs

⌚ Releases

📺 Videos

🎤 Talks & Podcasts

🗞️ News & Updates

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

🔐 Security

Supply-Chain Attacks Target Developers

vm2 Sandbox Escape Vulnerability

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

Mastering JavaScript map(): Hidden Pitfalls and Smarter Patterns

1. How map() Actually Works

1.1 Syntax and Basic Behavior

1.2 Practical Examples

Example 1: Transforming numbers

Example 2: Mapping object properties

Example 3: Using map() on array-like structures

1.3 Sparse Arrays and Missing Elements

2. Understanding parseInt() — and Why It Breaks with map()

2.1 Parsing Rules

3. Why [1, 2, 3].map(parseInt) Gives [1, NaN, NaN]

3.1 The Output

3.2 The Real Reason

3.3 Correct Solutions

4. Special Numeric Values: NaN and Infinity

4.1 Properties of NaN

5. Wrapper Objects

6. UTF-16, Unicode, and Emoji Length Issues

7. Interviewer Expectations

Conclusion

TypeScript Generics: The Magic Behind Flexible, Type-Safe Code

🧩 Understanding Generics — From Function Parameters to Type Parameters

⚙️ The Fundamentals of Generics

1. Generic Classes

2. Multiple Type Parameters

3. Constrained Generics

💼 Practical Use Cases

1. Generic API Responses

2. Utility Function Libraries

3. Type-Safe React Hooks

🧠 Advanced Generic Techniques

Conditional Types

Mapped Types

⚠️ Common Pitfalls and Best Practices

🏁 Conclusion

Friday Links #30 — JavaScript Updates, Tools, and Inspiration

📜 Articles & Tutorials

⚒️ Tools

📚 Libs

⌚ Releases

📺 Videos

🎤 Talks & Podcasts

🗞️ News & Updates

Understanding CSS Priority — The Cascade Explained

Mastering the Priority of CSS Styles

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

1. How `map()` Actually Works

2. Understanding `parseInt()` — and Why It Breaks with `map()`

3. Why `[1, 2, 3].map(parseInt)` Gives `[1, NaN, NaN]`

4. Special Numeric Values: `NaN` and `Infinity`

4.1 Properties of `NaN`

⚡ The Power of `!important`

Why Traditional `try/catch` Gets Messy

❌ Without `?=`: Deep Nesting

🔍 How It Works: The Power of `Symbol.result`

Example 3: Using with Resource Cleanup (`using`)

🚀 Bonus: Emulating `?=` in Today's JavaScript

Why `useEffect` and `useRef` Are Important for Timers

The Role of `useEffect`

The Power of `useRef`