Mix And Edit Media Online With Jumpcut

Create Movies From Video, Photo and Music

Adding to their frenzy of company purchases, Yahoo recently bought and is in the process of assimilating Jumpcut, a relative newcomer to the online video industry. Jumpcut differentiates itself from other contenders by offering a clever array of online editing tools for “mixing” video, music and photo files.

Manage Your Media

Whether it is actually shared code or just two companies with similar tastes, you can definitely see the Flickr effect in the Jumpcut interface. The Flash uploader and movie editor drag-n-drop features (ala Web 2.0 behavior) are top-notch and fun to use.

Upload Video, Photo and Audio

Despite a couple of minor glitches, uploading files was a snap. Users can choose between a fancy Flash-based uploader or simple HTML interface (the HTML progress indicator leaves something to be desired).

(screenshot: Flexible Upload Interface)

Users are permitted to upload files as large as 100 megabytes in any of the following formats:

• Video: ASF, AVI, DIVX, FLV, MPG, MP4, MOV, WMV
• Audio: AAC, MP3, OGG, WAV
• Image: BMP, GIF, JPG, PNG, TIF

Jumpcut also supports direct import of photos from two other Yahoo companies, Flickr and Facebook.

When using the Flash uploader, you are reminded that uploading and converting files takes time.

Some one has a sense of humor…

(screenshot: Humorous Patience Reminders)

One of the glitches using the Flash interface is that if the upload fails before you can close the tagging dialog, you aren’t notified and it continues with these patience reminders, ad nauseum, until you give up and close the window.

Organize Files With Tagging and Sets

Users can organize uploaded files into “sets” and use tags to facilitate movie making and sharing.  Jumpcut provides a handy set of video clips to create common opening/closing video sequences.

Create and Share A Movie

Now for the fun part – combining the uploaded files into a movie. When editing, users can choose from several gadgets and features:

• 24 title effects
• 28 overlay and transition effects
• 7 pre-built styles

The editing interface allows easy access to insert any previously uploaded item in a frame-by-frame storyboard format.

(screenshot: Movie Editor Interface)

Search For and Mix Other Users’ Movies

Click on the Add section tab and search for shared movies to mix with your own.


While you can identify movies vs. photos by the little icon in the lower-left corner, one shortcoming of set management is that you are not able to preview items or view any sort of summary.

If you add other movies, you’ll notice that the author shows as a contributor in your movie overview page.

Sharing and Publishing

After saving your movie, share with other Jumpcut members, email links to anyone or publish on your own website with several options. In fact, here’s the movie I made: Big Sur by Sarah and Joe.

Share “Open” Movies With Groups

One promising feature that sets Jumpcut aside from YouTube and other similar services is the ability to encourage others to “mix” your movie by marking it as Open. Naturally, this should facilitate the community aspect of the site and promote the growth of like-minded groups.

Share Your Video Blogging Tips!
In keeping with the spirit of Jumpcut’s community design, we’ve created a group just for video bloggers, like us.

Visit the us at Jumpcut: Video Bloggers Group

Publish Movies to Your Website or Blog

Just like the Big Three (YouTube, Google, IFILM), users can share their finished movies through email or by embedding them into a web page. In addition to “embed” code, users can copy HTML for a URL link with an optional thumbnail image.

Here’s our movie, embedded -

Thumbnail Link:

Embedded Viewer:

To simplify web publishing even more, Jumpcut provides the ability to create blog and other entries directly for the following services:

• Facebook
• Blogger
• MySpace
• TypePad
• WordPress
• Atom Enabled
• Blogger API
• MetaWebLog API
• Digg
• del.icio.us

Just provide your connection information, which is stored for future use, and you can create entries of your movies in minutes.

(screenshot: Tools To Publish Movie On Your Website)

Summary

VibeTalk Rating:
[rate 5]

I have to say that Jumpcut is fun and addicting. The smart use of Web 2.0 UI tools and generous storage capacity point to the future of such services.

While I admit that most of the visual effects are novelties, the ease of use and user community “mixing” feature definitely takes amateur video publishing to the next level.

I give this service five stars!

