Grow your CSS skills. Land your dream job.

New Snippet Buttons

Published by Chris Coyier

I've added two new buttons to all of the code snippets in the Snippets section of the site. Now a button to add directly to Snippets.app and a button to directly copy to the clipboard join the Coda and Textmate buttons.

Read on for some more details about them, and remember, you can help the Snippets section grow by submitting yours.

Snippets.app button


One-click adding to Snippets.app

Snippets.app supports a URL protocol thingy. That is, once the application installed, browsers on your system know that when a URL is entered that begins with "snippets:" (instead of like http://) that it should launch (or ask you to launch) Snippets.app and do something with that URL.

Their format is:

snippets:add?code=[ENCODED-CODE-HERE]&name=[SNIPPET-NAME]&relatedurl=[REFERENCE-URL]&author=[AUTHOR-NAME]

You'll only see this once if you check the box.

Since all my code snippets are in <pre> elements, this is how I add the Snippets.app button to each code block (simplified):

$("pre").each(function() {
    $preblock = $(this);
    $codeblock = $preblock.find("code");
    $snippets_link = "snippet:add?code=" + encodeURIComponent($codeblock.text()) + "&name=" + $title + "&relatedurl=" + encodeURIComponent(document.location.href);
    $("<a class='snippet-button'>Add to Snippets.app</a>").attr("href",$snippets_link).appendTo($preblock);         
});

Copy to Clipboard

This button is powered by the awesome Zero Clipboard. For a while after Flash 10 came out, copying to clipboard from the web was borked as Flash 10 had some new security restrictions that blocked the previous methods (Yeah, apparently Flash is needed to have this work correctly). Zero Clipboard stepped it up and fixed it somehow.


One-click copying to clipboard

One particular challenge here was with the rollover technique I'm using to display the "tooltip" like text for each button. On the three other buttons, I do a simple thing where I append a span to the anchor link on hover, and remove it on the hover callback:

$(".snippet-button").hover(function() {
    $el = $(this);
    $el.append("<span>" + $el.text() + "</span>");
}, function() {
    $(this).find("span").remove();
});

The span is styled and positioned with CSS.

The problem is, Zero Clipboard works by positioning a completely transparent flash embed over top of the button. This means there is no traditional hover even fired when the mouse goes over this area. Fortunately, Zero Clipboard provides event listeners which you can have fire callback functions for you. See the last two lines:

ZeroClipboard.setMoviePath( '/path/to/ZeroClipboard.swf' );
    
$(".copy-clip").each(function(i) {

    clip = new ZeroClipboard.Client();
    
    $el = $(this);
    $parent = $el.parent();
    
    clip.glue($el[0], $parent[0]);
    
    txt = $el.parent().find("code").text();
    clip.setText(txt);
    
    clip.addEventListener('complete', function(client, text) {
      // provide some user feedback of success
    });
    
    clip.addEventListener('mouseOver', copyMouseOver);
    clip.addEventListener('mouseOut', copyMouseOut);     

});

Those two functions, copyMouseOver and copyMouseOut are used to do the same span-applying-and-removing business the other buttons use. The one tricky-dick thing left is that these functions need to know which parent element to deal with, in the case of multiple snippets on a single page. Fortunately they automatically pass the object to the function which is loaded with info about that element, including the ID, which I use to specify which code snippet button we are talking about:

function copyMouseOver(passed) {
    $("#copy-" + passed.id).append("<span>Copy to Clipboard</span>");
};

I wanted to make sure there was a bit of user feedback when a clip was successfully copied to the clipboard, so you'll notice that the clip itself quickly fades down and back up after a successful copy. Somewhat subtle but I think it's fairly satisfying.

Coda and TextMate

Not much has changed here. I covered how to add Coda buttons in a previous tutorial. David Walsh covered the TextMate button, which requires some fancy server side action.

Seem to work OK?

Give it a test and let me know... I've heard some musings of FAIL on Twitter but all the buttons seem to work OK for me. If you want to do a FAIL report, please attempt to be helpful and explain which button isn't working, the browser/version/platform, and what actually happens.

Macity Mac Mac Mac

Yeah all the integrations are Mac software. Sorry about that, that's just how I roll. If there was a PC program that supported a URL protocol thingy, I'd check it out and see what I could do about integrating it. For now, the copy to clipboard thing should be useful still.

Comments

  1. Permalink to comment#

    Seems to work ok. The copy to clipboard part anyway. I am not yet a Mac guy.. I have thought about it for a couple of years but have such a hard time thinking of having to re-buy all of my programs.

    • Gringer
      Permalink to comment#

      I’d say postpone it for the next time you’re up to an upgrade that would involve re-purchasing the programms. Slowly transition between Mac and Windows.

      If not all programms are from the same creator, then get a Mac and use Boot Camp to switch between the OS’es and ease that up using VM-ware or Parallels. Then install the Win app’s in Windows and the Mac-apps in Mac OS X.

      that’s how I made the transition. After 8 months everything had it’s Mac-version. Some apps I didn’t even upgrade but went with one of the better open-source alternatives on Mac.


      I realise this succes-story may not work for everyone. Anyhow, it worked out for me :-)

    • Nick
      Permalink to comment#

      Some companies like Adobe will let you transfer your licenses from one OS to another. They’ll usually make you send your CDs to them, but I’ve done this a couple of times (with Adobe specifically) and have not had a problem.

      It’s definitely worth at least looking into. Once you switch, you’ll wonder how you ever made it this long on a PC.

  2. Permalink to comment#

    I wish my operating system is Mac Os X so that I can benefit from these useful tools.

  3. Tisi
    Permalink to comment#

    Wow, thanks a lot – Snippets Support is brilliant!

  4. Permalink to comment#

    Great post Chris!

    I especially love the breakdown of how you did the snippets integration. Snippets has quickly become my favorite snippets app & their recent update with “share on pastie” sealed the deal for me :P

    With these new updates, your snippets repository just became even more useful, so thanks for that and all your great articles!

    I’ll be sure to buy you a beer at CMS X ;)

    Cheers,
    Chris

    • Permalink to comment#

      How exactly is the snippets app going to help me? Does it integrate in other applications or do I need to have it open at the same time I code somewhere else? I can’t really think why I would need this other than having access to the snippets resources when I’m offline.

    • Permalink to comment#

      Yes, you can enable it in the services menu, which will then give you a “add snippet from selection” option, plus the sharing options are a biggie, as i am constantly pasting code on pastie and other only snippet sharing services. Plus the top menu bar gives you quick access to your snippets, etc.

      I guess it depends on your workflow and how you code. For me personally, my code snippets are an incredibly valuable resource, so having an app that i can manage those is as valuable as having a good font manager.

      Its free until the stable version comes out so there ain’t no harm in giving it a try and seeing if it works for you ;)

  5. You have to cater to the masses.

  6. Permalink to comment#

    Chech Vista firefox, no changes

  7. I don’t see anything on PC Chrome.

  8. Brilliant! I just downloaded the app like 2 days ago, and it’s nice to see I can easily add to the app. Chris you’re awesome.

  9. Permalink to comment#

    I’ve been using the “copy to clipboard” button, which is great, but wasn’t able to use the copy to Snippets.app function because, well, I didn’t know about Snippets (I’ve been using a different app for this, which I’m now going to retire and will switch to Snippets.)

    A longtime (primarily print) designer, I’m just starting out with coding and am excited as heck about it. The CSS-Tricks snippets library has been really useful, and this little button is going to using it that much easier.

    Thanks!

  10. Permalink to comment#

    Looks like you took my suggestion. http://twitter.com/snippetsapp/status/9295696311

    Thanks for listening!

  11. Permalink to comment#

    its more always for mac users

    we feel left out Visual Studio

    thanks anyway

  12. Permalink to comment#

    I don’t get any text on rollover over the copy to clipboard icon. Just the orange box around the icon. the other icons display text, just not that one.

    Using FF 3.6 on Vista

  13. Eric
    Permalink to comment#

    So much awesomesauce!

  14. Permalink to comment#

    FF 3.6 on XP – There’s a big box in the middle of the snippets. Presumably the Copy/Paste? But it’s huge. (like, 50px x 50px)

  15. Permalink to comment#

    Doesn’t show on google chrome.

  16. Permalink to comment#

    Chris you done it again. Now how about some love for us windows guys

  17. Permalink to comment#

    Does textwrangler have options for snippets?
    just wandering.

  18. Jorge
    Permalink to comment#

    Hi, i was reading you site, very interesting by the way, and found that when there are several code snippets the “copy to clipboard” animation was executed on the last one of them.

    If you add an id number attribute to each pre tag, then you could animate each one…

    clip.addEventListener('complete', function(client, text) {
    $("pre#pre-"+$(client).attr('id')).animate({opacity: 0.25}, 200, function() { $(this).animate({opacity: 1}) }) });

    Cheers

  19. Thanks for this, very interesting and can see myself using the copy to clipboard function within future apps.

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".