All Hints

While using the Preview view to view web pages, it is possible to temporarily edit the source of the page. This is handy for testing code, studying other people’s coding techniques, and many other things.

To edit a page in Preview mode, click on the View Source button at the bottom left corner of the status bar. You’ll see the source code for the page slide into view. Edit whatever you desire, and then click the View Source button again to re-enter Preview mode. Your changes will show up on the page.

Keep in mind that whatever changes you make are temporary, and aren’t transferable to the Text Editor view unless you copy and paste the edited code manually.

Holding down option (⌥) while clicking on a tab’s Close Tab button will close all other tabs.


Credit: Lee Nicholson

This seems like a no-brainer, but to switch between different tabs in Coda, press command-shift-right bracket ( ⌘⇑] ) to jump to the next tab, and command-shift-left bracket ( ⌘⇑[ ) to jump to the previous tab.

Coda is capable of opening many different types of files and has great syntax support for several major file types. However, sometimes it’s nice to be able to switch between syntax modes.

For instance, you might create a new file with the intentions of creating a CSS stylesheet, but Coda’s default syntax mode for new files is HTML. To change the syntax mode of the file to CSS, click on “Text” in the toolbar at the top of the screen, open the “Syntax Mode” menu, and simply select the desired syntax.

Did you know that you can validate your HTML/XHTML code inside of Coda? This feature will only work on files that use the HTML syntax mode, but it’s a great feature. Here’s how to use it:

The green arrow above shows you how to toggle the Validation feature on and off.

This image displays a validation error. We can’t put a block level element (like a <div>) inside of an inline element (like a <p>).

Coda’s Text Editor has a really neat feature, called “Clips,” that allows you to invoke often-used chunks of code or text very easily. Clips can be used a few different ways. This tip will cover how to create a clip, but also will let you know how to use them.

Creating A Clip

When in the Text Editor (⌘+2), click on the “Clips” button at the bottom of the screen. A screen will pop up, showing the Clips that you already have installed. You will notice that you can make global clips, which can be called from any file you edit in Coda, or site-specific clips, which will only be available to files within the site that you’re working on.

Click the plus sign (+) at the bottom left corner of the Clips window. Give your clip a title, such as “Conditional Comment for IE6 and Under.” Then, enter code or text into the large text area in the window. For the above title, the following code would work:

You’ll note that there is an asterisk in my clip. You should replace this with a “selection placeholder,” which you will find available in the bottom left of the New Clip window. This placeholder will allow you to drag the clip onto selected code in the Text Editor, which will magically wrap itself around the selected text.

In the section that says “click here to add tab trigger,” type ‘ltie6′ and hit the tab (TAB) key. Now click save and start working with your new clip!

The tab trigger is one of my favorite features of Coda’s clips, and can really save you a lot of time by typing tedious code for you. To use the one we just set up above, type ‘ltie6′ and hit the tab (TAB) key in the Text Editor window. Your new clip will insert itself into your document. Neat, huh?

Command(⌘)-click the Split button to create a new split with an empty HTML file.

Option(⌥)-click the new file button under the file list to create a new folder (instead of a new file).

Option(⌥)-click a toolbar button to create a new tab in that mode.

To open a file in an existing split window, drag it from the file browser to the split that you’d like it to open in.