So.

Is it as fun as it used to be?

Archive for the ‘HTML/CSS/Javascript’ 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

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

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

CSS Style Sheet Editors: CSSEdit, Style Master

In How did your dog food taste? that I posted this morning I told a little story of how I converted the Recursive web-site from a hand built and updated thing to one updated through our Raconteur product. In doing this I used two tools that are new to me: CSSEdit 2.0 and Style Master 4.6.

I want to talk a bit about both of these because I think that they are both very useful tools for anyone working with CSS. This won’t be an in-depth review, I don’t feel the need to do that.

Let me start by saying that I’ll be buying a copy of each for my own use. What? Why not just buy the best of the two and be happy? Well, they don’t quite do the same thing, each does something that the other doesn’t do so well, and being the insufferable never-satisfied type that I am, I need both.

CSSEdit 2.0

CSSEdit 2.0 is a major upgrade from earlier versions, or so I’m told. This is the first version that I’ve used so I can’t really say. CSSEdit is OS X only, it will not run on Windows. It looks and behaves like an OS X application as far as I can tell, and this is a very good thing.

There are two window ‘types’ a browser/X-Ray window, and a CSS editor window.

Basically you point CSSEDIT at an HTML file/URL maybe with a CSS stylesheet and it renders it in what seems to be a webkit (think Safari) view in one of its windows. CSSEdit has an X-ray mode where clicking on a part of the rendered HTML will highlight the element and show the path within the HTML document to that element. If you click on the parts of the path that element will be highlighted. The highlight shows the boundary of the element and padding and margins. I’ve not seen anything show the padding and margins before and I find that pretty handy. You can turn X-Ray off, in which case you have a working browser. This allows you to log into and navigate to a page in a web application. When you get where you want to be you can turn X-Ray on again. In other words, CSSEdit works with web-apps where you have to login. This window is like a reduced functionality version of XyleScope.

The second window ‘type’ is a CSS editor. I like this editor. It is very responsive and seems to be both powerful and useful. The code completion may as well be instantaneous – code completion that is less than instantaneous is useless I find, code completion that is instantaneous turns out to be useful. Funny that. On top of that, there is a floating window full of panels of editors that group CSS functions logically – that ‘logically’ can be debatable, I don’t have any problem with what they’ve done with CSSEdit.

So what’s the connection between these two windows? Well if you make a change in the editor there is an immediate update to the rendering. Very nice. But that’s all. It doesn’t work the other way around, there appears to be no indication in the editor window of what’s selected in the rendering window. That is really too bad, and I think is the only real problem I have with CSSEdit. I admit it, with the help of XyleScope I’d probably survive it, but when I saw what Style Master does and how powerful it is well… sigh.

CSSEdit allows you to override style sheets – replace the style sheet that comes with the rendered page with your own. This is a great idea. I think it will make learning CSS a little easier, and it certainly makes redesigning as I did in the dog food story easier. Very nice.

Style Master

Style Master 4.6 has had a point release in the last week or so, that’s not a major upgrade really, but it is the reason I tried it. Style Master has versions for both Windows and OS X, I worked with the OS X version (of course). I didn’t have any problems with the UI.

Style Master uses a single split window. CSS statements down the left side, CSS source above, rendering below. There is a popup window that allows you to build up a list of files and another of URLs. The initial rendering in Style Master has no style sheet associated with it. You have to build your own. There are a bunch of tools in Style Master that I have not tried that help you with this task. It is unlikely that I’d ever use those, so anything I’d do with them is just mucking about – if you are interested in them I think it would be best to find someone who needs that functionality to comment, or better still, try it yourself. There is a lot of this kind of thing in Style Master and I think that probably has something to do with its cost compared to CSSEdit – neither is particularly expensive so I don’t want to get into that discussion at all.

The rendering window does not appear to have an operational mode, so for example, you cannot seem to log into a web-app. This appears to make it unusable for web-applications. I spend most of my time writing web-apps and so I find this disappointing. A second problem with web-apps is that Style Master has problems with pages with a lot of javascript on them – so even if I disable the login requirement I can’t use Style Master. Sigh.

The editor in Style Master is a little slow, and could be a bit annoying when moving the cursor around especially near the beginning of a line. The philosophy here seems to be that of an IDE, I’m not as happy with that as the approach taken by CSSEdit, but there’s no denying that I was able to get a lot of work done quickly. Style Master also has the floating pallet of editors idea implemented using a different logical grouping, but that is irrelevant.

Changes in the editor show up in the rendering immediately.

The editor window and the rendering window are connected in a second way, a really really cool way. If you click in a CSS statement all elements affected by that statement are marked in the rendering view. And, if you click on an element in the rendering view all statements that affect the style of that element are highlighted in the editor. This is so helpful I can’t explain.

Conclusion

CSSEdit: pros: nice UI, very responsive, works with web-apps, over-rides style sheets; cons: doesn’t integrate the two editors as well as they might be

Style Master: pros: overwhelmingly powerful bi-directional statement/element highlighting; cons: unworkable with a web-app backend.

Like I said, I’m going to be buying both.

Written by hutch

November 19, 2006 at 6:41 pm

How did your dog food taste?

Recursive Design, my company, introduced version 1.0 of Raconteur in August 2005. We introduced version 2.0 in May of 2006 to a very limited set of customers and with no public discussion I think. There was a good reason for this, but I’ll discuss it in its own posting – when I find the words. We are about to release a major upgrade to Raconteur. This week I think. Maybe next.

At any rate, we’ve had Raconteur available to us for well over a year and a half, and that was getting a little embarrassing. Why? Well, from our web-site:

