30 Panic Coda Tips and Tricks

I’ve only been using Coda for a day or two (see Panic Coda 1.0 First Impressions), but I have to admit, it’s growing on me. Coda isn’t just a pretty face. It’s simple and straightforward and a pleasure to use.

Panic Coda

As I’ve been poking around, I’ve been making a mental list of some things that make using Coda even easier. There’s nothing earth shattering here, but I decided to write this up so I would remember and in the hopes that you’ll add your own tips in the comments.

Be sure to read this post, too: Panic Coda: What’s Missing? 19 Free Apps to Fill the Gaps

General Tips

1. Switch between modes by pressing the Command key and 2 through 6 to jump to Edit or one of the other views. It isn’t listed on the View menu, but Command-1 will take you back to Sites.

2. By default, single clicking on a file will open it. You can change this in the Preferences, but holding down the Option button when clicking a file will select it without opening it.

3. The buttons at the bottom of the file browser aren’t that useful (it’s easier to use shortcut keys), but one thing you’ll almost certainly want to turn on is the Functions viewer (see below), which displays a Symbols pane listing the symbols in the current file.

Coda Symbols Pane

4. You can split tabs vertically or horizontally. The default orientation is set in the Preferences, but you can toggle between orientations by holding down the Option key before clicking the split button. To open a new file in a split tab, Control+click on the file and select Open in Split.

5. Coda doesn’t have enough shortcut keys. For example, if you want to take a quick peek at the Transcript window or the Clips palette, you have to go to the Window menu (or click Clips at the bottom of the Edit pane). See my instructions on Handpicked Software (OS X Tip: Creating Custom Keyboard Shortcuts) to learn how to create custom keyboard shortcuts for Coda in OS X’s System Preferences.

Sites Mode

6. If you want to use Coda to test a local WordPress or Pligg installation, the easiest way to get this working is to install MAMP. Make sure you have FTP Access turned on in your Sharing Preferences in System Preferences. Then create a new site in Coda with these settings (assuming a default MAMP install):

  • RootURL: http: // localhost : 8888
  • Remote Root: /Applications/MAMP/htdocs/
  • Local Root: /Applications/MAMP/htdocs/
  • Server: localhost
  • User Name: [the user name you login in to your computer with]
  • Password: [password you login to your computer with]
  • Port: 21
  • Protocol: FTP
  • List Encoding: Western (ISO Latin 1)
  • Use passive mode for data transfer (checked)

(Via comment #19 by dunk on The Unofficial Apple Weblog.)

Note: You’ll have to refresh pages manually to see changes when you preview your WordPress or Pligg install.

7. You don’t have to use the site preview for the site icon. To load any image, Control+Click the site icon and select Change Image. To clear it, Control+Click and select Clear Image.

8. The control menu also gives you an option to open the site in a new window, or to duplicate a site. If you have multiple domains hosted on one server, this is a quick way to create shortcuts to different directories. Just duplicate the site icon and edit the Remote Root field.

9. Double clicking on a site icon connects to the site, but not until it does a fancy flip to expand and open an empty Edit pane. If you enjoy this kind of eye candy, hold down the Command and Shift keys when you double click to see it in slow motion. This also works when you click to edit the site information.

10. When you’re connected to a site, you’ll see a little “x” next to the site name (see below). You can click this to disconnect.

Coda Site

11. Coda isn’t scriptable and it’s not compatible with Automator, but if you already have Transmit, you can create an Automator Workflow to synchronize files between your server and your computer. Sure, Coda lets you publish local files to your sites, but an Automator Workflow can synchronize in either direction.

Edit Mode

Coda Tab

12. Hovering your cursor over a tab name will give you a balloon with the title and volume, but Command-clicking on the tab name gives you the path to the file (see below).

Coda Path

13. To clone a tab, Control-Click on the tab name and select Clone tab. If more than one tab is open, control-clicking on a tab will give you an option to close all other tabs.

14. Shift-command-{ and shift-command-} cycle through open tabs.

15. You can change the syntax mode from HTML to CSS for autocompletion when working on a file that contains both kinds of code. Go to Text > Syntax Modes, or select the desired mode from the Syntax Modes sub-menu in the Action menu at the bottom left of the Edit pane. (See tip #5 above for how to create a keyboard shortcut for this).

16. If you already use SubEthaEdit, you can use your syntax mode files be copying them to the Coda folder in your Application Support folder.

17. You can highlight any word in the editor and hit Command-’ to look it up in the library, or just double click on a word while holding down the Command key.

18. You can make the font bigger or smaller by pressing Shift-command-+ or Command+-, just as you can in Safari.

19. To highlight the current line, check Highlight Current Line in the Colors tab of the Coda Preferences.

20. You can blockedit multiple lines in a file by holding down the Option key while making your selection. The cursor changes to a crosshair and selected text is highlighted in gray. To exit blockedit mode, hit Escape.

21. Be sure to turn on Hints by clicking the Hints button at the bottom of the viewer.

22. Select Revert to Saved from the File menu to download the original file and overwrite any changes you’ve made.

23. Be sure to click the warning triangle at the bottom of the Edit pane to turn on validation. Note: Coda only displays one error balloon at a time, even though you may see a number greater than 1 next to the warning triangle.

24. Sometimes, when validation is turned on, you’ll see an orange SnapBack button in the error balloon (see below). Clicking it will take you to the beginning of the error.

Coda Error Balloon

25. Coda doesn’t have anything like HTML Tidy built-in, as skEdit does, but you can install Tidy Service to tidy your markup from the Services menu.

26. BTW, if you grow to like the Panic Sans font and want to use it in other editors, Control-click on the Coda application icon, select Show Package Contents, then navigate to the Contents > Resources folder, double click on the font, and click the Install button in the font preview that pops up.

Preview Mode

27. You can toggle Preview and View Source views by hitting Option-Command-U. You can edit the code in Source view, but the original file won’t be updated. Be sure to Control-click and select Save Page As if you want to save the changes to a new file.

28. Hit Option-Command-B to open the Preview in a browser. Safari is selected by default, but if you choose a different browser from the popup menu to the right of the address bar, the next time you use the shortcut key it will open the most recently selected browser.

CSS Mode

29. For users of CSSEdit, CSS mode is probably the weakest link in Coda. Though useful as a cheat sheet, editing CSS in text or visual editing modes is awkward for the experienced coder. If you’d rather not use the graphical editor, you can open the CSS file in a split window and edit it directly.

Note that if you open a new HTML document and switch to the CSS pane, the CSS is just added to the top of your HTML document. If you decide to edit the CSS directly in the HTML document, see tip #15 above on how to quickly swap syntax modes.

30.Remember, you can always Control-click on your CSS files in the file browser and choose to open your CSS files in CSSEdit.

Leave a Comment.