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.
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.
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):
- Root URL: 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.
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
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).
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.
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.
Excellent review. Thanks especially for the MAMP stuff, I’m sure a lot of people have been scratching their heads over that.
Thanks, Andrew. I wish I’d known about it before. I’ve installed MySQL locally a few times before, but MAMP is a breeze compared to trying to get everything configured yourself.
Here’s another tip:
Coda doesn’t arrange your sites in any particular order, so if you have a lot of sites they can be difficult to manage. But you can drag and drop the site icons and rearrange them as you like. The animation is pretty slick when you move them around.
More tips at Steven Frank’s blog. See Coda: A Site For Sore Eyes. Frank is the co-founder of Panic.
Also, take a look at Cabel’s Sasser’s blog. He’s the other co-founder and, from the looks of his blog, the guy responsible for Panic’s gorgeous site and Coda’s eye candy coolness.
Nice review! Thanks for mentioning how to combine this with MAMP - I’ve been wondering this myself!
Now I have more reasons to buy this… damnit.
Thanks, Steffan. Yeah, MAMP is great. I don’t know how I missed it before.
Does anyone know how I can get Coda to highlight ASP syntax (like Dreamweaver)? Sadly enough, I have to work on ASP code a lot, and although I currently use Dreamweaver, Coda looks like a really nice (Intel-native Cocoa) alternative.
Sorry, Mark. I don’t know of a way to get Coda to highlight ASP syntax.
Coda is a very nice alternative but the new Dreamweaver is Intel native as well.
Nice tips, thanks! I can add alternative colors for syntax highlighting, downloadable on my site. I was not too much of a fan of the default colors…
http://tint.de/new-syntax-highlighting-colors-for-coda
ust stumbled upon Coda today, and so far I love it! I need an ASP syntax highlighter as well, but haven’t had much luck finding one.
I copied the PHP-HTML mode and made some modifications to it. It’s far from perfect, but it’s a place to start. Feel free to grab it and, hopefully, improve on it. I wasn’t able to get any autocomplete working for some reason… if anybody knows why, I’d love to know.
http://andy.teamsoell.com/files/ASP-HTML.mode.zip
Coda came out just exactly at the point where I was making the jump from WYSIWYG to hand-tooled code — a scary jump for me — and it has proved to be the most useful app I’ve gotten my filthy mitts on in a long time.
Being able to get live previews of how my XHTML and CSS fumblings are affecting the page has been utterly invaluable to the learning process and has brought me on in leaps and bounds. Then I can preview externally in Firefox (with its wonderful Web Developer Extentions toolbar) at the touch of a button. And being able to slam the files up to the sandbox server for the obligatory IE(Win) tests is simplicity itself.
Thank you for such a near-perfect app.
Rick, thanks for your comments. But don’t thank me. Thank Panic!
Robert:
Oops.
You’re quite right of course — I’d been simultaneously reading Steven Frank (co-founder of Panic)’s blog and the last sentence fell victim to me being momentarily confused about where I was. But my comments still stand and if the Panic team happen along here (as they will no doubt do) then the sentiments are there for the taking.
Note to self: try and remember which blog you are posting to!
Great post !
Thanks a lot .. i’m new to coda :)
As a BBEdit user for some years now, i’ve tried Coda for a while. Even if it’s a great software (UI, updated files marked for publish, autocompletion, …), i think it’s not working for me.
I always have a lot of files opened and the tabs in Coda is not handy in that case.
The clips are good (good idea to be able to create clips for one particular site) but i hate the fact that it’s not keeping the indentation when i insert a clip. In BBEdit, i’m also able to classify the clips. Very useful.
I don’t use preview mode because i always have to create PHP sessions and pass parameters to the pages. Anyway, i have two screens (one with the editor and one for Firefox).
One thing Coda can’t do is search in multiple files. It is not able to compare files for differences.
In despite of all great things Coda offers, i stick to BBEdit and Transmit.
I believe Coda is great for small/average projects but not for big PHP sites/apps.
Always had to refesh manualy preview.
sometimes it the url get sometimes changed to a local filepath.
I will get you out, include this in your page!
As bonus you get a nice animation.
*You notice the script wan’t finished yet. But for my purpose it’s suitable.
Coda is not scriptable that sucks!
i wrote also a autosave script in apple script. But it doesn’t work.
Anyone who know how you could to autosave your documents in coda?
// I hope your form will not break my script anymore
// I work on a mac, but coda is set to UTF8
// Anyway, include this script to refresh your page on a fancy way
function jsinit(){
funkitimer(100,100)
}
function funkitimer(i,j){
var progressmax = document.getElementById(’timer’).offsetWidth;
//var sURL = window.location;
var sURL = “http://localhost:8888/portfolio-active/bubblewoks/index.php”
document.getElementById(’timercontent’).innerHTML = unescape(sURL);
document.getElementById(’timerprogress’).style.width= (progressmax/j)*(j-i) + “px”;
if( i == 0){
window.location.replace( sURL );
}
i–;
timerid = setTimeout(”funkitimer(”+i+”,”+j+”)”,10);
}
#timer{
position: absolute;
top: 0;
left: 20%;
width: 60%;
height: 20px;
overflow: hidden;
border: 1px solid #9F9;
border-top-width: 0;
}
#timerbackground{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #CF9;
opacity: 0.8;
}
#timerprogress{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: #FFF;
opacity: 0.5;
}
#timercontent{
position: absolute;
top: 0;
left: 0;
font-family: monospace, “Courier New”, Courier, Monaco, monospace;
color: #660;
}
//to be sure ths is my last post here’s the same thing in code-tags
Webmaster: Please delete my preview post, i will ask my question again
Anyone who know how you could to autosave your documents in coda?
i wrote also a autosave script in apple script. But it doesn’t work.
Coda is not scriptable that sucks!
Really useful thanks! didn’t even know i could validate html while i write, would be nice if it worked with html/php files, is there anyway to do this? I can finally use my MAMP server with sites, awesome!
There are some new plugin made by WPTechnology for coda, which are simple but interesting and useful every day :
http://www.wptechnology.com/pluginsCoda.php?changeLanguage=EN
They are also referenced by the Code Team :
http://www.panic.com/coda/developer/community/plugins.php
tabulation for multiple lines
Im too used to smultron, in coda i cant put or remove tabulation to multiple lines. In smultron i just select a few lines and pres TAB or Shit+TAB to add or remove tabulation.
Anyone knows how can i do this in CODA ?
Thanks
@cristian
Try this plugin,
http://menumachine.com/blog/2009/01/tab-key-indenting-for-coda/
Thanks for the post! I kind of stumbled into using Coda about a month ago and never learned some of these little details. They will come in very handy!