Best of Frontend Development — October 2024
- 1
- 2
DEV·2y
Best Icon Libraries
The landscape of icon libraries has significantly evolved in 2024, offering designers and developers more options, better integration, and enhanced customization. Notable mentions include Lineicons V5 with over 30,000 icons and advanced features like a free CDN and icon editor. Heroicons, Uicons, Iconify, Streamline Icons, and others are also highlighted for their unique offerings and ease of use. Many of these libraries are free or open-source, making them accessible for various project needs.
- 3
- 4
Bram.us·2y
Scroll-driven animated card stack with scroll snap events
A detailed breakdown and rework of Paul Noble's impressive scroll-driven card stack demo, which uses a few lines of JavaScript and zero dependencies. Key techniques include an invisible scroller with ScrollTimeline, CSS scroll-snapping to center cards, and custom animations for snapped cards. A remix of the demo simplifies the code by using shared keyframes and includes a fallback for browsers not supporting Snap Events.
- 5
Community Picks·2y
Drag to Select
A developer from Makeswift shares insights from a project focused on improving their file manager with drag selection. They detail challenges faced, specifically with state management, and present a solution using vectors to simplify the drag selection process. The final implementation addresses various edge cases and enhances user experience by preventing unwanted text selection and enabling auto-scrolling.
- 6
daily.dev Changelog·2y
Comment Sorting
Users can now sort comments on post pages by either newest first or oldest first. The default sorting is oldest first, but this can be changed with a button click. The button updates dynamically to show the current sorting option, allowing users to control their interaction with conversations.
- 7
- 8
MDN Blog·2y
Fixing your website's JavaScript performance
Web performance can be hit hard by JavaScript issues like long tasks, large bundle sizes, and hydration. Long tasks lock the main thread, blocking user interactions; large bundles slow down download, parse, and execution times; and hydration can delay interactivity in server-rendered pages. Strategies to address these include breaking up JavaScript work, using Web Workers, implementing tree shaking, code splitting, lazy loading, and considering alternatives to popular JavaScript frameworks that may improve performance.
- 9
Shadcnblocks.com: 250 premium blocks for Shadcn UI
A premium collection of 250 high-quality marketing blocks designed specifically for Shadcn UI, Tailwind, and React. Created by professional designers and developers, these components are fully interactive, responsive, and can be easily integrated into existing projects.
- 10
How to Use Web Workers in React
React applications can suffer performance issues when handling long tasks on the main thread. Using Web Workers, scripts can run in background threads, preventing the UI from becoming unresponsive. This guide covers the basics of Web Workers, their types, and their integration into a React app to offload intensive tasks. It includes examples of creating a Dedicated Worker, communication methods between the main thread and worker, and implementing these concepts in a React project to filter and display products efficiently.
- 11
Hacker News·2y
Video & audio player themes for every web player & framework
Discover a variety of customizable audio and video player themes for every web player and framework. These themes can be tailored using just HTML and CSS, featuring designs inspired by popular platforms like YouTube, Vimeo, and social media apps. Themes include retro and modern options, each optimized for different types of content and viewer preferences.
- 12
HTML Form Validation is heavily underused
HTML form validation is often underutilized despite offering several powerful methods. The `required` attribute prevents empty submissions, while `setCustomValidity` allows for complex validation logic. However, using purely imperative APIs like `setCustomValidity` in a declarative framework can create boilerplate issues. Implementing custom validations, such as async server checks or dependent input fields, showcases the power and flexibility of these APIs. Better native support in HTML standards could improve adoption.
- 13
Kevin Powell·2y
This new CSS property just solved animating to height auto
Animating height to auto in CSS is now easy with a new property. By using 'interpolate size: allow keywords', you can transition to height auto without hacks. This method also works with other intrinsic keywords like min-content, max-content, and fit-content. Using this property at the root level applies the effect sitewide. Tips on managing visibility during transitions are also included.
- 14
themeselection/flyonui: 🚀 The most easiest, free and open-source Tailwind CSS component library with semantic classes.
FlyonUI is an open-source component library for Tailwind CSS offering semantic classes and interactive JavaScript plugins. It allows developers to build beautiful, maintainable, and scalable UIs with ease. Featuring over 800 free components, universal framework compatibility, unlimited themes, and built-in RTL support, FlyonUI enhances productivity and efficiency in web development.
- 15
- 16
Learn CSS Border Animations in 6 Minutes
Learn how to create border animations in CSS using uncommon and cool CSS properties. The guide explains why the traditional border property won't work for complex animations and demonstrates using pseudo-elements like ::after and ::before to achieve the desired effect. A conic gradient is employed for smooth color transitions, and custom properties are used for animating the gradient angles efficiently.
- 17
How to prevent re-render in React with Tailwind CSS
Learn how to prevent re-renders in React components by using Tailwind CSS and HTML, instead of JavaScript, to manage conditional class application. The post illustrates both traditional and alternative methods, emphasizing the benefits of the data-* attribute and group modifier for simpler, more efficient component design without triggering re-renders.
- 18
asayer·2y
A Million Times Faster: Million.js vs React
Modern web development emphasizes performance, making the choice of a front-end library crucial. React, a mature tool with a component-based architecture, is often used for building dynamic interfaces but can be slower due to its size. Million.js, a newer library by Aiden Bai, focuses on highly optimized rendering, reducing overhead, and using performant algorithms, making it ideal for performance-sensitive applications. Detailed comparisons show Million.js to be faster in rendering speed, initial load time, update efficiency, memory usage, and time to interactive, despite React's broader ecosystem and more extensive features.
- 19
roadmap.sh·2y
DevOps Project Ideas are Live on roadmap.sh
Roadmap.sh has added 21 new project ideas to their DevOps roadmap, complete with learning objectives, requirements, and tips. They now offer project ideas for frontend, backend, and DevOps. More project ideas for other roadmaps are coming soon.
- 20
- 21
LogRocket·2y
Simplifying CSS animations with the display and size properties
Recent updates in Chrome have introduced new features that simplify animating CSS properties like display and size. Traditionally, developers faced challenges animating properties like display and height: auto, often relying on opacity or JavaScript workarounds. The new additions, such as keyframe animations for display, the calc-size() function, and the transition-behavior property, facilitate smoother animations without complex code. These improvements make CSS animations more accessible and efficient.
- 22
- 23
CSS-Tricks·2y
CSS Anchor Positioning Guide
CSS Anchor Positioning provides a simple way to attach and position elements adjacent to others directly in CSS, allowing for fallback positions to avoid overflow issues. It has gained rapid browser support, notably being released in Chrome 125, and offers a more efficient alternative to JavaScript-based positioning. The guide covers key concepts, such as defining anchors and targets, and explains properties like `position-area`, `position-visibility`, and `position-try-fallbacks` for fine-grained control. The spec includes handy functions like `anchor()` and `anchor-size()` for attaching and scaling elements relative to anchors. However, some bugs and spec changes exist, impacting implementation nuances.
- 24
Sentry Engineering·2y
Perfectly Fitting Text to Container in React
This post discusses the challenge of dynamically scaling text to fit within a container in React, specifically within the context of a Sentry dashboard. It reviews several approaches, including SVGs, CSS transforms, container queries, and JavaScript, before settling on a JavaScript-based solution. The final solution leverages React hooks, ResizeObserver, and a resizing algorithm to dynamically adjust text size efficiently, ensuring excellent performance and user experience. The post also includes code examples and performance insights derived from real-user telemetry.
- 25
freeCodeCamp·2y
How to Build a Documentation Site using React and Docusaraus
Creating a well-designed documentation site is crucial for any project, and Docusaurus, combined with React, offers a robust solution. This guide covers the installation and setup of Docusaurus, customization of the site's structure, creating documentation, using MDX and React components, and styling. Furthermore, it discusses the SEO features and deployment process, making it suitable for both developers and technical writers.
