text-spinners

A clever idea for text-based spinners in CSS. You set the "keyframes" in the content, and cycle through them by moving the line of text to the left in the actual keyframes.

<button>Loading <span class="loading"></span></button>
.loading.bar2::after {
  content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  animation: spin8 2s steps(8) infinite alternate;
}
@keyframes spin8  { to { transform: translateY(-12.0em); } }

This is a whole repo of them by Max Beier. I've isolated one of them here:

See the Pen text-spinners by Chris Coyier (@chriscoyier) on CodePen.

Choreographer-js

A new animation library by Christine Cha:

A simple library to take care of complex CSS animations.

You define the animations through its JavaScript API and execute them via DOM events, then the animation is done through applying inline CSS.

Seems to me it's not so much for helping build complex CSS animations, but for doing animations through CSS that you can't otherwise do, because you can't get things like mouse or scroll position in CSS.

Template Literals

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs. Gone will be the days of long string concatenation!

To create a template literal, instead of single quotes (') or double quotes (") quotes we use the backtick (`) character. This will produce a new string, and we can use it in any way we want.

(more…)

Loading Polyfills Only When Needed

We had this question on ShopTalk just the other day. We're so (rightfully) worried about web performance, it feels like we shouldn't be loading polyfills all the time, only when we detect they are needed. Philip Walton:

... too many people building websites today take a “lowest-common-denominator” approach. By that I mean they ship the same bundle of JavaScript to all users (regardless of browser capabilities), and the bundle they ship contains all code required to make the site work in the oldest browser they want to support.

While I understand that this approach is simple, it’s not respectful of your users, and it prioritizes your convenience over their experience.

In a slightly-surprising twist, his tactic is to:

  1. Cut the mustard for browsers that support everything needed
  2. If passes: kick off everything else
  3. If anything fails: load all polyfills then kick things off

The idea is to keep things simple, and not get yourself into a complicated state where you're trying to accommodate for the situation where "the browser can now be in 32 different states".

Things to Watch Out for When Working with CSS 3D

I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were some things that tripped me up at first. I thought I might write about the things that surprised me and the challenges I encountered so that you might avoid the same.

(more…)

Dock Show & Tell

Someone wrote in asking about some icons in my Dock. I figured that might be a fun thing to share, and y'all can follow suit and share yours as well. I know "Docks" are a little Mac-centric, but feel free to share your most used apps on other platforms as well. I bet this changes quite a bit over the years, so it will be interesting to re-do this in years to come and see how it changes.

(more…)

Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.

Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.

There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We're going to cover a few of those in this post along with methods for how to deal with them.

(more…)

System Fonts in SVG

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance/bandwidth hits. There is loads of nuance on how you load them.

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let's look at that for a sec, then also look at using them within SVG.

(more…)

Accessible SVGs in High Contrast Mode

The following is a guest post by Eric Bailey. You know how people change settings sometimes to make it easier to use for them? For example, they bump up the default font size in their browser so it's easier for them to read. As web designers, we like to accommodate that. We consider it good accessibility. The same goes here. Some people on Windows enable "High Contrast Mode" to make their computer screen easier for them to work with. Will our important SVG files hold up to the change? Let Eric show you.

(more…)

#149: A Quick Intro to Pattern Lab Node with Brian Muenzenmeyer

In this screencast I pair up with Brian Muenzenmeyer who, among other things, works on Pattern Lab. Specifically, the Node version of Pattern Lab, along with Geoff Pursell.

I should point out: this screencast barely scratched the surface of what Pattern Lab offers. It's not a comprehensive overview. Brian said a recent 8 hour workshop couldn't even cover it all. The topics covered in this screencast are:

  1. What is Pattern Lab?
  2. Why would I use it?
  3. Getting it
Watch Video →

We have a pretty good* newsletter.