Yesterday I tweeted about The Procatinator, a web site that loads a random cat gif and music every time you click a button. Most people very just happy to get some damn good internets but one reply to me was sadly predictable:

@janl: @codepo8 please don’t link to flash BS.

Burn the witch! I dared to link to something that uses Flash. The same Pavlovian response happens every single time I embed a YouTube video into a blog post about HTML5. Flash is the enemy! How dare I fraternise with it?

Well, in the case of YouTube embeds, there is a reason: I was asked by quite a few people not to include my own hosted video files as they live in areas with slow connectivity and using the Flash embed gives them videos that are terrible quality, but viewable and skip/scan-able on their connections instead of downloading a relatively massive file.

Furthermore, the joke is on the people complaining about Flash YouTube videos, as I am using the iframe embed, which gives HTML5 video to those who opted into the HTML5 trial of YouTube. That someone who loves HTML5 that much that they need to complain everywhere it is isn’t used didn’t do that is unlikely. Or, more likely – they are trolls.

There is nothing “ironic” about using a tool that is widely used to talk about another techology, as eloquently explained in Jeffrey Zeldman’s rant on the subject.

But back to Procatinator. Procatinator is “Internet Whimsy” at its best.

It is there to make people laugh, waste a few minutes not answering emails angrily and has kittens and music. It already skirts on the illegal by using YouTube videos without showing them but playing them as music instead and the code shows that it was done as a fun project and nothing more. And you know what? That is fine. Important is the end result here, nobody gives a hoot about the technology used or the code quality. Nobody but us self-appointed defenders of the open.

If you want to reach as many people as possible, you use whatever works. This is why imgur is full of texts in JPGs without alternative text or text equivalents. These are easy to create and style and can be redistributed in every environment, including those that do not allow HTML like Facebook or Google+. Professional whimsy providers of the web of course also put up a text equivalent to get Google to index their site as a resource as Blame it on the voices shows.

Animated GIFs had a massive comeback last year. The reason is not that they are amazing quality or small in file size – the opposite is the case unless you really know what you are doing (pro-tip: perceptual colours, no dither, 10% lossy, drop those tween frames). The reason is that they are simple to produce and work everywhere that can display images.

So, Flash. Why is it not the enemy? It is closed and alien to the web, after all!

Without Flash, the web as a content distribution platform wouldn’t be where it is. There, I said it. And the reason is the Internet Whimsy we like to scoff about as “waste of time” and “amateur work”. Without Flash we wouldn’t have had Homestar runner, we wouldn’t have had Joe Cartoon and the famous Gerbil in a microwave, we wouldn’t have Weebl and Bob, we wouldn’t have played all the games on Newgrounds and many more.

I talked with this the last time I visited Rob, founder of b3ta.com and we chatted about my job. Rob is a producer of content, most of it Internet Whimsy but with a background of doing it professionally for professional content. And his main point was that Flash makes it damn easy to get something out there and it is all about that. The half-life of content on the web for him is much shorter than it is for me, the guy who cares about code and content quality above all. Using Flash and its tooling it is simple to create a quick animation with music and get it out there.

And this is what it boils down to: tooling! We shouldn’t complain about Flash being used, we should make sure we build tools that allows content makers to publish their work in open formats. Mozilla’s Webmaker initiative is all about that and Popcorn can be a great tool to make your first interactive open technology video using the familiar time-line interface of Flash. Even better, Adobe, the people behind Flash are working on tools to allow content creators to render them out as HTML5. If anybody knows what people who choose Flash need, it is them! Why don’t we as a self-appointed spokespeople of open tech promote and support these efforts instead of complaining about the use of Flash?

So what about Procatinator, does it really need Flash to work? Yes and no. Yesterday night I spent half an hour to create an HTML5 version of Procatinator using much simpler, plain JavaScript, CSS (using background-size instead of stretching the GIFs with jQuery) and using the YouTube IFRAME API and the YouTube Data API. I yet have to put in the permalinking option the real one has and the syncing is not as smooth as I don’t wait for the GIF to be loaded.

So hooray, Chris saved the day and opened what was closed! Rejoicing all around. The question we have to ask ourselves though is what we gained by that? The main reason why people complain about the use of Flash are:

• They have no Flash and don’t want it
• Accessibility concerns (in a lot of cases based on old information about Flash and assistive technology)
• It doesn’t work on iOS.

