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);

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

No more jsonp for Google geocoding webservice?

I needed to do some reverse geocoding in a javascript webapp. The Google Maps API worked flawlessly, but it seemed overkill to load all that javascript just to do one lousy reverse geocoding lookup (esp. on a mobile device, my target platform).  I searched some more and found the Google geocoding webservice, which is invoked with a simple HTTP GET request and returns the response in JSON. Version 2 of this service works great, as you can specify a callback-function to do jsonp (a simple method to allow for cross domain ajax requests),
This example request for v2, http://maps.google.com/maps/geo?q=51,4&sensor=false&output=json&callback=parseme, results in a response containing a call to your own “parseme”-function, with the json-object as the payload;

parseme && parseme( {
"name": "51,4",
"Status": {
"code": 200,
"request": "geocode"
},
"Placemark": [ {
"id": "p1",
"address": "Brukkelen 191, 9200 Dendermonde, Belgium",
...
]})

But a month ago Google announced a new version of their geocoding webservice and the documentation for V2 mentioned that it was deprecated in favor of the Geocoding V3 Web Service. so I switched to the new API, only to discover that callbacks aren’t supported any more.
An example request for v3 http://maps.google.com/maps/api/geocode/json?latlng=51,4&sensor=false&callback=parseme results in nothing but the javascript-object:

{
"status": "OK",
"results": [ {
"types": [ "street_address" ],
"formatted_address": "Brukkelen 191, 9200 Dendermonde, Belgium",
...
]})

And that, my dear fellow travellers, sucks big time. JSON without the P means we’re back to useless proxy-scripts on our servers. So until Google lets Jason pee (sorry folks, I just had to write this) in the V3 geocoding webservice, I’ll continue using the deprecated V2 with sweet -but undocumented- callback!

As found on the web (April 7th)

generic (feed #49)
generic (feed #49)
frank posted Flash Demos.
generic (feed #50)
generic (feed #49)
generic (feed #49)
facebook (feed #40)
frank Frank zag 4 facebook-vriendjes waarvan 3 oud-collega’s op een project komen pitchen, leuk! :-)..
generic (feed #50)
generic (feed #49)
generic (feed #49)
generic (feed #50)
generic (feed #49)
generic (feed #49)
generic (feed #50)
generic (feed #50)
generic (feed #50)
generic (feed #50)
generic (feed #50)
generic (feed #49)
generic (feed #49)
facebook (feed #40)
frank Frank kan geen group & friend-requests meer aanvaarden, nog mensen?.
blog (feed #46)
frank published WordPress galore.
generic (feed #49)
frank posted Hell.
youtube (feed #51)
frank liked 3 videos.
facebook (feed #40)
frank Frank moet echt niet weten waar ge zijt, maar wat ge doet of denkt en klikt dan ook op *hide foursquare*..

WordPress galore: plugin bugs, android app, json-api & wp 3.0

Some random WordPress-related thingies I’ve been looking into;

  • I bumped into a weird bug in css-js-booster which caused error-messages like
    <! – Booster had a problems finding wp-content/
    plugins/css-js-booster/../../../../../../
    3f540bbd99f8ebecb73880a685db76ae_plain.css – >
    

    to appear in the html-source, although all CSS seemed to be processed. The problem was caused by PHP’s safe_mode and got fixed in 0.2.2, thanks der Schepp!

  • A few days ago my entire WordPress-blog returned empty pages, the admin-section included. Turns out that this “white screen of death” is a known issue with the WP super-cache plugin when combined with PHP APC (2 of the main components of my “Speed up WordPress“-post). As this only occurs rarely, I’ll stick to restarting Apache for now (I don’t want to switch back to eAccelerator) but I hope the APC and WP Super-Cache teams will look into this further.
  • After ditching Google Analytics, I looked into how WordPress stats are collected. Indeed, the script is sourced at the end of the HTML, thus slowing down the rendering of the page.  Let’s hope someone at Auttomatic reads Steve Soulders’ very interesting blogposts on “Performance of 3rd Party Content” and decides it indeed is time follow Google Analytics’ example and switch to asynchronous loading of the WordPress stats Javascript.
  • I installed the WordPress Android application and played around with it a bit. I don’t think I’ll be posting with it any time soon; writing on a small touch-device is a hassle, there’s no such thing as a rich HTML editor and  updating pages and especially posts or comments is very slow (because of the incredible overhead and complexity of the xml-rpc API?). Still, nice to see the WordPress-icon on my HTC Hero 😉
  • Thinking about that clumsy WordPress xml-rpc API (which I experimented with approx. 1 year ago), I started looking for a plugin that provides a rest/json api. JSON API does just that and it has great potential, but it might not be suited for public-facing WordPress installations just yet, as it allows unauthenticated users to create new posts. So you might want to wait for authentication to be added to JSON API before installing it?
  • And I just read that the first beta of WordPress 3.0 was released; wordpress and wordpress.MU get merged, menu management and a new theme are but a few of the new features. Wouldn’t is be great if functionality/ ideas from wp-super-cache, css-js-booster and json-api would be added as well?