Best of Frontend DevelopmentMarch 2024

  1. 1
    Article
    Avatar of devtoDEV·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.

  2. 2
    Article
    Avatar of css_tricksCSS-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.

  3. 3
    Article
    Avatar of asayerasayer·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.

  4. 4
    Video
    Avatar of communityCommunity 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.

  5. 5
    Article
    Avatar of awstipAWS 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.

  6. 6
    Article
    Avatar of freecodecampfreeCodeCamp·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.

  7. 7
    Article
    Avatar of collectionsCollections·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.

  8. 8
    Article
    Avatar of devtoDEV·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.

  9. 9
    Article
    Avatar of communityCommunity 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.

  10. 10
    Article
    Avatar of logrocketLogRocket·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.

  11. 11
    Article
    Avatar of medium_jsMedium·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!

  12. 12
    Article
    Avatar of freecodecampfreeCodeCamp·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.

  13. 13
    Article
    Avatar of atomicobjectAtomic 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.

  14. 14
    Article
    Avatar of communityCommunity 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.

  15. 15
    Article
    Avatar of nodejsdevelopersNode.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.

  16. 16
    Article
    Avatar of traversymediaTraversy 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.