jQueryTO 2013 Highlights

What a weekend! jQueryTO just wrapped up in my hometown of Toronto, and though it was my first ever developer conference and I don’t have anything to compare it to, I’m pretty sure all that attended would agree it was AWESOME. I learned more than I’d ever be able to cover in one blog post, but here are some highlights of what I learned in some of my favourite talks:

The State Of jQuery — Dave Methvin

The conference kicked off with jQuery Foundation president Dave Methvin giving his ‘State of the Union’ address about jQuery in 2013, which was great timing, since jQuery 2.0 Beta 2 was just realeased on Friday. Key takeaways:

• jQuery 2.0 does not support IE 6, 7, or 8. It’s being developed alongside jQuery 1.x (currently at 1.9.1) and maintains an identical API. They’re not expecting people to be using jQuery 2.x in production any time soon, but they really would like people to test out the beta!
• I’d somehow never heard of the newish jQuery Migrate Plugin, which can detect and restore deprecated features that are being referenced in your code when you’re running 1.9. Though intended as a tool to help you bring your code up to date with jQuery 1.9.x, it will also just patch in missing functionality to save the day if you’re *gasp* using deprecated functionality like .live() and $.browser (but you're not, right?)
• jQuery now supports modularized custom builds that can get you down to just 17kb if you can live without Sizzle, animations, event aliases, and css. If you’re using plugins, don’t do this, as they most likely depend on something you might exclude.

That’s right, reject any module in our jQuery reality and substitute your own.
— Dave Methvin

Hardware Access and Device APIs with JavaScript and HTML5 — Wes Bos

Toronto JavaScript guru Wes Bos gave a fun talk about accessing hardware APIs on mobile devices using JavaScript and HTML5. He talked about speedometer, accelerometer, camera, and file access, and showed us how he built a super cool security/mail camera with a live feed to his computer using WebRTC, node.js, socket.io, and a Nexus S.

It was cool to see how easy it is to access device hardware these days, but my favourite part of Wes’ talk was how cleverly he managed to solve his first-world problem (home office in back of house, mail comes to front of house) using the technology he already had and knew. I’ve often thought about attempting this kind of project myself, but always thought I’d need to obtain an Arduino and learn C. Now I’m planning on turning my old Galaxy S into a next-bus-display in my kitchen using my local transit system’s API.

Check out the HackPad and the slides

Bower and Grunt

Conveniently, after I spent Friday playing around with Yeoman, I attended two talks about two of Yeoman’s main tools: Ralph Holzmann of Twitter talked about Bower and other client-side package managers, and Dan Heberden gave a talk about Grunt for running tasks. I was already leaning towards trying out these tools for some of my projects, but now I’m more solidly convinced and feel like I have a good starting point.

Awesome Chrome Dev Tools

Paul Irish’s highly-anticipated “Front-end Dispora 2013” talk covered a lot of ground, from CSS selector optimization (hint: don’t bother) to Chrome’s new requestAutocomplete() feature. My favourite part of his talk was watching him demo some awesome new and not-so-new features in Chrome's dev tools (most only present in Canary). Some favourites:

• He didn’t seem to think it was a huge deal, but the ‘un-minify’ button got a huge reaction from the crowd, and I’m pretty excited about it.

[caption id=”attachment_1942" align=”aligncenter” width=”430"]

This button un-minifies production code![/caption]

• Pressing H when you have a DOM element selected in the web inspector will toggle visibility:hidden for the element. This feature is actually present in Chrome Stable, and I'm sure it's going to be super handy
• Pressing ? brings up a list of keyboard shortcuts for dev tools, as well as links to settings
• Check out the ‘Overrides’ settings: you can play with user agent, as well as set screen resolution and orientation, override geolocation, emulate CSS media types, and emulate touch events with click
• Enable dev tools experiments by heading to about://flags, then pick which experiments to try from dev tools settings.
• Cool dev tool experiment: Snippets. Snippets gives you a multi-line console to run code within your browser and lets you create and save various named scripts. Once you’ve enabled Snippets support, you can access your snippets from the Sources panel, in the Snippets tab. Right-click to create a new snippet, then just click ‘Run’ to run it. Save a snippet with CMD+S from within the editor. You can also run single lines of code within a snippet by highlighting the line, right-clicking, and selecting “Evaluate in Console”. Sweet!

[caption id=”attachment_1954" align=”aligncenter” width=”600"]

Create and run multi-line scripts from the browser using Snippets[/caption]

• Another experiment he went over was Inspect Canvas. Enable this experimet from dev tools settings, then head over to the Profiles panel and select “Capture Canvas Frame” and click “Start”. The resulting trace log gives you a play-by-play of all the canvas calls recorded and lets you replay them step-by-step.

[caption id=”attachment_1955" align=”aligncenter” width=”600"]

Inspecting the canvas of a shooting-stars experiment I did.[/caption]

Gone in 60 Frames Per Second — Addy Osmani

Addy Osmani’s talk about framerates, scrolling performance, and paint/repaint times was worth the price of admission itself, and the many audible gasps and ‘wow’s from the audience suggest I’m not the only developer whose mind was blown. This talk was a huge eye-opener and will definitely change the way I approach performance. Some key points:

• Framerate is extermely important not only to site usability and the perception of speed, but also to user engagement. A framerate of about 60 frames per second creates the appearance of a seamless, smooth experience, while lower framerates give you the appearance of ‘jank’, where you can see frames changing. Facebook did tests with lowering the framerate of their native iOS app, and saw user engagement plummet.
• Framerates tend to be dramatically lower on mobile devices, so if you’re hovering just below 60 frames per second on desktop, you’re likely under on mobile.
• Chrome has an advanced selection of tools for visualizing and monitoring framerate, go to the Timeline panel, select Frames, and hit record for a couple seconds. Scroll up and down a bunch to record behaviour, then check out the results.
• In the resulting graph, tall, coloured bars indicate your expensive processes. Click on a frame to see what’s going on, and drill down through the listed events to see what’s costing you. The most costly events are layout and paint/repaint. Things like resizing and decoding images, recalculating sizes and positions, using some CSS3 properties (box-shadow is shockingly brutal), putting too much JS functionality in your event handlers (especially scroll), and using position:fixed will really kill your framerate and scroll performance.

[caption id=”attachment_1956" align=”aligncenter” width=”600"]

This website’s main offenders: costly image resizes[/caption]

• When you can’t avoid things like fixed positioning, you can improve performance on desktop by forcing GPU acceleration with null-transform hacks like -webkit-transform: translateZ(0). There are a lot of caveats to doing this, and it won't help you out on mobile, but it can be handy in some cases.

Addy went over much, much more in his talk and covered exactly how to find and fix your performance problems in devtools, and you can read all about it in the slides for his presentation.The presentation was full of practical advice on debugging and improving performance, and I highly recommend you go through the slides.

Conclusion

There were many, many other awesome presentations, and I’d never be able to summarize all the valuable information I’ve absorbed over the weekend, but a huge thanks to all the presenters for sharing their vast knowledge. Slides and HackPads for all the presentations shold be posted on the jQueryTO website in a couple days, they’re all definitely worth a look.