I Make Things

About Me

Sarah Drasner is an award-winning Speaker, Principal Lead of Emerging Markets, Cloud Advocates at Microsoft, and Staff Writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s the author of SVG Animations from O’Reilly and has given Frontend Masters workshops on Vue.js and Advanced SVG Animations. Sarah is formerly Manager of UX & Engineering at Trulia/Zillow Group. Sarah won CSS Dev Conf’s “Best of the Best Award” as well as “Best Code Wrangler” from CSS Design Awards. She has worked for 15 years as a web developer and designer, and at points worked as a Scientific Illustrator and an Undergraduate Professor, and has tutored a Byzantine Icon painter in Santorini.





I'm an O'Reilly Author! Buy my book on SVG Animations!


Learning to Learn
published March 4, 2019
What Hooks Mean for Vue
published February 4, 2019
The Importance of One-on-Ones
published January 30, 2019
Voice-Controlled Web Visualizations with Vue.js and Machine Learning
published October 29, 2018
Durable Functions: Fan Out Fan In Patterns
published October 23, 2018
Introducing GitHub Actions
published October 17, 2018
How to Import a Sass File into Every Vue Component in an App
published October 17, 2018
What are Durable Functions?
published October 9, 2018
Create your own Serverless API
published July 16, 2018
Balancing Time
published June 22, 2018
Understanding the Almighty Reducer
published June 13, 2018
Creating a VS Code Theme
published June 8, 2018
What does the h stand for in Vue's render method
published May 30, 2018
Native-like Animations for Page Transitions on the Web
published April 23, 2018
Methods, Computed, and Watchers in Vue.js
published April 6, 2018
JavaScript, I love you, you're perfect, now change
published February 1, 2018
Creating a Vue.js Serverless Checkout Form: Setup and Testing
published January 16, 2018
Creating a Vue.js Serverless Checkout Form: Stripe Function and Hosting
published January 17, 2018
Creating a Vue.js Serverless Checkout Form: Application and Checkout Component
published January 18, 2018
Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component
published January 19, 2018
An Open Source Etiquette Guidebook, written with Kent C. Dodds
published December 8, 2017
The Art of Comments
published October 16, 2017
Exploring Data with Serverless and Vue: Filtering and Using the Data
published October 11, 2017
Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions
published October 10, 2017
Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js
published July 24, 2017
Using Mixins in Vue.js
published June 14, 2017
Masking vs. Clipping: When to Use Each
published June 7, 2017
Using Filters in Vue.js
published June 3, 2017
Production Progressive Web Apps with JavaScript Frameworks
published May 27, 2017
The Power of Custom Directives in Vue
published April 20, 2017
Debugging Tips and Tricks
published April 11, 2017
Intro to Vue: Animations
published Feb 3, 2017
Intro to Vue: Vuex
published Feb 2, 2017
Intro to Vue: Vue-cli and Lifecycle Hooks
published Feb 1, 2017
Intro to Vue: Components, Props, and Slots
published Jan 31, 2017
Intro to Vue: Rendering, Directives, and Events
published Jan 30, 2017
A Guide to 2017 Conferences
published December 26, 2016
An Introduction to mo.js
published Nov 17, 2016
On Style Maintenance
published Oct 21, 2016
A Nerd’s Guide to Color on the Web
published Sept 12, 2016
My New Favorite ES6 Toy: Destructured Objects as Parameters
published Sept 6, 2016
High Performance SVGs
published August 1, 2016
Interactive Data Visualization: Animating the viewBox
published June 8, 2016
A Comparison of Animation Technologies
published May 2, 2016
Creating an SVG Icon System with React
published March 15, 2016
Introducing CSS Scroll Snap Points
published March 2, 2016
An Interview with Una Kravets
published February 26, 2016
I Learned How to Be Productive in React in a Week and You Can, Too
published February 8, 2016
SMIL is dead! Long live SMIL! A guide to alternatives to SMIL features
published December 14, 2015
A Guide to 2016 Front End Conferences
continuously updated
The Making of the CSS-Tricks Logo Easter Egg Animation
published November 6, 2015
The Importance of Context-Shifting in UX Patterns
published September 10, 2015
Debugging CSS Keyframe Animations
published August 3, 2015
Weighing SVG Animation Techniques (with Benchmarks)
published January 27, 2015

24 Ways

Animation in Design Systems
published December 15, 2016


Mourning as a Developer
published August 14, 2018

Net Magazine

Create Animations that Scale for All Devices
published April, 2016
Gallery- Sensational Design and Superb Development
published February, 2016
Voices Q&A: Maya Benari
published February, 2016

David Walsh Blog

GSAP and SVG for Power Users Part 3: New 1.18.0 Features
published October 6, 2015
GSAP and SVG for Power Users Part 2: Complex Responsive Animation
published July 14, 2015
GSAP and SVG for Power Users Part 1: Motion Along a Path
published June 29, 2015

