Get Started


« Back to Blog Home
Jareth Tackett
By Jareth Tackett

Design Tools

When I first started out in the world of web design, I was a devout Windows user.  I had dabbled with Ubuntu, however due to it’s limitations and lack of a lot of third party software (the entire adobe creative suite), I finally decided that Windows was more stable, albeit a lot more clunky.  For this reason, Windows 7 had become my development platform of choice, coupled with Adobe Illustrator, Dreamweaver, Photoshop, Filezilla, and a few other various applications.  It wasn’t until I discovered the beauty of Mac OSX that I finally decided to leave Windows behind for good.

After making the switch to Mac, I haven’t looked back.  Mac provides so many useful productivity tools to designers that it would be a crime to ignore it.  Small things that took 10 minutes in Windows all of the sudden take 10 seconds in Mac.  Below, you’ll find a list of what I would consider my favorite productivity increasing tips for Mac OSX.

Connecting to an FTP server

Without a doubt, if you’re a web designer, you’ve probably used Filezilla (or the like) in the course of your work.  This extremely useful tool allows you to view the contents of your remote web server through a web protocol known as FTP.  FTP can come in handy, but not many people know that it can actually be integrated straight into the Mac OSX.  That’s right, you can actually set up an FTP connection to your web server in order to make the contents of your server appear in a standard Finder window.  Here’s how to go about this:

  1. Open a new finder window by clicking the icon in your dock bar.
  2. Push “cmd + k” in order to bring up the “Connect to Server” dialog (alternately, select “Connect to Server” from the “Go” menu).
  3. Enter the address of the FTP server in the “Server Address” field.  In most cases, this will be “ftp://” followed by your website’s URL or IP address.
  4. Click “Connect”
  5. You will be prompted to sign in as either a registered user or a guest.  Select “Registered User”, and then enter the username and password you use to connect to FTP.
  6. After waiting a few seconds for the connection to be made, you should see the contents of your web server appear in the resulting window.

By default, the Finder window displaying the contents of your web server will be a minified one.  In order to expand your options, simply click the silver button in the top right corner of the window.

The default FTP support for Mac does not support write permissions.  This means you can only download files from your server this way, and can’t upload or change anything on the server.  If you’re interested in setting up your Mac system to allow write permissions through the built in FTP system, I recommend looking up MacFuse, as that is beyond the scope of this article.

Home network folder sharing

While we’re on the note of connecting to external servers in order to transfer data using built in Mac OSX utilities, we’d better cover enabling file and folder sharing for your Mac.  Most folks that own a Mac won’t be too surprised by this one, but it’s still an extremely useful trick worth noting how to do.  Say, for example, you have a series of files that you need to move from your Mac laptop to your desktop.  You have multiple options to accomplish this, such as emailing them to yourself, or using external media such as flash drives or external hard drives.  A much easier (and faster) way to handle this transfer would be to enable folder sharing on your Mac.

Folder sharing allows you to make the contents of a designated folder visible to anybody that’s attached to your router.  You can edit the contents of this folder from any computer on the network.  As long as your laptop and desktop are on the same network, this will work without a hitch.  In order to enable folder sharing, follow these steps:

  1. Open “System Preferences” from your app drawer.
  2. Click “Sharing” under “Internet & Wireless”.
  3. Click the checkbox next to “File Sharing” if it isn’t already enabled, and then close this window.
  4. Navigate to where the folder you want to share is located, and then right click it and click “Get Info”.
  5. Under the menu that comes up, make sure to enable the checkbox next to “Shared Folder”.

That’s it!  Now, if you navigate to the “Network” area of your desktop using the built in file explorer, you should see the folder that you enabled sharing on.  Now, you can simply access that folder from any computer on your home network just by going to the “Network” section (or “Shared” on Mac).  This trick is a much more convenient way to transfer data around to the different computers in your house.

Using Terminal to automate server backups

If you’re a web designer, and you don’t work in Terminal, you should probably learn how.  Mac Terminal utilizes BaSH, which is the standard client used by pretty much all Unix distributions.  By learning how to use Mac terminal, your productivity and workflow will greatly improve, and you’ll be able to work from just about any machine (outside of Windows) regardless of what programs are installed.

Terminal can be used for everything from moving files around networks to directly editing and creating new files.  You can even create “scripts”, which are a collection of BaSH commands in order to run certain processes by only opening the script.  For example, you can automate the process of downloading files from your server by using a script.  The easiest way that I’ve found to automate server backups to date is using the “lftp” command.  Consider the following code:

  
#!/bin/bash
HOST='mywebsite.com'
USER='myFTPusername'
PASS='mYpAsSwOrD'
TARGETFOLDER='/path/to/local/folder'
SOURCEFOLDER='/path/to/website/files'