Raconteur helps you and your team create multiple large, complex websites and keep them current easily.

Raconteur is hosted, on-demand software created to effectively do a single job, that of getting static content on the web. Because its purpose and design are focused Raconteur helps your team focus on the job you want to get done, rather than on the tools you have to work with.

For the record… The the 1.x versions of Raconteur were written in Java. The 2.x versions are written in Ruby, using Rails and xampl. There’s no ActiveRecord used in Raconteur.

And our web-site? Built using Dreamweaver and vim, and updated these days with vim. It was such a pain to update that I hardly bothered. Well, in fact, I always found ‘better’ things to do. Any ‘better’ thing, and anything was ‘better’.

You may have heard the phrase eat your own dog food – well, with the new release and all, maybe it was time for a sample.

I’m not a web designer, I’m a programmer. I do know html/xhtml/xml and CSS reasonably well. And I can be a bit of an idiot sometimes. I figured I’d re-do the Recursive web-site using Raconteur. And I thought I’d check out a couple of new tools at the same time. And this would provide an opportune moment to see what is involved in getting the really nice open source templates designed by Andreas Viklund working with Raconteur.

You may also have heard the phrase don’t bite off more than you can chew which somehow seems especially appropriate here. It turns out that I didn’t, it was a day very well spent.

So what’s the plan? Decide what content to keep from the old site. ‘Port’ one of Andreas’ templates to work with Raconteur. Build a style sheet that duplicates the look of the old site.

In Raconteur, you have to decide how to structure your content. It is very easy to change that decision, but decide you must. Raconteur was originally designed for a lot of pages organised into multiple web-sites. The model is a hierarchy – you have a library of collections of storybooks of stories. And stories are a hierarchy of sections and subsections – the metaphor falls apart a bit here.

A web-site corresponds to a story, though in some circumstances it is easier to think of the storybook as a web-site. In Recursive’s case there is one story and that is the web-site. Unless you do something about it sections are published as a single web-page. Often it is useful to combine subsections to build a single page. The design of the Recursive site does this so the pages of the site correspond to sections and those pages will include content from the sub-sections (like on the news page)

Deciding what content to keep was pretty straight forward. Making that decision and getting it into Raconteur took no more than a hour. We don’t have a big site and Raconteur is quite good at getting new content into place and organised. It would have been quite a lot quicker if I hadn’t changed my mind about how to do it. Raconteur has the ability to represent content to its users as HTML with a WYSIWYG editor or as text using textile (soon markdown). I started off using the WYSIWYG editor, even though I personally do not like it at all – I thought I could cheat and get the transfer done more quickly that way. Well of course I had to make some editorial changes to the content in the process, and I quickly realised that I’d be using that editor until I converted the content to textile, and that I’d really like that when to be now.

Building a Raconteur theme from one of Andreas’ templates was pretty straight forward. It took about 20 minutes, followed by about 45 minutes of tweaking Raconteur to smooth the process a bit. These tweaks are one of the big benefits of me actually using Raconteur for real work – first hand exposure to the rough spots (to be explicit, I change Raconteur’s software when I’m doing jobs like this one).

So in a couple of hours I had our new site running in Andreas’ template and had made some nice little enhancements to Raconteur. Now I had to reproduce our existing design using nothing more than a CSS style sheet. Well I could have changed the HTML template as well, but I didn’t want to do that. I knew this wasn’t really necessary because I had already done this site which is a live Raconteur built site that replicated, pretty much to the pixel, their earlier site (ease of content update was the motivation for doing that site) and that simply must be a nastier task than our site. The Girls Heart Point site took about 16 hours to move and organise the content then redo the design as CSS suitable for a Raconteur theme. I also spent maybe a week tuning Raconteur to make things easier. To be honest, I didn’t have any doubt that I could do the Recursive design with only CSS. What made this interesting was trying to use a couple of tools I had never used before.

CSSEdit 2.0 was released in the last week or so. And Style Master 4.6 was also just released. I wanted to see if these tools were useful in the context of Raconteur. I normally use vim to write HTML and CSS, and in the case of CSS, I’ve been using XyleScope to help for a long time. Personally I think XyleScope is brilliant. It is used to explore how CSS is applied to an html page and does it very well. It is something I would not care to do without. But what about these new tools?

I proceeded to spend the next 10-12 hours playing with these tools. I’m not going to describe this experience here, I’ll post something soon. What I can say is that I’m certainly going to buy Style Master, and I’m 99% sure I’ll be buying CSSEdit as well – they both are CSS style editors but how they do it and where they are particularly useful is different it seems to me.

Anyway, the style sheet used on the Recursive web site is written with Style Master. What I did was to replace the CSS style sheet that is part of the template designed by Andreas bit-by-bit with what the Recursive design requires. I did this with both CSSEdit and Style Master. For this particular task I found Style Master easier to use, and it happens to be the second of the two tools that I used, and that’s really the only reason that I published using the style sheet produced using that tool.

So. That’s that. With all the fooling around it took about 12 or 14 hours to do. And I can change the content easily.

It tastes pretty good.

Written by hutch

November 19, 2006 at 11:50 am

Web 2.1 Technology Demonstration

Written by hutch

May 12, 2006 at 5:44 pm

Jemplate

Jemplate – A Template Toolkit for Javascript

This is just a quick post to point to this new tool. I have not had a chance to look at it, but it fits very nicely with something that I wanted to experiment with in the next little while. If thing go as planned I’l post later about how things went.

I’ve seen another javascript templating language recently but I can’t find the link. That’s annoying.

Written by hutch

February 17, 2006 at 7:29 pm

Follow

Get every new post delivered to your Inbox.