We’ve just released the beta of the JavaScript performance book we’ve been writing on for a while (we is my wife Amy Hoy and me!).
Without further ado:
More than a hundred pages on JavaScript loading performance and optimization techniques
The DOM Monster, a bookmarklet-based DOM analyzer, that tells you about performance problems of your page (from the perspective of the DOM, not the the network)
Free updates (it’s still beta, but pretty much complete anyway!)
I really hope you enjoy the ebook, and that it contains tons of stuff that you can use. Again, no matter what kind of JavaScript framework you use, the techniques described are universally usable.
Personally, I’ll let the stream roll by on my second monitor while I’m writing up/testing some more things for Javascript Rocks! (mind you, the beta will be out tomorrow, so head over for your $5 discount while you can…).
The book will cover all sorts of topics around JavaScript performance, from perceptive loading performance all the way down to selecting between if and case statements.
It’s library/framework agnostic, so whether you use Prototype, jQuery, Mootools or any other libs, you’ll find that you’ll be able to provide faster-loading, better performing JavaScript to your users.
I’d like the web to be a better (and faster-loading!) place—and this ebook will help you get your sites literally up to speed with all the knowledge I’ve accumulated in years and years of web development and JavaScript programming.
So head over to http://javascriptrocks.com, sign up for the discount and you’ll soon will hold our beta release of the ebook in your (virtual) hands!
If you ever did some advanced DOM manipulation stuff, especially CSS-based animations, you might have run into situations where the browser just wouldn’t redraw an element correctly.
Here’s a little snippet for Prototype I use to force redraw in such situations:
Element.addMethods({
redraw: function(element){
element = $(element);
var n = document.createTextNode(' ');
element.appendChild(n);
(function(){n.parentNode.removeChild(n)}).defer();
return element;
}
});
The defer() call is interesting, as I needed to add it to fix some really weird redraw issues with WebKit nightlies. Obviously the rendering optimization in browsers have come a long way, so there might be even more tricky “force redraw” schemes necessary, depending on the browser and situation.
$('element_id').redraw();
I’d love to hear feedback from you if you have to use any such contraptions in your code.
An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.
Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.
$('element_id').defaultValueActsAsHint();
This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.
In freckle, we’ve extended this basic implementation a bit with some options (you can change the hint dynamically and pause this functionality)—i think these are pretty application-specific addition though, and I want to keep it simple, so it’s not in the open-source version (if there’s enough interest, I can go ahead and post the code).
The aerogel-weight mobile JavaScript framework, which also works great for Safari and Chrome extensions. The jQuery-compatible API makes it easy to pick up, and it's just 5k to 7k in size!
