If you're like me, when you get a new computer you can't load it up with all your favorite programs and tools fast enough.  There are tons of great web development tools out there for download, but one must be careful not to overlook some of the great tools that come pre-installed on every mac.  Many of these tools are a result of Apple's historical focus on the graphic design and print folk.  Here are the ones that I use most regularly.  

 

Grab

 

I figured I'd start with one of the most useful tools on the mac, Grab.  Back when I was a PC user taking a screenshot involved hitting "printscreen", opening MS Paint, pasting the screenshot, and saving to a file.  When I switched to the mac and stumbled across Grab it was just another one of those delightful surprises you run across when you make the switch.  Not only would it throw any screenshot I took onto the desktop in my favorite image format, .png, but it also allowed me to draw a box around whatever it was I wanted to take a screenshot of. It's the latter feature that makes Grab such a simple yet powerful tool for web developers. When you drag a box around an area it it actually shows you the height and width of the box in pixels.  I find myself using grab to slice up images when I don't feel like booting up Photoshop.  I even use it to make quick measurements of graphical elements by hitting escape before letting go of the mouse button and capturing the screenshot.  Grab is useful for grabbing quick screenshots of graphical elements and inspiring designs online for those of us who are constantly looking for design trends.  It even allows you to focus on a specific window so you don't have to do the measuring.

 

Digital Color Meter

 

Digital color meter is basically an eyedropper for your entire system.  Say you want to match the color you find on a particular website, or an image you've stored in iPhoto.  Again, before I was a mac user this would have involved taking a screenshot and then using the eyedropper tool in an image editor to get the color I need, or finding a third solution.  On the mac, you already have a global eyedropper, and it allows you grab down to the pixel the color you want, displaying it in a wide variety of ways from HEX to color percentages and more.  

 

Zoom

 

Zoom is actually an accessibility tool that's supposed to help those who are hard of seeing, but it actually doubles quite nicely as a handy-dandy web development tool.  Often times when you are designing a website or graphic you need pixel perfect accuracy.  In photoshop you can zoom in easily enough but what if you're pushing divs in a browser?  Zoom allows you to quickly zoom into a section of the screen so you can determine whether elements are lined up, pixels are out of place, etc.  To activate it you simply hold control and either use two fingered scrolling if you're on a laptop or your mouse wheel if you're using a desktop and you will zoom in down to the pixel if you so choose.  

 

Safari Debug Mode

 

While certainly not a replacement for Firebug or the Web Developer Toolbar, Safari's debug mode is actually quite handy for developers.  The trick is that it doesn't come activated by default.  To use it, you'll have to pop open Terminal and enter in the following: 

 

defaults write com.apple.safari IncludeDebugMenu 1

 

A quick restart of Safari and now when you right click a web element you'll see an "Inspect Element" option in the pop-up menu.  Up will pop a plethora of useful information and handy visualizations about the website you're currently viewing.  It even has a "Network" view that lets you see how long each element and file is taking to load up which can be very useful for optimizing a site.  Although Firebug also lets you track network statistics, I like the look of Safari's version better so I find myself using that more often.  Admittedly, I don't use this feature as much as I do my trusty Firefox plugins but it is a very handy alternative.  Here's a list of the features:

 

• Viewing DOM tree
  
• Snippet Editor
  
• Page load tester
  
• Use transparent windows
  
• Show a JavaScript Console
  
• Full Safari shortcuts
  
• Tweak supported protocols
  
• Increased security certificate information 
  
• Profiling 
  
• Importing IE and Mozilla bookmarks
  
• Disable RSS support
  

 

Terminal

 

This one goes without saying for most developers, but the Apple terminal comes with a myriad of useful tools like SSH, VIM, etc.  I only mention it here because it's not something you get out of the box with a PC so please don't take it as flame-bate  

 

Console

 

Have you ever attempted to open up a 80mb log file with textmate or equivalent text editor?  Then you know what it feels like to crash.  Console is built for this type of job and it chews through massive log files like a chainsaw.  

 

Time Machine

 

I learned the hard way that every developer MUST use some sort of version control system.  I spent the first five months of my young development career without it and not only did it make deploying apps a pain in the arse but it was devastating whenever a file was overwritten or lost.  Thankfully, being the mac-head I am, I've been using Time Machine since it was released and it has served me well on more than one occasion.  Time Machine is strikingly similar to a version control system, although not really geared towards developers.  Basically, it will save a new copy of a file onto your backup hard drive when that file has changed.  If any of these files are lost, overwritten, or corrupted, you can go back "in time" (get it) and retrieve an earlier working copy.  I use subversion for all my projects now (haven't quite become cool enough to use Git yet) but I still think of Time Machine as my second line of defense, say, if my server goes down and takes my repository with it.

 

Spaces and Expose

 

These features may seem obvious to the average mac user but I think they're worth mentioning.  If you're a do-it-all developer like me, you have damn near 30 programs up and running at any given time, from text and image editors, to browsers, to terminals, to iTunes.  The thought of trying to cram all that stuff on one desktop makes me dizzy. Spaces is one of those features that after you start using it regularly you wonder how you ever lived without it.  I use no less than 8 spaces, each one dedicated to a different facet of my development process.  I use a separate space for daily BS browsing and chatting, mail and calendar, photoshop, my text editors and terminals, windows, IE6, iTunes and the other iLife apps, stickies and cal

 

Ruby and Rails

 

This obviously is only going to apply to those who develop in Rails, but it's noteworthy to mention that Apple started shipping all Macs with Ruby and Rails pre-installed.  This makes it very easy for beginners to get up and running who maybe only have a basic understanding of Unix to start off with (yours truly).  For someone who started out with very little knowledge about *nix environments, getting Rails to run on a local server was not exactly trivial.  Now that it's pre-installed, any budding developer can pop open their mac for the first time and type "Rails million-dollar-website-idea" and start on the pathway to fame and success with relative ease.  For those of you who don't develop in Rails it's still handy to have a language as robust and intuitive as Ruby to do some scripting with.  If you haven't used Ruby I suggest you give it a shot, it's an absolute joy and rekindled my interest in programming.

 

 

So there you have it;  8 tools that I personally find extremely useful and use on a daily basis.  Here's hoping that Apple continues to focus on the graphic design and developer worlds into the future and add even more useful tools for us to use.

Subscribe to Just a Nutter RSS Feed