I was a pretty big lala evangelist; I told just about everyone I thought would care all about it. I really liked their approach to music, especially:

1. Unlimited space and streaming. You could upload and listen to as much as you like.
2. The music matcher. You didn’t have to upload every file you had. It would scan your files and match them to ones existing on the server. This saved you from having to upload GBs of music and had the added benefit of making the service better the more that people used it.
3. Listening to any track once for free. I’ve never listened to more new releases (or bought more) than I did through lala.
4. Web-only songs. 10 cents bought you the right to play a song as much as you wanted to but only through the web. I usually have an Internet connection wherever I’m listening, so that was just great. Would I have bought Looking Glass’ “Brandy (You’re a Fine Girl)” for more than 10 cents?

There were some drawbacks, of course:

1. The music matcher sometimes mismatched. I have some artists in my collection that have extensive live catalogs (if you know what I mean) and often, trying to play the studio version of the song, I would get the live version instead. Nothing to do about it.
2. The player itself was Flash-based. So, absolutely no mobile support on iPhone or Android.
3. Limited catalog. There were plenty of songs that were available on iTunes or Amazon MP3 store that just couldn’t be bought from lala. Of course, you could upload them after you bought them elsewhere.

Anyway, Steve Jobs said, “Enough of people not buying music through iTunes!” and here we are without lala. What’s the criteria for its replacement?

1. Enough space. I have a lot of music. Around 90GB worth. Though, a lot of that pretty much never gets listened to.
2. Price. Lala was free to use and had cheap rates on songs if you wanted to buy some.
3. Interface. I’m a developer, so it had to have a well tuned and usable interface.
4. Mobile support. I don’t travel as much as I would like, but I do get out of town. I wanted something that would play my music over 3G (or 4 when it comes to town).
5. Ability to upload my own songs. They just don’t have enough Kleenex Girl Wonder on Rhapsody.

Here’s my thoughts on what I saw in my search for a site that would stream my music. I’m going to list them in what I think is the chronological order I tried them in.

First of all, some overall notes:

• Nobody else has the web-only song agreement with the record companies. Just get that out of your hopes bucket right now. It ain’t happening (at least not yet).
• Nobody seems to have worked out the “start loading the next song as the last one ends” thing that let the lala player roll through songs continuously. Must be a bandwidth thing, but it seems like something someone could figure out.
• Nobody’s going to give it all to you for free anymore. Take your lumps.
• None of the services have a store attached to them at this point. You’ll have to go back to iTunes or Amazon.

Maestro.fm

Maestro.fm is a service that allows you to stream your music from your home library to another machine. Meaning, it doesn’t keep copies of them and if your home computer or home Internet connection is down, your music is unavailable. Or, if your home connection is slow or spotty, so is your stream.

That said, there are no space limitations and it is free to use. But, my upstream connection is not that reliable and, really, that seems un-green to have my machine on all the time just to serve songs.

It has some interesting ideas and some cool social networking built in. The player is pretty good and there is a iPhone app.

MusicPlayer.fm

Don’t bother. #underconstruction

mSpot.com

The new guys, mSpot was featured at Google I/O this year. Seems like a promising service, but the don’t have a lot of the site working yet or even the service levels set, so I’m going to have to come back to it. For now, it is for beta testers only. It is hard to tell if Google is behind them or just cheering them on, but hopefully the big G comes up with music service or gets on board with one. Especially since they had eyes for lala before Apple did.

The player is OK, but could use a little Information Architecture and a little more contrast. They do have an Android app, which is nice.

The installable uploader and the web player have a trick, which is that the system only uploads songs you have requested. So, you can see your whole library, but the first time you try to play a particular song it will have to be uploaded (automatically) from your home machine. This paradigm could be nice since you have only a little space right now (2-4GB) and, theoretically, it would just keep the top 2-4GB or songs you have played recently. You know what, I haven’t made up my mind about this feature(?) yet.

mp3tunes.com

The old guys, these guys have been around for a while: Five years. But I’m not sure if that serves them well or not. I stuck with this fairly long, like two weeks, and I mostly liked it. It has the ability to upload video and stream that back, which feels like a great idea but I never used it.

The default player wastes absolutely acres of space with too-big fonts and too much padding. It is hard to see much once you have more than a few artists in there. They make a nice effort by having several player skins (well, they’re more complex than skins, really) but they kind of all have this whitespace problem. I mean, I’m not using the site for readability—I want to see the lists. And, if I started and stopped too much it quit queuing songs.

They do have mobile apps and an installable uploader which is nice. Plus, 10GB of space for free holds a pretty fair amount of music, or you can upgrade 50GB for $40 per year.

