We’ve been working on a new service on and off for a few months, called Linkli.st. The service was first launched in May but the last week we added some new (and awesome!) features so you should check it out.

Linklist is based around the very simple concept of creating, sharing and browse lists with links. It can be used for basically everything but I’ve found it very useful for things like:

• Ask for and find travel tips
• As an inbox for dumping links, videos etc I don’t want to deal with right now
• Reading lists

We’re adding new features and working on it all the time so be sure to follow our Twitter feed (@linkli_st) for updates.

Everything you need to know is in the README on GitHub so if you’re interested in this, check it out.

Pluxemburg.com is the website for Swedish technotronica band Pluxus and the record label Pluxemburg they run together with Jonas Sevenius and us (Martin Ström and Peter Ström).

Pluxemburg has since its launch in 2000 gone from a small independent label with only one artist—Pluxus—to bigger with several artists (and grammy awards!) and then back to again being a quite small label. The 2009 version of Pluxemburg focuses mainly on Pluxus and Pluxus related projects.

A small record label needs to not only work on the websites of their artists and the label itself, but also constantly make sure that the info on the many online forums and communities are up to date and accurate. There needs to be Facebook and Myspace pages, last.fm events, discogs.com entries and so on. Updating these websites as soon as something happens (gigs, releases, parties, videos, etc) is time consuming and unfortunatley often ends up in a copy paste manner (spamming) rather than using the different forums for their different purposes.

When thinking about these conditions in connection to building a new Pluxemburg website, we realized that instead of constantly keeping the Pluxemburg and Pluxus websites updated, we should make a website that mirrors the contents of each community and instead spend our time keeping these communities updated. The information for each part of the new Pluxemburg.com is therefor spread out on the community where it “belongs” the best. The discography is mirrored from Discogs, the events from Last.fm, videos from YouTube, information from Wikipedia, links from Delicious and sounds from SoundCloud. We use the popular tumblelog Tumblr for the newsfeed, adding not only a tool for keeping our website updated but a small community in itself too. All colors used on Pluxemburg.com are based on the “corporate” colors of each community, making also the design a mirror of each community. There is even a Twitter-feed that mirrors everything that goes on on Pluxemburg.com, somehow making the site into a complete loop.

Technically, every day a pretty straight-forward Ruby script will automatically run on our server to update the information from all sources and then sends it (together with a security token to make sure the data isn’t messed with) to a PHP script at pluxemburg.com. The PHP script then processes (cleans and validates) the data and stores it in a file as serialized PHP, which is used by the index page to present the information.

www.pluxemburg.com

The character you click will automatically get copied into your clipboard, thanks to the flash technique mentioned here. However, I wrote my own JavaScript class to handle the clipboard and the buffer of clicked characters since you can hold down ‹alt› to copy multiple characters at once.

Here’s the source for the copy buffer class in case anyone’s interested.

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 {
    font: 1.1em Courier; 
    padding: 2em;
    background: #DDD url(my-background.png) no-repeat top left;
    border: 2px dotted %colhour%;
}

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.

Finally this site looks like something other than the default WordPress 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 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 great resources. 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 <h3>‘s content in a <span> to achieve the look I wanted without any unnecessary markup. Since <input type="search" /> only is supported by Safari and I wanted to use it, I used a script (thanks Wolfgang Bartelme) 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 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 is a modified and simplified version of Tag Cloud Plugin.

Download

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

This is a logo for my friend’s company which is in the filming and video industry.

Pluxemburg is a record label I’m co-running with some friends. The site in its current form is almost two years old, but a lot of things have changed since it was first released. Since I just released some updates, I thought I’d write something about them and show how the CMS/administrative interface works.

Recent site updates

I won’t go through the whole site and tell you everything about it. Instead, go browse it by yourself. The shop has been improved with a smarter cart that doesn’t forget your items if you by accident reload your browser or hit the back button. Validation is more clear and better looking in the same style as the improved (and AJAX powered) guestbook and newsletter subscription.

Browser support

When the site launched almost two years ago, it fully supported Internet Explorer 5 (Mac), IE 5, 5.5 and 6 on PC and of course, old and new Firefox versions, Mozilla, Safari etc etc. It was a pain to fix the CSS especially for IE Mac and IE5, IE5.5 on Windows. Currently, I’ve dropped support for MacIE (it’is not even supported by Microsoft any more), IE5 and IE5.5 for Windows. I think the site should work more or less using outdated browsers, but it might not look exacly as intended.

CMS and site admin

The site is powered by an advanced CMS that helps us adding and editing news, products in the shop, guestbook spam and a lot of other things. When I first wrote it for this site, I had in mind to keep it so general I could, so it could be extended and used in other projects. Of course the administrative interface is password protected, but I’ve recorded two movies showing some parts of it. I’ll convert the movies to H.264 right after this is posted, so for now, the movies are pretty large in size. The movies are now in H.264 format and are 75% smaller (before: total 44.8 MB, now: 11.6 MB)

The first movie, shows a basic task such as adding some news items to specific part of the site and then view it. Pretty basic.

Watch the first movie (QuickTime 7, 20.9 3.1 MB)

The second show how easy it is to manage products in the shop, as well as track orders.

Watch the second movie (QuickTime 7, 23.9 8.5 MB)

To download them, hold the ⌥ (alt) key down and click the link or right click and choose “Download Linked File”

You’ll need QuickTime 7 to watch them.

The frontend is optimized to be a fast, simple but effective way of browsing the photographers and their photos, check it out. The CMS makes it easy for the photographers to upload, edit and organize their photos and for the site editors to write news and edit information on the site. It’s a customized version of the administrative interface I coded for pluxemburg.com with added functionality such as image uploading and photo organization. I wanted to let the server handle the image resizing and creation of thumbnails as well, but found out that PHP’s image functions didn’t do as good work as expected. I tried all kind of different techniques but we ended up using Photoshop and manually make the thumbnails. Photoshop does a way better job and with this kind of client (working with photographs) we wanted as good quality as possible.

I’ve made a movie (QuickTime, 4.9 MB) showing how the admin interface works when uploading and reordering the photos, since it’s password protected. You’ll need QuickTime 7 to watch it.

Index

Photographers

Photos

Loading a photo

Showing a photo

Information