It sure would be nice if the blip.tv player had an easy way to change which video is playing in a playlist using their JavaScript API. But they don’t, so I had to roll my own to make the two play together nicely. Here is the end result (Note there are some line breaks I put in here for visual formatting, it might not work):

var player;
var currentPlaylistItem;
var currentState;
function getUpdate(type, arg1, arg2) {
	switch(type) {
        case "state":
			currentState = arg1;
		break;
		case "item":
			currentPlaylistItem = arg1;
			var episode = player.getCurrentItem();
			document.title = episode.title;
        break;
    }
}

var flashvars = {
	'file': 'http://blip.tv/play/ha0CjMVEh_8o',
    'enablejs': 'true',
    'javascriptid': 'blip_player',
    'autostart': 'false'
};

var params = {
	'allowscriptaccess': 'always',
	'allowfullscreen': 'true',
	'expressinstall': '/millennials/flash/expressInstall.swf'
};

var attributes = {
	'id': 'blip_player',
	'name': 'blip_player'
};
swfobject.embedSWF('http://blip.tv/play/ha0CjMVEh_8o',
'blip_player', '770', '470', '8.0', false, flashvars,
params, attributes, swfCallBack);

function swfCallBack() {
	player = document.getElementById('blip_player');
	$('#agenda h3 a, #agenda a.blip_tv').click(function(){
		var playlistItemNum =
                    $(this).attr('href').split('#')[1];
		changePlaylist(Number(playlistItemNum));
		$.scrollTo('.video .player', 800);
		return false;
	});
}

function changePlaylist(num) {
		var direction = 'prev';
		var diff = currentPlaylistItem - num;
		if (diff < 0) {
			direction = 'next';
			diff = Math.abs(diff);
		}
		for(i=0; i < diff; i++) {
			player.sendEvent(direction);
		}
		if (currentState == 0) {
			player.sendEvent('play');
		}
}

There are three requirements to getting started as outlined in the blip.tv wiki:

1. The player must be embeded with the enablejs=true Flash variable set
2. The player must be embeded with allowScriptAccess=always object/embed parameter set
3. A JavaScript function must exist named getUpdate()

The first part of my script sets up three global variables that we’ll use.

• player will reference the object/embed element by an ID. It is how we send commands to the show player.
• currentPlaylistItem is the number of the video selected (or position) in the playlist.
• currentState is either 2 (playing), 1 (loading), or 0 (stopped) depending on the current state of the player.

The getUpdate() function listens to the blip.tv player for changes like when the player is stopped or a video is changed in the playlist. The type argument is a string which we can send through a switch statement to determine what we need to do.

If the state of player has changed then we update our currentState variable with the value of arg1 (which will be a number between 0 and 2). If the event is an item change, we will update the currentPlaylistItem variable to reflect that. As an added bonus we get the title of the current playing video and change the title of the webpage to reflect this. This has zero SEO value and is really only a convenience to our audience.  Now that we know what is going on, lets get to the fun stuff.

Three variables (which are really Objects) are created for swfobject so we can easily embed the video player dynamically into the page. The ‘blip_player’ paramter is the ID of the player that we’ll be referencing shortly. The swfCallBack() function is called once the blip.tv player has loaded. There we set our player variable to reference the element of the blip.tv player. I used a line of jQuery to set the onClick() events of a group of links that will change the playlist when they are clicked.

In the HTML the links contain direct links to each blip.tv video and an anchor with a number after it. This number is the playlist position of the specific video. jQuery makes it a snap to extract just that number from the URL which we store in the playlistItemNum variable. The playlistItemNum variable is passed along to a function called changePlaylist() which does all of the heavy lifting.

Since the blip.tv show player doesn’t have a direct way of going to a specific video in a playlist, we have to hit the next or previous button on the player programmatically. The direction is set to ‘prev’ initially.  diff is calculated by subtracting the number passed to the function from the position of the currently playing video, currentPlaylistItem.

If diff is a negative number than we need to switch the direction variable to ‘next’ and get rid of the negative number by calling the absolute value method ( Math.abs() ). Now we simply send the player a command to go to the next or previous video as many times as we need to get to the desired video via a loop. Finally, if the player is stopped, we send the video player a command to start playing the video.

As an added nicety, we gently scroll the viewer up the page to the top of the video player so they’re not left wondering why nothing happened. The jQuery scrollTo plugin makes this a breeze to do.

There is one caveat for the changePlaylist() function to work: the playlist needs to be visible on the blip.tv show player. This is simply an option you set on the player configuration screen on blip.tv. Without it showing, we can’t get which video is playing and the whole thing falls apart.

