Best of Frontend Development — June 2024
- 1
- 2
Community Picks·2y
What is this weird CSS Syntax?
Learn about an interesting CSS syntax involving the adjacent sibling combinator (+) and the asterisk (*) to select non-immediate adjacent elements of the same class. This allows styles to be applied to specific siblings a few elements away when hovering over a targeted element.
- 3
- 4
freeCodeCamp·2y
What's New in React 19
React 19 introduces numerous features and enhancements, including improved data mutation handling, optimistic updates, and new APIs like `use()`. The update also offers innovative tools such as a new open-source compiler for performance optimization. Developers can learn about these enhancements via a comprehensive course provided by Bob Ziroll from Scrimba and freeCodeCamp.org on YouTube.
- 5
- 6
Tiger's Place·2y
Optimizing React Context and Re-renders
Learn how to optimize React Context to minimize re-renders. The post covers evaluating the causes of re-renders, splitting context into multiple contexts, using the useMemo hook for memoizing context values, and leveraging React.memo for state from higher components. Practical code examples are provided to demonstrate these optimization techniques.
- 7
DEV·2y
CSS Variables (CSS Custom properties) for Beginners
CSS variables, also known as CSS custom properties, allow for reusable values across a project, improving code readability and maintainability. This guide covers the basics of declaring and using CSS variables, including local and global declarations. It also explains how to dynamically update CSS values using JavaScript in response to user actions.
- 8
- 9
Media Queries vs Container Queries – Which Should You Use and When?
As the web evolves, new tools like media queries and container queries emerge, offering web developers various ways to make responsive designs. Media queries adapt styles based on the overall viewport size, suitable for different devices. Container queries, however, base their styles on the size of individual containers, promoting modularity and flexibility. While media queries are less effective for complex layouts, container queries support more adaptive component-based designs. Understanding each tool's strengths and considering project requirements will guide their best use in web design.
- 10
Juniors Are Doomed And This Is Good (LLMs Hype, Copilots, and The Turning Point)
A junior engineer's role in tech is becoming increasingly demanding, requiring proficiency in multiple skills whether in frontend, backend, or operations. The evolution of technology and the advent of tools like LLMs and AI models mean future junior engineers will need to be well-rounded experts. Those unable to keep up will find the industry challenging and might need to consider alternate career paths.
- 11
Hacker News·2y
A Rant about Front-end Development
A front-end developer expresses frustration with the complexity and misuse of modern web development technologies, emphasizing the importance of content over code. The post highlights common issues such as an over-reliance on JavaScript, misunderstandings about CSS, and the unnecessary complexity introduced by frameworks. The author advocates for simplicity, server-side rendering, and a focus on meaningful content.
- 12
Frontend Masters·2y
:has() is “The God Selector” – Frontend Masters Boost
The :has() selector in CSS, hailed as 'The God Selector' by Bruce Lawson, allows you to select any element based on the state of any other element without needing any structural relationship in the DOM. This makes it incredibly powerful for styling purposes.
- 13
LogRocket·2y
daisyUI adoption guide: Overview, examples, and alternatives
daisyUI is an open-source component library built on top of Tailwind CSS, offering pre-designed components and enhanced developer experience. It tackles the drawbacks of traditional CSS libraries by integrating with Tailwind’s utility-first approach, providing customizable and reusable components. Created by Pouya Saadeghi, daisyUI streamlines UI development while avoiding bloated markups. It can be set up as a Node package or via CDN and offers extensive customization options through Tailwind utility classes and `@apply` directives.
- 14
Kevin Powell·2y
"Smart" design patterns with container queries
Container queries are a powerful CSS feature that allows styling based on the size of an element's container, rather than the viewport. This can lead to more flexible and meaningful breakpoints, particularly for component-based designs. The post explores practical examples, including making components adapt to the number of columns in a layout and how units like REM and EM work differently in container queries. The ability to create more intelligent design patterns without relying solely on viewport-based media queries is a key advantage.
- 15
htmx: Simplicity in an Age of Complicated Solutions
htmx is a JavaScript library that simplifies front-end development by allowing developers to enhance HTML elements with additional functionality using HTML attributes. It promotes the use of hypermedia and RESTful principles to create dynamic web applications without the need for complex JavaScript frameworks.
- 16
tailwindcss·2y
Headless UI v2.1: Simplified transition API and improved multi-dialog support
Headless UI v2.1 for React simplifies transition APIs by introducing a new transition prop and data attributes for styling transition stages. It also allows the rendering of multiple dialogs as siblings, improving usability for complex applications. The new API is recommended for future use while maintaining backward compatibility. Tailwind UI components have been updated to use the new API for more concise and efficient code.
- 17
Collections·2yWeb Accessibility in Development: Best Practices and Tools
Web accessibility ensures websites are usable by everyone, including people with disabilities. Key practices include using descriptive alt text for images, semantic HTML, ARIA roles, proper headings and labels, keyboard navigation, responsive design, captions for multimedia, and sufficient color contrast. Tools like WAVE, axe Accessibility Checker, Google Lighthouse, and Pa11y help check and improve accessibility.
- 18
builder.io·2y
The Hidden Challenges of Design Systems (And How to Solve Them)
Implementing and maintaining design systems in large enterprises presents multiple challenges, including adoption, cross-framework compatibility, design handoff issues, and consistency. Solutions include frictionless integration, using framework-agnostic components, integrated design-to-code pipelines, and automation for synchronizing design and code. Tools like Builder.io's Visual Copilot and Mitosis are highlighted for their effectiveness in addressing these challenges.
- 19
Web Dev Simplified·2y
Next.js 15 Ruins Caching Even More
Next.js 15 introduces significant changes to caching, particularly around the fetch function, API routes, and client router cache. While the intention is to improve the developer experience, some changes may be confusing and unintuitive, especially for newer developers. The update aims to make caching more transparent, with fetch requests, G Route handlers, and client router cache no longer caching by default. However, developers may need to force certain pages to be dynamic to achieve desired behavior.
- 20
How to access search params in Next.js layouts
In Next.js, layouts remain the same across route changes and don't re-render, which means they can't directly access search parameters. To access search params, you should use client components which handle these dynamic changes without requiring the entire layout to re-render.
- 21
Animate a sibling on scroll with only 5 lines of CSS
Learn how to animate an element based on the scroll position of a different element using just a few lines of CSS. The guide includes defining a keyframe animation, setting up a scroll timeline, and linking the animation to a custom timeline name. Additionally, it highlights the use of prefers-reduced-motion for accessibility.
- 22
CSS Art: June
The post is about the author's submission for the June CSS Challenge, where they created CSS art inspired by the sunny, cloudy, and rainy days of June. The art includes elements like the sun, clouds, green meadows, trees, and a deer. The post also explains the process of creating each part and animating the deer.
- 23
Exploring the CSS :display property: A deep dive
This guide delves into the CSS display property, exploring its various values, such as block, inline, flex, and grid. It illustrates how these values dictate the layout and behavior of HTML elements. The post also addresses the updated Level 3 specification that allows for both outer and inner display values, offering greater clarity in defining element roles and layouts.
- 24
Smashing Magazine·2y
Useful CSS Tips And Techniques — Smashing Magazine
CSS has become more powerful with new features and techniques. Learn about CSS tips and techniques, testing HTML with CSS, self-modifying CSS variables, hanging punctuation, fixing aspect-ratio issues, and the ongoing debate on masonry layout in CSS.
- 25
marmelab·2y
Introducing React-Admin V5
React-admin v5 introduces numerous enhancements and new features aimed at improving both the user and developer experience. Key updates include a theme switcher with a default dark theme, UI improvements like full-width inputs, and more robust form handling. It requires React 18 and has stricter TypeScript integration to catch more errors at compile time. Minimal breaking changes ensure a smooth upgrade process for existing users. The version also eliminates Internet Explorer support and updates several dependencies.
