Best of Frontend Development — February 2025

  1. 1
    Article
    Avatar of logrocketLogRocket·1y

    A guide to modern frontend architecture patterns

    Frontend architecture patterns provide reusable guidelines for structuring the frontend codebase of software products. Key patterns include monolithic, modular, component-based, microfrontend, and Flux architectures. Each pattern has its strengths, weaknesses, and best use cases based on project complexity, scalability, maintainability, and developer preferences. Understanding these patterns is crucial for creating scalable and maintainable frontends while avoiding costly refactors.

  2. 2
    Article
    Avatar of PrismicPrismic·1y

    40 CSS Background Effects to Enhance Your Website

    Explore 40 CSS background effects to enhance your website's design. From gradient-based designs to dynamic, motion-driven animations, learn how various effects can add depth and interactivity to your site. The post includes examples of scrolling effects, SVG animations, background patterns, and more. Additionally, discover useful tools and generators to help simplify the creation of stunning backgrounds.

  3. 3
    Article
    Avatar of medium_jsMedium·1y

    Vue is Too Easy

    Vue is renowned for its simplicity and powerful capabilities. It features an easy learning curve, versatile components, efficient state management with tools like Pinia, and comprehensive support for routing and animations. It also integrates well with TypeScript and encourages good practices in unit testing.

  4. 4
    Article
    Avatar of opensourcefrontendOpen Source Front End·1y

    I Finally built a Grid Playground with Awesome Animations

    Flexbox Labs now includes Grids, allowing users to explore and manipulate CSS grid properties, control grid item placement, and visualize grid lines. This beta version retains all the original Flexbox Labs features and seeks user feedback for improvements. Future updates will add features like grid line numbers, CSS box shadows, gradients, border-radius, and transforms.

  5. 5
    Article
    Avatar of PrismicPrismic·1y

    50 Creative CSS Image Effects for Engaging Websites

    Enhance your website's visual appeal with 50 creative CSS image effects. These effects add depth, motion, and interactivity to images, making your site more engaging. Additionally, learn how to optimize images for better performance and explore various tools and libraries to apply image filters and hover effects efficiently.

  6. 6
    Article
    Avatar of cssarticlesCSS Articles·1y

    How to Create Wavy Boxes Using CSS

    Learn how to create wavy boxes using CSS gradients and masks. The tutorial covers two types of wavy shapes with detailed code examples and explanations. Techniques include using variables for easy adjustments and ensuring the shapes adapt to specific element content. Variations for implementing rounded corners are also discussed.

  7. 7
    Article
    Avatar of logrocketLogRocket·1y

    React useCallback: When and how to use it for better performance

    The useCallback hook in React helps optimize performance by memoizing functions and preventing their recreation on each render. This is particularly useful in avoiding unnecessary re-renders of memoized child components. The article demonstrates its application with examples, such as optimizing event handlers in an e-commerce app. It also compares useCallback with other related hooks like useMemo, useEffect, and useRef to highlight different use cases. Proper usage of useCallback can significantly enhance the efficiency of React applications.

  8. 8
    Article
    Avatar of communityCommunity Picks·1y

    SSG vs SSR in Next.js 15!

    Next.js 15 makes server-side rendering the default, treating all components as Server Components unless specified otherwise with 'use client' for Client Components. SSG (Static Site Generation) provides high speed, security, and SEO benefits for static content, while SSR (Server-Side Rendering) offers dynamic content and personalization advantages. The choice between SSG and SSR depends on whether the site content is static or frequently updated.

  9. 9
    Article
    Avatar of tigerabrodiTiger's Place·1y

    Server and Client Component Patterns in Next.js

    Learn when to use server and client components in Next.js. Understand the benefits of each type, like data fetching and access to backend resources for server components, and adding interactivity and using browser APIs for client components. Discover patterns, such as sharing data between components, preventing server code in client bundles, using third-party components, and employing context providers. Also, get insights on optimizing component placement for reducing JavaScript load on the browser.

  10. 10
    Article
    Avatar of tigerabrodiTiger's Place·1y

    I like the future of Next.js

    Next.js is introducing new features such as a granular cache system and `use cache` that can be implemented at various levels including file, component, and function-level caching. The system supports smart caching with cache tags, custom cache profiles, and cache keys for better development experience. These enhancements are part of an effort to improve caching mechanisms, enabling easier invalidation and better performance.

  11. 11
    Article
    Avatar of iotechhubiO tech_hub·1y

    Frontend Automation with Github Actions and AWS

    Learn how to automate your frontend deployments to AWS S3 using GitHub Actions. This guide walks through setting up GitHub Actions workflows for continuous integration and delivery (CI/CD), using AWS CLI, managing AWS credentials securely, and deploying build files to an S3 bucket and optionally invalidating CloudFront cache. By following these steps, you can save time and ensure a more streamlined, error-free deployment process.

  12. 12
    Article
    Avatar of directusDirectus·1y

    Solving the Multiple-Frontend Problem in Modern Applications

    Modern applications often require multiple frontend architectures to support various platforms like web, mobile, and IoT. This post discusses practical approaches to manage multiple frontends without resorting to rewriting the entire codebase or learning new frameworks. Key strategies include adopting an API-first approach and using Module Federation to share code efficiently. It also covers the importance of finding natural boundaries based on business logic, handling the performance paradox, ensuring security, and managing integration points effectively.

  13. 13
    Article
    Avatar of devsquadDev Squad·1y

    Portfolio Website – Inspired by tailwindcss.com (v4)

    The author invites feedback on their portfolio website, which is inspired by Tailwind CSS version 4. They share the link to their portfolio for others to view and comment on its design and functionality.

  14. 14
    Video
    Avatar of wdsWeb Dev Simplified·1y

    This CSS Property Replaces Hundreds of Lines of Code

    Creating an input field that dynamically grows in size based on the content typically requires extensive JavaScript and complex calculations. The new CSS field sizing property simplifies this process, allowing inputs to resize based on their content with just a single line of CSS. This property supports different types of inputs, including text inputs, select boxes, and text areas, providing an effective progressive enhancement for forms. However, it's currently only supported in Chromium-based browsers.

  15. 15
    Article
    Avatar of bramBram.us·1y

    Solved by StyleObserver: Element.matchContainer()

    Martin Winkler published a package that polyfills Element.matchContainer() to notify scripts when a Container Query matches or unmatches, using StyleObserver under the hood. The polyfill allows attaching events to container queries similar to how Window.matchMedia() handles media queries. Demos showcase its use for size and style queries. The package injects necessary CSSOM rules to observe changes and leverages custom properties for functionality.

  16. 16
    Article
    Avatar of tigerabrodiTiger's Place·1y

    Tailwind v4 features I'm excited about

    Tailwind CSS v4 brings significant updates including CSS-first configuration, dynamic utility values, built-in container queries, 3D transform utilities, enhanced gradient controls, 'not' variant for styling exceptions, layered box shadows and rings, auto-resizing fields, variable font stretch options, and new first/last/nth utilities. These features offer more flexibility, ease of use, and powerful styling capabilities for web developers.

  17. 17
    Article
    Avatar of the_react_communityThe React Community·1y

    Accessible React components made for you to copy, customize, and own.

    The website provides customizable and accessible React components built with TailwindCSS, ready to be copied and integrated into projects.

  18. 18
    Video
    Avatar of freecodecampfreeCodeCamp·1y

    Strapi 5 and Next.js 15 Full Stack Project Course

    Master modern web development by building a fully functional summer camp website using Next.js 15 and Strapi 5. Through hands-on practice, you'll learn to combine Next.js's server components with Strapi's headless CMS capabilities to create dynamic, content-rich websites. This course is ideal for beginners or anyone seeking to streamline their development process with a powerful tech stack. The tutorial covers setting up Next.js, creating content types in Strapi, integrating Figma designs, and dynamically managing website content.

  19. 19
    Video
    Avatar of primeagenThePrimeTime·1y

    A Different Approach To Frontend

    The post suggests that a negative perception of front-end development may stem from a specific design philosophy. It encourages trying out web components, possibly with a bit of bus and HTMX, to rediscover an enjoyment in front-end projects. The author posits that mixing traditional and modern techniques could make front-end development more enjoyable.

  20. 20
    Article
    Avatar of bramBram.us·1y

    CSS Custom Functions are coming … and they are going to be a game changer!

    Chrome is currently prototyping CSS Functions, a new feature that allows for parameterized custom properties. This feature, available for testing in Chrome Canary with the Experimental Web Platform Features flag, has the potential to significantly enhance CSS capabilities by enabling more flexible and conditional styling. One example is the creation of a custom light-dark function to handle different values based on the user's color scheme preference. The exact release date is not yet set.

  21. 21
    Video
    Avatar of developedbyeddevelopedbyed·1y

    Make our shadcn components GLOW!

    Learn to create glowing cards with gradient effects using the Shadcn library and Tailwind CSS. This tutorial demonstrates how to integrate the glow effect into your components seamlessly without duplicating elements, ensuring support for both light and dark modes. The step-by-step guide covers setting up and customizing the glow effect around various elements, making it flexible and reusable.

  22. 22
    Video
    Avatar of developedbyeddevelopedbyed·1y

    Tailwind v4 is an exciting update

    Tailwind v4 brings a new engine, improved performance, and several new features. Notably, builds are significantly faster, and dynamic values for padding, height, and width are now supported. Setting up with Vite is streamlined, eliminating the need for a separate PostCSS configuration file. Additionally, V4 introduces support for container queries and modernizes the color palette, among other enhancements.

  23. 23
    Article
    Avatar of devtoDEV·1y

    Best Icon Library for 2025 with 4k+ Free Icons

    Lineicons V5 is a comprehensive icon library with over 5522 icons, 10+ styles, and 60 categories. It features a user-friendly interface, seamless integration with various design tools, and regular updates to stay aligned with the latest trends. The icons are highly customizable and scalable, offering clear visuals for any screen size. Designers can create custom collections for different projects to maintain consistency and efficiency. The icons are lightweight and optimized for fast loading speeds, enhancing both user experience and SEO performance.

  24. 24
    Article
    Avatar of codropsCodrops·1y

    Implementing a Dissolve Effect with Shaders and Particles in Three.js

    Learn how to create a dynamic dissolve effect using Three.js shaders and particles. This tutorial covers setting up the environment and lighting, crafting the dissolve effect with Perlin noise, creating a particle system, and applying the Unreal Bloom effect to make the edges and particles glow. Each step is detailed with code snippets and linked to specific commits for easy reference.

  25. 25
    Article
    Avatar of fullstackdeveloperFullstack Developer·1y

    37 JavaScript Carousels For Developer

    A curated collection of free vanilla JavaScript carousel code examples, including responsive designs and both horizontal and vertical variations.

See all Frontend Development archives