Home / Newsletters /

#200: Flexible Grids, Inset, Page Transitions, and More

The CSS inset CSS property is like a combination of…

… top, bottom, left and right. Adam Argyle brought showed this off the other day.

As the docs on MDN reveal, this will set the element to be set in all corners of its parent element. Nifty! Or it takes values for the edges in the same format as margin or padding.

Framer Web has moved to the browser

It looks pretty great. I’ve yet to design anything substantial with it yet but I love the UI—the use of colors and the smart way they display critical information is quite lovely. What differentiates it from other design tools? Well, it looks like that Framer specializes in animations and prototyping; two pretty let-down features in design tools to date. But no more! Framer is looking to really change things here, and I think it shows.

They also have a ton of examples built in Framer to get started with:

These are definitely worth checking out because I think from a distance it’s easy to say that all design tools do a lot of similar things but… well… I think this could be different. Check out this video we did on Framer Motion a bit ago, which is already a standout in the world of React animation.

Here’s how to make Google Fonts load 20% faster

Earlier this week Harry Roberts wrote a great piece where he investigates how fonts served from Google Fonts load and how he can help us make them load even faster:

It’s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negotiation, predictable URLs mean we can preload, self-hosted means we can set our own cache-control directives, and full ownership mitigates the risks that come with leaving static assets on third-party origins.

That said, the convenience of a service like Google Fonts cannot be overstated. Their ability to serve the tiniest possible font files tailored to specific user agents and platforms is amazing, and with such a huge, freely-available library served from Google-grade CDNs… I definitely see why people continue to turn to it.

The trick here is really 3 things: using preconnect on the Google Fonts URL:

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

Then preloading the fonts and setting it to use display: swap:

<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

($CSS is the URL that Google gives you after you’ve selected which font you want).

And finally we need to use a rather clever trick with the stylesheet:

<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

This is using Filament Group’s smarty pants trick of using that Scott Jehl wrote about in The Simplest Way to to Load CSS Asynchronously. It’s a nifty trick that’s worth keeping in the ol’ toolbox, that’s for sure.

This reminds me: Scott’s new video course, Lightning Fast Web Performance, dropped the other day. In it, he walks us through how to make a website load as quickly as the speed of light. Scott looks at the dev tools, the tricks, and the theory behind why websites need to be fast.

Flexible grids are the coolest!

In this post (part of our in-progress book of the best CSS tricks), Chris takes a gander at CSS Grid and how to make a column layout that doesn’t declare the number of columns or rows, but automatically instead. Chris calls this “the most famous and useful code in all of CSS Grid”:

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

What we’re doing with that last line of code is saying “I want a grid with infinite columns, but each column must be at least 200px and always the same width as each other.” That’s certainly a mouthful but it’s extremely powerful. I tend to forget this each time I need it so I’m jotting it down again for the future, too.

Speaking of CSS Grid… even when you’re just trying to have a bunch of boxes fall into a horizontal row, which is often flexbox territory, you can use grid for that also:

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}

Still flexible! And supports gap, which flexbox is only just starting to.

Enhance your Page Transitions

Native-like transitions have always been a thing that web developers have looked at and been enraged with pure jealousy because getting those types of animations to work for everyone can be a bit of a giant un-ending pain. But! Sam Smith has taken a look at how to progressively enhance them so they do just that. He writes:

Page transitions on the Web are typically very abrupt – you click a link, then the browser replaces the current page with the new one, as quickly as it can. This is a good starting point, and perhaps sometimes what we want, but a more gradual transition can be easier for people to follow. Visual transitions are what we are used to in the “real world”; sudden changes don’t tend to happen, aside from perhaps a power outage (which is never welcome). Animating transitions can offer continuity and make it easier to retain context.

Sam does all this with the help of barba.js, a handy dandy animation library.

Interested in more about page transitions?

They are a big deal, as it is one thing that native apps tend to do much better than websites and it can give them a UI/UX edge sometimes.

How to build a Chrome extension

Sarah Drasner digs into how she built five Chrome extensions lately and wanted to document the experience for the future:

I made a Chrome extension this weekend because I found I was doing the same task over and over and wanted to automate it. Plus, I’m a nerd during a pandemic, so I spend my weird pent-up energy building things. I’ve made five Chrome extensions with that energy, yet I still find it hard to locate the docs to make them. Some things are outdated or deprecated. Some things are simply buried. I’m writing this as a bit of tutorial (1) in case it’s helpful to others and certainly (2) for myself the next time I want to build a Chrome extension.

Sarah’s adventures on this front remind me of Lindsay Grizzard’s excellent post on the subject, too. In that post though she walks through a specific example: her Chrome extension that loads the definition of a word every time you open up a new tab. Just like this:

An Event Apart: Online Together

The best conference out there for UX & front-end experts has starting doing taking their conferences online, maintaining the incredible lineup of speakers they have. Hopefully this means many more of you can attend, since you attend from anywhere in the world without travel!

[Chris]: I’d like to shout-out to Jake Archibald’s use of SVG in his blog posts over the years. Jake uses SVG for things SVG is really really great at, playing to its strength and avoiding its weaknesses. For example:

  • Figures / llustrations…
  • … that have interesting design and layout
  • … that use real text, not image-ized text
  • … that scale with their aspect ratio without any trickery
  • … that are animated

I have to ironically sadly embed static graphics here to show you as this is going out over email, but definitely check out the originals on Jake’s site.

Offline Cookbook
Animated line drawing
Anatomy of Responsive Images

☮️