Our Coda “Tabber” plugin
Around here, we love us some Coda. We’ve been using it since at least 2008, so it’s kind of ingrained in the way we work. Pretty early on, we realized we were copying – pasting every other line in the CSS editor, which was time consuming and carpal tunnel syndrome inducing. One of the greatest things about Coda, though, is that you can extend it with plugins – so I set out to write a small plugin that saved us a man-year in highlight-copy-pasting. Now that Coda is debuting it’s second version tomorrow, we’re re-packaging and giving it to the world.
How it works
I write my css like this:
So every time I move to the next element, I have to either copy-paste the line above it, or re-type it. Enter “Tabber”. Now, with Tabber installed and keyboard shortcut set up, I hit my hotkeys when I’m at the end of the last line, and BOOM:
It automagically creates a new line with my previous CSS elements, adds the curly braces, and sticks my cursor where I would fill in my next element.
“ZOMG HOW CAN I OBTAIN THIS SORCERY FOR MY OWN PROFIT AND GAIN?!?” you might be asking yourself. Oh snap – right here.
Plugin for brand spanking new Coda 2
LIMITATIONS – PLEASE READ
This version above is very fast, but only works with single line CSS. Below is a Coda 2 only version that works with multi-line CSS. It’s a tad slower, as it pulls in your entire document. It also has a weird quirk where after it adds the new line, sometimes it scrolls the document all the way to the bottom of the screen, though the cursor is in the correct position. Hitting any key will snap the screen back to the correct area of the document. This seems to be a bug in Coda, and we have contacted Panic to see if this can be corrected.
Download the multi-line CSS version (beta)
How to install and use
Download the plugin and install. To setup the keyboard shortcut, go to Apple -> System Preferences -> Keyboard, Keyboard Shortcuts. Create a new Application Shortcut for Coda, and type Tabber, then just pick your own shortcut! I use Shift+Command+Enter, but feel free to come up with something more clever.
Love it? Hate it? Let us know.
I just installed the Coda 2 version, and it fails horribly. It prints a Notice message and a Stack trace in the document I’m currently working on.
Notice: Use of undefined constant CODA_LINE_ENDING – assumed ‘CODA_LINE_ENDING’ in ~/Library/Application Support/Coda 2/Plug-ins/Tabber.codaplugin/Contents/Resources/31821DFD-8396-4B05-AC13-D77C3A965E0F/tab.php on line 7
Call Stack:
0.0002 638144 1. {main}() ~/Library/Application Support/Coda 2/Plug-ins/Tabber.codaplugin/Contents/Resources/31821DFD-8396-4B05-AC13-D77C3A965E0F/tab.php:0
Notice: Undefined index: CODA_LINE_ENDING in~/Library/Application Support/Coda 2/Plug-ins/Tabber.codaplugin/Contents/Resources/31821DFD-8396-4B05-AC13-D77C3A965E0F/tab.php on line 7
Call Stack:
0.0002 638144 1. {main}() ~/Library/Application Support/Coda 2/Plug-ins/Tabber.codaplugin/Contents/Resources/31821DFD-8396-4B05-AC13-D77C3A965E0F/tab.php:0
Thought I’d let you know
Hi Tom,
Thanks for the heads up. We’ve been using it just fine, but we’ve contacted Panic to take a look at it. Thanks!
i’ve got the same error (with the mac app store version of coda2)
Hi,
I just installed this plugin and had no problems using it in Coda 2.
Thanks allot.
Tried to set the keyboard shortcut and nothing? Any suggestions?
Make sure that Coda 2 is in your Applications folder. Go Apple -> System Preferences -> Keyboard and click on Keyboard Shortcuts on the top. Select Application Shortcuts and hit the + button under the right pane. Choose Coda 2, then type “Tabber” no quotes in the name field and pick your shortcut. That’s it!
I like the plugin but was disappointed to see that it only works when you put all of your CSS on one like. It would be great if it worked with multi line CSS blocks.
Hi Lee,
We’ve received a couple other requests for that, and we’re taking a look at implementing that. I’ll send you an email if we can do it.
Thanks!
Hi Lee,
Good news! A download for the multi-line CSS is above!
Thanks, this made my life easier
Or you could just write your CSS as indented LESS or SASS and avoid the duplication all together. Just sayin’…
CSS pre-processors have their own set of issues that are out of the scope of this post (and plug-in). You are, of course, welcome to use whatever you want, but I prefer straight up CSS.