No Zytrons In Range

Sometimes things just come together. For instance, when I’m sitting around on my ass pointlessly surfing the web and I come across a blog post listing a whole bunch of different videos of random people playing the Mario theme song on various instruments. From there, it was a short step to realizing that, when it comes down to it, embedding a YouTube (or Google Video, for that matter) video is easy… it’s just a single line of HTML code. It’s also trivial to write a small PHP script to randomly insert a text file stored on the server into a page. Combining these two ideas, after a short domain name search, I came up with Yourmario.com.

This site features one of over 30 videos of random people playing the Mario theme song on various instruments. (Those mentioned in the blog post above, plus quite a few others I found on my own.) In addition, it also has a link for you to load a new video and a little comment section. The background to the page is also selected at random, although I only have two of those at the moment, a warp zone background and a bowser background. The comments are stored site-wide, just something so people can leave their mark. And, more to the point, I wanted to practice a little of that shiny new AJAX technique everybody talks about to update content dynamically without requiring a page reload. (Thus, you can leave a comment without interrupting the playing video, or even have an entire conversation with some other random visitor.)

The alpha transparency is one of the interesting little-known HTML/CSS features I found while making this site and decided to put to use. I needed a way to display the Load Another link, as well as the comment section, so that it would work over any background and still remain legible. Seeing as every modern web browser supports alpha transparency, it seemed like a good solution to this problem. The CSS used is:

background: black;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity: 0.75;

If you use a syntax-highlighting editor, you’ll notice that none of these variations are highlighted. From what I understand, the third is the actual CSS 3.0 compliant way of setting the opacity, while the first is for IE and the second is for Mozilla/Firefox. I don’t know which of these tags is supposed by Safari, but Safari displays the site correctly as well. I haven’t tested the site in Opera or Konquerer or iCab or anything other than IE, Firefox and Safari.

The AJAXy comment feature was easy to implement once I realized that, despite being called “XMLHttpRequest()”, the relevant Javascript function actually has nothing to do with XML whatsoever. (Well, sure you can use it to read in an XML file, but you can as easily use it to read in a JSON file, or even a plain text file.) All I had to do was create a small PHP page that accepts a comment and writes it into a file, then use the Javascript on the page to periodically read in that file to update the comments.

So that’s that. I plan to spend a couple hours every couple weeks to add new videos to the site, and perhaps new backgrounds if I feel like fiddling with Photoshop Elements, but other than that I’ll ignore it and see what happens.

(By the way, what’s the deal with Javascript naming conventions? Why is it XMLHttpRequest and not XMLHTTPRequest? Both XML and HTTP are acronyms, right? I don’t get it.)

Update 6/28/2008:

At some point I accidentally broke this site while doing an update on some of my other domains. Sorry. It’s back up and working now, I’m not sure what happened. I got rid of the adblock and updated some of the video selections, too.