It’s hard enough formulating the words stuck in your head into a clear, well-written piece of content. Trying to translate your idea into cryptic wiki syntax is a brain-fart waiting to happen. For most folks introduced to an inter-office wiki, the syntax is the straw that breaks the camel’s back. You can kiss any chance of adoption goodbye when you explain that to bold text you need to have three single-quotes on each side of the text.

Thank goodness the MediaWiki+FCKeditor project is around. The goal is to build a usable WYSIWYG editor for the MediaWiki software (and they’re on the right track). Installing the extension is as simple as downloading a folder, copying it to your extensions directory, and adding a line to your localsettings.php file. Then presto, an easy to use interface that sits on top of the edit field translating hairy wiki-syntax to their visual equivalents. If your users can figure out how to use Microsoft Word, then they can understand the MediaWiki+FCKeditor extension. But fear not my die-hard wiki wranglers, the plugin lets you easily switch back and forth between the WYSIWYG editor and wiki syntax.

If you need to give it a try, check it out on this Sandbox page.

So adding one simple extension can make it easier for wiki-novices to get involved creating and editing content while staying out-of-the-way of the wiki-pros. If you need to get normal people involved with a wiki, make sure to add the MediaWiki+FCKeditor plugin to make life easier for everyone.

Adding A WYSIWYG Editor To Your Wiki by Russell Heimlich

JavaScript is a fun language. It lets you build almost anything you can imagine. For some reason, I thought it would be fun to build a simulator for the card game War. I started hacking away on the idea in my spare time. It was also a good excuse to learn object-oriented JavaScript to make my card game simulator flexible and modular. After a few weekends I had something that worked (screenshot below). Unfortunately after that life got busy and my war simulator just sat there collecting virtual dust for more than a year.

Fast forward to July 29th when the 10K Apart contest is launched challenging developers to build compelling apps that are 10 kilobytes or less. This would be a fun way to refine my stale war game simulator as well as test my JavaScript coding-foo to squeeze it all in to 10 kilobytes.

Pure HTML Cards

One of my first challenges was re-doing the cards. Initially I constructed a single-image sprite containing all of the cards. JavaScript would manipulate the class of a div which would determine how to position the image for the proper card to be displayed. This method led me to discover something Internet Explorer actually gets right with CSS and the other browsers fall short. This image of all of the cards weighed in at 36KB alone. Ouch!

My solution was to use unicode characters for the different suites and letters and numbers for the card values. Child elements of the card held the symbols and I positioned them absolutely within the card element. The final touch was to rotate one of the child elements 180 degrees using the transform CSS property so it would display upside down just like a real card. My image-less approach was just a fraction of the size of using images for cards. But something was still missing.

Playing cards have decorative designs in the middle. It would be too complicated to completely replicate these designs so I came up with the idea to use a Twitter avatar as a background. Thanks to the awesome service provided by http://tweetimag.es/ their RESTful api let me grab any public Twitter users avatar by constructing a simple URL. Browsers provide an easy way to  add new CSS rules to a stylesheet via JavaScript so I could dynamically change the background image of a card based on which Twitter names the user provided. This is where the idea for making my War game simulator revolve around Twitter users was born.

Viral Sharing

A bigger advantage to hooking into Twitter is it makes each game more personal for the player. Pitting two people in a card game battle makes the experience more meaningful then a bunch of plain, virtual playing cards flipping back and forth for a couple hundred of turns. This also has the potential for a viral aspect to my app since I already have atleast two Twitter names that would be interested in the results. In order to share a game I needed to create a way to read in the number of players, their twitter name, and their deck at the start of the game. Using a simple string of characters that represented this data attached to the end of the URL allowed me to do this. All of the values in the deck could be stored as a number or letter since I had unique first letters.

Therefore, the Ace of Spades could be represented as ‘as’, the 10 of Diamonds would be ’10d’ and so on. A full game looks like this: p1-kingkool68:adqhkc2d5d10s3h3d5hjs8dqc9c8h2s9d6c7c9skd10d8c7s7d2c4s|p2-naudebynature:jc6d10cjdkh5c4h6sqdks2has6h4d7h4cac10h9hah3s8s5s3cjhqs

A Heap of Data

One of my favorite parts of developing this app was creating a way for keeping track of all the different data that results from a single game. For each war I store the turn it occurred on as well as keep track of which player won the war. After each turn I store a copy of the players deck for further analysis after the game concludes. I originally wanted to include a line graph showing the number of cards a player had in their deck as the game progressed. Building that feature was pretty simple thanks to the Google Charts API but in the end it had to be cut in order to get below the 10KB limit.

Squeezing Down the Bits

I was a little ambitious with the functionality that when I was ready to start compressing my code down I was shocked to see my idea bloated to 33KB. That’s more than 3 times the maximum size. A serious slimming down was in order. Pre-populat lists of Twitter users that would make for interesting battles: cut. Charting capabilities mentioned earlier: gone. A brief blurb explaining the game and who I was: removed. Title tags: discarded. Every little bit I could trim down would help. After all this I was down to about 17KB and along way to go to get under 10KB.

