My new approach for today is sheer volume.

Using my test page from yesterday that has a 20 column by 1000 row table, with each cell having it’s own unique id and class.

I have now extended it to generate CSS in the head 1 style declaration for each cell, same as before the background is just red. This means that in the head of my test page I have 20,000 style declarations.

I am then able to make two versions of this file, one using the format:

and one where they are all:

All of the content is generated with PHP loops, so I ran the two test pages through my local apache and saved the generated HTML. I saved the two files to my desktop and then opened them in various browser.

Once open and loaded and refreshed them 3 times and recorded the results for IE6, IE7, Firefox 2 (osx), Firefox 3 (osx), Safari 3 and Opera.

I went through and ran it in all the above browsers and then collated the data. In case you’re curious, Opera 9 (osx) couldn’t even show the page, and would choke and crash, so I don’t have any data on them.

The results were rather interesting:

Which looks like:

The green bar is the average time that the page took to render when you use 20,000 direct class name css declarations, the blue is the same but using lots of descendant selectors with the class name (see the example above).

You can clearly see the trend that single class name declarations are faster. But what really amazed me was how much that seems to impact Safari and to a lesser degree IE7 more than Firefox. Firefox 3 running on a mac had probably a negligible difference (based on this being an average of 3 refreshes rather than hundreds of them).

I was also surprised that the impact on Safari is the reverse of what I expected. I expected the slow one to be as fast as the fast one on Firefox and the fast way to be an improvement. The reverse seems to be the case. Descendent selectors are a major slow down to the Safari browser, rather than single class declarations being a performance gain.

That is surprising to me, considering all of these tests were run on OSX (the IE tests were run in a memory starved Parallels image). We have to be careful doing browser to browser comparison, as the tests weren’t all conducted at the same time under the same circumstances.

Conclusion

The tests show that there is slow down using child selectors over direct class name declarations in IE6, IE7 and Safari 3. Safari 3 being the most impacted by descendant selectors. Firefox 2 has some impact, and Firefox 3 doesn’t seem to be impacted at all.

That said, this is a very extreme test, it is not often you’d have 20,000 class definitions in a single page or that all of them would use 4 levels of child selector.

That said it is something to be aware of and keep an eye on, and if you’re looking at ways to optimize css reduction of descendent selector usage might help.

If you’re interested in running the test, I have the two files as a ZIP for download (they upzip to 2+ megabyte HTML files, so I zipped them). Just run them locally and you can see the results at the top of the page.

The basis for the thinking is something Dave Hyatt mentioned in a Shaun Inman post. Basically that child selectors are ineffecient because they actually work right to left rather than left to right to find the element you’re referring to.

So this…

is allegedly considerably less efficient than…

Now I figured it would be interesting to see if I could throw together a quick test that might show this difference. Testing and benchmarking CSS is not something I’ve seen very much of, so I assumed it was either A: Virtually impossible, B: A silly idea, C: Boring, but that never stopped me before, so I headed to the whiteboard.

Thought Process

At the very top of the a HTML I would use Javascript to create a timestamp, this is the starting timer for everything.

I would then have a function on a setInterval so it loops, the function checks a dom element using getElementById, it checks to see if that node is there, if it is it checks to see if the node has the style applied to it, if it does it fires a new timestamp marks the difference between the start and the end and then writes that out (I wrote it out to the page, as I was initially using console.debug, but that’s not very cross browser compatible).

I then have 2 css declarations, one with lots of child selectors and one direct class reference.

I then have a 20 x 1000 table created using PHP loops.

The CSS is applied to two of the table cells. Next to each other.

The null hypothesis is that running these both in the same page, the child selector way will take longer to be seen as being “red” than the direct style.

The test can be viewed at:

http://test.jpsykes.com/cssParsing/test2.php

There is almost no difference. Funnily enough there’s a fairly consistent 7ms difference which I guess is either the time it takes to do the tests in order, or it’s the fact that the second node is further down the dom.

So no difference. Bit of an anti-climax.

Why is there no difference

I have a couple of ideas:

The test is fundamentally flawed in a way that’s not immediately obvious to me.

The two CSS that I’m comparing don’t display the issue, maybe I need different example.

Maybe the browser does everything CSS then renders the page, so 1 might be happening faster, I just can’t test it. (I’m going to make a different test where I have two pages with lots of each example and I test overall load time rather than individual node styling time).

Other stuff

One thing I did find that was interesting. During my testing and debugging I added an onload timestamp as well. I was getting the “Node is red” timestamp, before the onload. Which I thought was interesting.

More to come.

I wasn’t aware there was a vimeo public API.

I’m even more amazed, now I know there is one that there aren’t any “apps” for uploading videos to vimeo either in batches or from places like iphoto.

I know I for one will be looking at this (when I ever get any spare time - I should just get that surgery to stop sleeping) I was thinking drag and drop onto a Dashboard Widget to upload to your account. Nice and simple, just a way to dump stuff up there fast.

API looks really interesting, I’m always curious how “2.0″ public API’s handle authentication and the level of paranoia they display (are they a twitter with out in the open usernames and passwords, or a flickr with all the app based ket authentications.)

It seems Vimeo is following a similar approach to Flickr.

It’s the first one of these I’ve been to. Media-Hive was at last years when Greg went down to South Carolina. This year he, I and TJ are all going up. On Tuesday I’ll be part of the panel on the “Meet the Experts : Ajax and Flex”. I really don’t have much info on what this session will be, I’m assuming a fairly informal open Q&A type session, which I always enjoy (it’s rare to find a group of eager listeners when you want to talk about AJAX - just ask my wife, who always gets that “No really, I am trying to listen face”).

