After looking into ways to call the YouTube mp4-file from within a Video for Everybody html-block (which is not possible, Google protects raw video-files using what seems to be a session-based hash that has to be provided in the URL), I decided to take another (dirty) approach; faking it!

The solution is entirely javascript-based and is as un-elegant as it is simple; create a html-file with a script include of http://futtta.be/newTube/newTube.js and a div with “id=newTube” containing a link to a YouTube-page and the script automagically takes care of the rest. Check out http://futtta.be/newTube/ to see it in action.

The result is an embedded YouTube player which will display the HTML5-version if you’re running a browser which supports mp4/h264 playback (i.e. a recent version of Chrome or Safari) and if you enrolled in the beta. If either of these preconditions aren’t met, you’ll just see the plain old Flash-player.

Don’t get your hopes up, in reality newTube is probably pretty useless (for reasons I’ll get into in a follow-up post, when I have some time to spare that is). You’ll have to wait for someone (YouTube, Dailymotion, Vimeo, … are you listening?) to offer real embeddable html5-video (with support for both mp4/h264 and and ogg/theora).

But I did have fun creating the very first html5-capable embedded YouTube-player

Possibly related twitterless twaddle:

• Firefox 3.5 and tinyvid.tv do Ogg/Theora
• Google loves html5 (in Android 2.0)
• Bridging the gap between html5 and Gears

Enabling the “enhanced privacy” option just changes the URL in the embed code from youtube.com to youtube-nocookie.com;

<object width="560" height="340"><param name="movie" value="http://www.youtube-nocookie.com/v/FuGJfVAgiTM&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/FuGJfVAgiTM&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

The change has no impact whatsoever on the user experience, so I immediately tweaked the code of the Smart YouTube Wordpress plugin on my server and I asked the developer to add the option to his plugin as well.

Yet another small step in the fight against Google’s omniscience!

Possibly related twitterless twaddle:

• Mozilla rethinking extensions with Jetpack
• Firefox 3.5 and tinyvid.tv do Ogg/Theora
• Embedding YouTube HTML5-video with newTube

Apparently the Add-to-Any Wordpress-plugin was initiating the call:

1. add-to-any requests http://static.addtoany.com/menu/page.js (which is rather big but gzipped & cache-able)
2. page.js in turn contains tracking (near the end of the file), by requesting an 1X1 pixel image at http://map.media6degrees.com/orbserv/hbpix?pixId=2869&curl=<encoded URL of page>
3. media6degrees then sends the pixel and … sets multiple cookies in the process
   

And what’s media6degrees business you ask? Maybe they’re just providing the add-to-any author with statistics? Well, not exactly. This is what media6degrees writes on their website: “We deliver scalable custom audiences to major marketers by utilizing the online connections of their consumers.” So by using add-to-any, you’re providing media6degrees with data about your site’s visitors, which they can use to sell targeted communication to their customers.

If visitors of small-time blogs like mine would be the only ones affected by this, the damage would be limited. But add-to-any is also implemented on large local news-outlets such as deredactie.be or De Standaard Online and no doubt on some big international sites as well. Somehow I doubt those organizations know they’re feeding their visitors to media6degrees and I bet some of them would even strongly disagree.

I’m not happy about this, that much is clear. Add-to-any offers great functionality, but:

• it adds unneeded requests to my page, causing the page to finish loading later (dns-request + http-request)
• it enrolls my site visitors in a targeted communication platform without anyone knowing (or agreeing)
• none of this is communicated on the add-to-any website or on the add-to-any Wordpress plugin page

I mailed the author about this earlier this week (when i didn’t even know about media6degrees tracking cookies yet), but got no feedback up until now and I logged an issue on the wordpress.org support forum as well. And I decided to pull the plug on add-to-any off course, replacing it with sociable, making my blog render yet another millisecond faster, while at the same time protecting my visitors from this sneaky behavioral tracking by add-to-any and media6degrees.

Possibly related twitterless twaddle:

• Enhanced privacy for embedded YouTube
• blog.futtta.be going mobile with WPtouch
• Invitation to comment: dofollow

Flash isn’t evil

Some people seemed all too happy to dismiss my post as being plain old Flash-bashing. Sorry to disappoint you, but I”m not saying Flash is evil or that it will (or should) disappear altogether. Next correction: I do have Flash player installed and in general I do know if a application is made in Flash or not. Heck, the web has been my job for more than 10 years now and Flash has been a point of interest for quite some time already. And yes, there indeed are innovative web applications and games that are build in Flash. That being said, I do think (because of accessibility, SEO and some more philosophical reasons) it’s best to avoid using Flash to develop a site’s core functionality if the same can be achieved with non-propriety, standard web technology.

