20 Excellent Coda Tips


I’ve been using Coda for a while now, and it’s become my web development application of choice. There are quite a few great web development applications out there (read “18 Wonderful IDEs for Windows, Mac, and Linux“) but if you’re a Mac user, Coda is easily one of the best.

Here are 20 excellent Coda tips to increase productivity that I’ve gathered during my use of Coda so far.


1. Set Your Preferences

There are a few things I had to change right away when I first started using Coda. These are all found in Coda’s preferences.

I never use a GUI CSS editor so I set Coda to always open CSS files with the text editor.

Coda Preferences General Tab

Under the Editor tab I’ve check-marked “Show line numbers” and “Use tabs” for indenting. You can hide/show line numbers by pushing Command + Option + L as well.

Coda Preferences Editor Tab

Under the Colors tab I’ve check-marked “Highlight Current line” to make it easier to see where the cursor is when switching back and fourth between applications.

Under the files tab I set files to open when double clicked instead of a single click. You may also need to setup your external editors. Coda automatically used Photoshop for the image formats I use.

Coda Preferences Files Tab

This is how Coda’s navigation bar at the top is by default. This is just a waste of space in my opinion although it is pretty.

Coda Nav Bar Big

I’ve changed mine to display only text titles and as small as possible. Since I don’t use the buttons I have that section minimized most of the time anyway. Instead I use the shortcut keys which I’ll cover next.

Coda Nav Bar Small

Aside from these changes, I’ve left everything else at the default settings. I’ve played around with the color schemes a little but I didn’t find anything I was really happy with so I’ve kept the default color scheme.


2. Switching Modes

If you aren’t using shortcut keys to change modes, now is a good time to learn. Pushing Command + 1-6 changes the mode you’re in. You can switch between your sites, editor, preview, etc. modes very quickly this way.


3. Navigating Open Documents

Pushing Command + Shift + Left or Right Bracket will navigate through your open documents.


4. Line Indenting

Coda automatically indents certain markup for you by default but you’ll still find yourself using the Tab button pretty frequently. Instead of jumping to the front of a line to indent it you can push Command + Left or Right Bracket to indent the line the cursor is currently in.


5. Clips and Text Inserts

Pushing Command + Control + C will open up Coda’s clips. Clips is a place to store snippets of code for quickly inserting into documents. You can save snippets for use in all documents or just site specific clips.

Coda Clips General

You can assign tags to quickly insert clips. For example, I’ve set “htmltemp” to insert an HTML 4.01 Template when I start a new document. I would type “htmltemp” into the blank document and push Tab to insert the clip. You can also insert a selection placeholder if the cursor needs to go somewhere specific in the clip after being inserted.

Coda Clips General

6. Inline HTML Validation

Validate your HTML while you’re working. Okay, if you’re experienced with HTML you might only want to use the validation feature when you’re ready to validate, otherwise you’ll have errors popup as you’re typing which can be pretty annoying.

Coda Inline Validation

Coda will tell you what needs to be fixed. Sometimes there is a little orange “snapback” button in the balloon that will take you to the beginning of the error when clicked.

Coda Inline Validation Example

7. Use Coda’s Hints

If you aren’t quite comfortable with HTML or CSS yet you can use Coda’s Hints feature to give you a little extra guidance.

Coda Hints

8. Use Coda Books

Highlighting something and pushing Command + ‘ will search the books you have available in Coda for the highlighted text. You can also just hold Command and double click a word you want to search for.

Coda's Books

9. Setup More Coda Books

Add more books to reference more information. You can read more about adding more Coda books here.

Coda Books

10. Block Edit Text

If you need to edit multiple lines you can do a block edit to do them all at once. You can highlight the text you want to edit and push Command + Shift + B or you can hold down Option and select the lines you want to block edit that way.

Block Edit Text

11. Shift Text

Highlighting text and pushing Command + Left or Right Bracket will shift the highlighted text left or right. This is great for shifting a whole section of markup for good looking markup formatting.


12. Preview in a Browser

You can preview files in Coda’s built in Preview mode (which uses the same engine as Safari) and while in that mode you can click the Preview in Browser button in the top right to open the file in the browser of your choice.

You can also push Command + Option + B while in any mode to open and preview the file in the default browser (Safari). When you make changes to the document you can use this shortcut to refresh the preview in the browser a little faster.

Coda Browser Preview

13. Use the Preview Tools

There are three tools included with Coda’s preview mode. These can be helpful for quick development issues (although I still find myself using Firebug :-P ).

Preview Tools

The left button lets you preview the source code. Kind of strange since you’re just in the preview mode and you could just switch back to the edit mode. However, this lets you edit the source code and preview the changes without actually editing the document. A great feature for testing and debugging.

The center button is the JavaScript log and the right button is the DOM hierarchy inspector. You can quickly find and see elements with this which is helpful if you aren’t sure what’s going on.

DOM Inspector

14. Split Windows

You can split windows using the icon in the top right of the window (the plus with lines). Pushing Option will change the direction of the lines meaning the split will change from horizontal to vertical (or the opposite if changed in preferences). You can also push Command + Control + L to split the window using shortcut keys (hold option to split the other direction).

Coda Split Windows

Within each window you can independently change modes.

Coda Window Previews

15. Open Separate Files in Split Window

You can also open separate files in split windows by right clicking files in the File Browser and selecting “Open in Split” or by dragging the file into an already open split. Now you can edit two separate files in a split window.


16. Hide/Show File Browser

Coda’s file browser is great but you won’t be using it the majority of the time so you can quickly hide/show it by pushing Command + Control + B.


17. Hide/Show Code Navigator

If you need a little help jumping around a document you can pop open the code navigator.

Code Navigator

A little hidden feature with Coda and the code navigator is that you can create “bookmarks” within your code to jump around your document faster using the code navigator. For example.

<!-- !THIS IS AN HTML BOOKMARK -->

This would create a bookmark in the code navigator that looks like this.

Bookmarks

Basically the bookmark is created with markup comments that use an exclamation point before the bookmark text. You can do this for HTML, CSS, PHP, etc.


18. Use the Find Features

Instead of using the code navigator to find things, I use the find features. Pushing Command + F opens the bar to search. Then just type in what you’re looking for and push enter. Coda will scroll the document to the first matching text and highlight it. There are several more shortcut keys for searching and several options you can change if needed. Using the find feature is much faster for me than using the code navigator since my hands never have to leave the keyboard.

Find

19. Quick Close Tag Shortcut

By default Coda will automatically close a tag once you’ve opened one. However, that doesn’t always work and I still find myself needing to close HTML tags manually all the time. Pushing Command + Option + . (period) will automatically close the current HTML tag (wherever the cursor is).


20. Get Plugins

While Coda has a lot of great features, there are many features developers still want. There are a few plugins available from third party developers that you can install to give Coda extra functionality. Here is a list of third-party plugins available.


Final Thoughts

These are some great tips for using Coda but like any great web development application, there are plenty more, so take some time to explore. With some practice, you can pick up tons of keyboard shortcuts that will keep your hands on the keyboard instead of wasting time mousing around. ;-)

For video tutorials, tips, guides and other information, visit Panic’s Coda Developer Zone.

If you have some great tips, feel free to share them with us by leaving a comment below.

This article was originally posted on the ThemeForest blog late last year. We are currently porting over some of the more popular articles to Nettuts+.

Leave a Reply

Your email address will not be published. Required fields are marked *