Best of Frontend Development — June 2025

  1. 1
    Article
    Avatar of communityCommunity Picks·49w

    Onlook – Cursor for Designers

    Onlook is an open-source desktop application that bridges the gap between design and development by allowing users to visually edit React websites while automatically writing changes back to code in real-time. The tool features AI-powered assistance for building and experimenting with frontend interfaces, a Figma-style interface that works with existing design systems, and local-first architecture that keeps all code on the user's device. It integrates with existing build processes without requiring component migration and maintains version control compatibility.

  2. 2
    Video
    Avatar of javascriptmasteryJavaScript Mastery·46w

    Web Animations Full Course 2025 | Build an Awwwards Website & Master GSAP in Two Hours

    A comprehensive tutorial covering GSAP (GreenSock Animation Platform) fundamentals and building an award-worthy animated website. The course teaches essential GSAP methods including to, from, fromTo, timeline, stagger, and ScrollTrigger, then applies these concepts to create a cocktail landing page with smooth animations, parallax effects, and scroll-triggered interactions. Includes practical examples of integrating GSAP with React, text animations using SplitText plugin, and professional animation techniques used by top-tier agencies.

  3. 3
    Article
    Avatar of logrocketLogRocket·48w

    Modern CSS carousels: No JavaScript required

    Chrome 135 introduces new CSS pseudo-elements ::scroll-button() and ::scroll-marker() that enable building fully functional carousels without JavaScript. These features create interactive scroll buttons and visual markers with built-in accessibility support, including automatic screen reader announcements and keyboard navigation. The pseudo-elements work with existing CSS features like scroll-snap-type for smooth navigation and can be styled like regular HTML elements.

  4. 4
    Article
    Avatar of communityCommunity Picks·48w

    Tailwind CSS Animations Plugin: Community-Powered Animation Magic

    A comprehensive Tailwind CSS animations plugin by @midudev that provides over 60 pre-built animation classes for web developers. The plugin includes common animations like fade-in/out, slide transitions, rotations, bouncing effects, and complex animations like heartbeat, dancing, and jelly. Installation is straightforward via npm, making it easy to add engaging animations to websites without writing custom CSS.

  5. 5
    Video
    Avatar of t3dotggTheo - t3․gg·48w

    Why Tech Companies Are Moving Off React

    A detailed analysis of why some tech companies are considering moving away from React, examining the framework's evolution through hooks, concurrent mode, server components, and the React compiler. The discussion argues that React's recent developments primarily benefit large-scale applications, addressing performance issues and complexity management that big companies face. The author counters claims that React is failing at scale, demonstrating how features like hooks improved code composability, server components solve server-driven UI problems, and the compiler optimizes performance automatically.

  6. 6
    Article
    Avatar of collectionsCollections·47w

    A Guide to Creating Blurry Glass Effects with CSS

    Glassmorphism creates modern frosted glass effects in web design using CSS techniques like backdrop-filter, radial gradients, and pseudo-elements. Basic approaches use gradient backgrounds and borders for solid backgrounds, while advanced methods employ CSS masks and backdrop filters for true transparency. A Glassmorphism CSS Generator tool based on Glass UI library provides ready-to-use code snippets with MIT licensing, offering backdrop-filter blur effects and browser compatibility information for streamlined implementation.

  7. 7
    Article
    Avatar of communityCommunity Picks·45w

    DynaUI

    DynaUI is a React component library featuring 30+ animated components built with Tailwind CSS and Framer Motion. It promises to reduce development time from weeks to hours by providing pre-built, customizable UI components for landing pages and web applications. The library has received positive feedback from developers who appreciate its time-saving potential and quality animations.

  8. 8
    Video
    Avatar of youtubeYouTube·45w

    3 Ways to Build Beautiful Websites Using Cursor AI

    Three methods to create professional-looking websites using Cursor AI: cloning existing designs by creating JSON design systems, using customizable component libraries like Shad CN UI through Tweak CN, and integrating premium React components from libraries like React Bits. The guide emphasizes being specific with AI prompts, choosing appropriate fonts and animations, and implementing responsive layouts to achieve professional results instead of generic AI-generated designs.

  9. 9
    Article
    Avatar of fmastersFrontend Masters·49w

    Just Launched: My New Dev Portfolio Built with Next.js, Tailwind & Motion Magic 💻✨

    A developer showcases their newly launched portfolio website built using Next.js for performance and SEO, Tailwind CSS for styling, and animation libraries like GSAP and Framer Motion. The portfolio emphasizes smooth interactions, accessibility, responsiveness, and clean minimal design with personality. The project demonstrates modern frontend development practices combining performance optimization with engaging user experience.

  10. 10
    Article
    Avatar of css_tricksCSS-Tricks·45w

    CSS-Tricks

    KelpUI is a new CSS library by Chris Ferdinandi that combines modern CSS features with Web Components. The library emphasizes base styles, utility classes, CSS variables for customization, and Web Components that keep HTML in the light DOM. It uses CSS Cascade Layers for logical structure, maintains low specificity selectors, includes accessible color palettes, and can be loaded from CDN or downloaded locally. The development process is being openly documented through a series of blog posts.

  11. 11
    Article
    Avatar of twitter_xTwitter X·47w

    Liquid Glass for VueJS

    A Vue.js library that provides glassmorphism UI components with translucent, frosted glass visual effects. The library offers pre-built components that implement the popular glass design trend using CSS backdrop filters and transparency effects, making it easy for developers to add modern glass-like interfaces to their Vue applications.

  12. 12
    Article
    Avatar of communityCommunity Picks·48w

    Shadcn UI Blocks

    A collection of pre-built UI blocks and templates using Shadcn UI components and Tailwind CSS. These ready-to-use components can be copied and pasted into any React framework project, providing developers with beautiful, consistent interface elements without building from scratch.

  13. 13
    Article
    Avatar of communityCommunity Picks·48w

    Just Fucking React to React

    Demonstrates how simple UI patterns like modals, dark mode toggles, forms, and accordions can be implemented using native HTML elements instead of complex React components. Shows side-by-side comparisons between vanilla HTML solutions and their React equivalents, highlighting how native web APIs often provide simpler alternatives to framework-heavy implementations.

  14. 14
    Video
    Avatar of huxnwebdevHuXn WebDev·47w

    Svelte 5 Complete Course ( 2025 )

    Svelte 5 is a modern JavaScript framework that compiles components into optimized vanilla JavaScript at build time, eliminating runtime bloat. Unlike React or Vue.js which use virtual DOM, Svelte directly updates the DOM for better performance. The framework features component-based architecture, reactive state management with runes, props for data passing between components, text interpolation for dynamic content, conditional rendering, loops with each blocks, snippets for reusable markup, and side effects handling. Key concepts include state management using state runes, derived values, children props for passing HTML content, and event handling with on:click syntax.

  15. 15
    Article
    Avatar of hordeHorde·48w

    Why is Shadcn popular?

    Shadcn's popularity stems from its unique approach as a code distribution platform rather than a traditional UI library. Unlike conventional libraries, developers own the components completely, avoiding dependency management issues and breaking changes from updates. This approach offers more control and flexibility compared to building components from scratch while being significantly more time-efficient and practical for development workflows.

  16. 16
    Article
    Avatar of communityCommunity Picks·47w

    Obra Icons

    Obra Icons is a comprehensive icon library featuring over 1,000 simple and consistent icons designed specifically for user interfaces. The collection includes a wide variety of categories from basic UI elements (arrows, buttons, navigation) to specialized icons for business, technology, entertainment, and everyday objects. Each icon follows a consistent design language making them suitable for cohesive interface design across web and mobile applications.

  17. 17
    Article
    Avatar of piccalilliPiccalilli·48w

    Sticky revealing footer

    Learn how to create a sticky footer that reveals from the bottom using minimal CSS. The technique involves using position: sticky on the footer, creating proper stacking contexts with z-index values, and applying position: relative to main content elements to ensure proper layering. Key considerations include setting background colors to prevent content overlap and understanding how stacking contexts work in CSS.

  18. 18
    Article
    Avatar of tarzzotechTarzzo Tech·48w

    Vibe coding with V0

    V0 is an AI-powered tool that generates React components and web interfaces through natural language prompts. The tool streamlines frontend development by allowing developers to describe what they want to build and automatically generating corresponding code, making it particularly useful for rapid prototyping and component creation.

  19. 19
    Article
    Avatar of storybookStorybook·46w

    Frontend test coverage with Storybook 9

    Storybook 9 introduces comprehensive frontend test coverage tracking that measures how much component code is exercised by stories. The new workflow allows developers to run interaction, accessibility, and visual tests with a single command, identify untested components and code branches, and quickly fill coverage gaps by generating new stories. This approach provides high coverage of UI states while being faster and more reliable than end-to-end tests, though it complements rather than replaces them for full application testing.

  20. 20
    Article
    Avatar of frontendmastersFrontend Masters·47w

    Grainy Gradients – Frontend Masters Blog

    Explores advanced techniques for eliminating gradient banding by using SVG displacement maps instead of traditional noise layering. The approach uses feTurbulence and feDisplacementMap to create grainy effects without altering the original gradient colors, offering better visual results than previous methods that darkened or oversaturated gradients.

  21. 21
    Article
    Avatar of codemotionCodemotion·48w

    VanillaCreamJS: Superpowers for Native JavaScript

    VanillaCreamJS is a lightweight JavaScript library that brings reactivity to vanilla JavaScript without build tools or compilation steps. It provides a jQuery-like $ function that enhances DOM elements with reactive state binding, automatic DOM updates, and powerful properties for text, HTML, classes, and events. The library supports deep reactivity for arrays and objects, reusable components, computed properties, and seamless backend integration. It aims to combine the best features of HTMX, Vue, and Alpine while maintaining simplicity and performance through the absence of diffing algorithms.

  22. 22
    Article
    Avatar of communityCommunity Picks·48w

    State of CSS 2025

    The State of CSS 2025 survey is now open, aiming to track adoption of recent CSS features like subgrid, :has(), and scroll-driven animations. The survey organizers advocate for a slower pace of CSS innovation to allow developers time to master existing features and for browser vendors to consolidate improvements. The survey takes 15-20 minutes to complete and helps inform browser roadmaps and developer technology choices. Results will be released after the survey closes on July 1, 2025.

  23. 23
    Video
    Avatar of kevinpowellKevin Powell·48w

    Make an animated glowing border effect with CSS

    A comprehensive tutorial demonstrating how to create an animated glowing border effect using pure CSS, inspired by Google's AI search interface. The technique uses conic gradients, pseudo-elements, and CSS custom properties to achieve a dynamic glow that works with any background color and supports both light and dark themes. The implementation includes positioning tricks with z-index and stacking contexts, blur filters for the glow effect, and registered custom properties for smooth animations. The tutorial also covers creating variants for different border positions and making the effect easily customizable through CSS variables.

  24. 24
    Article
    Avatar of communityCommunity Picks·47w

    Lighting: Where 3D Comes to Life

    Learn how to create realistic lighting effects in CSS 3D scenes by understanding light source characteristics like distance, direction, size, intensity, warmth, and quantity. The tutorial covers using color-mix() function to blend colors for highlights and shadows, creating cast shadows with clip-path property, and applying lighting to complex 3D objects like a CSS chicken character.

  25. 25
    Article
    Avatar of svelteSvelte Blog·49w

    What’s new in Svelte: June 2025

    Svelte introduces Attachments as a modern replacement for actions, offering more flexibility and better developer experience. The June 2025 update includes generics support for snippets, improved TypeScript integration, XHTML compliance, and CSP improvements. The community showcase highlights various applications built with Svelte, from game engines to markdown editors, along with new learning resources and updated component libraries like Bits UI v2 and Svelte Flow 1.0.

See all Frontend Development archives