It’s not about Flash vs HTML5

The comments on last week’s blogpost seemed to focus very much on the individual merits (or lack thereof) of HTML5, CSS3 or Canvas, as if these are islands with no history and no connections to the web mainland. This is, off course, wrong; these “new” technologies just happen to be the most recent evolutions of the core components of the rapidly evolving ecosystem that is the “open web”. Moreover, with HTML, CSS and Javascript being the brick and mortar, libraries such as JQuery, Dojo and YUI are the “prefab” building blocks of open web development, offering plug&play components to efficiently build cross-browser rich web interfaces. So the discussion is not about Flash vs HTML5, but about the choice between Flash and the powerful “open web technology stack”.

about:evolution

“The only constant is change” and that’s all the more valid on the web. Flash has an important role to play in this respect, having pushed the boundaries of  web-based UI’s for many years. But as some of the cutting-edge features that once were only available in Flash, can now be created more efficiently using non-propriety technology, there’s a shift towards the use of those open web components (e.g. the Flash carousel on National Geographic website that was shown in the Adobe video from my previous post has been replaced by a JQuery implementation).

I believe (and that’s what the previous post was about) this trend will continue in 2010 because of features of HTML5, CSS3, canvas, … becoming available to a wider audience either natively (in new browsers) or through libraries that provide cross-browser compatible implementations. And yes, I’m afraid that in my book that means Flash will become less relevant (“irrelevant” in my previous post being an obvious hyperbole).

Loose ends & examples

• The <video> codec problems Serge fears can -and should- be easily hidden from end-users (as Apple does for example). Moreover the patent-related codec-issue will, I predict, be solved in 2010 with Google acquiring On2 Technologies and putting at some (if not all) of the codecs (VP3 was the basis of Theora, VP6 is in Flash 8 Video and JavaFX) in the public domain
• <Canvas> is already in the wild and doing just fine, thanks for asking Stefan. Major webapps with great graphical UI’s such as 280slides, Mindmeister, Bespin, Google Maps and Yahoo Pipes depend on it. Cufon, JQuery visualize and Dojo GFX use it as well and yes, Canvas can be implemented cross-browser (even in IE6) thanks to the explorercanvas library (and with Microsoft actively participating in the discussions about the canvas-spec, one could expect MS to one day release a browser that has native canvas-support)
• Despite great efforts by Adobe, Flash on the mobile web (i.e. in a browser, non-browser implementations are irrelevant in the discussion about “open web vs flash”) remains almost non-existent. The fact that Apple continues to refuse Flash for the iPhone only makes this worse, due to the seemingly untouchable  “game-changer” status of their phone and due to the fact that more than 60% of all mobile pageviews originate from their mobile devices.

To sum it all up: when Adobe Flash evangelist Serge writes “Flash Player has it’s place on the web today and in the future” I can only agree. But I’ll bet you that place in the future will be less prominent than the one it holds today.

Possibly related twitterless twaddle:

• 2010: the year Flash became irrelevant
• Embedding YouTube HTML5-video with newTube
• WebTech news (august 2009)

Open web moving in, fast

Remember the days when everybody wanted to spice up otherwise dull websites with “a flash splash page” and “flash menu’s”? Now menu’s are built in accessible, SEO-friendly HTML once again, using CSS to add style and even behavior, adding some Javascript if magic dust is required . And splash pages, well, those were pretty useless to begin with. Adobe Flash’s stronghold now is video playback and animation, but they’re bound to eventually lose that battle as well.

For starters; video (and audio) on the web doesn’t have to be based on a plugin any more. Firefox, Safari and Chrome have built-in html5 audio- and video-playback capabilities and several video-sites are already experimenting with those native browser multimedia-features. True, there’s still that darn codec-problem, but I bet you that’ll get solved in 2010 (clue; Google is negotiating the acquisition of video codec specialists On2 Technologies).

On the animation-front things are moving at such a fast pace, I even need a bulleted list;

