Best of Frontend Development — November 2024

  1. 1
    Video
    Avatar of fireshipFireship·1y

    CSS just changed forever… plus 7 new features you don't know about

    CSS has received a significant update, introducing a new logo in the color Rebecca purple and several game-changing features. Among these are the 'aligned content' property for easier centering without flexbox or grid, type-specific CSS variables via the 'property' at rule, and improved animations with the 'starting style' at rule. Additionally, new math functions have been added, alongside improvements for managing light/dark modes and form validation. The 'interpolate size' property also allows for the animation of elements with auto height.

  2. 2
    Article
    Avatar of communityCommunity Picks·1y

    CSS Easing Editor

    CSS Easing Editor simplifies the use of CSS easing functions. Users can easily generate and copy cubic-bezier configurations for their animations.

  3. 3
    Article
    Avatar of communityCommunity Picks·1y

    ✨ How to Study Frontend Development the Lazy Way

    The post details two effective approaches for learning frontend development, even for complete beginners. It highlights using paid resources like FrontendMasters, or leveraging free tools and tutorials, emphasizing the importance of building projects to facilitate learning. The author shares a 7-step plan for both approaches, covering foundational courses, project-building, mastering JavaScript, and diving into React and intermediate projects.

  4. 4
    Article
    Avatar of tailwindcsstailwindcss·1y

    Tailwind CSS v4.0 Beta 1

    Eight months in the making, Tailwind CSS v4.0 Beta 1 is now available, featuring a new performance-oriented engine that boasts significantly faster build times. The update also includes a unified toolchain, CSS-first configuration, and modern web design enhancements like native cascade layers and container queries. Check out the beta documentation to get started and contribute to its development ahead of the stable release early next year.

  5. 5
    Article
    Avatar of communityCommunity Picks·1y

    UI Elements

    Buckets UI allows developers to build attractive and efficient products swiftly. It is widely used globally, with a significant presence in Australia.

  6. 6
    Article
    Avatar of fullstackdeveloperFullstack Developer·1y

    A Creative Site Worth Exploring

    The site exhibits an impressive UI and superb interactions, showcasing the excellent work of the front-end developers.

  7. 7
    Article
    Avatar of asayerasayer·2y

    Create Scroll Animations with just CSS

    Learn to create scroll-based animations using only CSS with detailed examples and code snippets. Understand how to use the animation-timeline and animation-range properties to trigger animations when elements enter the viewport. Also, explore how to handle browser compatibility with JavaScript fallbacks using IntersectionObserver or scroll event listener.

  8. 8
    Article
    Avatar of communityCommunity Picks·1y

    1,700+ Free Tailwind CSS Examples

    The Tailwind CSS Components Library offers over 1700 free, ready-to-use components for creating stunning UIs effortlessly. Users can explore the Tailwind Playground for live previews, save and share components, and showcase their design skills through personal profiles. The library is maintained by the Tailwind community and encourages contributions. All components are free for personal and commercial use under open-source licenses.

  9. 9
    Video
    Avatar of youtubeYouTube·1y

    You can now build AWESOME TailwindCSS Animations!

    Discover Rumbo, a new TailwindCSS plugin for creating beautiful, performant, and accessible animations effortlessly. With easy installation and a variety of pre-built classes, you can quickly enhance your projects with animations. The plugin also offers a visual editor for custom animations, making it ideal for developers seeking simple and efficient animation solutions without the complexity of traditional animation libraries.

  10. 10
    Article
    Avatar of communityCommunity Picks·1y

    Tailwind CSS easing classes

    A set of easing functions is provided for use in Tailwind CSS projects. It is recommended to use class names with arbitrary properties like `[transition-timing-function:cubic-bezier(...)]` instead of `ease-[cubic-bezier(...)]`, particularly when working with the tailwindcss-animate plugin, due to compatibility issues noted in the Tailwind CSS documentation.

  11. 11
    Article
    Avatar of ishadeedAhmad Shadeed·1y

    Overflow Clip

    Learn about the CSS overflow property, its usage, and how to control content clipping using the overflow: clip value, which is supported by major browsers. Understand the common issues with overflow: hidden and discover practical use cases for overflow: clip in web design, such as hero sections, single-direction clip, and scroll-driven animations.

  12. 12
    Article
    Avatar of tkdodoTkDodo·2y

    React Query API Design - Lessons Learned

    Dominik, a frontend tech lead at Adverity and maintainer of TanStack React Query, shares insights from his talk at React Advanced in London. He discusses the challenges of API design in open source, the balance between minimal and flexible APIs, and the importance of considering types from the beginning. He also touches on managing user expectations and feedback for new features, and the significance of early user feedback in open source projects. Key points include the evolution of React Query, handling API complexity, and the role of effective API design in user adoption.

  13. 13
    Article
    Avatar of tiaThis is Angular·2y

    Angular 19 - 5 Game-Changing Features You Need to Know

    Angular 19 introduces significant features aimed at improving developer experience and application performance. Key updates include partial and incremental hydration for faster load times, default standalone components for simplified code structure, zoneless change detection for better performance and smaller bundles, linkedSignal for enhanced reactivity, and new resource and rxResource APIs for streamlined data retrieval.

  14. 14
    Article
    Avatar of communityCommunity Picks·1y

    Tailwind Background

    A collection of modern background snippets crafted with Tailwind CSS, ready for immediate use. These snippets are perfect for full-page backgrounds and can be previewed and customized as needed.

  15. 15
    Article
    Avatar of communityCommunity Picks·1y

    The Art of Managing Re-renders in React Applications

    Learn techniques to optimize React applications and avoid unnecessary re-renders, such as using useMemo for expensive calculations, React.memo for component memoization, useCallback to maintain stable function references, and avoiding inline functions and objects. React 19 introduces features like Suspense and Concurrent Mode to automate performance optimization, enabling developers to focus on building new features.

  16. 16
    Article
    Avatar of communityCommunity Picks·1y

    CSS Grid Cheat Sheet

    A comprehensive cheat sheet for CSS Grid, providing detailed information to help web developers create complex and responsive layouts efficiently. It breaks down various properties and examples, making it easier to understand and implement CSS Grid in real-world projects.

  17. 17
    Article
    Avatar of csstipCSS Tip·1y

    Full-bleed layout with modern CSS

    Learn how to create a full-bleed layout using modern CSS. A full-bleed layout allows an element to extend beyond its container's boundaries, reaching the edge of the page. This tutorial provides various examples and compact syntax options for achieving this effect with CSS.

  18. 18
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind CSS Centering: Examples with Tutorial

    Tailwind CSS simplifies the often complex task of centering elements in web design through its utility-first approach. This tutorial highlights various techniques for centering text, divs, and inline elements using utility classes like `text-center`, `justify-center`, and `items-center`. It covers installing Tailwind via CDN or npm and details different strategies for horizontal and vertical alignment, enhancing both speed and consistency in web development.

  19. 19
    Article
    Avatar of communityCommunity Picks·1y

    New CSS that can actually be used in 2024 #

    CSS has seen significant changes in recent years, introducing several new features now supported by modern browsers. These include logical properties that adapt to different reading directions, container queries for more flexible responsive designs, the powerful :has pseudo-class for conditionally styling elements based on their children, and cascade layers for better organization of styles. Additional advancements include subgrid for improved grid layouts and useful new functions like clamp and min/max for responsive design. These updates promise more control and flexibility for developers but may require polyfills for older browser support.

  20. 20
    Article
    Avatar of devtoDEV·2y

    Why Virtual DOM: Faster Rendering and Performance

    Explores the Document Object Model (DOM) and the virtual DOM, detailing how the browser creates and manipulates the DOM from HTML or XML content. The virtual DOM concept is introduced as a performance enhancement, describing how it maintains a copy in memory to optimize updates and rendering in modern web libraries.

  21. 21
    Article
    Avatar of communityCommunity Picks·1y

    7 challenges to do before a React interview

    The post lists seven coding challenges to help candidates prepare for a React interview. Each challenge focuses on different skills such as data fetching, state management, working with intervals, local storage, forms, and component structuring. Completing these tasks will assist in warming up for potential interview tasks.

  22. 22
    Article
    Avatar of communityCommunity Picks·1y

    Learn Tailwind CSS

    Explore the essentials of Tailwind CSS through a hands-on learning experience. Gain practical skills by working on five real-world projects.

  23. 23
    Article
    Avatar of asayerasayer·1y

    How to Autofocus using React Hooks

    Autofocus enhances user experience by automatically focusing on input fields during page load or user interactions. This tutorial explains how to implement autofocus in React using hooks such as useRef and useEffect. It covers setting up a React project, adding autofocus to an input field upon component mount, and enhancing the form's behavior by focusing on input fields when they are hovered over. Additionally, common pitfalls, such as delayed focus and browser inconsistencies, and their troubleshooting are discussed to ensure a consistent autofocus experience.

  24. 24
    Article
    Avatar of communityCommunity Picks·1y

    Inspirational Tailwind Loading Page Animation Examples

    Loading animations enhance user experience by providing feedback while content loads. This guide explores Tailwind CSS animation utilities and offers various examples, such as full-screen GIFs, spinners, expanding circles, and bouncing dots. Tailwind CSS makes it easy to implement these animations, contributing to a more interactive, visually appealing, and user-friendly website.

  25. 25
    Article
    Avatar of communityCommunity Picks·1y

    catppuccin/daisyui: 🌼 Soothing pastel theme for daisyUI

    Catppuccin provides a soothing pastel theme for daisyUI, compatible with npm, pnpm, and yarn package managers. It lets developers choose or customize themes such as Latte, Frappe, Macchiato, and Mocha. Accent colors can be assigned to primary, secondary, and other semantic color values. Recommended testing with provided HTML grid to ensure theme styling.

See all Frontend Development archives