Monthly Archives: April 2010

Lite YouTube embeds free for all!

It’s all nice and well to hammer out some code to create a lite YouTube embedded player, but as long as that embed-code can’t simply be copy/pasted from the YouTube-page, it’s all pretty theoretical, no?

Well here you are, a simple bookmarklet that will display the LYTE-code when you’re on a random YouTube video page:

Want this? Then just do this:

  1. drag this LYTE bookmarklet to your bookmarks toolbar
  2. go to a random youtube-video page
  3. click on the bookmark(let)
  4. copy/paste the LYTE code on top of the page into your html
  5. enjoy Lite YouTube Embeds (i.e. 17KB instead of 150KB with a normal embed) on your site!

Happy embedding!

As found on the web (April 28th)

generic (feed #50)
generic (feed #49)
generic (feed #49)
youtube (feed #51)
generic (feed #49)
blog (feed #46)
generic (feed #49)
generic (feed #49)
generic (feed #49)
generic (feed #49)
generic (feed #49)
generic (feed #49)
youtube (feed #51)
frank liked Kink-E79.

High performance YouTube embeds

It’s all about speed! I mean, you want your visitors to stick around, enjoying your content instead of waiting for stuff to download, no? And I bet you would love Google to consider your site quick, now that speed has been confirmed to have an impact on search ranking?

“High Performance web sites”-guru Steve Souders is doing incredible work studying the impact of 3rd party content -and especially javascript-based services such as analytics and bannering- on the performance of a web site.

An entirely different type of 3rd party content is Flash video, especially YouTube embeds, but there are a number of indicators that these indeed do impact performance as well:

  • opening a page with embedded YouTube can take some time when on dialup (or mobile data)
  • YouTube-heavy pages tend to slow down older computers (flashblock or adblock anyone?)
  • Facebook doesn’t really embed YouTube by default, but uses a placeholder with a thumbnail instead that is replaced by the embedded YouTube only when clicked
  • Google Webmaster Tools “Site Performance” seems to sometimes single out pages with YouTube embeds (e.g. stating that there is a DNS-resolution overhead)

Indeed, when testing this simple page with some text and 2 embedded YouTube clips on webpagetest.org, these were the main results (full results including nice graphs here):

  • (base) download complete: 0.356s for 2KB
  • start render: 0.426s
  • full page download complete: 3.005s for 315KB

There’s good and bad news in those figures. As could be expected the YouTube Flash embed doesn’t impact the rendering of the base page. But 2.6 seconds and 312KB just to display 2 video’s a visitor might not even bother to look at (I bet that the click-rate for embedded YouTube video is somewhere between 2 and 20%), that’s … sub-optimal?

So I threw some JavaScript at my computer to build an alternative to the default YouTube embed, the main goal being to build a Flash-less initial view with only a few lines of html/javascript which at some point people could copy/paste in their site just like they do now. And LYTE (Lite YouTube Embed) came into the world.

The main results when testing this LYTE-test-page on webpagetest.org (full results here):

  • (base) download complete: 0.324s for 4KB (which is marginally faster)
  • start render: 0.363s (again marginally faster)
  • full page download complete: 0.803s for 35KB (leaner, meaner and faster!)

The code that would have to be copy/pasted (multi-line for clarity):
<div class="lyte" id="gnDh6PqWqD8" style="width:480;height:385;"><noscript><a href="http://youtu.be/gnDh6PqWqD8">Watch on YouTube</a></noscript>
<script>(function(){d=document;if(!document.getElementById('lytescr')){lyte=d.createElement('script');lyte.async=true;lyte.id="lytescr";lyte.src="http://futtta.be/lyte/lyte.js";d.getElementsByTagName('head')[0].appendChild(lyte)}})();</script></div>

The nitty-gritty (do skip if you’re not inclined to get aroused by technical details): this code attaches (a minified version of) lyte.js to the page’s head. The real work is done in that javascript-file: get all divs with class-name “lyte” (with a hack for friggin’ IE inlined), use the videoid which is in the divs’ id to fetch the thumbnail and title from YouTube, display these in a fashion which is very YouTube-like and add an onclick eventhandler to replace the fake with a real player when clicked (and remove the eventhandler to clean things up).

So using LYTE you can embed YouTube in such a way that the amount of data, the total download time and the total rendering time are significantly lower, without loosing any functionality.

And this -to conclude this long post- is what LYTE looks like (soundtrack by Nôze – “Meet me in the toilet”, it’s Friday after all);

Nôze – Meet me in the toilet [VIDEO]

Watch this video on YouTube or on Easy Youtube.

As found on the web (April 21st)

generic (feed #49)
generic (feed #50)
generic (feed #50)
generic (feed #50)
generic (feed #49)
generic (feed #50)
blog (feed #46)
generic (feed #49)
generic (feed #49)
youtube (feed #51)
frank liked 2 videos.
generic (feed #50)
generic (feed #50)
generic (feed #49)
generic (feed #50)
generic (feed #49)
generic (feed #50)
generic (feed #49)
generic (feed #49)
generic (feed #50)
generic (feed #50)
generic (feed #49)
generic (feed #50)

Firefox Lorentz: Flash don’t crash here anymore

A couple of days ago I installed Lorentz, a beta version of Firefox. Lorentz is virtually identical to Firefox 3.6.3, except that it incorporates part of the work of the Electrolysis team. Their “Out-of-process plugins”-code lets Firefox-plugins (on Windows & Linux, they’re still working on Mac OSX according to the release notes) run in a separate process from the browser, meaning Flash (but also Silverlight or Quicktime) can’t crash Firefox any more.

This feature actually is long overdue, a substantial amount of Firefox crashes are indeed caused by Flash failing and Mozilla’s competitors (MS IE, Apple Safari and Google Chrome) already have similar (or even more exhaustive) crash-protection.

Once you’ve installed Lorentz (or Chrome or IE8 or Safari off course) you can safely visit http://flashcrash.dempsky.org/, which exploits a bug that was reported 19 months ago and which may still cause the most recent Flash-version (10.0.45.2) to crash. And if flashcrash doesn’t bring up the plugin-crash-dialog, you can always kill the “mozilla-runtime” process that hosts the plugins, just for kicks!

As found on the web (April 14th)

generic (feed #49)
generic (feed #49)
generic (feed #49)
generic (feed #49)
generic (feed #49)
generic (feed #49)
blog (feed #46)
generic (feed #49)
youtube (feed #51)
frank liked 3 videos.
generic (feed #49)
generic (feed #50)
generic (feed #49)
frank posted Palm take-over watch.
facebook (feed #40)
frank Frank heeft een koppig vliegende kip nog maar eens gekortwiekt. luisteren zal ze!.
generic (feed #50)
generic (feed #49)
frank posted Competitiveness.
generic (feed #50)
generic (feed #50)
generic (feed #49)
frank posted Palm is For Sale.
generic (feed #50)
generic (feed #49)
generic (feed #50)
generic (feed #49)
generic (feed #49)
blog (feed #46)
generic (feed #50)
generic (feed #50)
generic (feed #50)
youtube (feed #51)
generic (feed #50)
generic (feed #49)

Why I’m rooting for HTC to buy Palm

It seems like ages, but just one year ago I had very high hopes for the relaunch of Palm; the OS was based on Linux, the UI seemed great (multitasking done right from day 1) and their Mojo-framework would allow applications to be developed with nothing but html, css and javascript. But the Palm Pré and Pixi weren’t the big hit, Palm has been hemorrhaging cash for years and they are now actively looking to be bought.

Apperantly Lenevo, Huawai and ZTE have expressed interest, but I for one am especially rooting for HTC. They do great hardware (e.g. my old Qtek 9100, my current HTC Hero and Google’ Nexus One) and they have exprience with a multi-OS product line (Windows Mobile and Android). But most importantly; they have Sense UI!

Sense is the user interface that HTC puts on top of WinMo and Android, to provide users with good looking, easy to use home screens that feature widgets to display e.g. calender, mail, clock, weather, but also information from Facebook, Twitter and Flickr. WebOS could really help HTC broaden and deepen Sense; e.g. by porting the WebOS multitasking cards metaphor, Synergy (unified contact list, deeply integrating internal sources and social web) and the nifty notification system. And Mojo could (easily?) be ported to WinMo and Android as well, HTC could then open up Palm’s App Catalog for all HTC WebOS/Sense devices, allowing developers to create, publish and sell mobile applications for multiple operating systems!

Picture all of that and all of a sudden you’ll see a major player that has the hard- and software and the experience to challenge Apple at home and abroad and in court with great hardware and, thanks to WebOS, even greater software. Go HTC!

Hemorrhage