Alternatives To YouTube Video Sharing

Nine Other Services Reviewed

DVGuru posted an excellent review of 10 video sharing services (including YouTube) back in April of this year. All them are still thriving and several mentioned as “new” are now available.

The author tests each service’s quality of interface, editing and sharing functions.

In addition to the ten listed, I recommend checking out Motionbox and Dabble.

Will any of these supplant the Big Three (YouTube, Google, IFILM)? Probably not, but they are likely to keep them on their toes by applying pressure for continued improvement.

Personally, I’m most interested in Jumpcut, which promises the best online video editing capability so far.

Even More Video Services

You could spend days finding more services. For those on a research mission, these sites have reviews that should get you started:

• Testing Grounds: 33 services with regularly updated review and commentary by users and the service providers
• The MustseeBlog: 40 services reviewed and categorized in a matrix on Apr 10 2006. The site is slow to maneuver because of large graphics, but worth a look

Anarchy Media Player 1.5 Adds YouTube Support

New Version Includes Several New Features

Right on the heels of reviewing another WordPress plug-in called Viper Video Quicktags (Add YouTube To WordPress With Viper Plug-In) – and as luck would have it – I noticed that my good buddies over at An-Archos released a new version of my favorite media plug-in: Anarchy Media Player.

Anarchy brings together the work of several other open-source efforts to provide simplified music and video integration. Version 1.5 embeds (literally) the code from Viper to enable buttons for easier insertion of YouTube, Google Video and IFILM videos.

So, is it better than the two stars I gave Viper? Let’s see…

Using the Plug-In

Just like Viper, once enabling the plug-in you will see a few more buttons in the post editor:

(screenshot: WordPress Rich Text Editor)

These buttons are intended to shortcut the process of embedding video from “The Big Three” (I think that’s what I’ll call them now). You provide the ID, Anarchy adds the surrounding parameters.

(screenshot: Add YouTube by ID)

The resulting code is in BBCode format (extra space added left of ‘youtube’):

[ youtube]IkEu-PdVlK0[/youtube]

And looks like this:

(embedded video: Lexus LS460 Parks Itself)

The advantage I hadn’t realized in reviewing Viper is that these buttons allow you to use the Rich Editor (which I don’t use). People often have difficulty embedding pure HTML tags because the Rich Editor “cleans” them up, deleting crucial pieces.

You also get buttons to directly embed Macromedia Director (DCR) and Shockwave (SWF) files, although who uses these anyway?

Other Supported Media

Anarchy supports several other file types and bundles two lightweight Flash players – one for Flash Video and one for MP3 files. The FLV player is from Jeroen Wijering (this is brand new in version 1.5.1 – see sidebar for a great story on this).

• MP3 Audio (MP3)
• Windows Media Video (WMV)
• Macromedia Flash Video (FLV)
• Quicktime Movie (MOV)

You don’t get special buttons for these additional formats; support is provided via automatic conversion of anchors to the appropriate embedded player.

In some ways I find this method more useful than a button – just create a hyperlink and any recognized format is automatically wrapped in the appropriate code.

For example, to embed an MP3 file, just make an anchor (hypertext link), like this:


Nickelback - Figured You Out


Which results in this:

Nickelback – Figured You Out

This works exactly the same way for video files, providing some consistency between formats. You can also toggle the visibility of the actual download link by editing a parameter in the plug-in.

Unfortunately, this method doesn’t allow dynamic changing of video sizes. You must configure playback parameters in the plug-in in the source code (this is a bit better in 1.5 because it’s a separate PHP file).

The Anatomy of a Great Company
Every time I come across people that go out of their way to be responsive, I have to make a note of it. It’s just so damned rare these days! For example…

Not satisfied with the playback interface for the bundled FLV player, I suggested to An-Archos that they may want to investigate using Ross Gerbasi’s Extreme Video Plugin player. Within hours zeug responded that he’d not only figured out for me how to do that, he spotted a much smaller player that he’d include in the next release.

I barely had time to read that statement when I discovered that he’d already released version 1.5.1!!!

