jQueryTO 2013: Highlights for Designers

My coworker from Healthx and I flew to Toronto’s first jQuery conference, jQueryTO (#jqueryto). I tried to choose designer-friendly sessions:

The State of jQuery

@davemethvin, President of the jQuery Foundation

The conference started with a meme-filled intro from Dave Methvin who introduced changes in jQuery 2.0 Beta 2 and celebrated the one-year anniversary of the jQuery Foundation.

Important updates included the discontinued support for jQuery 2.0 in IE versions 6–8 and modularized custom builds, similar to bootstraps theme builder where users can choose parts of the library. Methvin also cautioned developers to not use jquery-latest.js in live sites due to their tendency to break plugins with new updates.

Methvin encouraged the community to contribute by volunteering to dissect bug reports, write documentation, or give a donation at jQuery.com.

Hardware Access and Device APIs with JavaScript and HTML5

@wesbos, Freelance designer and developer in Toronto

Slides

My first session did not disappoint. Bos explored new hardware API technologies and showed the audience his steps for creating a speedometer, Instagram-like photo application and browser camera feed. His session was one of my favorites because he created each project just for fun.

Speedometer:

Bos created the mobile speedometer using only CSS and HTML, with one impressive element being the tick marks which were each slightly rotated with the transform attribute. Using the navigator.geolocation.getCurrentLocation() method, Bos could get speed in meters per second. He tested the speed by sneaking a look at his phone on a plane and getting a 399+ meters/second.

Crapstagram Photo Application:

The next experiment was uploading and editing photos directly in the browser using one file input element ( input[type=”file”]) and canvas. On iOS6, this input type brings up the mobile camera roll. After uploading and reading the file with JS Filereader, canvas handles the photo editing. With the success of Instagram, we can expect to see similar applications taking advantage of the browser.

Browser Camera Feed:

Bos’s last demo was used to solve an everyday problem: notification of the mail’s arrival. Bos used a camera, canvas, WebRTC, node.js, socket.io, and a Nexus S to creep on the unsuspecting mail man. These technologies created a 1–1 peer connection in the web browser without Flash.

If the image’s pixels changed, canvas captured the image. Not only did this work to see when the mail arrived, Bos could see if he had a package.

State of jQuery Mobile

@RedWolves (Ralph Whitbeck), Board member of the jQuery Project

Slides

“25% of the U.S. is mobile-only.”

After this session, I was asking myself why I hadn’t yet used jQuery Mobile on personal projects (although we currently use this for the Healthx mobile platform). The UI is gorgeous. Between jQuery Mobile and Bootstrap, my mobile functionality is covered. In addition, jQuery Mobile also has a theme-building application called Themeroller, which I plan to analyze the UX in a later post. If you are also unfamiliar with jQuery mobile, check out the slides for an overview of features and usage.

Submitting Bugs the Right Way

@tjvantoll, Developer at LiquidWeb

Slides

Vantoll spends time volunteering to help sort through jQuery bug reports. He shared some of his tips:

First, update to latest versions of plugins, libraries, and frameworks. Then, follow these steps to isolate the code that has a bug.

After all of this has been done to make the code as simple as possible, submit the bug report.

Gone in 60 Frames per Second

@addyosmani, Google Developer

Slides

Osmani’s session finished the day with no less than several shocked gasps from the crowd and showing up the Pinterest developers.

Each site should be at 60 frames per second and faster for mobile. Any slower, and user engagement drops, which was exactly the case for Facebook. Anything lower gives the appearance of jank, broken-looking animations. Some CSS properties are costly for loading time:

  • fixed background have large repaint costs

Osmani wanted to find the reason Pinterest had jank while scrolling. While using the Frames option on the Timeline tool in Dev Tools, he discovered box-shadow being rendered repeatedly was the problem. While looking at the recorded frames, using the Show Paint Rectangles and Show FPS Meter options in the Dev Tools options, which are located in the bottom right, can help show jankness. For information on using the Frames tool and optimizing web speed, visit jankfree.com.

For more information on the sessions I missed, see The Phuse’s article here.


Originally published at veerkampvisuals.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.