the fruity and personal webpage of armin ronacher
Today in the daily wtf is the well known JavaScript parseInt behavior regarding octal numbers. I know that one, it’s old and not really a WTF. The only stupid thing in that is, that the error return value of parseInt is 0 rather than undefined or an exception. But what I found today by accident is this (tested with Firefox):
>>> eval("09")
9
>>> eval("0100")
64
>>> parseInt("09")
0
>>> parseInt("0100")
64
Now that’s a WTF ;-)
With the Web 2.0 movement JavaScript got a a second chance to show off its abilities. And the second life of JavaScript is certainly a lot more interesting with advanced features such as XML processing, DOM modification and the possibility to send HTTP requests from a script to the server loading data on the fly. Because JavaScript still has to suffer from some of its design mistakes and browser incompatibilities a bunch of JavaScript libraries were created over the last four years that not only fix those problems but also extend the JavaScript core with new functions and objects that make it fun to work with.
One of the most interesting libraries is definitely jQuery by John Resig. Because the author of sees JavaScript as functional language and uses “chaining” of calls to make code shorter. If you don’t know jQuery already but have used Prototype or similar JavaScript libraries you should absolutely try it out, the results are stunning as jQuery’s expressive and short statements make the code easy to understand and very compact. For web applications this is a huge advantage because less code makes pages load faster which often is more important than actual runtime performance.
And more important than a working and powerful library is a good documentation or a guide that is written in a way that makes readers understand the design principles to get the best results of a library.
The book “Learning jQuery” (Packt Publishing) is without doubt the best guide to jQuery so far. The examples in the book are useful, down-to-earth and written without any side effects. Whenever an example in the book might introduce side effects you are warned and shown how alternate solutions for slightly different situations may look like.
The book is organized into 10 chapters: in the quick start the reader is introduced to jQuery, but not JavaScript itself. It’s probably a good idea to read a JavaScript book first if you haven’t worked with JavaScript so far. However jQuery is somehow a language on its own and you can get started quickly with novice JavaScript skills too. The next few chapters cover everyday problem situations and possible solutions using jQuery. It’s very likely that often occurring problems are already covered in the book and the solutins require only minor modifications to fulfil specific requirements.
AJAX is of course covered too, although most of the examples are framework and scripting language independent. The few AJAX examples that require server-side content processing are implemented PHP, unfortunately the code quality of the PHP examples is rather bad, fortunately there are few of them.
The book also covers some of the more popular jQuery plugins like Dimensions, Interface and Form and a quick introduction to jQuery plugin development.
The appendix is also worth reading because it includes a bunch of useful links to JavaScript and web-development resources, development tools and also a short introduction to JavaScript closures and how to avoid memory leakage in internet explorer.
The only real negative aspect of the book is the font used for the source code examples. There is no visible difference between an uppercased “O” and zero (0). Also noteworthy is the price of $ 39.99 is quite pricey, but on the other hand you get more than 300 pages full of useful information and some of the money goes directly to the jQuery project.
Conclusion: If you’re interested in jQuery and need a good book for the first steps you should definitively have a look at “learning jQuery”. If you’re already an advanced user and you probably don’t find that much of new information in this book.
First of all, the Quality of the thumbnail is quite bad, at least by now (just tested in firefox). Furthermore it’s a bad idea to do thumbnailing on the clientside but it works.
function makeThumb(src, canvas, width, height) {
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.scale(
width / src.width,
height / src.height
);
ctx.drawImage(src, 0, 0);
}
src must be an Image, canvas a canvas element and width/height is the size of the resulting thumbnail. If you want to get the image data of the thumbnail for saving on the server or whatever, you can do canvas.toDataURL() which returns the data of the image as base64 version of a png.
Today I found this at reddit and was stunned by the way it was implemented. I now created a similar implementation, it’s just a little smaller, supports escaping and doesn’t use an evil delimiter hack and it also supports all of the ERB goodness including the leading-percent sign block support.
Example:
var template = new JSTemplate('\
<%# This is a nice little comment %>\
<p>Total number of users: <%= this.users.length %></p>\
<ul>\
<% each(this.users, function(user, idx) { %>\
<li>#<%= idx + 1 %> <%= escape(user) %></li>\
<% }) %>\
</ul>\
<p>Last updated on: <%= this.lastUpdate %>\
');
document.getElementById('output').innerHTML = template.render({
users: ['H4><0r', 'peter', 'anton'],
lastUpdate: new Date()
});
Available helper functions are each and escape, now guess what they do.
Sourcecode is here: jstemplates
Update: It can process ERB % statements now too.
Wohoo. John Resig about JavaScript 1.8. Some of the new things are on my wishlist for quite a long time :-)