It’ll be a good couple of days up in Boston, get a meet up with a few past and present ATG folks who I haven’t seen in a while (from their international offices) and listen to some great presentations by some of the ecommerce industry leaders. I’m especially looking forward to Hung LeHong from Gartner’s talk about “The Store of 2012″, curious to see where they see the industry going. I’m also very sad that due to having to leave Tuesday evening (my parents are flying into the states from England for a visit) I’ll miss the closing session, which will include Laurence Toney, GM of Experience Management from Nike.

Greg and TJ will still be there, I’m taking my video recorder so hopefully the session organizers let us film and G & T can video it for me.

On that subject, if we are allowed to film, I’ll be adding the clips to vimeo and will post links here, just need to get permission first.

The aim was to try and replicate as much of the online UI experience as possible, so first task was getting Dojo playing nice with the dashcode setup (more on that in a later post). Once in I was able to use much of the JS from the hexday website, which uses the Dojo Color Picker widget for the picking UI.

It all seemed to be going well, until I discovered a small issue.

The Dojo color picker includes drag and drop support for the hue and the saturation pointers. You can click and and the color updates real time as you move about.

Clicking and dragging in a dashboard widget, starts you dragging the dashboard widget round the page (for repositioning).

I found an apple doc that detailed DND in webkit, including the fact that it’s available in Dashboard but it didn’t detail the issue, or a solution I was seeing. I almost tested the DND in Safari and it works great.

I’m hoping there is some hidden setting I can set, that makes an element in a dashboard widget no longer act as a drag point for widget repositioning. Unfortunately the dashboard widget docs are thin, and there is a real lack of online tutorials or blog posts on the subject (there are some gems, but not as many as I would expect).

So in case anyone out there, who happens upon this post and knows the answer, jump in and let me know what I need to be doing.

The other evening I was playing around with building a Dashboard widget for I Went Away, so that people could easily update their away message.

First pass through and first pass using dashcode, I found it all very easy going…until.

I had some simple AJAX code that pinged the I Went Away site and added a new status. Super easy, I was using the drga and drop code with some slight tweaks to make it more how I would do it.

Run a test, enter some data and ….nothing…

No error, no weird looking response, no failed, just nothing.

After a couple of hours of attempted debugging, tweaking, more debugging, using the OOTB dashcode Ajax, using other Ajax JavaScript, reaching the point of total failure and change of careers.

I find that you have to check a box in the dashcode interface that sets a plist setting that allow the dashboard widget you create to connect to the network.

Problem solved.

I’m really becoming a huge fan of things like dashcode. I’m hoping Apple moves even more in the direction of allow “apps” to be built for OSX using the dashcode, HTML, JavaScript and OS level code mix. It really does lower the entry level.

My next step is to play with xcode and ibuilder, and see if I can finish off my I Went Away screen saver. My total lack of objective C experience will no doubt frustrate me, but we’ll see how far I can get hacking tutorials and documentation together into combined code mutants.

It’s interesting to think about the why’s.

CD is obvious.

PHP is probably from all the cake baking I do.

SVN is Media-Hive’s and my personal versioning system of choice.

Source, updateClient, startJBoss, p4, export and ant are all from the builds we run in the work with ATG.

What does your’s look like, and why?

iwentaway.com

The whole idea stemmed from one morning running out for a quick Starbucks run I wanted to leave a note in case anyone came over to see where I was. In the end the fastest way I could find to show a big clear message, was to dive into firebug and add the message to a blank HTML page and set the font to 20em’s. With the browser window at the top of the stack, I was left with a big clear text message on my screen for anyone to see.

Now that struck me a very inefficient. So I picked up a chap domain, gathered up some CakePHP goodness and after 20 minutes of initial coding I was able to launch.

The idea is stupidly simple. You go to an easily remembered web page, type in a message hit enter and then leave in the knowledge that others will know where you are.

It also has the added bonus of a unique yet obscure url, that you can share, for example add it to your “on vacation” auto responder.

Of course as with all good plans it has a million holes. What if your screen saver comes on, what if someone doesn’t come over to your desk, what if they check your ichat status, etc, etc, but hey, 20 minutes of work is a great investment even if it’s used only a dozen times.

If anyone has any great ideas on additions I could make, I’m totally open to suggestions.

They are characteristically simple colour drawings which manage to capture a mood – whether of menace or anxiety or general seediness and invariably set in an exotic location – true to the writer’s work.

Hogarth was a prolific commercial artist and draftsman, he painted a huge range of locations and was well known for the volume of production.

I’m particularly a fan of “The Power and the Glory” and “Travel Without Maps” for there very simplistic cartoon’esque feel.

Penguin by Designers (page 109-111) has an interesting section of Panguin, Paul and Graham’s back and forth as Graham tried to get his books published without illustrations, apparently something that was all the rage and considered stylish.

With 17 of Greene’s novels in my possession, I only have another 11-12 to go to get a complete set (if you include the travel books, the plays you can double that number) - although that might take even longer considering there are clearly multiple versions of different Hogarth inllustrations of the same book - see the Burnt out Case examples, so much more collecting to go.

References:

http://archive.thisisyork.co.uk/2004/9/18/238412.html
http://www.brookgallery.co.uk/search.php?artist=32
http://en.wikipedia.org/wiki/List_of_books_by_Graham_Greene

Whilst researching my ongoing issue with Apple TV not remembering my Password, I came across a solution:

http://discussions.apple.com….

You have to login to the apple privacy settings and “Uncheck the box that says something about hiding your profile from searches.” Many thanks to vTwo for posting that solution.

Bingo, everything now works.