W3Conf 2013 - Day 1

Thursay Febuary 21st, San Francisco CA

W3Conf is W3C’s an­nual confer­ence for web pro­fes­sion­als who want­ to hear the lat­est news on HTML5, CSS, the open web platform and their place in it...

So it's been a lot of travelling and a lot of sunlight since wednesday morning when we hopped on the train to Schiphol airport. But here we are in lovely San Francisco to attend the W3Conf! Our goal with this blog is to keep you all posted on all the talks that are held (only one track) and to summerize what we've learned from them.

09:00
Web Platform Docs and Community
Doug Schepers & Janet Swisher (@shepazu @jmswisher)

Too much information about web development is gathered in too many places… That's why a bunch of organisations like Google, Microsoft, Adobe, HP, Opera, Intel, Nokia, Facebook, Mozilla, w3c, etc. got together to build http://www.webplatform.org/, a place where all that info could be gathered.

They describe it as an open community of developers building resources for a better web, regardless of brand, browser or platform… Basically, it's a big cooperative wiki.

It's in Alpha right now and uses a CC licence, meaning anyone can contribute, use and broadcast the content freely. You can find documentation there, tutorials, Q&A, blogs, chats, etc…

This was a very interesting presentation and it gives some insight into the future of web standards resources and the kind impact automation and crowdsourcing are likely to have on making those web standards more accessible, more accurate and more widely known in the future.

09:50
Yes, you can: The top web features from caniuse.com you can use today
Alexis Deveria (@fyrd)

Alexis works at Adobe but is giving the presentation in the capacity of creator of the site http://caniuse.com/. His site, launched in 2009, was meant to offer browser compatibility tables at first. Since then it offers support info for 130+ features, it also offers basic browser support, known issues, user % per browser, etc.

One pretty cool feature of the site is that you can import your own Google analytics data so you can see feature support for your actual user base.

