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!

.htaccess: redirecting no www. to www.

Jason Stockton — Thu, 05 Feb 2009 13:09:37 +0000

The .htaccess is a powerful tool when it comes to managing server-side actions. It is a common comment that sites that have both www.domain.com and domain.com can get penalised from search engines because they are seen as 2 different websites. Personally I think this theory is a bit silly and you’d think search engines such as google would be smarter than that. Never the less, site addresses should probably be consistent anyway. Using .htaccess you can redirect traffic that goes to domain.com to www.domain.com – thus fixing the search engine problem and making your domain consistant to all visitors.

Add the code to the .htaccess file

To redirect visitors from the www.-less domain we add the following code to our .htaccess file:

Options +FollowSymlinksRewriteEngine onRewriteCond %{http_host} ^yourdomain.com [nc]RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [r=301,nc]

Make sure you replace yourdomain.com with your domain. This is all you need to do! Easy!

About .htaccess files

.htaccess files have a number of uses, from changing apache set-ups to editing php settings. It’s quite useful however it can be a fiddly process. The reason the files start with a “.” instead of having the normal format is because they typically are hidden files. Linux and Mac OS X typically treat these files as hidden. If you edit locally this can cause problems if you haven’t set your computer to show hidden files. Programs such as Coda allow you to show/edit these hidden files inside it’s file browser.

I recently had a series of my sites hacked with .htaccess files that added a series of porn links to my site in the source code (the sites remained as were). It’s a really tricky thing to discover as they were old sites that I don’t commonly edit so it wasn’t until it was pointed out to me that I found it out. So if you have a similar hack done to one of your sites delete the .htaccess file!

Setting up a .htaccess file

Easy, just create a file called .htaccess in your favourite text editor. Save it to the root directory of your domain (or the directory you wish the actions to occur). If it doesn’t work, make sure your server has .htaccess scripting allowed.

I’ve got a lot more .htaccess tips to share so keep a look out.

The Web Development Blog » coda