So when Chris mentions JavaScript badges for del.icio.us, I think of Ed Eliot’s PhpDelicious or how to get similar results in WordPress. Naturally when he had the splendid idea to add captioning to YouTube videos with Google’s JavaScript API, I asked myself if there wasn’t a better way. There is, but to my surprise neither YouTube nor Yahoo! Video take advantage of that capability:

1. It’s common practice to implement text content in Flash via XML.
2. DFXP is a W3C XML standard for captioning videos.
3. There are free tools like MAGpie for creating captions, and they all support DFXP.
4. If YouTube or Yahoo! Video would allow users to upload and attach a DFXP file to a video, it would become dead easy for anybody to caption it. Not only for the filmmaker, captioning could be crowdsourced!

Just anticipating Joe Clark’s inevitable (and justifiable) objection: of course captioning is not an easy thing that anybody can do, to do it right it requires people with special training. But considering the number of videos on those platforms the only affordable and practical solution to provide any captioning at all is crowdsourcing. That can also be applied to the control of quality, accuracy, or reporting abuse.

Of course this would enhance primarily accessibility, but the XML files would further help search engines to index video content. And their marketing people would love such a feature for the positive PR!

Well, I submitted the suggestion both to Google and Yahoo!, you can vote on the Yahoo! Developer Network for it (Google is more closed-lipped). I’m curious who will be the first to offer that feature …

1. Let’s start with the simplest transformation, pulling the number of people who have bookmarked your post on del.icio.us. There are two components: one line of PHP code to insert the result in the footer of a page (found in template file single.php), and a few lines of XSLT for the transformation:

   1. <?php inlineRSS(
   2. 'delicious-incoming-' . $id,
'http://feeds.delicious.com/rss/url?url=' . get_permalink(), 60, 'inline-rss-linked.xslt');
   3. ?>

   The function inlineRSS() takes four arguments: the filename where you want to cache the result, the feed URI, the time to cache in minutes, and the filename of the transformation stylesheet. The latter has to be in the same directory as inlineRSS.php (the plugin).

   1. <xsl:template match="/rdf:RDF">
   2. <xsl:if test="count( rss:item ) &gt; 0">
   3. Saved by <span class="linked-in"><xsl:value-of select="count( rss:item )" /></span> other people.
   4. </xsl:if>
   5. </xsl:template>

   Download: inline-rss-linked.xslt

2. In the sidebar of this blog you see a section “current reading” which displays my latest five del.icio.us entries I have tagged with show-in-blog. Because I’m too lazy to add a description on del.icio.us there is just the title and the tags, minus “show-in-blog.” Here is the code for sidebar.php:

   1. <?php inlineRSS(
   2. 'delicious-links',
'http://feeds.delicious.com/rss/ your-delicious-name/show-in-blog', 60, 'inline-rss-delicious.xslt');
   3. ?>

   Of course “your-delicious-name” needs to be replaced.

   Download: inline-rss-delicious.xslt

3. Finally there is a list of my upcoming events, including microformatted semantic information. The XSLT is a little longer, but not really complicated. You just need to replace the upcoming ID with your own.

   1. <?php inlineRSS(
   2. 'upcoming',
'http://upcoming.yahoo.com/ syndicate/v2/ my_events/ 123456', 60, 'inline-rss-upcoming.xslt');
   3. ?>

   Download: inline-rss-upcoming.xslt

I’d like to point out that this is certainly not the only, and perhaps not even the best way to implement feeds into your site, but it’s pretty convenient once you’ve installed inlineRSS.

Chris Heilmann approaches the issue with a client side plugin to distribute tasks from the server to the client. His JavaScript is insofar unobtrusive as the list of inline del.icio.us links is replaced with an external link to his del.icio.us category, but then you give away the responsibility that the list is accessible as well. That’s why I would prefer a server side solution.

Ed Eliot has written a script to create a very pretty server side del.icio.us badge that I highly recommend, but it’s not as universal as the inlineRSS plugin, and it’s not a WordPress plugin to begin with (the same applies to his neat SimpleRSS script). But both Chris’ and Ed’s solutions are decent alternatives to take into consideration.

Parsing JavaScript freezes the browser. Therefore put CSS in the head and JavaScript near to the </body> so that it is parsed when the page has been rendered.

The arch enemy of performance are HTTP requests. Many browsers still can’t handle more than two or four requests at a time. Keep the number of files down, your website will be faster.

There are several techniques with the aim to reduce the number of files:

1. “A single large file is fastest.” (Nate Koechley) That’s why Yahoo! apparently has such an amount of inline CSS. They found out browser caching is not as effective as they thought, in particular not on a user’s start page. So they deliver “inline” CSS. Actually writing inline CSS is a maintenance nightmare, but delivering CSS content inline doesn’t mean the files can’t have separate lives on the server: concatenate the files with a server side technique of your choice.

   Update: A couple of months later Nate explained that further: when your page is likely to be a user’s start page, caching plays a minor role, thus “inline” CSS is faster. Otherwise use external files, aggregate them, and make sure they are cached (see below).

2. Enforce caching. Another IE bug prevents image caching. Add the following to your .htaccess, httpd.conf or vhost.conf settings:

   1. <IfModule mod_expires.c>
   2. ExpiresActive On
   3. ExpiresByType image/jpg "access plus 1 day"
   4. ExpiresByType image/jpeg "access plus 1 day"
   5. ExpiresByType image/gif "access plus 1 day"
   6. ExpiresByType image/png "access plus 1 day"
   7. </IfModule>

3. Reduce the number of background images with techniques like CSS Sprites or Sliding Doors. Instead of four images of rounded corners you only need one and get the mouseover state for free! The green download button on mozilla.com is based on that technique. And Yahoo! uses CSS Sprites to combine a huge number of icons.

   

   Please note this approach is only for decorational background images that degrade gracefully. It’s not for img elements. Be careful when you use it for foreground images. And if text comes as a graphical representation, it can become inaccessible for screen reader users, zoom readers, or people with stylesheets switched off. Use real text instead.

   Also note changing the background-position causes IE6 to flicker, related to the caching bug above. To avoid it, simply add the following:

   1. <script type="text/javascript">
   2. try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
   3. </script>

4. Aggregate files. Ed Eliot wrote a nice script to merge JavaScript or CSS files, bonus respect for the advanced versioning and caching features.

   But remember the cases when it doesn’t make sense to merge CSS files: your IE bugfixes still belong in conditional comments. If you use the @import rule to filter antique browsers from getting advanced styles, you can’t drop it. And if you want to merge stylesheets for different media (e.g. print), make sure the code is enclosed in something like

   1. @media print {
   2. /* style sheet for print goes here */
   3. }

   In an updated version Ed added JSMin to strip comments and excess whitespace. JSMin works like a charm for JavaScript files. But it cuts a few space characters too much so that the syntax of CSS selectors changes therefore for now I have abandoned the idea to compress them too. See Jens Meiert’s comment below for a recommendation to minimize CSS.

   His original code requires the C version of JSMin with PHP safe_mode turned off. If you prefer a pure PHP version, get the PHP version of JSMin and my adapted version of the script.

I’m still in awe how fast one of my own websites became! Thanks to the guys at Yahoo! for the inspiration and for most of the research this article is based upon. Even JSMin was written by an employee of Yahoo! Speaking about Yahoo! employees: Chris, I hope there are still enough topics for your Vitamin article. I wanted to write about performance anyway, and to my surprise I read yesterday that you have similar plans. See ya in Paris.