Best of Frontend Development — December 2024

  1. 1
    Article
    Avatar of devtoDEV·1y

    100+ Frontend Projects to level up your Skills

    Finding interesting frontend projects to work on can be challenging for both beginners and experienced developers. This post shares a GitHub repository with over 100 frontend projects, complete with source code. The projects range from beginner to advanced levels, covering a variety of applications like calculators, e-commerce websites, and more. Tips on how to select, analyze, and customize these projects are also provided to help developers improve their skills and build an impressive portfolio.

  2. 2
    Article
    Avatar of joshwcomeauJosh W Comeau·1y

    Next-level frosted glass with backdrop-filter • Josh W. Comeau

    Learn how to create an advanced frosted glass effect using the `backdrop-filter: blur()` CSS property and other optimizations to enhance the depth and realism of your web projects. This guide covers the intricacies of CSS filters, handling browser compatibility, and fixing common issues like pixel consideration and flickering. It includes practical demonstrations, code snippets, and tips for improving performance and visual quality.

  3. 3
    Article
    Avatar of lonely_programmerLonely Programmer·1y

    The best User Experience

  4. 4
    Article
    Avatar of communityCommunity Picks·1y

    CSS Layout Generator

    Explore how a CSS Layout Generator can simplify the process of creating flexible and responsive web layouts without manual coding. Such tools help designers and developers quickly generate CSS code for various layout configurations.

  5. 5
    Article
    Avatar of PrismicPrismic·1y

    CSS Hover Effects: 40 Engaging Animations To Try

    Interactive websites are key to a good user experience, and CSS hover animations can help achieve this. This post provides 40 engaging CSS hover animations, including custom ones and examples from other developers. Techniques range from simple button scaling to complex 3D effects. It also highlights tools and libraries like Hover.css, Mocassin.css, and iHover for creating these animations easily, enhancing the visual appeal and interactivity of your website.

  6. 6
    Article
    Avatar of nuxtandvueVuejs&Nuxtjs·1y

    Library Tier List from the State of JS 2024

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

    Frontend System Desigm: Chat Application

    Designing a frontend chat system involves defining component structures, managing state, achieving real-time updates, ensuring user authentication, and considering UI/UX elements. The architecture includes REST and WebSockets for real-time communication, with JWT for authentication and Signal Protocol for encryption. Key aspects include idempotency, client-side storage, managing network unreliability, and implementing performance optimizations. Production readiness requires feature flags, thorough testing, error tracking, performance monitoring, and user behavior analytics.

  8. 8
    Article
    Avatar of uxplanetUX Planet·1y

    Best UX Practices for Designing a Sidebar

    Sidebars are crucial for navigation in modern web applications, organizing and presenting content in a structured way. Following best practices in designing sidebars enhances usability, efficiency, space optimization, accessibility, and flexibility, which significantly improve user satisfaction and productivity. Key elements include optimal sidebar width, dynamic navigation, easy account switching, expandable sub-items, space for updates, dark/light mode toggle, highlighting active sections, prioritizing essential information, adjustable widths, quick search features, targeted actions, and secondary sidebars for quick access. Testing with real users ensures continuous improvement.

  9. 9
    Article
    Avatar of devtoDEV·1y

    React 19: The Features You Need to Know!

    React 19 introduces significant enhancements including Actions for streamlined asynchronous operations, new hooks like useOptimistic, useActionState, and useFormStatus for better state management, improved hydration for faster server-side rendering, an optimized Context API for better performance, and support for custom elements to integrate web components seamlessly. These updates aim to reduce complexity and boost the performance, ultimately providing a superior developer experience.

  10. 10
    Article
    Avatar of devtoDEV·1y

    5 Frontend Development Myths That Need to Die in 2024

    Frontend development is often misunderstood due to persistent myths. Common misconceptions include the simplicity of CSS, the ability of frameworks to solve all problems, the perceived complexity gap between frontend and backend, the optional nature of accessibility, and the belief that frontend development will soon be fully automated by AI. These myths overlook the nuanced, challenging nature of building user-facing software and highlight the importance of understanding the intricacies of frontend work.

  11. 11
    Article
    Avatar of PrismicPrismic·1y

    CSS Text Animations: 40 Creative Examples to Try

    CSS text animations can enhance user experience by making web content more engaging. This post showcases 40 creative examples of text animations, including custom animations and curated CodePen projects. Each example is accompanied by live demos and code snippets for easy implementation. The post also discusses essential CSS features and principles behind these animations and presents popular libraries and tools to help create your own animations.

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

    The CSS Display Property is Changing Forever

    The CSS display property now accepts two values, enhancing flexibility in layout design. Initially, the display property could only define the element's own layout, but advancements allow specifying how child elements behave with values like flex, grid, and more. New properties like 'contents' and 'flow-root' offer additional control, such as preventing margin collapsing. This new approach provides greater flexibility and precision in web design layouts.

  13. 13
    Article
    Avatar of syncfusionSyncfusion·1y

    Svelte vs React: Which Framework to Choose?

    In 2025, the choice between Svelte and React remains crucial for frontend developers focused on performance, user experience, and scalable app development. While React, a mature library with a vast ecosystem, is optimal for large-scale, complex applications, Svelte offers a lightweight and performance-optimized alternative suitable for small to medium-sized projects. This comparison highlights their key differences in performance, developer experience, and architecture to help developers choose the most appropriate framework based on project needs.

  14. 14
    Article
    Avatar of PrismicPrismic·1y

    CSS Button Animations: 40 Ideas to Try + Code Examples

    Explore 40 creative CSS button animations designed to enhance user experience and make buttons stand out. From hover effects and 3D animations to click and SVG animations, these examples demonstrate a variety of techniques to inspire your projects. Learn how to use custom CSS, JavaScript, and tools to create visually engaging and interactive buttons.

  15. 15
    Article
    Avatar of devsquadDev Squad·1y

    Customized Shadcn UI Components | Just Copy & Paste

    Shadcn UI Customized components provide a collection of ready-made, customizable components that retain the flexibility of Shadcn UI's design system. These components are designed to simplify the customization process by allowing users to preview, copy, and implement them directly into their applications.

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

    PORTFOLIO WEBSITE

    A developer shares their excitement about launching a new portfolio website. Check out the link to explore the portfolio design and content.

  17. 17
    Article
    Avatar of logrocketLogRocket·1y

    Lazy loading vs. Eager loading

    Performance is a crucial aspect of software development, especially how data is accessed. Lazy loading and eager loading are two techniques that can significantly impact this. Lazy loading loads resources only when needed, improving user experience and conserving bandwidth, while eager loading fetches all data upfront, simplifying code and ensuring data consistency. The post demonstrates both techniques using React components, illustrating how they can enhance the performance and responsiveness of single-page applications.

  18. 18
    Article
    Avatar of ishadeedAhmad Shadeed·1y

    Solved By Modern CSS: Feature Image

    Learn how to design a responsive feature image with a caption using modern CSS techniques including container queries, the :has() selector, and CSS grid. The guide explores different layout options and demonstrates how to achieve fluid design that adjusts to various container sizes, ensuring the caption appears in a classic or circular style depending on the viewport.

  19. 19
    Article
    Avatar of css_tricksCSS-Tricks·1y

    Knowing CSS is Mastery to Frontend Development

    While modern frameworks like React and TypeScript, along with component libraries such as MUI and Tailwind, have made styling easier, many developers lack the knowledge to assess the quality of CSS in their codebases. This can lead to performance issues and a lack of understanding of foundational principles. Ultimately, prioritizing user experience and a deeper understanding of CSS are crucial for effective frontend development.

  20. 20
    Article
    Avatar of logrocketLogRocket·1y

    How React 19 can help you make faster websites

    React 19 introduces several new features and improvements, including a compiler for better performance and automated memoization, replacing hooks like `useMemo()` and `useCallback()`. New directives like `use client` and `use server` help with improved SEO and faster load times. The update also includes better handling of asynchronous data fetching with the `use()` hook, built-in support for metadata for SEO, and enhanced asset loading with Suspense. Additionally, React 19 simplifies form handling and optimizes state updates with new hooks such as `useFormStatus()` and `useActionState()`.

  21. 21
    Video
    Avatar of primeagenThePrimeTime·1y

    How To Become An Expert

    Becoming an expert in programming requires hands-on experience in building things from scratch. To truly understand components like game engines or frontend frameworks, one should attempt to create simplified versions of these. This practice helps in grasping fundamental concepts and addressing common problems, thereby enhancing your ability to work effectively within those systems.

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

    🚀 Cursify: A Cursor Animation Library for React & Next.js 🎨

    Cursify is a cursor animation library designed for React and Next.js projects, offering customizable cursor animations, plug-and-play components, and pre-built design templates. It is optimized for performance and helps in creating engaging animations for landing pages and marketing sites.

  23. 23
    Article
    Avatar of csstipCSS Tip·1y

    Glowing border animation with a smooth stop

    Learn how to add a glowing border animation around an element using modern CSS techniques like `@property`, CSS Mask, and Math functions. The animation is infinite on hover and stops smoothly when the mouse leaves the element.

  24. 24
    Article
    Avatar of communityCommunity Picks·1y

    shadcn-ng

    Learn how to install and configure Angular including the steps to create a new project using the init command, configure components.json, and add components like Button to your project.

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

    How To Handle CSS Colors Like A Senior Dev

    The post provides an in-depth guide on advanced CSS color features. It covers color spaces and gamuts, how to use relative colors, the color mix function, and methods to implement dynamic light and dark modes. These techniques allow developers to leverage a broader range of colors and create more dynamic, visually appealing websites.

See all Frontend Development archives