The latter being the real clincher. We are excited about our expensive Apple toys and are affronted if someone publishes their content in a format not digestible on our very closed platform. How dare they not support the thing “everybody has”?

Well, it turns out that the non-support in many cases is by design as iOS doesn’t make it easy to support it using open standards when it comes to audio and video.

In the case of Procatinator I told the makers that they could use the YouTube iframe API to ensure HTML5 support instead of a Flash dependency. Not so. The main issue is that Procatinator needs to start playing the song automatically, and in iOS any HTML5 media content needs to be activated by the user to start loading and playing. As the video in this case is not visible and just a background music provider and there is no “audio only” API for YouTube all my efforts didn’t make a difference. By design of the operating system our hands are tied. And, as developers, we should scream and complain about that – not about people using what works.

All in all, the big hurdles we need to jump when it comes to making the web open is not telling people off for using what they know. Our job is to provide the tools to make it the simple choice to use open technology and to create as many high-profile sites and products that point out that a lack of functionality is based on the platform not allowing it instead of the technology being insufficient.

What we have to avoid at all cost is bringing up a new dependency layer for end users. It is ridiculous to complain that Flash needs installing when we build “open HTML5 technology solutions” that only work in one browser or expect the end user to set a developer flag or download a nightly build. This is not about users being slow on the uptake, this is about us getting too excited about our toys. Let’s move our efforts and apply our knowledge to making it easy for people to use the open web. We are not in a position to demand anything from them, as if we do, we’ll lose them. Not to Flash, but to native technologies.

Discuss? Google+ thread and on Facebook

Today I played again with drag and drop and HTML5 canvas. The result is a tool to pick colours from images and create the corresponding CSS/HTML called Zoom and Pick

Here’s me explaining what it does in a screencast:

• Zoom and Pick to play with
• The above screencast on YouTube
• Zoom and Pick on the Mozilla Demo Studio
• Zoom and Pick on GitHub

I will follow this up with smaller demos of parts of the whole on MDN soon. The biggest fun part was creating the zoom functionality.

By request: if you want to comment on this, here is the Google+ post and the one onFacebook.

Criticism is a good thing. I am a fan of sensible disagreement and people challenging each other to think different about their work and change their attitudes after seeing a different point of view. Margaret Heffernan’s Dare to disagree TED talk is a great resource to watch if you wonder how that can work. This is what editing is about. A good editor can make a book or a movie much more than it is by challenging the author or maker to go further and think bigger.

Badly executed criticism however can scare, stifle and make people feel like a failure although all they might have done is a small mistake that can be easily rectified.

Good criticism takes time and effort. A good critic doesn’t only point out that something is flawed, instead it is important to explain what the flaws are, what their impact on the overall quality is and what could be done to improve. A bad critic flat out tells what should be done, believing in a subjective truth or way of working formed by the critic’s own environmental influences. That way the critic might be as far off the mark as the person criticized.

I just spent a few days at hack events helping people port their existing or build completely new apps. It was very insightful seeing a massive range of developers in different stages. I was most confused to see people who have very good ideas getting stuck at technical problems and when I showed some ideas and solutions being met with overwhelming thankfulness. When I asked these developers about their experiences in asking people I heard a lot of “Well, I am scared to ask as I don’t want to sound stupid online and people are quick to discard what you do as terrible”.

This saddens me. I, like most web developers I know, learned by looking at other people’s stuff and poking and changing it until it did what I wanted. Then I looked into why it works and spend months of my life on mailing lists and forums asking for and giving ideas and advice. Of course we all said terrible things in heated discussions and prematurely dismissed things, but in the end there was agreement – there was a feeling of having to communicate to become known and get to know people closer that you can learn from.

Enter social media and a 140 character throw-away, realtime web feed fast world of who says the most outrageous thing and “is awesome”. The pace of social media and its fragmentation (do you post on Twitter, Facebook, Google+, GitHub, your blog, JSFiddle, JSBin or where?) is a breakneck environment and it leads to people acting – possibly unconsciously – like complete sociopaths.

Case in point. Over on her blog, my colleague Heather Arthur describes how a piece of software she wrote was mercilessly shot down on Twitter by people other people look up to. Heather felt awful because of that – not only because she was criticised, but mainly because there was no explanation why her code was deemed bad.

