Tag Archives: html5

You gotta love HTML5′s input types and patterns

While working on updates of the admin-screen of Autoptimize, I wanted some checks on the URL a user can enter for a CDN. At first I thought I’d do some jQuery-based validation but then I came accross a page (on StackOverflow I guess) that mentioned the new input types and the use of validation patterns, so now I just have this beauty in place;

<input type="url" pattern="^(https?:)?\/\/([\da-z\.-]+)\.([\da-z\.]{2,6})([\/\w \.-]*)*\/?$" />

And to make sure the user gets a visual indication if the string isn’t a valid URL (according to the regex) there’s this CSS oneliner:

input[type=url]:invalid {color: red; border-color:red;}

The nice thing about this is that it is pretty backwards compatible;

  1. browsers that do not know type=”url” will just consider it type=”text” and can still enforce the pattern (if supported).
  2. browsers who support type=”url” but not the pattern, will do more basic validation.

And for browsers that do not support type=”url” nor patterns, there are multiple polyfills available that force older browsers to comply as well. But who cares about older browsers, right?

Multi-lingual WordPress the Easy Way

Imagine you run WordPress with English as default language, but some posts are in another language. Dutch, maybe? Up until a couple of months ago, you wouldn’t really notice anything about that setup. Google might be slightly confused, but us bloggers aren’t really into SEO anyhow, no? But with the release Safari 5.1, Firefox 16 and especially Internet Explorer 10, support for CSS Hyphenation became (somewhat) widely available and if your theme (WordPress TwentyTwelve or its performance-optimized 2012.FFWD child theme for example) has support for in the CSS, your hyphenation would yield weird results because of the fact that the browser uses the language attribute in the HTML to decide which dictionary to use.

The solution, if your theme is HTML5, is to add the lang-attribute to the article-tag if you have something to check the language with. In my case I just had to copy TwentyTwelve’s content.php and change line 11 into:

<article id="post-<?php the_ID(); ?>" <?php if (in_category('lang:nl')) { ?>lang="nl" <?php } ?><?php post_class(); ?>>

A real simple hack indeed; I check if the article has category “lang:nl” attached to it (which I already used) and set the language-attribute with the correct value if it does. Hyphenation now works for Dutch blogposts and I guess Google will be happier as well that way?

Firefox Mobile: the best mobile browser no-one uses

I’ve always enjoyed riding the Firefox-bandwagon and that hasn’t changed, even though Google Chrome seems to be the browser of choice amongst the cool kids nowadays. And if only because I’m a faithful guy, I’ve been running Firefox Mobile ever since I bought a Samsung Galaxy SII as well. Sure it doesn’t do Flash, but I’m not that Flash-inclined anyway.

Now, I haven’t met too many people that use Firefox Mobile and indeed when reading about mobile browsers, Firefox is rarely if ever mentioned. But what if I told you that Firefox Mobile is by far the best browser on mobile when taking performance, features and security into consideration?

I won’t beat around the bush, here’s the pretty objective data.

browserhardwareSunspiderv8 benchm.html5test score
Firefox Mobile 9bSamsung Galaxy SII1421.9ms832314
Android 2.3 browserSamsung Galaxy SII3454.4ms369177
Android 4 browserGoogle Galaxy Nexus1983ms1387230
Mobile SafariiPhone 4s2260.9ms368296
Opera Mobile 11.5Samsung Galaxy SII1699.9ms461285
Dolphin HD 7.2Samsung Galaxy sII3593.4ms318177

Some remarks:

  • the hardware is pretty comparable; all dual-core CPU’s and plenty of RAM.
  • higher is better, except for Sunspider which measures time (in microseconds).
  • I’ve got no screenshot or URL of the google v8 test results on my phone, but I’ll be glad to reproduce.
  • sunspider and v8 are javascript performance benchmarks.
  • html5test is an indication for support of “modern” browser features (html5, css3 and much more).
  • the features of the browser GUI arent’t measured byhtml5test, but I’m pretty pleased with Firefox Mobile in that respect as well; great tabbed browsing, plugins (including noscript!), sync-ing of all relevant data between desktops & mobile, …
  • I added Opera Mobile and Dolphin HD to the list. Opera’s not too shabby but not a winner either?

