#166

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 practices for refactoring a large codebase with a tool like Percy, Chromatic or Applitools. These apps scour your codebase and performs visual diffs on every change and commit that you make, like this:

Each change you make is highlighted in red so it’s easy to catch tiny margin or padding issues, as well as smaller typesetting and copywriting changes en masse. At Gusto, Percy was used for our recent brand refresh and it was immensely helpful for us to remove old components and tackle the parts of the codebase that we found harder to access.


This is a great collection of Chrome extensions for designers — I had never heard of Loom before and it lets you record animations, users-flows or bugs in the browser window easily.

Speaking of design, there’s also a wonderful course by Sarah Drasner that’s worth checking out on Frontend Masters all about Design for Developers. Here’s the description of the course:

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation. Also, understand the rules for designing to become a better collaborator to design team members and better able to execute the creation of complex and beautiful front-end experiences!


Chris collected a ton of links about variable fonts a while back and it was a great reminder that Wakami Fondue is a great tool that lets you upload a font and visualize all the data and options inside it:

This is helpful if you have a bunch of fonts sitting on your desktop and need to figure out which characters they have or even who designed it! So I think that’s certainly neato, if you ask me.


Earlier this week we also spotted Brittany Chiang’s portfolio which has super lovely animations and gets straight to the point with what kind of projects she’s tackled lately:

I love the overall aesthetic here, it’s so great in fact that it makes me want to go back to my own portfolio and redesign everything from scratch.


? From the blog

Paperform

Chris looks at the Paperform app which is a powerful form builder which lets us make those forms extremely easily and quickly. Chris writes:

Imagine you’re building a registration form for a conference. (That’s a perfect fit for Paperform, by the way, as Paperform has payment features that can even handle the money part.) The page that explains the conference and the registration form for the conference can be, and maybe should be, the same thing.

The Paperform designer makes it quite intuitive to build out a page of content.

It’s nifty that Paperform is so incredibly flexible with what you can do after you collect the data and it provides a bunch of integrations to other services that look darn useful, too.


Browser engine diversity

Chris has jotted down some thoughts about the current browser landscape and takes a couple of super interesting notes from this post by Brian Kardell on browser vendors, where Brian writes:

Something happened along the way in our history: Both the standards process, and the the Web Platform itself got increasingly open. In fact, today all of the implementations are open, and that’s a big part of how we moved grid.

Most of the work on CSS Grid in both WebKit and Chromium (Blink) was done, not by Google or Apple, but by teams at Igalia.

Think about that for a minute: The prioritization of its work was determined in 2 browsers not by a vendor, but by an investment from Bloomberg who had the foresight to fund this largely uncontroversial work.

This…is interesting! When I read this it sort of sounds like Brian is hoping for a browser by the people and for the people — an open source software project that can stand the test of time and isn’t concerned with the business constraints of Google or Apple.


A Codebase and a Community

The other day I wrote about one thing that I don’t hear anyone talk about when it comes to design systems: hiring! And I reckon that’s because a design systems team is close enough to the front-end codebase to find problems in an org that others can’t see:

I woke up one morning and realized that I had it all wrong. I discovered that code and design are unable to solve every problem on a design systems team, even if many problems can be solved by coding and designing in a dark room all day. Wait, huh? How on earth does that make any sense? Well, that’s because good design systems work is about hiring, too.

I think that’s the thing about systems that took me so long to understand: that coding and design alone can’t solve every problem in your interface. Instead, you need to focus on the community in order to fix the codebase.


SPONSOR

Netlify

We wanna thank Netlify for sponsoring this week’s newsletter! We’re big fans of Netlify here at CSS-Tricks. In fact, we’ve launched two static sites this year alone that leverage Netlify’s blazingly fast static hosting: one featuring a directory of front-end conferences and another all about serverless itself. Netlify makes it all possible, from managing the content via NetlifyCMS to submitting content via email using Netlify functions.

It can work for you, too! Try it now and deploy a site in seconds. 🚀