From SVG viewbox animations to taking a look at Yeoman and Molten Leading, there’s an awful lot to read about this week. Let’s begin!

✻ Sarah Drasner digs into SVG’s viewBox attribute and shows us how to animate it in order to create interactive data visualizations.
 

✻ Yeoman is a generator that makes the setting-up process of a web project very simple and Noah Elboim explains how.

 Michał Sajnóg describes why and how he made an animation library called AOS which is specifically designed for animating elements when scrolling. Be sure to check out the demo for a good example of how it works in practice.

✻ Chris takes a look at how to customise a Sublime Text plugin in order to run multiple find and replace commands, which is pretty handy if you need to do this all the time.
 

✻ In Molten Leading in CSS, Chris breaks down the "triadic" relationship between font-size, line-height and the width of a block of text (or its measure). "Molten leading" is the practice of changing one value (say the font-size) and automatically changing the values of the other two so that they’re always in harmony.

✻ And last but not least, Robin Rendle has taken a look at some of the websites that have caught the team’s eye in a new monthly series called Websites We Like.
 

What we’ve been reading, listening and watching

A developer working at the team on BBC Sport, Shaun Bent, has written about what it takes to write performant, scalable CSS. There’s so much detailed information here that it’s difficult to condense, but this point struck a chord:
With 8 times less CSS we have been able to create an abstraction which is flexible enough to power every variation of [a] table we have across the site.
That’s impressive work, considering the sheer variety of data tables that are employed on the BBC website. What’s most interesting in this post is not necessarily about improving the codebase, but the work done to improve the community around that codebase. I think Shaun’s detailed work here reveals what happens when designers and developers work together, question best practices, and continue to learn from others in the field.
 
A note from the archives

The debate around SVG icons versus icon fonts has been around for quite some time. Although icon fonts appear to be slowly pushed aside for the many benefits of SVG, it might not be obvious why. 

Thankfully, we’ve made a guide that breaks it all down, but effectively the argument boils down to browser support: 
If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it.
 Inline SVG vs. Icon Font 

 
What have you learnt this week?

Chris Coyier: I am *really* excited about Sarah’s latest article about animating the viewBox in SVG. Not only is it a cool technique that has an unusual and not-yet-overused feel, there is much to learn from Sarah’s approach.

1) I like how she refers to it as “using the viewBox like a camera.” It allows you to literally play director and frame your scenes.

2) You might think of this technique as being littered with magic numbers. Like animating the viewBox to “219 302 249 399” or something, which you just guess and test to get to and would totally break if you change the SVG.

But, Sarah avoids this by cleverly using the .getBBox() method, which gives you the coordinates and size of anything within the SVG, meaning you can use those numbers to zoom/pan right to it! 

Reminds me of how Paul Lewis advocated the use of .getBoundingClientRect() to determine the location of elements in which to animate back to in his FLIP technique.

3) Using Greensock is also clever here. SVG animation and Greensock isn’t exactly rare, but I wouldn’t automatically assume it can animate an attribute as weird as viewBox. Fortunately it can, because as Sarah points out, “The cool thing about GreenSock is it can animate any two integers”.



Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list