I realize it isn’t a huge effort, but it makes all the difference for me – I don’t care who you are, this is how great companies are made.

Keep up the good work guys.

Configuration Options

Anarchy provides some basic configuration options and a couple thoughtful touches that make it stand out over other offerings.

• Provides a replaceable “cover” graphic that shows the video playback frame without actually loading the video – the video is loaded after the user clicks the image
• Gracefully displays a download graphic in place of the embedded movie if the Quicktime player is not installed on a users system
• Attends to basic security by allowing the option to prevent the code from being executed from another location
• Provides editable flags for video loop, autoplay
• Provides color configuration, inline CSS formatting

Summary

VibeTalk Rating: [rate 4]

An-Archos does a great job pulling together several other authors’ work in a relatively seamless manner. The little design touches and super-responsive support make a big difference in the overall effectiveness.

For future releases, I would love to see a configuration panel in WordPress and more consistency for all video playback.

I give this plug-in 4 stars.

Anarchy Media Player by An-Archos
Version 1.5.1 for WordPress [download]
Version 1.5.1, Javascript only [download]
Source Code [download]

More information…

Add YouTube To WordPress With Viper Plug-In

Embedded Video Made Easy

Last month I covered some quick-n-dirty ways to display YouTube video in a WordPress blog site (Publish YouTube Video on Your Blog), but didn’t have time to review a plug-in I noticed at the last moment: Viper Video Quicktags.

This nifty plug-in promises to greatly simplify video integration. It supports BBCode tags and (in the 3.1.0 beta) provides the ability to launch external video players from a link.

Once configured, Viper provides several buttons in the WordPress administration screen when writing a new post that allow bloggers to instantly place video blocks from YouTube, Google Video and IFILM.

Using the Plug-In

You can use the plug-in with or without the WYSIWYG (rich text) editor option, but you may want to enable it if you’re having trouble (the beta worked ok for me). With the Viper enabled, new editor buttons allow you to past videos using the clip ID or file URL.

(screenshot: Viper Video Quicktags Interface)

Embedding a Hosted Video

To add a video link from one of the three supported services, add the ID using the appropriate button. The resulting code in your post will look something like this:

You can change the video size by adding “width” and “height” parameters:

The result will look like this:

I have to admit that at this point I began to wonder why I need this plug-in: I had to go to YouTube to get the video ID and could just as easily have copied the “embed” code from there.

Hmmm. Let’s try the QuickTime option…

Embedding a QuickTime Video from File

Viper allows bloggers to embed Apple QuickTime MOV files. Simply click the appropriate icon, specify the file URL, display width and height parameters, and viola! Embedded video.

The code looks like this:

[quicktime width="320" height="240"]http://www.vibetechnology.com/pub/video/clips/verizon-ferret.mov[/quicktime]

I have one problem with the way the plug-in behaves here – there is no title screen to make users aware of the video before actually playing it. Default QuickTime plug-in settings will go straight to loading then playing the file, which makes the page into which a MOV file is embedded larger than it needs to be at first.

One nice touch is that if users don’t have QuickTime installed, the MOV is embedded in a way that creates a “Install QuickTime” link.

Launch External Video Players

You can also add links that will invoke an external player by clicking the Windows Media Player icon. While this appears to be meant for .WMV files, this can also be used for AVI, FLV and MOV files. I’m not sure what the savings is here – you get the same behavior by adding a link to a file.

The code:

  [video width="320" height="320"]http://www.vibetechnology.com/pub/video/clips/verizon-ferret.mov[/video]

Summary

VibeTalk Rating: [rate 2]

Overall, I wasn’t too impressed with this plug-in.

While it reduces the amount you need to type, it doesn’t necessarily save you any time because you’ll still need to visit YouTube, Google or IFILM sites to locate the cryptic video ID. The shortcut to embed QuickTime videos is nice, but you end up configuring the QT plug-in externally anyway. I give this plug-in 2 stars.

Maybe I should go back and get Video Blogger to work, but I’ll probably stick to the Anarchy Media Player, which is open source and plays music files too.

Viper Video Quicktags by Viper007Bond
Version 3.0.0 [download]
Version 3.1.0 Beta 1 [download]
More information…