• Safari has great CSS animations, transforms and transitions (and Mobile Safari has even such goodies), many of which are in the process of being added to the CSS3-specs, with support for CSS transitions and transforms being made available in development builds of Firefox 3.7 and Opera 10.5.
• HTML5’s canvas (cross-browser javascript-able 2D bitmap-based graphics) is gaining a lot of momentum. Check out the applications and games on http://www.canvasdemos.com/ to see just how much can be accomplished now, in today’s browsers (really, go check out those demo’s, some are mind-boggling)
• Both Firefox 3.7 (on Windows) and Internet Explorer 9 are expected to ship with Direct2D- and DirectWrite-based hardware-accelerated web page rendering (with a huge performance boost for e.g. SVG and web fonts, with canvas expected to benefit as well).
• Browser-makers are gearing up support for WebGL, a canvas-based open standard for cross-browser 3D graphics, with Firefox 3.7 expected to be the first browser to support the spec. Check out glge.org for a javascript library that takes advantage of WebGL. The site also features a demo of a Blender-created 3D world exported to WebGL.

Mobile; the Flash-less revolution

There’s no Flash on the iPhone. It wasn’t there at launch, back in 2007 and -despite me thinking it would arrive in 2009- it’s still not there. This decision is said to be Steve Jobs’, who in 2008 stated that a full-fledged version of Flash “performs too slow to be useful“. And it seems as though the turtlenecked CEO was right all along; on one hand the mobile web boomed thanks to the iPhone browser and on the other hand Adobe is still struggling to provide a decent mobile Flash experience, despite huge efforts in 2009. The fact is there’s no Flash on the booming mobile web, no-one seems to miss it much and it doesn’t look like that will change any time soon.

Adobe’s answer; mobile banners & deploy to Appstore

So with a Flash-less mobile web and with strong browser-native competition for both multimedia and graphics on the “normal” web, how does Adobe see it’s future? Well, they plan to roll out “iPhone packager for Flash” in CS5, allowing any Flash developer to publish to the AppStore, but there’s still no news about in-browser Flash on the iPhone.

For non-Apple devices, Adobe is boasting a preview version of Flash 10.1 in a mobile browser (the Android 2.0 browser on Google Nexus One in this case) with this promo video;

I don’t know about you, but somehow a sub-par game, web video and banners don’t convince that Flash has a bright future ahead. Not on mobile and maybe even not on the open web as it’s shaping up to be.

But maybe you think Flash will remain in the spotlights despite all of this? Why? Let us know in the comments!

Possibly related twitterless twaddle:

• Flash isn’t evil, but …
• WebTech news (august 2009)
• Firefox 3.5 and tinyvid.tv do Ogg/Theora

That’s the bad news, but let me share some good news with you as well; you can do cross-browser persistent data storage right here, right now! All you need to build a html5 webdb-alternative is old-fashioned javascript arrays and objects and related functions, some json and last but not least Paul Duncan’s persistjs (don’t download it there though, use the more recent version in the repository instead), a little javascript library that goes a long way to provide precious cross-browser persistent storage.

Simplified, your offline-enabled webapp would have to;

1. store data in an array (or in objects in an array)
2. do CRUD using your standard javascript functions (you could turn to something like jlinq to do more advanced things)
3. use JSON.stringify (native or from json2.js) to turn the ‘repository’ into a string
4. store the resulting JSON-string with persistjs’s store.set
5. close tab or browser
6. retrieve JSON-string when user returns with store.get
   
7. use JSON.parse to turn the string into an array
8. go back to step (2)

As code is better then a numbered list, I’ve created TrappistDB, a -very simple- demo that can do CRUD on a small persistent dataset of beer Trappist-related information.

So there you have it, basic cross-browser (*) persistent data storage without html5 webdb. Just sprinkle some appcache-magic (adding Google Gears LocalServer-support is trivial) on top to store html, js, css, … in your browser and you have a fully offline-enabled webapp.

(*) tested successfully in Firefox 3.6b5, Safari 4.0.3, Chrome 3.0.195.38, IE8 and MSIE6 (with and without Gears), IE7, the Android 1.5 browser on my HTC Hero and in iPhone’s Mobile Safari. I’ve got some weird bug in Opera 10.10 that I can’t seem to iron out though, but feel free to tell me what stupid mistake I made.

Possibly related twitterless twaddle:

• Chrome, Opera to support html5 webdb, FF & IE won’t
• HTML5 offline webapps vs Google Gears Localserver
• Bridging the gap between html5 and Gears

Tiny Tiny RSS (or “tt-rss” for short) is an open source web application written in PHP with a PostgreSQL or MySQL database. The webapp is AJAX-based, multi-user and is offline-enabled using Google Gears (you can check out a demo here). There’s also a mobile version, a (deprecated) XML-RPC API and a brand new experimental JSON-API, which I’m playing around with, using XUI to write a minimal mobile version of my own.

