RichardBenson.co.uk

YUI Editor in Movabletype v1.3

2009-05-28T10:18:09Z

A new version of the YUI Rich Text Editor in MovableType is available, this version adds a new button to your toolbar that will search your entry's text and extract terms that can then easily be added as tags.

Personally, I can never think of proper tags for all my entries, so I created this. Based on an article from Zomie.com, I took the concepts there and added them to the YUI RTE plugin.

To enable auto-tagging you will need to get yourself an appid from the Yahoo! Developer Network, but it's very straightforward.

Once you have an appid, enter it into the blog plugin config page and a button will be added to your RTE toolbar which, when pressed, will scan your text for terms and present you with a list of suggested tags, which you can then click on to add them to your tags field.

Currently only searches the active page (body/extended), so try it on both to get the best results if you are using an extended entry.

Download YUI Rich Text Editor for MovableType 4 v1.3

Adding YUI RTE in MoveableType Community Solution

2009-04-20T14:58:03Z

On certain sites, you may want to allow your users a little more freedom with their comments, or if you're using the community templates in MovableType, then you may want to improve the "Create Entry" screens to allow rich text.

I managed to squeeze the YUI RTE into a stock forum template set, then just haven't got round to writing it up yet. You can see it in action here, and below the jump is the write-up, it's surprisingly easy!

I've also put it on here, for registered commenters, something else that needs a write-up really!

Create Entry

First up, we need to edit the "Create Entry" template, look for this line:

<mt:SetVarBlock name="html_head">

And immediately after it, paste the following code:

<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/assets/skins/sam/skin.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/container/container_core-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/editor/editor-min.js"></script>

This loads the relevant YUI modules onto the page for later use. You will also need to add the "yui-skin-sam" class to your body tag. Luckily this template set allows you to easily edit the body class, look at the first line of this template and change it to the following:

<$mt:Var name="body_class" value="mt-profile-post yui-skin-sam"$>

The last stage in this template is to add the code that will actually generate the editor on the page. Paste the following after the "Entry Form" include and before the "Footer":

