I started building and designing websites in the mid nineties when I got my first computer. Back than there were only very basic WYSIWYG editors available and you were better off knowing how to actually write HTML in an text-editor of your choice. When Dreamweaver came out I walked away from writing HTML because the results were satisfying enough. Then I lost interest in websites and was more happy doing some print stuff. After a couple of years I got interested in websites again when the browser were finally supporting CSS and other webstandards properly. In fact it was Tim who got me hooked to the web again by showing me what was possible nowadays. Recently some people asked me how I would actually build websites. Usually the people who were asking me are mac users so they wanted to know the best tool. The first thing I tell them is that I don’t use any WYSIWYG editors like GoLive or Dreamweaver because the produce horrible and mostly inefficient code. Instead I use a combination of tools which I’m about to list right here:
- Transmit
- I use Transmit a lot. It is the major interface to all the webservers. It allows me to edit html and css documents right on the server. With a doubleclick on the file transmit opens the document in my default editor. When I save the file after editing it, transmit automatically uploads the modified file back to the server. This works pretty good. You can’t get confused with links or locations of files because you work right on the server – in the right environment. You can do the same with images, if they are not too heavy for your connection. In Transmit you can open .jpg files with your favorite pixel manipulation software, when saving it Transmit puts it back on the server. It also has tabs for multiple connections at the same time and you can even drag and drop files between theses tabs / servers. Look on panic.com to see the other cool features of Transmit.
- TextMate
- Textmate became my favorite editor in seconds. I didn’t even wait to let the trial version expire before I bought it. This piece of software behaves so well with xhtml, css and many many other languages. Tons of useful snippets, macros and autocompletions make Textmate my favorite. It also features a project view and tabs and really a lot of other great features.
- Firefox
- The browser of choice is Firefox. It isn’t the fastest browser on the mac but still the most accurate one in terms of rendering. Safari came pretty close but Firefox is still a little ahead. Firefox also is a lot better in debugging javascript. Another great feature of Firefox is its extensibility. URL: http://www.mozilla.com/
- Firefox Extension: Webdeveloper
- This extension is a must-have for every web developer. You can live edit the css of the website you are currently looking at to instantly see the effects of your modifications. You can let it outline all block level elements or display all the id and classnames of the elements. But it can do so much more. It is truly one of the most helpful tools to debug html and css errors and glitches. URL: http://chrispederick.com/
- FirefoxExtension: Firebug
- Firebug is a small toolbar that show up on the bottom of the Firefox window. It shows javascript and css errors and with a click on the bar it expands to a window with detailed information on the errors. With Firebug you can also see the »Ajax« data that is being loaded in the background or you can inspect elements of a webpage clicking on them. It is really the perfect partner for the webdeveloper extension giving you all the debug tools you need. URL: http://www.joehewitt.com/
- The W3C Markup Validation Service
- I know this one is pretty obvious but it also helps debugging unexpected behavior of you webpages so go there and check your websites. URL: http://validator.w3.org/
With these tools building webpages became a lot of fun and its fast too. I know different people use different tools but thats really not the point here. I just wanted to have a URL that I could people point to when they ask me: “So what are you using for building webpages?”