And last but not least; as Firefox Mobile isn’t native and since it’s on the same (crazy) rapid release cycle as the desktop-version, I consider it to be a lot more secure when compared to the slow evolving, rarely updated native browsers in Android and iOS.

My advice; if you’re an Android-user and you’ve got a recent handset or tablet, you really should consider switching to Firefox Mobile. It’s the best mobile browser no-one is using! Except for you?

WP YouTube Lyte 0.8.0 released

Just a quick note confirming the release of WP YouTube Lyte 0.8.0. As previously described, the main new feature is support for embedding YouTube playlists in a high-performance and accessible kind of way that is typical of this plugin.

While testing the new feature on different platforms I noticed the playlist-player only comes in Flash, so it does not work on iPads or iPhones. Or “does not work on them yet”, as YouTube’s Jeff Posnick confirmed that support for HTML5 video in the embedded playlist player is on their todo-list.

The plugin is multi-lingual, with the following languages supported:

  • English
  • Dutch
  • German
  • Slovenian
  • French (only the strings visible for visitors, not those in wp-admin)
  • Spanish (only those strings visible for visitors for now)

Corrections, extra translations, bug reports and feature requests are all welcome feedback, either in the comments here or via the contact page.

I hope you enjoy the new version!

Did Flash really become irrelevant in 2010?

Little over a year ago I must have been smoking some weird shit when writing that Flash would become irrelevant in 2010. Because after all, this is 2011 and there’s still plenty of Flash for Adobe aficionados to make a living and the famous html5 video codec issue hasn’t been fully sorted out yet either. So I was wrong, was I? Well, … not really!

Apple still stubbornly refuses Flash on the iPhone and more importantly the iPad, Microsoft’s Internet Explorer 9 joined the HTML5-crowd in full force and even Adobe is going HTML5 with support in Dreamweaver and in Illustrator and with a preview of Edge, “a tool for creating animation and transitions using the capabilities of HTML5″.

But is was only in December 2010 that I knew I was dead on with my prediction, when I overheard this conversation at work between a business colleague and a web development partner:

Business Colleague: I would like a personalized dashboard with some nice-looking charts in my web application.
Web Development Partner: No problem, we’ll do it in Flash!
Business Colleague: No, we want this to work on the iPad too!

The year technology-agnostic decision-making business people started telling suppliers not to use Flash, that was the year Flash became irrelevant and “the open web technology stack” (somewhat incorrectly marketed as HTML5) took over.

Firefox 4 beta007: the thunderball we’ve been waiting for

Although the final release of Firefox 4 has been postponed until the beginning of next year, the latest beta-iteration of our little browser-friend is a huge step forwards!

Up until beta6 a number of very nice features had already been added; tabs on top and grouped tabs, a new add-on manager, Firefox sync, lots of HTML5- and CSS3-features, support for the webm video codec, support for WebGL (3D on the canvas), hardware accelerated graphics, …

But despite all of these exiting changes, there was one elephant in the room; javascript speed. Chrome and Safari were miles ahead and even Opera and Microsoft IE9 were boosting important advances in that area. And that is where beta7 makes a huge step forward; Firefox 4 sports a new Javascript-engine and is now in the same league as Chrome and Safari even beating them in some tests and that speed difference is immediately obvious after upgrading from beta6 tot beta7.

So Firefox 4 is getting ready for prime-time; lots of great new features, fast and -in my experience- very stable. Guess it’s time to upgrade my lovely wife’s Firefox 3.6.x to the brand new 4 beta 7! I do hope she’ll find the location of the reload button though …

Embedding YouTube HTML5-video with newTube

With all the discussions about the place of Flash on the ever-evolving web and the excitement following Google’s announcement about YouTube going HTML5, one would almost forget that YouTube is only at the very start of their “open video” endeavor. The limitations of the current implementations are numerous; there’s no OGG (damn), no ads (yeah!) and no embedding either (damn) for example.

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 too high,  newTube is probably not as obvious as normal YouTube embeds (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 ;-)