10 handy tips for getting the most out of Coda

Jason Stockton — Wed, 16 Sep 2009 14:03:54 +0000

If you’re a web developer on Mac I encourage you to get your hands on Coda by Panic. It can handle just about all of your development needs and make coding much faster. If you’ve already got it then brilliant! I’m going to run through 10 tips to get the most out of Coda, some you may know, some you may not. It’s all part of the fun! Let’s see why Coda leave it’s competitors in the dark.

1. Sites

Stay organised with sites. This is the first feature you see when you open Coda. Sites allows you to setup a working directory, FTP account and much more for each site you’re working on. So you can just double click and get connected. By far one of the most valuable features of Coda.

2. Books

What was that code again? You know when you have that mental blank and can’t remember a code for the life of you. With the built in books in coda you have complete references for HTML, CSS, Javascript and PHP. Perfect! Just hit the books tab.

3. Visual CSS Editor

If you work with CSS the visual CSS editor will save you a lot of time. CSS newbies will love it as well as it will make learning CSS a breeze.

To use the CSS editor, select your CSS file (or page that contains the CSS you want to edit) and click the “CSS” tab. To add a new style click the “+ Style” button on the bottom. Easy. All your styles and classes are listed down the left hand side, to edit it’s properties just enter the values in the visual editor.

4. Line Numbering

Error on line 3078..? Where on earth is that? Turn line numbers on in your preferences (Coda -> Preferences) under the Editor tab. Line numbers will show up on the left hand side of your files, you can also use the line numbers to select a whole line or multiple lines among other things.

5. Clips

You know how annoying it is to write the same script over and over? Of course you do, this is where clips comes in. Clips allows you to save a script in an easy to access window where you can double click to quickly insert the script. Brilliant! To show the clips window just click the “Clips” button at the bottom. To add a clip simply click the “+” symbol in the bottom left (not the far left, the one more to the center). Name the script, add the script and you can also add a selection placeholder (the selection cursor will automatically go to this point when the clip is added) when you’re done, click “Save”.

6. Tab triggering (shortcuts)

What if you could just type “html” then hit the tab key and it automatically puts in basic HTML for you? It’s there, try it. But more than that, you can add tab triggering to any clip you’ve added! This is one of the most time saving tools in Coda. You can assign a tab trigger to a clip by click the “i” next to a clip in the clip window. Down the bottom you will see “click to add tab trigger”, click it, then type your trigger text and hit tab. Once you’re done hit “Save”.

7. Smart Find/Replace

Say you need to find all the pages that contain “” because for some reason you mis-typed it then can’t remember which pages you put it in… Firstly, how silly of you. Second, don’t panic, hit Command + F. In the search field type “”, in the replace field type “”, then on the left it will have a checkbox “Find in “directoryname“”, tick the checkbox then click “Replace All”. It’ll then find any files with “” and replace it with the correct “”. Problem solved!

8. Dragging Images to create the img tag

This is one of those handy little tips that will make life a little easier for you. In the file viewer browse to an image file, click and drag it into a HTML or PHP document and it’ll automatically create the XHTML tag for you!

9. Easy Indenting

If you’re like me, you’re anal about making sure everything is indented perfectly. And for good reason, it makes reading the code easier and helps with fixing mis-closed tags. Coda makes indenting large blocks easy. Select the block of code you wish to indent (or un-indent) and hit “Command” + “]” (or “Command” + “[“). This will shift the block forward or backward. Truly handy.

10. Plug-ins

The possibilities are endless. Plug-ins allow you to extend Coda’s native power. Visit here and see what useful plug-ins you can find. I’m always using the compression plugins to strip whitespace and comments from my Javascript and PHP.

There is more power under that hood, and this is just a small selection of the power within Coda, visit their developer site to see more tips and tricks along with video tutorials and much more!

The Web Development Blog » Software