Boost PHP Speed With “If-Modified-Since” [3/4]

Improve PHP Performance

Welcome to the third installment of our four part series on how webmasters can reduce or even eliminate unnecessary server traffic. The heart
of this tutorial is the If-Modified-Since header and a technique called conditional GET.

Series Index

• Part I: Understanding IMS
• Part II: Watching IMS In Action
• Part III: Using IMS For Optimized RSS Feeds (you are here)
• Part IV: Implementing IMS On WordPress

This section covers the impact of conditional GETs on RSS feeds.

Part III: Using IMS For Optimized RSS (and other) Feeds

Up to now, I’ve focused on how browsers can use IMS for conditional GETs, but in reality, browsers are only a small part of the picture. I learned last month that the real beauty of this technique has to do with making web crawlers work better.

RSS seemed to get the most attention here, so I wanted to pay particular attention to how they have been affecting the Vibe Technology website. What I found is that (for us, at least), RSS crawlers aren’t the culprits – search engine indexers are the big bandwidth hogs.

You can improve performance by optimizing RSS feeds, but you may find more impressive gains when leveraging the same conditional GET techniques with the full pages that are indexed by search engines.

However, before we talk about fixing the problem, let’s understand the problem through some web log analysis…

Required Tools for Web Log Analysis

Are you aware of just how many times a web crawler visits your website? Honestly, I wasn’t either, but since I’d heard it can be several times a day, I decided to find out.

Last month I focused on click tracking software that can give webmasters a picture of visitor behavior (Comparing Crazy Egg, Google and MyBlogLog). While I use MyBlogLog and Google Analytics on a daily basis, I needed to dig deeper for details on how spiders, worms and crawlers were affecting VibeTalk.

To accomplish this, I used an excellent tool called Sawmill Professional by Flowerfire. They have a 30-day download-able version on the website.

Focus Analysis on Relevant Data

Web logs can be misleading at first glance. For example, Vibe Technology’s September logs show nearly 140,000 “hits”. Strictly speaking, this is true, but understand that *every* element of every requested page is a “hit”. Sawmill does a great job of grouping hits into pages and sessions, but make sure you are tracking bandwidth data at the server level (see Configure IIS section below).

Configure Sawmill Data Filters

Because of website development, much of our traffic was internal. If you have the same issue, try the following log filter for Sawmill (change the IP address and domain name accordingly)

 if (c_ip eq "127.0.0.1") or 
  (c_ip eq "64.81.247.162") or
  (ends_with(hostname, "vibetechnology.com")) then "reject"

The third test only works if your server resolves hostnames. Also, remember to rebuild the database after creating Log Filters.

Configure IIS for Bandwidth Reporting

Only after poring over the reports for an hour or so did I realize why I couldn’t get bandwidth data – we didn’t have that level of tracking enabled at the server level. This resulted in some guestimating on the impact, so I recommend fixing this in your install, if you haven’t already. The default installation appears to have Bytes Sent and Bytes Received unchecked.

Side Note: Using Robots.txt

Once you see just how much traffic is caused by web crawlers, you may decide that certain areas don’t need to be indexed at all. To prevent automated programs from regularly crawling parts of your website, simply create a text file called robots.txt and place it in the root directory the site.

Googlebot was by far the most active spider, accounting for 58% of all spider traffic. To keep Google and others from crawling the MyVibe Gallery I used the following values:

   User-agent: *
   Disallow: /vt/wp-gallery2.php
   Disallow: /bin/g/

For more information on robots.txt (and the META alternative for those without access to the website root), see http://en.wikipedia.org/wiki/Robots.txt.

To calculate the bandwidth impact from feeds, first filter the dataset to specific content areas. For VibeTalk, I filtered traffic to that coming from these URLs:

   /vt/wp-feed.php
   /vt/wp-atom.php
   /vt/wp-rss*.php
   /vt/feed/

Web Log Analysis Results

(screenshot: RSS statistics for 6 days)

