Martin Ström
my-domain.se

TextMate Prototype & Scriptaculous Bundle

This the first version of a TextMate bundle for Prototype and script.aculo.us JavaScript libraries. The language grammar is based on from Justin Palmers Prototype Bundle but the other commands/snippets are all new.
Please let me know if you have any comments and/or improvements.

Download here

Prototypish Style Sheet Switcher

This is a Prototypish rewrite of Paul Sowdens Style Sheet Switcher. The original version has a lot of global functions so I put everything into a class instead and made the code a bit more elegant. It should work as the normal one except for some methods have been renamed.

A cookie library is included as well since the switcher needs to read and create cookies to save the users preferred style sheet.

Download

AutoPair functionality using Cocoa KeyBindings

I’ve been using the application “AutoPairs” since it was mentioned on 43folders some time ago. Yesterday (via the Macromates TextMate blog) I found an article on the Cocoa Text System and realised I could recreate AutoPairs’ functionality by just using native Cococa Keybindings found in OSX.

Add these lines to your ~/Library/KeyBindings/DefaultKeyBinding.dict (create the file if it isn’t already there) and the commands will be available in every application started afterwords.

/* Recreate Auto pairs functionality */<br />
"\\\"" = ( "insertText:", "\"\"", "moveBackward:" );<br />
"("    = ( "insertText:", "()", "moveBackward:" );<br />
"~("   = ( "insertText:", "{}", "moveBackward:" );<br />
"~8"   = ( "insertText:", "[]", "moveBackward:" );<br />
"<"    = ( "insertText:", "<>", "moveBackward:" );

