Best of JavaScript — July 2025

1
Article
Josh W Comeau·42w
A Friendly Introduction to SVG • Josh W. Comeau
SVG (Scalable Vector Graphics) is a powerful web technology that allows developers to create scalable, interactive graphics using XML syntax. Unlike traditional image formats, inline SVGs can be styled with CSS and manipulated with JavaScript as first-class DOM citizens. The tutorial covers basic SVG shapes (circles, rectangles, polygons), the viewBox attribute for scalability, and advanced stroke animations including dash patterns and drawing effects. Key concepts include using presentational attributes, creating smooth transitions, and leveraging stroke-dasharray and stroke-dashoffset for dynamic visual effects.
182
6
2
Article
Hacker News·43w
epanet-js
epanet-js is a new web application that brings EPANET hydraulic simulation to modern browsers using WebAssembly, built by experts from Iterating using open source code from the defunct Placemark mapping tool. The browser-based tool offers a significant improvement over expensive legacy Windows software that costs $16,000 annually, demonstrating how open source licensing can enable new businesses to create better solutions in specialized markets like water utility system planning.
169
4
3
Article
Hacker News·44w
kepler.gl
Kepler.gl is a WebGL-powered geospatial data visualization tool designed for analyzing and visualizing large-scale datasets in web browsers. Built with high-performance rendering capabilities, it enables interactive exploration of geographic data. Foursquare Studio extends kepler.gl's framework as a free analytics platform with regular feature updates.
154
2
4
Video
As a Programmer·41w
React Native Bootcamp in 30 HOURS for FREE 🎉
A comprehensive 30-hour React Native bootcamp that teaches mobile development through building six practical applications including a Twitter clone, recipe app, expense tracker, bookstore app, Instagram clone, and a full-stack todo application. The course covers React Native fundamentals, navigation, authentication, database integration, and deployment, designed for complete beginners with no prior mobile development experience.
135
3
5
Article
Frontend Masters·42w
Introducing Zustand (State Management) – Frontend Masters Blog
Zustand is a minimal state management library for React that offers a simpler alternative to React Context with better performance. Unlike Context, which re-renders all consumers when any state changes, Zustand allows selective subscriptions through selector functions, reducing unnecessary re-renders. The library provides a clean API using a create function to define stores and supports async operations, external state access, and fine-grained subscriptions. The post demonstrates three implementations of the same task management app: vanilla React Context, basic Zustand usage, and optimized Zustand with selectors, showing how proper selector usage prevents excessive re-rendering.
134
13
6
Article
Awesome Java Newsletter·44w
Clean Code Reimagined
A comprehensive guide to writing clean, maintainable code with practical examples in both Node.js and Java. Covers essential principles including meaningful naming conventions, single responsibility functions, DRY logic implementation, proper formatting, immutability patterns, and structured logging. Emphasizes that clean code is a mindset focused on building resilient, scalable systems that are understandable and extendable for future developers.
121
2
7
Article
Nuxt·42w
Announcing Nuxt 4.0 · Nuxt Blog
Nuxt 4.0 introduces a stability-focused major release with improved developer experience through cleaner project organization using the new app/ directory structure, smarter data fetching with better useAsyncData and useFetch functionality, enhanced TypeScript support with separate project contexts, and faster CLI performance with native file watching and socket-based communication. The upgrade includes breaking changes but maintains backward compatibility for existing projects, with migration tools and detailed upgrade guides available to ease the transition.
119
3
8
Article
TkDodo·41w
The Useless useCallback
Many useCallback and useMemo implementations are pointless because they don't provide actual performance benefits. Memoization only helps when passing props to memoized components or preventing effects from firing unnecessarily. Common anti-patterns include memoizing functions passed to regular components and using non-primitive props as dependencies. The latest ref pattern and upcoming useEffectEvent can solve these issues without requiring extensive memoization chains.
100
7
9
Article
Community Picks·44w
facebook/relay: Relay is a JavaScript framework for building data-driven React applications.
Relay is a JavaScript framework by Facebook for building data-driven React applications using GraphQL. It provides declarative data fetching, query colocation with components, and automatic handling of mutations with optimistic updates. The framework aggregates queries into efficient network requests and offers automatic data consistency and error handling.
100
1
10
Article
freeCodeCamp·43w
The JavaScript Error Handling Handbook
A comprehensive guide covering JavaScript error handling fundamentals, including try-catch-finally blocks, error types (ReferenceError, TypeError, etc.), custom error creation, and real-world examples like JSON parsing and form validation. Explains error object anatomy, rethrowing techniques, and best practices for graceful error management in web applications.
97
1
11
Video
developedbyed·41w
Leetcode is not scary, it's actually really fun
LeetCode problems are actually enjoyable brain training exercises rather than scary interview hurdles. The key is approaching them as puzzles that build problem decomposition skills applicable to real-world programming. Starting with structured roadmaps like arrays and hashing, then gradually building intuition through practice makes the experience rewarding. Three classic problems demonstrate different approaches: two-sum shows optimization from O(n²) to O(n) using hash maps, contains duplicate leverages sets for efficient lookups, and valid anagram can be solved through character counting or string sorting techniques.
96
2
12
Article
Web Tools Weekly·43w
JS Utilities, Git/CLI Tools, AI Tools
A curated collection of developer tools including JavaScript utilities like translate.js for internationalization and hyparquet for parsing Apache Parquet files, Git and CLI tools such as Lnk for dotfiles management and F2 for batch file renaming, and AI-powered development tools including Sim Studio for LLM deployment and Jules from Google for automated coding assistance. The newsletter also features commercial apps and productivity tools for developers.
95
1
13
Article
Community Picks·44w
pickle-com/glass
Glass is an open-source desktop AI assistant that captures screen content and audio in real-time to provide contextual answers and meeting summaries. Built as a lightweight application that runs invisibly on macOS, it integrates with OpenAI's API to understand user context and generate structured knowledge from daily interactions. The tool offers features like proactive meeting notes, real-time transcription, and the ability to query information based on previous screen actions and audio.
91
5
14
Article
LogRocket·41w
Angular has grown up — and the best is yet to come
Angular has evolved significantly from its early days, addressing core architectural issues like change detection and template syntax. The framework is moving away from Zone.js monkey-patching toward signals for better reactivity, introducing cleaner control flow syntax to replace verbose HTML directives, and making difficult but necessary decisions like deprecating flex-layout. With Angular 20's experimental zoneless change detection and continued improvements, the framework is positioned for its strongest years ahead.
90
4
15
Article
Lobsters·43w
The JavaScript Date Quiz
An interactive quiz testing knowledge of JavaScript's Date class behavior, including edge cases and unexpected behaviors when parsing date strings. The quiz covers various scenarios to help developers understand the quirks and pitfalls of JavaScript date handling.
88
8
16
Article
The Miners·44w
What you need to know about frontend design patterns
Design patterns provide reusable solutions to common programming problems. Custom hooks in React exemplify this concept by allowing developers to extract and reuse stateful logic across components. The guide demonstrates how to create custom hooks for data fetching with loading states and currency formatting, showing how they improve code organization, reusability, and maintainability by separating concerns and following DRY principles.
82
1
17
Article
Bytes by ui.dev·43w
The great SQLite rewrite
Turso has released an alpha version of their Rust-based SQLite rewrite, addressing modern application needs like concurrent writes, async APIs, and vector search that the original SQLite doesn't handle well. The rewrite maintains SQLite's reliability while adding features for AI applications and real-time workloads. The newsletter also covers various JavaScript/TypeScript tools including zshy build tool, TanStack Start's Selective SSR, and a code example demonstrating object mutation issues in data processing.
79
5
18
Article
Codrops·44w
From Static to Dynamic: 3 Micro-Animations Every Web Developer Can Master with Rive
Rive offers a powerful alternative to CSS and JavaScript animations for creating interactive web experiences. The tutorial demonstrates three practical animation patterns using a fictional plant care company: animated hero images that reveal hidden features on hover, interactive CTAs that respond to user input, and flexible layouts that adapt to different screen sizes. Rive animations are vector-based, lightweight, and can respond to real-time data through a JavaScript API, making them ideal for creating engaging micro-interactions that enhance user experience and conversion rates.
79
19
Article
WebCraft·42w
Wavesurfer.js is an open-source audio visualization library
Wavesurfer.js is an open-source JavaScript library that enables developers to create interactive and customizable audio waveform visualizations for web applications.
75
2
20
Article
Collections·41w
Comprehensive TypeScript Crash Course for Beginners
A comprehensive one-hour TypeScript crash course covering fundamental concepts like type annotations, static typing, generics, interfaces, classes, and enums. The course includes practical setup instructions, hands-on examples, and debugging techniques to help beginners integrate TypeScript into their development workflow.
73
2
21
Video
ThePrimeTime·43w
WTF Typescript
A deep dive into TypeScript's quirky behaviors and advanced features, covering excess property checks, enum inconsistencies between string and numeric values, type narrowing issues with array filtering, object type differences, and performance optimization challenges in large codebases. The discussion explores why developers often prefer const objects over enums, demonstrates TypeScript's Turing completeness through complex type-level programming, and highlights the difficulties of debugging TypeScript compiler performance bottlenecks.
72
5
22
Article
The New Stack·44w
Why React Is No Longer the Undisputed Champion of JavaScript
React's dominance in frontend development is being challenged by modern browsers, HTML-first frameworks, and developer preferences for simpler solutions. While React remains popular, alternatives like Astro, HTMX, and native DOM APIs are gaining traction by offering lighter, faster approaches. React Server Components represent React's attempt to adapt, but add complexity. The shift represents a move from React-by-default to choosing the right tool for each project, marking a post-React era of diversified frontend tooling.
68
8
23
Article
LogRocket·42w
Iterator helpers: The most underrated feature in ES2025
ES2025 introduces iterator helper methods that enable lazy, memory-efficient data processing in JavaScript. Unlike traditional array methods that process data eagerly, iterator helpers like .map(), .filter(), .take(), and .drop() work lazily, processing values only when needed. This makes them ideal for handling large datasets, infinite streams, or performance-critical scenarios where you want to avoid loading everything into memory at once.
66
4
24
Video
Theo - t3․gg·43w
React feels insane
A developer critiques React's complexity and design decisions, arguing that the framework feels unnecessarily complicated compared to earlier solutions like Angular and jQuery. The response demonstrates common React anti-patterns like misusing useEffect for API calls and event handling, while defending React's design choices and explaining how proper usage with libraries like React Query can address many of the cited issues. The discussion highlights the importance of understanding tool complexity relative to application requirements and using appropriate patterns for different levels of application complexity.
66
8
25
Article
Typescript·43w
Announcing TypeScript 5.9 Beta
TypeScript 5.9 Beta introduces several key improvements including a streamlined tsc --init that generates cleaner configuration files with modern defaults, support for ECMAScript's import defer syntax for deferred module evaluation, a stable --module node20 option for Node.js v20 compatibility, enhanced DOM API documentation with summary descriptions, expandable hover tooltips in editors, configurable hover length limits, and performance optimizations for type instantiation caching and file existence checks.
57

See all JavaScript archives