8 Killer Web Development Apps for OS X: Guaranteed to Save You Time and Money
Stardate June 1st, 2008 – 19 CommentsIf you want to succeed in web development then finding the right tools is vital. It not only saves you time and money, it also makes things easier – letting you enjoy web development again and helping you take the edge off this sometimes stressful profession.
Since I moved to a Mac 16 months ago I’ve waded through piles of applications, all fighting to make my life easier. I tried each one in my regular development environment and let natural selection run it’s course.
The experiment is over and the results are in. We’ve been left with only the strongest, fittest specimens – my top 8 apps that’ll save you time and money, and I hope will keep that hair attached for a little while longer.
1. Coda – Single window web development
Coda is without a doubt the most useful application I’ve encountered in recent years. The basic premise is that everything you need (text-editor, FTP, preview, CSS-editor and code reference) is rolled into one compact and well designed package – giving you a one-stop-shop for all your basic web development needs. It means an end to switching between multiple applications, ultimately saving you a bucket-load of time.
What I love about Coda is that even though Panic have made sure to include everything but the kitchen sink, there is no bloat. Every feature has been carefully designed to serve a purpose and to do it well.
The feature list is as long as my arm, but my favourite ones include:
- Storing references to all your sites – saving you time by being connected to the FTP and ready to edit files in a simple double-click
- Automatic code completion
- Inline HTML validation
- Full Webkit preview – including DOM inspector and Javascript console
- Reference books built-in for HTML, CSS, Javascript and PHP
- Commonly used code can be saved into “clips” for easy access in the future
- Using the fully-featured Transmit Turbo engine for FTP – giving you support for nearly every type of server
I would like to see Subversion (SVN) support added in the future, and the ability to link the Books area to online documentation – especially for frameworks like jQuery.
Overall, Coda will save you countless hours. You won’t know what to do with all the free time you’ll now have!
2. MAMP – Your personal web server
MAMP is a fully functional personal web server that is contained within a compact 127mb folder. It has no installation process and controlling it is as simple as pressing a single button – there is even a dashboard widget so you don’t have to load the control panel. Oh, and I almost forgot: It’s completely free. Any more killer and this app would need to be arrested! (I can hear the groans from here!)
MAMP is great is because it allows you to work in a completely enclosed environment without the internet. It gives you the peace-of-mind that you’ll be able to meet deadlines even if your connection goes down (although if this happened you’d probably be sobbing in a corner somewhere instead).
Another great feature of MAMP is that it gives you somewhere to quickly test out new ideas and set up fully functional websites without needing to pay for hosting and waiting for files to upload.
Included in the box is:
- Apache 2.0.59
- PHP 4.4.7 & 5.2.5
- MySQL 5.0.41
- phpMyAdmin
- and much more!
Keep an eye out on the blog for an upcoming series about setting OS X for web development as I’ll be covering MAMP and some of the advanced things you can do with it.
3. TextMate – Text editing with oomph
If you do any sort of programming then you should be checking out TextMate: an amazingly powerful and versatile text editor that is a master of it’s trade. The power comes from it’s “bundles” that give you syntax highlighting and code completion for just about every major programming language. The cool thing about bundles is that you can easily modify them if they don’t support your needs, or even make your own – they are true time-savers.
One my my favourite features is the in-built Subversion (SVN) interface, allowing you to grasp the power of version control without leaving the confines of the editor. In essence you can access all the functionality from a few simple keyboard shortcuts – this is where the power of bundles really comes into play.
What I love about TextMate is that it doesn’t try to be something it’s not, it sticks to what it’s good at – being a text-editor. This is great is because it means you get the best, most refined and powerful functionality, allowing you to really concentrate on programming and not fighting back bloat and confusing interfaces.
4. CSSEdit – Live style-sheet testing
We’ve all been there, the CSS on your new website isn’t working as it should be and you just can’t work out what is causing the problem. You could try using the DOM inspector in your favourite browser and pick though the styling, finding a possible culprit and then going into your CSS file, editing the offending property, uploading it, refreshing the browser, waiting, and… finding out it wasn’t that bit which caused the problem after all!
Ok, so maybe that is a bit over the top, but wouldn’t having a way to edit the CSS of a live website on-the-fly be much easier? Well this is where CSSEdit comes to save your day.
What I love about CSSEdit is that you can overwrite the CSS of absolutely any website, tweak it, and get a live preview of the effects. It will save you from hours of that hair pulling stress when you just can’t seem to track down that dodgy code (not that it ever happens to me… honest!). It even has a WYSIWYG editor for creating CSS from scratch if that is the way you roll.
5. MySQL GUI Tools – Databases made easy
I’ve cheated a bit here as this is technically 2 applications, but I won’t tell anyone if you don’t! The MySQL GUI Tools comprise of an administrator and a query analyser – allowing you to manage and manipulate your databases respectively. The main draw of these applications is that you can access everything externally from the comfort of your desktop, none of that laborious phpMyAdmin run-around in your browser.
What I believe is the most valuable feature of the administrator is the ability to run automatic backups of your databases without any intervention on your part. Knowing that you have these regular backups of your database under your control is priceless.
As for the query analyser, it is a powerful tool that lets you run MySQL queries and manage your databases within a simple interface. Having this functionality on the desktop allows you to really speed up the creation and management of databases while developing web applications.
The best bit of the MySQL GUI Tools is that it’s free. You just can’t beat a price tag like that.
6. xScope – Useful design tools
xScope is actually a whole plethora of tools to aid your design and development process. It has a tiny footprint as it runs mainly from the menu bar, and is compatible with absolutely any application on the Mac because it runs over the top of everything.
Some of my favourite things that you can do with xScope are:
- Easily selecting hex colour values with the loupe
- Overlaying horizontal and vertical guides to aid in alignment of grid layouts
- Adding rulers to accurately measure elements on your screen
It really is a true time-saver, especially in the early stages of development when page elements are shifting and you want to quickly check your website is following the grid system you’ve chosen.
The only thing I’d change with xScope is removing the application completely and letting it run solely from the menu bar. I don’t believe there is any point to the dock icon and having what is effectively an empty application open on your screen.
7. EM Calculator - I’ve got the rhythm. Have you?
Maybe you haven’t noticed, but Rawkes has a strict vertical rhythm in place. What is this I hear you ask? Well it’s a topic for another post, but I’ll point you in the direction of these excellent articles on the subject. In a nutshell vertical rhythm is controlling the line height and vertical spacing of elements to achieve a consistent rhythm across the entire website.
If you’ve dealt with vertical rhythm before then you’ll agree that calculating all the values is laborious and often results in positioning of tiny elements taking a lot longer than expected. Thanks to the EM Calculator we never have to deal with these issues again! The calculator does just that, it calculates all the EM values for you. All with the simplest of inputs from your end – just a starting font-size and the resulting pixel size you want to emulate. It really is as simple as that!
It gets even better. The calculator can save you even more time by generating all the CSS code for you, allowing you to quickly plug it into your style-sheet and concentrate on more pressing matters, like catching up on the latest at the Rawkes blog!
You’ll need Adobe AIR to run the EM Calculator.
8. Reggy – Regular expression testing
If there’s anything more frustrating than vertical rhythm, it’s regular expressions. You can easily find yourself spending ages carefully crafting an expression, only to find it doesn’t work when you upload it. Why? Because you didn’t test it. Reggy makes regular expressions painless, and anything that makes them easier is killer in my books! Still not entirely convinced? What if I told you it’s free? There we go.
Reggy gives you a live preview of what your regular expression is matching, saving you all that hassle of waiting until you’ve added it into your script and uploading it only to find it didn’t work. The live preview is even a great tool for beginners to regular expressions – it’s made perfectly for quick trial and error.
I think that Reggy could be improved by having a cheat-sheet for regular expressions on display to make things easier for the uninitiated – the interface could certainly handle it.
Comments
19 Responses to “8 Killer Web Development Apps for OS X: Guaranteed to Save You Time and Money”
-
-
Rob Hawkes says: [perma]
@Curvball: Thank you, I’m glad to hear that the list has been useful. I’d highly recommend getting Coda, you should at least download the trial and try it out.
-
-
-
-
Rob Hawkes says: [perma]
Thanks again everyone, I’m glad you all enjoyed the post.
@kip0130: You should really get a Mac, we all know they are the best! ;)
-
-
Rob Hawkes says: [perma]
@Rachael: If you buy me an iPhone and pay for a year of bills then I’ll buy you a Macbook. Deal? Awesome…!
-
-
Thomas Hardy says: [perma]
Fantastic article, I have a mac mini on the way should be here in a few weeks and I will defiantly be trying out this.
Keep up the great work Rob!
-
Lee says: [perma]
Great article Rob. I’m still trying to find funds to get that iMac 24″ that i mentioned on WDF a while back.
When I do, I’ll be back here downloading all this luvvly jubbly software. Maybe then I can take myself seriously as a web designer bod (a bit hard to do that now when my Advent Laptop keeps switching itself off if I have the nerve to open more than 2 applications at the same time! lol!).
:)
-
Aaron Russell says: [perma]
Nice list Rob. And thanks for bringing ‘Reggy’ to my attention. I HATE regular expressions, but Reggy’s gonna make my life so much easier. Also I’ll have to get round to giving Coda a propper run out sooner or later.
My additions to the list would by CyberDuck and CocoaMySQL - both free and both I cant live without.
-
-
Richard says: [perma]
Good list Rob. I love lists. Especially Mac-related lists! :) One or two apps there I haven’t used so I will check them out. Have to say though, I have tried and ultimately failed several times to fit Coda into my workflow. I am a little too entrenched in Textmate and my current workflow. More and more people seem to be raving about it, and it has some nice advantages if you use Expression Engine - http://expressionengine.com/blog/entry/live_preview_with_coda_and_other_ides/.
Re: cheat sheet for regular expressions. You probably are well aware of this, but I’ll link to it anyway - http://www.ilovejackdaniels.com/cheat-sheets/regular-expressions-cheat-sheet/
-
Rob Hawkes says: [perma]
@Aisling: You should really go out and buy a Mac! ;)
@Thomas: I’m glad you found it useful.
@Lee: Those iMacs are pretty swish, you definitely won’t regret it!
@Aaron: Reggy is such a great little app isn’t it? Let me know how you get on with Coda!
@Meshach: Thank you :)
@Richard: Thanks for the kind words. I’m a big fan of those I Love Jack Daniels cheat-sheets, they are great.
-
-
Rob Hawkes says: [perma]
@James: Thanks for taking the time out to come here and leave a comment. Your app has saved me my sanity by making EM calculations painless.
I’m glad you like the write-up. There are a lot more articles coming soon in regards to web development on the Mac – watch this space!
-
7 Applications to Make Developing on a PC easier. | Nobledesigns.org says: [perma]
[...] on Rawkes there was a post about “8 Killer Web Development Apps for OS X: Guaranteed to Save You Time and Money“. After reading the article it left me thinking. Are there any quality development apps for [...]
-
8 Killer Web Development Apps for OS X: Guaranteed to Save You Time and Money » Captain’s Blog » Rawkes says: [perma]
[...] Check out all of the applications over on Rawkes [...]
Very cool list Rob. Just downloaded the MySQL GUI Tools - that is going to help me out in a big way.
I might have to add CODA to my toolbox soon too.