Smashing Magazine

Replacing jQuery With Vue.js: No Build Step Necessary
published February 13, 2018
Practical Techniques on Designing Animation
published June 8, 2015
A Few Different Ways To Use SVG Sprites In Animation
published March 17, 2015

Super Yes More

Studio Commandments
published Jan 17, 2017

some of the fine
people I’ve worked with

CSS-Tricks, NetMag, Microsoft,
Smashing Magazine, IBM, Zillow,
O’Reilly, Frontend Masters, & Mule Design.



I’m a Frontend Master! View my courses on Vue.js, Design for Developers and SVG Essentials and Animation
Take an animation workshop from me and Val Head! Check for locations near you


VueConf US, Tampa, FL, March 25-27, 2019.
PerfMatters, San Francisco, CA, April 2-3, 2019.
JS Heroes Keynote, Cluj, Romania, April 11-12, 2019.
All Day Hey, Leeds, UK, May 3, 2019.
Smashing Conf, Toronto, June 25-26, 2019.
Smashing Workshop: Intro to Vue, Toronto, June 24, 2019.
An Event Apart Washington DC, Washington DC, July 29-31, 2019.


An Event Apart Seattle, Denver, CO, March 4–6, 2019.
DenverScript, Denver, CO, February 26, 2019.
Clarity Conf, New York, December 11-12, 2018.
Microsoft Ignite | The Tour, Berlin, December 6-7, 2018.
Frontend Masters: Advanced SVG Animations v2, Minneapolis, November 30, 2018.
Frontend Masters: Developing Web Applications with Vue, Minneapolis, November 29, 2018.
Coldfront, Copenhagen, November 13-14, 2018.
VueFes Japan, Tokyo, November 3, 2018.
Smashing Conf, New York, October 23-24, 2018.
Smashing Workshop: Intro to Vue, New York, October 25, 2018.
Web Unleashed, Toronto, Canada, October 1-3, 2018.
Concatenate, Lagos, Nigeria, August 10-11, 2018.
Fullstack Keynote, London, UK, July 11-13, 2018.
Web Animation Workshops with Val Head, Brighton, UK, July 9-10, 2018.
Serverless Days Keynote, London, UK, July 6, 2018.
Smashing Workshop: Intro to Vue, Toronto, Canada, June 25, 2018.
Smashing Conf no slides conference, Toronto, Canada, June 26-27, 2018.
FrontTrends Keynote, Warsaw, Poland, May 24-25, 2018.
Microsoft Build, Seattle, WA, May 8-11, 2018.
Uphill Conf, Bern, Switzerland, May 3, 2018.
SVG Animation Workshop at Uphill Conf, Bern, Switzerland, May 2, 2018.
JS Heroes, Cluj, Romania, April 18-20, 2018.
Smashing Conf SF Workshop, San Francisco, California, April 16, 2018.
VueConf US, New Orleans, Louisiana, March 27-28, 2018.
VueConf US Workshop, New Orleans, Louisiana, March 26, 2018.
JS Conf Iceland Keynote, Reykjavik, Iceland, March 1-2, 2018.
VueConf Amsterdam, Amsterdam, Netherlands, February 16, 2018.
Frontend Love, Amsterdam, Netherlands, February 15, 2018.
You Gotta Love Frontend, Tel Aviv, Israel, Oct 30-31, 2017.
CSS Dev Conf Featured Speaker, New Orleans, LA, Oct 9-11, 2017.
CSS Dev Conf Workshop with Val Head, New Orleans, LA, Oct 11, 2017.
Web Animation Workshops with Val Head, Pittsburgh, Oct 13, 2017.
Smashing Conf Barcelona, Barcelona, Spain, Oct 17-18, 2017.
Reactive Conf, Bratislava, Slovakia, October 26-28, 2017.
FullStack Fest, Barcelona, Spain, September 7-8, 2017.
Web Animation Workshops with Val Head, Portland, September 18-19, 2017.
D3 Unconf Keynote, San Francisco, CA, September 21-22, 2017.
The Web Unleashed- Workshop, Toronto, Canada, September 25-26, 2017.
JS Channel Keynote, Bangalore, India, July 28-29, 2017.
Develop Denver, Denver, CO, August 10-11, 2017.
Web Animation Workshops with Val Head, Denver, CO, August 18, 2017.
Frontend Conference Zurich, Zurich, Switzerland, August 31-September 1, 2017.
Web Animation Workshops with Val Head, Paris, September 4-5, 2017.
Frontend Conference Zurich Workshop, Zurich, Switzerland, TBA, 2017.
Frontend Masters: Vue, Online, July 14, 2017.
Vue Conf, Wrocław, Poland, June 22-23, 2017.
Vue Workshop, Wrocław, Poland, June 21, 2017.
Web Animation Workshops with Val Head, Toronto, June 12-13, 2017.
Awwwards Conference Keynote, Los Angeles, California, June 1-2, 2017.
React Europe, Paris, France, May 18-19, 2017.
Smashing Conf, San Francisco, April 4-5, 2017.
Beyond Tellerrand, Düsseldorf, May 15-17, 2017.
Beyond Tellerrand Workshop: SVG, from Animations to Data Visualisation, Düsseldorf, May 17, 2017.
FITC Toronto 2017- The Technology & Creativity Conference, Toronto, Canada, April 23-25, 2017.
Web Animation Workshops with Val Head, Chicago, April 13-14, 2017.
Smashing Conf Workshop: Advanced SVG Animations, San Francisco, April 6, 2017.
SFHTML5, San Francisco, April 7, 2017.
Forward JS Workshop, San Francisco, CA, Mar 4, 2017.
Web Animation Workshops with Val Head, San Francisco, February 20-21, 2017.
SVG Summit, Online, February 15, 2017.
Sass Summit, Environments for Humans, Online, Dec 14, 2016.
Web Animation Workshops with Val Head, New York, Dec 8-9, 2016.
CSSDay.io Keynote, Arizona, Dec 3, 2016.
CSS Dev Conf Asia, Singapore, Nov 24, 2016.
Web Animation Workshops with Val Head, Austin, TX, Nov 14-15, 2016.
O’Reilly Live Training: Building SVG Animations, Boston, MA, Nov 1-2, 2016.
CSS Dev Conf, San Antonio, TX, Oct 17-18, 2016.
Fronteers, Amsterdam, Oct 6-7, 2016.
Fronteers Workshop: Advanced SVG Animation, Amsterdam, Oct 5, 2016.
CSSConf Keynote, Boston, MA, Sept 26-27, 2016.
Mirror Conf, Braga, Portugal, CA, September 23-24, 2016.
Smashing Conf Freiburg, Freiburg, Germany, Sept 12-13, 2016.
React Rally Keynote, Salt Lake City, UT, August 25-26, 2016.
Generate Conf (NetMag), San Francisco, CA, July 15, 2016.
Smashing Conf New York, New York, NY, June 14-15, 2016.
Smashing Conf Workshop: Advanced SVG Animations, New York, NY, June 16, 2016.
Valio Con, San Diego, CA, May 19-22, 2016.
Generate Conf (NetMag), New York, NY, April 22, 2016.
CodePen Meetup, San Francisco, CA, April 6, 2016.
O’Reilly Fluent Keynote and Session, San Francisco, CA, March 8-10, 2016.
JavaScript Summit, Online, February 23-24, 2016.
ForwardJS Summit, San Francisco, CA, February 10, 2016.
SVG Summit, Online, January 21, 2016.
CSS Dev Conf in Long Beach, CA, October 26-27, 2015.
Frontend Masters “Advanced SVG Animations” Workshop. October 23, 2015.
CSS Summit online conference. July 7-9, 2015.
CSS Conf in New York, NY. June 18-19, 2015.
Codepen Meetup in Palo Alto, CA. April 1, 2015.
Html5DevConf in San Francisco, CA. October, 2014.
Html5DevConf in San Francisco, CA. October, 2013.
DevCon5 in New York, NY. July, 2013.

