First, use the vim :read command, using the external command for subversion status as input: :r ! svn st

Look through the list and delete the lines with files you don’t want to commit, with dd.

When only files which you plan to commit are left in the buffer, run gg <C-V> G w d to delete the status column.

Next, enter visual mode and select all the lines and join them: gg <S-V> G <S-J>

Yank this line ( yy ), then run the external command :! svn ci <C-R>" -m 'Your log msg here'. Typing Ctrl+R and ” will expand to the last register that you yanked.

That’s all! It’s not very difficult, and it made the process of doing my commits much more efficient. Let me know in the comments if it helped you.

To celebrate, I decided to include the entire Gawker network in the script, something I really should have done in the first place.

UPDATE: Turns out this has already been done! Oh well, I still had fun with it.

Last night I followed a link from Reddit to The Berlin Wall: 20 Years Later on the New York Times site. It was an interesting feature, but I thought that the use of Flash to display the before and after photos was a little bit gratuitous, especially considering that they could make the content accessible to a wider range of user agents (mobile browsers and Google image search come to mind) by using CSS and Javascript.

Here's a demo I put together:

If your browser supports it, drag the handle in the middle to compare the two photos

If you'd like to experiment with this yourself, here's how:

1. Include jQuery and jQuery UI. I like to use the libraries hosted by Google.
2. Here is the markup - beats the hell out of Flash embed code!

   
   <div class="imagecompare">
       <img src="clip_img_1.jpg" alt="Before photo shows model with frizzy hair" />
       <img src="clip_img_2.jpg" alt="After photo shows manageable (but greasy-looking) hair" />
       <a class="resizer">If your browser supports it, drag the handle in the middle to compare the two photos</a>
   </div>
   

3. Here is the CSS. In a nutshell, we position the images on top of one another and then set the CSS clip property of the 'after' image. However, we apply most of the styles by adding classes using jQuery, so that if javascript is disabled the images can be seen in all their unclipped, static-positioned glory. Some CSS is also applied to the a.resizer to position it in the middle of our container, set the cursor style and set an extreme negative text-indent to hide the content of the link.

   
   div.imagecompare { width:500px; height:640px; position:relative; }
   div.imagecompare img.after { 
      clip: rect(0px 500px 640px 250px); /* use spaces instead of commas so it works in IE */
   }
   div.imagecompare .resizer {
      display:none; /* our JS will set this to block */
      height:100%;
      width:2px;
      position:absolute;
      top:0;
      left: 250px;
      cursor:col-resize;
      background:#888;
      text-indent:-999em;
   }
   

4. The jQuery is pretty straightforward, because Draggable does most of the work. We set a callback on the 'drag' event, to adjust the clip of the after image when the resizer is dragged. There is also a function that sets the clip and repositions the resizer on click. Finally, we set some styles which are being set by JS because they shouldn't be present if JS is disabled.

   
   jQuery(document).ready( function ()
    {
        /* Init jQuery UI Draggable on the resizer element - see http://docs.jquery.com/UI/API/1.7.2/Draggable */
        jQuery('.resizer').draggable({ 
            axis: 'x',
            containment:'parent',
            drag: function(event,ui) 
            {
                // Set the clip property of the after image on drag
                jQuery(this).prev('img.after').css('clip','rect(0px 500px 640px '+ui.position.left+'px)');
            }
        }).css('display','block');
        jQuery('.imagecompare img').click(function (event) 
        {
            // Get offset of imgcompare div
            var imgcompare_offset = jQuery(this).parent().offset();
            // The position/clip-left value we should use is the X coordinate of the click, minus the offset of the imgcompare container.
            var pos = event.pageX - imgcompare_offset.left;
            // Set the resizer position
            jQuery(this).parent().find('.resizer').css('left',pos+'px');
            // Set the clip
            jQuery(this).parent().find('img.after').css('clip','rect(0px 500px 640px '+pos+'px)');
        });
   
       /* Set the position of the img elements inside .imgcompare so they will overlap */
       jQuery('.imagecompare img').css({
            position: 'absolute',
            top: 0,
            left: 0 
       });
       
       jQuery('.imagecompare img:last').addClass('after'); // Add after class to the 'after' image
   });
   

This was my first time working with the CSS clip property. While I was pleasantly surprised that it works in IE6+ and all modern browsers, I was disappointed to learn that it's impossible to set the top, right, bottom and left clip values separately as you can for margin and padding. Instead, you have to reset the whole statement including all four values.

Be sure to leave a comment if you find a use for this code!

There’s kind of a funny story to go along with this video, and one that I should tell before I forget all about it. On August 31st, the lady and myself were back in my hometown of Burk’s Falls, Ontario for an intimate Hawksley Workman show in the Towne Theatre, which seats about 150.

While we were waiting for the show to start, a very tall and distinctively dressed woman, with a particular, familiar hairstyle walked down the aisle past us, and set down a few rows ahead of us. I thought “that has to be Genesee!” (my friend and an ex-bassist of my ex-band). It wasn’t completely outside the realm of possibility that she would be back from Whitehorse visiting her family who live in the area. Since this would be the first time I had seen her in a few years , I was excited about this and tried to stage-whisper her name to try and get her attention. After a few unsuccessful attempts, I started to feel like I was making a scene and I would either have to try again later, or find her after the show.

