Snap Preview Anywhere

Once again, this is what happens when I stop paying attention (to be fair, though, I was on vacation this time). As mentioned in various posts linked off of the Community Server Daily News, Snap (whom I had admittedly not heard of until today) has come up with a damn cool little tool called Snap Preview Anywhere that creates popup Javascript/HTML previews of the links on your site. Want to see it in action? Just roll over any link on this page! This is really handy for people like me who like to litter their blog posts with lots of pointless links.

While that's fancy enough on its own, what impressed me the most was how easy it is to implement on your site. You go through the sign up process and you add one Javascript reference to your site. That's it. Very cool stuff.

Well, it's almost that easy. Snap Preview Anywhere creates previews for every link on your page. This has the rather annoying side effect of previewing links back into your own site. Snap does provide a simple Javascript solution for disabling the previews on internal links, however:

<script type="text/javascript">

//<![CDATA[

    //change sites internal links to class "snap_nopreview"

    var links = document.getElementsByTagName('a');

    for (var l = 0; l < links.length; l++)

    {

        if(links[l].href.match(/^http:\/\/blog\.ninjafish\.net/))

        {

            links[l].className += " snap_nopreview";

        }

    }

//]]>

</script>

Add this script to the bottom of your page, before the </body> tag (it has to run after the page has rendered). Obviously, you'll want to change the search string to match your site instead of mine. There's also no reason why you can't use this to filter out domains other than your own.

[Update] If you use Scott Watermasysk's Share It module, you'll probably want to update that script to filter out the links that it creates. Here is the regex I am using to do just that:

/^http:\/\/(blog\.ninjafish\.net)|(del\.icio\.us\/post)|(www\.digg\.com\/submit)|(reddit\.com\/submit)/

Source Code Formatter for Windows Live Writer

Last night I decided to see if I couldn't integrate my source code formatting into Windows Live Writer using their SDK (which is really nothing more than a help file). It turns out that it is ridiculously easy to create simple plugins for this thing, and was able to create a functioning plugin in about an hour.

Since I've had a couple of people ask how I format source code for my blog, I'm going to go ahead and make it available for download. It's built for Framework 2.0, so you'll need to have that installed ahead of time. A CSS stylesheet containing the styles that I use is also included. Thanks to manoli.net for the actual source formatting code.

To use, just copy the assembly into Live Writer's plugins folder and start up the application. The new option will appear under the "Insert" menu. You will get the following dialog:

Paste/type in your code, select a language, choose line numbers and/or alternating line styles, and click OK. The resulting HTML will be dropped into your post. Just don't forget to splice the CSS into your blog's stylesheets, as the formatter does not embed the styles into the HTML tags.

Consider this unsupported. I cannot guarantee that it will not detonate your computer. Then again, I'm pretty sure it won't.

Windows Live Writer Beta

I caught wind of the Windows Live Writer beta from Major Nelson's blog. He wasn't kidding when he said that BlogJet users should check it out — it feels almost like a BlogJet clone. There are still some things that BlogJet does better, though. For example, I like how BlogJet automatically substitutes certain HTML entites, such as &mdash; and curly quotes, as you type, as well as its text substitution features (similar to Community Server's Text Parts, but built into the editor).

CS support in Live Writer is decent enough. It goes through the MetaWeblog API, much like every other WYSIWYG editor on the market. The application did make an attempt to download my style sheets from the web site, which would have been really cool if it had actually worked. Perhaps they could add a feature to allow you to add these manually. Live Writer also makes any pings after posting via the editor itself. BlogJet appears to go through its posting API, which CS does not support, so I have to ping manually.

Windows Live Writer appears to be shaping up really nicely. If they can catch up with BlogJet's feature set and add a few more perks, I might just make the switch.

This post was made (and updated) with Live Writer, of course.

[Update] After seeing Dave Burke's post on Live Writer and that his blog is apparently much less uppity than mine and downloaded his styles without a problem, I decided to give it another go. Worked wonderfully the second time, but unfortunately it appears to have some issues pulling images out of the CSS file. See for yourself:

I'm impressed with how well the preview works in terms of showing you how your layout will work in its final form. However, the lack of CSS image support (which may stem from the fact that my styles use relative paths) makes it too annoying to work in this mode all the time. Still very cool stuff. I look forward to seeing what else they have in store for us.