HTML 5 Video Downloading January 29th, 2010

The new HTML 5 video feature being used in capable browsers like Google Chrome is purely awesome. It amazes me that a feature this new works so well, although it does have some quirks, it’s still better than Adobe’s Flash player, and it’s improvement isn’t bottlenecked by Adobe or any single entity. I chuckle knowing that Adobe has just recently began to address the concept of hardware acceleration in this arena, and luckily they are too late – because we hate Flash video. It was used as the tool it was, and the web will now abandon it.

This is open source  in motion. If Chrome, Webkit, FFMpeg, and various other projects where closed source, we’d be moving along at the rate of molasses, like we did with Adobe’s Flash player, IE, and other proprietary software.

With that praise, there are some interesting holes, and in time they will be filled correctly. Right now the biggest would easily be how HTML 5 video warrants videos going full-screen. There are security and usability land mines that must be dodged, such as allowing web pages to enter this mode without the users consent. While I want the feature right now, I don’t want to play API hopscotch like Adobe did, so I understand some delay in this area.

I also have a growing interest in editing video, which you can’t do on YouTube directly. Somewhere you’ll have to download that video. In the past I’ve used FireFox extensions that do some voodoo to rip the FLV or MP4 stream out, but now that we’re using HTML 5 video – it’s just a file. Without any extensions here is a way to save YouTube videos in Chrome:

  1. Go to http://www.youtube.com/html5 and make sure you’re in the HTML 5 beta. You can undo this if you want later.
  2. View the page of the video, like this: http://www.youtube.com/watch?v=Y3lzd9yJP9Q (ACTA debate)
  3. Right click the video and choose Inspect Element.
  4. Double click the div element below the one that is selected. It will have class="video-content-loading". This will expand that element.
  5. Click the link in the src element of the video tag.

If the video opens a tab, then you’ll want to change your Chrome settings on how it views/downloads that file. For me it started downloading a 300 mB MP4 file, which was throttled at about 96 kB per second.  It’s nice to have this rather simple workaround, but we can do better!

I’ve never developed Chrome extensions before, but getting started was easy. Having done some FireFox extensions, I would say this is much easier and has a lower barrier of entry. The extension I’m working on is called html5-video-dl and simply puts a button puts the video file URL into the download manager. Browsers that support HTML 5 video will probably do this on their own in the near future. The extension is being tested, packaged, and submitted to the repository. It should be available, and I’ll have a link so you can install it shortly.

Nicer HTML Forms in Less Time September 7th, 2009

We just discovered JotForm – an online tool for making and editing HTML forms. Most of the abstractions we have for forms are on the back-end, so we end up writing boring form code manually. Not anymore. Now we can create nice looking forms during development!

Faster Pages by Making Less Requests with Diet HTTP August 23rd, 2009

We’ve been cooking up a new project called Diet HTTP, which are designed for use with PHP with support for Smarty. The idea here is to cut down on HTTP requests for .css and .js by serving the files in bundles instead of individually. This will improve your page load time by:

  • Cutting down on HTTP requests, which are limited to 2 per domain. If you know your front page will require 10 CSS files for the different components or widgets, then just serve it as one single request.
  • Lower total size of files due to increased compression dictionary. For instance, if a CSS property is used twice it will likely reference the dictionary second time. (Compare to making a tar.gz of all your cs/js files to just zipping them)
  • “Bundles” will stay cached on the client and each bundle is a unique ID. Areas that have different functionality on your site will require different bundles of stylesheets.
  • Minifies your Javascript and CSS (or uses minified files), but doesn’t alter any of your files. (Keeps a cache)

Basically bandwidth is better spent just transmitting the files you will likely need at a later time. A good example is with stylesheets. Most pages have a base stylesheet that gets applied to every page, let’s say that’s 15 KB. Let’s say the user navigates to another page, but they won’t have to download that base stylesheet again since it’s likely cached, but they will have to download the new stylesheet for things specific to that page. The idea is to create a “bundle” of stylesheets that should be loaded together, so they won’t have to load another until they navigate to some drastically different area.

The same concept is used for Javascript being served, although the impact is much greater. A common site will easily tip the scales at 150 KB of scripts before being optimized.

We’ll be making the Diet framework available under the LGPL license. While it will be part of our Twig framework, we think it’s important for it to be easy to separate.

CSS Sprites: HTTP Traffic and Compression Ratios August 9th, 2009

I’m kinda disappointed in the web development community for being such a lumbering beast. New ideas and methods come out regularly that are proven to work great, but often times we fail to adapt if there isn’t a lot of external pressure.

CSS Sprites, simply put, are a win-win. Steve Souders explains this well in his High Performance Web Sites: 14 Rules for Faster Pages on YUI Theater. I think the most critical element here is that it significantly cuts down on HTTP requests, which are the serious bottleneck due to a standard limit of 2 per unique domain name.

A common complaint about this method is that combining all the images into a larger one creates a “waste of space”. Indeed there will be small gaps between your images, however:

  • You should be using PNG (8-bit if you can) for this image. These image formats use lossless compression, and long contiguous areas of empty space will be compressed so well it won’t affect the size of the resulting file.
  • Multiple images inside a PNG-8 will share the same palette and may reduce the file size. Before compression this is about 0.7 KB per image. Creating just a 3×3 grid of CSS sprites this yields 20KB of savings.
  • The compression dictionary will be much better with multiple images. With a single 16×16 icon there likely isn’t many data patterns that can be used to reduce the size of the file. With multiple images you’re compression ratio will become higher because there is more similarities to take advantage of in the image.

Cutting down on file size is always nice, but really it’s the fact that you’ll be making much less HTTP requests to the server. Anyone using Firebug will notice that most of the time is spent establishing a connection to the server. This is because many servers have a limitation on concurrent HTTP transactions.

Don’t forget to put different types of content on different sub-domains if you have that option. Stylesheets, scripts, and images can all be on separate domains, although it can be tedious to get stylesheets and images on separate domains since you’ll lose relative pathing.

Just let IE6 Rest In Pieces August 7th, 2009

It’s 2009 and I think it’s pretty safe to say that anyone who can read probably hates Internet Explorer 6.0. Making sites in IE6 is a pain, and requires useless knowledge specific to this time vampire of a web browser. Most sites are failing to provide any kind of reliable experience within IE6, and Google has basically dropped it from their list of supported browsers for complex applications like GMail.

There have also been a website created to promote the stoppage of IE6 and moving forward to anything else. I’m not going to use any version of Internet Explorer any time soon (except for testing), but I’ve had pretty good luck getting sites to work without issue in IE7 and IE8.

What are we missing by catering to the IE6 crowd?

  • Alpha transparent PNG images. This allows sites to create images that blend over one another, without having to create convoluted images stacked on a background color.
  • A consistent and sane display model. IE7 won’t be passing Acid 2 any time soon, but it’s leagues better than it’s little brother.
  • Legitimate CSS stlying. Right now any site that wants to work in IE6 has to use all kinds of hacks that work against the very concept of the CSS language.