So.

Is it as fun as it used to be?

Archive for the ‘Software’ 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](http://www.blueprintcss.org/) and the jQuery plugin [ListNav](http://www.ihwy.com/labs/jquery-listnav-plugin.aspx). I recommend them both, very nice. [ListNav](http://www.ihwy.com/labs/jquery-listnav-plugin.aspx) (check out the [demo pages](http://www.ihwy.com/labs/Demos/Current/jquery-listnav-plugin.aspx)) allows for easy navigation through a long list. [Blueprint](http://www.blueprintcss.org/) is a CSS framework for laying out a page using a grid (check it out, it has [demos](http://www.blueprintcss.org/tests/parts/sample.html) 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](http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml), which I simplified to:

function loadcssfile(filename){
  // thanks to http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
  document.getElementsByTagName("head")[0].appendChild(fileref);
}

$(document).ready(function() { var navOpts = { initLetter: 'a' };
                               $('#user-list').listnav(navOpts);

                               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

So.

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

Toronto Lisp Meetup, 3 April 2008

This is the third Toronto Lisp Meetup (of the modern era). I am really going to have to make it out to this one. I missed the last two for various annoying reasons.

ALU Wiki: toronto: Toronto Lisp Meetup – 3 April 2008, after 6pm

Bloor St. Fox and Fiddle

Toronto Lisp Mailing List

All Common Lisp, Scheme and Smalltalk programmers are welcome! Haskell, Ruby, Python and even Java programmers are welcome too!

Look for the table with the Lisp flyer on it.

Located at 280 Bloor St, the Fox and Fiddle has free wireless Internet and, $3 cocktails and bar rails on Thursdays and Fridays.

There’s a (http://www.facebook.com/event.php?eid=9038472973) event, if you’re into that kind of thing.

Written by hutch

March 13, 2008 at 9:49 pm

Posted in Lisp

Toronto Lisp Meetup

There’s going to be another attempt at a lisp user meetup in Toronto:

The Announcement

This has been tried at least once already, but it fizzled out.

The meetup is open to anybody interested in lisp, not just people using lisp. So if you’re curious…

Unfortunately for me, I won’t be able to make it this time (I’m supposed to be in Waterloo that evening, so at least now there’s an upside should there be a winter storm :-)

Written by hutch

December 13, 2007 at 7:40 am

Posted in Lisp, Ruby

A Little Unnecessary Smalltalk Envy

In A Little Head Trauma…: Returning None is Evil, Mark Derricutt provoked a brief moment of Smalltalk envy.


(self doSomethingThatMightReturnNil)
  ifNotNil: [val | val doSomethingWithNoHassle].

In addition to what Mark was actually responding to, it is an annoyance that I’ve had repeatedly in Ruby but never really considered fixing. Until now.

The annoying code:


tmp = doSomethingThatMightReturnNil
tmp.doSomethingWithNoHassle if tmp

Just look at those tmp variables.

This is the ‘cure’:


class Object
  def if_not_nil(&blk)
    yield(self) if blk
  end
end

class NilClass
  def if_not_nil(&blk)
  end
end

I like monkey patching.

And now I can write:


doSomethingThatMightReturnNil.if_not_nil { | v | v.doSomethingWithNoHassle }

Which is so much nicer [UPDATE: and nicer still after Sean prompted me to actually get Mark's example right].

That really does look like Smalltalk, doesn’t it?

Written by hutch

November 22, 2007 at 11:58 pm

Posted in Ruby

Bad Unix Jokes

In csh:


hutch% got a light?
csh: got: No match.

A long time ago it used to say “Sorry. No Match.” — things are a little ruder these days.

Sorry about that. Some kind of flashback I think.

Written by hutch

September 11, 2007 at 11:22 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

Making Raconteur go Vroom

So I was reading this article Making Rails go Vroom by Charlie Savage and thought maybe I’d profile a few of the more frequent actions in Raconteur, which is written in Rails.

The instructions provided in other posts by Carlie are perfectly clear and easy to follow but, inevitably, they don’t work for versions of Rails that don’t implement the alias_method_chain method.

This is the definition of that method:

class Module
  def alias_method_chain(target, feature)
    aliased_target, punctuation = target.to_s.sub(/([?!=])$/, ''), $1
    yield(aliased_target, punctuation) if block_given?

    with_method, without_method = "#{aliased_target}_with_#{feature}#{punctuation}", "#

    alias_method without_method, target
    alias_method target, with_method

    case
       when public_method_defined?(without_method)
         public target
       when protected_method_defined?(without_method)
         protected target
       when private_method_defined?(without_method)
         private target
     end
  end
end

You can stick it anywhere that gets loaded early enough by Rails. I put it into the profiling.rb file that comes with the ruby_perf Rails plugin.

It turns out that there was a call to a method that was not strictly necessary, but it had the possibility of touching the database. So I removed that call, and got a fairly significant speed up. Which I thought was interesting. So I poked about some more and discovered that the culprit was the XML escape routine (the one that replaces “<" with "<" and so on). This was really quite bad. I managed in this specific case to avoid the problem, but sometimes it must be run. I think I'm going to have to find a faster implementation of that, maybe even written in C.

Written by hutch

August 3, 2007 at 7:43 am

Posted in Ruby

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 (mail.app 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

Follow

Get every new post delivered to your Inbox.