The Thögosphere

Web Developer Toolbar
Adds a menu and a toolbar with various web developer tools.

FireBug
Edit, debug, and monitor CSS, HTML, and JavaScript live in any webpage.

YSlow (For FireBug)
Analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites.

ColorZilla
Advanced Eyedropper, ColorPicker, Page zoomer.

Update (12/07/08 - 15:08)

HTML Validator
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

Clear Cache Button
Adds a clear cache toolbar button. It clears your cache :-) [Thanks Jon!]

Update (15/08/08 - 00:40)

XRAY
Not really a Firefox add-on, but a bookmarklet (which can be used in other browsers as well). Use it to see the box model for any element on any web page.

Pixel Perfect
An add-on that allows web developers to easily overlay a web composition over top of the developed HTML. Switching the composition on and off allows the developer to see how many pixels they are off while in development.

Update (29/10/08 - 11:44)

Aardvark
As you glide the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. Pressing certain keys on the keyboard (see below) will do various things, as descibed in the Keystroke list below.

Any webdesigner add-ons you can’t live without? Leave a comment!

All in One SEO Pack
Optimizes your Wordpress blog for Search Engines (Search Engine Optimization).

Google XML Sitemaps
This plugin will create a Google sitemaps compliant XML-Sitemap of your WordPress blog.

Wordpress.com Stats
Gives you visitor statistics from Wordpress.com directly in your Dashboard.

WP Super Cache
This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

Google Analyticator
Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging.

WP Security Scan
Scans your WordPress installation for security vulnerabilities and suggests corrective actions.

Do you know of any handy Wordpress plugins?

Most of us are custom to make small workarounds for Internet Explorer 6, and I’ve previously announced that I have dropped supporting IE6 (mostly) when developing websites. But what do you do when modern browsers such as Firefox, Safari and Opera disagree on how to render CSS correctly?

Case: Apilot.no - Multiple backgrounds

Apilot.no is the product site for one of my current (and neverending) projects, Apilot (which is an easy-to-use CMS, made for easily implementing any kind of design).

Originally the background consisted of two different images. A gradient image, the sky, which was repeated x in body, and the clouds which was centered in a wrapper-DIV (body_wrapper).

The first challenge I encountered was to remove white-space below the site since the background was way higher than the actual site. This was fixed with a relatively easy hack:

#body_wrapper {
background: url(/media/images/bg_clouds.jpg) top center no-repeat;
position: absolute;
width: 100%; height: 100%;
}

This worked, but as soon as you resized the window and scrolled down, the wrapper background was cut off.

Alright, so let’s try a different approach. I googled around a bit and found this hack. It appears that most browsers will recognize the background-attribute in the html-selector. Unfortunately, that didn’t work too well either. Apparently that will make the body collapse to the site height, and no longer the browser window.

Well then. I can’t think of more ways to make this work in an elegant manner, and I’m ashamed to come up with this solution (which actually works in every browser, except for some minor issues with Safari on iPhone).

I can’t wait for CSS3 to become standard, with goodies like multiple backgrounds. If anyone have any solutions to this quite annoying issue, please let me know :-)

What is it?

Patterntap is a great source for inspiration when designing a web site.

Why do I recommend it?

Don’t pretend you’ve never been stuck.

Today, August 15th, 37signals will be begin phasing out support for IE 6 (Microsoft Internet Explorer 6) across all their products. Apple has already taken the first step with their recently launched product, MobileMe (Yes, I know they’re not the first to not support IE 6, but probably the first to do it with a product of that magnitude).

So what’s with the fuzz?

If you’re a web developer, you probably already know what this means – for us, but also for the web experience which IE 6 has prevented for so many years.

If you’re not a web developer, and don’t understand what the whining and complaining is about, let me put it this way: IE 6 is a last generation web browser. It was released in 2001 (yes, that’s seven painful years) along with Windows XP. Since then, there has been close to no upgrades (except for maybe two dozen security patches). IE 6 was broken back then, and it is certainly broken today – It did not, and still doesn’t, support the web standards, making it often quite difficult (and definitely time consuming!!) for developers to make their web sites work perfectly in every browser.

Back then IE 5.5 (which was even worse) and IE 6 had about 90% market share, so it wasn’t such of a problem. As long as it worked in these browsers, everything was fantastic, and if the site didn’t work in e.g. Netscape Navigator – well, too bad for them.

However, IE 6 has remained as the top most used browser, simply because people didn’t know better to actually upgrade to a newer (and more securer) one, thus prohibiting webapps to reach their full potential.

It must get worse before it gets better

Luckily, IE 7 (which was released with Vista) has now reached a higher percentage than IE 6, meaning as developers, we don’t need to use countless hours to make our sites work in this old and out-dated web browser.

As of today, I will also stop supporting IE 6 for my own projects (I won’t restrict them from entering any sites, I just won’t do any effort to make it work – and ask them nicely to upgrade their browser), and I hope many will follow.

Further reading:

http://37signals.blogs.com/products/2008/07/basecamp-phasin.html
http://www.37signals.com/svn/posts/1072-apples-mobileme-drops-support-for-ie-6
http://browsehappy.com/
http://savethedevelopers.org/

Internet Explorer 6 users should upgrade to one of these modern browsers:

Download Internet Explorer 7
Download Firefox
Download Opera
Download Safari