Whenever there is an open forum to discuss HTML5, you get very interesting questions. Sometimes you also get ones you just facepalm to. One of them was yesterday on Facebook where someone wanted a “simple web in HTML5”. As I was bored watching “revenge of the sith” I thought I give it a go. So here you go – a simple web in HTML5 canvas.

How is this done? Pretty simple actually, I just define one segment of the web in canvas:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
cx.moveTo( 0, 0 );
cx.lineTo( -30, -200 );
cx.quadraticCurveTo( 0, -170, 30, -200 )
cx.lineTo( 0, 0 );
cx.moveTo( -25, -160 );
cx.quadraticCurveTo( 0, -140, 25, -160 )
cx.moveTo( -18, -120 );
cx.quadraticCurveTo( 0, -100, 18, -120 )
cx.moveTo( -12, -80 );
cx.quadraticCurveTo( 0, -60, 12, -80 )
cx.moveTo( -6, -40 );
cx.quadraticCurveTo( 0, -30, 6, -40 )
cx.stroke();

I translate the context of the canvas to the centre of the 400×400 pixel canvas and start painting the lines. I paint one line from 200/200 (which now is 0/0 as the translation happened) to – 30/- 200 which is the top left. I then paint a quadratic curve to the top right of the segment (30,-200) with the curve point being in between the two. I then move the canvas “pencil” to the other points on the left and draw quadratic curves to their counterparts. All of these I set with trial and error – I am sure there is a clever algo to do this, but this works.

In order to achieve the web effect all I had to do was to rotate the canvas before painting each segment. I increased the angle by 18 degrees on each iteration and rotated the canvas in radians:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
for ( angle = 0; angle <= 360; angle += 18 ) {
  cx.save();
  cx.rotate( angle * Math.PI/180 );
  cx.moveTo( 0, 0 );
  cx.lineTo( -30, -200 );
  cx.quadraticCurveTo( 0, -170, 30, -200 )
  cx.lineTo( 0, 0 );
  cx.moveTo( -25, -160 );
  cx.quadraticCurveTo( 0, -140, 25, -160 )
  cx.moveTo( -18, -120 );
  cx.quadraticCurveTo( 0, -100, 18, -120 )
  cx.moveTo( -12, -80 );
  cx.quadraticCurveTo( 0, -60, 12, -80 )
  cx.moveTo( -6, -40 );
  cx.quadraticCurveTo( 0, -20, 6, -40 )
  cx.restore();
}
cx.stroke();

And that’s that – a web in HTML5 canvas.

I am always amazed about the lack of support for progressive enhancement on the web. Whenever you mention it, you face a lot of “yeah, but…” and you feel having to defend something that should be ingrained in the DNA of anyone who works on the web.

When explaining progressive enhancement in the past Aaron Gustafson and me quoted the American Stand-Up comedian Mitch Hedberg and his escalator insight:

An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”

This is really what it is about. Our technical solutions should be like escalators – they still work when the technology fails or there is a power outage (if you see CSS animations and transformations and transitions and JavaScript as power) – but they might be less convenient to use. Unlike real world escalators we never have to block them off to repair them.

We could even learn from real-world escalators that shut down when nobody uses them for a while and start once people step on them. On the web, we call this script loading or conditional application of functionality. Why load a lot of images up front when they can’t be seen as they are far away from the viewport?

An interesting thing you can see in the real world is that when an escalator broke down and became stairs people stumble when they enter it. Our bodies have been conditioned to expect movement and our motor memory does a “HUH?” when there isn’t any.

This happens on the web as well. People who never were without a fast connection or new and shiny computer or phone with the latest browsers have a hard time thinking about these situations – it just feels weird.

Another interesting thing are the horizontal walkways you have in airports. These are meant to accelerate your walking, not replace it. Still you find people standing on those complaining about their speed.

On the web these are the people who constantly complain about new technology being cool and all but they’d never be able to use it in their current client/development environment. Well, you don’t have to. You can walk in between the walkways and still reach the other side – it just takes a bit longer.

So next time someone praises flexible development and design practices and you have the knee-jerk reaction to either condemn them for not using the newest and coolest as “everybody has a xyz phone and browser abc” or you just don’t see the point in starting from HTML and getting to your goal re-using what you structured and explained in HTML as “GMail and Facebook don’t do it either” think about the escalator and how handy it is in the real world.