Because of my settings problem, I only had a few days of feed-related bandwidth info. However, it was pretty obvious that RSS crawlers pose no significant issue – we currently get about 50 visits and transfer less than 1/4 of a megabyte of data per day (one of the benefits of gzip).

It is insignificant, really.

RSS activity could be a bear if the site were to to be slashdotted.

(screenshot: Crawler statistics for September)

The majority of activity appeared to be coming from other PHP pages fetched by web crawlers. For September, spiders accounted for nearly 12000 page views! At 100k per page (a conservative average), that’s over 1 gigabyte of data.

By looking at Response Codes, I determined that most of the pages weren’t honoring the IMS/conditional GET.

There were only eight new articles last month, which means that even with several edits, page content shouldn’t change that much, which means we still have significant improvements at hand. Maybe there’s some hope afterall!

Summary

Even though my research showed little to gain for RSS feeds, there’s plenty of reason to make web aggregators more efficient. When performing traffic analysis for your own site, follow these general steps:

• Choose a web log analytics package that processes raw server log files
• Quantify overall traffic generated by web crawlers
• Compare expected and actual 200 / 300 request-response ratio
• Calculate bandwidth impact of implementing conditional GET mechanism

Now that we understand where traffic is generated on the site, the next step will be to make sure PHP content is only generated when content is updated or new. In the next and final installment of this series, I hope to solve this problem once and for all in our WordPress installation. Stay tuned for more!

« Previous Part II: Watching IMS In Action
Next » Part IV: Implementing IMS On WordPress

How To: Live Comments Preview

Customizing WordPress Series

Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.

This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.

This week’s episode is about adding a more pleasing behavior to the Comments section of your WordPress blog. We’ve added the following functionality:

• Live Preview – Some sites have preview buttons on their comment forms, but this will allow you to see a preview as you type
• AJAX Submit – A simple but effective use for AJAX is to submit the comment in the background
• Quick Tags – Add configurable shortcut buttons for basic HTML formatting in your comment box.
• Smileys – Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings.
• Gravatars – Show users’ Globally Recognized Avatar with local caching option

Most of this functionality is as simple as dropping in a plug-in!

Want to see it in action? Go to the bottom of this page and comment away – we use every one of these features.

Live Comment Preview

Occasionally, I run across a blog that has this neat feature: as you type your comment a preview section instantly displays what your comment will look like.

Always trying to shortcut real work by downloading a ready-made plug-in, I went through at least four offerings before finding an excellent bit of code by John Nunemaker.

It’s not a plug-in, so you’ll have to make minor edits to your PHP code, but it works amazingly well.

Before stumbling across John’s code, I tried the following. I’m listing them to possibly save you time (in either finding them or avoiding them – your choice):

• Live Comment Preview v 1.7 by Iacovos Constantinou
• Textile Live Preview (AJAX Version) v 0.2 by Joen Asmussen
• Filosofo Comments Preview v 0.78 by Austin Matzko
• AJAX Comments v 2.07 by Mike Smullin

Add to HEADER.PHP

 ");
  var commentObj = document.getElementById("previewComment");
  commentObj.innerHTML = newText;
 }

 function previewName() {
  var author = document.getElementById("author").value;
  var urlLink = document.getElementById("url").value;
  if (urlLink != '') {
   var text = '
' + author + ' 
';
   } else {
    var text = '
' + author + ' says:
';
   }
  var nameObj = document.getElementById("previewName");
  nameObj.innerHTML = text;
 }
 //-->
 

Then you need to add code to the comments.php file that will make use of this script:

Add onkeyup callbacks to COMMENTS.PHP

Look for:

  ...id="author"...

And add onkeyup=”previewName(); to the function:

...id="author" onkeyup="previewName();"/>...

Look for:

  ...id="url"...

And add onkeyup=”previewName(); to the function:

...id="url" onkeyup="previewName();"/>...

Look for:

  ...id="comment" ...

And add onkeyup=”previewComment(); previewName();” to the function:

...id="comment" onkeyup="previewComment(); previewName();"...

Then build a section to display the live comments preview. Per an excellent post titled Comment Live Preview Placement by Lorelle on WordPress.com, I recommend placing this box between the login block and the input box – this helps readers notice the preview.