<script type="text/javascript">
var myEditor = new YAHOO.widget.SimpleEditor('entry-body', {
    height: '300px',
    width: '550px',
    handleSubmit: true,
    dompath: true, //Turns on the bar at the bottom
    animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();
</script>

You're done with the Create Entry template for now, but don't bother publishing, just save, as we need to change the JS files before it will post properly.

Now, the next stage requires editing the "GlobalJavaScript" template, which will affect all your blogs/sites that use it on this MT installation, so if you only want to apply this change to one

blog/site/forum then you will need to copy the template into the site's templates and edit there.

In "GlobalJavaScript" look for the "mtCommentOnSubmit" function and add the line:

myEditor.saveHTML();

On line 3 of that function (after the first "mtRequestSubmitted = true;").

Re-publish and you're done.

Coming up soon, adding YUI RTE to replies and to a normal blog install.

YouTube lightbox

2009-04-02T16:58:08Z

For a while now I have been toying with making my own JavaScript libraries built around the YUI libraries, as there were things out there I wanted but didn't seem to exist in a YUI flavour.

I since found that exactly what I wanted didn't seem to exist in any flavour (please correct me in the comments if I am wrong).

The two things I wanted straight away were image and video lighboxes. Yeah, an image lightbox in YUI exists, but I want to just add a class name to a link and magically have the lightbox do all the work, and I wanted the same for youtube links. I believe that making things as simple as possible for people, means they are more likely to use it.

So I went and made them.

My JavaScript Libraries

New Host

2009-04-02T11:35:03Z

After the balls up the other day, I've been rushing to get the site transferred over to a new host and sort out the templates, something I'd been putting off for a long time.

There's still lots to come but I've noticed some peaks in traffic and I also have a couple of articles/tips that I want to get out there. So if you notice anything odd, please let me know, I'll be adding features back in over time.

As I love YUI so much, I've stuck it all over the place! Layout is done with YUI Grids CSS, menu is YUI Menu and registered users can use the YUI Rich Text Editor for replies!

I'm hoping to stick all the facebook features in as well, without using jQuery. I don't like libraries that break other libraries (another reason why YUI is great!) and the fact that neither jQuery nor MooTools can make their libraries play nice, turns me off the completely.

I've been a fool!

2009-03-18T09:16:20Z

Made a classic, school-boy error last night...

Was moving a movabletype installation from 2 recently decommissioned dedicated servers to a cloud hosting environment and noticed that the wonderful people at the new place allow you IP access to the MySQL servers. "Great" I though, I can use the MySQL migration toolkit, this will be a breeze. So I restored the backup from the dedicated servers to an intermediary server (can you see where this is going yet?) and then proceeded with the transfer.

I didn't think to check if the database name from the backup was the same as one on the intermediary....

And so I lost everything! Scoured all 4 PCs I use regularly for backups and found one from January (it's just a personal/dev server so I rarely back it up). Luckily I'm not a prolific poster so putting back all the posts was easy but I've lost all your comments since then. And I had to take the site down to stop any republishing overwriting what I have left.

Sorry about that!

Hoping to get back to normal (ish) soon, the biggest loss to me is the massive archive of action stream data I had built up, I use it as a personal link/video archive and also like to go over and see what other things I was doing on certain days, now it's all gone!

YUI Editor in Movabletype v1.2

2009-03-15T10:18:33Z

Another simple update to use the latest YUI library (2.7.0)

There's changes in config.js and js/load.js as the Element utility came out of Beta

Download YUI Rich Text Editor for Movabletype 4 v1.2

BBC Publish F1 Calendar as iCal

2009-03-13T09:52:21Z

Congrats BBC, this is a brilliant idea, everyone go there and tell them how wonderful an idea it is and that they should carry on doing it. Go on, do it now, I'll wait.....

For those without iCal, here's the schedule displayed nicely on the web for you. This should keep itself up to date, and if the BBC add the rest of the season, I'll update this page as well so bookmark it to keep up to date with the schedule.

UPDATE: After publishing the first two races as ICS files, it seems the BBC have not done the same for China, so I will keep this as up to date as I can manually.

UPDATE 2: They've published the full season now at last! Head over here to get your own ics file, or keep referring to the below calendar, which should now have the whole season in!

Embedding YouTube videos from Action Streams

2008-12-11T13:56:15Z

The next logical step from displaying a thumbnail of your posted or favourite videos is to actually enable playing of the video in your own webpage. Thankfully, this is simple with youtube's embed code and your Action Stream. I've now added this to my video calendar page and i think it looks good and works rather well. It may be a little to much to add it to the home page, plus we don't want that to slow down any, it's already having to grab resources from all over the place anyway, so adding 9 embedded videos may be a little too much!

Code after the jump..

Simply add the following ot your template to display videos embedded on the page:


<mt:if name="service_type" eq="youtube">
<mt:SetVarBlock name="videoid"><$MTStreamActionURL regex_replace="/http:\/\/www\.youtube\.com\/watch\?v\=/","" $></mt:SetVarBlock>
<object width="320" height="265">
    <param name="movie" value="http://www.youtube.com/v/<mt:var name="videoid">&hl=en&fs=1&rel=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/<mt:var name="videoid">&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
</object>
</mt:if>

This grabs the actual video id from the StreamURL and sticks it into the standard embed html that each video provides. You can adjust the sizes, I find the easiest way to make sure you get it proportional is to actually go to a video on youtube, select the embed and customise options then view the code it outputs. From this you can work out what to change in the above code to add related videos, changel colours, add a border etc etc.

Action Stream 2.0 field list

2008-12-08T13:45:29Z

Please Note: This is for version 2.0 of the Action Streams plugin, for the 1.0 list see this post.

Differences and additions between v1 and v2 are highlighted in yellow.

Additionally, v2 has not yet been officially launched, as such this list may change between now and launch and I will only be highlighting differences from v1 to v2, not from now to v2.

The following is a description of all the fields found in the default plugin (without any additional profile plugins) in the following format:

service_type
- stream_type
  - MTStreamActionVar name="xx"

One important difference to note is that between "stream_type" and "service_type". The difference is a stream type gathers together similar feeds, i.e. the photos stream_type will be all services where you post photos to, whereas a service_type of “flickr” will just be all actions based on flickr (including favourites etc).

List of current Action Streams fields:

oneup

playing
1. url
2. title
3. playing

backtype

comments

url
title

colourlovers
1. colors
  1. title
  2. url
  3. created_on
  4. thumbnail
2. palettes
  1. title
  2. url
  3. created_on
  4. thumbnail
3. patterns
  1. title
  2. url
  3. created_on
  4. thumbnail
4. favpalettes
  1. url
  2. title
corkd
1. reviews
  1. url
  2. title
  3. review
2. cellar
  1. url
  2. title
  3. wine
3. list
  1. url
  2. title
  3. wine
delicious
1. links
  1. created_on
  2. title
  3. url
  4. note
digg
1. links
  1. created_on
  2. title
  3. url
2. submitted
  1. created_on
  2. url
  3. title
ffffound

favorites

url
title

flickr

favorites

url
title
by

photos

url
title
thumbnail

friendfeed
1. likes
  1. url
  2. title
gametap
1. scores
  1. score
  2. url
  3. title
goodreads
1. toread
  1. url
  2. title
  3. by
  4. created_on
  5. modified_on
2. reading
  1. title
  2. url
  3. created_on
  4. modified_on
  5. by
3. read
  1. title
  2. url
  3. created_on
  4. modified_on
  5. by
googlereader
1. shared
  1. title
  2. summary
  3. url
  4. enclosure
  5. source_title
  6. source_url
  7. note
iconbuffet
1. icons
  1. url
  2. title
identica

statuses

url
title

iminta
1. links
  1. url
  2. title
istockphoto
1. photos
  1. url
  2. title
  3. thumbnail
iusethis
1. events
  1. url
  2. title
2. osxapps
  1. url
  2. title
  3. favorite
iwatchthis
1. favorites
  1. url
  2. title
jaiku
1. jaikus
  1. url
  2. title
kongregate
1. favorites
  1. url
  2. title
  3. thumbnail
2. achievements
  1. title
  2. url
  3. game_title
  4. thumbnail
lastfm
1. tracks
  1. url
  2. title
2. lovedtracks
  1. url
  2. title
  3. artist
3. journalentries
  1. url
  2. title
4. events
  1. url
  2. title
livejournal
1. posts
  1. url
  2. title
magnolia
1. links
  1. url
  2. title
  3. tags
  4. note
netflix
1. queue
  1. url
  2. title
  3. thumbnail
2. recent
  1. url
  2. title
  3. thumbnail
netvibes
1. links
  1. url
  2. title
ohloh

kudos

url
title

pandora
1. favorites
  1. created_on
  2. title
  3. guid
  4. url
  5. album_art
2. favoriteartists
  1. created_on
  2. title
  3. guid
  4. url
  5. artist-photo-url
3. stations
  1. created_on
  2. title
  3. guid
  4. url
  5. station-image-url
picasaweb
1. photos
  1. url
  2. title
  3. thumbnail
p0pulist
1. stuff
  1. url
  2. title
  3. thumbnail
pownce
1. notes
  1. url
  2. title
  3. note
reddit

comments

url
title

submitted

url
title

favorites

url
title

dislikes

url
title

slideshare

favorites

url
title
thumbnail

slideshows

url
title
thumbnail

smugmug
1. photos
  1. url
  2. thumbnail
steam
1. achievements
  1. title
  2. ident
  3. gamecode
  4. game
  5. description
  6. thumbnail
tumblr
1. events
  1. url
  2. title
twitter

statuses

url
title

favorites

url
tweet_author
title

typepad

comments

url
title

uncrate
1. saved
  1. url
  2. title
upcoming
1. events
  1. url
  2. title
  3. venue
  4. created_on
  5. modified_on
  6. identifier
viddler
1. videos
  1. url
  2. title
  3. thumbnail
vimeo
1. videos
  1. url
  2. title
  3. thumbnail
2. like
  1. url
  2. title
  3. thumbnail
vox
1. favorites
  1. url
  2. title
2. photos
3. posts
  1. url
  2. title
  3. tags
website
1. posted
  1. identifier
  2. title
  3. summary
  4. url
  5. source_title
  6. source_url
  7. created_on
  8. modified_on
wists
1. wists
  1. url
  2. title
  3. created_on
  4. tags
  5. thumbnail
xboxlive
1. gamerscore
  1. url
  2. score
  3. identifier
yelp
1. reviews
  1. url
  2. title
youtube
1. favorites
  1. url
  2. title
  3. by
  4. thumbnail
2. videos
  1. url
  2. title
  3. thumbnail
zoomr
1. photos
  1. url
  2. identifier
  3. thumbnail

Removing a Drive from a Spanned Volume

2008-10-22T11:45:22Z

When I needed more space in my main PC, I went for the (then) cheaper option of 4x 250GB drives over one large one, and as I wanted to avoid problems with moving the disks I didn't use the motherboard's RAID features and instead went with Windows dynamic discs and a spanned volume.

Time moved on and I wanted some of the contents of that drive on my main PC and the rest on the media PC, but I had nowhere to store roughly 1TB of data whilst I re-arranged the disks. After much research on the net everyone told me that it wasn't possible to remove a single drive from a Windows spanned volume. That's never stopped me trying before and I am glad to say that I managed it! Instructions after the jump.
NOTES: Apologies for the lack of screenshots, I had assumed that all those people were right and it couldn't be done so didn't document it as I tried. The majority of the work was done under Windows Vista, however I used my Windows XP partition to aid in moving locked files. This is designed for people who are familiar with computers. file systems and data recovery, do not perform this technique on any vital data without full and verified backups. I will not be responsible if this trick kills your data, it worked for me, but that doesn't mean it will work for you!

The first stage of the process is data clean-up and sanitisation. In my situation I needed to make sure that one of the drives had no data left on it so that it could stay in my main PC and the block of three could move to the media PC. A little tidying and deleting left ~400GB of free space, more than enough to release one of the 250GB drives. You also need to make sure there is no page file on the disk and that hibernation, system restore and volume shadow copy are all disabled on the drive.

Now go to disk management (right-click my computer and select "Manage" then "Disk Management" on the left) and look at your disk layout. If you right click the spanned volume there will be an option to shrink the volume. If the amount of space it says you can shrink is larger than the size of the drive you want to move then you are in luck and you can move on to later steps. For me, it just said 11GB, not much use! The reason Windows can't shrink the partition any more is that it doesn't seem to be able to move files, and will only shrink as far as the first sector of data that it finds.

So you need to move all the data to the start of the volume, a job for defrag surely? Well, Windows built in defragger did nothing to help, and Diskeeper just took forever and didn't help get the available shrink space any larger. A hunt round the net found JKDefrag a free tool that will do anything you like with your data, including move everything to the start of the drive even if it ends up fragmenting some of the files to do it.

Grab a copy of JKDefrag and extract the zip, now run it using the following switches:

jkdefrag -a 5 X:

This will take it's sweet time if you've got a lot of data to move around, but it will do it's job. Keep an eye on the disk map that's presented, if you have no red dots in the upper portions of the display, have a look at your available shrink space and see if it's enough.

I had one little ass of a sector right near the end of the volume that wouldn't budge. I tried the defrag in safe modes of Vista and XP but nothing would shift it, thankfully JKDefrag has a handy log file that tells you what it can't move. Have a look in there for a guide as to what is stuck. In my case it was X:\$Extend\$UsnJrnl:$J:$DATA which is the NTFS USN Journal that logs and tracks changes to the file system for rollbacks and other functions. So you need to delete this, but don't worry, a chkdsk will replace it. Use this command to remove the USN journal:

fsutil usn deletejournal /D X:

now run your JKDefrag again, then reboot and do it again, maybe even boot into safe mode and do it again, until there are no little red spots in that top part of the drive map. When they are all gone you can try your shrink volume again.

For me this worked wonderfully, and I had a shrink size nearing the 400GB free space on the drive, to make sure i definitely got the partition off one of the disks, I shrunk it by ~300GB and there it was, a completely blank drive. A little pluging and unpluging revealed which physical disk was empty and then out came the other three and into another Windows PC.

To get the drive to show up in XP I had to rebuild the partition table using a command line tool I now can't find, but I will update here if I remember.

I also had a problem with Vista not showing "Documents", "Pictures" etc as these were all on the drive that dissapeared. There was also no option to change their location, however a quick reg hack fixed that, just edit the contents of [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders] to suit. Be warned, DO NOT EDIT [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Shell Folders] as it will do nothing, and is there only as a copy of your settings.

YUI Editor in Movabletype v1.1

2008-10-03T10:49:39Z

This update merely makes the plugin use the latest (2.6.0) library.

A small change was made in config.js, so back that up if you've made your own customisations, and change ConfigYUIBase to be "http://yui.yahooapis.com/2.6.0/build/".

The other change is in load.js, so if you are hosting the YUI scripts locally you'll still need the update.

Download YUI Rich Text Editor for Movabletype 4 v1.1

Sporepedia Action Stream v0.3

2008-10-01T12:55:11Z

Updated to show creations now that the official site has an RSS feed.

Working on achievements and Sporecasts for the next versions

Download Sporepedia Action Stream Plugin for MovableType v0.3

2008 Christmas list #0000001

2008-10-01T10:16:44Z

Anyone out there trying to find the perfect Christmas present for me (surely you all are?) need look no further, as always, eBay has the answer.

Full size replica Roman siege catapult

Built for a TV special, this working Ballista weighs 12 tons and is about 7.5m high. I'm sure for the extra £17.5k their asking to put it up, they can find a way to squeeze it into my garden.

MT.org Action Stream 0.1

2008-09-02T21:53:04Z

A very simple action stream to add your activities on MT.org to your stream.

The plugin pulls in plugins you have posted and your "activity" as defined by the list on your profile page.

As the actual XML for your recent activity is not very useful, this pulls out the relevant information and formats it for stream display.

This first version is rough round the edges for the "activity" stream, I would prefer it to display exactly as it does on mt.org, but the plugin section is as good as it will get!

Feed and category available as usual.

Download movabletype.org Action Stream v0.1

Action Stream field list

2008-09-01T10:34:01Z

The Action Stream plugin provides a lot of information about your profiles which isn't accessed by default. With a little playing (as described in my previous posts) you can really start making your action streams work for you and provide a "lifestream" to your own blog.

The following is a description of all the fields found in the default plugin (without any additional profile plugins) in the following format:

service_type
- stream_type
  - MTStreamActionVar name="xx"

I will try to keep this up to date as new streams are added to the plugin. One important difference to note is that between "stream_type" and "service_type". The difference is a stream type gathers together similar feeds, i.e. the photos stream_type will be all services where you post photos to, whereas a service_type of “flickr” will just be all actions based on flickr (including favourites etc).

List of current Action Streams fields:

oneup

playing
1. url
2. title
3. playing

colourlovers
1. colors
  1. title
  2. url
  3. identifier
  4. creater_on
  5. thumbnai
2. palettes
  1. title
  2. url
  3. identifier
  4. created_on
  5. thumbnail
3. patterns
  1. title
  2. url
  3. identifier
  4. created_on
  5. thumbnail
4. favpalettes
  1. url
  2. title
corkd
1. reviews
  1. url
  2. title
2. cellar
  1. url
  2. title
3. list
  1. url
  2. title
delicious
1. links
  1. created_on
  2. title
  3. url
  4. annotation (requires code change)
digg
1. links
  1. created_on
  2. title
  3. url
2. submitted
  1. created_on
  2. url
  3. title
flickr
1. favorites
  1. url
  2. title
  3. thumbnail
  4. by
2. photos
  1. url
  2. title
  3. thumbnail
friendfeed
1. likes
  1. url
  2. title
gametap
1. scores
  1. score
  2. url
  3. title
goodreads
1. toread
  1. url
  2. title
  3. by
  4. created_on
  5. modified_on
2. reading
  1. title
  2. url
  3. created_on
  4. modified_on
  5. by
3. read
  1. title
  2. url
  3. created_on
  4. modified_on
  5. by
googlereader
1. shared
  1. title
  2. summary
  3. url
  4. enclosure
  5. source_title
  6. source_url
  7. annotation
iconbuffet
1. icons
  1. url
  2. title
iminta
1. links
  1. url
  2. title
istockphoto
1. photos
  1. url
  2. title
  3. thumbnail
iusethis
1. events
  1. url
  2. title
2. osxapps
  1. url
  2. title
  3. favorite
iwatchthis
1. favorites
  1. url
  2. title
jaiku
1. jaikus
  1. url
  2. title
kongregate
1. favorites
  1. url
  2. title
  3. thumbnail
2. achievements
  1. title
  2. url
  3. game_title
  4. thumbnail
lastfm
1. tracks
  1. url
  2. title
2. lovedtracks
  1. url
  2. title
  3. artist
3. journalentries
  1. url
  2. title
4. events
  1. url
  2. title
livejournal
1. posts
  1. url
  2. title
magnolia
1. links
  1. url
  2. title
  3. tags
netflix
1. queue
  1. url
  2. title
  3. thumbnail
2. recent
  1. url
  2. title
  3. thumbnail
netvibes
1. links
  1. url
  2. title
pandora
1. favorites
  1. created_on
  2. title
  3. guid
  4. url
  5. album_art
2. favoriteartists
  1. created_on
  2. title
  3. guid
  4. url
  5. artist-photo-url
3. stations
  1. created_on
  2. title
  3. guid
  4. url
  5. station-image-url
picasaweb
1. photos
  1. url
  2. title
  3. thumbnail
p0pulist
1. stuff
  1. url
  2. title
  3. thumbnail
pownce
1. notes
  1. url
  2. title
  3. note
smugmug
1. photos
  1. url
  2. thumbnail
steam
1. achievements
  1. title
  2. description
  3. thumbnail
tumblr
1. events
  1. url
  2. title
twitter
1. tweets
  1. url
  2. tweet
2. favorites
  1. url
  2. tweet_author
  3. title
uncrate
1. saved
  1. url
  2. title
upcoming
1. events
  1. url
  2. title
  3. venue
  4. created_on
  5. modified_on
  6. identifier
viddler
1. videos
  1. url
  2. title
  3. thumbnail
vimeo
1. videos
  1. url
  2. title
  3. thumbnail
2. like
  1. url
  2. title
  3. thumbnail
vox
1. favorites
  1. identifier
  2. url
  3. title
2. posts
  1. url
  2. title
  3. tags
website
1. posted
  1. identifier
  2. title
  3. summary
  4. url
  5. source_title
  6. source_url
  7. created_on
  8. modified_on
wists
1. wists
  1. url
  2. title
  3. created_on
  4. tags
  5. thumbnail
xboxlive
1. gamerscore
  1. url
  2. score
  3. identifier
yelp
1. reviews
  1. url
  2. title
  3. review
youtube
1. favorites
  1. url
  2. title
  3. by
  4. thumbnail
2. videos
  1. url
  2. title
  3. thumbnail
zoomr
1. photos
  1. url
  2. identifier
  3. thumbnail