Teaser text: “You can't be any geek off the street / gotta be handy with the [images] if you know what I mean, earn your keep!”
I took an unplanned sabbatical from the newsletter last week (aka flubbed a deadline) and it turns out that though the newsletter may stop, the news sure doesn’t! So let’s dig right in.
Google and Udacity have teamed up to produce an online responsive images course, and it is wonderful. There are videos. There are corny jokes. There is a gentle learning curve that starts with an introduction to the Chrome dev tools and ends with a fully-responsive blog that incorporates all of the myriad respimg use-cases. There are interactive quizzes that you complete in-browser via the dev tools. To date 1,528 people have signed up for the course, and if you or anyone you know wants to learn respimg from the ground up, you should, too.
Perhaps reading’s your thing? Jason Grigsby has been publishing a superb series of blog posts titled Responsive Images 101 which — in Jason’s clear, concise, and friendly style — introduce each piece of the respimg puzzle in perfectly grok-able chunks.
Hate videos and the written word? Never fear — Jason was just on episode 99 of The Web Ahead podcast, talking through the history, use-cases, and implementation-nitty-gritty of respimg with host Jen Simmons.
Watch, read, listen, and most importantly, do. ’Tis the year of implementing respimg. Let’s!
(The Guardian — with their 378 million monthly pageviews — just did!)
Picturefill was just updated to version 2.3. My favorite new thing: Picturefill now handles intrinsic densities the same way that the native implementations do. So even if you aren’t explicitly sizing your image via CSS, it’ll appear the same whether the respimg functionality is native or polyfilled. There’s more to the release than that, of course — check out the beta’s changelist for more details.
Speaking of updates, the official Wordpress respimg plugin was just updated, too. The new version uses the aforementioned Picturefill 2.3 and — in accordance with the recently-changed spec — always supplies a sizes.
And hey, do you use Django? Use this!
How about ImageMagick? Dave Newton just published the slides from his talk at the Toronto Web Performance Group, wherein he details the copious research that went into his incredible and indispensable Grunt-respimg plugin. Favorite slide: the liquid-rescale nightmare horror owl.
If you’re in Toronto and missed it, Dave will be presenting his ImageMagick talk again at the GTA PHP User Group on April 7th and at Full Stack Toronto on April 8th. And if you’re in Utah (which place — excepting their big lakes and and upcomming Dave Newton talks — is unlike Toronto in every concievable regard), Dave will be talking about Responsive Images generally at the OpenWest Conference in Provo on May 7th.
Speaking of talks, Yoav ran through his legendary slide deck at SmashingConf Oxford a couple of weeks ago. Here are some sketchnotes. Moar sketchnotes! Video soon, presumably.
And while we’re on the topic of Yoav, the off-main-thread, pre-parser-friendly CSS tokenizer that he wrote for picture and sizes has evolved into it’s final form as the new CSS parser for all of Blink. It brings an enormous 25% (!) layout-performance improvement to Blink users everywhere. I try not to trot this out very often, but: not bad for a community group.
See you in a couple of weeks!
—eric