#154 - Optimising CSS

Hey everyone,

Welcome to issue #154, your weekly roundup of what’s happening in design, code and typography.

Thought provoking #

“When you write every day, you’ll start to think constantly about what to write about. And what is even more valuable: You start to notice things, thoughts, and connections throughout the day that might be an interesting topic for a post.”

Halftime. Matthias Ott reflects on the first 50 posts of his 100-days-of-writing challenge.

Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business. As Tailwind hits 10 million total installs and $2M in revenue, Adam Wathan tells the story so far.

Design and Code #

What does 100% mean in CSS?. Amelia Wattenberger creates some lovely interactive examples to help explain what the CSS percent unit actually does.

The Making of: Netlify’s Million Devs SVG Animation Site. Sarah Drasner captures the process of building the Million Developers microsite for Netlify, focusing mainly on the animation aspects.

To Design a More Accessible Internet, Consider the “Creative Layer” of Metadata from Margaret Rhodes. Using alt-text thoughtfully is the exception, not the rule.

Optimizing CSS for faster page loads. Tomas Pustelnik shares some great techniques for improving page performance, such as lazy loading stylesheets, inlining critical CSS and code splitting.

Simplified Development Workflow. Staying focused on what matters by reducing dependencies and decisions. Jon Yablonski runs through some of the awesome features of Hugo which can help you keep your workflow simple.

Typography #

Anna Monus on How to Self-Host Google Fonts on Your Own Server. Even though self-hosting Google Fonts might seem easy and self-explanatory at first, there are loads of things to pay attention to if you want to keep performance in mind.

Pangram Pangram’s New Typeface Inspired by Natural Motions and Bird Migrations from Zoe Loring Murphy. Migra is a spiky serif filled with movement and rhythm. As the foundry describes, ‘its weights span from an austere and elegant light cut to a hawkish and powerful black one’, and the gracious treatment of its bird-like features creates a palpable sense of movement and character.

Haste from DSType Foundry is a typeface that questions conventional classification. Is it a high or a low contrast typeface? Is it a Sans or a Slab? Normal or reversed-contrast?

Something to watch #

Create a Plugin for 11ty. In this episode of Learn With Jason, Bryan Robinson teaches us how to take 11ty even further with custom plugins.