If you’ve already voted, call some­one and tell them to vote. Drive your friend to the polls so they can vote and remind every­one you see today to just vote. Don’t be lazy. Don’t be apa­thetic. Don’t com­plain unless you plan to vote. 537 people decided the 2000 election—still think your vote doesn’t count? Our democ­racy rarely asks much of its cit­i­zens, but today—November 4, 2008—it’s asking you to just get out and VOTE!

It’s impos­si­ble to be aware of all the dynamic aspects of a web page when work­ing in static illus­tra­tion soft­ware. How­ever, when pro­to­typ­ing with XHTML, you can lever­age the power of ren­der­ing your design in the same way that it will be seen by users, and incre­men­tally evolve page pre­sen­ta­tion based on this imme­di­ate and rich feedback.

I’ve been a Slice­host cus­tomer for over a year now and couldn’t be hap­pier. Their inter­face is simple, they have great tuto­ri­als and “books” and the user com­mu­nity is top notch. As it stands right now, all of this should stay the same. Accord­ing the acqui­si­tion FAQ, Slice­host will be a sub­sidiary of Rack­space and con­tinue to do developer-​focused host­ing. There will be some cross link­ing between the sites (and Rack­space will defi­antly be lever­ag­ing some of their tech­nol­ogy) but for the most part, Slice­host will stay the same. Right now, I think that’s true. In the long run, how­ever, I’m not so con­fi­dent Slice­host will remain the bou­tique, kick-​ass host­ing com­pany that they are today. I hope they prove me wrong.

Start with your con­tent peanut, marked up in rich, seman­tic (X)HTML. Coat that con­tent with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a won­der­fully tasty treat (and keep it from melt­ing in your hands).

Aaron Gustafson has a great write-​up over at A List Apart about devel­op­ing web­sites using pro­gres­sive enhance­ment and why con­tent is more impor­tant then degrad­able browser support.

My solu­tion was to write a simple Word­press plugin that allows tag-​based embed­ding of Vimeo videos [vimeo 1821974] and out­puts valid XHTML to the browser. No other for­mats are sup­ported (although they could easily be added) and there is no admin menu. This also serves as a great intro­duc­tion to build­ing small plu­g­ins for Word­press.

Thanks to Martín Aberastegue and his WP-​Vidz plugin for the inspiration.

1. Create a new file—locally or on your server—and name it vimeo.php (or what­ever you want, really). Open the empty the file in your favorite text editor.

2. Add the required header to the file so Word­press knows a little more about the plugin. This is done using stan­dard PHP block com­ments. Don’t forget to add the open­ing <?php tag so Word­press and your server know what to do with the code.

   <?php
   /*
   Plugin Name: Simple Vimeo
   Plugin URI: http://siarto.com/2008/10/02/vimeo-wp-plugin/
   Description: Valid XHTML Vimeo embed tag
   Author: Jeff Siarto
   Version: 0.1
   Author URI: http://siarto.com
   */

3. This plugin has two parts, the main vimeo_code() func­tion that defines the tag and an add_filter() call that reg­is­ters the new tag with Wordpress.

4. Create a new func­tion below the header com­ment block called vimeo_code() that takes a single argu­ment named $data. This argument will hold the tag that we use in our posts to embed a Vimeo video—in this case: [vimeo 1821974].

   function vimeo_code($data) {
   
   }

5. Add two vari­ables within the vimeo_code() func­tion to store the height and width of the video (this is an area that could use an admin GUI, but remem­ber, we’re going for sim­plic­ity here). Set the height and width to values that fit well on your page. Remem­ber to pre­serve the aspect ratio of your clip so that the video doesn’t look squashed or stretched.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
   }

6. Next, we need some code that takes our Vimeo tag and out­puts the proper XHTML to the browser, dis­play­ing the cor­rect video based on the ID. To do this we declare a vari­able named $data (the same name as our function argument) and use PHP’s preg_replace() func­tion to extract the ID. $pattern and $replacement are just place­hold­ers that we’ll change fur­ther along in the tutorial.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace($pattern, $replacement, $data);
   }

   The first argument for preg_replace() is a reg­u­lar expres­sion that matches the format of our tag (this will replace the $pattern place­holder). This will look for a pat­tern in a chunk of text and if it finds a match, replace it with our spec­i­fied text.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace("~\[vimeo (.*?)\]~i", $replacement, $data);
   }

   The second argument is a string con­tain­ing the code that will be inserted when our plugin finds the spe­cial Vimeo tag in our posts. This is basi­cally an XHTML-​valid ver­sion of the embed code you get from Vimeo. The last argu­ment—$data just tells the func­tion what to per­form the first to actions on. In our case, we want to replace the text that is passed to our vimeo_code() function.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace("~\[vimeo (.*?)\]~i", "<object
           width=\"$video_width\"
           height=\"$video_height\"
           data=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\"
           type=\"application/x-shockwave-flash\">
               <param name=\"allowfullscreen\" value=\"true\" />
               <param name=\"allowscriptaccess\" value=\"always\" />
               <param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\" />
           </object>\n", $data
       );
   }

7. The last line in our vimeo_code() func­tion just returns the value of $data. This sends our object code to the browser for dis­play.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace("~\[vimeo (.*?)\]~i", "<object
           width=\"$video_width\"
           height=\"$video_height\"
           data=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\"
           type=\"application/x-shockwave-flash\">
               <param name=\"allowfullscreen\" value=\"true\" />
               <param name=\"allowscriptaccess\" value=\"always\" />
               <param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\" />
           </object>\n", $data
       );
       return $data;
   }

8. The very last snippet of code needed to make this plugin work is a call to the add_filter() Word­press func­tion. This just tells Word­press that our vimeo_code() func­tion should be exe­cuted when­ever the the_content tem­plate tag is used. Make sure you also close your script with a ?> tag.

   add_filter('the_content', 'vimeo_code');
   ?>

9. Save this file and place it in your plu­g­ins direc­tory. Once the plugin is acti­vated, you can begin using the spe­cial tag [vimeo 1821974] (replac­ing the ID with the one of your video) in your posts to prop­erly embed Vimeo media on your blog.

   

Down­load the com­pleted vimeo.php plugin file.