Master The Editor
Let's talk about the biggie: Edit mode. This is where the bulk of your Coda usage is probably going to happen.
There's so much that I could write about the Edit mode, but by and large it works similarly to most any other text editor you've used on the Mac, and should be mostly familiar to you right out of the gate. So, I'll gloss over some of the more obvious things and zero in on our custom additions and some time-savers.
A symbolic gesture
The first thing I recommend doing is turning on the symbols pane. This is done by clicking the icon at the bottom of the file browser that looks like a pair of curly brackets.
This will show you all the "symbols" in the current editor document, as determined by the current syntax mode, and allow you to jump to any of them by simply clicking.
Symbols include things like H1-H6 headers in HTML mode, function and class declarations in PHP mode, CSS elements, and more.
There's another hidden gem here, which is that you can use this to embed "bookmarks" in your file. In an HTML or CSS file, you can embed a bookmark by adding a line like this to your file:
<!-- !Cool stuff happens here -->
(note the leading exclamation point; it's necessary)
In PHP, you can do it like this:
//- mark Cool stuff happens here
(note that there is a space before and after the word "mark")
In CSS:
/* !bookmark */
(note that there is a space before the exclamation point)
Note also the "Next Symbol" and "Previous Symbol" items in the Go menu, for quickly jumping from one section to the next in your file.
Here's a handy guide to bookmark syntaxes for each language.
Color copies
Now if I may, please turn your attention to the Edit menu, where you'll find "Copy as XHTML". This will take your selected code, and place it on the clipboard, with XHTML markup applied to preserve the current syntax coloring. Useful for posting code samples to a web page.
Line numbers, invisible characters, and change marks
You can turn these guys on or off from the View menu. "Invisible characters" refers to things like spaces, tabs, and end-of-lines that you can't normally see. "Change marks" are generated when you are using the collaborative editing feature. More on that soon.
Blockedit
Blockedit is a handy thing that SubEthaEdit users may be familiar with. If you hold down the option key, and drag out a text selection, you will place the selected lines into blockedit mode.
Any changes made to any line in the blockedit selection will be replicated to all other lines in the selection. This very useful, for example, for adding a comment character to the beginning of a long range of lines, or setting up columns of text.
Press ESC (or type outside the selection) to quickly cancel out of blockedit.
Tabs! Spaces! Tabs! Spaces!
To settle this epic holy war, use Entab and Detab from the Text menu. Entab converts runs of spaces into tabs, and Detab converts tabs into runs of spaces. Exactly how many spaces is determined by your current Tab Width setting.
Taste the rainbow
Text > Show Colors will bring up the standard system color picker -- the nice extra is that you can drag color swatches into your text document, and they'll be converted to standard HTML/CSS hex color values.
You complete me
Coda by default offers completions for code as you type it. The completions that are offered are dependent on your current syntax mode setting. HTML mode offers HTML completions, PHP mode offers PHP completions, and so on. Note that we don't have completion dictionaries for every language yet, but we're working on it. (Of course, if anyone wants to contribute one to the cause, that's cool too!)
One thing to note about HTML completion is that it is context-aware. If you type <img followed by a space, we'll offer you completions for just the attributes that apply to the <img> tag, such as alt, src, width, and height.
What about end tags? We've got that covered too. As soon as you type the closing right bracket on an HTML tag, Coda will add the end tag automatically, if applicable.
There are various options for activating completion in the Editor preferences, including turning it off completely if it bothers you.
Ace find and replace
We tried some new things with the traditional find and replace user interface.
It always seemed silly to us that Find and Replace generally opens a great big dialog over exactly the document that you're trying to work with, so we replaced that with the Find banner, which lives happily above your document instead. Don't overlook the fact that you can resize it, if you want to!
We all know how find and replace works, but I'd like to introduce you to something very cool: the wildcard token.
Let's say you have a big HTML file, and you've just discovered that the values for width and height in every <img> tag are swapped. Great, you're screwed, right? Or at the very least, you're reaching for your book on regular expressions, getting ready to type some punctuation soup.
Wait! Try this:
Insert the blue wildcard tokens with the wildcard button. The tokens are simply placeholders for "some text goes here".
Note that they're swapped in the replace field.
Click "All" to replace all occurences and.. hooray! The day is saved!
You just used a regular expression without even realizing it. Cool, huh?
Those of you who are already regex masters can find more juicy tidbits in the find options menu located behind the button that looks like a checkmark.
Three heads are better than two
If you've never tried Subetha Engine-powered editing, you really ought to, just to see what it's like. Here's a bird's-eye synopsis:
You can either host a shared document, or join someone else's.
To share a document you're working on, click the Share button at the bottom of the editor to bring up the Share banner, then click the "Bonjour" button. This makes the document visible to others on your local network. To send an invitation to this document to another Coda or SubEthaEdit user, use the Invite popup.
To join another person's document, click the sharing icon at the bottom of the file browser (the third button from the left). If any documents are being shared by other Coda or SubEthaEdit users on your local network, they'll be listed here. Simply double-click to join one.
To join a document beyond your local network, and over the internet, click Connect To... and enter a host address (try codingmonkeys.de for a test server!)
The File > Access Control sub-menu gives you some control over what guests can and can't do to your shared document.
Clippity-doo-dah, clippity day
Clicking Clips at the bottom of the editor will open up the Clips window for you.
Clips are simply stored text clippings for things you use frequently in development. We've included a few to get you started: DOCTYPES for various versions of HTML, a basic page structure, and instant Lorem Ipsum placeholder text.
You can use these by double-clicking them, or dragging them into your file.
If you create a new clip, you'll notice two things:
1. You have the option of creating a Global or Site-specific clip.
2. You can use Selection Placeholders.
What the heck is a selection placeholder? It simply means that when the clip is activated, the currently selected text will be inserted at the position of the placeholder.
For instance, activating a clip like <b>(*)</b> (where (*) is the selection placeholder) will wrap your currently selected text in a <b> tag. Handy!
One last thing you ought to know about clips is that you can use tab triggers. This is simply a short word or phrase that, when typed in the editor and followed by tab, will insert the clip. Try it with the built in Lorem Ipsum clip by going to your editor and typing lorem followed by the tab key.
Speak another language
If you use a filename extension that isn't a standard (like .html, .php, etc) you may soon get annoyed that Coda always uses the HTML mode for it. Well, good news! You can change that in Editor preferences tab using Custom Syntax Modes. Use the extension .tmpl for templates, but they contain PHP? Just map .tmpl to the PHP-HTML mode and you're set.