Font-display is incompatible with icon fonts
zachleat.com Zach Leatherman demonstrates why the font-display descriptor, so useful for text webfonts, backfires on icon fonts, and what to use instead.
ARCHIVE · FRONTEND RESOURCES · MAY 2019
Collective #518
A roundup of what mattered in frontend that week in May 2019. The through-line was accessibility getting practical: not audits and checklists, but concrete markup decisions such as how to label an icon button, when an SVG needs a role, and why a performance-friendly font descriptor quietly breaks icon fonts. Several of these pieces have aged into standard references.
Accessible Icon Buttons
sarasoueidan.com Sara Soueidan walks through several patterns for labelling icon-only buttons so screen readers announce something useful.
Contextually marking up accessible images and SVGs
scottohara.me Scott O’Hara on choosing between alt text, roles and titles depending on what an image actually does in context.
The State of Fluid Web Typography
betterwebtype.com Matej Latin examines viewport-based type scaling, where it breaks accessibility, and how far fluid typography can responsibly go.
The “Inside” Problem
css-tricks.com Chris Coyier names a recurring layout puzzle: borders and backgrounds that need to extend outside a constrained content column.
Flexible data tables with CSS Grid
adamlynch.com Adam Lynch rebuilds the data table on CSS Grid to get resizable, responsive columns that plain table layout refuses to give.
Tesla’s Touchscreen UI: a case study
nngroup.com Nielsen Norman Group audits the Model 3 dashboard as a usability object: a rare UX review where mistakes cost more than conversions.
Vue.js and SEO: optimizing reactive websites
smashingmagazine.com Smashing Magazine tests how search engines actually handle client-rendered Vue apps, with data instead of folklore.
Animation Handbook
designbetter.co A free InVision book on interface motion: principles, timing and the discipline of animating with intent.
Free Wolfram Engine for Developers
blog.stephenwolfram.com Stephen Wolfram announces a free developer tier for the Wolfram Engine: computational tooling previously priced out of side projects.
Color Designer
colordesigner.io A small in-browser tool that builds tints, shades and palettes from a single starting colour.
Font Kiko
fontkiko.com An open-source icon set drawn on a consistent grid, free for commercial use.
Some resources from the original set are no longer online and are omitted above. Weeks like this one are why link roundups were worth keeping: half of these picks outlived the sites that first shared them.