Useful Webdev Links

Some of my favorite tools for web development, including reference material on new web standards.

Generators and Tools

SVGOMG: SVG tool for cleaning up, compressing, and simplifying SVGs. I often use this after exporting an SVG from a tool like Figma.
Josh Comeau’s Shadow Palette Generator: Generate nice looking, naturalistic drop shadows in CSS.
Wakamai Fondue (font analysis): Web app that can analyze a font file and tell you lots of stuff about it, including the color palettes (if any) and what axes are available.
Flexbox Labs: A great way to try out different flexbox properties and see what they do; familiar iconography might help make the dubiously intuitive property names stick in your head a little better.
Anchoreum: Similar to above; an interactive playground for anchor-based positioning. (Browser support is chrome-only at the moment, but on the roadmap for Firefox and Safari.)

Design Beyond Barriers: Lots of good tips here on how to design for accessibility.
Every Layout: Heydon Pickering & Andy Bell’s composable styles for common layout problems, with a lot of explanation for the thought behind the styles. The layouts themselves are a paid product, but the introductory material is both valuable and free.
Ahmad Shadeed’s Interactive Guide to CSS Container Queries: Not just the what, but the why.
CUBE CSS: Andy Bell’s CSS organization strategy based partly on BEM but less opinionated on naming conventions.
Navigating the Web Platform: A collection of links on how to keep up with changes to the web platform & how to participate in its development.

CSS Popover + Anchor Positioning is Magical: Kevin Powell explains both the basics of popovers and anchor positioning in about 20 minutes.