~frontendfocus | Bookmarks (247)

Frontend Practice: A Practice Ground for Improving Frontend Skills — A collection of real sites each with a spec sheet that you can use to recreate the project to improve your skills.

Styling Counters in CSS — A guide to styling counters, going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren’t lists look like lists.

Self Gap — Some thinking on how best to control a custom gap between some flex or grid elements. As ever, Ahmad has code examples and solid demos to help explain the approaches considered.

Design Systems Need a Color Space — “Software developers and designers have been able to ignore colour spaces for a long time, but it’s about to become required knowledge.”

Chilled Out Text Underlines — Shares a nice treatment for styling underlines. Worth keeping in mind accessibility considerations though.

Styling an HTML Dialog Modal to Take the Full Height of the Viewport — Simon encountered an issue with an unwanted gap appearing when using the dialog element. Here’s how it was solved.

Web Components vs. Framework Components: What’s the Difference? — A comprehensive comparison between Web Components and framework components, discussing their definitions, strengths, weaknesses, and various performance considerations.

Use Cases for the Document Picture-in-Picture API — A way to open a floating, always-on-top window (‘picture-in-picture’) that can display arbitrary HTML content. Chrome only, though.

Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects — Select to preview any of the existing gradients in the gallery and customize the ‘direction’ of the gradient. You can also preview the gradient on text (as seen above) or just as a regular background.

Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations — Click any of the dozen or so prebuilt loaders (which are unique!) and you can customize them to your liking (color, speed, size, etc).

Enhance: Enhance and Upscale Your Images Using AI — Yet another single-purpose image editing tool from Addy Osmani, this one is a simple AI-powered image upscaler/enhancer that you can try out online here.

shiki-stream: Generate "Streaming" Syntax Highlighted Code — Based on the popular Shiki syntax highlighter, this will reveal the selected code line by line (i.e. in a “stream”), which you can play with here.

A Deep Dive into the Inline Background Overlap Problem — If you want to get a semi-transparent background behind some inline text with nice padding you’ll likely face an overlap problem. Ana goes deep into exploring the solution along with some of the more complex variations of the issue that we could face.

Cool Native HTML Elements You Should Already Be Using — Even experienced developers can be dazzled by all the new things added to HTML over the years. Harrison helps you catch up with any blind spots here with a look at numerous lesser-used options.

How to Do Thoughtful Code Reviews? — Good code reviews start with empathy and clear communication. Keep PRs small, focus on collaboration over criticism, and be specific in your feedback. Automate the repetitive checks to let humans focus on what matters. Read more.

How to Make Web Videos Way Smaller in 2025 with AV1 — Here’s how the AV1 codec can be used to make videos on your site both smaller and better quality. Includes CLI instructions and some cross-browser tricks.

Validate Your SaaS Idea While Building an Audience — Learn how to communicate directly with potential customers by integrating your waitlist with a Loops newsletter.

Super 'Crispy' SVG Icons — This is a solid and meticulous look at the various design considerations and techniques that go into creating clear, purposeful SVG icongraphy — think size, style, paths, optimizations, etc.

View Transitions Applied: Smoothly Animating a border-radius with a View Transition — Bramus shows us how to smoothly animate properties like border-radius during View Transitions. There’s also a related video talk if you want to get up to speed on all things View Transitions.

Grouping Selection List Items Together with CSS Grid — CSS Grid can be used to visually group selected items in a list. Preethi presents two methods to do just that here — resulting in a nice UI win.

Usability Testing with Disabled Users is a Good Investment — …and will highlight accessibility barriers missed in typical accessibility audits.

code-inspector: Click a Page Element to View Its Source Code — Once installed, use ALT+SHIFT to position your cursor at that location in the code in your IDE. Supports a number of tools and frameworks (React, Vue, Webpack, etc) along with 10+ IDEs.

Filter: A Powerful, Web-Based Image Editor for Quick Image Edits and Filters — A tool from Addy Osmani that you can install and configure locally. It’s optimized for mobile use and the processing is all done locally.

CSS Relative Colors — Another excellent guide from Ahmad exploring the syntax behind CSS relative color. This comprehensive, interactive explainer shares how we can now dynamically generate and modify colors based on existing ones directly in CSS (without the need of a pre-processor). Looks at practical use cases, fallbacks, contrast ratio, and more.