The Ultimate Hand-Coding Toolbox
I started my journey into web development the way a lot of newbies do. I shelled out a few hundred dollars for Dreamweaver (version 4 at the time), dropped mockups into Design View, and uploaded the files that popped out the other side. The process was quick once I figured out the software. But after awhile I noticed something was amiss.
I was learning how to master Adobe’s program, but I wasn’t really learning how to build websites. The What-You-See-Is-What-You-Get (WYSIWYG) editor obscured the most important part of web development: the code. So I decided to leave the WYSIWYG behind, dig in, and learn how to build tableless web designs from scratch.
From that point on I wanted to fill my hand-coding toolbox with programs that were the opposite of Dreamweaver. They had to be:
- Easy to learn and operate without a lot of preset features,
- Light on memory and resource usage,
- Free or low cost, and
- They couldn’t hide or hinder the coding process.
I worked through a lot of software in order to reach the collection of tools below. Some of them I use on a daily basis. Some I use only occasionally. All of them are free.
So without further ado, I give you The Ultimate Hand-Coding Toolbox.
Text editor
A good text editor is the heart of the hand-coding toolbox. You could use notepad or whatever plain text editor is bundled with your operating system, but there’s really no reason to settle. There are plenty of free alternatives with features to make hand-coding faster and easier.
Windows – Notepad++
Hands-down the best editor for Windows. With syntax highlighting, auto tag completion, code folding, and much more, Notepad++ is a lightweight program with everything you need to code XHTML and CSS. Make sure you grab the TextFX plugin (built into newer versions) and the Explorer plugin (a nice file browser) from the plugin repository. While you’re there, check out the 60 or so other plugins available for even more flexibility and features.
Mac OS X – Textwrangler
Textwrangler is one of the best free text editors for Mac OS X. However, if you’re willing to shell out a little money, I’d recommend either TextMate ($60) or Coda ($99) for more robust features and support. They all have their pros and cons, so give each a try to see what works best for you.
Browser
If a text editor is the heart of the hand-coding toolbox, then a browser is the soul. It’s the reason developers build tableless websites. And for web design and development, there’s no better browser than Firefox. Not only does it adhere to accepted web standards, there’s a ridiculous number of add-ons available to streamline the hand-coding process. Just remember to limit the number of extensions you have enabled so the browser stays quick and stable.
Here’s a list of my favorite add-ons:
- Firebug – I couldn’t live without Firebug. You can tweak CSS properties right in the browser and see the results live, inspect XHTML elements to sort out layout problems, monitor network requests, and more. This is a must-have add-on for Firefox.
- Web Developer Extension – Another add-on with indispensable features. View the generated source code from pages with javascript, disable and enable style sheets and javascript, analyze XHTML elements, validate local and remote markup and CSS, and much more. Plus, it includes some nice features from stand-alone plugins like MeasureIt (a ruler to measure elements in the browser window) and Window Resizer (resize the browser window to test different screen resolutions).
- Live HTTP Headers – It shows the HTTP header calls made with each page load in real time, which can help you sort out issues with caching and redirects.
- Yahoo! YSlow – This is actually an extension to Firebug that works with its network monitoring features. YSlow tests the performance of your web pages and offers suggestions to tweak the underlying code and server settings. Shoot for an ‘A’ grade to push your web development skills to the next level.
- Pixel Perfect – This is also an extension to Firebug. It lets you overlay a copy of your mockup in the browser window, which can save a lot of time flipping between Photoshop and Firefox.
- GridFox – This creates a grid overlay in the browser window. Combine it with Firebug and you can nudge elements into perfect alignment.
- FireFTP – I prefer a stand-alone FTP program, but this comes in handy on occasion. It has all the features you need to upload files, including directory comparison and the ability to transfer through SFTP (extremely important for security).
I know Internet Explorer is the browser everyone loves to hate, but it is used by the majority of people outside of the tech and design communities. Plus, there’s a little-known Internet Explorer developer toolbar that mimics the functionality of the developer toolbar for Firefox. Just food for thought.
Cross-browser compatibility
A website may look great in Firefox, but that doesn’t mean the layout is ready to be released into the wild. Cross-browser compatibility testing is critical and ensures visitors have a consistent experience regardless of the browser they use.
IETester provides Windows users with easy access to Internet Explorer 6, 7, and 8 in one place. It suffers from random crashes, but that’s a small price to pay for the convenience of three browsers in one. (I’ve found that you can avoid a lot of glitches if you open an IE8 tab first.)
If you’re on a Mac, you can to try the spoon plugin, which lets you run your websites through different browsers in an online “sandbox”. There’s also the Adobe BrowserLab. It’s free now, but expect Abode to charge for it in the near future.
In addition to those tools, you can always download the full versions of other browsers. Sometimes there’s just no substitute for the real thing. I have these installed in a separate folder and check finished websites in each one before I wrap up.
FTP
FTP, or File Transfer Protocol, is how you upload your shiny new, hand-coded web pages to the internet. FileZilla is one of the best stand-alone FTP clients and it’s available for both Windows and Mac OS X. If you’re using Notepad++ there’s an easy way to integrate Notepad++ and FileZilla so you can edit files directly on the remote server.
Remember to always transfer files through SFTP where possible. Otherwise you send your username and password over the network in plain text.
Local server
If you plan to do more than deliver static HTML pages, you’ll need a local server. A WAMP or MAMP stack (short for Windows or Mac + Apache-MySQL-PHP) allows you to run server-side languages and even database driven packages like WordPress from your desktop. I install Apache, PHP, and MySQL from scratch on my Windows boxes, and there are plenty of online tutorials to walk you through the process. But if you’d prefer a simpler solution…
Windows – XAMPP
XAMPP will have you up and running in a few minutes with everything you could need from a local server.
Mac OS X – Built-in or MAMP
Mac OS X has a built-in Apache server and there are lots of online tutorials that explain how to access it. Or you can go with MAMP, which is a one-click solution that installs Apache, PHP, and MySQL.
Knowledge and willingness
The last piece of the hand-coding toolbox is you. You need to be willing to dig into the code, problem solve, and discover for yourself how websites and the basics of the internet work. The more time and effort you invest in yourself and your skill set, the easier it’ll be to create great websites from scratch no matter what tools you have at your disposal.
How about you? Have any other tools you use on a regular basis that should be added to The Ultimate Hand-Coding Toolbox? Let us know in the comments.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
11 Comments
Excellent list of tools and resources, I also use Notepad++.
Great video guys! I think its really cool how you are getting the word out about best practices and helping to further support standards based coding techniques.
Keep up the awesome work and I look forward to your future posts.
Good tool set listed, thanks.
My situation was a bit different – I started by learning handcoding exclusively, and when I started using DW it felt awkward when it auto-closed tags for me. Always felt like I wasn’t doing something completely. (Sort of like the difference between driving a manual and automatic transmission vehicle – just a better sense of control in a manual) I got over that in time, and although I’m not using the full power of DW – I still use it as an editor and site manager. I use CSS Edit for the CSS portion of it – I like it better than DW’s version.
Version control was overlooked. CVS, SVN, git, Mercurial or any of the other options, but something should be used to manage revisions.
While XAMPP is really good. For Windows I use Uniform Server for a good WAMP stack implementation. http://www.uniformserver.com
I use Coda. It’s an awesome bit of software, I highly recommend it.
if I need a ftp apart form what Coda supplies I use transmit. FTP’s something you don’t need a lot of bells and whistles on, and Panic (the makers of both coda and transmit) have figured that out.
Very useful tools list — I’ll have to have a look at those Firefox add-ons, as I haven’t really been using that to it’s fullest.
While I’ve found TextWrangler great for some languages (Perl in particular), I’ve run into some issues with its code-coloring in HTML (more than once, it’s marked things as comments that were not, for instance, which slows down the process a bit). I’d also recommend Smultron (Mac only, unfortunately) as a good bare-bones HTML editor.
Notepad++ over here, but this article has shown me that I’m missing a few things… I’ve always been surprised that I didn’t have auto tag completion but maybe I’ve just turned it off…? And the integration with FileZilla is something I’ll be trying shortly after typing this comment!
As for WAMP, I’ve been using Wampserver lately and it’s pretty good! Just another option for all y’all.
I like testing in Opera, but it’s a bit of a hot topic around my workplace. Opera discovers the most pure CSS/XHTML bugs in my opinion, but since it has very little market share, none of the stakeholders really care. Weird! Opera also includes a FireBug-like application called DragonFly. We test on a real Mac, virtual linux boxes, and use the Spoon browsers for anything not installed on a virtual or real box.
nice tools of hand coding, thanks for the list..
Great article and sharp site btw. Love the live preview for this commenting system by the way.
This is a nice succinct roundup of tools.
great job. even though i use dreamweaver more than any other editor, i always use dreamweaver’s Coder UI.