Archives

My Essential Coda Tips

April 16, 2012

When I first started dipping my fingers into the sea of web design, like most naive newbies, I had read and thought that Dreamweaver was the only option for developing sites. Although I don’t think Dreamweaver is awful, it was only after I got my iMac and started to get into the web design community more deeply by joining sites like Forrst that I realised there were alternatives! Thats when I found Panic’s Coda. I’m not going to go on about why I think its better than Dreamweaver or make a review, because there are 100 other articles that have already done that. Instead I am going to share some of the Coda tips and tricks I have learnt while using the program.

Coda Split Preferences

Use Horizontal Split

By default Coda opens documents using its split function vertically with one beneath the other. Most peoples monitors are wider than they are tall, so it makes more sense to have split open horizontally with the two documents side by side. This is especially useful if you are previewing a page in one of the splits as you can see more.  This is very easy to change. Go to Coda < Preferences, the on the general tab make sure you select the second radio button in Split direction.

Open In SplitOpen Your Document In Split In Edit & Preview Mode

Especially when you’re working on HTML documents, it is very handy to have a live preview that will update as you work on the file. This is easy to do by opening the same document twice in split mode, and simply having one side set to edit and the other to preview. To do this open any file, then find it in the local file explorer to the left of the main Coda window, right click and then click “Open in Split”. Then change one of the modes to preview and you are done. You can use the similar technique to see live changes to a HTML page when you are adding CSS by opening the HTML file in the split and setting it to preview.

Coda Split Example

Make The Most of Snippets

Coda Clips Since using Coda I have been slowly building up my library of code snippets. This is an excellent feature that allows you to store and quickly insert code clips that you are likely to need again and again. Looking back I can see that I would have saved my self a lot of time if I had sat down for one hour and worked solidly on filling up my clipboard. Since then I have found a number of places that provide a selection of clips for you to use straight out of the box, saving you a lot of time. The one I use the most is probably this clip set from WPCandy which provides you with clips for a huge number of WordPress functions. Things like CSS resets and basic HTML boilerplates are also useful to store in the clip board. Take a look at this site for more ideas: www.coda-clips.com Make sure you organise your clips well. The whole point of the clip board is that is supposed to speed development up so you don’t want to be wasting your time searching through hundreds of unorganised code snippets. This is probably the one standalone feature that saves me the most amount of time developing.

Coda's Colour SchemesChange Coda’s Syntax Highlighting Colour Scheme

Again this is something I have only got around to doing fairly recently, but wished I had done it much sooner. There are a huge number of syntax highlighting colour schemes for Coda. Coda’s standard scheme is fine but you can really personalise it to suit your specific needs. I have opted to go for a dark scheme that is a bit easier on the eyes during long sessions.  Not only does it reduce eye strain, but it looks damn cool! I use the dark version of the Solarized colour scheme, but Justin Hileman has put together a nice list of alternatives here.  Simply download the seestyle file, go to Coda > Preferences then click the color tab. Then the import button found the style you just downloaded and you’re done! You can further edit the colour scheme to your liking in the same window.

Extend Coda Using Plugins

Coda is awesome right out of the box, but there are also a large number of community made plugins that extend it even further. My three most used Coda plugins have to be CSS Tools, PHP & Web Toolkit and finally the WordPress Syntax highlight mode.

CSS Tools adds a few simple but infinitely useful functions that can do things like reformat your CSS to single line, or compress your CSS. A download for this plugin can be found here: Coda CSS Tools Plugin

PHP & Web Toolkit as the name suggests provides with a number of useful functions to do with general web and php development. This is includes things like validating and tidying HTML & Php as well as minifying javascript. Very useful in all kinds of web development.  The download for this can be found here: PHP & Web Toolkit

Finally another really useful plugin if you do a lot of WordPress development like I do is the WordPress Syntax highlighting mode. Again this one is pretty self explanatory but it essentially adds WordPress specific highlighting to all of WordPress’s many functions.

These are just three of the many plugins out there, and I’m sure there are loads that I am yet to discover and could turn out to be very useful. Macstories have put together a very comprehensive list of a lot of the plugins available here. So that’s it, my top tips for Coda! I hope you find them useful. I am sure as I use the program more I will come up with more tips, and when I do, I will make sure to add them to this post. For the time being have fun using this great program, and look forward to Coda 2 which I have heard will be on its way very soon!

Posted in CSS HTML Tutorials