Articles by
Sarah Drasner

DOM Blacksmith, UX Smelter, Code Forger.

An Introduction to mo.js

mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. Even though mo.js is still in beta, there is already a host of amazing features to play with. Its author, Oleg Solomoka (otherwise known as @legomushroom) creates incredibly impressive demos and tutorials for the library's offerings that you should check out, but in this article we’ll run through a really quick overview of features and tutorials to get you started.

(more…)

On Style Maintenance

I was talking to a brilliant engineer friend the other day who mentioned they never get to build anything from the ground up. Their entire career has consisted of maintaining other people's (often quite poor) code.

In a perfect world, we'd all get to write code from scratch, it would work perfectly, and we would put it into a bin in the sky, never to be looked at by anyone again.

We all know that's not how it works. Code need to be maintained.

(more…)

Web Animation Workshops

I’m thrilled to announce a brand new workshop series I’m starting with Val Head about web animation! We’ll be taking two-day workshop around to different cities starting this November, starting with Austin and New York. Whether you’re a beginner or you’ve been diving into animation already, this course won’t just get you started- you’ll leave with all the tools necessary to make subtle and beautiful web animations, and how to pick the right tools for the job.

Val and I both have been speaking and giving workshops around the world, and together we make a venn diagram of strength and knowledge about how to animate on the web. We’ll be covering everything from theory, to technique, to bug fixes and cross-browser stability. We both focus on accessibility and performance. You’ll learn how to make great animation decisions both from a design and technology perspective. We’ll cover working with SVG, CSS, and JavaScript technologies, both native and API. We’ll discuss complex animations, responsive animations, and UX animations, and go over when to use each. You won’t find this much web animation knowledge packed into one workshop anywhere else!

To make sure you get as much out of these workshops as possible we’re keeping the the class sizes small. Each workshop is limited to 40 participants and will include hands-on exercises to get you started.

My New Favorite ES6 Toy: Destructured Objects as Parameters

Like a lot of other developers, I’m working through my continued education learning what I can about ES6. One of the ways I’m doing this is to attend workshops by smart people. I went to Kyle Simpson’s ES6: The Good Parts course and found myself particularly interested in the practical applications of a piece of ES6 I had previously not noticed: Destructured Objects as Parameters.

(more…)

Babel Plugin to Add Function Names

Have you ever been working with those sweet new ES6 arrow functions, run into a problem, and noticed that now your stack trace is all anonymous functions? Yeah, that's not so great. That's why this Babel plugin is so useful. You can add names to your ES6 arrow functions, and it makes debugging a lot more simple.

What the heck is the event loop anyway?

In 2014, Philip Roberts gave a great talk at JSConf EU, walking through the event loop and breaking down what JavaScript is doing under the hood for those of us without CS degrees. I came across this talk the other day in my Twitter stream, and really enjoyed it. Even though it's a couple years old, it has stood the test of time and remains a great resource.

10k Apart

This year is An Event Apart's 10th anniversary. In order to celebrate, they are putting on competition called 10K Apart where people show off what can be accomplished in 10kB of data. This isn't a new competetion- its first genesis has been a project called 5k way back in 2000-2002. This year is sponsored by Microsoft Edge and they're giving away $10K in prizes to competitors. The judge panel has top professionals from web development, talented people like Sara Soueidan, Lara Hogan, Mat Marquis, Rachel Andrew and Heydon Pickering.

This competition is incredibly exciting as it focuses on things we as web developers can all benefit from thinking about. In terms of progressive enhancement, what is a usable baseline? How can we cleverly make our sites usable for a wide range of people? Aside from the clear benefit for performance, this contest focuses its attention on accessibility, designing for performance, and interesting innovations in the field.

Enter the contest! It should be great fun. My contribution was the SVG animation that you see on the homepage of the site (click the handle to watch it go again), created in less than 10kB with SVG and GreenSock, with particular help in SVG optimization from SVGOMG. Aaron Gustafson of Microsoft Edge has been hard at work on development for the site and everything you see there is under 10kB, as well, which is pretty rad.

High Performance SVGs

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.

(more…)

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag