Front-End Foundations & Future Features

Building a QR Code HTML Web Component

by Scott Jehl

Welcome to the era of “MEH” – where nobody cares.

by Michal Malewicz

Lumen

A simple note-taking app for better thinking. Lumen has 2 repositories available. Follow their code on GitHub.

by Cole Bemis

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.

A Brief History & Ethos of the Digital Garden

A newly revived philosophy for publishing personal knowledge on the web

by Maggie Appleton

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

by Heydon Pickering

What Does It Really Mean For A Site To Be Keyboard Navigable — Smashing Magazine

Keyboard navigation is a vital aspect of accessible web design, and a detail-oriented approach is crucial. Prioritizing keyboard navigation prioritizes the user experience for a diverse audience, extending your reach while simultaneously fostering a more inclusive web environment.

Learning how CSS-only carousels are going to work

Carousels are coming to CSS!🔗 Links✅ my code from this video: https://codepen.io/kevinpowell/pen/qEBJBxe✅ Carousels with CSS: https://developer.chrome.com/b…

by Kevin Powell

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.

by Atakan Yiğit Çengeloğlu

Standard EBooks

Free and liberated ebooks,carefully produced for the true book lover.

Color contrast with Web Components

Want to show the contrast levels of two colours? Try out this Web Component I've made!

by David Darnes

Squish Meets Structure

Designing with Language Models

by Maggie Appleton

Item Flow

Notes on the proposed Item Flow system for grid, flexbox, and masonry

by Ahmad Shadeed

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.

by Marc Edwards

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.

by Michelle Barker

SmolCSS

Minimal snippets for modern CSS layouts and components

by Stephanie Eckles

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.

Metascraper: unified metadata from the web

Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more.

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.

by Sagi Polaczek

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.

by Brecht De Ruyte

The customizable select - Part two: Potions, anchoring, and radial shenanigans in CSS

The second part customizable select with CSS series. Highlighting anchor positioning to create a radial potion select element with just HTML and CSS

by Brecht De Ruyte

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.

by Alvaro Montoro

Updates to the customizable select API

Everything that has changed since the RFC post for this feature.

by Una Kravets

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.

by Una Kravets

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.

by Nils Binder

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

by Jason Webb

Aligning rounded objects. A practical guide

The article by Martin Adamko explores the use of mathematics to determine the optimal amount of negative space required when creating rounded shapes, such as circles and rectangles, to ensure visual balance. By calculating the extra width needed based on the radius and height, the author provides guidelines that allow for efficient and aesthetically pleasing designs. The key takeaway is that mathematical calculations help maintain design balance while minimizing unnecessary negative space.

by Martin Adamko

The Difference Between HTML Attributes and Properties

Attributes and properties allow you to control how HTML elements function and read data about their state. Although the terms are often used interchangeably, subtle differences between the two can lead to unexpected behavior and bugs.

by Paul Hebert

How to Favicon in 2025: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog

Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.

by Andrey Sitnik

CSS scroll-state() | Blog | Chrome for Developers

Like container queries; but for stuck, snapped, and overflowing queries.

by Adam Argyle

CSS nesting improves with CSSNestedDeclarations

CSS nesting is getting a whole lot better!

by Bramus Van Damme

Accessible SVGs: Perfect Patterns For Screen Reader Users — Smashing Magazine

Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers. Carie will also be running an online workshop on Accessible Front-End Patterns all around front-end accessibility.

by Carie Fisher