I just recovered from this year’s Fronteers conference in Amsterdam, The Netherlands (somehow I caught the flu Robert Nyman brought with him and now I am trying to get my voice back in time for WebTechCon) so it is time to give you the goodies and some impressions I collected.

Together with Stephen Hay I am the only speaker that was at every of the three full-length Fronteers conferences, so it is quite an honour for me to go again and I make sure things work out very good indeed. The reason is that the conference is a wonderful mix of professional content and a warm, fuzzy feeling of being part of a sub-community in the web community. The Fronteers audience know their stuff and know each other and are eager to learn more.

Day One

The conference started with a possibly awkward but also cool way to warm up the audience:

The day started with Jeremy Keith’s “The Design of HTML5” which covered the history and the why of HTML5 - a good introduction to the rest of the day. Jeremy is known to be an excellent speaker and has a proven track record of going deep into a topic. His talks are also full of interesting quotes.

Robert Nyman followed with “JavaScript – Like a box of chocolates” – an update of his talk at Full Frontal with great information on the very basic workings of JavaScript up to how to use them in the right fashion. Robert’s presentation style is much like mine, it is always good fun to see him and even when you think you know it all then there is one or two gems you have forgotten or didn’t even know about in his talks.

Brad Neuberg who recently left Google was next with “Vector Graphics for the Web” which covered SVG and explained how you can use it and libraries how to make it work cross-browser. I have a lot of respect for Brad who wasn’t that visible until recently but built a lot of great tools we all use in Google and his input into libraries is well received. His slide deck uses all kind of funky HTML5 and CSS3 and SVG work, so make sure you read his post on how he built it.

I had never met or seen Håkon Wium Lie (the second father of CSS) before this event, and his talk about the history of CSS and where it might be going was inspiring and interesting. Håkon showed off some of the print CSS extensions they used to really create a book with HTML and CSS and showed how CSS3 makes it possible to remove a lot of unnecessary imagery from your documents.

Stoyan Stefanov, a colleague of mine at Yahoo and someone I have a boatload of respect for because of his versatility as a developer across the whole board of server and client side technologies then brought the performance awesome down on us with “Progressive Downloads and Rendering”. Stoyan could have been a bit more energetic on stage (and I am sure a lot of people in the audience got lost on the very deep dive on the topic) but I thoroughly enjoyed the talk. Watch out for this man, and especially check his sterling work at his performance news aggregation web site Perfplanet (which is not porn, despite the name – unless you are very techy)

Jina Boltons “CSS Workflow” was up next. I had seen her give this talk already at Frontend2010 in Oslo, but there were some new things in there I liked a lot. Jina spoke very much from her own experiences how it is to build with CSS and make it work in a team. She just recently joined Engine Yard as a designer and I want to see much more designers go that route and lend a helping hand to the hard-core developer community to make our stuff easier to use and much more pleasing to the eye.

Side note: I was terribly disappointed by the amount of arrogant and also sexist tweets during her talk. We as a community should not be surprised that there is still quite a separation between UX and development if we can’t act like grown-ups or have the balls to complain to the person directly or at least back up claims that there was “nothing new” there. That said, I would love to see a talk like hers be a joined talk between a developer and a designer showing how them working together made a product much better. Simply showing the approach from one side will always make a part of the audience feel left out.

Jake Archibald was the last speaker of the day with his “Reusable Code, for good or for awesome!” presentation and I am damn proud to have pestered this man to do more after his talk at Full Frontal in Brighton last year. It is hard to explain what Jake does but it leaves you giggling like a loon and having learnt a boatload of good things when his talk is over. This man is a real talent and I can’t wait to see more of him. Count on me to keep pimping and forcing him to share more of his wisdom and warped sense of humour.

Day Two

The second day started with Stephen Hay talking about “Real-world Responsive Design”. Stephen is a star in the shadows, his work on Cinnamon.nl using CSS for layout and making it amazingly beautiful as probably the first bigger site in Europe made him a hero of mine a long time ago and it is ironic that we never crossed paths before the first Fronteers. Count on Stephen to always be very interested and spot-on with using CSS to build great layouts and pointing to the future of using CSS to build very complex and working sites. If you are bored of “shiny effects CSS” talks and wonder when we can do proper layout, this talk is a good start.