When you type e.g ?2 for a double quote (as in swedish keyboard layout), it’ll automatically insert the ending quote as well and place the cursor between them. This will also work for “([{<”. Remember the shortcuts are for a swedish keymap so you might want to change that.

A real time saver when writing outside an editor without this functionality built-in (like TextMate).

Autonamed dump/temp folder

To keep my desktop nice and clean I have a folder called “Dump” where I put temporary stuff like apps I want to try, PDF:s to read later that day or files I’m currently working with. But sometimes I forget to look inside that folder to find out what’s there so I wrote this Folder Action to let the folders name reflect the number of containing files/folders. (I know I could just enabled “Show item info” from Finders “View Options” but I don’t want to see all info for my hard drives and iPod)

Just create a folder on your desktop, name it something like “Dump (temp)” and attach this Folder Action to it (Folder Actions need to be located in ~/Library/Scripts/Folder Actions).

-- Set item count as folder name.scpt<br />
on adding folder items to this_folder<br />
	my update_name(this_folder)<br />
end adding folder items to

on removing folder items from this_folder<br />
	my update_name(this_folder)<br />
end removing folder items from

on update_name(this_folder)<br />
	set this_name to POSIX path of this_folder<br />
	set sh_script to do shell script "P=\"" & (POSIX path of (path to me) as string) & "\";echo ${P/%.scpt/.sh}"<br />
	set new_name to do shell script "\"" & sh_script & "\" \"" & this_name & "\""<br />
	tell application "Finder" to set name of this_folder to new_name<br />
end update_name

The script needs a shell script to work (since I don’t like working with AppleScript that much). It should be named exacly as the AppleScript but with an .sh extension instead of .scpt and put in the same directory. Remember to make it executable (chmod +x "Set item count as folder name.sh").

#!/usr/bin/env bash<br />
# Set item count as folder name.sh

# Since the folder has a custom icon and therefore a `Icon?` file I<br />
# decrease the item count by 1. Bad solution but works for now.<br />
NUM_ITEMS=`bc <<< "$(ls "$1" | wc -l) - 1"`<br />
if [[ $NUM_ITEMS == 0 ]]; then<br />
	ITEMS="empty"<br />
elif [[ $NUM_ITEMS == 1 ]]; then<br />
	ITEMS="$NUM_ITEMS item"<br />
else<br />
	ITEMS="$NUM_ITEMS items"<br />
fi<br />
BASE=`ruby -e "puts %x(basename \"$1\").match(/(.+) \(/)"[1]`<br />
echo "$BASE ($ITEMS)"

I first renamed the folder from the shell script but then Finder would visually move the folder one step down or left on the desktop for every update. Instead I just let the shell script generatr the new name and pass it back to the AppleScript that will rename the file as I want.

Easy FeedBurner redirect

This is a trick I’m using at this site that I picked up somewhere on the FeedBurner Forums. I wanted to have my RSS-feed from this site to go via FeedBurner to get stats etc, but I don’t want to communicate the http://feeds.feedburner.com/xxxx URL public since it might change in the future. So instead, in my .htaccess, I have these lines that will redirect all visitors except FeedBurner itself (otherwise it wouldn’t have any chance to read and parse my feed) to my FeedBurner URL.

RewriteEngine On<br />
RewriteBase /martin/

# FeedBurner<br />
RewriteCond %{HTTP_USER_AGENT} !FeedBurner<br />
RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/haraldmartin [R,L]

Colhour WordPress plugin

This is a plugin for WordPress. The Plugin makes it easy to have elements on your site in colors generated by the Colhour system. Basically it will let you input CSS rules from a option page in the WordPress Admin, and when the site is viewed later it will have the colors replaced by an ever updating Colhour-color.

There are a couple of input fields on the options page; one for each “length” of the spectrum (for it to start over again). I.e., if you want a div element with the id “header” to get its background colorized from Colhour and its Colhour cycle starting over every day (after 24 hours), you just enter the CSS rules in the “day” input field. The actual color-value should be replaced with `%colhour%´ so the plugin can insert the current color in its place. 

I suggest not having any other CSS rules in the Colhour admin than the ones dealing with the colors you want replaced. I.e., strip out the fonts, border sizes etc and keep all that in your .css file where they belong (and can be cached).

Bad:

#myDiv {<br />
    font: 1.1em Courier; <br />
    padding: 2em;<br />
    background: #DDD url(my-background.png) no-repeat top left;<br />
    border: 2px dotted %colhour%;<br />
}

Good: 

#myDiv {border-color: %colhour%;}

Download here, put it in your wp-themes/plugins/colhour.php (note the .php extension) folder and activate it as usual in WordPress admin » Plugins. The options can be found under Options » Colhour.

WordPress theme released

This theme behind this site is now available for download. Read more…

WordPress theme

Finally this site looks like something other than the [default WordPress theme][default theme]. [Peter][] and I wanted to connect our work sites to each other and decided to use his simple but easy-to-use [WordPress theme][peters theme] as a base.

The problem was that his theme never was cross browser compatible and worked more or less only in [Safari][]. My first task was to re-code the theme from scratch to make it work in all modern browsers using valid [XHTML][] and [CSS][] with as clean and simple code as possible.

I also set all font sizes using [em][]:s (instead of px or pt) to make the text resizable. It wasn’t too hard making it work (even in Microsoft Internet Explorer) thanks to [some][em1] [great][em2] [resources][em3]. Sooner or later I’ll convert the positions, margins etc to em:s as well, but font sizes should be enough for now.

I also added [AJAX comments][] and used effects from [script.aculo.us][]. I’m using [Prototype][] to add CSS classes to some elements and to wrap i.e. all `

`'s content in a `` to achieve the look I wanted without any unnecessary markup. Since `` only is supported by Safari and I wanted to use it, I used a script (thanks [Wolfgang Bartelme](http://www.bartelme.at)) that replaces the regular text input field with a search field for Safari only. This way the document will stay valid XHTML 1.1. Next task was to make the theme more personal for my site. I've tried some different looks but couldn't really decide how I wanted it and choose (for now at least) a slightly darker version of Peter's theme. I think it looks good and is easy to use without making too much noise. When I implanted the tagging I first looked at [Ultimate Tag Warrior 3][utw] but it seemed too advanced for my needs, so I decided to use the native category system in WordPress 2.0, that lets one add tags (categories) by just entering them in separated by comma in a text field (WP 1.x didn't have this feature). The [tag cloud](/martin/tags) is a modified and simplified version of [Tag Cloud Plugin][tagcloud].

Download

Update April 20, 2006
The theme is now released in a beta version. Some notes:

• You’ll need the Post Updated Plugin to get a page’s last modified date.

• My “lite” version of the [TagCloud plugin][tagcloud] can be [downloaded here][tagcloudlite].

• You’ll problably want to change the autosave attributes value in javascripts/global.js (line #24) to your own unique id. Read more on the attribute.

I also found this great plugin for the admin area, Cat2Tag The link seems to be broken, get it download it here for now for easier tagging of your content without using a separete database like [Ultimate Tag Warrior 3][utw] does. Cat2Tag just use WordPress’ own categories instead.

Download.

Update May 4, 2006
The [TagCloud plugin][tagcloudlite] is updated to use the rel-tag microformat.

Update August 18, 2007

Since a lot of people ask me how to get the thumbnails to work, here is the instructions I usually email them:

— ? ——————

First, download a newer version of posts-thumbnail.php replace the current one (from the downloaded .zip file) with this one attached in this message.

Create the thumbnail image and name it “thumb-POST_SLUG.png”. The post slug is shown on the “edit post” screen in the admin (i.e my latest post with title “Rails’ time extensions ported to JavaScript” has post slug “rails-time-extensions-ported-to-javascript” and the thumbnail should therefore be named “thumb-rails-time-extensions-ported-to-javascript.png”). Then just upload the image from the same screen using WordPress’ built-in uploader (you dont have to give it any description or title). Then the theme should automatically find the image for you and show it in the list view.

———— ? ——

Btw is a new version of this theme under development and will make the thumbnail handling easier.

Update October 31, 2007

The link to the plugin “Cat2Tag” seems to be down (thanks Kris Aubuchon) so, for now at least, you can download it here.

I haven’t really looked into the new tagging system in WP 2.3 so perhaps this plugin isn’t necessary any more.

[tagcloud]: http://register.intruder.ru/2005/08/30/tag-cloud-plugin/
[tagcloudlite]: /assets/uploads/tag_cloud.php.html "Click here to download"
[peter]: http://konst-teknik.se
[peters theme]: http://konst-teknik.se
[default theme]: http://themes.wordpress.net/wordpress/ "Default WordPress theme 'Kubrick'"
[safari]: http://www.apple.com/safari
[xhtml]: http://validator.w3.org/check?uri=referer
[css]: http://http://jigsaw.w3.org/css-validator/check/referer
[em]: http://www.w3.org/WAI/GL/css2em.htm
[em1]: http://www.alistapart.com/articles/sizematters/
[em2]: http://www.clagnut.com/blog/348/
[em3]: http://css-discuss.incutio.com/?page=UsingEms
[AJAX comments]: http://zeo.unic.net.my/2005/12/25/wordpress-ajax-commenting-revisited/
[script.aculo.us]: http://script.aculo.us/ "Web 2.0 JavaScript"
[prototype]: http://prototype.conio.net/ "Prototype JavaScript Framework"
[utw]: http://www.neato.co.nz/ultimate-tag-warrior/

Colhour IRL

Another Colhour project!
I wanted to try to take the Colhour system a step out from the digital to the “real” by making a regular wall clock using the Colhour system. This was mostly an attempt to see if the concept could work outside the computer and if I could find the parts needed.

I wanted to find a mechanical clockwork that had date, year and month (or an easy way to hack it) as well, since the original system isn’t just using hour, minutes and seconds, but also dates. Sadly, I couldn’t find any clockwork like this (didn’t really expect it actually) so I bought a regular one and built the clock around my limitations.

My first solution was to set the date, year and month by hand since it isn’t so hard to adjust it everyday. But I changed it and removed the date parts and used just the parts the clock could control automatically. It’s currently made of just paper glued to the clock’s hands to rotate.
The result works, but I realized the hour is made for a 24 h clock but the clockwork, of course, is using 12 h. As an experiement this works for now, but I want to find a solution to make the dates work as well. One possibility could be to build my own clockwork and control it from the computer. Or one could put a 48 times bigger gear driven by the hour hand to make that one drive the date hands.

First version with manually controlled date hands

Second version, without dates

Terminal.app usage

The other day, Oskar Karlin asked me how and when I use the OS X Terminal app instead of e.g. the Finder. I’m not by any means a hard core command line guy but ther are often and often situations where the Terminal is faster or/and easier to use for the specific thing.

• To resize all PNG-images in the current folder to 600px width
  find . -name "*.png" -type f -exec sips --resampleWidth 600 {} \;

• To put in a “.thumbnail” in the file name
  for file in *.png; do mv $file ${file/.png/.thumbnail.png}; done

• When I needed to know how many tracks we (Pluxemburg) sent to ITMS
  `find Music/iTunes\ Producer/Playlists -name metadata.xml -exec grep “
  

” {} \; | wc -l`

• Copy a file to our Burnfield server (instead of launching a FTP-client)
  scp myfile burnfield@bidwell.textdrive.com:

• Basic, but to view the apache error log
  tail /var/log/httpd/error_log

• To view the source of this site’s feed
  curl "http://burnfield.com/martin/feed" | head

• And how FeedBurner gets it
  curl --user-agent FeedBurner "http://burnfield.com/martin/feed" | head