Weeknotes: Coverage searches, JSConf, writing talks, browser performance & SVG

Hey, it's Jake here, bloggin' at'cha! I've just returned from JSConf with a serious case of the jetlags to find it's my turn to write the weeknotes. I'm literally nodding off as I write this.

We've launched a nice little feature on coverage search pages, the ability to filter by source site, eg here's a search for JavaScript slides specifically from speakerdeck.com. Hats off to Simon & Tom for their work on the faceted search stuff, there's loads more to come out of that.

JSConf US 2012

I've spent the last few days over at JSConf in Scotsdale, AZ. I arrived slightly tired and grumpy, but soon burned through that after a brilliant two days of breakfast burritos, tech/social/political debate, many beers and one mechanical bull. Oh, and if that wasn't enough, there was also this lot...

Keep an eye on our JSConf coverage page as more slide decks, notes & eventually videos are added. If I were to pick a couple that really got me thinking, one would be JavaScript on the GPU, as I'm fascinated yet not overly knowledgeable when it comes to GPU stuff. The other, Build Anything. I usually find HTML5 round-up talks a little samey, but this one shunned a lot of the 'shiny shiny' and instead looked at features often missed, such as drag & drop uploading (*stares at Twitter*).

The first session of the conference was simply titled "FIREWORKS", which had us all worried that Chris Williams hadn't quite considered the disruptive amount of sunlight on offer in Scottsdale. To everyone's surprise the fireworks came in the form of a Samsung Nexus S phone preloaded with a development build of Boot to Gecko. Currently, performance isn't good enough to inspire me to build apps on it, it's significantly slower than Firefox running on my Galaxy Nexus so I imagine it just hasn't been optimised yet. If they can make it perform like Safari on iOS (or better, even), I'll be all over it, because let's face it, the current performance of transitions on Android is abysmal in comparison. You might not need smooth flowing graphics to get excited about a new mobile platform, so don't let me deter you from checking it out.

Writing talks - a good excuse to learn something & write some code

I'd like to point out I fell asleep over my keyboard at this point, and woke up in my bed some 13 hours later. I guess I zombied my way there. Yey for jetlag!

I'm bad when it comes to finishing projects, I've normally seen a new shiny thing before then that I'd rather play with. I've found writing talks a great way to force myself to see something through, as the fear of a bad review is greater than my desire to go do something else. I take advantage of this fear by picking subjects that require a lot of experimentation and research, then try to be a bit ambitious with the slides.

With my fonts talk I took the opportunity to learn how font files are constructed and how different OSs use them, and I recorded myself building some of my slides in Deluxe Paint III on the Amiga. With my JSConf talk "AppCache: Douchebag", I'd already done most of the research for Lanyrd's mobile site and wrote it up as an article for A List Apart (which is working it's way through the ALA queue, stay tuned), so I had a bit more time to throw at my slides.

Take a look at what came up with in Chrome (preferably Chrome Canary), press space to advance slides. I built it to run locally, so it'll look a bit odd as images, fonts etc load in. You can also take a peek at the code driving that example. It's not something I expect other people to use, it was for my own entertainment. If you're looking for something to use yourself, you'd be much better off with something like Lea Verou's CSSS.

Performance wins

Aside from my first ever talk at @media, where I used PowerPoint (yes, I know), my previous slides have been custom-built in Flash/Adobe Air. Now, if you could just stop stabbing me with that pitchfork for a second, I'll explain myself. Back then I worked on a Windows box at home, but did bits of development on an Ubuntu laptop during my commute. I wanted something that worked on both, performed well for animation and gave me a lot of control. Flash was a great fit, and open source through the Flex compiler. I tried to switch to HTML a few times but the performance was terrible in comparison. That's no longer the case, bleeding-edge browsers have overtaken Flash in animation performance.

There are a few innovations that made this happen. IE9 showed everyone what could be done with hardware acceleration in the browser, I (by then a mac user) was shocked to see IE9 running in a VM kicking the arse of Chrome and Firefox running natively. Naturally the other browsers starting playing catchup, having to cater for multiple platforms. Firefox made some terrific gains, on Windows especially, and gave us requestAnimationFrame which attempts to sync redraws to screen refresh rates and processor activity. Chrome then steamed ahead and started running CSS transitions mostly on GFX hardware & adopted requestAnimationFrame, but the biggest win came when they mixed the two together.

In current stable versions of Chrome, CSS transforms happen on a 40hz timer, you can actually get smoother 60hz performance using requestAnimationFrame and changing the values yourself, this isn't the case in Chrome Canary. This gave me a cross-platform browser that had beyond-Flash graphical performance.

The API is an experiment and a little crazy. It's based around how I plan my talks, nested lists. I start out with vague sections, then nest in the details, then move things around if necessary. The nesting lets me keep track of what's detail and what's structure.

Why not use keynote/CSSS/whatever?

Building this whole thing was simply an excuse to get more experience with bleeding edge stuff that I don't get to play with during my day job. Sure, I don't need to build a slide deck to play with this stuff, but doing so gave me a real-world use-case and more importantly, a deadline that couldn't slip.

I have nothing against other side tools, I just, well, enjoy coding.

Progressive drawing with SVG

One of the things I got with Flash was easy vector animation. Trying to do something similar natively in the browser was a good excuse to play with SVG. In the example of my slide framework thing, an arrow is drawn to bring attention to part of a slide. I learned how to do progressive drawing from Carto:net. Their code is pretty horrible, but the technique is fascinating. A line is given the illusion of drawing progressively by making it a dashed line, where the length of the dash is the size of the line, and the length of the gap is the same. The offset of the dash is animated, pushing the dash into the line, and the gap out of the line. Here's the code I used to progressively draw SVG paths.

I was so entertained by this trick that I used it to progressively draw, pretty much everything, including a diagram explaining how Application Cache works. I created the diagram mostly using Inkscape, which is certainly from the Linux school of UX design, but gives you a lot of control over the SVG output as you draw.

A custom build of Chromium

If you had a look at the example you'll see it tries to launch a pop-up window. I move this popup onto my laptop screen for slide-by-slide notes. However, if you switch Chrome into fullscreen mode on OSX Lion, it does so natively, rendering the second screen unusable (FANKS APPLE). I could have switched to Firefox, which doesn't do Lion-native fullscreen, but I unhappy with the performance and figured native fullscreen would be in Firefox shortly.

Instead I built my own browser! Well, actually, I modified Chromium, essentially changing a line from if (isLion) to if (isLion && false), but I still felt I nerd-levelled up as I watched my laptop physically shaking and melting the table as it built Chromium.

My own build meant I had a bleeding edge browser that I could test and then rely upon on the day of my talk. I browsed through my talk in Chrome Canary on the morning of JSConf and it had a complete freak-out & crashed on one slide, so, err, glad that didn't happen on stage.

Right, I think I'll stop writing before this becomes any more self-indulgent than it already is. If you made this far, cheers & have a good weekend!


Time 7:17pm

Date 6th April 2012


Stay in the loop

Subscribe to our blog

Stay in the moment

Follow us on Twitter