Think about it when you are tired (accessibility), or you carry a lot of luggage (performance) or when you just want to have a quick chat whilst being transported up without getting out of breath. Your own body has different needs at different times. Progressively enhancing our products allows us to cater for lots of different needs and environments. Specialising and optimising for one will have a much more impressive result, but for example a lift is pointless when it doesn’t work – no matter how shiny and impressive it looks.

Our job is to make sure people can do the things they went online for – get from their start to their desired goal. This could be convenient and fast or require a bit of work. Our job is to make sure that people do not get the promise of a faster and more convenient way that fails as soon as they try taking it.

You can comment on Google Plus if you want to.

Yesterday I attended the jQuery UK conference in Oxford, England where about 300 developers gathered to hear the newest and coolest about probably the most successful JavaScript library out there.

Naturally I thought it a good idea to give a talk that they shouldn’t use it. Well, more to the point that it is not necessary to use jQuery for everything out there and that there is quite a lot of redundant use of it. jQuery showed browser makers what developers want and browser makers listened. A lot of the initial concepts of jQuery – accessing the document via CSS selectors rather than the DOM and simplifying the handling of CSS classes are now natively available with querySelector, querySelectorAll and classList.

Slides, notes and audio

You can read the slides with notes online or embedded below (left+right to go back and forward, down for next bullet point and N to toggle notes):

As always I also recorded my talk and the audio is available on archive.org, soundcloud or embedded here:

The feedback was overwhelmingly good, and I am very happy that I dared to be different and didn’t get vegetables thrown at me.

My general impressions of the conference

As the first European (or UK?) jQuery conference I can safely say it was a massive success. The success of a conference very much depends on the passion of the organisers and the group behind this one has passion to spare. You always knew where to go and got help immediately if you didn’t.

The event was run professionally without pestering attendees with unnecessary communication (“Please fill out this survey”) and the venue was incredible. The lecture hall had power plugs and ethernet connectivity on the seats and the wireless stood up (probably because of the ethernet option).

The food was sandwiches, fruit and cookies – more than enough for a single day – and the fermented beverages at the party were bountiful. There were lots of giveaways for the audience (Playbooks, T-Shirts, books, awesome Firefox stickers, Tequila bottles and Kendo sticks).

As a one-track conference, they invited too many speakers which is why the speaking slot was 30 minutes. This at first threw me a bit but in hindsight it went really well and gave the conference a much better flow. There was no moment of boredom.

The audience was very good and the Twitter backchannel buzzing and very creative and observant. The vitriol and trolling attempts you find at other conferences was not happening at all – great stuff. Instead people created awesome doodles and live-blogged the sessions on GitHub(!). The low number of female attendees was a bit of a surprise to me – I’d expected more at a jQuery conference.

Some quick notes on the talks

Some speakers asked me about feedback and I am happy to give some more in person and detail (contact me again, please), but here are a few impressions I got from the talks I saw.

1. Conference organiser John Wards started the day with the necessary housekeeping and explaining the day – the main shock there was to go to Oxford to hear a strong Scottish accent on stage first thing (memories of Highland Fling?)
2. Ralph Whitbeck followed up with a report on the state of the jQuery project – the only predictable talk, delivered informatively and keeping the audience on the ball
3. Todd Parker then explained the ins and outs of jQuery Mobile in my favourite talk of the day. Engaging, funny and full of goodness in terms of best practices I very much subscribe to, too (progressive enhancement, real hardware testing…)
4. Fellow Ajaxians Dion Almaer and Ben Galbraith followed with a longer talk on Web vs. Apps discussing the benefits of the web as an application platform and how far we are from matching the native experience. Ben and Dion work very well together on stage and had some interesting insights.
5. Jörn Zaefferer talked about the pitfalls of single page applications. Despite being nervous, he managed to give a good idea about the necessary steps to deliver one of those without breaking the web experience
6. Haymo Meran of Aloha Editor showed how the editor works and explained the problems of using and implementing contentEditable in the browser and stay accessible. He also used the opportunity to release Aloha WikiDocs, a collaborative live editable wiki
7. Paul Irish talked about the App development stack for JS developers covering the whole range from preprocessors to developer tools in Chrome previewing the upcoming remote debugging and sourcemapping. Lots of great content there – maybe too much for one talk, but I am sure the (very elaborate 3D effect ladden) slides will help us digest a lot of that.
8. Addy Osmani talked about building large-scale applications with jQuery covering a few of the architectures followed in larger libraries like YUI and Dojo and explained a few patterns to use and patterns we already do use without knowing it. Again, a bit too much to digest in a half hour talk, but lots of good stuff to dive into
9. Doug Neiner finished off with Contextual jQuery explaining a lot of great tips on how to create lighter, more responsive jQuery solutions by applying functionality when it is needed and not upfront. A very interesting talk full of pragmatic goodness

