• Chrome (Win)
• Firefox 3.0.7 (Any)
• Safari 4 beta (Mac + Win)
• Opera 9.6 (Any)
• Internet Explorer 8 (Win)

The interesting part is that the chosen battleground at the moment is JavaScript. (I guess people care less about standards than we all thought). As the Register article shows, people are trumpeting the various JavaScript engines as being significant new features. They are interesting in abstract, but what people care about is:

• Does it help me do what I want to do?
• Does it do cool stuff

The cool stuff tends to come first – for example the Register article links to a couple of cool Google Chrome Experiments:

• A bouncing ball
• A gravity effect on the Google home page

These are clever demonstrations of JavaScript coding using the new <canvas> tag. I had never heard of canvas before this morning, but it looks like it has been around for a bit. It is part of the emerging new standards (HTML 5) for web development and these experiments work on newer browsers. They both worked fully on Safari 4 for me, the gravity effect was patchy in Flock (based on Firefox 3). Even though I knew nothing about <canvas> before, I’m interested now.

Not so! If you try this kind of layout in IE it works as you would expect and you get:

This is what I confidently expected to see in Firefox too but no, what firefox gives you is:

I could not understand what was happening. Dreamweaver agreed with Firefox and didn’t show my container div either. I did one of my usual tricks and wrapped a big ugly border around the missing container:

The thick red line shows where the container is. As you can see it appears underneath the two floating panels as though there is no content. I was stumped in class and had to leave it – others were waiting. Afterwards though I did some googling and found the answer:

Clearing a float container without source markup [positioniseverything.net]

It turns out that because my container only contains floating content, which are not counted as being part of the document flow the layout engine treats it as being empty. It is possible to put an empty paragraph at the bottom with a clear=both property to force some content below the panels, but this would be ugly.

The link above gives a nice CSS based fix using the :after pseudoclass (which I had never heard of either). Creating a class in the stylesheet:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Essentially this creates some content after the block. The content is a single . made invisible with zero height. Crucially it is able to set clear:both to force it to appear under the boxes.

This does the job nicely. The original article explains more fully and includes further detail about running in older browsers like IE5.5 on the Mac. I can’t quite see why I’ve never come across this before. Perhaps I always threw my container around the header and footer too. It is nice to fix this though.

SANS Institute – CWE/SANS TOP 25 Most Dangerous Programming Errors

It is interesting to consider the effect of colour choices on colour-blind users. There are a few different flavours of colour-blindness with various forms of red-green colour blindness being the most common. I have in the past pointed people to the Well Styled Colour Scheme Generator which lets you pick colour schemes much like Kuler, but then simulates the effects of colour-blindness on your palette. It is a nice tool, but I’ve just discovered something even better… Vischeck accepts the URL of a published web site and then generates a snapshot of the actual page with a colour shift to simulate colour-blindness. Sadly you can’t use this on any intranet sites, but they also offer a downloadable version.

In terms of features, Chrome has excellent speed and JavaScript performance. This is evident from a quick play and is certainly the claimed design goal. Google is banking on us using Chrome and making use of their online apps such as gmail and writely. This doesn’t seem to be a prelude to a lock-in (ActiveX style) as the browser is open source and based around the standards-compliant WebKit engine (the same one Apple uses for Safari, and incedentally the same browser as used on the iPhone).

Right now – features are light (much as Firefox was at the start). I miss the integration with del.icio.us, facebook and other sites that I have in my regular browser (Flock). Worse still there is no Mac version (boo!). I’m sure Google will say that the lack of cruft and features gives them a speed advantage. Should you switch? I’m staying put for now, but I’ll play around some more with it. Maybe when it comes out of Beta (that’s a joke by the way).

I’ve always found PHP a little uncomfortable to use. Much of it seems bolted on to me. I did find this article on the Register which shows how you can use PHP for some bigger scale applications. This is way beyond what you need for a year 1 assignment anyway, but do read if you are interested.

Put some MVC in your PHP | Reg Developer

By all means flame me if PHP is your passion. I will respectfully ignore you.
PHP doing model 2, they’ll be telling me you can build application in JavaScript next and run them client-side.

Tags: PHP, MVC

In the beginning, there was the flowchart… | Reg Developer

If you don’t get it, don’t worry. You may not be a geek yet, but there is still time. One or two assignments down the line and this will start to make sense.

The xkcd cartoons on the last page are usually good too. My favourite is this one, but if you don’t know Unix yet it will be a slow burner for you.

technorati tags:Design

Blogged with Flock

swf Image Replacement is a neat combination of JavaScript and Flash which lets you apply effects like drop-shadow or rounded corners to conventional images. “Big deal” I hear you say, I can do that in Photoshop with my eyes shut. Of course you can, but this is a clever feature to use if you have dynamic pages – particularly if the images are supplied by your end users as part of a cms.

swfIR: swf Image Replacement

This may not be news to some of you, but I’ve just discovered it, and I like the effect.

technorati tags:LCT1000, Flash, Tricks, Presentation

Blogged with Flock

This one if fairly advanced for year 1, but have a look.

Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS

technorati tags:CSS, JavaScript, DHTML

Blogged with Flock

Many students are too credulous when it comes to the information printed on the Internet. It is essential to find more than one source for your information so that you can check its validity. I had one student last year telling me that Yahoo was the only search engine to offer categories rather than a crawler based search. That was true five years ago, but their source document was at least that old. You have to check your facts.