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!

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!

Force-redraw DOM technique for WebKit-based browsers

Something I’ve tried when I had an issue with Safari 4 not properly layouting/rendering an element after setting a new value for its innerHTML:

element.style.webkitTransform = 'scale(1)';

This did the trick and should work with Safari, Chrome and other browsers that are based on WebKit.

If you need a more general solution for elements that don’t seem to render properly, try my text-node based trick.

Seems that browsers are a little bit too optimized, but as long as you can give them a nudge…

JavaScript Rocks! Performance ebook is final

Our book is ready for your download pleasure! And it’s packed full of info on all the tricks we use to make our apps and sites fast and snappy.

Co-written by Amy Hoy and me, it’s over 300 pages and is actually three books and our DOM Monster, a bookmarklet-based cross-browser performance evaluation tool.

Part 1: Dude, Where’s My Performance?

Get started with knowing what this is all about, why it is important and how to measure performance and master all the tools.

Part 2: Loadtime, or, The Land of Unicorn Tears

Loadtime is a sad time, a time of of enormous, slow-loading assets; of maxed-out request queues; of bloated, waddling DOMs. Of limp white screens. Most of the world’s worst web performance woes? They live and breed in Loadtime.

Part 3: Runtime, Cuz Tuning Loops Is Hardcore

See how to write slicker, sexier, faster JavaScript from the get-go. Micro-optimize without being premature. Learn the kinds of ridiculous optimization tactics that Gentoo tuner boys can only dream of. And yes, we’re teaching you how to unroll loops.

We’re totally framework-agnostic, so everything’s applicable to any and all JavaScript code out there! Whether you use Prototype, or jQuery or dojo, you’ll find that our tuning tricks can help speed things up!

And… introducing…. the… DOM Monster! See for yourself!

We’ve an introductory price for the first 500 copies we sell of $39, after that it will go up to $49!

P.S. After the great success of our JavaScript Master Class in Washington, DC, we’ve decided to do a Master Class in Europe, too. We’ll announce details soon!

Speaking at the European JavaScript Conference

Amy and I will do talks at JSConf.eu, the European JavaScript Conference, which will be held in Berlin on November 7 & 8. I’m really excited to be a part of this and to see that there is a JavaScript community forming in Europe!

My talk will be on Extreme JavaScript Performance and Amy will show you how to think outside the box and do a Hard Refresh: Not Just Another Lightbox.

Other speakers include John Resig of jQuery and Dion Almaer and Ben Galbraith from Ajaxian/Mozilla!

We hear that tickets are selling fast, and because it’s just €249 for the early bird ticket I wouldn’t think twice of attending. 🙂