Paul Irish is to me a new kid on the block and his “The State of HTML5: Inaugural Address” shows that he has all his fingers in all the pies of bleeding edge technology. Rather than preparing a massive talk Paul simply shows all the cool stuff you can use now in HTML5 and shows which browser goes even further and what to do in the future. Paul also did a great job in showing which technologies are ready for use and which need a bit of honing. I’ve spoken alongside Paul for a bit now and I am always amazed how excited he is about new technologies and how good he is at patching browsers with libraries to allow us to use them right now.

Meagan Fisher was next with “Creating lifelike designs with CSS3” and stole the scene with beautiful slides full of interesting design approaches to using the CSS3 technologies we just use to save another HTTP request for an image. She delivered a good talk on seeing CSS3 through the eyes of a visual designer who shouldn’t waste their days cutting up images to make their ideas come to life.

Nicholas Zakas was next with “High Performance JavaScript” and I work with Nicholas so I’ve seen him quite a few times. What I hadn’t had encountered yet was him being really charming and funny. This talk showed much of that side of him and of course the technical details were spot-on. If you want to learn some performance tips on how to make your interfaces responsive, this is the one. The content in it comes from the school of hard knocks and fatal blows otherwise known as the Yahoo homepage – if your JS performs well with that amount of traffic you should be shining when you apply the tips explained here.

Next up was a joint talk between Stephen Faulkner and Hans Hillen on “HTML5 Accessibility: Is it ready yet?” which covered the overlap and confusion of WAI-ARIA vs. HTML5 quite nicely and showed how using the right semantic markup makes it easier for people regardless of their ability to use your products. The Paciello Group which both speakers belong to are a great resource for anything related to accessibility and you will find out a lot more when you follow Stephen’s code examples and explanations.

Cameron Adams (probably the best dressed speaker at the conference) is another big inspiration for me. He’s been around for donkey’s years and over and over again came up with great code solutions that brought the world of design and gaming and development together. This talk “The Renaissance of Browser Animation” gave a good overview over different animation techniques we can use today and when to use which. Cameron did an amazing job researching all the pros and cons and showed a decision grid and performance chart comparisons at the end of the talk. I also very much liked that he did not just diss Flash as this was an HTML5 conference but showed what it is great for. There is a lot of already existing knowledge in the Flash community that we can leverage for what we do in HTML5 now. Simply replacing it will neither do nor is it clever.

Last up was little me with a talk which had the briefing by PPK to “make people excited about being a web developer” which is why I reflected on the last few years of my life, compared what I did to people I know and who work in other markets and came up with a lot of things we can feel very happy about. No more grumpy me complaining about things I can’t change anyways. Writing and researching and delivering this talk was a blast and I hope I managed to get this positive and creative vibe across.

The slides of my talk “Reasons to be cheerful”

The links mentioned in the slides

• Mr Doob’s awesome Internet Explorer 6 crash screen in Canvas
• Opera Web Standards curriculum
• WaSP interact
• Dive into HTML5
• Mozilla Developer Center
• Douglas Crockford on JavaScript
• The Developer Evangelism Handbook
• ProCSSor converts CSS to different syntax formats
• JavaScript Image Replacement (my first article that caused the PPK controversy which led to a great time of working together)
• Seven Rules of Unobtrusive JavaScript and the Chinese translation
• The Visa waiver programme site of the US – an example of converting a paper form to the web and how not to do it
• Easy YouTube and its effects on users Video 1 and Video 2
• Evercookie is a wake- up call
• Rendering JS widgets server and client side with the explanatory video

Summary

In summary, I can only say that it once again was an amazing conference that is to me one of the best in Europe. I came back with a cold and probably made my liver and body suffered more than they should have (4 hours of sleep a day three days in a row) but I came back empowered and interested in trying out some of the cool things I heard about. I also came back with a lot of new connections and emails to answer, so I am out now.

I just got back from the Future of Web Apps in London where I was asked to fill in a talk quickly. The topic I picked was progressive enhancement and HTML5 as a re-boot of web development as we know it. Here are the slides, the audio recording and the links mentioned in the deck for you to check out. I really think that the concept of rendering JS server-side with node and re-using the same widgets client-side is an amazing step forward in not blocking out users whilst maintaining a single code base.

The slides

The Slides are available on Slideshare:

Audio recording

You can find the audio recording on archive.org.

Links mentioned in the talk

• Seven rules of unobtrusive Javascript and Chinese translation
• Easy YouTube and its effects Video 1 and Video 2
• London Tube strike map
• Petition to the government to upgrade from IE6 and respons
• Modernizr to test for browser support of HTML5 and CSS3 features and has.js to test for JavaScript features
• Geomaker and source
• UK House Prices
• Yahoo Firehose research
• Rendering YUI widgets server and client side and video of Dav Glass explaining the details
• YUI supporting capability-based loading and CSS transitions
• Problems of scaling web sites and redesigns
• Douglas Crockford: Loopage

