Posted on Jul 05, 2011

I thought I'd kick off this site with a post on my current toolkit.  This is something I had meant to do back in January, as a summary of all the tools, applications and websites from the past year that made my job and life easier.  Some of this stuff I discovered in 2010, but I kept the list updated with 2011 discoveries as time went on and this site got further delayed.

There's a few posts in this series, ranging from iPhone apps to Firefox Add-ons, but we'll start with web dev tools and text editors.

Software

XAMPP for Windows: I was a little late in discovering how much better life could be if you had a local dev environment.  (Being mostly self-taught without a computer science background, and coming originally from the front-end coding side of things, there are some techniques that hard core back-end programmers know of as a given but I had to pick up on my own.) XAMPP is a nicely packaged up distro of a collection of open source tech, like Apache, PHP, and MySQL, among others.  It's easy to install and get running, although you may have to do a bit of work to get it configured to your satisfaction.

Notepad++: My text editor of choice.  It's light and open source, with just enough core features to make me happy, and a plugin architecture for everybody else who wants more.  I've been using it years and I've got quite adept at using it, although in the next year I may be moving to another editor. Recommended plugins: Light Explorer, JSMin.  EDIT: Notepad++ was named Best Text Editor by Lifehacker.

CSSTidy: This is a command line CSS compressor that will strip out all line breaks, spaces, comments and empty definitions in your CSS file to produce a much smaller file. (CSS Compression is one of Google's and Yahoo's recommendations for improving page load times)  I use it with Notepad++'s command line executor to run my current CSS file through the compressor. (Unless I'm working with Drupal, which does the compression for me)  In the future I'll be looking into "build scripts" to help me automate CSS (and JS) compression.

Filezilla: My goto open source FTP client.

TortoiseSVN: Just like setting up a local dev environment, I only got into source control in the last few years, and now that I'm in it, I don't know what I did before. (I actually have a very good idea...index-v1.3.php.org :P) I've been using this Windows Subversion client just 'cuz it's super easy and because the company I work for uses Subversion, but I want to get into GIT in the future and find out what all the fuss is about.

Carbon Copy Cloner: Essential hard drive back up software for your Mac.  Makes it all pretty stupid easy.  Still need to find an equivalent for PC.

EDIT 2: IE Tester: Another slip of the mind!  Another essential tool for any web developer, IE Tester simulates Internet Explorer 5.5 through to 9 without having to install all of them.  It's great for look and feel checks, but not necessarily for testing full-fledged applications that require any kind of authentication.  It seems to have problems handling cookies and such.

Websites

JSLint / CSSLint: Quality control for your javascript and CSS.  The JS version is pretty essential, the CSS version you may have some disagreements with.  Fortunately, you can always decide to ignore the results from either, to your detriment or benefit.

Em Calculator: Perfect sidekick for doing CSS in ems while working with a design that's aimed at pixels.  Essential.

Diigo: Diigo is a bookmarking service + a bunch of other tools.  It allows you to write notes right onto a web page for later reference, as well as upload cached versions of a page onto Diigo's servers for later reference.  The features are great, but the interface kind of sucks.  I moved to this service after the Delicious scare last year and initially I liked it, but now I'm not so sure.  I'm in the market for another.

EDIT 1: HTML5Boilerplate: Man, totally forgot this one!!  I've been using the Boilerplate's CSS reset for almost a year now, and I've been converting it into Drupal subthemes as well. (Zen for Mazda, and AdaptiveTheme for this site)  It's pretty rock solid, although I've made a couple of customizations myself. (I'll post those another time)  I'd like to dig into the other components in the future, like the javascript structure and the build script, and add them to my workflow.

If you have any of your own favourite tools or processes, I'd love to hear about them in the comments!

Categories: 

Tags: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.