The show, by the way, was excellent. It was my first time seeing Hawksley with a full band, and the set list was a great cross-section of his catalogue. I was especially happy that he played “Your Beauty Must Be Rubbing Off On Me,” but the video of that didn’t turn out (too much bouncing to good music). At around the halfway point, he announced that he would like to invite a special guest on stage to help out with a song. Surprisingly, the woman I thought was Genesee stood and took to the stage… It turns out that I was wrong, and as much as I thought they looked alike in a dark theatre, Imogen Heap is not Genesee Keevil.

I searched the Tomboy mailing list and browsed around the wiki, and found that I wasn’t the first person to think of this (of course). I found a blog post about a mockup for Tomboy Online, but this was more of a hosted, social type of app and I was interested in making a standalone script. Also, it was only a concept, and no code exists for it.  In the comments of this article there was a link to tomboy-web, but it was written in Java, so I couldn’t really play with it.

Eventually I came across the shell scripts and PHP of Erik Torsner, which I only needed to tweak slightly in order to use with the fantastic iUI library.

Rather than using shell scripts to sync up, I suggest following the steps outlined in Synchronize Tomboy Notes with Anything.

Download / Install

1. Grab the zip file (demo)
   
2. Unzip and upload to your web server BUT not before reading the security warning below.
3. Put your .note files in the ‘note-storage’ directory, either by manually uploading notes every once in a while or (way cooler) following the instructions in this blog post.

Warning!

This is only a proof of concept, it’s a really bad idea to sync your confidential tomboy notes to your webserver. There are no security measures whatsoever. On the other hand, WordPress has an optional ‘blog by email’ feature which relies on the obscurity of a secret email address… if you are going to risk it, place the files in a very obscure directory (named as an md5 hash or similar).

Until I came across this on Addictomatic, I had no idea that it was possible to write macros for it in Javascript. I’m looking forward to more macros, tips and tutorials on writing my own jEdit plugins from this blog.

Awesome, Dead_Cabbit!

I’d been considering eventually writing a post to extol the many virtues of this free, open source, cross-platform and feature packed programmer’s text editor, but when I saw that it was snubbed in the LH poll, I was sort of inspired to post something in defense of it.

What’s so great about jEdit anyway?

Rather than focus on technical features (such as native syntax highlighting for 130 languages) that you could easily read about on the official jEdit site or in the Wikipedia entry, I’m going to focus on practical reasons why jEdit is enjoyable to use, day to day.

It’s very customizable

jEdit is flexible, and extensible. You can easily modify the interface of the program to your liking by docking and floating panels for your favourite program functions and plugins, as well as customizing the main toolbar (or removing it altogether).

The built-in plugin manager (on the menubar, Plugins > Plugin manager) makes it easy to add new features to the program to customize your editor to your needs. Whether you prefer a simple text editor with auto-indentation and syntax highlighting, or a full-blown IDE with Subversion integration, sFTP and an IRC client built in, jEdit is a great choice.

Further on the topic of extending the capabilities of jEdit, you can also create macros which can control every aspect of the program (perform editing functions, change the interface, browse files, etc.). You can either do this the user-friendly way (Macros > Record Macro) or if you’re comfortable with the BeanShell scripting language, you can study the jEdit API and write your own. A macro can be assigned to any user-defined keyboard shortcut, and as a matter of fact, any feature of jEdit (and most plugins) can also be set to a custom shortcut. (Tip: when using the BufferTabs plugin, you may find it convenient to set up your keyboard shortcuts for buffer switching, closing, new tab , etc. to be the same as Firefox)

Once you’ve taken the time to get things exactly the way you like them in jEdit, you might wonder whether there is any way for you to export these settings, so that you can avoid this lengthy ordeal process in the future…

It’s cross-platform and portable

jEdit stores all settings, macros, plugins, configuration options, etc. in a settings directory located in ~/.jedit , where ~ is the user’s home directory (in my case it’s C:\Documents and Settings\Perry). Exporting/backing up all of your work customizing the program is as easy as making a copy of that folder.

Since jEdit is written in Java, it will run anywhere that a JVM is installed (Windows, OSX, Linux). Specifically, jEdit 4.3 requires Sun’s JDK 1.5.0 or later.

So in practice, you could have a Mac with OSX and a pc running Ubuntu at home, and use Windows at work, yet keep them all synchronized with your lastest config just by occasionally overwriting the .jedit folder on the installations. Pretty smooth!

Of course, in the above scenario it might be less work to just run it from a USB key.

This is my first jQuery plugin, so it doesn’t follow the more advanced plugin development pattern by Mike Alsup, instead I followed a more rudimentary plugin authoring tutorial.

Here’s an explanation of the plugin, and examples of its usage.

In North Bay snacking news, my friend Sherry Milford’s organic, wheat-free, vegan baking is now available at Twigg’s on Fraser street.

Sherry of Heal Thy Health is a certified nutrition consultant, and along with her partner Yan Roberts is also the proprietor of the Piebird Bed and Breakfast, in Nipissing Village.

In the future, I plan to share jQuery plugins, CodeIgniter libraries, and anything else I code that may be useful to other developers.