Grooveshark.com

This one’s got some press, too, and it is pretty good. The player and queuing system is solid but, like mp3tunes, the designers got to take too much control of this one and there is lots and lots of wasted space. So much that if you have a smaller monitor you can’t read the full names of songs. They claim that this particular problem is fixed for VIPs (paid customers) but I had a hard time believing that them based on my free account.

They have apps for most mobile platforms, but only for VIPs. The uploader is a java applet that needs a little more work, especially when getting music off a network share.

Psonar.com

I can’t remember why I left them. And, now their site is erroring to MySpace. Maybe they are connected. Oh, wait, I remembered. No mobile streaming support. If that isn’t important to you, it seems like a promising service. The player needs a lot a work and a little double-click-ability.

AudioBox.fm

And now, the moment you’ve all been waiting for: an acceptable service. First off, it ain’t free, like I said it wouldn’t be. Well, there is a free 1GB plan, but that’s not really enough, is it?

First off: no Flash. This mother is HTML 5 though and through and therefore after my own heart. It is just getting started, feature-wise, but seems to actually be in development (which not all of the others are). The marketplace may or may not ever be coming as wells as the installable uploader. For now, you have to upload a folder at a time (which is a real pain). But the reliability of the the player, the layout of the the library, the editablity of tracks all make up for it for me. Especially after all the other sites.

It needs a viewable queue and a real uploader / syncronizer. But it has an Android streaming app that is pretty usable. It also has a full API so if you are an enterprising iPhone app developer you could make one.

The plan prices are pretty reasonable with the Basic at just $4 a month.

In the end…

I’m still looking but more slowly. I’m pretty happy with audiobox.fm at this point and don’t feel like I need to keep the full-on search.

Radio Shack called to tell me it is in.

So, @worldclassgeek made me this picture.

We want something besides the default messaging for user forms in Drupal. They are still in English, but just custom to our application. Also, we don’t need to override all of them, just a few. And, we are using Drupal 6.

Dx

Drupal is set up to automatically translate form messaging. Using this mechanism, we can cleanly alter the messages to appear just as we would like them to appear. We create a custom language and set it as the default. We only make the few translations that we need and Drupal falls back on the default English for stuff we don’t translate.

To setup the custom language:

1. Make sure the Locale module is enabled and that you have permissions to use it (both to Administer Languages and for the Translate Interface)
2. Go to Site Configuration -> Languages -> Add Language
3. Open the Custom Language form
4. Fill in the form with something like:
   Language code: en-MySite
   Language name in English: MySite
   Native language name: MySite
   Path prefix: mysite (this is only a placeholder and won’t be needed later)
   Language domain: [blank]
   Direction: Left to right
5. Click the Add custom language
6. Go to Site Configuration -> Languages and choose en-MySite as the default language, click Save Configuration

To make the faux translations:

1. Go to Site Building -> Translate Interface -> Search
2. Search for a particular string by something it contains, say, “username”.
3. Find your string in the search results and click edit. Enter your translation and submit it.
4. Repeat for other strings as necessary.

Tx

So, we end up with a clean faux translation of the default strings into your application-specific copy.

So, I changed which icons it shows and used the better, alternative ones. They are already there in the icon bar in c:\wamp\images_on.bmp and c:\wamp\images_off.bmp. We just have to change the mapping.

In c:\wamp\wampmanager.tpl change lines 10 – 12 from

TrayIconAllRunning=16
TrayIconSomeRunning=17
TrayIconNoneRunning=18

to

TrayIconAllRunning=9
TrayIconSomeRunning=10
TrayIconNoneRunning=11

The downsides: there is no difference between the icons for offline and online modes, the new icons seem meant to be used elsewhere (but I never see them, or at least not nearly as much as I see the tray icons).

I’m working on a project that loads (and hides) content meant for lightbox in the markup of the main page. We are doing this in order to have quick reactions to the users’ clicks and optimize the content for SEO. With the existing mechanism, Lightbox2 will reload the page content if the trigger points to an in-page anchor.  For instance,

<a href="#anchors-aweigh">Load existing content</a>

will cause Lightbox2 to reload the current page even thought the content is already available in-page. This kills the quick reaction time and adds ticks on the tracking calls and increases server load.

Taking a note from Erik Hedin on how to focus Lightbox on an anchor after (re)loading the page, I rewrote the the modalContainer’s load instructions to check against the current url and see if the target content is already existing on the page. So, the line

$("#modalContainer").load(src);

in lightbox.js becomes

/* HERE'S THE RUB */

