Is it as fun as it used to be?

Archive for the ‘webapps’ Category

How To Destroy Page Rendering Performance Using Just Javascript and CSS

So. Did you know that a severe impact on browser rendering time can be caused by CSS and javascript not playing nicely together? Rendering on different browsers varies by a factor of about 20 times (or whatever factor you want). I sure didn’t know.

And I have a “solution.”

So what is the situation? Consider an actual page from a webapp I’m developing. In FireFox the page loads and renders in something around 0.6 seconds. Safari loads and renders the same page in 12 seconds. This is not a contrived example.

What’s involved on the page? It displays summary information about all of the users of the webapp. The test data has 119 users. It uses [Blueprint]( and the jQuery plugin [ListNav]( I recommend them both, very nice. [ListNav]( (check out the [demo pages]( allows for easy navigation through a long list. [Blueprint]( is a CSS framework for laying out a page using a grid (check it out, it has [demos]( too), handles typography, and generally helps you make a page look decent. Blueprint works with <div>s, and ListNav wraps them up in <ul>s. Each user is represented by five <div>s within a <ul>.

On Safari, by changing the number of <div>s for each user I get:

user < div>s render time
1 0.5
2 2
3 4.25
4 7.5
5 12
6 18
8 32

To cut it short, if I remove the link tag to the Blueprint screen.css file in the header, the page renders almost instantly, even with 8 divs — but it looks like crap. There are a lot of things that are not the problem (I was “busy”, let’s say), and I don’t really want to go into it.

A few moments of thinking… what if I delay the application of the BlueprintCSS file? A little googling and I found some code in a JavaScript Kit tutorial: [Dynamically loading an external JavaScript or CSS file](, which I simplified to:

function loadcssfile(filename){
  // thanks to
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);

$(document).ready(function() { var navOpts = { initLetter: 'a' };

                               loadcssfile("blueprint/screen.css") // use a real URL here

This is (obviously) in the jQuery document ready function.

And it worked! In Safari. Not so well in FireFox. Sigh. In FireFox, this caused a rendering effect: the unstyled content would flash on the screen before being being styled. So, back to the webapp, and check the user agent, and only do this trick for Safari. Well, hold on. It is actually any AppleWebKit based user agent — OmniWeb screws up too. There’s probably others. Anyway, about 0.3s in Safari, obviously no change in FireFox, and I’m happy enough for now.

It all came down to a single link element in the page’s header.


Written by hutch

December 30, 2008 at 1:24 pm

You Actually Have to Know Something Sometimes


Roy Fielding, Mr. REST himself, writes a nice article about REST APIs and how they must be hypertext driven. I thought this was a pretty good article, and that I’d use it in the future when trying to explain REST APIs.

Apparently, not everyone agrees. It sounds as though Roy had a little bit of grief which is outlined nicely in this followup article.

Understandably, Roy isn’t pleased.

As you may have noted, my last post seems to have hit a nerve in various communities, particularly with those who are convinced that REST means HTTP (because, well, that’s what they think it means) and that any attempt by me to describe REST with precision is just another elitist philosophical effort that won’t apply to those practical web developers who are just trying to get their javascript to work on more than one browser.

Apparently, I use words with too many syllables when comparing design trade-offs for network-based applications. I use too many general concepts, like hypertext, to describe REST instead of sticking to a concrete example, like HTML. I am supposed to tell them what they need to do, not how to think of the problem space. A few people even complained that my dissertation is too hard to read. Imagine that!

Oh dear.

In the very first comment Dorian Taylor says:

With all due respect, I think you’re continually going to encounter that contingent that is expecting the bullet list of instructions, or even lazier, the screencast of ultra-practical steps to make the baubles twirl on their displays. My only consolation is the notion that this is probably just a symptom of the industrial age’s death rattle, and it’s anomalous that this behaviour is even considered acceptable.

Well, I don’t know how “ultra-practical” this video is, but it *is* from Joe Gregorio. Nice to see what Joe looks like. Oh, and it’s quite informative too, of course.

UPDATE: REST is UnAmerican, David Ing I think.

It’s long been our belief that REST and Roy Fielding has been palling around with Hypermedia. He barely denies it. But, my friends, let me tell you that no washed up PhD dissertation will dictate our request/response. He says it, in his own words – he talks about ‘constraints’, he toys with the idea of a transfer of ‘state’. My friends, in these times of economic crisis we need less State involvement, not more. REST doesn’t understand. Let’s give state transition back to the hard working people of the USA. Enough with this hypermedia socialism.

Written by hutch

October 28, 2008 at 10:34 pm

Posted in Software, webapps

A Tempting Solution to Bothersome Browsers

Using this plugin, your MSIE users will see your website with a grayscale color
This plugin helps people moving away from Internet Explorer: it turns
the colors of your website to a grayscaled version.

You can get it here

UPDATE: This was an attempt at humour, even though this plugin is so tempting it hurts… Nah! I’m resolved! I’m going to use it somewhere!

Written by hutch

October 27, 2008 at 7:26 am

One of the Web’s Little Mysteries

Why do people think content management is not possible for static websites?

And another related mystery:

Why do people think dynamic site generation is superior to a static website even when the site does not allow for any kind of reader contribution?

And, I suppose if you know me, there’s a third mystery:

So… why on earth do you care Hutchison? Eh?

Well, maybe I’ll start with the last mystery. I do happen to care. For a couple of reasons.

First, it turns out that I’m biased. I’ve been working on a program called Raconteur for the last few years. Until recently I’ve been in denial, unable to admit that it is, in fact, a content management system — well, I’d admit it was like a CMS but would deny it was a CMS. This lead to painful and prematurely technical discussions of what it does, usually by explaining what it doesn’t do. Ever try to describe something by describing what it isn’t? Sigh.

So last week I think, I tried out the phrase “CMS for static websites”. Good grief! Saying that totally eliminated the need for any of that painful and frustrating conversation. What it did do was introduce a couple of questions, but they don’t come up until much later and when do they aren’t asked very hard (so to speak) — the person I’m talking to already knows the answer they just can’t quite believe it.

You know, sometimes I’m appalled how I miss the obvious. The only defence I’ll offer is that there are well over 100 people using Raconteur and not one of them saw this either.

Those questions that get asked later, after a little reflection and googling, lead to the first two mysteries.

The second reason I care about this is because of the unintended disservice done to the clients of those web professionals who hold the views with mysterious origin. I understand holding those views since they contributed to my denial that Raconteur is a CMS. But they are wrong!

A Fact: Raconteur provides a very comprehensive capability for building and maintaining a large static website that anyone would acknowledge is just like a CMS.

A Fact: Raconteur is not the only software that does this, though the club is very very small compared to the total number of CMSs out there. There are thousands upon thousands of commercial and open source CMSs, and some huge but unknown number of ‘home-built’ CMSs. I know of less than six that do what Raconteur does — I expect that there must be more, but I can’t find them, probably because they are overwhelmed by the other CMSs. [UPDATE: I had intended to link to one of our most interesting competitors: Big Medium]

A Fact: contrary to popular belief, static websites don’t get unmanageable at 20-50 pages. Raconteur’s very first live site was around 4000 pages, every last one of them static. Updates to the website can be made in minutes (if you are daring or foolish, you can do it in well less than a minute).

A Fact: static websites are the easiest, cheapest, and fastest way to deploy a website. How often do you get those three things at the same time?

A Fact: — well, this is really an opinion but I’m saying it’s a fact — most ‘dynamic’ websites out there would benefit by being static, and the rest may well benefit by separating the read-write part from the read-only part.

A Recommendation: think very hard about what ‘dynamic’ and ‘static’ mean, be especially alert to logical conclusions being drawn by inadvertently using synonyms of those two words (this is where I think the second mystery originates).

I’ll go into a few more aspects of this later.

This is going to sound like an advertisement, well maybe it is kind of: Raconteur is in production, though currently most people come to it by word-of-mouth, and every one of them knows that they are ‘early adopters’ and what that means. It isn’t really in ‘stealth’ mode, more like a silent presence. The documentation is, at best, sparse. Even so there are more than 100 websites using it. If you want to know more we’d be more than happy to talk to you. We expect to have the documentation completed sometime in August, at which point we’ll be opening Raconteur to a wider audience.

Written by hutch

August 3, 2007 at 11:37 am

Posted in Raconteur™, Ruby, webapps

Email tricks, that might solve a few webapp problems

So, I got an email message this morning from CIO magazine. They wanted to do a kind of survey while renewing my subscription. They embedded a form in the email message, that I was able to do form-editing-things to. When done, press submit, and my email handler ( on OS X) asked my browser to handle it and it fired the form off.

The form uses GET as its method rather than POST. This might be important?

I *did not know* you could do this, and I never really thought of it before. I don’t normally like HTML in email, but maybe I’ll reconsider.

My company has a webapp, Raconteur, that needs to get people to do things asynchronously. Sending a form in an email message might be a really handy trick. I suppose that not all browsers can do this, so I’ll need a link of some sort as well, but still…

Written by hutch

July 20, 2007 at 7:53 am

Want Haml? Stuck using an old version of activesupport?

Then this is what you need to do (if you haven’t already figured this out).

I am using Rails 1.0.0 for an application at my company, and for annoying reasons, I can’t at the moment switch to Rails 1.2.3. This requires activesupport 1.2.5 to be installed. Since there are a lot of things using activesupport other than Rails I’ve also got version 1.4.0 installed.

If you install the haml gem and try to do something like this in a ruby script:

require 'haml'

engine ="%p hello world!")
puts engine.render

you’ll get some ugly looking exception complaining about activesupport 1.4.0 and 1.2.5.

Worse, just by having installed the haml gem other things will break. For example, Merb won’t start because of that same exception.

Luckily, this bit of code works:

  require 'haml'
  require 'haml'

engine ="%p hello world!")
puts engine.render

and merb will start again if you replace the require 'haml/engine' in the lib/merb/template/haml.rb in the merb gem with:

  require 'haml/engine'
  require 'haml/engine'

Written by hutch

June 18, 2007 at 9:51 am

Posted in Ruby, webapps

Using Erubis 2.2.0 with Rails 1.0

I used Merb to build a tool to let me write my new tumblelog ‘So.’. I would likely have used Rails but because Raconteur is still using Rails 1.0, and Rails 1.2 doesn’t seem to want to co-exist with Rails 1.0 on the same machine, I was prevented from doing that. In truth, I wanted to check out Merb anyway, so I took the excuse.

Merb is quite a nice framework, easy to use, and very quick. One of the reasons it is so quick is that it uses Erubis rather than erb. So I thought I’d see if I could get Merb to work with Raconteur.

It didn’t work out of the box. There is of code in rails_helper.rb (which needs to be required in your config/environment.rb file) that:

  • extends ActionView::Base
  • decides that the version of Rails it is working with is before Rails 1.2
  • tries to call the template_requires_setup? method that it thinks is defined in ActionView::Base

The problem is that there is no template_requires_setup? in Rails 1.0

Almost a year ago I wrote a blog entry — Nice Ruby Idiom — that describes a technique that allows you to monkey-patch a missing method into a class while not screwing up the real definition that will appear in some future version. This is precisely the situation I’ve got here.


      instance_method(:template_requires_setup?) rescue def template_requires_setup?(extension)

(inserted around line 98 of the file …/erubis-2.2.0/lib/erubis/helpers/rails_helper.rb) does the trick.

It is a bit of a coin toss whether a true or false should be returned… I think I guessed correctly, because it works just fine.

If you are stuck at Rails 1.0 like I am, this might be handy.

Written by hutch

March 24, 2007 at 10:16 am

Posted in Raconteur™, Ruby, webapps