The past two days, I’ve been at the Fronteers 2011 conference. Fronteers is the Dutch trade union for front end developers and this is the fifth year they’ve organized this conference. Last year was the first time I went to the conference, which was okay. This year’s conference, however, was very much worth the time and money spent.
The Future is Native – Aral Balkan
The conference started with a great talk by Aral Balkan titled “The Future is Native”. Of course, that’s a pretty daring title at a web conference, considering the whole “web vs. native” debate. Being a web developer, I had to disagree with his presentation title, but as it turned out, it didn’t cover the whole talk. He started off with how we are basically cyborgs; we use all kinds of technology to extend our physical capabilities. A simple watch enables us to tell the time exactly, a smartphone allows us to communicate with people around the globe, etc. One of these extensions is the web, however, it is limited due to the fact that it’s separated from the OS by the browser. This hinders the user experience, as it stops web apps from doing everything a native app can do. The web also has a few advantages over native, however.
Firstly, web apps don’t have to be installed. You can just go to a URL and you’re good to go. Native is catching up with this with app stores.
Secondly, the web is universally accessible (e.g. from anywhere on any device). This will always be difficult for a native app.
Finally, it’s easy for a web application to always have up-to-date data, a native app will have to set up some sort of sync. The concept of “always connected” is still a pipe dream.
After this comparison, Aral bridged over to the importance of the user experience. He goes on how we build things for other people to use, that means that the user experience is more important than our needs as developers. This is what makes UX design extremely difficult. If you first take away non-verbal communication, then take away spoken communication, you are making it very hard for humans to communicate. Now imagine how hard it is for machines and humans to communicate: that is what UX design is about.
The presentation is finished off with the explanation that good UX design makes a user feel superhuman. The example Aral shows is a comparison between an airplane ticket machine in Sweden and in Norway. The Swedish version requires a lot of user actions, and includes many instructions on what to do and even a phone to call someone for help. The Norwegian version only requires you to swipe your credit card. It makes your life easier, not harder. That is what good UX design is all about.
I liked Aral’s presentation style and at first his talk was a bit too conceptual for me personally. After letting it sink in for a while, I could pick out more and more useful bits.
Accessibility for the modern web – Derek Featherstone
Before I discuss this presentation, I have to admit that accessibility for me is a not just an elephant in the room, but a whole herd of elephants in the room. I know it’s important, but somehow I never get around to applying it or researching how to do it. To all disabled people that surf the web, I therefore apologize. So on to the talk by Derek Featherstone. Derek showed off several techniques to improve existing websites through Greasemonkey scripts. For example, making Google Maps more accessible by adding an interface that uses actual HTML buttons. This allows tools for disabled people to create an interface for their users by binding spoken commands to these buttons.
He then went on to show some examples of code that was totally inaccessible. The example that stuck in my mind were some checkboxes on Amazon.com, that actually weren’t checkboxes, but a whole bunch of tags that were styled to look like checkboxes. This made it impossible for screen readers to recognize them.
As I said, accessibility is the elephant in the room for me, but I’m not alone. Derek’s examples show that it happens on many sites, even those made by large companies that made their name on the web. I do see the importance of it, so I should make some time available to learn about this.
CSS3 Secrets: 10 things you might not know about CSS3 – Lea Verou
The next talk was by Lea Verou, one of the rising stars within our trade. I went to the workshop she gave the day before the conference (which was excellent), so this talk was more or less a summary of that day for me. The ten secrets are:
- Advanced transition functions with the cubic-bezier() function
Lea kicked off with showing us her web tool for making cubic-bezier curves that can be used in CSS3 transitions to control the easing of the animation.
- Border-radius: using percentage values to make scalable circles and ellipses
Everyone by now has played with border-radiuses, but no one has played with them like Lea has. She did a lot of research to see how this property can be used. One of her conclusions was that to make scalable ellipses you shouldn’t use pixel values, but percentages for the horizontal and vertical radii.
- Achieve multiple outlines on a box by using multiple shadows and the spread parameter
The box-shadow property is usually used with three pixel parameters and a colour value. However, it allows a fourth value that controls the spread of the shadow. By using this value, it is possible to create multiple “borders” around a box.
- Making pointer events pass through overlaying elements by adding
Setting the pointer-event property to none allows the browser to allow clicks on an element to syphon through to underlying elements. This can be used to make nicer select fields, for example, by overlaying the arrow button with an image. However, several people on Twitter noted that it’s also a risky CSS property, as it makes it easier to create a clickjacking hack.
- Adjusting tab size for code display with
This may or may not be very useful for many websites, but if you write about code often and use tabs to indent that code (which, of course, is the only correct way), you can adjust the tab size with this property.
- Doing cool stuff with
:first-childpseudoselector to select elements with a certain amount of siblings.
On their own, these pseudoselectors are relatively straightforward to use. However, if you combine them, it’s possible to create a selector that targets all matching elements, if the total number is larger than a certain amount. If I recall correctly, it was something like this:
:first-child:nth-last-child(n+2), :first-child:nth-last-child(n+2) ~ b
- Styling checkboxes and radiobuttons with the
I forgot how she did this exactly, but luckily, her slides are online. So, what she does is this: first, she hides the checkbox. Then she adds some generated content (e.g. an icon), and finally using the focus and checked pseudoselectors, she changes the text color on that generated content.
- Use new CSS3 mouse cursors like
cursor: none;(in games for instance) or
There are a lot of new CSS3 mouse cursors. She lists them all in her slides and I’m sure they might come in handy at some point. cursor: row-resize and cursor: col-resize sound pretty useful for manipulating tables, for example.
- Create background patterns with CSS3 gradients (check out her pattern library too)
This is probably the most awesome secret she shared. These gradients can be used to create some wild patterns, and I’m very impressed with some of the patterns she managed to create.
- Position your background by using
The last secret explains how the background can be aligned on the content-box, so that when you change the padding on the containing element, the background will reposition itself so it stays within the padding. Could be useful.
Well, what can I add to this? The presentation was very well executed. Lea has created her own presentation framework in HTML/CSS/JS that allows her to do live coding from within her slides, manipulating elements on those slides. It makes the whole thing feel very magical.
HTML5 Semantics: you too can be a bedwetting antfucker – Bruce Lawson
After an excellent lunch, it was up to Bruce Lawson to keep us all from falling asleep, and I can say he managed that perfectly. The thing that everyone will remember about this presentation is use of a mankini to explain the difference between the section and article elements (basically, a section can be cut up in pieces, while an article is a single entity, much like said mankini). But that was halfway through his talk, let’s not get ahead of ourselves!
Bruce started off, after some silliness about a certain Dutch word, with the elements that have been kicked out of the HTML spec in its latest incarnation. Things like <center>, <font> and <big> and some attributes on other elements. Basically nothing that any sane front end developer still uses. He then went on to mention the sexy new elements, like <video>, <audio> and <canvas>, followed by a few elements that probably won’t see a lot of use in the western hemisphere (<ruby>, <rp> and <rt>). He also mentioned the element that a lot of historians had been waiting for: <time>. Except that they still can’t use it, because it didn’t allow for approximate times, like “first century”.
Some more tags followed and then he went over to role attributes and why there’s no <content> element (basically, it’s because the browser can figure out that whatever’s left after it found all sections, articles, headers and footers, must be the content.
This was another presentation that was told with a lot of (slightly rude) jokes, but the content was again very useful. Of course, if you follow the developments on HTML5 a little bit, there wasn’t much news in Bruce’s talk, but it’s always very good to get all the relevant info in a short and funny summary. He was also a good sport, and uploaded his slides.
Go with the Flow – Stephen Hay
Stephen Hay normally has good talks, but I found this one a bit dry. He talked about the various layout mechanisms that are in development at the W3C, like flexbox and grid layout. There’s not a lot that stuck with me, but that also might have had something to do with a belated post lunch dip. I can point you to his slides to make up for this lack of information.
The Future of CSS – Current Experiments and Near-Future Reality – Tab Atkins, Jr.
I have to admit I never heard of Tab Atkins before this conference, but I came to the conclusion that he does a lot of good work on the CSS specs that he’s working on. He basically told us about the things that will be coming to CSS in the near future. He started off by talking about image values in CSS, which allows for things like fallback images (e.g. if a browser can’t handle SVG, give it a PNG or a GIF, and if that fails, just give it a colour) or defining the image resolution in the CSS, so that the browser understands how to render the image properly.
The next subject were the small changes that have been made to gradients spec, like changing the way the degrees are interpreted (0deg is now north, 90deg is east) and using directional keywords, like left now indicate the direction where the gradient goes, instead of where it starts. The final change was for radial gradients, which now allow to be sized.
Another interesting tidbit was the use of elements as background for other elements, which makes creating a list of thumbnails next to a big image easier. It also allows for the use of canvas as a background.
Next point on the list was the ::marker pseudoselector which allows you to style list markers. By making use of the @counter-style rule, it will also be possible to define very specific list styles.
Tab then moved into the same area that Stephen talked about: CSS layout modules; he quickly explained flexbox and grid layout.
As an encore he quickly showed off the use of CSS variables, basically the stuff that SASS/LESS preprocessors allow you to do in CSS now. He explained that the CSS Working Group looks at all these initiatives and tries to pick out the features that they feel are good additions to CSS and create a spec for those features.
There was some more info in his talk, which you can find in the slides, but this was the stuff that I found most interesting. Browsers will begin to support these new features pretty soon, so it’s good to get familiar with them. Tab also implored us to play around with these new features when they become available in browsers, so we can point out bugs and omissions in the specs and implementations and make them even better.
Passion. Purpose. Promise. Pursuit. – Leslie Jensen-Inman
The last talk of the day was by Leslie Jensen-Inman and it was a daring move by the organisation to add it to the schedule. I personally liked the core of the message (and comic book fans always have a plus in my book ), but it was a bit too “soft” for a lot of people. The feedback during the talk reflected this. The core revolved around the four words from the title and how one leads to the next. If you have passion for a certain subject, it gives you purpose (to explore the subject). You can foster this purpose by making a promise pertaining to the subject. And by sticking to the promise you can pursue your purpose and fulfill your promise.
In my opinion, this message is no different than the message that Christian Heilmann had in his closing speech at last year’s Fronteers conference. If you’re passionate about web development, then you should put effort into it and you’ll find that the results of that effort will be very rewarding, fueling your passion. The way it was packaged by Leslie might not appeal to everyone, and I accept that. However, I found the Twitter comments derogatory and disrespectful and I spoke my mind about that at the time.
Anyway, I still think it’s good that the Fronteers organisation doesn’t overlook the human side of the trade and gives a platform to this kind of motivational talks. It was best said by the @FronteersConf account on Twitter: “Remember: if you wouldn’t have passion for your job, you wouldn’t be here today.”
Another point that is sort of related to this, is that Fronteers is also dedicated to educating people about front end development and showing what Leslie did with her students, shows that there are many ways to educate people about this exciting area we all work in.