View this newsletter on the web.

Creating UI Components in SVG

Sarah wrote about all the exciting possibilities that open up when you learn about the intricacies of SVG:

Truly, once you learn SVG, you can draw anything, and have it scale on any device. Even this very site uses SVG for custom UI elements, such as my avatar, above (meta!)

Sarah then writes about how she built the Jamstack Explorers site where you can watch a video about a … Read article “227: The smallest details often make the biggest difference”

View this newsletter on the web.

[Robin]: The first thing that caught my eye this week is this fabulous tutorial by Alex Trost where he walks us through how to make this rather nifty design:

This design is the work of Andy Barefoot, who’s really pushing forward the weirdness and pure magic of what’s possible with CSS Grid. Just check out his personal website, that happens to look something like this:

Andy has a ton of amazing Pens that … Read article “226: Websites Can Be Weird”

View this newsletter on the web.

[Robin]: One time I was interviewing someone for a UI engineering gig and noticed something interesting. We were building a UI that involved flexbox and the person opened up DevTools and started clicking up and down in the list of values available to them. And I shortly realized that this person understood that it was this property that would solve the problem, but they didn’t quite understanif wd what combination of properties and … Read article “225: Learning Things You’ve Been Avoiding”

View this newsletter on the web.

[Robin]: One of the nifty things about VS Code is that you can run tasks when you open up a project. So instead of having to open up the command line and also have VS Code open at the same time, you can configure VS Code to run tasks like Gulp automatically. Chris wrote about this very thing and how he got a Gulp task running. This had me thinking, why don’t I do … Read article “224: VS Code Tasks”

View this newsletter on the web.

Core Web Vital Tooling

Core Web Vitals is how Google measures the performance of any given site and you might’ve already heard the buzzwords like LCP, FID, and CLP. But — these are actually really useful metrics to figure out how to improve performance. So here they are again:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

In my head, I find it useful to translate these … Read article “223: Core Web Vital Tooling”

View this newsletter on the web.

[Robin]: I read this post from Dave Rupert about setting color variables, using a combination of Sass vars, CSS vars, and what Dave calls “semantic theme vars.” He writes:

Last week I got the opportunity to work on a side project that has no plans to include IE 11 in the support matrix and let me tell you; what a wonderful feeling! This opens the door to a lot of fun CSS, namely

… Read article “222: A Note about Color Variables”

View this newsletter on the web.

[Robin]: This week I’ve been moving into a new apartment and everything is, well, to put it kindly, an absolute nightmare. There’s a rat king of cables and three laundromat’s worth of clothes on the floor. Important documents are flung about all over the place in my kitchen, there are coffee cups in the plant pots, there are knives teetering on top of books, and I am now deadly certain that I’m breaking a … Read article “221: Move and Replace”

View this newsletter on the web.

Just the other day Kilian Valkohof wrote this great piece about how to create a full-bleed layout effect where an element like an image breaks out from the grid you’ve established.

Kilian shows us how he does that with plain ol’ CSS:

body > *:not(img) { 
  position: relative;
  max-width: 40rem;
  margin: auto;
} 

The :not pseudo-class above will set the max-width of every element on a page that isn’t an <img> to have a … Read article “220: The Principle of Least Power”

View this newsletter on the web.

Earlier this week, I watched this fantastic talk by Ethan Marcotte about the current state of design systems and I haven’t been able to stop thinking about it. The part that really stuck out to me though was this bit:

Creating modular components isn’t the primary goal or even the primary benefit of creating a design system. And what’s more, a focus on process and people always leads to more sustainable systems.

I love … Read article “219: Design Systems and the Black Box”

View this newsletter on the web.

Color within Constraints

Here’s a fantastic piece by Linzi Berry about the design systems team at Lyft and how they work on their color guidelines:

On the surface color seems simple, but getting 100+ designers and engineers to follow guidelines that are a part of literally everything they make is a huge undertaking. To put it in perspective: over 50% of Lyft’s design system team’s office hours, high visibility projects and inner team

… Read article “218: Web Components, Colorful Design Systems, Onboarding Animations”