React
React 19 is officially here
The moment we've all been waiting for! React 19 has officially landed. React 19 is here with game-changing features! Actions simplify state management with built-in handling for errors and optimistic updates. New hooks like useOptimistic and useActionState make development smoother than ever. Plus, enhanced Suspense boosts performance for better user experiences.
React 19: Ref callbacks - More than just DOM access
Ref callbacks in React 19 can now return cleanup functions, similar to useEffect, allowing for tasks like measuring DOM nodes with ResizeObserver.
View Transition API: Smooth animations coming to React
Explore React's experimental View Transition API and how it can create smoother, more engaging user experiences. This article dives into the details, showing practical examples and offering insights on how to utilize this feature in your own projects.
Quick links
- Mastering React internationalization with i18next
- Boost React app speed with INP optimization
- React, visualized: An interactive guide to understanding React concepts
Next.js
Next.js 15.1 embraces React 19!
Next.js 15.1 is here, embracing React 19 with official support! Enjoy seamless integration, enhanced debugging tools, and smarter error handling for a smoother development experience.
Next.js on Deno deploy: A new frontier
Next.js SSR apps can now run on Deno Deploy. It’s fast, scalable, and a glimpse into the future of serverless tech.
Scaling micro-frontends with Next.js multi zones
Managing independent deployments for large teams just got easier! Next.js Multi Zones is a powerful feature that enables the composition of multiple Next.js applications into a single unified experience, allows different teams to develop, deploy, and maintain distinct parts of a website independently.
Quick links
- Introducing efficient Valkey-based caching for Next.js
- SSR: Debunking myths and delivering real value
- Why Dato CMS chose Astro over Next.js
Others
Bring AI to your browser with Transformers.js
Run AI tasks right in the browser! Transformers.js leverages a pipeline API that is easy to use and can perform tasks like sentiment analysis and object detection. All processing occurs client-side, no server needed.
New HTML and CSS features: Making interactive elements easier without JavaScript
The popover attribute allows developers to add popovers effortlessly, while CSS Anchoring offers more reliable positioning. The new calc-size() function makes it possible to animate elements to and from auto height, bringing more flexibility to animations. Plus, updates to <details> and <select> elements enhance their styling and customization capabilities. These innovations make building interactive and dynamic web elements smoother and more accessible than ever before.
Quick links
- Headless, boneless, skinless, & lifeless UI: 4 categories of UI abstractions
- A simple masonry-like composable layout
- Architectures of modern front-end applications
- [Lock down your OAuth2 implementations - protect against CSRF attacks]
Trending
Rising stars of JavaScript 2024
Discover front-end tools shaping the JavaScript landscape in 2024! Key highlights include shadcn/ui, a modern, accessible component library for building customizable UIs, and HTMX, a lightweight library that brings dynamic interactions to HTML without relying heavily on JavaScript frameworks.
Offline-first apps: everything you need to know to get started!
Learn the essentials of building offline-first applications in this guide. It covers the core concepts, techniques, and best practices for creating apps that function seamlessly even when the internet connection is unreliable. This article will help you understand data synchronization, caching, and handling user interactions in an offline environment.
Emerging Trends in Front-End Development
Explore the latest trends in front-end development, including AI-powered tools, server-driven UI, and Next.js with React Server Components. The article highlights Jamstack, headless CMS solutions, and component-driven design systems, showcasing how these innovations enhance performance, scalability, and efficiency.
Quick links
Tools
Tailwind CSS v4.0 Beta: New features, concerns, and what you should know
Tailwind CSS v4 has great improvements like the switch to LightningCSS and native CSS cascade layers, but this author has concerns about the performance implications of CSS variables, the potential for abuse with new descendant variants, and the lack of clarity in some class names.
Node’s new built-in support for TypeScript
Big news for Node.js developers! Native TypeScript support is on the way through type stripping, meaning you'll soon be able to run TypeScript code directly in Node without needing to transpile it first. This article explains the implications, outlining what this change means for development workflows and how it will streamline the use of TypeScript within Node.js projects.
Boost React performance with Million
Million is a lightweight tool designed to optimize React websites by identifying slow components and improving performance and integrates directly into your IDE for real-time performance insights. Million also provides features like production observability and replay for investigating performance issues.
Quick links
Commentary
- Why I ditched React for Go, HTMX, and Templ
- React and similar frontend frameworks, used incorrectly, can lead to performance and accessibility issues.
- The open social web is the future of the internet. Here's why I'm excited
- Struggling with complex code? see how Types can simplify things!
- Thinking of switching to Vite? this team did it and here's what they learned!
