A few days ago I was fortunate enough to attend the Beyond Tellerand conference in Dusseldorf/Germany.

The conference was organised by an old friend of mine, Marc Thiele and it showed once again that the success of a conference is very much dependent on the passion of the organiser. As it were, Beyond Tellerand was amazing and had a very cozy vibe to it. This could be because of the location, an old-school theatre for variety shows, complete with small tables with lamps on each (no telephones to order champagne though).

I was kicking off the day with my “Breaking the barriers – moving browsers and the web forward” talk. The slides and audio are available here:

(navigate slides with cursor left and right, go through bullet points with up and down and toggle notes with “n”)

I will publish a more detailed post on Mozilla about the content of the slides. Here, let me quickly go through the other talks I attended and was able to follow (I had a cold and felt awful).

(Some of) the talks

• Aaron Gustafson’s “Crafting Rich Experiences with Progressive Enhancement” was a nice reminder on how to create rock-solid sites and apps by layering complexity instead of throwing the kitchen sink at the browser and wondering when things break. His book on Adaptive Web Design covers the same topics in a very understandable fashion. I have had lots of work together with Aaron but we met for the first time IRL, which is very cool.
• Naomi Atkinson’s “Going Beyond” was a talk about self-promotion and how to get known online. It was not a seedy SEO talk but more about the irony that we spend days making our products look amazing but fail at doing the same about ourselves. That she managed to use three celebrities as examples that I heartily despise and still keep me interested shows that it was a talk worth your while.
• Heiko Behrens’ “Mobile Apps with JavaScript – There’s More Than Web” was a whirlwind tour of all the different options we have to build mobile applications using JavaScript. He covered Appcelerator, PhoneGap and many other tools and live coded the examples to show us how you can use emulators to get going. A bit packed as a talk, but I managed to follow and enjoy it.
• Vitaly Friedman’s “The Invisible Side of Design” showed a lot of shiny web site examples but reminded us that the real value of design is not in its visual representation but in the effects it has on the visitors and the benefits it brings for site owners. A nice reminder not to chase the shiny but use effects in moderation and where they reap benefits.
• Seb Lee-Delisle’s “CreativeJS – Beauty in the Browser” was a live coding session showing some particles in Canvas and creating 3D animated snow. Much like the stuff he keeps making people create in his great workshops. Pretty unfair to show people how easy it is to create beautiful things and then end with “but don’t do that” :)
• Yves Peter’ “Trajan in movie posters: the rise and fall of the Roman Empire” sounded really far-fetched but actually was a very entertaining research into how many movie posters used the font “Trajan” which is known as the “make it an Oscar movie” font. Whilst one can argue with the analytics methodology (amount of movies vs. percentage of movies released in the year, which, IMHO, would be a more interesting number) I thoroughly enjoyed the journey into the OCD world of a typography enthusiast. And, no, simply using Trajan does not automatically get the movie an oscar.
• Simon Collinson’s “Notes from the Edge” gave us a good reminder that building things with design tools and software is a craft and that we should put pride into what we do instead of complaining about lack of resources or response from the outside world.
• Tomas Casper’s “How to sneak Accessibility into your project without anybody noticing it” showed a lot of expertise and ideas of how to sell accessibility to large organisations where the “it is the right thing to do” doesn’t quite cut it. Lots of good info there, but IMHO far too much packed into a single talk. This could be a kick-ass workshop
• Dan Rubin’s “Hands-on Prototyping with HTML & CSS” told the tale of user testing the changes in a huge old-school web site by showing HTML and CSS mockups (done with image map-like positioned elements to click and enter data). Very good information on how to make user testing much more agile and get faster results
• Jake Archibald’s “Reusable Code, for good or for awesome!” told the tale of historical phalluses and had some info about code. Seriously, it is a kick-ass talk about building reusable JavaScript solutions.
• Jon Tan’s “Welcome to the brave new world of web type” was a very inspiring talk on using the right font-faces on the web and common mistakes being made. Instead of just talking about the aesthetics of different fonts Jon also talked a lot about usability issues and quality concerns in rendering. All in all, a kick-ass talk about a subject I know zilch about but made me interested in doing more.

