Helpful Coda 2 Tips

I have been using Coda 2 for a while now and like most people I probably only use about 5% of Coda’s awesome features. In our day to day workflows we as developers rarely have time to dive deep into the tools we use. We figure out the bare minimum to get coding and we are off.Between deadlines, clients needs, and life who has time to read through a manual? Well you are in luck; you don’t have to. The following is a short list of “hidden gems” that we stumbled upon here at Hipster Creative. The list is definitely not exhaustive and is part of a continuously growing series so check back for more.

Quick Jump

This command is actually a Mac specific trick but I only came across it while using Coda 2. ⌘ ↓ lets you jump to the end of the file currently open. To jump to the beginning of the file use ⌘ ↑, and that’s it. You are now a file navigating pro.

Comment Selected block

Let’s say you need to comment out a block of code for testing purposes. Select the block of code you want commented by dragging your mouse. Once the piece of code is highlighted, press ⌘ / and Coda 2 will wrap the whole thing in comment blocks.

Block edit

This has really comes in handy when working with HTML. I believe the best way to show you the power of this feature is by example. Lets suppose you have a block of code like the following

<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>

If you are unfamiliar with Twitter’s Bootstrap framework that’s ok, you should still be able to appreciate this functionality. Any how back to the example, you finish typing this up and realize after refreshing the browser that you would rather have two row of divs side by side rather than four divs stack on top of one another. Now you have to change col-xs-12 to col-xs-6, like this

<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>

Seeing that there are only four lines of code I guess you could just delete and update them individually. But what happens when you have do this to 12, 14, or 20 lines of code. It would be pretty tedious and time consuming having to edit every single line. Here comes block editing to the rescue. This is what it looks like in practice:

There are two ways you can accomplish a block edit. You can drag your mouse and highlight the block of code you wish to edit. After highlighting the block of code press ⇧ + ⌘ + B to prime it for block editing. The second method allows you to select individual lines to block edit. In this case I guess it would suffice to call it batch edit or multiple edit. All you need to do is press and hold down the alt key. While the alt key is pressed, mouse click the lines you need edited. The lines you select should be highlighted, now you are ready to edit multiple lines simultaneously.

Global find in specified directory

There are times when you are looking for a particular function or class and you don’t quite know where to look. I’m pretty sure you are familiar with the global find feature command+shift+F. This is great and all, but what if you don’t need to search your whole project and only need to look inside a specific directory. All you need to do is hover up above the search bar and click on the down arrow that appears. The drop down list will sort of look like what a select tag would produce. The first default option displayed will be different for every user but the location will always be in the same place. It will always be to the immediate right of the Open Files option. After clicking the down arrow navigate down the pop up box and click on Choose… This will bring up the native file system browser and from there you can select the directory to perform the global search on.

Well that’s it for today, thanks for reading and be sure to check back for more helpful tips.