Fascinating look at JavaScript parse and execution times across various devices. While these tests are based on jQuery, it gives a glaring insight into the variances your users will see depending on the device and browser they are using. Absolutely amazing!
With performance on our minds, Addy Osmani offers us Critical, a Grunt or Gulp process that takes screen sizes via a config, determines and outputs the CSS required to render the critical CSS for the screen size, then lets you push that critical CSS into the page’s mark-up to be delivered to the device; the rest of the CSS can then be delivered via an external stylesheet. Seriously freaking awesome!
And for more on optimizing for the critical path, check-out Ilya Grigorik‘s presentation on the subject!
As a kid I loved Saturday morning cartoons! (Who am I kidding, I still love cartoons!) So when I saw these Æsop’s Fables written using Google Fonts, I was it with a wave of nostalgia… Nice fonts, too. :-)
3 Essential Sublime Text Plugins for Node & JavaScript Developers
Not sure I’d say the slight highlighting differences make JavaScriptNext essential, but there’s no arguing that JSHint is, and JsFormat will certainly save me lots of trips to jsbeautifier.org…
Similarly, not sure I can throw my full support behind reduce (maybe because, even after the author’s description I still don’t get what it does), but you can’t argue with indexOf and filter. And if those five aren’t enough for you, be sure to check the full list of ES5 functions.
Ok, web components… I guess it’s time that I really dig in, right? And if you’re with me, Google is with us, offering a new Polymer / web components podcast series to help us all get going.
I’ve stated before that, no matter how basic the topic of an article, I will usually at least skim it, knowing that often I will find some nugget that I did not know before. As was the case with Dudley Storey‘s article on JS Comments. I mean, // single-line comment, /* multi-line comment */, done, right? Yes, but, I never knew why /*@cc_on @*/ was in the HTML5 Boilerplate opening html block and I also did not know that you can preserve some comments in most JS minifiers by using @preserve or @license. So there. ;-)
Yes, that Internet Explorer team, from that Microsoft company…
Having never been that big of a fan of parallax sites, okay, the coding is impressive, and I have seen some nifty “parlor-tricks”, but I’ve never really thought (most of) them all that practical. But sticking solely with fun, and impressive coding, parallax.js, throwing in gyroscope events (mimicked by mouse events on non-touch devices), is all that and more!
Standard HTML page transitions have always seems a bit abrupt to me, but the short-lived practice of using meta transitions is thankfully passé. But I think a sprinkle of Animsition could really make for an elegant-looking effect…
A basic intro to how to start planning for a RWD project. It can be a bit to wrap your head around if you’ve not done one before…
Going back to Addy again:
CSS Layout Debugger: A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page [with] a random (valid) CSS hex color.
Could be useful. He also links to pesticide.io, which uses a set color per tag type. Either could be useful for remote debugging.
At first this sounds great:
RWDPerf: Performance testing for Responsive web design websites
Then you read that the tests are based on emulation (what else could it do, I suppose). Still worth a look, I’d say.
`nother repo for you, `cause, you know, why not…
GifShot: JavaScript library that can create animated GIFs from media streams, videos, or images
And finally, who wants to go ride a roller coaster?
Happy reading,
Atg