That wraps up how to roll your own playlist changing function as well as shed some light on how you might control other things about the blip.tv show player using JavaScript. You can see this in action on the Pew Research Center Millennial Conference video page. If you have any questions leave them in the comments or get in contact.

a

Here is a run down of the changes:

Specify Custom Colors

You can choose the background and foreground colors of the dummy image right in the url using a 6,3,2, or even 1 character hexcode. Don’t worry if you forget to do this as dummy image will default to gray and black.

Add Your Own Text

A lot of people wanted to be able to add their own text to a dummy image to better communicate what it is representing. Now using the &text= parameter you can.

A Better Typeface

Arial be damned! Font geeks cringed at my basic choice of a font. Some seemed worried about my distribution of the most popular font on Earth. Now both camps can be happy as I’m now using the completely free and open M+ Font. I also changed the X in the middle of the images to a multiplication sign × as pointed out by Erinah and Dave Cortright.

Standard Image Sizes

Dummyimage.com is a useful prototyping tool and a lot of prototypes and wireframes have ad positions. Instead of memorizing dimensions you can now bring up ad sizes by their industry-standard name like largerectangle, skyscraper, and fullbanner. You can even customize the colors, text, and formats of theses sizes as well.

Pick Your Format

Before you could add any image format extension to the url but my script would still generate a GIF image everytime. Now you can generate proper PNG, JPG, and GIF images and drag them into another app trouble free.

And with these new features I figured it was time to give the site a proper, though still simple, design. Rather than bury how these features work in long, boring text I made a little tool that shows you everything you need to know with minimal fuss.

Not a fan of change? Don’t worry, you can still use Dummyimage.com to generate place holder images exactly the same way you have always been doing it.

So thank you to everyone who has e-mailed me, tweeted me, left a comment on a post somewhere or otherwise provided feedback on dummyimage.com. I’m glad so many people found it as useful as I think it is. Keep the ideas and dummyimage variations coming. I’m sure this thing could be better.

a

Seeing this site reminded me of a few other wacky-song memes that made their way across the Internet. If you like trololololololololololo.com, you’ll like these similiar sites. All of them are songs and most of them loop infinitely. Enjoy!

http://www.lalalalalalalalalalalalalalalalalala.com/

http://www.iiiiiiii.com/

http://www.ooooiiii.com/

http://www.dabadabadab.com/

http://www.lalalaa.com/

http://www.leekspin.com/

http://www.manamanadoodoodoodoodoo.com/

http://breadfish.co.uk/

http://www.getonmyhorse.com/ & http://shutupwomangetonmyhorse.com/

All of these sites descend from badgerbadgerbadger.com which first launched in September, 2003.

a

According to tests done by Steve Souders, web performance guru extraordinaire, Internet Explorer blocks the rendering of content until all of the stylesheets have been downloaded regardless of their media type. And since Internet Explorer is the dominant browser by visitors to most mainstream sites, there is absolutely no benefit to including the print stylesheet at the bottom of the page.

A possible workaround would be to dynamically insert the print stylesheet (using JavaScript) into the web page after it has finished loading. This just feels icky to me as the poor sap who is most likely to print out the webpage I so meticulously coded is also the poor sap using Internet Explorer 5.5 with JavaScript turned off and BonziBUDDY turned on.

a

I can’t believe something like this can even be patented! From a programming perspective, it’s a fairly simple app. All of the area code data can be found on a site like http://www.bennetyee.org/ucsd-pages/area.html. When you get a call on your phone, a program can pull the first 3 digits and do a simple lookup for what state the phone number is issued in. It looks like no one will have the chance to download the app now, but I wonder what will happen to those lucky few like me who have already downloaded it?

I don’t think this will be the last Android city/state app for incoming calls as a Cequint employee introduced himself on an Android forum. Something must be up.

a

The octopus sucker tie is pretty rad too!

a

The National Weather Service is calling for 20 – 30 inches of the white stuff so if we get 30″, then my entire photo will be completely white.

Saturday, 1:45am – 28 inches: While everyone is asleep, I’m out trudging around in snow. Ok, I’m sure this measurement is due to drifting but it’s consistent in both places that I have been measuring all day (a bush near my building and on the hood of my Rav-4). The Weather Channel just reported Columbia, MD, officially has 13.9″ of fallen snow. I’ll keep updating my image which will easily go out of the frame tomorrow.

The snow is coming up to my knee in low areas and my mid thigh in the deep spots. It keeps coming down at a strong, relentless pace. I like how dead-silent it is outside.

Friday, 11:30pm – 9 inches
Friday, 7:45pm – 3.75 inches
Friday, 3:30pm – 2 inches

