Peterbe.com

I only noticed this new Firefox Extension today. It's 1.0 version was released yesterday only. You install it, add it to your toolbar and then you can use it to inspect elements to get the complete rundown of the CSS declaration for a chosen element.

I've haven't tested it fully yet but it looks really promising. If you're a web developer, this is a must. It's much better than the Firebug CSS inspector but someone more clever than me can probably point out that they serve different purposes.

Get it here

I found this bookmarklet script from planet dojo but it has nothing to do with dojo itself. With this bookmarklet available in your browser you can refresh all external stylesheets without having to refresh the whole page. This is great because when you're debugging the a stylesheet it's time consuming to have to refresh, the HTML and the images just to refresh a stylesheet file for every little change.

Worth saving. Thanks David!

I bought the A4 VisiBone Browser Book from www.visibone.com and have been using it now for about a month. How did I survive without it before?

Usually when I forget how a selector CSS works I usually go to Google and sift through a few different sites until I find what I'm looking for. Or if I forget how a JavaScript function works I pick up my 800 pages big JavaScript The Definitive Guide from O'Reilly. So many times I've searched Google for html entity chart to look up the code for å. Don't get me started on scanning the web for a decent DOM tree chart (none found so far actually) or various boring tutorials for how to do regular expressions in JavaScript.

My VisiBone Browser Book is 16 dense pages with web colours, fonts, characters, XHTML, CSS, JavaScript, DOM and Regular Expressions. It's always one arm-reach away from my work computer. Another great feature is that the listings of tags, CSS declarations and DOM is speckled with little footnote icons such as "Obsolete", "Not supported by IE5 on the Mac" or "Opera bug". This is incredibly valuable. When I received my copy and sat down reading it (or rather, staring at it) for an hour. That alone taught me so much and I'm now probably faster at finding things between the 16 pages.

I learnt an important lesson today about the <link> tag. I had a XHTML Strict that looked like this:

<link rel="stylesheet" type="text/css" media="print"
title="Design for print" href="/print.css" />

And every time I tried to print the page it did not correctly incorporate the print.css file. The file gets downloaded by the client but not incorporated. After a lot of trial and errors and testing I finally discovered why. The title attribute stops the link tag from working.

The correct way to declare a link tag for a media="print" is to do the following:

<link rel="stylesheet" type="text/css" media="print"
href="/print.css" />

Hopefully this will help someone else getting into the same pickle as I was in.

I love del.icio.us and use it on a daily basis. Today I had a quick look at the source code (HTML source) of the posting page and found a very funny style tag:

<div style="clear:both; height:1px; 
font-size:0; line-height:0; ie-sucks:yes"></div>

This is only funny if you're a web developer. Keep up the good work del.icio.us people!

In Javascript, have you ever needed to create a hyperlink element like this?:

div = document.getElementById('foo');
newlink = document.createElement('a');
div.appendChild(newlink);

That snippet doesn't do much. It just creates a hyperlink element with no href, class, title or content. Let's make it a bit more useful:

newlink = document.createElement('a');
newlink.setAttribute('class', 'signature');
newlink.setAttribute('href', 'showSignature(xyz)');

The problem with this code is that the href becomes a link to a page called showSignature(xyz) and not a javascript function call to the function showSignature() with parameter xyz.

I've learnt something interesting today worth thinking more about. The "table-layout" selector in CSS2. Long story short... if you specify it like this:

<table style="table-layout:fixed">

then the whole table will be shown slightly faster because the browser doesn't have to load the whole table into memory and then use the "automatic table layout algorithm" where it needs to find out what widths to use on the table based on the content inside. With the fixed algorithm the widths are either defined by:

• a width != auto on any of the columns
• a width != auto on any of the columns found in the first row
• the remainder width found from rendering the first row by also considering the tables margin to other side-elements such as the whole window

If you ever need to use the "Image Replacement Technique" in CSS which is what you do when you want to have a perfectly valid document with a title but to style the title with an image. This is very common on web standardised pages like any of the css Zen Garden pages

This summorised tutorial by Dave Shea is one of the best ones I've seen in a long time. As a layman it's difficult to know which one of the many methods I should use. Like many other techniques I rarely remember which one is better than the other. Usually my only guide is to look at the date of the article and assume that the newer the better. (than and other credentials such as who wrote it)

I am aware that I might sound pompous in saying this, but it appears that Gmail is being inspired by the IssueTrackerProduct now that they too have an auto-save function.

The IssueTrackerProduct has had an auto-save feature for several months now and it's been working very well. Perhaps it's been done before and I congratulate those who've done it chronologically before me but hand-on-heart: I have never used website form that has auto-save until I did one for the IssueTrackerProduct.

Now, back to earth and do some work.

I've searched and searched but can't find anything that is good enough. What I'm after is some Javascript/ECMAScript code that let's me control what keys the user presses on a particular page. One page that does this well is Gmail but their code is so damn hard to debug because of all the "obfuscation".

So, do you know any pages where they've really got keyevents going with javascript? I mean for the whole page, not just a simple onkeydown on a form input. The only stuff I've found either doesn't work in IE or doesn't work at all in Mozilla.

I know that it's considered bad usability to fiddle with the keys because it can break something native to the browser but I know what I'm doing and Gmail as an example that it is possible.

UPDATE

I've found something that works now. At least in Firefox and MS IE 6. It uses the onkeypress event like this:

function body_onkeypress(evt){
   if (!keyboard_shortcuts_enabled) return;
   function S(k) { return String.fromCharCode(k); }
   if (window.event) key=window.event.keyCode;
   else key=evt.which;
   var s = S(key);
   // then do something with 's'
}
document.onkeypress = body_onkeypress