A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.


Icons and Teams

Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.

Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.

What do you ask of the designers?


Working with Images in Stylesheets with PostCSS

The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You're about to see a variety of PostCSS plugins at work that are all related to working with images. By the end, I bet you'll be able to imagine how PostCSS can be useful for other niches within working with CSS.


CodePen Embedded Pen Upgrades  

They now:

  1. Have an all-new design that allows for a split-view (code on the left, preview on the right) when the responsive design allows.
  2. Can be editable.

Along with all the same great features they have always had like themes (total design control! change all your embeds at once!) and optional click-to-play (for increased performance).

Visual Regression Testing with CSS Blend Modes

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out we can.


A Quick Look at the Runner Sketch Plugin

Runner is a plugin for the design tool Sketch. It lets you use your keyboard to run commands and order about other plugins. For example, by typing “vertical” into Runner then you can vertically align text much faster than moving your mouse to the button and clicking it.

I’ve seen some folks describe Runner as if it’s Sketch’s version of Spotlight or Alfred, as effectively their goals are one and the same: to speed up and organize your workflow. In the video below I briefly go over how Runner might speed up the design process:

Once you've downloaded it, you can start Runner inside Sketch by hitting cmd + ' and then tab to move through each section, like Export or Run.

If you’re interested in finding more plugins to tie into Runner, there’s an official list of all the Sketch plugins available.


Lingo is an app from the Noun Project team that groups images, icons, SVGs, and illustrations into a single place. It lets you browse them quickly, and then you can drop them into another application without any hassle.

I work a ton with SVGs and icons, so I'm always trying to find ways to reduce friction between different software and editing processes. One might think that the answer to this couldn't be more software, but I'm really enjoying Lingo. In fact, there was a funny quote from someone a few years ago on Twitter, (my memory is too spotty to remember who said it) "Fun Fact! The average designer spends 10% of their life looking for the right icon."


Speaking of tricky things to get right: tooltips!

Tooltips need to be particularly self-aware, so they don't stick out someplace where they can't be read. Then continue to be smart as the page state changes, like is resized or scrolled. Popper.js looks like it handles all this stuff nicely.

The project page doesn't say this, but creator Federico Zivolo showed me how it's also friendly with React, because you can render the tooltip element itself within the component and it just stays where it is. This is unlike most tooltip implementations that move the tooltip element around the DOM (probably making it a direct descendant of the <body>, to make positioning easier), which could easily be problematic in a React environment.

#147: Starting a React-Powered Comment Form

In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some "real world" style functionality: a comment form.

This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React (or at least, it seems to me). For example, a master "App" that deals with the state (our big "state" thing is the comments themselves) …

Watch Video →

We have a pretty good* newsletter.