~frontendfocus | Bookmarks (279)

Can I Email..? Support Tables for HTML and CSS in Emails — It’s like Can I Use but for email clients and their varying levels of HTML and CSS support.

Should We Rely on Browser Detection? — The User-Agent string is something that web developers should really handle with care, as browser detection is often guesswork — but if you’re building for the web platform (and not a single browser) this won’t be much of an issue.

Handling Images & Videos in Angular? This Practical Guide Is for You — Implement drag-and-drop uploads, progress bar, image previews & server-side file validations. Read on to learn more.

Faster Websites with the Picture Element — An overview of the various wins to be had from using the <picture> element.

Combining CSS :has() and HTML <select> For Greater Conditional Styling — An interesting technique here for what Amit calls the “great conditional operator”.

Making Room for Long List Markers with subgrid — By default lists (ul and ol) give a fixed 40px of padding. This is fine for most use cases, but when lists get long an issue arises. Noah shares a solution.

A Brief Note on Highlighted Text — Specifically on how to give any styled highlighted text sufficient contrast.

Emoji Mart 5.6: A Customizable Emoji Picker for the Web — This is a popular and recently updated HTML component, complete with a solid search function and lots of options for further customization. You can test it out here. 💌🚀🧡

Icônes: An Icon Explorer with Instant Search for 100+ Icon Sets — The app is powered by Iconify and built in Vue. You can select any icon set, then search by keyword within the chosen set.

tinyworldmap: A World Map Solution for Offline-First & Low-Bandwidth Web Apps — Designed to be used with Leaflet and, as implied, the demo works smoothly, having been thoroughly tested on low-end, decade-old phones, with no discernible lag.

▶  Unleash the Power of Scroll-Driven Animations — This new 10-part video series should equip you with what you need to know about scroll-driven animations using CSS or JavaScript. The course covers the core concepts (such as scroll(), view(), etc), and shares several practical examples. All of the episodes are available to watch now.

Why Don’t We Talk About Minifying CSS Anymore? — Salma notes that minification of CSS is now generally something that modern frontend tooling takes care of for us, so it’s not really a practice that’s front of mind anymore — however, it’s still important for us to understand how our stylesheets are being delivered to the browser and what impact they are having on performance.

▶  23 CSS Features You Should Know (And Be Using) by Now — Adam Argyle joins Kevin to discuss some ‘under the radar’ CSS features in a rapid fire format. Includes things like :focus-visible, object-fit, overscroll-behavior, and more. A good refresher.

Using the Popover API for HTML Tooltips — Chris continues his exploration of the Popover API, this time exploring a nice tooltip use-case.

Misconceptions About CSS Specificity — Clarification on how CSS specificity is calculated and what does and doesn’t affect the specificity of a selector in CSS.

Here's a Simple Video API for Your Next.js Application — Integrate a video player into your Next.js applications! Learn about HTML5 video tag, video.js library, and how you can unlock more functionality and performance with the ImageKit Video API. Deliver an optimized, buffer-free video stream every time.

The Popover API is Here — The Popover API now has broad support, and as such Chris gives us a brief overview of how it differs from <dialog> and how we may want to approach using it.

Printing Music with CSS Grid — The author notes (pun very much intended) that music notation on the web should be as accessible and fluid as text is - but how do we go about fixing it so musicians don’t have to fumble pinch-zooming a PDF during a gig? Lots of good examples here and a reminder of just how far you can take CSS!

▶  Optimizing INP: A Deep Dive — A good step-by-step instructional video on digging into responsiveness issues in Chrome’s Performance Panel (29 minutes).

Handling the Indentation of a Treeview Component — How should you approach building a UI that contains nested components, with an increasing indentation for each one? Ahmad looks at solving it with CSS.

Reaction-Diffusion Compute Shader in WebGPU — A look at how to use WebGPU compute shaders to create some rather wild looking patterns. Support is limited right now, but it’s a neat effect.

DesignSystemHunt: A Curated Collection of Design Systems from Popular Brands — Currently includes links and info on 140+ different design systems from various startups, brands, tech companies, etc.

Fluid for Tailwind CSS — A fluid clamp() plugin for Tailwind that works with every utility. Repo here.

An Alternative Proposal for CSS Masonry — Last week we shared WebKit’s thoughts on how to approach creating masonry type layouts in CSS. Now the Chrome team has weighed in, stating that “implementing it as part of the CSS Grid specification [..] would be a mistake”, and they think it should be its own separate layout method defined using display: masonry or something similar.