All in all Beyond Tellerand was well worth my time and the organisation was great. The format of having 15 minute breaks between speakers worked very well and took the rush out of the conference. The lack of stable or working wireless was annoying but actually meant that I listened to the other talks more than usual (no distraction with company emails).

I especially enjoyed that while being very specialist topics, none of the talks was elitist or left people not “in the know” confused and lost (or bored). I wouldn’t know Arial from Helvetica to save my life (funnily enough I am good at Cheese or Font though) but I was really inspired and interested in the typography talks as they talked about real issues and solutions for them. Being in Germany was weird for me, as I am so used to speaking in English as the first language in conversations but helping other people (and buying cold medicine for Jake) was fun to do.

All in all I had a great time, I hope I inspired a few people to have a go at modern and bleeding edge technology and I can safely say that #btconf is a great place to go.

If you’ve been here yesterday you’ve seen the modular popup telling you that this site might be censored. This was a script by American Censorship making people aware of the issue of the Censorship and filtering attempts of the US government as an answer to copyright infringement.
The Stop Online Piracy Act (SOPA) and PROTECT IP Act of 2011 (PIPA) (Greek people can snigger now, you are welcome) are scary. Check out the following video or check the infographic to learn more:

PROTECT IP Act Breaks The Internet from Fight for the Future on Vimeo.

Now, earlier I was asked to give a statement for a publication here in the UK and for the sake of full disclosure, here’s what I sent:

The concept of SOPA becoming a reality frightens me. The internet is an incredibly powerful communication tool that keeps people connected when they are not close and gives those a voice who can’t get out via official communication channels. It also allows people to be creative and be found by showing their talents in videos, music and animations.

Allowing the government to take down web sites on perceived copyright infringements is a scary thought that will not only censor the internet but also stem the flow of creativity that made it the success it is. We point at countries like China, Iran and Syria for censoring the free speech of their citizens and at the same time are ready to frighten ours into not speaking up on the grounds of lost income in the entertainment history.

If you have comments on your site, if you host user generated content, if you have a slightly vulnerable install of WordPress (for example) and spammers manage to inject links to copyrighted material you will be taken down and blocked. Seeing that anything related to government communication is not the speediest of issues this also means that wrong accusations can mean that you will be blocked and offline for quite a while, losing the trust of your users.

The most annoying part about this bill is not that it is about illegal, political or dangerous content, it is about showing a video or using a soundtrack that doesn’t belong to you. It is not about protecting citizens or upholding the peace or bring order to the internet, it is driven by greed and backed by a total failure to understand how the web works. If the entertainment industry embraced the web as a distribution platform rather than selling me DVDs I can not play in another country with 5 trailers I can’t skip and a 2 minute intro that I should not download illegal copies none of this would be necessary.

In essence, the proposed way of stopping piracy will not affect the piracy scene at all which can work with IPs instead of domain names, go back to old-school distribution channels like FTP and newsgroups and set up relay servers in other countries. The entertainment industry could learn from the pirates how to effectively distribute media on the web rather than making an attempt to block them and hurt the whole web as a platform in the process.

Lately there has been a lot of discussion about markup, and especially the new HTML5 elements. There was a big hoo-hah when Hixiethe WHATWG wanted to remove the time element from the HTML spec, Divya stirred lots of emotions with her “Our Pointless Pursuit Of Semantic Value” and of course Jeremy posted his views on the subject, too in a counterpoint article “Pursuing semantic value“.

Maybe there wasn’t a counterpoint, maybe there was. Frankly, I was too busy to read the lot. It also doesn’t matter that much, as I get more and more the feeling that we really need to think about the web as it was and how it will be. The lack of understanding of the value of semantic markup to me is just a symptom of a change that is happening.

Tales of yesteryear