Podcasts, Screencasts, and Interviews

Learning Vue- teaching Chris Coyier, May 12, 2018.
No, You Go, May 8, 2018.
Codenewbies, February 26, 2018.
FullStack Radio, February 14, 2018.
Software Engineering Daily, December 1, 2017.
CodePen Radio, June 20, 2017.
The Versioning Show, June 13, 2017.
Non-breaking Space, May 16, 2017.
Stack Overflow Podcast, May 8, 2017.
The Modern Web, Vue.js with Sarah Drasner and Evan You, April 27, 2017.
Thundernerds, April 10, 2017.
Toolsday: Animation Tools with Sarah, December 20, 2016.
Coding Rainbow, Guest Tutorial: Web Animations and Mo.js, December 19, 2016.
JavaScript Air, Web Animations, June 29, 2016.
Scotch Makes Us Animated, Front End Happy Hour, June 6, 2016.
Shoptalk Show episode on Animation with Val Head, May 20, 2016.
React Powered Comment Form Pairing with Chris Coyier on CSS-Tricks, March 18, 2016.
Episcura, March 9, 2016.
Non-Breaking Space, January 18, 2016.
SVG Immersion Podcast Round Table: Sarah Drasner, Petr Tichy, Dudley Storey, November 27, 2015.
Shop Talk Show, August 4, 2015.
CSS Design Awards, June 10, 2015.
SVG Immersion Podcast, April 16, 2015.

Contact Me