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.

Thats right, the 4 monitor club.

I've heard it talked about a lot and based on the amount of multi-tasking I do, and the amount of screens I use on a consistent basis I knew I had to grow beyond the 2 I had previously.

I will be downgrading to 3 after today as 4 leaves me with no desk space and just isn't efficient. Plus nobody here has 3 and I figure if I go around with 4, people will get jealous.

Hardware

I originally wanted to do this because we had an old PCI NVidia card laying around, and recently some new monitors became free. So it seemed like a simple process. But when I went to put it all together, it turns out an NVidia card and an ATI card won't co-exist peacefully.

So off to NewEgg.com I go (my goto site for new hardware) and ordered up a new Video Card. Today I got it in the mail, and slapped it in.

I was absolutely amazed at this point, the computer booted up, the monitors did some turning on and off, and then all the monitors were working just as expected. I still needed to change the resolution and placement of the monitors, but I was just boggled that it took 0 setup after I plugged the card in.

Anyway

I'm stoked.

So the biggest project I've had at Method is the company website. It was essentially the first project I was handed when I arrived, and so I've basically been working on it from when I've moved down from Seattle till when I went to Hawaii for vacation with some small breaks for other little projects.

This site was an ultimate team project, with people taking up any responsibility that was necessary. Lots of times, each of us would be the only person on the project that day/week. The reason for the quality of this site is the talent of the team. For sure.

So this is the site, some of the cooler things out there.

The modules re-order as you resize the window. The idea is to not have any scroll bars, if you don't have enough space for all the modules, you get several pages of them.

I really like the the case study profiles, which show up once you click one of the case study modules. They give you an impressive flash slideshow. This actually uses some ActionScript / JavaScript integration. Fun stuff.

In the overlays with large blocks of text, it is automatically divided into 2 columns and then paged. This is just insanely hard, but eventually Brian Ross got it to work. He was very vigilant and it was a great last minute fix.

The site is almost 100% one page. There are some special pages we did as one offs because of time limitations, but the modules, and overlays all exist on one page that reloads data from the server as needed. This was my first project doing something so complex. Typically we didn't worry about back button issues in our ajax applications at Daptiv, but here being one page it was critical.

This site wasn't the epitome of Technical brilliance, it was more a lesson on what not to do in a lot of situations, but its not really appropriate of me to be so critical. Though here are some of the more high level criticisms.

* PHP isn't the language I would choose for something this complex. It interfaced well with the CMS, but its not something thats easily testable, or object oriented, which I would think is pretty important for a project of this site.

* I have to do a better job of managing large js code bases. The file just kept growing and growing, culminating in a rather large complex js file. There was a lot of rush rush coding here, and thus Refactoring went out the window. But I'm still not sure what the best solution is to this.

* For projects this big, a strong development process is not optional. 3 weeks, thats something you can keep in your head, 3 months, you gotta have something there for that.

Since this project, a lot of positive changes have occurred in the development team, its apparent the added experience from these large projects really are advancing our skills.

In the mean time, check out the site, its really cool!

A critique I received today.

You are just 1 prozac away from being a great programmer.

Those who know me are either completely agreeing with that statement, or are wondering what drugs he's taking.