The blog post introduces CSS Subgrid, a feature that allows nested grid layouts in CSS, enhancing the flexibility and responsiveness of web design. It explains the basic mechanics of Subgrid, demonstrates its application through v...
About:
Friendly tutorials for developers. Focus on React, CSS, Animation, and more!
Website:
Incoming Links:
Outgoing Links:
Subscribe to RSS:
This blog post provides a comprehensive guide to the SVG <path> element, explaining its syntax and various commands used to create shapes, including lines, Bézier curves, and arcs. The author shares personal experiences and insigh...
This post provides a comprehensive guide on using CSS sprites for animations, highlighting implementation techniques and performance considerations in web development.
The blog post discusses the use of the linear() timing function in modern CSS for creating animations, particularly focusing on how it can replace traditional Bézier curves. It explains how linear() allows for the creation of more...
This blog post provides an introduction to Scalable Vector Graphics (SVG), explaining its significance in web development. It covers the fundamentals of SVG, including its XML-based structure, inline usage, and how it integrates w...
The blog post discusses the new CSS @starting-style at-rule, which allows for CSS transitions on dynamically added elements. It explains how this API works, its limitations regarding CSS specificity, and provides examples of how i...
The text explains a trick to write CSS keyframe animations more concisely, and how to use partial keyframes to make animations dynamic and composable. It also shows how to animate to a value specified by another keyframe animation...
0The Height Enigma • Josh W. Comeau
2025-05-12 • web development css css flexbox grid
The text explains the mystery of why height sometimes doesn't work in CSS, and how it is calculated differently from width. It discusses the circular calculation problem and how to make percentage-based heights work. It also expla...
The blog post discusses the impact of AI on software development and refutes the idea that AI will replace human developers. It also talks about the current job market and the future of software development.
The author has been working on a course about whimsical animations and has created a landing page for it. The landing page contains 14,000+ lines of code and 200+ files. The author shares some interesting details about the landing...
The text discusses the potential of container queries in expanding the possibilities of user interface design, particularly in responsive design. It shares a pattern for creating sub-layouts within media queries that expand as the...
The blog post discusses the use of backdrop-filter: blur() to create a frosted glass effect in CSS. It explains how to optimize the frosted glass effect and make it more realistic by considering nearby elements, fixing issues with...
The blog post discusses a framework for evaluating browser support for new CSS features. It covers three main factors to consider: the fallback experience, providing custom fallback styles, the browser breakdown, and the potential...
0Designing Beautiful Shadows in CSS • Josh W. Comeau
2024-11-17 •
The blog post discusses the importance of shadows in web design and how to create beautiful, life-like shadows using CSS. It covers the reasons for using shadows, creating a consistent environment, layering, color-matched shadows,...
0Demystifying styled-components • Josh W. Comeau
2024-11-17 •
The blog post demystifies styled-components, explaining how it works under the hood and how to build a mini-clone of styled-components. It covers topics like lazy CSS injection, dynamically adding CSS rules, generating helpers wit...
The blog post discusses creating a hover animation effect using React Spring. It covers the process of creating the effect, using the useSpring hook, and making it accessible. The author also explains the use of trigonometry to cr...
0Why My Blog is Closed-Source • Josh W. Comeau
2024-11-17 •
The author discusses the reasons why his blog is closed-source, including the need to reduce friction, maintain control over drafts, avoid code standards, prevent copycats, ensure security, and reduce costs. He also outlines his p...
The blog post discusses the use of CSS variables with React, explaining how to use them, their benefits, and drawbacks. It also covers how to use CSS variables in a React app, changing values, not variables, and other new possibil...
The blog post discusses strategies for getting a remote software developer job, including finding remote options, evaluating remote-friendliness, remote integration, meetings, getting the team together, working hours, internationa...
0A Modern CSS Reset • Josh W. Comeau
2024-11-09 •
The blog post discusses the author's custom CSS reset that includes 11 declarations. It covers various aspects of CSS, such as box-sizing model, removing default margin, adding accessible line-height, improving text rendering, imp...
The blog post introduces the concept of container queries in CSS, which allows conditional CSS based on an element's container. It explains the limitations of media queries and the introduction of the Containment API to solve the ...
The blog post discusses common beginner mistakes with React, such as evaluating with zero, mutating state, not generating keys, missing whitespace, accessing state after changing it, returning multiple elements, flipping from unco...
The blog post explains the concepts of useMemo and useCallback in React, and how they can be used to optimize re-renders and preserve references. It covers the use cases for heavy computations and preserved references, and provide...
0Why React Re-Renders • Josh W. Comeau
2024-10-13 •
The blog post explains the re-rendering process in React, addressing common misconceptions and providing a mental model for understanding when and why React re-renders. It also discusses pure components, memoization, and the use o...