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;
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:
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?
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.
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?
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!
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.
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-engineand 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 …
With all the discussions about the place of Flashon 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 😉
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).
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.
My 2nd prediction for 2010 (the first one being ‘offline is the new online‘): the glory days of Flash are over. The reason for this is twofold; the mobile web and the strong advances “open web” technology is making.
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 severalvideo-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;
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)
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!
store data in an array (or in objects in an array)
do CRUD using your standard javascript functions (you could turn to something like jlinq to do more advanced things)
use JSON.stringify (native or from json2.js) to turn the ‘repository’ into a string
store the resulting JSON-string with persistjs’s store.set
close tab or browser
retrieve JSON-string when user returns with store.get
use JSON.parse to turn the string into an array
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.
