Tuesday, January 6th, 2009
Category: JavaScript
, Library
Daniel Steigerwald told us about his labor of love: QEvent, a "powerful tiny extensible standalone event library". He provides this laundry-list of features:
* lightweight footprint
* no namespace pollution - everything is wrapped in obj.$QEvent
* normalizes the DOM event model
* work also with Javascript objects
* fixes common IE bugs including: all common used event properties, IE 2px bug http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning, fix many IE leaks, event handlers are FIFO executed
* prevents repeated registration of same type and listener
* 'this' in listeners references to object or element itself
* fixes window 'beforeunload' issue (doesn't work in Opera)
* fixes window 'unload' (must be removed by itself)
* fixes focus and blur events
* DOM events are more extendable: event keys, event objects ( event.myCustomFn() ), custom events
* firing events works for elements
* toggled and flashed events (removed after first fire)
* tested on (IE6-7, Firefox2/3, Safari, Opera, Chrome)
Isn't event sugar a solved problem? Daniel replies:
* Occasionally, I need a lightweight library that will work with other frameworks. Frameworks such as jQuery which don't extend the native prototype and therefor have no compatibility issues are not modular enough to meet my needs.
* No event implementation is perfect. So I took my own approach to the issue and created my dream package.
* This implementation could serve as a model for others.
The syntax is straight-forward:
JAVASCRIPT:
-
QEvent.add(window, 'domready', function() { ... } );
-
-
// custom event
-
QEvent.add(kitty, 'purr', onKittyPurr);
-
QEvent.fire(kitty, 'purr', 'Sandy');
-
-
QEvent.remove(document.getElementById('testKeyEnter'), 'keyenter', keyenter);
Category: Browsers, JavaScript, Performance
Nicholas Zakas decided to dive deep on everyone's favorite sign that you've done something wrong:
Few web developers truly understand what triggers the long-running script dialog in various browsers, including myself. So I decided to sit down and figure out under what circumstances you’ll see this dialog. There are basically two different ways of determining that a script is long-running. First is by tracking how many statements have been executed and second is by timing how long the script takes to execute. Not surprisingly, the approach each browser takes is slightly different.
He finds that Internet Explorer's warning is based on total statements executed (5 million, and since it's Windows, you can change it via the Registry), Firefox and Safari time the actual script time (10 and 5 seconds, respectively), Chrome is a bit of a mystery, and Opera doesn't appear to have such a mechanism (and interestingly, appears to put its UI on a different thread than page rendering / script execution).
Regardless of the details, the lesson remains the same (again quoting from Nicholas' post):
Brendan Eich, creator of JavaScript, is quoted as saying, “[JavaScript] that executes in whole seconds is probably doing something wrong…” My personal threshold is actually much smaller: no script should take longer than 100ms to execute on any browser at any time. If it takes any longer than that, the processing must be split up into smaller chunks.
An interesting read!
Monday, December 29th, 2008
Category: JavaScript, Server
Paul Querna wrote a fun little Apache module called mod_v8 that offers a proof of concept of Yet Another Server Side JavaScript:
After using Rhino for server side javascript at work, I can say I somewhat like server side javascript. Others like Steve were already convinced a long time ago.
However, I don’t really like being tied into the whole Java world because of it.
When Google released their v8 Javascript Engine earlier this year, I always wanted to build an Apache Module for it.
This afternoon I had some time, and so I created mod_v8.
It doesn’t do much beyond a Hello World right now, but it is as simple as this:
ap.write("Hello World!");
I’m not sure if I will spend time making it a proper project, I really want to spend more time on making httpd 2.4 before getting too distracted with shiny things….
Having an Apache module that "was just there" would be big for SSJS. V8 is great, but we would also need a really good standard library that would allow us to do things (Rhino can tie into Java, Jaxer ties into Mozilla, Java, and its own APIs, etc).
Paul also posted on how mod_lua is now in Apache trunk.
Wednesday, December 24th, 2008
Category: JavaScript
JAVASCRIPT:
-
-
for (var i = 0; i <0x02000000; ++i) {
-
d = 0x55555555;
-
d++; d++; d++; d++; d++;
-
}
-
This code runs 250 times faster when the JIT is enabled in a Firefox with TraceMonkey available.
This is just one minor thing that Jesse Ruderman has been able to find as he helps out the TraceMonkey team with his jsfunfuzz JavaScript fuzzer.
He has found many bugs, and those that would have been hard to track down:
Andreas Gal commented that each fuzz-generated testcase saved him nearly a day of debugging: otherwise, he'd probably have to tease a testcase out of a misbehaving complex web page. Encouraged by his comment, I looked for additional ways to help the TraceMonkey team.
He then put his fuzzer to work to find differences between Spidermonkey and JavaScriptCore. Interesting stuff.
Tuesday, December 23rd, 2008
Category: JavaScript, Qooxdoo
Following close up on the 0.8 release, the Qooxdoo team wrote in to let us know about their new 0.8.1 release:
It's a maintenance and bug fix
release, with 250+ bugs fixed, but also some interesting novelties
especially on the tooling and application side.
Among the interesting changes is a first step towards a new data binding framework. But the real news is a new Playground application that lets you play with Qooxdoo and see the results live in the browser, complete with syntax highlighting!
They use the excellent CodeMirror project to power the JavaScript code editor. Very cool way to get to know the JS APIs.
Category: JSON, JavaScript, Usability, Utility
In our age of information and technology, there isn't as much mystery as there used to be. In that sense, short URLs (e.g., tinyurl.com/123) can be fun! Who knows where you'll wind up.
Some folks aren't as happy with uncertainty in hyperlinking; one of them, Darragh Curran, wrote in to tell us about his project: Long URL Please.
Long URL please (http://www.longurlplease.com) is a JSON webservice to
efficiently convert short urls (tinyurl.com/123) to their originals.
I've got a simple jquery plugin to take advantage of it, and a firefox
plugin. It's running on google app engine.
Darragh hates short URLs so much he's offering to contribute his time to help wipe them off the face of the web:
I'd love to see it used in apps like twhirl/tweetdeck/twitterific, on
microblogging sites and pretty much anywhere that's got lots of short
urls. In that respect I'll happily contribute my time to help those
people/teams integrate with the service.
There's even a bookmarklet.
Category: JavaScript
Thomas has been busy working on freckle, but has jumped back onto his blog again to give us some short tips:
Preventing console.log breakage
We have all been there. After a serious Firebug session, you forget to take out the console statements. Or, maybe you like to keep them in for the future. To be sure, you can redefine some no-ops:
JAVASCRIPT:
-
-
f(window['console'] === undefined)
-
window.console = { log: Prototype.emptyFunction };
-
To not rely on Prototype, you can simply log: function() {}.
Kangax then shared his approach:
JAVASCRIPT:
-
-
(function(__global){
-
if (!__global.console || (__global.console && !__global.console.log)) {
-
__global.console = {
-
log: (__global.opera && __global.opera.postError)
-
? __global.opera.postError
-
: function(){ }
-
}
-
}
-
})(this);
-
Staying DRY with some Curry
In this tip, Thomas talks about how he likes to use a little curry to reuse the same code in different ways.
For example, taking a generic page turner:
JAVASCRIPT:
-
-
// pages are numbered from 1 to 10
-
var currentPage = 1, pageCount = 10;
-
-
function turnPage(dir){
-
currentPage += dir || 0;
-
-
currentPage =
-
(currentPage == 0) ? pageCount :
-
(currentPage == pageCount+1) ? 1 : currentPage;
-
-
// here we would do whatever is necessary to render
-
}
-
and currying some helpers:
JAVASCRIPT:
-
-
var nextPage = turnPage.curry(1),
-
previousPage = turnPage.curry(-1);
-
Although the examples are using Prototype, other libraries have the equivalent curry power.
Monday, December 22nd, 2008
Category: JavaScript
From way back in 1987 comes a quote that summarizes how many feel about the state of object-oriented programming:
Multiple inheritance is good, but there is no good way to do it.
Joey Hurst wrote in to point us to his pet project--JSTraits--which aims to address this issue in JavaScript by providing an implementation of "traits". He defines traits in the following way:
Despite the undisputed prominence of inheritance as the fundamental reuse mechanism in object-oriented programming languages, the main variants — single inheritance, multiple inheritance, prototype inheritance and mixin inheritance — all suffer from conceptual and practical problems. This project provides a Javascript implementation of traits, a simple compositional model for structuring object-oriented programs. A trait is essentially a group of pure methods that serves as a building block for classes and is a primitive unit of code reuse. In this model, classes are composed from a set of traits by specifying glue code that connects the traits together and accesses the necessary state.
And now, the code. Here's an example of defining a trait using JSTrait:
JAVASCRIPT:
-
var TComparable = Trait.define({
-
-
uses: [TEquality], // requires equalTo, provides notEqualTo
-
-
requires: ['lessThan'],
-
methods: {
-
-
lessThanOrEqualTo: function(other) {
-
-
return this.lessThan(other) || this.equalTo(other);
-
-
},
-
greaterThan: function(other) {
-
-
return !this.lessThenOrEqualTo(other);
-
-
},
-
greaterThanOrEqualTo: function(other) {
-
-
return !this.lessThan(other);
-
-
},
-
compare: function(other) {
-
-
if (this.lessThan(other)) return -1;
-
-
if (this.equalTo(other)) return 0;
-
-
return 1;
-
}
-
}
-
-
});
And here's an example of using the trait in a class:
JAVASCRIPT:
-
var GardenGnome = Class.define({
-
-
superclass: LawnOrnament,
-
uses: TComparable,
-
-
members: {
-
init: function(girth) {
-
-
// use the natural unit of measurement for garden gnomes, girth
-
this.girth = girth;
-
-
},
-
equalTo: function(other) {
-
-
return this.girth === other.girth;
-
-
},
-
lessThan: function(other) {
-
-
return this.girth <other.girth;
-
-
}
-
}
-
});
What do you think of traits? The project page has a bit more documentation, including more info on the project's motivation, a synopsis of traits, and more information on traits themselves.
Category: JavaScript, Library, jQuery
Adrien Friggeri has taken the music player ui and spent some time to create a really nice gestures library that allows you to add mouse gestures to a web page, supports complex (i.e. sequences of) gestures and provides visual feedback through the use of a canvas element.
Example code looks like this:
JAVASCRIPT:
-
-
// initialize the engine, inactive by default and set the trace color to red
-
$.gestures.init({active:false,color:'#ff0000'});
-
-
// adds a new gesture : Down
-
$.gestures.register('D', function() {
-
alert('down !');
-
});
-
-
// a more complex gesture : Down, Left, Up, Right
-
$.gestures.register('DLUR', function() {
-
alert('this is a rectangle, no ?');
-
});
-
-
// you can log unknown gestures :
-
$.gestures.error(function(gesture) {
-
alert("oops, I don't understand what \""+gesture+"\" means");
-
});
-
-
// useful keyboard tricks :
-
$(window).keydown(function(e) {
-
if ($.gestures.active() && e.which==27) {
-
// disable capture when user presses ESC
-
$.gestures.disable();
-
} else if (!$.gestures.active() && e.which==17) {
-
// enable capture when CTRL is pressed
-
$.gestures.enable();
-
}
-
});
-
$(window).keyup(function(e) {
-
// disable capture when CTRL is not pressed
-
if ($.gestures.active() && e.which==17) {
-
$.gestures.disable();
-
}
-
});
-
Category: JavaScript
JAVASCRIPT:
-
-
Mimeparse.bestMatch(['application/xbel+xml', 'text/xml'], 'text/*;q=0.5,*/*; q=0.1');
-
The above code is from a JavaScript port of Joe Gregorio's mimeparse library that "provides basic functions for handling mime-types. It can handle matching mime-types against a list of media-ranges. See section 14.1 of the HTTP specification RFC 2616 for a complete explanation."
Using it you can do things such as:
I have a feeling that one day we will look around and realise that we actually have a JavaScript library after all, and that server side JavaScript can do the trick :)
