Best of Frontend Development — September 2025

1. 1
   Article

   Hacker News·34w

   Why our website looks like an operating system

   PostHog redesigned their website to function like an operating system, featuring window management, keyboard shortcuts, and multitasking capabilities. The design addresses the common problem of managing multiple tabs on technical websites by allowing users to open and arrange multiple pages simultaneously within a single browser window. The implementation includes OS-inspired UI elements like file explorers, PowerPoint-style presentations, and spreadsheet layouts, built using TypeScript and Tailwind CSS with a JSON-driven content architecture.

   855

   73
2. 2
   Article

   Hacker News·35w

   MitchIvin XP

   An interactive portfolio website designed to mimic the Windows XP operating system interface, showcasing design, video, and UI work through a nostalgic desktop simulation built with HTML, CSS, and JavaScript.

   468

   78
3. 3
   Article

   Lobsters·35w

   You Don't Need Animations

   Animations should serve a clear purpose rather than being added for decoration. Key considerations include frequency of use (high-frequency interactions should avoid animations), speed (UI animations should stay under 300ms), and user goals. Examples demonstrate how purposeful animations can explain features, provide feedback, or improve perceived performance, while unnecessary animations can slow down workflows and frustrate users.

   287

   16
4. 4
   Article

   Flavio Copes·35w

   The CSS Handbook, 2025 edition

   Flavio Copes has released an updated 2025 edition of his CSS Handbook, covering modern CSS features like container queries, cascade layers, CSS nesting, and new color spaces. The comprehensive guide spans from fundamentals like selectors and the box model to advanced topics including CSS Grid, responsive design, animations, and best practices for maintainable code.

   253

   15
5. 5
   Article

   Josh W Comeau·35w

   Color Shifting in CSS • Josh W. Comeau

   Explores the challenges of animating color transitions in CSS, revealing that browsers perform color interpolation in RGB space even when colors are specified in HSL, causing unwanted gray intermediate colors. Demonstrates how CSS filters, specifically hue-rotate(), provide a superior solution for smooth color shifting animations. Includes practical techniques for creating particle effects with dynamic color transitions and twinkling animations.

   202

   4
6. 6
   Article

   Hacker News·33w

   This website has no class

   A developer experiments with removing all CSS classes from their personal website, instead relying on semantic HTML elements, custom tags, and custom attributes for styling. The approach reduces CSS bundle size to ~5KB and improves accessibility, but requires more careful planning and deeper HTML/CSS knowledge. While successful for a personal project, the author acknowledges it may not scale well for larger teams with varied frontend expertise.

   190

   18
7. 7
   Article

   Zero To Mastery·35w

   No lies being told

   136

   35
8. 8
   Article

   Zubair Ahmed Rafi·35w

   The fastest website that does not use your framework

   McMaster-Carr's website demonstrates that performance doesn't require modern frameworks. Despite its outdated appearance, the site achieves exceptional speed through techniques like image sprites, hover-based prefetching, selective JavaScript loading, and CDN optimization. The author argues that simplicity and performance matter more than Lighthouse scores, noting how the site's superior user experience contradicts its modest score of 66.

   109

   21
9. 9
   Article

   LogRocket·34w

   Frontend developers are burned out, not lazy

   Modern frontend development has become increasingly complex despite promises of improved productivity. While frameworks and tooling offer powerful capabilities, they introduce hidden costs through constant churn, decision fatigue, and abstraction overhead. Many projects stall at 60-80% completion due to these invisible friction points. The solution involves starting with minimal setups, automating routine tasks, choosing appropriate tools for specific requirements, understanding underlying technologies, and leveraging AI assistance carefully to focus more on product value rather than tooling complexity.

   103

   5
10. 10
    Article

    CSS-Tricks·33w

    Is it Time to Un-Sass?

    A developer reflects on 13+ years of using Sass and evaluates whether modern CSS features like native nesting, custom properties, and color-mix() function make it time to abandon CSS preprocessors. The analysis covers how native CSS has evolved to include many Sass-like features, discusses the complexity of modern tooling, and concludes that the decision depends on project size and requirements. For personal sites, moving away from Sass makes sense, but larger codebases may not justify the refactoring effort.

    100

    16
11. 11
    Article

    Vuejs&Nuxtjs·33w

    Shad cn vue Like Nuxt/Vue Librarys :fire:

    A curated list of Vue and Nuxt UI component libraries including Vue Bits for animated components, Inspira UI for reusable designs, shadcn-vue, UI Thing for copy-paste components, Stunning UI with Tailwind CSS integration, LandiNuxt for landing page sections, and Reka UI as the foundational library that many others depend on.

    99

    20
12. 12
    Article

    The New Stack·32w

    How Vite Became the Backbone of Modern Frontend Frameworks

    Vite has rapidly become the dominant build tool for modern frontend frameworks within just five years. Created by Evan You, Vite leverages ES Modules to provide faster development experiences compared to Webpack. Starting as Vue Dev Server in 2019, it evolved into a framework-agnostic tool with Vite 2.0 in 2021, gaining adoption across Vue, React, Svelte, Astro, and other frameworks. You's company VoidZero is now developing Vite+, a unified toolchain that combines multiple Rust-based tools with AI integration features.

    95

    4
13. 13
    Article

    Storybook·32w

    Storybook is going ESM-only

    Storybook 10 is transitioning to ESM-only builds, eliminating dual CommonJS/ESM support to reduce package size by 15%, simplify maintenance, and align with JavaScript ecosystem standards. The change requires Node.js 20.16+ and valid ESM configuration files, but maintains backward compatibility for most addons. This move follows years of ecosystem preparation and recent Node.js improvements that enable smoother ESM adoption.

    77

    6
