Tools for web development

April 5th, 2009 1 Comment

So, I thought it would be useful to give other web developers an idea of the tools I use when building websites:

Firefox Add-ons

I use several add-ons for Firefox to make my life easier:

Firebug

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.

Web Developer Toolbar

Another useful add-on for examining the layout of your webpages, you won’t fail to find something useful in the multitude of tools it provides. The ability to quickly switch off images and JavaScript is a great way to check your pages degrade gracefully.

HTML Validator for Firefox

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:

jQuery

jQuery is my JavaScript library of choice, providing one object that accepts CSS selectors, HTML strings, provides DOM manipulation and animation and has a robust and well used extension system. I have also heard good things about Dojo, and of course there are many others out there including MooTools and Prototype.

960 Grid System and Blueprint

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.

Font stacks

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.

Other tools

Of course there are several other tools that aren’t concerned with just web pages:

Multiple IE

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.

Synergy

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:

For Linux users, all of these should be available in your repositories (e.g. Synaptic for Ubuntu)

Conclusion

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!


1 Comment

Comments

One Response to “Tools for web development”

  1. Tom Figg Says:

    Stu! This blog entry is sheer gold dust! It’s pretty much everything I’d have wanted to ask you about lol Damn useful stuff, all of it. I’ve now got firebug and the developer toolbar for firefox, both are gonna come in handy for sure. :)

    I’ve included a link to my current website experiment, its at a very early stage, I have a LOT to do to it, lots of little bugs and fixes, but soon it’ll be a little 1 player ‘avoid-the-mines’ game. (you wont be able to see the mines normally!). So yeah, check it oout.

    Tom

Leave a Reply