Explore

Passkeys: A Shattered Dream? — William, who has his own web auth project, shares some concerns and growing disillusion with passkeys.

Help Invent CSS Grid Level 3, Aka “Masonry” Layout — Masonry style layouts (above) see content laid out like a brick/stone wall. It’s a popular pattern, but one that rapidly becomes difficult to get just right. Real-world feedback is now being sought from devs and designers on how CSS should handle such layouts. This article runs through the current proposal, the debate at the heart of things,...

The Frontend Developer/Engineer Handbook 2024 — An in-depth, detailed, and free guide to the current web development landscape. It's a superb resource (by way of Frontend Masters) for getting up to speed on everything from code editors, CSS, UX, UI, the command line, popular tools and frameworks, performance, accessibility, testing, AI, and much more. One to bookmark/share.

▶  A Conversation with Una Kravets: The Rapid Evolution of CSS — An interview with Una, the Web UI DevRel lead at Google, discussing web development, the progression of CSS over the years, and how layout/style ideas end up a reality.

Detect JavaScript Support in CSS — A way to provide alternative CSS rules depending on whether or not JavaScript is available in the user’s browser. It can also help reduce flashes of unstyled content or undesirable layout shifts. There are a few gotchas to be aware of though.

HTML Attributes vs. DOM Properties — They’re completely different, but often coupled. Jake outlines the the difference, and why it matters.

Don’t Use the maxlength Attribute to Stop Users From Exceeding the Limit — “the maxlength attribute doesn’t improve UX, it degrades it”.

The F-Shape Pattern and How Users Read — When users consume your content they will be scrolling, scanning, and skipping around your page. Here’s what you need to know about typical reading behavior and design strategies you can consider to prevent potentially unwanted scanning patterns.

Long Alt — Keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language.

The Ultimate CSS Shapes Collection — Single-element implementation. Lots to choose from, including some rather novel options. One click to copy the code!

Mastodon Embed Timeline Widget — Easily embed a Mastodon timeline on your site. No dependencies, no trackers, cross-browser, WCAG compliant and fully responsive. Demo here.

iOS404 — An overview of all of the missing web features in iOS. There’s over 60, and some of the missing features may surprise you (many are over a decade old).

Optimizing WebKit & Safari for Speedometer 3.0 — Speedometer 3.0 was introduced back in March, and now this post looks at what positive results the optimizations have bought about for Safari.

Some DevTools Tips and Tricks — Most devs barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here.

Counterscale: Scalable Web Analytics You Can Run on Cloudflare — A simple web analytics tracker and dashboard that’s designed to be easy to deploy and maintain by hosting it on Cloudflare (for free too, up to a certain level).

faces.js: A JavaScript Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs. Each face can also be represented by a small JavaScript object, which allows you to store that object and then draw the same face again later.

Infinite-Scrolling Logos in Flat HTML and Pure CSS — Remember the long-deprecated HTML <marquee> element? If you need a horizontal auto-scrolling solution nowadays, you’ll no doubt turn to CSS. This post demonstrates one technique that uses as little HTML as possible.

How to Kill the Cascade — “We’ve always needed local resets. And now, with the magic of @scope and all: revert-layer;, we finally have them.”

▶  Keyboard Interactions — Here's a roughly 15-minute talk covering the technical aspects of measuring keyboard interactions in Chromium and how they affect the Interaction to Next Paint metric.

The Curious Case of the CSS Monochrome Media Query — This is a little known media-query feature designed to target e-ink devices (such as e-readers), but it seems a tad unloved right now in terms of real-world utilization.

Why I Care Deeply About Web Accessibility And You Should Too — A web accessibility evangelist makes the case.

Cally: Small, Feature-Rich Calendar Components — A collection of open-source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, and accessible. Repo here.

magick.css: A Minimalistic, Mostly Classless CSS Framework — See it in action on the author’s website here. It has a ‘brutalist’ look (helped by the font choice) and is inspired by similar ‘classless’ frameworks you may have seen in recent years.