14. 14
    Article

    Hacker News·34w

    React Won by Default – And It's Killing Frontend Innovation

    React's dominance stems from default adoption rather than technical merit, creating a self-perpetuating cycle that stifles frontend innovation. Alternative frameworks like Svelte, Solid, and Qwik offer superior performance through compile-time optimizations, fine-grained reactivity, and resumability, but struggle for adoption due to network effects. This monoculture creates technical debt, limits skill diversity, and slows ecosystem evolution. Breaking free requires deliberate framework evaluation based on project constraints rather than momentum, considering factors like performance needs, team skills, and long-term maintenance costs.

    75

    24
15. 15
    Article

    CSS-Tricks·34w

    What’re Your Top 4 CSS Properties?

    CSS-Tricks team members share their picks for the top 4 CSS properties they'd choose if limited to only four for building a website. Responses vary from typography-focused selections (font, color, padding) to layout-oriented choices (display, flex-direction, grid). The exercise reveals different developer priorities and approaches to web styling, with most favoring shorthand properties like font and background for maximum versatility within tight constraints.

    62

    4
16. 16
    Article

    Codrops·35w

    7 Must-Know GSAP Animation Tips for Creative Developers

    Seven practical GSAP animation techniques including SplitText masking for efficient DOM manipulation, stagger direction control for varied animation flows, array value wrapping for creative effects, random string functions for dynamic animations, repeatRefresh for varying repeated animations, timeScale tweening for smooth playback control, and GSDevTools markers for debugging complex sequences.

    50

    1
17. 17
    Article

    Prismic·36w

    CSS Sliders: 40 Examples + Best Libraries for Developers

    A comprehensive collection of 40 CSS slider and carousel examples with CodePen demonstrations, ranging from pure CSS solutions to JavaScript-powered implementations. Covers popular libraries like Swiper, Splide, and Glide.js for creating responsive, interactive sliders for image galleries, testimonials, and content showcases.

    48
18. 18
    Article

    CSS Tip·35w

    The Fundamentals of CSS Alignment

    A comprehensive guide to CSS alignment that explains the fundamental concepts behind alignment properties across different layout systems. Covers the two-level alignment theory (content and item levels), demonstrates how alignment works in Grid, Flexbox, and Block containers, and explains concepts like auto margins, safe alignment, and absolutely-positioned elements. Includes interactive demos and a quiz to test understanding.

    43

    1
19. 19
    Article

    Saad Hasan·33w

    TailwindCSS to CSS Converter

    A developer created an improved TailwindCSS to CSS converter tool that transforms utility classes into clean CSS code. The tool features real Tailwind output, responsive and pseudo-class support, custom selectors, syntax highlighting, and a polished dark UI with saved preferences. It addresses the common pain point of manually migrating projects away from TailwindCSS.

    34

    8
20. 20
    Article

    LogRocket·36w

    The silent shift to Vite: What it means for your stack

    Vite has surpassed Webpack in weekly downloads, reaching 140 million, marking a significant shift in JavaScript build tools. The transition reflects developers' preference for faster build times, instant hot reloads, and simpler configuration. While Webpack dominated for years with its comprehensive bundling capabilities, Vite leverages native ES modules for instant server startup and near-instant hot module replacement. For new projects, Vite is recommended as the default choice, while existing Webpack projects should only migrate if experiencing performance issues or configuration complexity.

    34

    6
21. 21
    Video

    ByteGrad·33w

    This API Client Is Amazing! (HTTP Interceptor, API Mocking, Redirect, Modify Response)

    Requestly is an API development tool that helps developers intercept, mock, and modify HTTP requests during frontend development. It allows testing with non-existent API endpoints, simulating different response states, modifying headers, adding delays, and redirecting requests. The tool works as both a Chrome extension and desktop application, enabling developers to experiment with UI components before backend APIs are ready, test error states, and debug network issues without modifying actual code.

    32
22. 22
    Article

    WeProDev·32w

    Hands on React ( The best way to learn React )

    A comprehensive React learning resource that provides hands-on tutorials and practical exercises for developers wanting to master React development through interactive coding examples and step-by-step guidance.

    25
23. 23
    Article

    CSS-Tricks·34w

    What Can We Actually Do With corner-shape?

    The corner-shape CSS property enables creating various UI effects beyond traditional rounded corners, including snipped corners, slanted sections, sale tags, tooltips, and squircles. Currently supported only in Chrome 139+, it works alongside border-radius to create beveled, scooped, notched, and squircle corner shapes. Examples demonstrate practical applications like arrow breadcrumbs, realistic text highlighting, and background clipping techniques.

    25

    1
24. 24
    Article

    CSS Tip·32w

    CSS Shapes using corner-shape

    The new CSS corner-shape property enables developers to create common geometric shapes like triangles, rhombus, octagon, hexagon, trapezoid, parallelogram, arrows, and 3D boxes by manipulating corner shapes combined with border-radius. Currently limited to Chrome browser support only.

    18

    1
25. 25
    Video

    Coding in Public·34w

    Relative colors are HERE!

    CSS relative color syntax allows developers to create flexible color systems by defining colors based on existing ones using the 'from' keyword. The syntax supports color space conversion between HSL, OKLCH, and hex values, enabling dynamic color calculations with functions like calc() and clamp(). With 87% browser support as of 2023, this feature helps build more maintainable design systems by allowing relative color adjustments without manual conversion.

    18