This unknown element can make it very easy for anyone to find the flaw in themselves:

At this point, all I know is that by creating this project I’ve done something very wrong. It seemed liked I’d done something fundamentally wrong, so stupid that it flabbergasts someone. So wrong that it doesn’t even need to be explained. And my code is so bad it makes people’s eyes bleed. So of course I start sobbing.

Some of the people who shot down her code in far too short messages lacking any context and information now apologised and there were some good quotes in there:

I am sorry. I feel terrible that I made someone else feel terrible. I feel even worse because I didn’t mean to say that they were terrible, but accidentally did.

It is easy to forget that people write code. But it is important that we don’t forget that. Writing code is easy, putting it out in front of the world isn’t.

Heather ends with a very good point:

I evangelize open source whenever I meet new coders or go to meetups. I tell them to make something that they would find useful and put it out there. Can you imagine if one of these new open sourcerers took my advice and got this response, without the support I had. Can you imagine?

By being too fast and not detailed enough in our criticism we might actually right now discourage a lot of new people who could create amazing things in the nearer future. This is sad.

I am lucky that I have followers on Twitter (amongst the trolls) who are not afraid to point out to me when I am overly harsh or glib about something. I try to make amends when that happens and find that I learn more and more every time I do and it taught me quite a few things.

Let’s see a great example of how things could be done. Jan Hančič posted the other day Load scripts and styles with one request and I read the post and went a bit “uhhh, I am not sure” about it. Then I found a comment that perfectly covered what I wanted to say and didn’t hurt Jan at all:
——
Hey Jan,
Glad to see people hacking around; coming up with new ideas is always a good thing, no matter how realistic they are (the important here is to stretch our imagination).
Btw, the approach you describe has not been done by anyone else in the past, and I believe it’s for a good reason: it doesn’t help… Mixing CSS and JS is a bad idea IMHO, for many reasons:

CSS Is loaded in parallel by the browser, while JS is not;

CSS is loaded in the head (before the DOM is rendered), while JS is generally loaded generally in the body for performance reasons;

Minification of CSS and JS works differently, so including one into another is looking for troubles;

In a decent sized application, with a moderately big codebase, putting everything into 1 single file could end up with an unmanageable big file;

loading it in 1 single chunk would prove unpractical; either you end up with FOUC or you get a white page until the file complete loading by your browser; Moreover, loading 1 single minified CSS file and 1 single minified JS file is generally more than enough in terms of optimisation.

I’m not even considering that recent talks/rumors at Google seem to indicate that modern browsers are nowadays extremely optimised and performant also when downloading multiple resources (it was an Angular guy that glanced over this concept in a recent screencast..) Btw, don’t give up trying; Crazy Ideas can sometimes lead to great discoveries ;)

Cheers,
Davide
——
See what happened here? Instead of throwing out a quick “this is stupid” remark Davide Alberto Molin criticised in a picture perfect way: he started encouragingly, pointed out that this indeed is a new idea, listed the technical details that makes this idea flawed citing examples and ends with thanking Jan for throwing the idea out there and encourages him to go on doing that.

This takes time, this takes effort, but it has overall positive results. Jan was happy to get the comment and learn from it, I got a massive respect for Davide (someone I never heard of before) and Jan can update his post or follow up with one that takes the technical issues into consideration.

Long story short. If we want to encourage people to go out and show the world what they did (and we all learn from that) we need to stop dropping dismissive short sentence criticism and instead spend more time to explain, verify and validate our criticism. That way we can still prevent bad code from being used, but we don’t come across as a terrible person at the same time.

As Steve Klabnik puts it succinctly:

Twitter makes it so hard not to accidentally be an asshole.

Let’s use channels that allow us to give context and explain the why of our criticism instead – if it is code on GitHub, the issue tracker is a great place. We can still send a Tweet out pointing to our criticism there – thus showing that we are out to care and improve and not to harm and win the internets.

photo by Hobvias Sudoneighm

During the last few weeks we were busy helping developers to convert their HTML5 apps from platforms like WebOS and ChromeOS to FirefoxOS and the target hardware this operation system is right now aiming for. As these are slow mobiles, we found that quite some tweaking had to be done. The reason was in most cases libraries using outdated ways to animate and position things on the screen. These old ways of working are needed to support legacy browsers and in a lot of cases are not needed as these legacy browsers will never see the apps in the first place.

