Back in 2006 I switched from a Windows PC to a Mac and never looked back. I can just work so much better with most Mac Apps than with their Windows counter parts. But lets not get in this Mac VS Windows war. What I want to talk about are my Mac Apps for Web Development. In fact they are just a handful, but I hardly can imagine working without them.
Sublime Text 2
Without doubt the code editor is the most important tool for a Web Developer. For a long time I used full IDEs like Dreamweaver (oh yeah, that's true) or Coda. It was fun and helpful in so many ways but I finally switched to, what on the outside looks like a very simple code editor: Sublime Text 2.
If you follow me on Twitter or have been reading this blog from it's beginning you probably know how much I love this editor. It's simply the right tool for my style of working.
I have three things I love most:
First, you can create as many tab groups as you like. This means you can view several files at once. Most of the time I use two tab groups next to each other. In the left one I almost always have CSS files open and on the right I can edit the corresponding HTML. You can also open one file in both groups, this comes in handy from time to time.
I’m kind of a heavy keyboard user, so I like it to just hit CMD + P and open up a little input field from where I can just start typing a file name, hit enter and open it. It’s so simple and fast. I just love it. It made me hide the sidebar which normally shows all of your project files. I simply don’t need it anymore and thus gain much more space for my actual coding.
The search is the third feature I love. It's incredibly fast, has a search and replace ability and that's basically it. It just works like it should.
There is so much more to Sublime Text 2. Go ahead and discover it for yourself.
Google Chrome (and other browsers)
Even back in the day while using Dreamweaver I never used the live preview. I always looked at the sites I was crafting in the browser. I switched from Firefox to Chrome to Safari to Chrome. It's just the fastest and the Web Inspector is great. And that's why I count Chrome as one of my work tools. I don't just view websites in it and make sure that everyting looks fine, I also work a lot in Chrome. I'm a heavy Web Inspector user. I have it open all the time. It's not just good to analyze your code if something doesn't look right — in my opinion it's also the fastest way of tweaking different things like font-size, margin, padding, and so on.
Did you know that you can click on the little wheel in the lower right corner and dock the Web Inspector to the right side of the browser instead of the bottom? I didn't know that for a long time and it's just great having it right there on the side the whole time, especially on a 27" screen.
Nevertheless I'm constantly looking at the things I'm working on in different browsers to make sure everything's fine. And from time to time I check out what Mozilla added to or removed from Firefox. Maybe it can get back to it's glory some day.
CodeKit
CodeKit is a must-have app for every Front End Web Developer. Period. CodeKit lets you compile SASS, LESS, Jade, HAML, CoffeeScript and all the other preprocessors you love. For me it's mostly for compiling my SCSS files and live reloading the page I'm working on. If you only save SCSS and no HTML it doesn't even need to reload the page, it simply injects the changes. That's super fast and makes working so much more fun. But CodeKit can do so much more for you like optimizing images and compressing files. It even tells you if your CSS or Javascript is wrong. It's really great and you need to at least try it.
MAMP (Pro)
For years I always worked on the live site directly on the server. Unbelievable, right? But it worked and it was super duper fast. Now I don't do that anymore. (Only if I need to fix something really quick on Marcel's Blog :D)
So I needed a way to view PHP files or even runs WordPress with MySQL locally on my Mac.
I'm not a terminal guy. I like it when I have a simple gui I can work with. So I use MAMP. You just install the app, hit START ALL THE THINGS and a few seconds later you have an Apache and MySQL running on your machine. You can set your home directory to where ever you want and nothing can stop you. I have a Websites folder in my Dropbox which is the root of my local server. Works perfectly.
I'm currently trying MAMP Pro because it offers some more features like defining different host adresses which point to different folders. So I can use qfm.static for my local QUOTE.fm files and watchedli.static for watched.li and so on. That's very nice.
GitHub
Git is a big topic on it's own, but basically it's just version control. You change something in a file, save it, commit it (which kind of means you save the changes) and then push it to a git server. On the git server all your files are stored – but not only that. All the changes are saved as well, so you have a timeline of what you did in which file and when. And what's so great about it is, you can always just go back to that point in time. There is more like branching and merging, working together and so on. But that would blow this article.
I don't have an own git server, I (and we at QUOTE.fm) just use GitHub. You can have public repositories, so everybody can see your files, download them or fork them. You can also pay for an account and have private repos. The GitHub app is very easy to use and understand. It's just simple and works. The right kind of app for me.
SnapRuler
It's rarely the case that I design someting myself what I code later. So most of the time I get Photoshop files and create HTML and CSS from it. That means there is all the time the need for measuring widths, gaps, etc. For rough measuring it's okay to just use the build in Mac OS X tool which is actually used for making a screenshot of a certain area. But if you hit escape you can just leave the mode without recording anything. That's okay, but often not good enough. So I did a lot of screenshots in a normal day and viewed them in Photoshop to measure precisely. I knew that there were tools out there which could help me, but they were either behaving very strangely or had just too much features I didn't need. But then I discovered Snap Ruler.
Snap Ruler is a simple app that lives in your Mac OS toolbar. You can easily invoke it thourgh a keyboard shortcut (CMD + SHIFT + D is my preference) and start measuring. It features a loupe which makes it easy to measure really exact. You can even activate a slow motion mode while holding down CTRL.
The app can do more for you like you can copy the values you just measured in different languages like CSS or HTML. But I never use that. Again, it's a very simple app that just works and does what I want.
Transmit
Since I'm not using a complete IDE anymore which has a FTP client build in I need a dedicated FTP client and there is just no better app for that than Transmit. It's fast, it's good looking and it does it all. Favorites, Syncing both ways, FTP, S-FTP, Amazon S3, WebDAV and just everything you wish for in a FTP client.
What are your tools of choice?
So these are the Web Development tools I use every day. I hope you maybe found something new or it was just a little bit interesting to see with which apps I work. And now I'm interest in what your most used apps for Web Development are. And why? I'd love to see a few blogpost on this topic from you guys! Or just write a comment below.