Twitter Tags #snowpocalypse, #snowmageddon, #snOMG

a

My good friend just became a Library Media Specialist at a DC public school this year.  She is in the midst of transforming an old, neglected library full of antiquated books into a resource the students would actually use. But to do that, they need updated books. Here is her take on the situation (emphasis mine):

The majority of the books are from the 1950’s and 1960’s. Much of the information in these books use outdated terminology and often have negative stereotypes of women, African Americans, and hispanics. This is particularly bad since our student population is 75% African American and 25% hispanic. In addition, most of the library collection is above an 8th grade reading level. Last year only 8% of our school scored proficient for reading. Getting books at these students’ reading level is imperative in helping the students improve their reading comprehension in years to come.

So how can you help out?

• Make a cash donation (Be sure to type Book Drive in the Donation Designation)
• Buy books from their Amazon wishlist and have them shipped directly to MacFarland Middle School
• Donate used books that meet the following criteria:
  • Elementary and middle school reading level (1st – 8th grade);
  • 50-100 pages printed after 1999; maximum 300 pages;
  • No books in poor condition or above 9th grade reading level.
  • Books accepted at 1419 Columbia Rd NW Washington DC 20009 and at MacFarland Middle School, 4400 Iowa Ave NW Washington DC 20011
• Share this link with your friends and family. Help spread the word!

All donations are fully tax deductible. You can read the official MacFarland Middle School Book Drive Letter for more information. I’ve already bought all of the Captain Underpants books from their wishlist and you should pick a few books out that you really like to help the children at MacFarland Middle School.

a

I figured it would be useful to other people which is why I also released the complete source code, documented and including instructions for setting it up on your own server. But like most new things, few gave it any notice.

The other day my friend Charlie Park (founder of Pear Budget) found it when doing some in-browser wire-framing and sent out a tweet to all of his followers. But he didn’t stop there. Charlie also posted it to Hacker News, a simple news aggregator aimed at geeks. It was obvious that my little tool was resonating with other developers with the tagline “Lorem ipsom for images.” In 24 hours, the Hacker News story got 161 votes with 77 comments, 513 people bookmarked it on del.icio.us, and 337 tweets.

What really struck me was how dummyimage.com was crossing the language barrier. I saw tweets mentioning in Spanish, Japanese, Russian, German, Dutch, even Latvian. I’m glad my idea was simple enough that foreign speakers could easily pick it up without any translation help.

All of this sudden attention also produced helpful feedback and new feature ideas. I started working on an update this past December for a few additions I wanted to see but this recent surge of interest has lit a fire under my butt to continue developing. As is the nature of opensource software, people don’t have to wait for me; they can adapt the code to their own needs. Here are some iterations that have already been made:

• Fakeimage (Ruby)
• Placeholder_image (Ruby)
• Lorem ipsom for Images (JavaScript/jQuery)

And somewhere down the line I would like to give it an attractive homepage. Hooray for side projects!

a

The Fitbit is a small device that you wear on your hip in order to track your movements throughout the day. As you move, the Fitbit will count your steps just like any other pedometer. The device has one button on the front which will cycle through different stats with each push. When out and about you can check your total number of steps, the number of calories burned, distance traveled, and a flower representing your growth and overall healthiness for the day.

At bedtime you put the Fitbit into a soft wristband and you can track how long and the quality of your sleep. Holding the button down for a few seconds starts the sleep tracker and you have to remember to stop it when you wake up in the morning. As you fall in and out of sleep, the Fitbit tracks your movements and can tell how long it took you to fall asleep, how many times you woke up throughout the night and the actual time you were asleep vs the time you were in bed.

But what makes the Fitbit different happens when you get within a couple of feet of the base station.  The data is automatically uploaded to Fitbit.com where you can analyze your data with the help of pretty graphs. Not fussing with manually syncing the data yourself makes it a system that easily fits into ones life. You can build up a history of your daily activity without even thinking about. It’s like Google Analytics for your fitness!

Activity tracking aside, Fitbit.com also has a food log for tracking calories.  I don’t use this feature because you still have to measure the food and add it manually. If there was something that calculated nutrition information as it went into my mouth, I would be all over it. The Fitbit isn’t that good… yet.

Overall I’m really happy with my Fitbit. The only downside I can think of is the long order time (oredered one for my Mom in October and it didn’t get here until mid January). It is easily worth the $100 price tag in order to painlessly build up a history of my physical activity and sleep history. I don’t need this information right now, but one day I might, and this tool will come in handy.

Other Reviews

• Fitbit Technical Review
• My week with the Fitbit wireless pedometer
• Fitbit Review – Engadget

a