Best of Frontend Development — March 2024

1. 1
   Article

   DEV·2y

   Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game!

   A CSS-only game showcasing swipe awareness and collision detection using CSS tricks and scroll properties. The author challenges the notion that swipe awareness is impossible without JavaScript and provides an interactive and inspiring experience.

   197

   5
2. 2
   Article

   CSS-Tricks·2y

   The Power of :has() in CSS | CSS-Tricks

   Learn about the power of :has() in CSS, a pseudo-class that allows you to style elements based on their contents. Discover the syntax and examples of how to use :has() to enhance your web projects.

   183

   10
3. 3
   Article

   asayer·2y

   Design Systems for Front End Development

   Design systems in front end development are collections of reusable components with clear design standards. They include a design language, component library, and style guide. Benefits of design systems include scalability, design consistency, faster development, and accessibility. Setting up a design system involves collaboration among designers, developers, product managers, and accessibility experts. Metrics and analytics are important for evaluating the impact and effectiveness of design systems and can be used for continuous enhancement.

   121

   2
4. 4
   Video

   Community Picks·2y

   VS Code Extensions | Typescript / React devs use this for Real Projects #frontend #webdevelopment

   The post discusses various VS Code extensions that can be helpful for TypeScript and React developers. It covers extensions such as Console Ninja, ESLint, and VSS Code Pets.

   115

   3
5. 5
   Article

   AWS Tip·2y

   VanillaJS: You Might Not Need A Library

   Learn about Vanilla JavaScript, the basics of DOM selection, converting a NodeList to an array, using fetch to get information from the internet, defining a router in JavaScript, working with Shadow DOM, HTML templates, and template literals, and using proxies for reactive programming.

   108

   7
6. 6
   Article

   freeCodeCamp·2y

   How to Build an AI-enhanced Task App with React and Appwrite

   Learn how to build an AI-enhanced task app with React and Appwrite. This article covers the prerequisites, setting up the Appwrite backend, and the step-by-step process of building the app.

   78
7. 7
   Article

   Collections·2y

   What's New in Tailwind CSS 4: Performance Improvements, Smaller Footprint, and Increased Flexibility

   Tailwind CSS 4 brings performance improvements, smaller file sizes, and increased flexibility to developers, making it an efficient and convenient way to style web applications.

   75

   11
8. 8
   Article

   DEV·2y

   Crafting interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript

   Learn how to create interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript. The post provides code examples and explains the implementation process.

   69
9. 9
   Article

   Community Picks·2y

   Deep Dive into Web Performance: Mastering LCP Optimization for SEO Success

   This article delves into web page performance, focusing on the intricacies of Largest Contentful Paint (LCP) optimization. It explains what LCP is, how it affects SEO, and provides ways to improve LCP. The article emphasizes the importance of prioritizing critical resources for rendering and optimizing load timings. It also mentions the significance of reducing render delay and offers tips for LCP optimization. Overall, the article aims to provide readers with insights and strategies to improve their website's performance.

   69

   3
10. 10
    Article

    LogRocket·2y

    Exploring advanced Next.js routing conventions

    Explore advanced Next.js routing conventions, including parallel and intersecting routes. Learn how to render multiple pages in the same view, organize contents using named slots, and achieve independent streaming and sub-navigation.

    60

    1
11. 11
    Article

    Medium·2y

    Optimising your design system with Figma’s variables

    Learn how to optimize your design system using Figma's variables. Explore the principles of consistency, scalability, maintainability, DRYness, and code-friendliness. Discover the benefits of primitive variables and how to set them up in a Codesign system. Understand the concept of semantic variables and their compatibility with different modes. Start building your own design system today!

    45

    5
12. 12
    Article

    freeCodeCamp·2y

    Learn Tailwind CSS in Spanish – Full Course

    Learn Tailwind CSS in Spanish with a full course on the freeCodeCamp.org Spanish YouTube channel. The course covers the basics of Tailwind CSS, responsive web design, CSS flexbox and grid, and includes projects like a notifications panel, dashboard, and landing page.

    36
13. 13
    Article

    Atomic Spin·2y

    3 Features of Modern CSS You Should Know About

    Discover three modern CSS features that can save you time and headaches: :has() pseudo-class, :focus-visible pseudo-class, and accent-color property.

    32

    1
14. 14
    Article

    Community Picks·2y

    guilhermerodz/input-otp: One time passcode Input. Accessible & unstyled.

    A library for creating a one-time passcode input field that is accessible and unstyled. The library renders an invisible input as a sibling of the slots, allowing for custom designs. It supports various customization options and features like automatic form submission on OTP completion and automatic focus on input load.

    31
15. 15
    Article

    Node.js developers·2y

    Tailwindcss v4 Alpha release

    Tailwindcss v4 has big changes, including being 10X faster, more optimized, and not requiring knowledge of JS for setup. It includes built-in @import handling, CSS-first configuration, one dependency, custom parser, and more.

    29

    3
16. 16
    Article

    Traversy Media·2y

    React Crash Course 2024

    A 3-hour crash course on React fundamentals, covering components, state, props, hooks, and more while building a job listing app.

    27

    1