For those who are not able to install and configure tt-rss or who don’t want to burden their server with it, developer Andrew Dolgov put up a hosted version (thanks Andrew!) where currently 8 more users can register.

After having switched about a week ago, I find I barely miss Google Reader, although tt-rss still feels a little rough around the edges at times. The only real limitation is that shared items (‘published’ in tt-rss) off course aren’t automagically shared with your Google friends. I now automatically import my tt-rss published articles and manually share those every few days in Reader. Because I wouldn’t want to disappoint my Google friends, now would I?

Possibly related twitterless twaddle:

• How to exclude blogposts from your feed
• Facebook mobile websites face-off
• Facebook voor lamzakken (en het gevaar van twitterish)

Access to this page is denied because it is referenced in a central directory of offending pages and sites and has been categorised as “Pornography”.

This ruthless diagnosis was confirmed by the online SmartFilter query application so I mailed sites@mcafee.com to warn them about the obvious mis-categorization. Kyoko from the McAfee Customer Response Team replied less then half a day later, confirming the categorization as porn was a mistake and that this blog would be reallocated to the (slightly more boring) “Technical/Business Forums”-category which, one would presume, will stand a much better chance of not being blocked by concerned corporate security officers.

Problem solved! But this does bring about some important questions about SmartFilter and similar content-filtering software (FortiGuard, ContentWatch, …);

• How does a site get tagged as porn when it clearly isn’t?
• What process is in place for categorization? Is there some kind of quality control?
• As (mis-)categorization can have a huge impact on visits to a website (and so in some cases on money earned) , shouldn’t McAfee (and others) give the owners of those sites a heads-up one way or the other?

Possibly related twitterless twaddle:

• How to crash Firefox with FoxyProxy
• Warning: your computer might be infected!
• Google Webmaster Tools Irony

While we’re all Google fanboys one way or the other and while the idea of switching from “Do no Evil Google” to “Monopolist-Micro$oft” can be a little bit unnerving, there is in my opinion reason to be concerned with Schmidts’ quote. My main problem is with this claim;

If you have something that you don’t want anyone to know, maybe you shouldn’t be doing it in the first place.

I don’t know about you, but to me Schmidt seems to imply that if I require privacy, that must mean that I have something to hide which is at least unpleasant and probably even outright illegal. If one accepts this premise, requiring (or enforcing, by means of encryption or anonymizers) privacy in itself is an indication of guilt?

Given that Google has too much data about me (being the avid Google-user I am) and given the flawed reasoning of Google’s CEO regarding respect for my privacy, I cannot but agree with Asa Dotzler. It is time to rethink my use of Google applications, although I’m not switching to Microsoft alternatives just yet. The general idea is simple: stop putting all my eggs in one basket, instead fragmenting my information across multiple independent organizations, hoping that privacy-breaching data-mining will be a bit less efficient that way.

I’m still looking into alternatives for most Google web applications (Serge is right off course; “with microsoft it’s easy, you can switch to apple or linux – the problem with google is that their stuff just works“), but for search I’ve decided to switch to scroogle.org. Scroogle is a not-for-profit secure (as in https) cookie-less search that uses Google (the irony). The site is operated by Daniel Brandt, the almost anonymous weirdo who’s also behind google-watch and wikipedia-watch.

To make sure my Google-friendly browser doesn’t accidentally direct me to Google search, I changed the following things in Firefox:

• On my “bookmarks toolbar” replace the Google bookmark with a Scroogle one
• Add “Scroogle SSL” from the Mycroft search engine plugin site and move it to the top of the “search engines” list
• And finally to make sure searches from the “awesome bar” don’t direct me to Google either, in about:config I changed the value of “keyword.URL” into “https://ssl.scroogle.org/cgi-bin/nbbwssl.cgi?q=”

So what Google property should I replace next and more importantly, what with? Any suggestions?

Possibly related twitterless twaddle:

• Switching from Google Reader to Tiny Tiny RSS
• Google Webmaster Tools Irony
• 5 reasons why the NMBS should have an API

That’s right, I really should gzip-compress those javascript-resources! Google, please give me access to your servers so I can fix this immediately!

Possibly related twitterless twaddle:

• Mozilla rethinking extensions with Jetpack
• Obliterating your content with Google Wave
• McAfee SmartFilter: you’re looking at porn