Like all tools, Mac OS X requires some tweaks before it is optimized for crafting web content. While there are many possible changes to make to the operating system, the first and most basic alteration is also the most important: adding the ability to see the complete name of any file.

Mac OS X Finder preferencesLike most modern operating systems, OS X hides filename extensions (the .xxx suffix) to present a “cleaner” appearance. That’s fine if you’re just dragging and dropping icons, but serious development requires you to know the complete name of every relevant resource. Thankfully, the steps to do so in OS X are very simple:

  1. Make sure you are in the Finder environment.
  2. Tap the near-universal Mac keyboard combination for preferences: ⌘ + ,
  3. Select the Advanced panel in the Finder Preferences window that appears.
  4. Turn on Show all filename extensions
  5. Close the window by tapping ⌘ + W

That’s it. This simple step eliminates any confusion between .jpg and .jpeg by making the extension for every file visible at every level of the operating system.

Further Steps

There are a few more steps that you can take to make web development work on a Mac easier; these are best done as commands entered from the Terminal.

Show dotfiles (such as .htaccess) in the Finder:
defaults write AppleShowAllFiles TRUE
Use column view as the default for Finder windows:
defaults write FXPreferredViewStyle Clmv
Avoid creation of .DS_Store files on network volumes
defaults write DSDontWriteNetworkStores -bool true
Allow text selection in Preview/QuickLook
defaults write QLEnableTextSelection -bool true