|
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?
|
Cross-Fading Any Two DOM Elements is Currently Impossible
|
How to Use an iPad for WordPress Theme Development
|
Test Your Product on a 'Craptop'
|
|
🔧 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 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 |