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.

Homework! Interface Design Basics for Developers

Here’s an awesome presentation on Interface Design Basics from Samo Korošec.

Some good reading and thinking material for the weekend! 🙂 And maybe helps to make the web a little bit more use- and beautiful!

Berlin JavaScript Master Class in November

Amy Hoy and I proudly present our second JavaScript Master Class, this time it’s right after JSConf.eu in Berlin, Germany, on November 9, 2009.

If you’re at the intermediate or advanced level in your JavaScript practice, now’s the best time to level up to expert– you will learn boatloads, whether you use Prototype, jQuery, Mootools, or just your own naked cleverness.

The day is half about JavaScript the language, with topics ranging from functional programming patterns, closures and anonymous functions, object-orientation and prototypes all the way to building domain-specific languages and APIs in JavaScript; and half about the ecosystem, encompassing code organization, getting deployment right, creating great documentation, and having proper unit testing in place.

Our full-day class is limited to 20 seats, so you get to to pick Amy and my brains to the fullest (and afterwards we’ll socialize over a beer or two!).

Head over to http://javascriptmasterclass.com/ to learn more and register!

PS, we’re expecting to sell out—and quick, too. We’d hate to hear from you that you wanted to come but didn’t get a seat in time, so if you want to attend, please don’t hesitate! Register early!