He went on to demonstrate some cool specific features you can use right now* (*if you don't have to support IE6 or 7).

This guy has put a tremendous amount of energy and time in his site. It's a very good thing that his work will be integrated in webplatform.org (see above). Also good that this works becomes more and more automated and crowdsourced since there are so many browser updates to track for just one person. People that are interested can contribute via github or through the feedback form on the site.

Tools like these are essential in developing modern web applications that will work across platforms and browsers and currently, this might be the best one. Go check it out!

10:40
Get off my Internets - Writing for Web pages for the offline world
Parashuram Narasimhan (@nparashuram)

Parashuram works for Microsoft Open Technologies, a subsidiary of Microsoft that develops (and contributes to) Open Source technologies. Parashuram explains how offline capabilities for websites can be important. For example, for games or events, like for a conference agenda (since wifi quality so often varies at such events)…

In his example, the agenda could be loaded once on the users' device and would then be synced whenever attendants are online again… but the agenda itself would be available from the users' browser data regardless of connection quality.

Data like this can be stored in cookies, local storage and WebSQL, but all these have considerable limitations… So that's when IndexedDB comes in. IndexedDB is basically a simple database in your browser, but it offers a wide range of possibilities to create and manage object stores…

The main issue with indexDB is the syncing to your own server, which you have to write yourself or use PouchDB which has syncing capabilities built in.

Personally I think the era where connection problems are rampant is slowly coming to an end (in the western world that is). That said, in previous projects, we've seen web applications that people wanted to be able to take on the road, so I could see this kind of technology answering some real needs currently. Also, the fact that part of the data and computation could be done locally might be a good thing for some applications…

Unfortunately IndexedDB is not supported for all platforms and browsers. Therefore Parashuram demonstrated a Polyfill that makes it possible to use IndexDB for browsers like Opera and Safari with webSQL for the actual storage…

11:30
Know Your Platform: Desktop vs. Mobile
Vicki Murley @vickimurley

Vicki worked at Apple for over 10 years. She explains the fundamental differences between desktop and mobile browsers include scale, user interaction/navigation and performance…

Using viewport tags in your code allows you to create mobile versions of your web apps that offer a perfectly adapted layout. For example, you can achieve this by eliminating excess whitespace and customize scaling options.

A mobile device has no mouse or keyboard. This means no hovering or constant input capability. Because of this, on mobile devices, links are highlighted before being activated and there's different types of contextual menus available for 'press'  actions. When building web apps however it is sometimes relevant to disable default behaviours, like a button you don't want to have a contextual menu for, or a link you want to work instantly, without delay…

With the emergence of high resolution displays, the 'device-pixel-ratio' tag can enable you to display the proper background image for a retina display iPad or MacBook or a low resolution phone, for example.

Vicki then proceeded to show how a lot of default/non-default behaviours which affect the user experience. Does the video enter full screen automatically?, does the page zoom on a field showing the keyboard automatically?, etc…

Even though the core technologies are similar, variations show up because of hardware differences, user experience and how the computing is done...

It is obvious that nowadays the way your site or web app shows up on mobile devices can be very important. It is a bit frustrating though to realize that it still requires a lot of effort, time and manual work to adapt a site or web app to mobile. Considering the amount of devices out there, it seems like a real challenge to make your content available to all, with a look and feel that is similar, across the board.

Although the presentation was based on Apple products, most of the things Vicki discussed are applicable to most devices as well.

13:20
EcmaScript Next: The Subtleties of ES 6
Kit Cambridge (@kitcambridge)

The new revision of Javascript is called ECMAScript 6 or ES6. For those who don't know, ECMA stands for European Computer Manufacturers Association. The appellation ECMAScript is the name given to the standard language that is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript and ActionScript.

There are lots of new features in ES6, but it is completely backwards compatible with ES5. The objective behind ES6 is to be able to write code easier without tripping over it. All the new features in ES6 are additive, you can therefore use the features you like or none at all. This way you can also change your existing code one step at a time...

Kit went on to demo several of the new features with great examples. We won't go into detail, since each feature could be a blogpost on it's own… The slides are worth checking out when they are made available. Some of the features In this new version are;

- Proxies
- new data structures (maps, weak maps, sets)
- Destructuring
- Iterators
- Generators
- String templates
- Rest parameter
- Spread operator
… and more

14:10
The Making of CSSFilterLab
Alexandru Chiculita @achicu

Alexandru works at Adobe and is part of the web engine team. He is involved in the creation of CSS filters. These can be used to create the likes of shadows, blurs, colour / hue and contrast values, page curls and all sorts of other effects that use the gpu directly. Adobe, as a general rule, creates functional demos to try out their new ideas. For their different CSS filters, they ended up creating the CSS FilterLab, a visual, interactive and editable CSS filter generation tool. Eventually, they decided to make it available to the public (http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/).

Note that it will be open sourced soon.

Alexandru's presentation was all about how they created their web app and made it multi platform and multi device. There was a lot of information and specific examples centred on performance optimizations. In order to make the CSS FilterLab usable on touch devices, Alexandru created a touch event framework that handles dragging, tap, long holds, zooming, rotating and scrolling (will also be open sourced soon).

CSS Filters are a great way to make your websites or web apps look and feel great. On the down side, they can be very gpu/cpu intensive, are not always supported by all browsers/OS' and can imply lots of work to deal with exceptions and potential problems (for example Safari crashing without a message when running out of memory). So… test well and use with caution!

15:00
Pointing Forward
Jacob Rossi @jacobrossi

Jacob works at Microsoft and is a member of the IE team. He is here to talk about so called 'pointer events' which basically refer to a standardized input event system for mouse, touch, stylus and any future input devices.

One issue with touch is using appropriate size for your links. Links that are too small may not work which causes users to be annoyed and less engaged very quickly…

Pointer events are a new technology developed by W3C. It is meant to include mouse, touch, stylus events but are also open for the future and for stuff like multi user touch. In some cases, you can just swap out your old mouse events for the new pointer events. And when pertinent you can create device specific events.

Jacob shows how with a combination of pointing events and 'touch-actions', you can optimize behaviour across device types. For example, a page in which one section is a canvas that you are meant to draw on. Typically, with a touch/stylus device, touch events would just pan the whole page, along with the canvas, thus making it impossible to draw. But with the touch-actions and pointing events you can now pan on parts of the page and draw within that particular section…

Pointer events are available under a vendor prefix in IE10, pontium (a special chromium build) and as polyfills…

After adapted layouts, adapted input is certainly a big part of the future of web development. After just a few short demos, the possibilities really seemed endless.. Things like pressure sensitivity, speed and eventually vision and kinect are not far down the road…

15:50
Do androids read electric books?
CJ Gammon @cjgammon

This talk is about the digital reading experience… or how the web affects the reading experience. Until now, the web has been about sharing information, not about optimising the reading experience. In order to do just that, there are a few things to consider.

The font, it's size and styling, the amount of different fonts, contrast between fonts, etc.

The Contrast should always be 4.5:1… also it is said that you should never use 100% black or white.

Tracking & Kerning is about the spacing and kerning can be tweaked so that readability is optimised (this is especially useful for titles).

Leading & Measure has to do with the spacing and the width of blocks of text. These also have a great impact on readability. Leading is typically 1.5 and Measure 60-75 characters.

Using justification can lead to a lot of white spaces in your text. Using hyphenation in combination can help this tremendously. A new balance algorithm is surfacing which will try to balance lines. This is especially practical for titles that wrap with a single word on the second line…

Flow through text or 'regions' allow to create sections of content that extract text from one 'container' and distributes it to pre defined regions. This makes it easy to create magazine type layouts on web pages. Another interesting thing is to use pagination (like for iPad or Kindle) to make content more readable. Using complex shapes for text regions also help make the experience engaging when combining text and images…

Sections of content like video, animations graphs and interactive content also add engagement to traditional text when really integrated, like a short animation being started or a quote being revealed just when you reach that section of the page.

This was a very interesting talk as it really outlined how a proper presentation of your content can really help stimulate interaction and engagement. It also underlines the fact that the web is just starting to create it's own immersive, multimedia reading experience.

16:40
More CSS Secrets: Another 10 things you may not know about CSS
Lea Verou @leaverou

Lea works at W3C in developer relations. This talk is a follow-up to her presentation '10 things you didn't know about CSS' (see it here: http://lea.verou.me/css3-secrets/#intro). The presentation is very interesting but it's 10 very specific CSS tricks and frankly, the jet lag is starting to make it difficult for me to document her presentation in detail!

So if you're interested, by all means, go check it out on her blog here: http://lea.verou.me/more-css-secrets/#intro

I must say after this presentation, I will conclude that with enough time and creativity, you can achieve anything you want with CSS… as long as you use the latest and greatest browser of course!

End of day 1

So that was day 1. It was very interesting day indeed! We saw that web standards are evolving and that it's all getting more manageable. On the other hand, we also saw how much of an impact mobile is having on the web world and the challenges it brings with it. We learned about the usefulness of offline websites, about the coming ES6, about text readability and the web and so much more…

Now, with a mind overflowing with information and slightly heavy eyes, we will treat ourselves to a bit more of this beautiful city and perhaps a few beers, before turning in not too late I suspect.