Archive for September, 2006

via ajaxian:

People really are obsessed with rounded corners aren’t they? If we had a simple way to express them in CSS, maybe then we would be writting JS libraries and CSS hacks to give us spikey corners or something :)

Well, the latest kid on the block is Transcorners, which is a mootools based rounded corners system.

via ajaxian:

CSS is pretty central to Ajax, and large Ajax projects often have a lot of CSS to deal with, so it’s worthwhile asking how to maintain all of it. Garrett Dimon’s Architecting CSS is a good set of advice for structuring your CSS files (from July, 2005; unearthed on Digg).

The article identifies three ways to organise your stylesheets:

• Archetype-Based A stylesheet for each class of page, e.g. homepage stylesheet, article stylesheet, etc.
• Page Element/Section-Based A stylesheet for each class of page section, e.g. header stylesheet, sidebar stylesheet.
• Tag-Based Similar to the previous approach, but based around tags, e.g. form stylesheet, table stylesheet.

Other topics include:

• Including stylesheets with @include
• Deciding how much to rely on selectors (Redundancy vs Dependency)
• Use of comments
• Use of !important
• Alphabetizing attributes to ensure you don’t forget any

CNET always returns response code 200 for it's pages, even when they are errors. This presents a problem for any ajax framework you might be using as your ajaxer will always think the page is returning 200, even if it's not.

I wrote a quick extention for the Mootools framework as part of my forthcoming release of the CNET framework that handles this problem for you and adds some functionality to Mootools ajax class.

This hasn't been QAed yet, so I may need to tweak it.

It adds responseIsSuccess() and responseIsFailure(), and finally it adds as an excepted parameter to be passed in an onFailure function that will execute it if it fails. Example usage:

This will be available on every page on Redball when the new framework launches.

Huh. So this was eaiser than I thought.

In the Download.com Watch List profile page we use the Behaviour library to define a bunch of functionality (er, I mean "I use..." as I wrote all this over a year ago). We're going to replace Prototype with our new framework (based mostly on Mootools). Behaviour will work in the environment, but it's 8K that I don't really want to keep around. So, what the hell, let's try and rewrite it with Mootools. Well, here it is:

...which compresses down to 425 703 Bytes. Not bad.

Update
Ok, so I rushed to press a little. This code didn't work when I put it into place. I fixed it, but that brought the file size up to 703 Bytes instead. Still, it's a 10X reduction...

Fantastic! Via ajaxian (of course):

Have you been bugged by IE background flicker?

Cristi Balan talked about the issue and the solution:

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

Cristi links to a blog posting by Dan Popa, who discovered the IE6 background image flicker fix. And while you're on Dan's site, check out a forensic analysis of the IE6 BackgroundImageCache command identifier.

A lightweight JavaScript / CSS crossfader that the author claims is "one hundredth of the size of the scriptaculous library..."

> Brand Spanking New

I've been working on a global library for cnet javascript standards and I've got my first crack at it ready. I'm going to spend some time in the coming weeks working on documentation and examples, but for those of you interested, here's a quick look at what's in the collection. | Read the rest »

So I'm working on a set of global javascript files for redball. I'll post more on this when I'm finished (hopefully including documentation and examples, but that might take me a while), but here's something I just whipped up that you might find useful.

I'm compressing all my javascript (so no extra spaces or comments) which means that debugging these things is going to be a pain. If you get an error on the live site and need to fix it, the debugging info you get out of your browser won't be that helpful in fixing things. On top of that, I don't want to have to edit a compressed file to debug it.

Previously, what I did was overwrote the compressed version with the non-compressed version to debug my stuff, but this is a pain if the code is on akami and you don't want to do a bunch of work to change that.

So I wrote up a little script that goes along with my dbug console wrapper for firebug (note the update comment below the post for the most recent code). Here's the function:

function dbugScripts(baseurl, libs){
	if(window.location.href.indexOf("debug=true")>0){
		for(i=0;i
");
		}
		return true;
	}
	return false;
}

Then, you go to your compressed libraries and you do this:

if(!dbugScripts("/the/location/of/my/scripts/",["script1.js","script2.js","etc"])){
	...all my compressed javascript goes here...
}

So what's this do? If you put "debug=true" into the query string of the page you're viewing (and wish to debug), then all the dbug.log statments (again, see my dbug console wrapper function) will go to the console.log AND all your compressed javascript files will be ignored, with the document instead using the non-compressed versions. Voila, easy debugging.

Have fun.

MooTools continues to impress me. Check out the Class.implement and Class.extend functionality in this great article from Cory Hudson (there are numerous code examples).

mootools implements a class inheritance scheme that is inspired by Dean Edwards' wonderful Base class. Creating a class is similar to Prototype, but now you don't ever have to think about the prototype object when you define the class...

...mootools supports multiple inheritance in a Ruby mixin style with the Class.implement() method. Using the implement method of an existing class, that class can inherit methods and properties from another class or object. Unlike Class.extend(), the implement method is called on the class you are modifying, not on the object being copied. This method can be used to support multiple inheritance.

And here's another article from Cory on MooTools numerous helpful utility functions:

The new mootools JavaScript framework has quickly impressed me with its design and usefulness. The library was clearly written to meet real programmers' needs while working in JavaScript. Just take a look at some of the new utility functions and methods it provides.

Note: This article covers functions and methods found in the Array.js and Function.js modules of mootools.

Here's a short little description of how to use labels, breaks, and continues to cut down on loop iterations and speed up your code.

Just a quick reminder that you can drastically cut down on loop iterations by using the break and continue commands, and that there is an option to label loops to allow nested loops to stop their parents from iterating.