Currently on my reading list
A Collection of web development resources for the modern developer and designer
-
SmolCSS
Minimal snippets for modern CSS layouts and components
-
Updates to the customizable select API
Chrome’s customizable select API ships with new pseudos, renamed elements, leaner UA styles, and updated demos so you can style native selects in Chrome 135
-
How to Favicon in 2025
Three files that fit most needs: Prefer SVG over PNG, trust browsers to downscale, drop obscure formats. Exhaustive guide to favicons for modern web.
-
Squish Meets Structure
Talk on designing products with language models, embeddings, and interfaces that avoid overload, first for Smashing Conf AI, later in Freiberg.
-
The Difference Between HTML Attributes and Properties
Attributes and properties control HTML elements and their state. Though often used interchangeably, their subtle differences can cause unexpected bugs.
-
Accessible SVGs: Perfect Patterns For Screen Reader Users
Learn which SVG patterns to avoid and which are most inclusive across OSs, browsers, and screen readers.
-
The customizable select - Part two
CSS potions, anchoring and radial select tricks: part two of the customizable select series using anchor positioning with just HTML and CSS.
-
Turns websites into data — Microlink
Enter a URL, receive information. Normalize metadata. Get HTML markup. Take a screenshot. Identify tech stack. Generate a PDF. Automate web scraping. Run Lighthouse.
-
CSS nesting improves with CSSNestedDeclarations
CSS Nesting gains CSSNestedDeclarations to fix quirks so declarations after style rules dont shift. In Chrome 130 now, testing in Firefox 132 and Safari TP 204.
-
una.im | New capabilities for attr()
Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
-
Aligning rounded objects. A practical guide
Martin Adamko uses math to find ideal negative space for rounded shapes, giving formulas to keep designs balanced and visually pleasing without waste.
-
Lumen
A simple note-taking app for better thinking. Lumen has 2 repositories available. Follow their code on GitHub.
-
CSS scroll-state() | Blog | Chrome for Developers
Like container queries; but for stuck, snapped, and overflowing queries.
-
The customizable select - Part one: history, trickery, and styling the select with CSS
Exploring customizable select elements. This series explores styling possibilities. The first article covers the history and provides a guide to building a custom select as a progressive enhancement. Styling selects with CSS for unique and fun experiences.
-
Coding Challenge #17: Fractal Trees - Space Colonization
In this coding challenge, I'm using the space colonization algorithm to make a tree generator. This is the 4th part of my algorithmic botany series. Code: ht...
-
Styling Tables the Modern CSS Way
Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.
-
Modeling organic branching structures with the space colonization algorithm and JavaScript
Learn how you can procedurally generate realistic branches, vines, veins, roots, and other branching structures from nature using codel
-
Space colonization (2D) experiments in JavaScript
Series of visual experiments in JavaScript exploring the topic of space colonization as a method for generating interesting 2D forms.
-
Building a QR Code HTML Web Component
A little while back, a friend mentioned that there really should be an HTML Web Component for QR codes. This is how I'd make one if I needed to.
-
Item Flow
Notes on the proposed Item Flow system for grid, flexbox, and masonry
-
Metascraper: unified metadata from the web
Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more.
-
The Case for Web Components
This free downloadable ebook contains explanations, experience, resources, articles, and expert recommendations that’ll equip you with the skills to create versatile web components.
-
Learning how CSS-only carousels are going to work
Carousels are coming to CSS!
-
Standard EBooks
Free and liberated ebooks,carefully produced for the true book lover.
-
Formulas for optical adjustments
A long-standing trope of the design world is that computers are bad at aligning and balancing the relative scales of elements. This is incorrect.
-
Carousel Gallery
You've landed on the CSS Carousel Gallery site that showcases the capabilities and potentials of CSS Carousel specs.
-
Carousels with CSS
-
Building the Perfect Logo Strip - 9elements
We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get them to play nice and look visually appealing without spending hours tweaking each one? This challenge becomes even trickier when you don't know in advance which logos will be in your logo row.
-
Perfect Your Designs With Imperfection: Guide to Optical Alignment
Design is not about symmetry and mathematics, it’s about balance. Use your eyes not rectangular containers.
-
Welcome to the era of “MEH” – where nobody cares.
-
Using scroll snap events - CSS: Cascading Style Sheets | MDN
The CSS scroll snap module defines two scroll snap events: scrollsnapchanging and scrollsnapchange. These enable running JavaScript in response to the browser determining that new scroll snap targets are pending and selected, respectively.
-
A Brief History & Ethos of the Digital Garden
A newly revived philosophy for publishing personal knowledge on the web
-
NeuralSVG: An Implicit Representation for Text-to-Vector Generation
NeuralSVG generates vector graphics from text prompts with ordered and editable shapes. Our method supports dynamic conditioning, such as background color, which facilitating the generation of multiple color palettes for a single learned representation.
-
Color contrast with Web Components
Want to show the contrast levels of two colours? Try out this Web Component I've made!
-
Inclusive Components: Cards
Some of the components I’ve explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification. It’s at your discretion how closely you follow these requirements. Research may show
-
Single HTML Element Star Rating Component
Learn how to create a customizable star-rating component using just HTML and CSS, with a minimal amount of inline JavaScript. This article covers practical tips, code examples, and trade-offs for building flexible, visually appealing rating systems. :: Blog post at Alvaro Montoro's Personal Website.
-
Awesome Standalones
A curated list of awesome framework-agnostic standalone web components - davatron5000/awesome-standalones
-
Web Components: Little Bits
Davids talk about using Web Components to sprinkle a little fun onto my website, and how well they work in Design Systems.
-
The killer feature of Web Components
A Custom Elements Manifest gives your component systems superpowers ✨
-
Toasts
GitHub no longer uses toasts because of their accessibility and usability issues.
-
Getting Started With CSS Cascade Layers
CSS Cascade Layers give you precise control over how styles override each other, making complex stylesheets easier to organize, manage, and scale.
-
@layer - CSS | MDN
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
-
CSS attr() gets an upgrade
With CSS attr() you can use an element’s attribute value in your styles. Until recently it only worked in content on pseudo-elements and only as a string.
-
link-peek Web Component
The link-peek Web Component turns any anchor link into a rich preview, showing description, meta image, site name and more using a simple JSON API.
-
una.im | Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
-
Automatic dark mode
The most straightforward way to implement automatic mode switching.
-
una.im | Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
-
Form control styling
CSS days talk about the proposed CSS Form Control Styling Level 1
-
Responsive Letter Spacing
Minimizing the readability impact of a typographic brand requirement.