Black Belt Coder

Have you heard of the Google AJAX Libraries API hosting service before?

From their website…

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries

Ignore that part about the google.load part, its really not necessary and just makes you include a JS file thats not really needed. The usage page provides URL’s for you to include on your page that load either the full version of the library or a YUI compressed version.

The important bits of the above quote really though are

• Content Distribution Network for one of your JS files, usually one of the larger files.
• As browsers have limits to the amount of files they can download from one domain, this allows the browser to download this file while it otherwise would have been waiting in the download queue.
• Files are cached based on their URL, and if you would have happened to already have visited a site that uses this same library and version of that library then you’ll skip downloading it on this site. Thats right, partial page caching, even if you’ve never visited the site.

After news of this feature broke, we had a large email chain at our office about putting one of the most core files for your site out of your control. Back and forth we went, even some snide remarks, but essentially theres no way around the trust issue. You can have your own backup plans for if the file isn’t included, but now your adding complexity for a relatively small gain, and at that point you might as well just include a local copy of the library and skip the Googl eAPI completely.

The Google API supports 5 (4 really) libraries that you can remote load this way.

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Though unfortunately MooTools is a little behind the times.  1.2 was announced on June 12th, thats a month and a half ago from the creation of this post and its still not in the Google API. I checked the other libraries and they are all up to date, but haven’t been updated since this service went live. So we don’t yet know if this is a service that will be going stale as time progresses.

So a while ago I posted about using the font CSS declaration to clean up your stylesheets a bit. I had been using the technique on a new project for the first time and it seemed to be working like a charm, till I did a quality check using Firefox.

So it turns out, it doesn’t work. Not only does the font-family not get inherited but any other rules you specified get ignored as well.

Super annoying.  So I did what any good citizen would do. I complained.

Bug: #448142

The great thing about FireFox is that if they decide to fix this issue, they can have it pushed to the general public of FireFox users and this issue could be eradicated in weeks time. So here’s hoping.

Yea its just that kinda day I guess.

There’s this video up at Method.com that is kind of an office montage, definitely worth checking out.

Also, I listed the San Francisco openings for Method in my sidebar on the right.

The Ajax Experience

So last year I went and was overwhelmed by how much a conference can help. Last year I was able to talk Daptiv my former company into sending me there as I hadn’t had a lot of interaction with the AJAX community outside of blogs and such. What took me by surprise was that after the conference it wasn’t the knowledge that I gained so much as the excitement and energy that I felt after words. It was like a mini generator for my programming spirit.

So I get to go again this year, really exited, yup. I was hoping it would be here in San Francisco as that’s where I am now, but well, they basically eliminated it in favor of Boston, so that is where I will be Sept 29th - Oct 2nd.

Flash Training

Before coming to Method I had no great interest in learning Flash, but now seeing what they do with it here, well, I’m stoked. Next week, I’ll be spending 3 days at AcademyX training learning all about Flash and ActionScript.

Projects

I’ve been posting up retrospectives of the projects I finish, but usually I can’t tell you about them when I’m working on them or about to start as they want to control the press for them. This time I figure I can tell you I’m going to be cleaning up some of the issues on Method.com. Its actually a very nice site to work on as its very simple, only 3-4 actual pages and mostly JavaScript goodness for the rest its pretty self-encompasing.

Process

I just finished a book called Managing Humans it is on my personal list of important books right next to Joel On Software’s books for understanding business and people. I’ve been trying to bring some of the wisdom from the book to day to day work here, but adoption is slow.

I’m finding though that I enjoy process just as much as programming, its refactoring chaos into order and that appeals to my anti-chaos brain very much.

The AlphaImageLoader, that wonderful little tool that allows us to do so many different things in our designs using transparency’s, multi-channel alpha channels and all at decent file sizes.  Not sure what I’m talking about still?

Try… ohh, this article from 24 ways. I’m not really to interested in describing the awesomeness of PNG’s when so many others have done it so well.

It is very important to know though that when using the AlphaImageLoader it will invalidate most if not all mouse events (I haven’t noticed any it doesn’t kill) on elements covered by the PNG loaded in the AlphaImageLoader.

The only work-around for this is that transparent regions are immune to this effect. As on the following image below, I made half the box below transparent by cutting out half of the blue gradient.

In this image, my name is encased in an H1 with an onclick event, but that event will only be fired if you clicked on the last 4 characters (RAY!) as they reside in the transparent portion.

I've talked about how you can use the asterisk to indicate a rule is for IE only but while doing some investigation for another issue I discovered another easy hack that could eliminate the need for things like conditional comments at all.

I was doing some investigation on transparent PNGs and had the following code

Live Example

This works in every browser but IE6 since it doesn't support PNG alpha channels without using the DirectX Filter property. So I'll need to turn off the background, and specify a filter property, preferably only applying to IE6. The code I ended up with was...

Live Example

The obvious extra syntax above is *- which is the hack to bypass the all the other browsers but IE 6. I'm jus ta lowely web developer not an IE/FF CSS parser expert so I'm not exactly sure why IE6 recognizes this and IE7.

Also, the asterisk isn't even necessary for this to work.

This works just as well, but I thought it prudent to add the asterisk to adhere to the hack used by the Yahoo guys, and prevent any conflicts with the browser specific properties popping up such as -moz-border-radius: 10px;.

Minor I know, but on my most recent project I decided I'd finally find out how to use this darn thing. I've always just gone with the following code.

At Method the designs are typically based on a single base font, with slightly varying fonts for headers and such, so that font is defined high in the inheritance tree to avoid duplication and to enable a single place to change if necessary. Which is why its not included in the above code.

To achieve the same thing with the font property you'll use the following line.

We have 4 parts here, and here are each of the values for those parts.

1. bold/normal - obviously just font-weight, but you'll need this part.
2. 12px - just font-size, you should know what to do with this.
3. /18px - the line-height, optional, you could omit this part if you don't care about the line height.
4. inherit - the font family, as we specify it higher in the tree, we don't want to specify it over and over, so we'll just have CSS figure it out for us.

Update: I made a silly mistake in specifying the font as auto instead of inherit. Its since been changed, but inherit uses the previously set font, auto uses what the browser default is.