lftp -e "
open $HOST
user $USER $PASS
lcd $SOURCEFOLDER
mirror --delete --verbose $SOURCEFOLDER $TARGETFOLDER
bye
"

This piece of code will open an lftp connection, and sync all files from your server to your local machine.  Any new files since the last time this script has run will be downloaded, and any deleted files will be deleted from the local machine as well.  This is great for mirroring your web server to your local computer without having to manually copy files.

In order to use this piece of code, you must first make a new script and insert it.  In order to make a new script, open your Terminal, and type “vi pullWebServerBackup.sh”  This will invoke one of the built in Terminal editors, “vi”.  Vi is similar to a standard text editor, with commands to do many different things.  Once you’ve opened this new blank file, hit “i” on your keyboard.  You should see “Insert” appear in the bottom left corner.  Now simply copy and paste the code above into vi, and replace the “USER”, “PASS”, “HOST”, “SOURCEFOLDER”, and “TARGETFOLDER” variables with the values for your web server.  Once you’ve copied all the code over and replaced the values, hit escape to exit insert mode, and then type “:wq”.  This will save and quit your document and return you to the normal Terminal command prompt.  Now, in order to run the script and mirror your web server, you simply need to open Terminal and type “sh pullWebServerBackup.sh”.  This will invoke the script, and begin the mirroring process.  When the process is completed, all the files from the “SOURCEFOLDER” path on your web server should now appear in the “TARGETFOLDER” path on your local computer.

You can run this script every few days, or if you prefer, you can set it up to run automatically every night using crontab.  Crontab is a built in program that allows you to schedule the execution of certain scripts. In order to run this script automatically, you can add a line to your crontab file.  In order to edit your crontab, open Terminal and type “crontab -e”  This will open your crontab file (or create a new one).  You should recognize the editor as vi. Hit “i” to enter insert mode, and then paste this line into your file, changing the file path to be the path to your script: 

0 0 * * * /path/to/pullWebServerBackup.sh

After entering that line, simply hit escape and then type “:wq” to save and exit vi.  If setup correctly, this should cause your script to execute automatically every night at midnight as long as your computer is on and connected to the internet.

Congratulations, you’ve now got a script set up that will automatically mirror your web server to your local computer.  It’s extremely important to keep offsite backups, and this process allows you to do it with minimal hassle.

DigitalColor Meter application

On a slightly less technical note, Mac OSX comes with a built in color picker application.  This app is extraordinarily useful for quickly finding colors to apply in your CSS.  Can’t remember what the hex code is for the green you used on your website?  No problem!  Simply follow these steps to instantly pick the color without having to sift through your code to find it:

  1. Open your application drawer and click on “Utilities”.
  2. In the “Utilities” folder, click on “DigitalColor Meter”.
  3. When the meter opens, click the dropdown menu at the top, and select “RGB as Hex Value, 8-bit”
  4. Simply hover over the color you want to pick, and voila! You now have the hex code displayed in front of you.  In order to copy it to your clipboard, you can click “CMD + Shift + C”.

The built in DigitalColor Meter application majorly comes in handy and prevents you from having to repeatedly refer to a document to remember your hex values.  This tool greatly decreases turn around time for sites, and stays open pretty much anytime my computer is turned on.

Internet Explorer for Mac (with Wine)

What better way to round off a list of Mac tools for web designers than with some Wine!  Wine is a compatibility layer that allows you to install Windows applications directly to your Mac.  Using Wine, you can install Internet Explorer directly to your system.  Now, I understand that installing Internet Explorer is more of a kludge than a benefit, but considering it still holds a pretty decent chunk of the browser market share, it’s important to make sure your sites are optimized for this outdated browser.

You can find many online guides for how to install Wine and Internet Explorer all over the internet.  WikiHow has a decent article on using WineBottler to get IE on your system.  You can check out their instructions here.

All in all, Mac is a great OS for web designers and developers alike.  It provides many useful tools straight out of the box with no extra configuration needed.  After using my MacBook for a few months, it is undoubtedly my development OS of choice.  Even if you’ve never used Mac, I highly recommend giving it a shot to see how much it can help your productivity.

Leave a Reply

*

No Comments Yet.

Be the first to leave a comment on this article!