Add Comment Preview to COMMENTS.PHP

" size="22" tabindex="3" onkeyup="previewName();"/>
Website




Comment Preview:

   

   





XHTML: You can use these tags: 

AJAX Submit

Plug-in: AJAX Comments v2.07
Author: Mike Smulling

Give users some instant feedback by adding AJAX behavior. When they press Submit, rather than waiting to reload the entire page, AJAX scripting is used to perform the task in the background. They’ll see the following graphic while they wait… [download]

Submitting Comment…

Quick Tags

Plug-in: LMB^Box Comment Quicktags v2.4
Author: Thomas Montague

Add configurable shortcut buttons for basic HTML formatting in your comment box. [download]

Smileys

Plug-in: LMB^Box Smileys v3.2
Author: Thomas Montague

Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings. [download]

Gravatars

Plug-in: Gravatars v.2.6
Author: Scott Merrill

Show users’ Globally Recognized Avatar (see my local gravatar on the right). The plug-in will automatically lookup the users Gravatar and display the image next to their comments. To improve performance, the gravatar is cached on your site after the first load.

You can define a default gravatar for users without one, and users can optionally define a local version. [download]

Add Gravatar code to COMMENTS.PHP

comment_author_url' title='Visit $comment->comment_author'>";
     } else {
     echo "";
     }
     echo "comment_type) {
       echo gravatar($comment->comment_author_email);
       } elseif ( ('trackback' == $comment->comment_type) || ('pingback' == $comment->comment_type) ) {
	  echo gravatar($comment->comment_author_url);
	  }
	 echo "' alt='[gravatar]' class='gravatar' />";
	 }
?>

How To: Multi-Purpose WordPress Landing Site

Customizing WordPress Series

Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.

This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.

This tutorial is about adding a multi-function Landing Site to your WordPress blog.

VibeTalk Landing Pad Serves Several Functions

It’s been there for a while, but you may not have noticed its full capability. The shaded box on the right side of this page actually has three functions: Featured Articles, Possibly Related Posts and Landing Pad.

• Featured Articles
  The first mode is only visible on the home page of VibeTalk. You can decide what works best for your site, but I find the natural (dis)organization of blogs makes it necessary to focus readers on what you want them to see.

  The idea for building thumbnail summaries into the VibeTalk Landing Pad came from Samsarin’s handy guide on creating a WordPress home page. You can also download a plug-in on the same site that apparently simplifies the thumbnail process, but I haven’t tested it and I’m not sure if it will work with the sample code below.

To implement a Featured Articles, you will need:

the_excerpt Reloaded R1 from Kaf Oseo
Used to provide clean versions of the article summary – converting and stripping embedded HTML as well as a host of other useful options. [download]

Get Custom Field Values 2.1 from Scott Reilly
Used to retrieve the URL for a thumbnail. I recommend you scale the thumbnail down to target size when you do this – saves download time and looks much better than letting the browser do it. [download]

• Possibly Related Posts
  The second mode appears when viewing a single post or page and shows posts related to the words of the current post’s title. The listing is streamlined on VibeTalk to show only the titles, but you can set plug-in options to show summaries too.
To implement a Possibly Related Posts, you will need:

Related Posts 2.03 from Alexander Malov & Mike Lu
Includes an admin menu that simplifies configuration – just call a single function. [download]

• Landing Pad
  And of course, there’s the third mode called Landing Pad. Also known as a landing site, the Landing Pad welcomes visitors who have arrived through a search engine. In addition to a list of related articles based on their search terms, the Landing Pad also highlights the search terms throughout the body of the page.

  To see it in action, run this search on Google and follow a VibeTalk link back here!

To implement a Landing Pad, you will need:

Landing Sites 1.3 from The Undersigned
Built on code from the Related Posts plug-in, at some point one can probably merge the two for efficiency. [download]

se-hilite.js from Scott Yang
An excellent bit of javascript that wraps search terms in color highlights. The code uses <div> tags with CSS classes so you easily set colors. [download]

VibeTalk Source Code

