Grow your CSS skills. Land your dream job.

Giving Snippets “Add to” Coda & TextMate Buttons

Published by Chris Coyier

I think this is the coolest thing since Kayne carved cult symbols onto his head: each snippet in the Snippets area now has little links when you roll over them for adding the snippet to Coda or TextMate. I realize this is way Mac-specific, but if you roll that way and use either of these programs it's way cool. I hope to make a copy-to-clipboard function that will be useful for anybody. [example]

How the Coda Button Works

This was the easier of the two, because Coda supports a special URL structure thingy (not sure what to call it), where literally an anchor link on a web page can add a clip to Coda (assuming you have it installed). This is the structure (href of link):

codaclips://<<**Title:Title%20of%20Snippet**>>.code-goes-here{%20margin:0;%20}

What I didn't want to do was have to hand-write all that into every single snippet. That's a heck of a lot of duplicated effort. We'll rely on jQuery to do all that magic for us. The plan:

  1. Find every block of code
  2. Find the title and actual code content
  3. Append a special Coda-formatted link to the block
  4. Have it fade in when the snippet is rolled over
$(function() {

    var $title = $("#snippet-header").text();

    $(".entry pre").each(function() {
    
        var $preblock = $(this);
        var $codeblock = $preblock.find("code");
        var $snippet = "codaclips://<<**Title:" + $title + "**>>" + encodeURIComponent($codeblock.text());
        
        $("<a class='coda-clip'>Add Coda Clip</a>").attr("href",$snippet).appendTo($preblock);
        
        $preblock.hover(function() {
            $preblock.find(".coda-clip").stop().fadeTo(300, 1.0);
        }, function() {
            $preblock.find(".coda-clip").stop().fadeTo(300, 0);
        });
        
    });
    
    $(".coda-clip").show().css("opacity","0");

});

Images / CSS

The images are just buttons I put together in Photoshop, sprites of course, for the rollover effect.

In the CSS, the button is absolutely positioned to the bottom right of the snippet, and hidden (the JavaScript will unhide them, might as well be hidden for JS-off people).

.entry .coda-clip { 
   display: none; 
   position: absolute; 
   bottom: 15px; 
   right: 0; 
   width: 80px; 
   height: 30px; 
   background: url(../images/coda.png) no-repeat; 
   text-indent: -9999px; 
}
.entry a.coda-clip:hover { 
    background-position: 0 -30px; 
}

How the TextMate Button Works

This one is far more complicated. There is no URL link you can create to make a TextMate snippet. Instead, TextMate uses specially formatted XML files to add snippets. So in order to make this work, we are going to have to create those files on the fly when someone wants one.

I shared with David Walsh the structure of these files that we used one time on HTML-Ipsum. David took it from there and rocked out a really really cool system for creating these files on the fly, complete with caching.

I'm gonna defer to David for his tutorial on how to do this.

Comments

  1. Permalink to comment#

    It doesn’t work here very well. When I hit the add to coda button, it is actually added to coda but “<" is transformed in & lt;

    Help!

    • Greg
      Permalink to comment#

      Yup, I’m seeing the same problem. Characters like “>” or “<" get encoded.

      Despite that, I want to say this feature is really cool. Makes the Snippets section so much more fun to use. Love it!

    • Permalink to comment#

      I believe this is fixed. Hard refresh and let me know.

    • Greg
      Permalink to comment#

      Looks like that fixed it. Thanks!

  2. Permalink to comment#

    wauw! this is way cool and it works perfect

  3. Ryan
    Permalink to comment#

    For us Coda users, it would be nice if the Snippets page could or was somehow tied to Coda Clips. There currently is a site dedicated to Coda Clips: http://coda-clips.com/, but I’d love to see this kind of functionality incorporated on the Snippets page.

    Just a thought.

  4. Permalink to comment#

    you just saved me a crap load of time! Thanks for all your hard work too.

  5. Thanks Chris… I love coda!

  6. Permalink to comment#

    Thanks for this, Chris! It’s been a big help and already in 5 minutes I’ve saved myself 2 hrs of researching and head-to-wall-banging trying to figure some of this out.

    My only comment is this: when I add a snippet to Coda using your new button, the line-breaks and tabs are not preserved. When I insert it into my code via Coda’s ‘clip’, it doesn’t look as good as copying-pasting from your site.

    (I’m using FF 3.5.3 MAC)

    • Permalink to comment#

      Yeah I know that kinda sucks. Might need a little maintenance on your side right after you add them. I’ll be looking into a way to make that better.

    • Permalink to comment#

      Copying from your site and pasting into my Coda clips is easy enough for me. Thanks again.

  7. Permalink to comment#

    Very nice! I don’t really find it useful, but it’s nice reading the code for it :D

  8. Permalink to comment#

    Reason # 43,763 Why I need to get a Mac again. (Work decided on the cheaper “PC” notebook, this time around)

    I love that you use Coda, and I really miss using it myself.

    I anxiously await for the “Copy to Clipboard” function.

    -David

  9. ¡Increìble señor Coyier, increìble!

  10. Bobby Orr
    Permalink to comment#

    Do you know of a good solution for transparent png + css sprite + jquery fade for ie? If you open your snippets pages in ie7 or ie8, you’ll see a horrible black background for the transparent glow when you hover over your “Add to coda” links. There are some js hacks (unitpng) for fixing the combo of just transparent png + jquery fade, but these mess with the background positioning of the items so they don’t work well with a css sprite implementation.

  11. Chris Gedrim
    Permalink to comment#

    A very cool idea and very well implemented.

    I know there’s a massive, long running, debate about whether you should use the UA string for content delivery, but could you not query the UA to see if the browser *thinks* it’s running on a Mac and only include the button’s jQuery if it is?

    • Permalink to comment#

      That’s a clever idea. If I can figure out a way to do that I will. I’m not trying to annoy PC users here, just trying to provided something extra where it can be useful.

    • Chris Gedrim
      Permalink to comment#

      This should work:

  12. Nico
    Permalink to comment#

    Wah waaaaaah…. no love for PC users….. ;)

  13. Rob
    Permalink to comment#

    Chris,

    There is a Jquery plugin that would nelp with the copy yo clipboard thing: http://plugins.jquery.com/project/copy

  14. Permalink to comment#

    This is a very cool feature, it’d be nice to eventually see this on all sites that present snippets with even more options for different editors. I’ve been using Espresso lately but I tested it in good ole’ TextMate and it works great! Nice work!

  15. David Hucklesby
    Permalink to comment#

    Did you mean “Kanye”?

  16. Carol
    Permalink to comment#

    Genial!!! Buenísimo!! This make me love more and more my Coda!

  17. This is awesome. Does anyone know a way to Sync these Snipplets across multiple Macs using Dropbox?

  18. Permalink to comment#

    Hey Chris, Thanks! Love that you can add it to Coda. I’ll be spending some serious time tomorrow adding some snippets. Keep it up.

    - Alex

    P.S.
    let me know if you want a threadsy invite and I’ll see what I can do for you.

  19. I would like to implement this into my code tags, but have only one question…
    When you use the codaclips protocol, could you use this in the background using an AJAX request, and will it add it to whatever coda adds it to.

    P.S
    I take it that coda is strictly for Mac users and there is no coda plugin for firefox or anything for windows?! Could be a good idea for someone.

    6TrafficSecrets – SEO Tools

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".