SlickSpeed mirror with the latest versions of MooTools, jQuery, Prototype, and Dojo.

trickeries! SlickSpeed mirror, featuring the latest and greatest from MooTools, jQuery, Prototype, and Dojo.

I absolutely love the brilliant Valerio’s SlickSpeed, which is a speed/validity selectors test for Javascript frameworks.

It’s not so up to date at the moment, so I thought I would put one up on trickeries! with the latest and greatest from MooTools, jQuery, Prototype, and Dojo.

Everyone knows where my heart lies, however all of these libraries have grown by leaps and bounds. The teams behind these frameworks are truly amazing, and I tip my imaginary hat to each.

addthis
  1. Jacob Kennedy's gravatar

    Wow - not only is Slickspeed a great test of the frameworks, it’s also a great test of browser javascript performance.

    For me, on Firefox 3, Dojo is under 100ms for the entire test and is clearly the fastest. In IE (both 6 and 7), JQuery kicks butt.

    I’m a Mootools fan myself but this test was an excellent eye-opener.

  2. Jacob Kennedy's gravatar

    Oh yeah, my main point was that FF3 performance was a minimum of 3 times faster for all frameworks - amazing.

  3. atom's gravatar

    MooTools is running slowest because it no longer provides xpath support. The fact that it even manages to keep up is pretty amazing.

    The reason xpath support was removed is because not all browsers support it, and the decision was made to keep it as neat and clean as possible.

    You think FF3 is fast, you should check it out in th latest Safari, SquirrelFish whomps ass.

  4. Jacob Kennedy's gravatar

    You’re right, Safari was pretty good. The hands-down winner was Dojo on Opera 9.5 though. Dojo took only 32 ms to run the complete suite! That’s cooking with gas.

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

Javascript measurements, window.onload, and getimagesize

If you use a lot of javascript for animations / measurements (like I do), it can be very useful to include the width and the height of any images you use in your <img/> tags. This will make sure that width / height measurements taken by your javascript are accurate before waiting for all of the images to load. This leaves you free to run your code as soon as the dom is ready, without worrying about remeasuring once window.onload fires.

A teensy bit of php will take care of this for you if you do not already know the image size, or don’t care to look into it:

code!

<img alt="i am lazy" src="/images/myImage.jpg" <?php list($w,$h) = getimagesize($path_to_image); echo "width=\"$w\" height=\"$h\""; ?>/>
addthis

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

mootools rainbow toy: the trickeries! technicolor dream machine

the treickeries! technicolor dream machine

I got a little bored this weekend, and decided to make myself a toy to play with rainbows, and give it a stupid name.

There is actually some pretty cool stuff going on, it is written in javascript(w/some sweet sweet mootools), and a little bit of php for automagic.

I wrote a class to make the rainbow, and one for the sliders you see. If you think either would be useful, they are included in the head.

addthis

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

Don’t fool yourself when cleaning input, Javascript is sneaky as hell.

User input must never be trusted. It is impossible to emphasize this enough. Please excuse me if I get emotional, it is a sensitive subject for me.


All web developers worth anything know this, but very often even the most experienced developer makes assumptions or simple mistakes that leave a dirty little hole which is ripe for pillaging.

I recently found a hole in an application which was caused by lazy / inadequate / ill-conceived input cleansing. The developers have been notified and will surely correct the problem shortly. I will release more detail regarding this when the issue has been resolved and a fix is in place. Of course, if you are a trusted dot-comrade I can fill you in before hand as requested. For everyone else, check out:

addthis

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

situational Javascript based on body ID

I know that this is not anything revolutionary or anything, but I found it very helpful when making this site, so I thought I would share.

By assigning the body element an ID, you can check it with Javascript, and then execute what you need to based on this condition, like so(wordpress example):

Some php, for the Wordpress template (in header.php):

code!

<?php
 
if(is_home()) //if we are at the wordpress "home"
	$location = 'home';
elseif(is_single() || is_page()) // if it is a single post or page
	$location = 'single';
elseif(is_some_strange_situation()) // a user function that test for something strange
	$location = 'strange';
else // otherwise, nothing special
	$location = 'default';
 
?>
<body id="<?php echo $location ?>">

Then some Javascript:

code!

<script type="text/javascript">
	switch(document.body.id){
		case 'home':
			runAtHomeOnly();
			break;
		case 'single':
			runOnSingleOnly();
			break;
		case 'strange':
			runOnStrangeOnly();
		default:
			runOtherwise();
			break;
	}
	runThisAlways();
 
	function runAtHomeOnly(){
		alert('You are home.');
	}
 
	function runOnSingleOnly(){
		alert('You are on a single post or page.');
	}
 
	function runOnStrangeOnly(){
		alert('You are somewhere strange.');
	}
 
	function runOtherwise(){
		alert('You are not home, at a single post or page, and you are not somewhere strange.');
	}
 
	function runThisAlways(){
		alert('I always run.');
	}
</script>

The example is a little verbose I know, but wanted to make sure my point was gotten ;-)

addthis

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.