Google’s Fonts Knowledge Base — A new site from Google that’s a repository of typographic knowledge, featuring a glossary, guides and helpful primers on web fonts, variable fonts, type usage, font considerations, and more. If you want to swot up on all things type, this is a rather good place to start.

Google Fonts

Chrome Unveils New ‘UI Fund’ — A Chrome backed fund designed to provide grants for people who have ideas for projects that can make an impact in the design tools, CSS, and HTML ecosystems. There’s no deadline to apply and Sarah Drasner and Nicole Sullivan will be judging the suitability of projects.

Nicole Sullivan

Avoid DNS Downtime — Make DNS downtime history with DNSimple. We created this 5-step checklist to help you achieve 100% uptime. Explore our effortless DNS management, along with our robust domain & DNS security for yourself – enter your domain name, and we’ll do the rest ?

DNSimple sponsor

Cumulative Layout Shift at BuzzFeed — Part of a three-part series documenting how BuzzFeed tackled their issues with Cumulative Layout Shift (CLS) as part of a broader Web Vitals initiative. Part two and three here.

Edgar Sanchez

Reduce Your Site’s Environmental Impact with a Carbon Budget — According to a BBC report the internet accounts for 3.7% of carbon emissions worldwide, putting our industry on level with the entire air travel industry. As such Michelle argues “the tech industry can no longer bury our heads in the sand” suggesting a need to set our websites a carbon budget, in a similar fashion to how we set performance budgets.

Michelle Barker

? Tutorials, Articles & Opinion

Writing Defensive CSS — A collection of snippets and principles designed to help you in writing CSS that is ‘protected’ and robust to future changes.

Ahmad Shadeed

Designing Better Links for Sites and Emails: A Guideline — Tips on how to improve a site’s link experience, keeping accessibility in mind.

Slava Shestopalov

Automate Angular Firebase Deployments With GitHub Actions — Get instant benefits, like building automation workflows right from GitHub. You set up actions in the same place you set up PRs – cool. ? Here’s how.

Progress Kendo UI for Angular sponsor

Coloring with Code: A Programmatic Approach To Design — Advice on how to use familiar tools — a text editor and web browser — to make the process of creating striking color palettes a lot less scary and fun.

George Francis

Responsive Layouts, Fewer Media Queries — How to replace multiple media queries with, in some cases, only one CSS declaration — resulting in less code, that’s easier to maintain.

Temani Afif

Where Do You Put Spacing on Design System Components?

Eric Bailey

Cross-Fading Any Two DOM Elements is Currently Impossible

Jake Archibald

How to Use an iPad for WordPress Theme Development

Jakob Bouchard

Test Your Product on a ‘Craptop’

Eric Bailey

? Code, Tools and Resources

Modern Fluid Typography Editor — A handy little browser-based tool that allows you to create and fine-tune fluid typography values for your project. It generates a CSS clamp code snippet.

Adrian Bece

CSSO 5.0: A CSS Minifier with Structural Optimizations — A tool that cleans, compresses, and restructures CSS. The newly dropped v5.0 adds ES module support and CSS Selectors Level 4 support too.

Roman Dvornov

Put the “Flow” in Your Workflows with Shortcut

Shortcut (formerly Clubhouse.io) sponsor

Svija: A Website Builder Based on Adobe Illustrator — A bold tool that claims to produce a web page directly from an Illustrator file. Certainly has some accessibility and SEO-related concerns, but might be worth a look for simple projects.

svija

Which Icon Is That?: The Missing Tool to Work with Icons — You can use this to identify what icon set a particular icon is from, or search by keyword to find an icon from the 6+ supported libraries of 5000+ icons.

which icon is that?

Ladda: Buttons with Built-In Loading Indicators — Sweet and simple. Ideal for form submissions in particular. GitHub repo.

Hakim El Hattab

Container Query Polyfill: A Tiny Polyfill for CSS Container Queries, Weighing About 1.6kB Brotli’d

Google Chrome Labs

Christmas 3D Illustrations — A set of free high-resolution festive 3D illustrations with some nice little design flourishes.

Wannathis

Snowflake Generator: Generate a Random or Custom Snowflake Image — We originally shared this a few months ago, but as it’s almost Christmas…

Vivian Wu