/*
	if already in the page, load in the content
	test by comparing src and window.location without hashes (anchors)
	and then finding the src's hash in the DOM

	if either are false, fall back and load the old way
*/
var srcHash = src.replace(/.*(#.*)/, '$1');
if ((window.location.toString().replace(/#.*/, '') == src.replace(/#.*/, '') ||
			// src.replace(/#.*/, '') will be blank for some IE versions if the href is just a hash
			src.replace(/#.*/, '') == '') &&
			srcHash && $(srcHash)) {

	// clone the referenced node and alter the clone's ID, then insert it into lightbox
	$("#modalContainer").html($(srcHash).clone().attr('id', srcHash.replace('#', '') + '-clone'));

} else {

	$("#modalContainer").load(src);

}

/* THE RUB STOPS HERE */

But but but but but but, we’re not done.

In Erik’s post he advises changing the lightbox.js script in the Drupal module. I don’t like changing other people’s code; I’d rather overwrite it for my application. Instead of digging inside the module, I have included another script that overwrites the offending Lightbox.showData method. This way, if the modules is updated by its devs, I don’t have to go digging again. Plus, our Drupal project is instanced over several machines and a dev and a staging and a production site, so changing the module is hard to maintain.

So, in the end, my application-specific script looks like,

Lightbox.showData = function(){
    $('#loading').hide();

    if (Lightbox.isLightframe || Lightbox.isVideo || Lightbox.isModal) {
        Lightbox.updateDetails();
        if (Lightbox.isLightframe) {
            $('#frameContainer').show();
            if ($.browser.safari) {
                $('#lightboxFrame').css({
                    'zIndex': '10500'
                }).show();
            } else {
                $('#lightboxFrame').css({
                    'zIndex': '10500'
                }).fadeIn(Lightbox.fadeInSpeed);
            }
        } else {
            if (Lightbox.isVideo) {
                $("#modalContainer").html(Lightbox.modalHTML);
                $("#modalContainer").click(function(){
                    return false;
                });
            } else {
                var src = unescape(Lightbox.imageArray[Lightbox.activeImage][0]);
                if (Lightbox.imageArray[Lightbox.activeImage][4]) {
                    $(src).appendTo("#modalContainer");
                } else {

					/* HERE'S THE RUB */

					/*
						if already in the page, load in the content
						test by comparing src and window.location without hashes (anchors)
						and then finding the src's hash in the DOM

						if either are false, fall back and load the old way
					*/
					var srcHash = src.replace(/.*(#.*)/, '$1');
					if ((window.location.toString().replace(/#.*/, '') == src.replace(/#.*/, '') ||
								// src.replace(/#.*/, '') will be blank for some IE versions if the href is just a hash
								src.replace(/#.*/, '') == '') &&
							srcHash && $(srcHash)) {

						// clone the referenced node and alter the clone's ID, then insert it into lightbox
						$("#modalContainer").html($(srcHash).clone().attr('id', srcHash.replace('#', '') + '-clone'));

					} else {

						$("#modalContainer").load(src);

					}

					/* THE RUB STOPS HERE */
                }
                $('#modalContainer').unbind('click');
            }
            $('#modalContainer').css({
                'zIndex': '10500'
            }).show();
        }
    }    // Handle display of image content.
    else {
        $('#imageContainer').show();
        if ($.browser.safari) {
            $('#lightboxImage').css({
                'zIndex': '10500'
            }).show();
        } else {
            $('#lightboxImage').css({
                'zIndex': '10500'
            }).fadeIn(Lightbox.fadeInSpeed);
        }
        Lightbox.updateDetails();
        this.preloadNeighborImages();
    }
    Lightbox.inprogress = false;

    // Slideshow specific stuff.
    if (Lightbox.isSlideshow) {
        if (!Lightbox.loopSlides && Lightbox.activeImage == (Lightbox.total - 1)) {
            if (Lightbox.autoExit) {
                Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function(){
                    Lightbox.end('slideshow');
                }, Lightbox.slideInterval);
            }
        } else {
            if (!Lightbox.isPaused && Lightbox.total > 1) {
                Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function(){
                    Lightbox.changeData(Lightbox.activeImage + 1);
                }, Lightbox.slideInterval);
            }
        }
        if (Lightbox.showPlayPause && Lightbox.total > 1 && !Lightbox.isPaused) {
            $('#lightshowPause').show();
            $('#lightshowPlay').hide();
        } else
            if (Lightbox.showPlayPause && Lightbox.total > 1) {
                $('#lightshowPause').hide();
                $('#lightshowPlay').show();
            }
    }

    // Adjust the page overlay size.
    var arrayPageSize = Lightbox.getPageSize();
    var arrayPageScroll = Lightbox.getPageScroll();
    var pageHeight = arrayPageSize[1];
    if (Lightbox.isZoomedIn && arrayPageSize[1] > arrayPageSize[3]) {
        var lightboxTop = (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1;
        pageHeight = pageHeight + arrayPageScroll[1] + lightboxTop;
    }
    $('#overlay').css({
        'height': pageHeight + 'px',
        'width': arrayPageSize[0] + 'px'
    });

    // Gecko browsers (e.g. Firefox, SeaMonkey, etc) don't handle pdfs as
    // expected.
    if ($.browser.mozilla) {
        if (Lightbox.imageArray[Lightbox.activeImage][0].indexOf(".pdf") != -1) {
            setTimeout(function(){
                document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0];
            }, 1000);
        }
    }
};

Thankfully, the magic of video has brought my dream to some sort of life. And, we launched the new OLSON O-Terns blog in the process.

http://www.olsonoterns.com/

It’s a good thing I’ve done a bit of acting before because this is going to win an award and how embarrassing would it be for other actors if this was the first thing I was ever in.

#veryembarrassingforotheractors

Philosophical Approach

The approach can be summed up in two points:

1. Write enough markup and style definitions to make it clear to other developers what is happening.
2. Write as little markup and style definitions as possible.

Let’s talk about what these mean.

Write enough markup and style definitions to make it clear to other developers what is happening.

We follow the principles of semantic web development which involves using markup to describe the data or content of a web page. In practice, this means things like using ol and ul tags to make lists of items instead of text delineated with br tags, and giving page elements class names that describe their function (eg “article-wrapper”) instead of class names that describe their appearance (eg “blue-background”).

Write as little markup and as few style definitions as possible.

Small file size and shallow markup heirarchy make the site faster to load and easier to maintain. To that end, we write as little markup and as few style as possible to make the page appear and function as necessary. In practice, this means things like using padding and margin to create space between elements instead of using br or empty p tags, and writing reusable CSS classes that add common traits (eg background-color) and can be used in conjunction with other reusable CSS classes that provide other common traits (eg font-size).

Rules

We have a few easy-to-follow rules for HTML and CSS development that have evolved from years of experience.

Rules for writing HTML

• Block-level elements are  never be self-closing, even when empty.
  <div /> should always be written as <div></div>, but but <img /> or <span /> is proper.
• Markup always validates unless there is a very good reason (eg for cross-browser support or CMS limitations).
  There are many validators but W3C’s is preferred: http://validator.w3.org/
• Documents are written for HTML 5.
  Documents should use the the <!DOCTYPE html> declaration.
• Tables are used only for tabular data, not for layout.
• Stylesheets are included in the <head> of the page.
• Stylesheets are included using <link /> tags, not @import statements.
  It is permissable, however, to use @import statements within an external stylesheet.
• Markup should be indented using tabs, not spaces, so that the indentation matches the markup heirarchy.
• CSS and JavaScript are included in external files, not written inline in the page.
• External JavaScript files are included at the bottom of the page just before the </body>.

Rules for writing CSS

• CSS is written a compact format characterized by the selector and all definitions on one line.
  Use http://www.codebeautifier.com/ to switch between formats; the format described here is called ‘High’ compression.
  Improper:
  

  .my-class {
  	width: 300px;
  	height: 300px;
  }

  Proper:

  .my-class { width: 300px; height: 300px; }

• Selectors use hyphens to delineate words, not camel case or underscores.
  Improper: .myClass or #my_element. Proper: .better-class
• Hacks to make pages work correctly in Internet Explorer are included in a separate IE-specific stylesheet and included on the page using conditional comments.
• During development, sites use a global stylesheet for universal definitions and separate sheets for independent areas or features of the site.
• Use of style attributes in markup is avoided.
• When possible (that is, when specific instances are known), .png transparency should be fixed for specific elements using the IE-6 specific stylesheet instead of using an .htc file as a behavior.
  Improper:

  a { behavior: url(iepngfix.htc); }

  Proper:
  

  a#button { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,      sizingMethod=crop, src='../images/button.png'); }

• The default font size is declared in pixels for the <body> and the declared for other elements as percentages.

  body { font-size: 13px; }
  h1 { font-size: 125%; }

Seems like the criteria are:

• Several quickly-recognizable hits
• A dedicated fan base
• A generally upbeat catalog
• Inoffensive music
• At least half the members still living

My best guess: the Dave Matthews Band

Steve said: Hootie & the Blowfish

What do you think?