Animations, algorithms, and communities, with Rachel Nabors

  1. 22 - Rachel Nabors Larry Botha 27:55

Rachel is an award-winning cartoonist and graphic novelist who now cuts her teeth as an expert on web animations. With her newsletter and slack.animationatwork channel, courses on and Frontend Masters, and her latest book, Animation At Work, Rachel is an authority on improving user experience through using motion on the web.

Time Stamped Show Notes

0:57 –¬†Rachel has been in the web animation space for 5 years.

1:02 – Rachel was an award winning cartoonist turned front-end developer before trying her hand at web animation.

1:24 – She recently wrote a book called Animation at Work with A Book Apart.

1:45 – Rachel’s mother tried to dissuade her from becoming a programmer. Her mother was a systems analyst and used languages like Assembly and COBOL. She wanted Rachel to be an artist.

2:08 – Rachel started making comics and wanted to share them with people. The local library attained internet access and she started to share her comics on GeoCities.

2:35 – She started creating a weekly cartoon for a website called She had 400,000 readers from all over the world.

2:49 – Rachel wanted a better way to engage with her followers. She researched which CMS she could use for this purpose. As a result she got started with Drupal. The website she built was a community. People shared their tips and tricks, while she promoted her comics. That’s how she got started with web development.

4:16 – Rachel has taken an interest in algorithms. She believes it changes the way you think about things.

4:23 – Since she started studying algorithms she’s been thinking about how she performs different operations. She’s also been thinking how to perform them more efficiently.

4:48 – Rachel believes that if you’re writing anything at scale, pick up a book on algorithms.

5:20 – In terms of creative programming, Rachel would be at a loss without access to the scripts functions in Adobe suites of tools. She would find it hard to work without the export functionality.

7:28 – On some projects Rachel uses Compass. It has great built-in spriting functions. It returns the dimensions of the image in the sprite.

8:03 – Rachel thinks the composition and rendering stack for web development could use some innovation.

8:30 – Rachel feels that designers and developers speak less and less to each other.

8:47 – Designers and developers have their separate tools to aid their work. This means the tooling we need for complex graphic interactions isn’t there.

9:13 – Rachel wishes designers and developers would collaborate more. She would like to see more tools for designers to aid the development process.

10:20 – Rachel says Vue is great for designers and developers who work with motion design and animation. It’s an easy framework to set up. It integrates nicely with CSS animations and JavaScript animation libraries.

11:07 – Rachel likes to spend time learning the things she’s excited about. In the past that’s been CSS, Sass, CSS animations and the web animations API.

11:17 – Rachel believes you need to keep tabs on what other people are talking about. It’s important to investigate new languages, frameworks or libraries even if you don’t use them in your everyday work.

13:00 – Rachel wants to make the time to see how the tools Spirit.js and Haiku work. They allow people to prototype web animations in the browser.
13:23 – “If you don’t make the time, you won’t have the time”.

14:21 – Rachel discovered a great book called Grokking Algorithms. It’s an illustrated book that walks you through some common computer science principles. It will help front-end developers without a computer science background.

15:59 – Rachel is excited that JavaScript now has Sets.

16:42 – The world of programming is vast and wide. But so is the area of programming you focus on. If you’re specialising in one particular program with a particular subset of concepts, it’s easy to lose track of what’s out there.

Quickfire Questions

18:41 – best advice about programming
Sit down with languages you don’t know and experiment. It will help you question what you DO know.

19:48 – habits for writing better code
Tidiness and getting a second opinion. Have some one who is better than you critique your work.

22:35 – book
Sarah Drasner’s book “SVG Animations”. If you’re working with animations, you’re probably working with SVG as well. This book is the go-to reference for SVG animations. Kirupa Chinnathambi’s book “Learning CSS Animations” is also excellent.

23:37 – inspiring devs
In addition to programmers like Sarah Drasner, Rachel wants to give a shout out to the folks on the Slack channel called “Animation at Work”. Rachel is also a fan of Natalie Cooper. She founded a creative coding community. Rachel is excited about the different libraries this community is creating, including “Just Animate”.

24:33 – how to learn to code from scratch
If you’d like to start with JavaScript start with Kyle Simpson’s “You don’t know know Js” series. Alternatively try “DOM Enlightenment” or “JavaScript Enlightenment” by Cody Lindley. Rachel thinks it’s also good to start learning by reading books for kids. They make less assumptions about what you know. She loved “Learn to Program” by Chris Pine. If you like to learn through videos try “The Coding Train”.

Tools, Tips, and Books Mentioned

Contact Rachel