• A therapeutic Robot seal – of course Japanese – should help people with dementia and other disorders to get a new sense of caring for something. Tamagotchi / Furby on steroids and very cute to boot.
• Stephen fry is just lovely – and so can you.
• It seems that Symantec’s hack is whack competition web site was full of XSS errors which allowed people to Rick-Roll it
• Jonathan Brodsky wrote a Chip Tracker in HTML5 for Firefox 4
• James Mansfield has an interesting discussion point when he says that Design thinking is data thinking
• CSS Pad is an iPad make with CSS3 - shame there are no transitions when you shift from landscape to portrait
• A stunning amount of Dollar Bill Origami models by Won Park
• Opera is playing with wobbly bubbles as HTML5 form validation feedback mechanisms – feedback is also wanted.
• The Mozilla Addons page uses quite some heavy HTML5 trickery to create the statistics page under the hood (Webworkers, LocalStorage and Highcharts with Canvas)
• Liquidicity has a set of 2400 flags as icons in 3 sizes
• A collection of libraries that help you to make your mobile web sites look like native apps
• Mozilla has a JavaScript game competition with some very cool prizes
• A good reason to buy a smart car
• Good f*cking design advice is what it says on the tin

Things that made me happy this morning:

• Dan Catt of the Guardian (and Flickr fame) has a great write-up on website redesigns and scaling issues with social elements.
• Ablenet provides us with SoundingBoard, an iPad/iPhone/iPad Touch app that allows you to create message boards with nine predefined messages connected to your own photos. Imagine Hawking’s communicator on a shoestring.
• Usabilitypost explain their confusion with endless scrolling Ajax loaders in the elusive footer
• ThinkUp is a great tool to archive and analyse your social media use (yes, Twitter and Facebook)
• Krishna Kumar collected some interesting Characteristics of great programmers
• Chris Shiflett has a simple introduction to using Twitter oAuth
• A list of words blacklisted by Google instant – yes, they all are naughty
• Why companies should insist on employees taking naps has some interesting insights into naps
• Another proof that unicorns solve anything!
• A great gallery of 3D illusion chalk paintings
• The Bespin bookmarklet turns any textarea into a code editor
• 100 Amiga games in 10 minutes and 60 DOS Games in 5 minutes
• A list of all the HTML5 Cross-Browser polyfills
• According to Cursebird I swear like an enthusiastic porn star – oh, well.

As you know, I give a lot of talks at conferences. Most of my life these days is to keep my eyes open for cool things, try them out, document them and package them up in a presentation for a conference. This does not only mean writing demos and explaining the why – it also most of the time means translating the content into a language and use cases that are meaningful to the audience.

This year is packed with amazing conferences, and I am sorry to have missed a few really cool ones and that I will miss some in the future, too. Being the only full-time evangelist outside the US for an international company brings that with it.

That is why I love when speakers make their slides available to the world and when conference organisers release the video and audio recordings of the talks. I do that myself, for the obvious reasons:

Reasons to release your slides

• People who saw me at the conference can get the slides to refresh their memories when they get back
• People can re-use the slides for internal presentations after the conference and show off to their boss about what they learnt (if they are released as Creative Commons)
• People can embed my slides in blog posts and in their own conference reviews or as a reminder to make a point
• People can search for topics on SlideShare and LinkedIn and find my talks
• People can listen to the talk on the train, in the gym or send it to people who prefer to listen to things rather than reading
• People can take in the information at their own leisure and are not bound to a timed schedule – a whole conference can be overload
• You can flip through a slide deck quickly to find the one thing you wanted to remember – this is much harder in a video or audio recording

Now, in my case, I use Keynote to write my slides, export them to PDF and host them on SlideShare. The reasons are:

• I don’t want to be dependent on technology – if my laptop breaks or gets lost I can still show my slides from another machine
• If you use a 800×600 resolution it works with even the most shoddy projectors and scales to higher resolutions without me having to do anything
• People can print the thing if they wanted to – I’ve seen people go through printouts of presentations on the train.
• SlideShare automatically creates a transcript of my slides in HTML (for SEO reasons) so even my blind friends can read them without me having to create a special version

The thing to remember though is that I write my slides to make sense without me talking over them – I use the slides as the narrative turning points in my talk. Each web site mentioned gets a URL and each code example has a live demo that people can click on and see when they get back.