Aside: I will cover a lot of this in my keynote at the jQuery Europe conference called “Helping or hurting?”.

Tip 1: Use CSS animations/transitions

Instead of using your library’s animate() which – for now – uses many badly performing technologies (setTimeout, top/left positioning) use CSS animations. In many cases actually Transitions are enough. The reason is that browsers optimise them for you and hardware accelerate them. Another benefit is that the animation is defined in the CSS with the rest of the look and feel and in an agreed standard syntax. CSS animations give you massively granular control over the effect using keyframes and you can even listen to events that happen during the animation. You can easily trigger the animations in CSS with hover, focus or target selectors or by dynamically adding and removing classes to a parent element. If you want to create animations on the fly or modify them in JavaScript, James Long has written a simple library for that called CSS-animations.js

Tip 2: Use requestAnimationFrame() instead of setInterval()

This has been explained many times – a setInterval() call runs code at an assumed frames per second speed that may or may not be possible. It tells the browser to render results even whilst the browser is currently not drawing as the video hardware is not in the next display cycle. On the other hand, requestAnimationFrame() will wait till the browser is ready and only send your changes when they will result in a visual display. Another great side-effect for using rAF is that animations don’t happen when the tab is inactive – that way your app is not responsible for hammering the CPU/GPU and sucking battery whilst it doesn’t do anything for the end user.

Tip 3: Use CSS transforms instead of position: absolute and top/left

Again the reason is hardware acceleration. CSS transforms using translate(x, y) run on the GPU whereas positioning absolutely and using top and left hammer the main processor. This is worsened by not rounding your pixel positioning. Using transforms also means that you have a much bigger arsenal at your proposal. Rotation and 3D transformations just mean adding to the transform string. With top/left you need to calculate them yourself and mess around with depth of field. Paul Irish has an in-depth analysis of the benefits of translate() from a performance point of view. In general, however, you have the same benefits you get from using CSS animations: you use the right tool for the job and leave the optimisation to the browser. You also use an easily extensible way of positioning elements – something that needs a lot of extra code if you simulate translation with top and left positioning. Another benefit is that the technique is the same in Canvas.

Tip 4: Make events immediate

As old-school, accessibility aware web developers we love click events as they also come with the added benefit of supporting keyboard input. On mobile devices these are too slow though and you should use touchstart and touchend instead. The reason is that these don’t have a delay that makes the interaction with the app appear sluggish. If you test for touch support first, you don’t sacrifice accessibility either. The Financial Times use a library called fastclick for that purpose, which is available for you to use.

Tip 5: Keep it simple and re-use as much as you can

One big performance issue we found in HTML5 apps was that moving lots of DOM elements around makes everything sluggish – especially when they feature lots of gradients and drop shadows. Simplyfying your look and feel and moving a proxy element around when you drag and drop helps a lot.

When you have for example a long list of elements (let’s say Tweets) don’t move them all but only keep the ones visible in the current screen and a few before and after live and hide or remove the others. Keeping the data in a JavaScript object instead of reading/writing to the DOM showed massive improvements. Think of the display as a presentation of your data rather than the data itself. That doesn’t mean you can not use straight HTML as the source. Just read it once and then scroll 10 elements changing the content of the first and last accordingly to your position in the results list instead of moving 100 elements that aren’t visible. The same trick applies in games to sprites – if they aren’t in the current screen there is no need to poll them. Instead re-use elements that scroll off screen as new ones coming in.

More reading:

(Includes videos and all)

• Jake Archibald’s Snow in Canvas Land shows how he sped up some old code by switching to requestAnimationFrame() and re-using objects instead of constantly creating new ones
• James Long: Making (good) webapps – some Firefox OS specific things, but good overall tips
• Why moving elements with translate() is better than pos:abs top/left is Paul Irish’s in-depth analysis of the differences
• Patrick Lauke’s German article on touch events (use Google translate – the code and the demos are the important bits)
• Video of James Long’s Writing Firefox OS HTML5 Apps using Mortar talk
• A great collection of App performance articles by Paul Lewis

My esteemed colleague Luke Crouch put together an interesting piece entitled Packaged HTML5 Apps – are we emulating failure which resonates quite well with me. In it he describes the process of scanning a QR code on a phone to check into a restaurant with Facebook. This right now involves installing a QR code reader, the Facebook app and many in-between steps that can not be in the best interest of the restaurant owner and requires a lot of patience from the user.

