Today I would like to talk about tools which speeds up my development process and tools I can not live without. So lets get started with best tool ever.
Firebug and its features you might not use or you do not know about
Firebug is my favorite tool and sometimes I wonder how could people develop before when there was no Firebug.
Box model
There is often need to see what is going on with particular element in terms of spaces around it. Box model view allows you to see all what you need. Padding, margin, width, position. You can even change these values and see how the particular element and elements around it react.
Edit CSS
This one is probably the most used Firebug feature. Firebug allows you to edit your CSS so you do not have to go back and forth to your editor and save the changes after every little step. You can simple test how the page react when you set some css style to a specific element. Firebug also allows you to investigate any element so you can see what style has been applied and where is it coming from. This is specially useful when you work with multiple styles on the page. It tells you exact line of the applied css property so you can find it straight away.
Net Stats
This function comes very handy when you want to test the size of the page you are developing. It allows you to see the sizes of all page elements separately. All images, css, js etc. It also shows you the time spent loading these elements.
YSlow
Yslow is firebug extension developed by Yahoo guys. It shows you suggestions what should be changed on the page. For example, it tells you to move your javascript files at the bottom of the page, use gzip etc. Following those instructions can help you to load your pages rapidly faster.
Console
Very useful debugging tool for javascript inside Firebug is console. It is lot better to be able to see your customized messages inside console instead of using annoying alerts during the testing. Specially when you are testing some events reaction and you expect more test results. Console just prints whatever you define and there is no need to press OK after every alert. Next time you will be testing javascript use console.log() instead of alert().
Developers extension
Some people have stopped using developers extension when the Firebug came out but I think there are some really cool features you will not find in Firebug.
Clear your cash
One of the tasks you need to do while developing javascript or css is to clear browsers cash. Developers extension allows you to do it lot quicker then using the default browser option. There are also some browser shortcuts which allows you to clear the cash. In Firefox it is Shift-Apple-R.
Disable CSS, Javascript
When you trying to develop with accessibility in mind you often want to see how your page is going to look for users who browse with javascript or css turned off. You can test these options through this extension very easily.
Text Editor
If you are developer or designer (or both as me) you simply need good text editor. You need the one which makes your life easier and speeds up your development. I use Coda which is the best text editor I have ever used. If I do not have Coda I would probably chose Text Mate. Coda has so many cool features. From the really common one such are text colouring or automatically closing of tags up to really advanced one like build in ftp, terminal, image viewer, subversion. One of my favorite features which I have not mentioned yet is Code Clips. You can predefine peaces of code and associate it with special tag. When you type the special tag a press TAB key the predefined code drops into the editor. You can define pretty much anything. Page header with all the meta tags or simple php or javascript loop even things like unordered list.
Subversion
Good developer needs a subversion. No questions about that. There is nothing better then having a backup of all your files with all the changes you have ever made. That feeling that code can go wrong but you still have the back doors and you can always reverse. It just feels right. I have mentioned that Coda allows me to use build in subversion but you do not need build in subversion into your text editor. You can use free software to commit your changes to repository.
Database backup
The backup is one of the most important task which needs to be done as often as possible. As I have mentioned before there is subversion for all your code. What about the database on the server? There might be backups done by your web host but I would recommend to do your backups as well. I use MySQLAdministrator to automatically backup my databases every day. I am sure there must be lots of software which allows you to do that. I do my backups on my local disk but if you have a huge database that is not an option and you need to backup on another server. Amazon’s S3 seams to be good place for backups.
