DEV Community: JSDev Space

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.

Weekly JavaScript Roundup: Friday Links 17, February 07, 2025

JSDev Space — Fri, 07 Feb 2025 00:33:10 +0000

Happy Friday, JavaScript enthusiasts! This week’s roundup brings you fresh updates, handy libraries, and insightful reads to level up your JS skills. Let’s get started!

📜 Articles & Tutorials

How to Build an Analytical Dashboard with Next.js

What is CSS Subgrid? A Practical Tutorial

Mastering React Refs: Advanced Techniques with useCombinedRef Hook

Web-Slinger.css: Across the Swiper-Verse

Dynamic Focus Zoom Effect with CSS @property

The Must-Have SEO Checklist for Developers For 2025

Creating an Angled Slider

Build a Local Notion with an AI Agent Assistant 🤖

Pure CSS Mixin for Displaying Values of Custom Properties

Build a Single-Page Application(SPA) Router in Vanilla JavaScript

The modern way to write JavaScript servers

Building a QR Code HTML Web Component

Building a simple blog architecture

Create Scroll Animations with just CSS

What’s new in Svelte: February 2025

Which rich text editor framework should you choose in 2025?

Code Like a Pro: Implementing SOLID Design in React Ecosystem

Positioning Text Around Elements With CSS Offset

Transitioning Top-Layer Entries And The Display Property In CSS

How to Improve JavaScript Code Security: Best Practices and Tips

TypeScript Error Handling Evolution: From Try/Catch to Result Types

⚒️ Tools

RustDesk - A secure, open-source remote desktop client for Windows, macOS, and Linux. RustDesk is built with Rust and uses the Tauri framework for the frontend. It offers features like file transfer, clipboard sharing, and multi-monitor support, making it a versatile tool for remote work and IT support.

SolidTime - A privacy-focused time tracking app built with SolidJS and Tailwind CSS. SolidTime allows users to track their work hours and generate reports without compromising their data privacy. It's a lightweight, fast, and secure alternative to traditional time tracking tools.

Scroll-driven Animations

Every Hex Codes - A collection of every possible hex color code, from #000000 to #FFFFFF. Every Hex Codes provides a visual representation of all 16,777,216 hex colors, making it a handy reference for designers and developers.

eliza - is a simple, fast, and lightweight AI agent framework

Screenshot to Code - A tool that converts screenshots of websites into HTML and CSS code. Screenshot to Code uses machine learning to analyze images and generate code snippets, helping developers recreate web designs more efficiently.

API Parrot - A tool for mocking and testing APIs without writing code. API Parrot lets you create custom API endpoints, define responses, and simulate different scenarios to test your applications' behavior. It's a useful tool for frontend developers, QA engineers, and API designers.

vuelessui - A minimalistic UI framework for Vue.js applications. VuelessUI focuses on simplicity and performance, providing essential components like buttons, forms, and modals without unnecessary bloat. It's designed to be lightweight and easy to customize, making it ideal for building fast and responsive web applications.

FinetuneDB - is an AI fine-tuning platform that enables users to create and manage datasets for customizing large language models (LLMs). It offers a collaborative editor for team-based dataset building, tools for evaluating model performance with human and AI feedback, and features for collecting production data to refine models. The platform also provides a prompt playground for optimizing interactions between users and AI models. Developers can integrate FinetuneDB into their applications using SDKs compatible with the OpenAI framework. FinetuneDB emphasizes security with encrypted data transmission and strict permission controls.

📚 Libs

TargetJS - A Novel JavaScript UI framework designed to simplify development and enhance animations. TargetJS offers a unique approach to building user interfaces, focusing on simplicity and performance. It provides a declarative syntax for creating components and animations, making it easy to develop interactive web applications. TargetJS is built with modern web technologies and aims to streamline the development process while delivering engaging user experiences.

visprex - Visualise your CSV files in seconds without sending your data anywhere

screen-sharing - A simple screen sharing library for web applications. screen-sharing uses WebRTC technology to enable real-time screen sharing between users, making it ideal for remote collaboration and online meetings. It provides a straightforward API for integrating screen sharing functionality into web applications, allowing users to share their screens with minimal setup.

blendy - Smoothly transition one element into another with just a few lines of code.

Waveform Renderer - A lightweight and customizable TypeScript library for rendering audio waveforms on HTML canvas. Create beautiful, interactive audio visualizations with ease.

plotly.js - Open-source JavaScript charting library behind Plotly and Dash

emittery - Simple and modern async event emitter

jsontr.ee - A JSON transformer and formatter for the web

