The best method to download YouTube videos

I like to download lectures and presentations from YouTube so that I can play them back using VLC at 2x playback speed.

My favorite option for downloading is this YouTube video download GreaseMonkey script that adds a download button to the YouTube video page. It works in Chrome, and in Firefox with GreaseMonkey. This is vastly superior to the more-popular YouTube video save sites that require to you execute a sketchy Java applet.

Understanding WebKit composite layers and iOS Safari performance

I’ve made a video showing how Webkit handles animating of CSS3 transforms very differently from animating of CSS position (left, top) or margin. The are several different conditions that will trigger the browser to use a “composite layer” which minimizes repaints and allows for hardware-accelerated composting. The benefits are especially dramatic in iOS Safari.

This Chromium document explaining composite layers says that the following conditions all trigger a separate composite layer:

  • Layer has 3D or perspective transform CSS properties
  • Layer is used by video element using accelerated video decoding
  • Layer is used by a canvas element with a 3D context
  • Layer uses a CSS animation for its opacity or uses an animated webkit transform
  • Layer has a descendant that has a compositing layer
  • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)

See Rich Bradshaw’s awesome CSS3/Transforms page for some great examples.

Best time to end an eBay auction

I recently created an auction on eBay and needed to choose the most effective ending date and time for the auction.  Although I didn’t find any research that took into account the closing price, this post drew conclusions based on eBay site traffic stats.

  • Daily peak visitorship is between 8:00 PM eastern time and 10:00 PM pacific time.
  • Weekly peak visitorship is on Sunday evening. To match your listing to the weekly peak in order to maximize bidding, list so that your auction will close on a Sunday evening between 8:00 PM eastern time and 10:00 PM pacific time.

HTML5 DOM and CSS3 performance

I ran across an awesome presentation by Paul Irish discussing DOM and CSS3 performance issues:

The video:
The slides:
The blog post:

The top tips that were new to me:

New Firebug feature: console.timeStamp

Firebug recently added an awesome new API; console.timeStamp lets you to create named “events” in the Net panel:

This technique requires manual instrumentation and isn’t as detailed as the Timeline panel in Chrome/Safari or a heavy-weight tool like dynaTrace, but it’s a nice, simple, uncluttered view compared to those other tools.

I used it today on a machine where I couldn’t install dynaTrace, I’ll surely be using it again. Unfortunately it isn’t supported in Firefox 3.6 and older.

Amazon: $2 free MP3 downloads code CLOUDMP3

Get $2 of free credit towards Amazon MP3 downloads with code CLOUDMP3. Expires June 30, 2011, at 11:59 p.m. Pacific time. Limit one per customer.

My purchases for the last couple years have been through Amazon and not iTunes (slightly cheaper, MP3 imports more easily into conversion tools). Since Cloud Player, I find myself not even downloading purchased music because it’s so convenient to play from any computer. The Cloud Player page isn’t designed for iOS, but mostly works since it falls back to HTML5 audio. The interface is clunky when using mobile Safari (hint: two-finger scroll to scroll the list of songs), but I’m sure that problem will be solved.

HTML5 boilerplate

HTML5 Biolerplate (by Paul Irish of Modernizr fame) is a nice skeleton for starting new projects. The pieces I’m most interested in and have copied from are the CSS (reset and baseline), .htaccess (MIME types, cache settings, rewrites for pretty/canonical URLs), HTML skeleton (asynchronous Google Analytics, iOS directives and touch icons, IE conditional classes).

Even if you don’t have an immediate use for these things, it’s worth a peruse to become familiar with some of the more widespread browser compatibility and performance problems, and the popular techniques to solve them.

Optimal Apache compression and expire settings

Below are compression and expiration settings for Apache that I’ve found optimal for StepMania.  You can paste them into your .htaccess file.

  • Don’t mess with PHP’s ob_gzhandler.  The settings below enable compression at the Apache module level, are the cleanest way to handle compression of non-PHP types, and are better performing to boot.
  • If your PHP application has a option for compression (it’ll be using ob_gzhander), turn that off in favor of these settings.
  • Web-Sniffer is useful for testing whether your compression and cache-control settings are taking effect. It’s also useful for troubleshooting HTTP error responses that Firefox and Chrome hide with pretty error pages.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby

<IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType audio/x-wav "access plus 1 month"
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType video/mpeg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 month"
ExpiresByType video/x-ms-wmv "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType text/css "access plus 1 hour"
ExpiresByType text/javascript "access plus 1 hour"