Here is the actual PHP and JavaScript code currently used on the site. Some of the lines are a bit long, so you will need to copy/paste the code to an editor to see everything.

  

   

	
      
You came here from  
		searching for '.' These posts might also be of interest:
	
', ' ', ' ', false, false); ?>



  

    
        

          

            
              ID, 'thumbnail', true); ?>" />
	    
">

		
	  
	
  



  

WordPress And Web Design Tutorials

Customizing WordPress Series

By popular demand, we will now feature an ongoing series based on our adventures adding and removing WordPress plug-ins for VibeTalk.

Our installments so far include

• How To: Multi-Purpose WordPress Landing Site
• How To: Live Comments Preview
• Search for More …

Why Do This? Why WordPress?

As CEO of Vibe Technology (read: Chief Enlightenment Officer), I’ve been watching our site traffic with great interest as we experiment with the Whatever Works™ business philosophy. As it turns out – most of our visitors are interested in “How To” information.

Having spent a year personally building the kind of company elements you tend to think of as overhead, I am keenly aware of the need.

This series consists of quick overviews and will be a bit more concise than the usual tutorial, but the plan is to roll these up into a “Top WordPress Customizations” feature at some point soon.

Now, if only I could find more people willing to save *me* time and money so I can focus on business.

Actually, I rather enjoy it – I hope you do too!

-Joe

Google Offers $1.6 Billion For YouTube

Advertizing On YouTube

I recently read an article where YouTube founders were reportedly reluctant to capitalize on their user reach with commercials. They wanted to do it right.

Looks like they may have found the right price, at least – Google is in early talks to buy YouTube for a cool $1.6 million (EDIT: Did I say million? I meant billion. Holy cow), according to the Wall Street Journal.

It will be interesting to see what the Labs concocts next. Combining AdSense with the huge inventory of tagged video is top on the list of potential uses…

User Poll – Is YouTube Worth It?

[poll=7]

About You

[poll=8]

Boost PHP Speed With “If-Modified-Since” [2/4]

Improve PHP Performance

This post continues the series where we embarked on the seemingly simple task of enabling If-Modified-Since headers for PHP scripts. What I discovered is that it’s not as easy at it seems!

Series Index

• Part I: Understanding IMS
• Part II: Watching IMS In Action (you are here)
• Part III: Using IMS For Optimized RSS Feeds
• Part IV: Implementing IMS On WordPress

Part II: Watching IMS In Action

Up to now I’ve called this process “IMS”. What we’re really doing is a conditional GET. In the next section we’ll go over several useful tools for dissecting a conditional GET and watch real data to help explain the challenges and possible solutions involved.

Required Tools

To perform and watch a conditional GET, you need the following (the tools I use in parenthesis).

• An HTTP Monitoring Tool (Fiddler 1.2.0.7)
  Fiddler is an HTTP debugging proxy written by Eric Lawrence of Microsoft that allows you to examine request and response header values as they happen. This the tool I used to check which sites use gzip in a previous tutorial. You can also craft custom requests, attach scripts to particular behaviors and filter various response types. I mostly use it as a quick and dirty way to see what’s getting loaded and which requests cause errors.
  http://www.fiddlertool.com/fiddler/

   

• An HTTP 1.1-Compliant Browser (FireFox 1.5.0.7)
  FireFox is of course, the tool for compatible browsing, but any modern browser should work – the IMS caching standard has been around for years.
  http://www.mozilla.com/firefox/

   

• Any scripting/CGI language that allows raw HTML generation (PHP 5.0)
  PHP is perhaps overkill for demonstration purposes (you could use a simple batch file), but it is very common so I suspect this should work for most readers. PHP is the scripting language upon which WordPress is based.
  http://www.php.net/downloads.php

Let’s take a peek at the data exchanged between a browser and server…

Example 1: Watch HTML Caching With Fiddler

First, let’s look at what a normal HTML file looks like with Fiddler. The HTML is stripped to the bare minimum for simplicity:

Source Code

<html>
<body>

Hello World.

</body>
</html>

View static.html

(screenshot: First pass of static.html)