A lot of the debate about semantic value and using the correct HTML is kept alive by people who have been around for a long time and seen browsers fail in more ways we care to remember. Valid markup and sensible structure was our only chance to reach maintainability and make sense of the things around us. This was especially important in the long long ago. I remember using Lynx to surf the web.

I also remember to keep Lynx in my arsenal for a bit longer. I used it to “see” what search engines and assistive technologies see. The former was correct at the time (not any longer, Google does index Flash and JavaScript and actually follows ill conceived links using hashbangs).

The latter was even wrong back then. A lot of the debate around using proper HTML5 right now tries to back up with the argument that “assistive technology like screen readers need it”. Nah, not quite the case yet.

Build it quickly, make it work

I’ve mentioned it in a few talks that when people mention the good old days where markup mattered and people cared and such they are talking nonsense. These days never existed and when we started with web development we struggled to make things work. We used tables for layout, NBSP for whitespace, lots of BR elements for vertical whitespace and more evil things. We then used spacer gifs for padding and margin and just started to care when CSS got out and supported. The reason was not that we wanted to write cleaner HTML. The reason was that we wanted to make things work as all we got was a design to build, not a description how to structure the document or what to build. When you start from the look of a web product, semantics are already on the endangered list.

Write less, achieve more

This is the mantra of now. The big success of jQuery is based on it. JavaScript standards were too complex and too verbose to write code quickly and change it quickly. So the jQuery crowd analysed what people did the most – changes to the DOM and adding and removing classes (and later Ajax) and made it damn easy and short to do. No need to write code that doesn’t do much.

The same happens over and over again. less and sass make the prefix hell and repetition for different browsers in CSS easy to maintain and client-side templating languages and browser-internal templating and client-side MVC make HTML the outcome of computation and programming logic and not a starting point.

If you can’t see it, why do it?

A lot of what the fans of HTML and semantics are getting excited about is not visible. Whenever a new HTML element got support and had a visual representation in the browser it was a no-brainer. People used it immediately. In most cases they used it wrongly, but they used it (I’ve seen fieldset and legend used around images as it is pretty and of course indentation with BLOCKQUOTE).

A lot of the semantically rich elements don’t show up at all. Blockquotes’s cite attribute was meant to give a quote meaning by telling us where it is from. ACRONYM and ABBR were supposed to tell people what a TLA meant – heck we don’t even do that in meetings and press releases so why bother adding info that the browsers don’t show the users.

This is also a big issue for Microformats. If browsers made an address draggable to your address book or created voting buttons for VoteLinks, if a browser would automatically detect events and give you a simple interface to add to your calendar they’d be a no-brainer to use. As it is, we have a few success stories to tell, for a lot of work to do.

The big book of ARIA

It gets really frustrating when we are talking about accessibility. Making a web document available for people with various abilities should be easy when we stick to keeping things simple and follow human logic.

It should, but it isn’t. And by keeping things very simple we can reach more people but we could also deprive a large group of great interfaces. Whenever we do crazy things in the browser and the talk comes to making them accessibile the way out is the mythical ARIA.

If you dive into ARIA you will realise very quickly that it is a lot of work, hard to understand concepts and above all a lot of code to write. Instead of having accessibility as an integral part of HTML5, we have to deal with two parallel standards. One to achieve things quickly and move the web from documents to applications and another one to keep it available for everyone out there. This is not a good place to be in. Accessibility happens when you embrace it from the very start. There is no magic bullet layer at the end of the process that makes things work.

So what about HTML and semantics?

You know what? There is no solution for all. The reason is not that technology moved on or people don’t care about users or that our standards are holding us back or anything like that. The reason is that “write once, deploy anywhere” is simply bullshit. The one thing that made the web work so far and become an amazing market to work in is flexibility. We all enjoy that you can reach a seemingly similar experience for our end users in many different ways. So why are we banging on about one side of the development range or another?

How about this:

