View this newsletter on the web.

🔥 A small rant about tables

[Robin]: I’ve been interviewing a lot of folks lately for front-end roles at Gusto (where I work) and I’ve been noticing something peculiar about the interview process. In these interviews, I test a front-end engineer’s basic HTML and CSS skills with the following mockup that I ask them to build:

All I ask them to do is replicate that design in the browser with the help of CodePen… Read article

View this newsletter on the web.

🔗 Links from around the web

Dan Mall wrote a great piece about The Hot Potato design handoff process. That’s where he tackles the misconception that the design handoff should be from designer → engineer and only happen once. Dan argues ideas should be passed back and forth between designers and engineers all the time.

Also, in my experience, this is the best way to work across engineering and design. Once the hand-off happens … Read article

View this newsletter on the web.

🔥 Links from around the web

Miriam Suzanne has been making a bunch of really lovely bite-size videos about making layouts with CSS Grid—with a special focus on subgrid.

The exciting part is how it’s so much faster to build complex layouts and this shows us just how much the field of web design has improved in recent years. And on this note: I remember wanting subgrid way back in 2007 and shaking … Read article

View this newsletter on the web.

🔗 Notes from around the web

Responsive tables are a tricky thing to get right, but Bradley Taunt shows a few quick ways to make tables responsive with minimal CSS. Bradley shows how we can let folks scroll around the table with overflows, or how we can use CSS to make each table row into a card like this:

It’s a nifty trick similar to the one that Chris shared back in 2011… Read article

View this newsletter on the web.

👁 The Fates of Design Systems

[Robin]: I learned a very important lesson this week when it comes to design systems. It all began several months ago when I was pairing with a designer from a separate team, helping them work on a project, and trying to figure out which components from our React library can be used for their project and which would have to be entirely built from scratch.

The design … Read article

View this newsletter on the web.

🔗 Links from around the web

Here’s a neat CSS trick by Tobias Ahlin where he shows us how to make boxes with smoother box-shadows:

On the left is the box with a regular box-shadow, and on the right is the one that Tobias prefers which is made with multiple box-shadows stacked on top of one another. Pretty nifty stuff.

---

Visual regression testing in design systems digs into a ton of great best … Read article

View this newsletter on the web.

🔗 Links from around the web

Amelia Wattenberger has written this wonderfully interactive piece about React Hooks and how they can clean up our code and remove all those troubling lifecycle events:

---

Here’s a great post by Karolina Szczur on how to automatically compress images on pull requests. This is all possible with a GitHub action called image-actions where it will run through every image in your repo and optimize them as you … Read article

View this newsletter on the web.

🔗 Links from around the web

• Here’s a great post from Bastian Allgeier all about simplicity in web development. He writes about how things are getting more complicated and it might not be helpful for us all in the long run:

You want to build a JS file? Please update Webpack first. Oh, that new version of Webpack is no longer compatible with your Node version. Oh, your new Node version is no

… Read article

View this newsletter on the web.

🔗 Links around the web

• Firefox now blocks tracking third-party cookies and cryptomining by default.
• Ben Frain sets out to explain how to build a Progressive Web App from scratch.
• This animation right here is…a font? Weird!
• Here’s a fun CSS hack that shows the outline of every element on the page which makes things easier for designing layouts.
• Adam Silver details his beef with tooltips and some suggestions about how we might

… Read article

View this newsletter on the web.

[Robin]: There’s a part of any front-end codebase that’s like the core of a reactor—all the features in an application are dependent on this tiny amount of code; fragments and snippets that are the load-bearing posters of your codebase. That sounds obvious but in practice, it’s hard to see what’s load-bearing and what’s trash. Maybe the trash is load-bearing!

(That’s when you have some real design systems issues.)

The reason why I mention this … Read article