Like 1995 all over again!

Wow – the browser wars are back with a bang! We wait ages for a new version of Internet Explorer and then two come at once (almost). There’s a nice summary on the Register this morning about the new versions of various browsers. If you’re in the mood you can download:

• 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.

Floating divs and odd behaviour

I came across an unexpected problem in class this week. We were producing two-column floating layouts in the internet 1 class. You know the sort of thing 760 px, full width header, nav and body side by side and a full width footer. Someone asked me how to add a block underneath the nav column so that the background didn’t show through when the nav and the body were different heights. “No problem”, I said, “Just add an container div around the nav and body blocks and everything will be fine.”

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.

Top 25 Errors

The US Dept of Homeland Paranoia has been working on publishing a list of the top 25 most serious security errors common is programming. This is a good read, although it is fairly advanced. Worth a look if you are keen to improve your application development skills.

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

Colour testing your design

Picking colour schemes for web sites is something I’m notoriously bad at. I’m not artistic and struggle to get beyond safe Blue, White and Yellow as a design scheme (must be a link to a certain footy team there). Adobe Kuler is great for picking a nice setup and I have a couple of themes posted up there – but I’m still not sure about my taste…

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.

New browser – shiny but not polished

I’ve been playing with the new beta of Google Chrome. In case you missed it, Chrome is their new web browser entering into a crowded market. Last time I checked, Firefox and IE were still dominating market share (especially Firefox according to w3schools.com). So do we need a new browser, and what difference does it make for designers?

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).

Not a numpty language after all

It is probably unfair to call PHP a numpty language anyway. Programmers always have their biases and tend to favour one language over another. I’m as guilty as the next man in this respect.

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.

Blogged with the Flock Browser

Tags: PHP, MVC

Subversion

I hesitate to show you this article, but the ever-hilarious Verity Stob has published her thoughts on the various kinds of software planning diagrams you may be asked to produce. Why hesitate? Well after reading this, when my colleagues are asking you to produce class diagrams, data flow diagrams or use case diagrams, you will have to keep a straight face. (I’m confident I’m not going to be teaching any of this stuff this time around).

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

Neat image tricks using swfIR

I found this in .Net magazine (which seems much better and more heavyweight then when I last looked at it).

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

Some advanced JS + CSS

If you visit digg.com, they use a nice effect to show or hide comments. Rather than abruptly disappearing (like we do with the tabbed interface tutorial) they open and close using an animated effect.

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

Wikipedia as a reference?

I saw an interesting short piece on Wired’s website about a college banning Wikipedia references from assignments (papers). This does represent a real worry when it comes to marking assignments.

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.