Happy new year

2009-01-02T07:08:00.000-08:00

Happy new year everyone, let's hope we see some good progress this year around the world!

Top Five: Firefox addons that help me at work

2008-12-15T03:13:00.000-08:00

As a web designer and online programmer, there are certain things you just never expected to be able to do (a few years ago) from within your browser.

How times have changed; with Firefox addons you can get some amazing features.

Here are my favourite five:

1) Web Developer

This has to be number one for so many reasons.

The main thing, for me, is the CSS viewer; it graphically highlights your various CSS bits and bobs. It shows you all the information you need to work out why that damn div is floating wrong, or what style is causing a particular effect. It's got me out of all sorts of confusing situations in the past.

As well as this, it lets you do loads of other stuff, including:

Enable/Disable cookies
Enable/Disable CSS
View Form and Image information
A ruler (to measure things on screen)
Outlining of frames, tables, etc.
Various code validators

If you do any sort of web developing I'd highly recommend checking this one out.

2) the Delicious toolbar

Simple, efficient, useful. That's got to be three of the best adjectives to hear somebody use to describe your software. In this case they're all true.

If you're not familiar with Delicious, it is a service that lets you store your bookmarks online. Sounds kind of pointless but trust me, you'll use it more than you might think. As well as being able to have a network of friends on there, and view all their saved links (if they want you to) it de-centralises your bookmarks, meaning you get to your favourites from any browser, and on any computer.

I find myself clicking the "tag" button whenever I come across something interesting that I think someone in my network might be interested in, as well as adding long documents or webpages that I want to save for later.

3) YSlow

Very handy little tool that shows you how long each element in a page takes to load. It needs the firebug extension, but that's no biggy.

The most useful application of it for me, is to find out what bits of a page are slowing it down, basically eliminating trial and error when you're optimising a page. It'll even draw you a pretty chart to show which types of object are taking longest.

4) ColorZilla

Not one that gets used every day, but extremely handy when it does get used.

Adds a colour picker to FF similar to the one that you get in Photoshop, letting you get the numerical value for any colour you mouse over. Very useful if you are developing a page and want to know what colour is being rendered, without having to screengrab and paste into a graphics program.

5) SQL Inject Me

This one highlights any vunerabilities you might have in your website that could be exploited using SQL injections. Whilst you should always know about and prevent this sort of attack from the get go, it's nice to have an application that will hunt down any gaping holes in your site.

After all, you really really don't want people being able to break your site or delete your customers from a form on your site, so it's always worth double and triple checking before your site goes live.

Images (click for full-size)

Viewing style information with web developer add-on

Seeing why a page loads slowly with YSlow

How to: 100% page height in all browsers with CSS

2008-12-15T02:46:00.000-08:00

Ever struggled to get that nice 100% height layout in all of the main browsers (including the headache we know as IE6)? Well we've had that problem as well, and the solution is fairly simple. Time to share!

Here is how we managed to get around it:

Code

For IE6

body { height:100% }

For IE7

html { height:100% }

For Firefox etc.

You require a container DIV with height set to 100%

Summary

So, for the benefit of IE you'd put this in your CSS:

body, html { height:100%; }

And for FF you would use:

.myfullheightdiv { height:100%; }

You can safely put all three of these solutions together on one page, and voila! Cross browser, CSS styled 100% height. Hope that's cleared that one up, any comments are welcome below!

Porcelain Development

Happy new year

Top Five: Firefox addons that help me at work

How to: 100% page height in all browsers with CSS