Because static.html hasn’t been loaded before, the browser does NOT send an IMS date, but the server returns a Last-Modified and ETag for next time.

(screenshot: Second pass of static.html)

Press F5 to reload and this time the server responds with a 304 Not Modified, as expected.

All of this has been automatic so far. Now let’s look a more interesting page…

Example 2: Watch a Simple PHP Page

We’ll execute a basic PHP command (normally this would be a data query or series of pre-processor commands for the server, of course).

Source Code

<html>
<body>

<?php echo "Hello World" ?>

</body>
</html>

View no-ims.php

Press F5 and notice that even though the file has not changed, the server still generates the content each time. No big deal for a small file, but in a WordPress environment, you’re looking at upwards of 100k of related data requested from a database for each user, rss aggregator and indexing robot that visits the site!

Speaking of unnecessary data, I’ll forego the fat screenshot images – you get the idea.

Example 3: Watch a PHP File Using Conditional GET

This is where it gets fun – a conditional GET.

For simplicity, the next example does not actually store or retrieve a LM date for the file – we’re going to hard code one in the header and embed the doConditionalGet function in the same file. The base code comes courtesy of Simon Willison.

Source Code

<?php
//---------------------------------
// doConditionalGet function definition
//---------------------------------
function doConditionalGet($timestamp) {
  // Any method for creating ETag is ok,
  //  but should be unique
  $etag = '"'.md5($timestamp).'"';

  // Send the headers
  header("Last-Modified: $timestamp");
  header("ETag: $etag");

  // If browser provided IMS and ETag, get them
  // Otherwise, set variable to 'false'
  $if_modified_since = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ?
      stripslashes($_SERVER['HTTP_IF_MODIFIED_SINCE']) : false;
  $if_none_match = isset($_SERVER['HTTP_IF_NONE_MATCH']) ?
      stripslashes($_SERVER['HTTP_IF_NONE_MATCH']) : false;
  if (!$if_modified_since && !$if_none_match) {
      return; }

  // If at least one value exists, validate them
  if ($if_none_match && $if_none_match != $etag) {
      return; // ETag exists but doesn't match 
	}

  if ($if_modified_since && $if_modified_since != $timestamp) {
      return; // IMS exists but doesn't match 
	}

  // Nothing has changed since last request
  // Return a 304 and do NOT run the rest of page
  header('HTTP/1.1 304 Not Modified');
  exit;
}
?>

<?php 
//--------------------------------------------------
// Call doConditionalGet function with hard-coded LM date
// Format is the web logging standard
//--------------------------------------------------

doConditionalGet('Wed, 04 Oct 2006 00:43:43 GMT');
?>

<html>
<body>

<?php echo "Hello World" ?>

</body>
</html>

View with-ims.php

As predicted, the file only gets loaded the first time and as long as the cached copy still exists, should NEVER load again for the same browser.

Next Steps

So, are we done?

No, because now we have to figure out how we’re going to track the LM date for this content without creating more of the server load we set out to prevent! We’ll cover this in Part IV: Implementing IMS On WordPress.

But first, we’ll spend time in Part III understanding how all of this specifically impacts content aggregators and RSS feeds.

Homework Exercise

To conclude this section, I want to introduce one other very useful tool for webmasters: the Cacheability Test by Mark Nottingham.

This tool analyzes a URL for the presence of cache-ready values like Last-Modified and Entity Tag, as well as a few I haven’t mentioned yet

• Cache Control
• Expires
• Cookies
• Content Length

Your homework is to perform tests on the following URLs.

To speed up cacheability tests, be sure to uncheck “include referenced frames, images and objects”.

• Test 1: Run the cacheability test on http://www.vibetechnology.com/vt/index.php
• Test 2: Run the cacheability test on http://www.vibetechnology.com/vt/ims/with-ims.php
• Test 3: With Fiddler running, click this link then reload it by pressing F5: http://www.vibetechnology.com/vt/ims/with-ims.php

Question: Why will http://www.vibetechnology.com/vt/index.php NEVER be cacheable?

« Previous Part I: Understanding IMS
Next » Part III: Using IMS For Optimized RSS Feeds