• Home
  • Work
  • Blog
  • Contact

Our Coda “Tabber” plugin

May 23rd, 2012 by Chris in Development | 12 Comments

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

Plugin for legacy Coda 1

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.

12 Responses to “Our Coda “Tabber” plugin”

  1. Tom says:
    May 24, 2012 at 3:32 pm

    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 🙂

    Reply
    • Chris says:
      May 24, 2012 at 4:02 pm

      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!

    • abi says:
      May 26, 2012 at 7:46 am

      i’ve got the same error (with the mac app store version of coda2)
      🙂

  2. Leo says:
    May 25, 2012 at 9:26 am

    Hi,

    I just installed this plugin and had no problems using it in Coda 2.

    Thanks allot.

    Reply
  3. Fuelishways says:
    May 25, 2012 at 12:08 pm

    Tried to set the keyboard shortcut and nothing? Any suggestions?

    Reply
    • Chris says:
      May 26, 2012 at 10:44 am

      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!

  4. Lee says:
    May 26, 2012 at 9:55 am

    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.

    Reply
    • Chris says:
      May 26, 2012 at 10:16 am

      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!

    • Chris says:
      May 26, 2012 at 12:16 pm

      Hi Lee,

      Good news! A download for the multi-line CSS is above!

  5. Khoa says:
    May 27, 2012 at 12:07 am

    Thanks, this made my life easier

    Reply
  6. Robert says:
    May 29, 2012 at 4:32 pm

    Or you could just write your CSS as indented LESS or SASS and avoid the duplication all together. Just sayin’…

    Reply
    • Chris says:
      May 30, 2012 at 3:07 pm

      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.

Leave a Reply to Leo

Click here to cancel reply.




Tags

  • Business
  • Community
  • Development
  • Illustrations
  • WordPress
  • Work
« Customer Service: DMV vs. The Apple Store
You guys rock »

p 502.220.4791
f 502.415.7293
info@karmaprogressive.com

8510 Raintree Drive
Louisville, KY 40220

  • Home
  • Work
  • Blog
  • Contact
  • You guys rock »
  • Our Coda “Tabber” plugin »
  • Customer Service: DMV vs. The Apple Store »
  • Facebook
  • Twitter
  • Linked In
  • Blog