Extreme JavaScript Performance video

The nice folks from JSConf.eu have posted more and more videos of the conference talks, and here’s my talk on Extreme JavaScript performance!
For reference, here are the talk slides, if you want to see an enlarged version/download them:

Finally, here’s a PDF (750k) of the slides, if you want to read it offline and/or in dead tree form, and there’s a Github Gist of the example code, so you can run it yourself.

Wish you have a happy holiday season & and write lots of fast JavaScript code in 2010! 🙂

Need JavaScript-fu? JavaScript Masterclass Philadelphia in January 2010

Need some JavaScript-fu? Tired of being stuck with not knowing what those magic framework functions do? Want to tweak your code for ultimate performance? Or a mad programming skillz boost for the new Year?

Come visit our full-day JavaScript Masterclass in Philadelphia, on Monday, January 25, 2010, at National Mechanics.

Amy Hoy, teacher extraordinaire and yours truly will show you how to really make JavaScript your bi, ah, strive towards JavaScript excellence.

There are just 20 seats (we like small classes where everyone gets to interact with us!), and we will sell out! We’d hate to hear from your that you wanted to attend but couldn’t grab a seat! 🙂

The course is framework-agnostic, so whether you use and love jQuery, Prototype, Scriptaculous, dojo, YUI or bare-bones JavaScript, you’ll walk away enthused with JavaScript knowledge, and can directly use it in your projects!

Book now and take advantage of our early bird rate of just $349. For that, you’ll get to participate in our full-day workshop plus a free copy of our JavaScript performance ebook “JavaScript Performance Rocks!” (if you already have it, you can gift it to someone else!). Plus we also excel in socializing, so yes, you can have beers with us! 🙂

Simplest Prototype & scripty Slideshow

Here’s a more extended version of my comment on Jonathan Snook’s post on the simplest jQuery Slideshow (good article!).

So here’s my version of the simplest slideshow (done in Prototype/script.aculo.us 1.8), compare to Jonathan’s version in jQuery.

I’ve optimized what’s going on by only fading on element at a time (versus a more processor-hungry crossfade).

The code:

setInterval(function(){
  var imgs = $$('.fadein img'), 
   visible = imgs.findAll(function(img){ return img.visible(); });
  if(visible.length>1) visible.last().fade({ duration: .3 });
    else imgs.last().appear({ duration: .3, 
      afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
}, 3000);

I don’t really like either my Prototype/scriptaculous nor the jQuery version (which seems too magic for my taste, plus it does two animations at the same time). The main issue with my code is that the CSS has to be reset after a cycle is complete, and this ends up to be quite complicated.

I guess it’s food for thought. 🙂

Sneak preview on scripty2 UI controls

So how’s scripty2 progressing? To give you some more insight than just “Very well, thank you”, here’s a status update.

Next to the big chunks for the effects engine which has been stable for quite a while now, and the support for multi-touch input (hat tip to Nokia), several additions are queued up, the most important being the “UI behaviours”/”controls” part.

A big Thank You! to Andrew Dupont for adding the first batch of controls goodness to scripty2, including buttons, dialogs, overlays, sliders, autocompleters, and yes, an accordion.

Try the scripty2 UI demos! (alpha version, so there are some kinks!)

Those controls are written with the super-nice Prototype class system and custom events, so they’re super-tweakable and make it a snap to create extensions and customized versions. More controls are in the works, and there should be a beta release this year (or grab the code from github).

They support full keyboard navigation and provide accessibility hooks through WAI-ARIA.

The best thing is that they’re compatible with Themeroller (from jQuery UI) themes! So you can just reuse/tweak existing themes very easily, plus scripty2 comes with a special scriptaculous theme, thanks to Samo Korošec.

Bonus– here are two new sightings of scripty2 in the wild:

• derStandard.at Express, experimental site by leading austrian newspaper Der Standard
• Ford Fusion 41, made by Amy and me

Enjoy, and hope you’ll build something cool with scripty2, too!

6 easy things you can do to improve your JavaScript runtime performance

Here are the slides from my “Extreme JavaScript Performance” talk that I gave at JSConf.eu on November 7 in Berlin.

I’m talking about 6 easy things you can do to improve your JavaScript runtime performance, ranging from simple things (function inlining) to some quite surprising findings on how JavaScript engines deal with loops.

There’s benchmarks for the four most common JavaScript engines, SpiderMonkey (Firefox 3.5), JavaScriptCore (Safari 4), JScript (Internet Explorer 8) and V8 (Google Chrome).

Be cautious however! Only do these optimizations if you have to, and, please, for the love of all the JavaScript gods, do not, ever, optimize prematurely. 🙂

Finally, here’s a PDF (750k) of the slides, if you want to read it offline and/or in dead tree form, and there’s a Github Gist of the example code, so you can run it yourself.

I welcome any comments, and findings you might have had with optimizing your JavaScript code.

A 50 Lines-of-Code JavaScript Animation Framework: Say Hello to Émile

At my talk at Fronteers, I introduced Émile, a JavaScript animation framework, that’s framework-agnostic, and just takes up about 50 lines of code. With Gzipping, and minification, it’s well under 1k in size. Consider it experimental, but most things you’d ever need are supported, supporting IE6 and up, and modern web browsers (Firefox, Safari, Chrome), of course.

Here’s the source, MIT-licensed and waiting for your patches and comments!

And here’s a Presentation (4MB PDF) about the details of the implementation, also a good starting point if you want to write your own animation framework. Enjoy!

Last chance for a seat at JavaScript Masterclass Berlin!

Just 6 days now until our second JavaScript Masterclass in Berlin, Germany! We’ve only two seats left so act fast if you’d like to join on in on a day of advanced JavaScript.

As a special treat for my readers, use coupon code readerluv for €30 off the regular price!

Head over to javascriptmasterclass.com to grab your ticket! 🙂

31 ways to speed up your JavaScript

Is your JavaScript slow JavaScript? Don’t fear, we’ve put up a handy dandy JavaScript performance checklist for you!

Grab the PDF for free at slowjavascript.com!

We’ll also be sending out free optimization tips and tricks from time to time– sign up to our newsletter to get them! These great tips and tricks are drawn straight from our not-free-but-totally-awesome book, JavaScript Performance Rocks! 🙂

Pinch, Twist, Zoom: Bringing Multitouch to a Browser Near You

I’ve been working this past year together with Nokia to bring multitouch APIs to a browser near you, and this is how it looks and feels like, in a little demo of just about 50 lines of JavaScript code:

Nokia’s new technology is the Starlight browser, a browser based on the Qt port of WebKit, and they’re working with the Mozilla community on the specifications. If you have the hardware/software needed (Windows 7 Multitouch-PC with latest drivers), grab the Starlight browser, and try for yourself. And it’s all open-source, so visit the Starlight open source project page to learn more about the modifications and enhancements to WebKit and grab the source.

scripty2 supports multiple API vendors for Multitouch events, and even provides a desktop emulation (click+drag to pan, shift+click+drag to scale and rotate)– so you can try this out even without having multitouch hardware at your disposal.

Currently the scripty2 API abstraction event supports Desktop emulation, Nokia Starlight and Apple iPhone Mobile Safari. With just one API, you can now multi-touch enable any web application easily, just check out the demos.

In a recent update to scripty2, I’ve also introduced automatic support for WebKit CSS transitions, so whenever scripty2 effects are used and CSS transitions are available, the effects engine will automatically do the right thing for you.

All in all, using this in your web sites or apps boils down to just a couple of lines of code:

$('element').observe('manipulate:update', function(event){
  $('element').transform(event.memo).setStyle({ 
    left: event.memo.panX+'px', top: event.memo.panY+'px'
  });
});

Note the manipulate:update event and the new Element#transform method.

It’s really exiciting to finally get this technology out, and I’d love your feedback, patches and of course see your demos or real-world apps that you build with it! And big thanks to the Team at Nokia for making this possible!

Again, here’s the demos, the scripty2 Multitouch documentation and more videos!

Instant Time Tracking from Git commit messages

We just launched something really awesome that just might change your way you think time tracking can be done. Personally, I think this is super-fricking-amazingly-awesome, not having to go through a GUI at all for tracking time, rather just adding a little bit of functionality to stuff you already do anyway.

So Freckle Time Tracking now comes with Github integration, which means you can instantly log time from Git commit messages when you push updates to Github.

Here’s how it works:

Log 15 minutes:

git commit -m "Remove some extra whitespace f:15"

Log 2 hours, 30 minutes:

git commit -m "reporting, add CSV export f:2.5"

When you git push to your freckle-enabled Github repository, Github will automatically contact freckle and log time for all commits that come with the “f:time” bit.

To set this up, first grab your freckle API token. This API key is available in freckle under “Settings & Tools” in the Integration (API) tab. You’ll need this API token in the next step, configuring your Github project– in your Github Project admin section, go to “Service Hooks” and select “freckle”, then fill in your freckle subdomain, the API token you just grabbed and then the Freckle project name you want to log time for in this Github project.

Once you’ve set this up, you can log time from your commits! freckle even links back to Github, to each individual commit (the little “github.com” link after the commit message). Users are mapped with their email addresses, so these need to be the same in both Github and freckle.

Which also means that you save a minute or so that you’d need to open up the freckle web app or timer every time you do this, and rather spend the time on doing what you love, coding and creating stuff.