Linklists

Building the Perfect Logo Strip - 9elements

Combining finest craftsmanship with elegant design to ship innovative digital experiences.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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

Metascraper: unified metadata from the web

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

CSS nesting improves with CSSNestedDeclarations

CSS nesting is getting a whole lot better!

NeuralSVG: An Implicit Representation for Text-to-Vector Generation

Modeling Trees with a Space Colonization Algorithm

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.