My reservations towards QR codes aside (hey, with NFC, this would be “tap your phone here to check in” – you hear that, Apple?) I think Luke points to a much bigger topic here that very much annoys me: we are stalling, if not moving backwards in the evolution of content delivery.

Let’s reduce the use case to the bare minimum here: an end user wants to get some content. This could be music, video, photos, a book, a map with instructions or a game to play. It all is data, zeroes and ones that if arranged in the right format make up the thing I want. Our job as the data providers should be not to throw as many barriers in the way of the consumer to reach that – our job should be to make this dead easy.

Whenever people say that “users want apps” then what they really say is “people want a thing that uses their hardware to the best of its abilities and be able to find that in a simple way”. Doesn’t roll as well of the tongue and sucks as a rallying cry, but describes the thing much better. I remember the days before the Internet, when software came on floppy disks in the mail and had to be installed and the third install disk had a read/write error so you had to call the company or go back to the shop to get a replacement. I also remember having to install a tool to cut up images for table layouts or to plan a route for my holidays. I also remember buying games and being told my computer is not good enough – always the sound card, which wasn’t as “Soundblaster compatible” as it pretended to be.

This seems ridiculous now and we laugh at the idea of not being able to just type, “Hackney, London” into the search box of our phone or browser and get a map back. Yet this is exactly the world we seem to crave to go back to when we say that apps are a much better experience and the future of our jobs and what people want.

What we do by praising apps and their simplicity is reward companies for locking users out – demanding the real Soundblasters so to say. We claim that app stores are easier for recovery and yet these companies pay a lot of money to advertise their apps and games on TV, in newspapers and in banner ads on the web. App stores are not easier. They do not scale. I wait for the day – which will come very soon indeed – where you can buy better placement in app stores, much like you could in “price comparison web sites” and search results.

If you took the app store model and compare it with something that happened to the web then app stores are the Yahoo directory which got killed by search with Google being the big innovator. We realised that it is far too much work to curate and edit a list of web resources when the format of them would allow publishers to promote their content and make the amount of people clicking it determine what gets shown first.

If you care to remember, we already had a failed attempt at app stores. Tucows, Download.com, Freshmeat.net and others tried the same for Desktop apps and nobody cares about them right now any longer and they fall into disarray and become a spammer’s heaven.

The focus on apps right now and the repeated myth that they are a much better experience for end users than the web are based on man-made barriers for the web:

• Apps have much more access to the device’s hardware
• App stores are promoted with the sale of the hardware

For everyone proclaiming that app stores are the better way to distribute apps I propose to check out the hundreds of empty app stores mobile service providers set up or the ones of hardware that is less successful than Android or iPhone. Wastelands full of frivolous apps and overpriced quickly converted and packaged old titles that were a success on other platforms.

This is not about what users want – this is about what the industry and distributors are used to and don’t want to change. A packaged app can be much easier priced and its distribution planned and tracked than a web app. Much like physical CDs and DVDs and books still have quite some time to vanish, the packaged app to me is the last of the dinosaurs when physical distribution was all you could do.

A lot needs to change till we realise that we have a wonderful way to distribute media called the Internet. Media that can stay fresh, can get updated when we need and discarded when we don’t want it any longer without having to download lots and lots of data each time.

Most of it is based on business models that are not flexible and see full control over the distribution as the only means of making money. Some of it is psychological. A neatly packaged app you need to install and uninstall seems like something more solid than a web app. It seems more trustworthy, whilst it also can cause much more damage. It is the “20% more” on a fizzy drink can you never knew you missed so much.

I am very afraid that if we do not stand our ground now and point out that apps are a distribution model of the past and not the future we’ll repeat the same mistake we did with Application directories in the past. Of course you can now list 23123 reasons why apps are better than web apps on mobile devices, but I dare you to find one that is not based on the device or OS vendor blocking access to functionality for non-native code. We praise a model of distribution for its simplicity based on lockout.

The argument you hear about this is that end users don’t care, they just want their apps. The fact here is that they don’t get told about alternatives. Again it is all marketing – damn good marketing, admittedly – but many demands from our end users come from seeing something and wanting it rather than needing it in the first place.