Dean Edwards took JavaScript compression to another level with his /packer/ tool. He came up with away to reduce the size of JavaScript by removing white space, stripping comments, and replacing variables with shorter, less-coherent replacements. CleanCSS.com does pretty much the same thing but for CSS. Such optimizations include replacing font-weight:bold; with font-weight:700; color:#ff0000; with color:red; and so forth. These packing tricks helped get me to 13KB but I was running out of ways to optimize further.

My next plan was to modify my HTML. IDs like ‘prepare-for-war’ became a single letter, <strong> elements were replaced with deprecated <b> tags, and the closing </body> and </html> tags were axed since they had no affect on my page. Sidenote: Google chops off the closing </body> and </html> tags which for a site that serves up that volume of pages results in a savings of a couple million dollars in bandwidth bills every year.</end sidenote>

At this point I was so close to coming under 10KB but yet so far. It was time for one more drastic technique. I noticed how well the JavaScript /packer/ tool worked so I decided to combine my HTML and CSS into a single line and use JavaScript to write it out to the page as it was loading. This way I could combine it with my main JavaScript code for the most efficient compression possible. After 3 hours of toiling in vain, I reached the point where my app was under the magic limit. Ten kilobytes is equal to 10,240 bytes. My code weighed in at 10,236 bytes; a mere 4 bytes to spare!

Lessons Learned

Even after spending hours tediously compressing and optimizing my code, I still had a lot of fun. My biggest challenge wasn’t squeezing everything down, or getting it all to work just right. Rather my biggest challenge was myself and when to determine it was finished. After each piece of functionality I coded I wound up thinking of two more things to make it even better. Once it was submitted to the contest gallery, my app got some luke-warm attention but I’m used to that now. Personal projects I toil over never get the amount of attention I always think they will. I’m anxious to see who wins the 10K Apart contest and whether my War app gets any mention at all from the judges.

But in the end that doesn’t matter. What matters is I got my idea out of my head and into a working state where people could actually try it out, no matter how trivial of an idea it is. And that is what makes the web such a great platform for an individual like myself.

The Trials And Tribulations Of 10KB by Russell Heimlich

The AOL-owned site unveiled their new look today and it is a complete revamp. Their logo took a turn from a comic typeface to a more serious, sans-serif one. Reddish-marroon, out! Green and purple, in! The new branding will certainly take some time but there is more to this re-launch than a new log0.

MapQuest has made their maps look more like paper maps. Well what do I mean by that? The color choices by the MapQuest team are really spot on. You might not really think about it, but the distinct colors used by MapQuest make their maps easier to read. Major interstate highways are blue, secondary highways are an orange color, and streets are yellow. This visual hierarchy of most important roads to least important helps focus your attention as your looking around. Compare this to Google Maps where the colors are so similiar that the roads kind of blend together.

The label style on Google Maps is a bit easier to read than MapQuest as I think Google Maps is better for locating city names and MapQuest is geared more towards a visual search of a map. For a more in-depth analysis about map design, see A Brief Comparison of Google Maps, Bing Maps, & Yahoo! Maps by 41Latitude.

The new MapQuest layout is akin to Google Maps with two-thirds of the screen dedicated to the map and the left third of the page for search and directions. Along the top of the map is a carousel navigation featuring groupings of locations like grocery stores, bars, and gas stations. It’s a well done interface for finding nearby attractions on the map.

Most people stick with MapQuest because they trust their directions over others. After a couple of test searches, I prefer the directions from Google better. But MapQuest is more enjoyable to just browse around. One feature MapQuest did really well is right clicking anywhere on the map will bring up the address of that location. Sure the address is an approximation, but the map bubble that pops up gives the house number, street, city, and zip. Sometimes there is even a 360 degree view just like Google’s Street view. MapQuest’s street view feature is more basic but I find it more intuitive to pan around. It doesn’t take up the whole screen and its easy to just pop in, pop out and continue on your way.

Will I’ll drop Google Maps and make MapQuest my dedicated online mapping service? Probably not. Google Maps has too many extra features for a power user like me (auto complete, public transportation, scroll wheel to zoom in/out). But for those people that feel Google Maps is too complicated and  hard to use MapQuest provides a clean, easy to use mapping site that is geared for people like them. I would easily recommend MapQuest to an average computer user while Google is for people who want more features.

The more competition the better for all of us. MapQuest has certainly stepped up it’s game and I can’t wait to see what else they have in store.

MapQuest Gets A Fresh Coat Of Paint by Russell Heimlich