• If you write a document by hand, use all the semantics you can add in. This is your handwriting, your code is your poetry and people learn from looking at what you did.
• If you need to write a hard-core application and every byte is a prisoner try to play nice with the semantics but follow your end goal of delivering speed. Make sure to tell people though that your code is the end result of conversions and optimisations and not for humans to look at.
• Regardless of what you build – when you can use new technology – use it.
• Remember that the web is not your browser and computer – add fallbacks for other browsers when using bleeding edge technology. When the others catch up you won’t have to alter your code!
• The main focus of markup and web code that is not optimised for edge case apps is to make it easy for people to maintain it. If people can see in the HTML what is going on – win. If what only works with JS is generated by JS - even better.
• More markup is not a crime when it is markup that adds value. Arguments that STRONG is worse than B because it means more code and slower loading pages are irrelevant in times of gzipping on the server
• We can only escape the chicken and egg problem of new HTML when we use it. Right now, if you ask for support in browsers for new elements the answer from most vendors is that nobody uses them so why bother. And when you ask people why they don’t use them they tell you because browsers don’t support them. One of us has to start changing that.

Bigger fish to fry

Personally I am concentrating more on the things that really worry me about the web these days, and it might be interesting to list them.

• Death of longevity – I always loved the fact that I can find something on the web and go back to it. This is not the case any longer. A lot of my old bookmarks are dead, my tweets go into the data nirvana after a certain number and I cannot access them any longer, and code you write for companies will be totally different shortly after your departure. This is not the web I want. It is a great mix of entertainment and archive and the “real time web” really messes with this.
• High fidelity web sites – I remember when Flash made our 500Mhz machines flare up. Nowadays almost every cool new site I try out does that to my dual core macbook. I can see in the very near future pages coming up telling me that my video card is not good enough to enjoy them. This is the reason I never played games on a PC. Let’s use cool new and flashy in a sensible manner instead
• Identity – we are spreading ourselves thin on the web right now and leave a lot of outdated and erroneous profiles of ourselves. Who you are on the web is becoming a very strange concept and some of the work I do right now tries to bring that back into an easier to maintain fashion.
• The open web – today the US debates if it is a good idea to censor the internet like China, Syria and other countries do. This scares me. I started on the web as it was less regulated and much less commercial than radio or TV. Let’s not give up that freedom
• The maker web – the web is ubiquitous, we use it as a part of our day-to-day work and play. Lately I find though that the creative part of the web is dying and people are consuming it rather than using and enriching it. This, again, scares and annoys me. We should not become virtual couch potatoes.

Semantics are like wonderful prose. You use them to deliver an enjoyable product. People are not celebrated for writing books. They are celebrated for what they filled them with. If we keep putting things on the web that have structure and get better on more sophisticated display products we are building for the future. If we point fingers at others doing it wrong we waste our time.

Got comments? Give them on Google+ or Facebook

Lynx photo by Jimmy Tohill #40 in the National Geographic photo contest 2011

The other day Addy Osmani asked me to blog more about public speaking as this is what I am doing a lot these days. I will do this (and did) but today I just want to show a great example of one of the ignite talks. Caroline Drucker of SoundCloud gave a great talk on “How to get more women in tech”. See how she approaches a very hot and controversial topic by empowerment and calling out false practice rather than asking why or why nothing changes:

A great example how the ignite format (20 second slides, automatic progression) can be used to bring a message across and inspire thought. I also loved using extra context as humour in the images (the sausage example).

More of these, please.

Last Friday I attended Full Frontal without speaking, which was a welcome change in my schedule. Originally I didn’t mean to go at all but some people dropping out meant that I had to go. Seeing that I love Brighton and have truckloads of respect for Remy and Julie I went down there and I can only say I would have kicked myself if I hadn’t.

Full frontal was a pretty amazing conference with inspiring talks, good info and a quick flow that meant the day was over before I realised it.

Here are my impressions of the talks in succession:

Jeremy Ashkenas kicked off with “CoffeeScript Design Decisions” – an introduction to coffeescript and how it is not Ruby although the syntax looks eerily similar. Mike Davies has a detailed write up on this one and I liked the way Jeremy showed the benefits of Coffeescript without being pushy about it. I can see CS being used and with good debugging tools like SourceMapping this can be quite a boost for developers to build JavaScript without having to juggle its “special cases”

Phil Hawksworth followed up with “Excessive Enhancement – Are we taking proper care of the Web?” – a call to arms to stop us from using new technology in an obstructing and excessive fashion. His whipping boy example was beetle.de which is HTML5/CSS3 and all the other goodies but also clocks in at 11MB of data in hundreds of HTTP requests. In essence Phil repeated a lot of the things that I have been banging on about – that HTML5 is currently mostly used in brochureware sites that can put “skip intro” Flash solutions to shame in their lack of accessibility and responsiveness. Ubelly have a nice write-up of Phil’s talk and you can check the slides here. All in all I was very impressed with the talk. The presentation was very funny, at times it got a bit ranty, but that shows passion. I was very reminded of talks by Jake Archibald and seeing they worked together, that might not be coincidence. Phil also mentioned a lot of tricks how to fix the issues he complained about, which is exactly the right way to deal with this.

Marijn Haverbeke of Eloquent JavaScript fame gave a good round-up of text editors in the browser with “Respectable code-editing in the browser”. The main focus was on Code Mirror and Marijn brought the message across that in-browser editing is not an easy feat but something that needs to be done.

Talking about development in the browser and the cloud: Rik Arends of Cloud 9 was next with “How we Architected Cloud9 IDE for scale on NodeJS” and basically blew me away showing off the new features that make Cloud9 a really interesting choice for collaborative editing in the browser.

After Lunch, Nicholas Zakas did a re-run of his “Scalable JavaScript Application Architecture” talk given some two years ago at another conference. That said, a lot of the talk still rings very much true and Nicolas changed a lot of it to be agnostic of the environment and libraries in use. If you are looking for information to get you on the way to build huge JavaScript solutions, this is a good piece of advice.

Local linked data and open format overlord Glenn Jones was next with “Beyond the page” – a good talk on how new features in HTML5 like drag and drop, File API and post messages allow us to build incredibly rich and web-enabled applications. Glenn showed off all the things that also get me very excited these days about the web, including web intents. A great and inspiring talk with lots of code and ideas to play with now. You could see Glenn’s passion for the topic – especially when he showed how to allow users do drag and drop an image from a browser to the desktop using JavaScript (forgetting that this is possible in browsers without any interfering on our part). The difference though is that you can convert the image while you drag it and automatically rename or pack it, too.

A very charming speaker, Brendan Dawes was next with “Beyond The Planet Of The Geeks” showing us just how much of a geek he is (collecting pencils and paper clips) and how his company and products moved from wild demos and experiments with interaction on a screen to useful and engaging products. To a degree what was shown does not quite meet that yet as the interface at the end was shiny and amazing and looked like Flash but used new technology. It failed to deliver the basic principles mentioned in Phil’s talk of bookmarkability and real links though. I talked with Brendan afterwards and we’ll work on getting the history API and local storage in there to make it beautiful, engaging and a good web citizen.

My absolute highlight of the day was Marcin Wichary with “You gotta do what you gotta do” – a talk about Google doodles and the work that went into them. Marcin was amazing – baffling interactive slides, a very humble demeanour and great information on the tricks that had to be applied to make doodles perform and be small. I was very much reminded on the things we had to do in the demo scene on C64 and Amiga. A great insight into just how much work goes into a thing that is seen for 24 hours and then vanishes. That said, I pestered Marcin afterwards if they are willing to show some of the cool stuff he explained in a blog and he said they would.

All in all it was an incredible day and well worth the money (had I paid for it). The only thing I am really sad about is that there was no recording or filming. Especially Marcin’s talk is something that needs to be archived for people to see.

Update : as Remy just pointed out on Twitter there are audio recordings of the talks available and will be published soon. They are also considering video recordings for the next year.