This is why I can release the slide decks and people have fun with them and use them in trainings.

Not all slides are the same

Other speakers have a different approach which is more focused on the talk itself. Rather than doing a lot of speaking they write one amazing talk and fine-tune and upgrade it. The talk is a performance, and the speaker is the main source of information. That is why in talks like these, the slides become a backdrop to the main performance rather than the content. This can be very effective and needs a great stage persona to do right.

Watch the videos of Aral Balkan for example, his talk about emotional design was wonderfully timed, had the right amount of passion, emotion and fun and some very good open questions in it.

Should he release the slides? I don’t think so as without the talk and Aral’s performance they don’t make much sense. Should the video be released? Yes, please as this is where the information and the enjoyment lies. A talk like “emotional design” is not there to skip over quickly and get the gist – it is something you should watch from start to end.

The talks on Ted don’t come with slides – for a reason. The talk is the performance, without the visual and audial you’ll miss most of what makes it an outstanding talk.

What makes a great presentation?

Some people call this the only effective presentation and how a great presenter should deal with the task. Which is true to a degree but there are other things to consider.

What if you speak to an audience that doesn’t have the same language skills as you have? I found that giving talks in Asia and in continental Europe worked much better when I had an introductory sentence on my slide and went from there. People who considered me hard to understand still got the gist of what I was saying and asked very detailed questions afterwards and had friends translate for them.

What if there are people in the audience who don’t feel like hanging onto your every word? What if there are people who learn more from an image with a short text than from a long aural explanation and complex visual stimuli?

People learn in different ways. I have encountered abysmal presentations with really great content that still stuck as the slides were clear enough. I’ve seen very shy presenters who pulled through by sticking with their slides and getting better with every presentation they gave.

On the flipside I’ve seen people who read their bullet points out to the audience and bored people to death more often than I want to remember. This latter example of boardroom presentations gave content heavy slides a bad name. I don’t think though that this is fair.

When sharing slides is not helpful

The whole concept of sharing slides means full disclosure – you give out the thing that your talk was based on. If the slides are just images to accentuate what you said and there are no notes to understand what they mean then you leave your slides to interpretation by the audience – and that can go very wrong indeed.

I’ve seen people quoted out of context as the slide was meant to be delivered with a very sarcastic voice and body language. On the released deck this was missing as it doesn’t translate.

The more annoying thing to me is though when speakers write their own presentation software and expect things to work the same on the computer of their audience.

I just got very excited about the talks at JSConf in Berlin which I couldn’t attend. A lot of them were written in HTML/JavaScript and some clever NoSQL solution or another. I am sure they worked like a charm on stage and showed the power of the open technologies we have. When these break though then you are left frustrated. Firstly, because you want to get to the promised content and secondly because you want open formats to succeed.

Take Aaron Quint’s presentation based on Swinger for example. Slide 35 shows me some code:

That doesn’t look right! Ok, no worries, view-source is the key as this is HTML, right? Well, view-source gives me the main app of Swinger and not the current state. So the only way to get to this code is to use Developer Tools and do a copy of the node.

If I paste this in my editor I get the whole function:

Now, I am a geek and can do that. I also was interested enough to do it. Others would have simply given up or thought Aaron showed broken code.

Other presentations were live in a browser and expected you to have the same configuration. Paul Irish had one of those and when I complained that I can’t read the slides he claimed I was simply negative and love to cry FAIL. This is not true, I was very interested and love to see people use new technology to do good demos in browsers. However, the display of his slides did not work in my Chrome even when it advertised Chrome:

After probing a bit Paul admitted that the slides were for himself and not meant to be released. They were catered to the talk as all the demos are in-line in the HTML. I was happy that at least I could do a view-source and get all the information.

This is a case though were releasing the slides in this state (or someone releasing them and not Paul) was annoying to me as I was very excited about the cool content just to get stuck. If you can’t ensure that your audience will be able to see what you see, a screencast, video or even separating the code examples from the slides with information as to which browser to use to see the best results is much better than causing confusion.

If something gets online, people expect that to make sense and work. You promise to share your content to get all the benefits mentioned at the beginning. If your sharing means people need to change their environment to see what you did then you need a really dedicated audience. If what you prepared was meant only for you and not to be released and got out this seems to be a communication issue with the conference organisers.

In the end, all I want is to be able to follow what people want me to read. If your content only works for you or needs a special setup this is not what the open web stack is about – we want to shy away from PDF and Flash to be more flexible, not to dictate environments.