This is the first in a series of posts in which I will discuss the tools, techniques, and methods I have discovered and used whilst creating Destiny Denied. Here I am going to focus on the excellent selection of tools and utilities that are available for Mozilla Firefox.
Web Developer Toolkit
This Firefox extension contains a vast array of tools and links to other tools to make general web development easier.
Some of the highlights of this extension (and by that I mean the features I use the most) are:
- Outline Elements – Lets you visualise how your site is arrranged in terms of the layout of block elements.
- Resize Browser Window – Lets you see how a page will look in different screen resolutions with ease.
- Validation Tools – Quick links to w3’s HTML, CSS and link validation tools
There are so many other features in this extension, some of them I didn’t even know about until now. This is a must for any serious developer.
Go to the Web Developer Toolkit site.
Go to the DOM inspector extension site.
Live HTTP Headers
I cant live without this! This extension allows you to check the HTTP headers sent and recieved as you request pages. This is useful in so many areas.
Go to the Live HTTP Headers site.
This little extension is a colour picker and allows you to quickly and easily get the HTML HEX code of different elements on any site. This is a great tool for designing, particularly when creating a new page element in the style of the original site.
Go to the Colorzilla site.
- Live HTML and CSS editing. Fancy seeing how a page would look with a different background color? Simply edit the CSS in Firebug and see foryourself.
- Net performance – See how many HTTP requests are being made for the page, how long each resource takes to download, resouce size, amount ofresources in cache and much more. Perfect when optimising your site.
Go to the Firebug site.
YSlow is an extension for Firebug developed by Yahoo. It creates a performance report of your page, gives the page a grade and suggests how you might improve load times and reduce the number of requests and the size of the page.
Whilst not being very clear on the best way to improve your page, it acts as a good guide for further research. Using YSlow I have improved the load times of my pages greatly and discovered some very cool techniques in the process. Future news posts will discuss these techniques in detail.
Get a performance report for your site now with YSlow.