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:
- Find every block of code
- Find the title and actual code content
- Append a special Coda-formatted link to the block
- 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.
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!
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!
I believe this is fixed. Hard refresh and let me know.
Looks like that fixed it. Thanks!
wauw! this is way cool and it works perfect
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.
you just saved me a crap load of time! Thanks for all your hard work too.
Thanks Chris… I love coda!
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)
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.
Copying from your site and pasting into my Coda clips is easy enough for me. Thanks again.
Very nice! I don’t really find it useful, but it’s nice reading the code for it :D
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
¡Increìble señor Coyier, increìble!
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.
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?
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.
This should work:
Wah waaaaaah…. no love for PC users….. ;)
Chris,
There is a Jquery plugin that would nelp with the copy yo clipboard thing: http://plugins.jquery.com/project/copy
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!
Did you mean “Kanye”?
Genial!!! Buenísimo!! This make me love more and more my Coda!
This is awesome. Does anyone know a way to Sync these Snipplets across multiple Macs using Dropbox?
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.
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