Sunday, March 22, 2009

Latest Freelance Website

(Unfortunately, the site is down - as of 2014. But this is the article and I will attach a screenshot once i find one)

The latest site,, is for a family friend who wanted to start a t-shirt business. I put up the first generation of the site. My goal was to have only javascript with a ratio of 10:3:1, which is beginning to be my new idea. In this case, I wanted no screen refreshes - so it required some intelligent image loading because I am relying 100% on PNG transparencies. Thus, it does not work in ie6, but that was an executive decision. I no longer support ie6.

The ratio is for every 1,000 lines of javascript (including comments and whitespace), there are about 250-300 lines of css, or less if you use more advanced selectors. Let's say 300 in case you have to be more verbose in the css. And 100 lines of html.

I know, it sounds crazy to have only 100 lines of html, but in this website, almost everything s a div. If you subtract the very basic page tags that every website has, there are only 59 lines of html.

I used to get the pngs as small as possible, the W3c validator to ensure xhtml compatibility, and i threw in google tracking, which of course ruins the validation, but i wanted it.

I also make heavy use of smart object loading, by adding the css in the head, the javascript in the bottom of the page (in a way that defers, and does not allow blocking).

I even created "shams" or what I call the scenario where you load in a lower resolution graphic for the main page (say 40k), and while the page is loading you load the higher res.

There is still too much waiting in my mind for non-cache users. Most of the waiting is for the images to load. I still have some logic to do in order to make this faster and smarter, but the difference here is in the style of loading. Like i said this website has no screen refreshes. I have to load everything at once... well, kind of. I have to load only what I need at first, then intelligently load the rest.

The actual code ratio in this case was 1,000 :: 380 :: 73

It is superfast in Chrome 1.0 and Safari 4, fast in Opera 9.6, Safari 3, IE 8, and moderately fast in firefox 3, IE7

I do not support ie6, and I did not test it in Firefox 2.0, Opera 9.5, Chrome 2.0 or other browsers yet.
The worst offender as usual was ie7. It created nasty artifacts using mooTools 1.2 effects to change opacity. It also is very slow anywhere opacity or transition effects are invoked. It also has a slower load perception since it has a different rendering scheme than firefox or safari.

The site was built using PHP on apache (very little php), javascript using JSON style, object dot notation, one global variable with closures. It uses mooTools 1.2 as a framework, and is xhtml compatible.

Friday, February 20, 2009

Select Box Factory 2.2j (improvements)

Note: the latest version is 2.2.1j, which allows for images and text in the dropdown at the same time, and allows images to appear in the toggle.

The improvements to 2.2j (also included in 2.2.1j) are explained below.

I've been tinkering with SelectBoxFactory (Help Guide) mainly because I have been getting
some feedback and want to provide some real world use cases. The tool did not come out of the box with any hooks to accept onChange events, and many people asked how they could "retrieve" the values of the dropdown.

The result is SelectBoxFactory 2.2... (or 2.2j, same thing for now - from now on always in jQuery unless someone needs it in mooTools). Its a modest improvement, but one that I think will enable more people to use it, and to me thats a more important change.

So what can you do? Based on code that is now in the internal.js file, the following examples are now available...

With selectBoxItemHook(), you can now write any code you want to run as soon as someone or some code selects an item in the select box. This applies to dropdowns and single-select items. Its very simple, but entirely critical, since this interface is not exposed to the external world. Now it is.

With gatherAllChoices() I show how you can use the method _gatherChoices(type) to collect values from a particular dropdown. Because you may have various data requirements, the type argument can be any delimiter, or "array" as text, or "json" as text. The output of selections will come in that format. The purpose of gatherAllChoices() is to show that you can create one place where all dropdowns on the screen are collected (say, as part of a form).

When you call externalClick, a new event on the dropdown, it will cause the dropdown to make a selection for you but it won't cause the dropdown to open and close, which it would do, thinking that a user was touching it. Its actually an important addition if you think about it. This way you can make programmatic calls using selectBoxItemChooser(), another demo. selectBoxItemChooser is an example of code you might write that will select items for you based on another component. (The example here is a month button on a calendar that when pressed, triggers selects the next month in the dropdown for the user).

This is just the start of the use cases, and it is small, but the changes i made to the codebase are powerful and should enable you to really take these to the next step. See the updated sections in the (Help Guide) for more information.