All the talks were filmed and will be released in the nearer future.

Thanks

All in all I am very happy to have attended the conference and hope there will be more by these organisers. I was the first speaker asked (imagine my surprise given that I hardly have anything to do with jQuery) and I have to say thanks – it was a great experience.

You can comment on Google+

Today is a noisy day in the land of web development and the reason is a meeting of the W3C CSS working group where several people representing browsers discussed and agreed on supporting webkit prefixes in other browsers in order to “not break the web”. Read the notes of the meeting and search for vendor-prefix to get the original information.

This spurred Daniel Glazman, chair of the CSS working group to write a call to action to save the open web. Glazman has been opposed to the concept of vendor prefixes in the past and had some good arguments.

UK Developer and author Remy Sharp has a very detailed post on the subject called vendor prefixes about to go south where he discusses the dangers of supporting alien vendor prefixes in browsers.

Bruce Lawson also chimed in and actually has a quote that very much resonates also my feelings about the issue:

Personally – PERSONALLY – I’m pretty depressed about all this. I’ve spent 10 years – pretty much since IE6 came out – evangelising cross-browser, accessible, standards-based sites. As a development community we chased the Shiny and we caused IE6 to linger around[...] And now we’re doing the same again.

I took the opportunity to release something I already wrote in December, a call to arms to proactively fix browser-specific code on GitHub. Glazman disagreed with this approach but here is what I think:

• That browser vendors find themselves considering supporting the experimental prefixes of other browsers is sad. Everyone I know working on browsers advocates supporting the competition – it is what keeps us going
• The idea of vendor prefixes was to allow to try things out and become redundant over time. A try before you buy and a chance to test various approaches and then agree on one way as the non-prefix version. This hasn’t happened in the case of webkit- (or hasn’t happened fast enough)
• There are many reasons for that, one of them being the amazing success of Apple mobile hardware. Developers were asked to build exclusively for those and had to fight for extra time to test and support other browsers.
• Regardless of this being a bad thing we have to move forward and think of how we could avoid this issue in the future
• It is not hard to add at least a fallback to a non-prefixed version of the CSS effect. It is also not hard to replace overly zealous browser sniffing with a sensible feature detection.
• A lot of the code that gives the impression that webkit- is the only necessary feature to add is available on GitHub. Github by definition is a social network revolving around code and code there is meant to be amended, fixed and added to.
• So if you have a few minutes of your time, and you see something that is webkit only and can easily work in other browsers (or needs a non-prefix fallback) – why not fork it, do the fix and send a pull request?

This mess has partly been created by developers, the least we can do is help fix it. And it gives people a chance to help who are not planning to build their own massive library or solutions but care about making them work in the wider world of the WWW.

If there is one thing I learned so far is that “the only thing you need to support” on the web is a very fleeting concept. IE6 was the best and most amazing browser to support. WAP was the future, then imode, then XSLT to create HTML from XML… Do not believe the hype.

Here’s a prediction: this weekend, Twitter will go down. I have a lot of friends in Twitter and I am very much trusting their abilities (which I know to be awesome) but there will be a fail whale. I am so convinced about this that if there is no outage and next time I am in the valley I am happy to take them out for dinner and cover the cost.

The reason that Twitter will go down is the thing that kept the all media going for the last few weeks already: the super bowl.

Everybody and their dog (and bots and automated news update feed things) will hammer Twitter giving their remarks, offering blow-by-blow commentary and flood the system. About something that I can safely say I could not care less about.