jscanify - The Javascript document scanning library.

fumadocs - The beautiful docs framework with Next.js.

maily.to - Craft beautiful emails effortlessly with Maily, the powerful email editor that ensures impeccable communication across all major clients.

superfile - Pretty fancy and modern terminal file manager

⌚ Releases

Astro 5.2 Released: Tailwind 4, TOML Support, and Improved Redirects

The Astro framework has released version 5.2, introducing support for Tailwind 4, TOML frontmatter in Markdown, and an enhanced redirect logic for trailing slashes in URLs. Additionally, there's an experimental feature to disable React streaming for better compatibility with certain libraries.

🚀 Tailwind 4 Support
Astro now includes the @tailwindcss/vite plugin by default, making it easier to integrate Tailwind into projects. The old integration method via @astrojs/tailwind remains available for previous Astro versions.

📝 TOML Frontmatter

Astro now supports TOML for frontmatter in Markdown pages, making it more compatible with frameworks like Hugo. To enable TOML, wrap the frontmatter in triple plus (+++) signs:

+++
date = 2025-01-30
title = "Use TOML frontmatter in Astro!"
[params]
  author = "Houston"
+++

🔄 Improved Redirects for URLs with Slashes

Astro now ensures that URLs like /about/, /about, and /about/// correctly resolve to the intended page. During development, redirects are disabled to help catch potential issues. To enable redirects, update astro.config.mjs:

export default defineConfig({
  adapter: node({ mode: 'standalone' }),
  trailingSlash: 'never', // or 'always'
});

Astro 5.2 continues to refine performance and developer experience, making it an even more powerful framework for modern web development.

Mozilla Thunderbird 135.0 Released

TaskExplorer 1.6.0 Released: Advanced Task Manager for Windows

The open-source project TaskExplorer has released version 1.6.0, offering an advanced task management tool for Windows 7 and later. Unlike traditional task managers, TaskExplorer focuses not only on monitoring running applications but also on analyzing their activities in detail.

Built with C and C++, the project's source code is available on GitHub under the GNU General Public License v3.0. TaskExplorer was first introduced in October 2019, and this latest version continues to refine its capabilities for system administrators, developers, and users managing legacy hardware.

NWinfo 1.1.1 Released: Portable System Info Tool for Windows

On February 4, 2025, the lightweight open-source project NWinfo 1.1.1 was released. This portable system information tool provides a quick overview of key PC details, from hardware specifications to software insights. It runs on Windows XP and newer, making it a versatile tool for both tech enthusiasts and troubleshooting professionals.

NWinfo displays essential data on the CPU, memory, disks, network, and system status, all within an intuitive interface. It also generates detailed logs in JSON, YAML, and LUA formats for easy sharing and diagnostics.

Ruck 9.0 - A React Webapp Framework for Deno

📺 Videos

Create a Job Board SaaS with Next.js, Inngest, Auth.js, Arcjet and Tailwind | 2025

How I used CODE to Create Paper Like Images

Create a super fun "focus by negation" effect

My Biggest Tutorial Ever (Build A FULL Google Drive Clone with React, Next, TypeScript and more)

Data Structures and Algorithms Crash Course

Build a Fullstack Project Management App with Next.js 15, Supabase, Shadcn, Resend, DnD Kit & Tiptap

Heroku Is Dead, Here's What I Recommend

Simple CSS Animation Effects

Why I Use Linux

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

Strapi 5 and Next.js 15 Full Stack Project Course

Build Full Stack LMS Website using MERN Stack | Create Full Stack React JS Project 2025

Programmatic SEO in Next.js 15 - Full Guide

That’s it for this week’s roundup! Stay curious, keep coding, and don’t forget to check back next Friday for more JavaScript highlights. Have a favorite link? Drop it in the comments! 🚀

DEV Community: JSDev Space

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

🤔 Let’s Start with a Simple Example

🕰️ The Birth of Cascading

⚖️ The System of Cascading Priorities

🎯 Specificity Formula

🔍 Real Examples

📝 Overriding Rules at Equal Priority

🎨 Priority in Complex Scenarios

⚡ The Power of !important

💡 Usage Tips

🛠️ Best Practices in CSS Architecture

🎯 Avoiding Conflicts

🆕 Modern CSS: Cascade Layers

🔮 Logical Properties and Modern Trends

📚 References

Friday Links 26: This Week in JavaScript

Allie: Human-Like AI Chess Bot on Lichess

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`

Implementing a Custom `useInterval` Hook

One-Time Timer with `useTimeout`