So, I thought it would be useful to give other web developers an idea of the tools I use when building websites:
I use several add-ons for Firefox to make my life easier:
Undoubtedly the most useful plugin for checking and editing styles on all the elements in the DOM, Firebug is indispensable for quickly discovering problems in your HTML and CSS. If there’s one add-on you download it should be this one.
While the Web Developer Toolbar allows you to quickly validate you HTML against the W3C validator, sometimes it’s not quick enough. This extension validates your pages locally and displays an icon in the bottom right of your window showing whether your page passes. It then provides an easy to navigate list of errors linked to the lines of HTML in the source code view, so you can quickly track down problems.
I recomend switching its “Enable validation in the Browser” option off, and then adding exceptions for your development sites (such as localhost), so that it doesn’t impact your general browsing experience.
Libraries and Frameworks
It always helps to have a solid foundation to build a web page. Here are some that I use:
Recently I have become a big fan of the 960 and Blueprint CSS frameworks. My productivity has shot through the roof as I can now layout pages quickly and easily without worrying so much about cross browser compatibilities, as these have been solved by the framework authors. Instead of marking up your pages, and then styling them, these frameworks allow you to put classes such as “grid_4″ to create perfect columns of content. Afterwards you can add IDs to style the elements as you wish, but the layout is done for you. This means that you sacrifice some semantics, but if this really bothers you then just think of these tools as ways to rapidly prototype ideas.
Personally I prefer 960.gs for it’s simplicity and flexibility with its 12 and 16 column options (compared to Blueprint’s 24 columns!), however I find its typography (text.css) a bit lacking, and so I generally use Blueprint’s fantastic typography.css. One thing I do change though, is to bump up Blueprint’s default font size, which I feel is a bit too small.
Following the rapid prototyping path, I like using the above font stacks (article here) to quickly apply fonts to a page that look great on all browsers and platforms.
Of course there are several other tools that aren’t concerned with just web pages:
Internet Explorer is the bane of every web developer’s life, but it’s so widely used that it cannot be ignored. While Internet Explorer 7 and 8 are the current versions of IE, a large proportion of businesses still use IE6, which will always mangle your design (don’t leave testing in it ’till the end, or you will have your work cut out). Multiple IE is the best way to install old versions of Internet Explorer, while still maintaining support for conditional comments and the various IE PNG fixes. I personally only test IE versions 6, 7 and 8, but this tool supports back to version 3.
I run Windows on my laptop with all the different browsers, and develop on my main computer with Ubuntu. Synergy (which can be downloaded here), while not strictly a development tool, makes my life easier by allowing the main computer’s mouse and keyboard to work across the network on my laptop. The exchanges awkward leaning across and using the laptop’s track pad to just moving the cursor against one side of the screen and it appearing on the laptop.
For Linux users, this should be available in your repositories (e.g. Synaptic for Ubuntu)
Version Control System (VCS): Git
Version control should be used whenever you are dealing with code…or really anytime you are creating digital files. Not only does it allow you to easily go back to a previous version of your code/file should you completely mess up your working copy, it is also an easy way to make backups and transfer the latest version of your work to whichever computer you happen to be working on. There are many different systems:
- Subversion: Established, with good tools surrounding it, but now getting outdated as people realise the ease and value of distributed systems
- Bazaar: A distributed VCS written in Python which can be used over SFTP. Personally (seriously, opinion no fact here) I’ve found it to be a bit slow, but your mileage may vary
- Git: My personal favourite, Git is being used by the Linux kernel and many other projects. It also has the great Github behind it. It can be slightly hard to get used to (I hope to write a tutorial soon)
- Also: Darcs and Mercurial, neither of which I have used.
For Linux users, all of these should be available in your repositories (e.g. Synaptic for Ubuntu)
I hope this is a good introduction to some useful tools. I will keep it updated as I think of more that I use in my work-flow, and if you have any suggestions or questions, please comment or email me!