But the site took me back to the days of the dotcom boom where I would spend hours on Customatix.com. The company was started by four Adidas executives in 2000 with the aim of letting anyone create a completely customized shoe. You could pick from a bunch of different styles, choose the colors of various pieces, have your name stitched on the back, pick the laces, and even add a logo from their huge library. I remember making a whole virtual closet full of shoe designs that I had no intention of actually purchasing. I guess that’s why they’re no longer around. Though I did get a friend a gift certificate to the site for her birthday and she did design and order her own custom-made shoes.

On the brighter side, it looks like Customatix inspired the wave of hideous MySpace profiles later in the decade.

Custom Clothing Makes A Comeback by Russell Heimlich

http://0to255.com/ – “0to255 cures your color manipulation woes. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.” My favorite part is that it uses a RESTful API so you can do things like http://0to255.com/0099ff You know I just love things that you can manipulate with a url.

http://cssdesk.com/ – A tool for quickly mocking up snippets of HTML/CSS. I would prefer to just create a new HTML file in Dreamweaver and play with it using Firebug, but this could work too. I found the cursor in the HTML/CSS box to be a little off when hitting return. CSSdesk has a nice interface which is almost like a desktop application. And since you can download it and run it locally, I guess it qualifies as a genuine application.

Please Do Not Change Your Password – Alot of security’s best practices cause more problems than they solve. “At countless conferences and seminars, experts have consistently called for more education and outreach as the answer to user apathy or ignorance. But the research of Herley and others is causing many to realize most of the blame for noncompliance rests not with users, but with the experts themselves — the pros aren’t able to make a strong case for all their recommendations.”

Holistic Web Browsing: Trends Of The Future – “The future of the Web is not at your desk. It’s not necessarily in your pocket, either. It’s everywhere.” How do we design for a Web that was only intended to be used in a single context?

WTF? (Video) – “This clip comes from Hard Ticket to Hawaii, possibly the worst 1980’s movie made (though to be fair, it’s tagline of Bombs, Babes, and Beaches is quite… radical).” At first I thought the acting was WTF, then I saw the ending.

“How many SEO copywriters does it take to change a lightbulb, light bulb, light, bulb, lamp, bulbs, flowers, flour…?” — Chris Rowe

5 Links Of Interestingness by Russell Heimlich

Jill Bolte Taylor’s stroke of insight
What happens when a brain scientist experiences the very thing she has been studying? Jill talks about her experience during a massive stroke which she knows all about.

David Blaine: How I held my breath for 17 min
David goes into detail about the great lengths he took pushing his body to the limit of oxygen deprivation.

Lewis Pugh swims the North Pole
This guy is tough. To help spread awareness to global warming, Lewis swam in the icey waters of the North Pole in nothing but a speedo.

Kevin Kelly tells technology’s epic story
Kevin explains how technology evolves like a cell or a meme.

Hans Rosling: Asia’s rise — how and when
Hans has a thick Sweedish accent that you would expect from a great mind. Here he predicts the exact day when India and China will outstrip the US as the economic powerhouse of the world. I marked the date in my Google Calendar.

Willard Wigan: Hold your breath for micro-sculpture
Willard makes incredibly detailed sculptures out of single grains of sand. His patience for his work, which can be inhaled without thinking , is really mind blowing.

Inspiring TED Talks by Russell Heimlich

The Mega Man series of video games has a distinctive soundtrack. The music from the games is so influential that a bunch of cover bands have incorporated the melodies into their own versions of the popular songs.

Mega Man 1 -10 soundtracks – This is the full collection featuring music from Mega Man 1 for the original NES all the way through the recently released Mega Man 10. It weighs in at 684 MB and you will need 7 Zip for the PC or keka for OS X. The password for the archive is reddit.

8-Bit Instrumental is a video game-focused instrumental band from Brazil popular for their covers of Contra, Super Mario Bros, Street Fighter II, Altered Beast and others. They have an entire album dedicated to Mega Man 2 songs available for free on their website. The release was so popular that a hacked version of Mega Man 2 was released replacing the original soundtrack with the cover songs by 8-Bit Instrumental.

Project X has a 14-track album based on Mega Man 2 available for download in one 33 MB zip file. The Boston-based band produces guitar/electronica music.

Overclocked Remix has several remixes (mostly techno) based on Mega Man songs. The songs can be streamed via YouTube or downloaded for free.

Game Over, a Swedish Nintendo metal band, has three songs based on Mega Man. They’re kind of catchy.

Finally, thepulperizer.com breaks down the top 25 Mega Man songs. It is a pretty thorough list that I mostly agree with except I think the Bubble Man theme song should be number one, not number two.

So there you have it, the ultimate list of Mega Man songs for any video game aficionado. After all, the best thing to do when you’re not playing video games, is to rock out to their soundtracks until you can.

Ultimate List Of Mega Man Songs by Russell Heimlich

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.

Making JavaScript And The Blip.tv Player Work by Russell Heimlich

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.

Dummyimage.com Gets New Features by Russell Heimlich

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 List Of Weird Song-Site Memes by Russell Heimlich