The Chopping Block

5 Web Dev Tools I Can’t Function Without

Thursday, 05.14.09 at 2:22 pm

Written by Marissa, Posted Under: Code,Opinion,Studio

All developer/designer types have a myriad of applications in their arsenal that they cannot live without. I am going to skip over the obvious ones: Photoshop, Flash, Illustrator and focus on a few deeper tracks that you may or may not have heard of.

Textmateby Macromates http://macromates.com
In it’s simplest form, Textmate is a plain text editor. It’s a no frills way to get characters on a page. I’m using it right now to draft this blog post. But if you look deeper, Textmate is so much more. I primarily use it for Actionscript development. Textmate uses snippets and macros to turn itself into the perfect development tool. It highlights syntax for you, it helps write commonly repeated code with predetermined or user generated snippets, it even lets you select a column of text instead of just a row! We have even set up our latest Textmate bundle to create and scaffold your entire flash project for you, including the FLA and put everything in the right place. Textmate is completely extendable so anyone can write plug-ins or templates for it. I do not go a day in the office without opening up Textmate.

MailChimp http://www.mailchimp.com
Sure, we could build a custom server side newsletter application on our own. But, honestly, why would you when the folks behind MailChimp have done such a brilliant job for you? MailChimp is an html newsletter service that allows you to capture and maintain mailing lists and send html formatted email. It separates itself from all the rest of the email marketing world with a beautiful, easy to use interface, great analytics, a pay-as-you-go as well as subscription based pay model, and most importantly, a sense of humor. MailChimp has some of the best customer service I have ever encountered and they always seem willing to work with their customers for the best personal service. They have pre-formatted email templates and allow you to create your own template from scratch using html and CSS. They will even help format your CSS to comply to wonky email standards. They have a great API that allows you to make your own sign up forms. We have done quite a few of them in Flash here at the block. There is a nifty one here.

SquareSpace http://www.squarespace.com
SquareSpace is a relatively new player in the site builder game. Unlike WordPress, SquareSpace is a completely hosted and managed environment so there’s no dealing with your own web hosting and there’s little to no down time on the server. All that techy stuff is great, but the best part about SquareSpace is the rapid prototyping. SquareSpace allows you to drag and drop layout elements on your site with no coding at all. I am constantly tinkering with my own blog’sdesign and layout just because I can. You can change fonts, colors, even column widths on the fly in real time. In addition to the simple wysiwyg system you can also use your own custom css for more control over your site’s layout and design. The current version of SquareSpace lacks a few control features that I would like but I’ve seen version 6 and it is beautiful. SquareSpace also has a bunch of predetermined widgets that you can use on your site for things like social networking and sharing, blogging, and even forums and community features. We’ve been using it in the studio lately to build some client sites on. The wysiwyg front end allows our clients to easily update their sites themselves after we are finished building them.

Transmit by Panic http://www.panic.com/transmit/
Transmit is a Mac OSX ftp program. It’s very simple in that it does what you expect it to do. You connect to an ftp server, you upload and download files. But Transmit also has a few tricks up it’s sleeve. The one I’ve been using most is what they call the “Edit In Whatever” feature. With a quick keystroke,

⌘ – j, I can download a temporary version of any file on a server and edit it in any application I choose. For instance, I find an html page on a remote server, hit

⌘ – j and it opens up in Coda (or any html editor you choose). I make my edits, hit save, and Voila! Transmit uploads my edited version to the new server. Just be careful because you are working on the live server.

Another feature I’ve been using a lot lately is the ability to ftp into my iDisk easily. I know Mobile Me gets a bad rep but I paid for it, so I might as well use it. I find that Transmit’s ftp into the iDisk is much faster and more reliable than just dragging the file into my iDisk icon on the desktop.

CSS Edit by macrabbit http://macrabbit.com/cssedit/
There is a common response in the office when you ask for help debugging CSS markup: “Are you using CSSEdit?” Although this is a particularly annoying way to (not) help a co-worker, it’s certainly always the answer. CSS edit is definitely becoming a favorite here in the shop. Not only is the interface clean and beautiful, it’s also an incredibly powerful tool. There’s a live preview which shows you the changes to your site as you make them, visual Editors that show you previews of your classes and ids, and a pretty cool debugger. But the real power is in the X-Ray Inspector and the Override function. Using these tools you can grab the CSS from any URL and CSS Edit will make a copy of that URL’s CSS sheet, you can then edit it and see your edits in the preview window. Once you are done, you can upload your edited CSS back up the server. You can combine CSS Edit with the “Edit In Whatever” feature in Transmit and you have one hell of a work-flow going.

So those are my “5 can’t live without now that I’ve discovered them” tools. I know there are about a gazillion other applications and websites I use everyday, but these are a sampling of my most used.