People get incredibly excited about the bowl. It is probably the most watched bit on the TV. The ad spots are so expensive that advertising creatives bend over backwards to make an impression. This almost makes them an art form and people on Twitter got very into the Ferris Bueller themed one coming this year and shared trailers(!) of the ads coming up.

It is commercialism and media sponsorship at its most blunt and obvious. I am not a fan of spectator sports as a whole and the concept of putting long breaks in a game to be able to show ads in the broadcast is confusing to me. Yes, I am a geek and a dreamer who wants this world to applaud and support achievements without the hype. But this is not the world we live in.

What makes money on the web?

It makes me think about who pays our bills and where the money on the web is. We all stare doe-eyed at the big numbers that technical startup XYZ got acquired for and we hear all the amazing stories of technical talent being poached for thousands of dollars and making millions in shares afterwards. What we forget to think about is the constant flow of dollars on the web that actually go to people who do nothing to the media when it comes to moving it forward. Instead they reap the rewards of a distributed system that makes it dead easy to publish and get people to look at your things – if you give them what they want.

I know people who make thousands a week with web sites that turn my stomach and show “funny pictures and videos” I had in my inbox in 1998. I’ve seen people sell open source templates for WordPress other people did by adding a flashy site and video tutorials around them. I’ve seen people who run blogs linking to pirated materials hosted on Megaupload and Filesonic make a lot of money with that.

We could say these are the bottom-feeders of our world. Or we could admit that their success is much easier to explain to people who do not care about the web than ours will ever be. And we could admit that they are actually very clever by playing a system to their advantage – something we always claim to be doing by using “best practices” and “embracing change”.

Who is most successful in social media?

We pride ourselves of the followers and networks we have on Twitter, but if you look at the people who really have the impressive follower numbers it is not the thinkers, the makers and the drivers of the web and social media. It is the celebrities that people hope to be able to reach directly when they follow them, it is the people with the money to invest in companies and those who big themselves up enough to become celebrities in their own worlds. Or those who simply buy followers (using mechanical turk or other systems) and thus increasing their numbers by proxy (“hey, someone with that many followers must have something cool to say!”).

We are not in control

We think as technical people that we run and forge the web but in essence we are the plumbers. We keep the system going and we are lucky to be listened to from time to time when people do stand knee-deep in, well, you know.

And this makes us go back to our comfort zones over and over again. Instead of trying to change the blatant sell-out web that makes a lot of money and try to get the cash-flow to projects that use the web in a more human fashion (giving those who have no voice a channel to speak, showing the content that gets censored on mainstream media, rejuvenate education and innovate healthcare and solve social problems) we love to argue about minutiae of our job or spout strong words of people needing to upgrade and care more about what we do or they will fall behind.

You know what, they will not, and they do not care. It is up to us to bring our passion, our drive, our care for details to the outside world and show how they can benefit from the things we do. We are in a very comfortable environment. Nobody in IT has problems paying their rent or finding food for tomorrow. We are privileged as we are currently experts people look for. In many cases not because of our ideas and who we are, but because we are the people who can build interfaces that the fans of the superbowl can use. If the creation of those interfaces will be automated, we will have to re-think and re-negotiate our standing. Being an expert as nobody understands what you do is much less sustainable than we think it is.

Knowing our enemies

I think that if we want to fight things like SOPA, ACTA, PIPA and all the other threats to the web as we know it, it is time to take our analytical skills and look at the world outside of our own. See what the big click targets of the web are doing and how we could use that to our advantage. Talk to the people we think our enemies and “outdated”. See how they click and find a way to put our foot in the door. We are not the suave sales people execs of old-school media (who run the world) listen to – we are the crazy-haired socially awkward scientists who are allowed to show their achievements from time to time.

We pride ourselves in saying we care about our end users and want to deliver the best we can for them. Well, let’s face facts that the people who we work for are not us, but might be those who care much more about what the mainstream media advertises them than the great ideals we have.

Hearing the politicians who were to decide about SOPA repeatedly say that they are not “nerds” and don’t understand the internet hurt me. I thought that after over a decade working as a web developer we are further down the line. We don’t seem to be, and this is partly because we are too arrogant to try to understand and reach the people the oldschool media obviously does reach.