If you are following me on Twitter, you might have
been spammed seen loads of Tweets last week with the #fronteers12 hashtag. This was because of the fact I was attending the Fronteers Conference, where loads of interesting talks were held.
Places like these are also great for meeting and talking to people. I talked to a couple of them (like @mathias, @mikevhoenselaar, @leaverou, @eising and @smashingmag) who I only knew from "the online world", but it can be pretty inspirational to talk to them in person as well.
With this post, I wanted to share a couple of interesting tweets, ideas, notes etc. from the conference. If you find these interesting, I do recommend you to watch the video recordings taken at the event, which will be published somewhere next week already.
I want to thank Info Support (my employer) to let me attend the event, but especially Fronteers for hosting it. Also, a big up for Christian Heilmann who was the "MC" during the conference and did a great job (especially at the Q&A).
Expand all talks
Day 1 (October 4th)
Adapting to Responsive Design
A great start of the event with the scene from The Matrix where Neo needs to pick the blue or the red pill (especially because the conference is held in a cinema). Mark compared this as the following:
Responsive Design is a red pill. We've been living in a conceptual hallucination of control. While 'pixel perfect' is the blue pill. Reality simply doesn't work that way.
- Teams are working in silo's: Design, UX, managers etc. don't know from eachother what they're doing. Get together in order to get stuff done.
- Advertisements in responsive design is horrible. They always sell fixed width/height ads, which - in responsive design - isn't possible.
- A page doesn't exist anymore: A page as we know it should actually be build up from several, reusable building blox. The same goes for content.
- Although responsive design might be more expensive, it will work on all devices on the long term which will make the client happy.
The New And Improved Developer Toolbelt
Learn to love the command line. It isn't scary. You know how to use PhotoShop which has 300 buttons. That's scary.
Addy is a great speaker with (seriously) a lot of knowledge when it comes to webdevelopment. His goal of the talk was to provide us with some great tools which will help you improve your workflow. In other words: Let the tools do as much work as possible for you, so you have more time to actually build stuff.
I could simply add the list of tools that Addy recommends, but it's easier if you go through his slides yourself. I do want to point some things out:
- Also designers should work with the command line; it speeds things up.
- Code Linting is your first unit test.
- Yeoman allows you to set up a complete project super fast. This includes getting the correct files, unittests, templates, package management etc.
A Pixel is not a Pixel
I didn't know Peter-Paul was the owner of Quirksmode.org, or even a Dutch guy for that matter! His research in the mobile web is very extensive, which made his talk somewhat hard to follow. He used a nifty little camera to show what he was talking about on his phone. His talk was actually about a blog post combination (1 + 2) he wrote about earlier.
I would love to share some notes, but it's pretty hard to understand without the context. Luckily, Peter-Paul already showed the presentation before in San Fransisco which was recorded.
- "All the tools (frameworks) we created for desktop use are useless on mobile, they're too battery hungry."
- "Consider connection speed when deciding whether or not to serve up retine images."
Using JS to build bigger, better datavis to enlighten and elate
Alex is an incredible fast speaker (his talk was done in almost 20 minutes and had almost 30 minutes left - although that was also because the wrong slides were presented), which I personally like very much. Although there are loads of data visualisation tools out there, Alex didn't found one that suited his needs. Therefor, he created Miso.
- Google Refine is an useful tool to to clean up messy data.
- Animations and user interaction is a really important part of telling the story in datavisualizations.
- Sadly, fallbacks (sometimes even in the form of Flash) are still needed. Biggest problem is searching for a good IDE.
- Older versions of IE is holding the team from Alex back, since it's very costly on development time.
Ten things I didn't know about HTML
Mathias is a young guy who does a great job at creating amazing tools and contributing to projects for the web community. And to prove even a smart person like him could learn, he showed us some neat tricks/funny to know stuff which he found amusing. Although his examples aren't great for practical use, it can open your eyes to do stuff different than you would usually do.
- In plain HTML, you can omit the hash symbol (
#) when using
bgcolor. You can even enter words in that attribute, and it will exclude the characters that aren't hexadecimal. So,
bgcolor="chucknorris" will give you a red background; the color of Chuck Norris' enemies blood.
- In HTML, you can omit the semicolon when using special characters. For example, you can produce the
< symbol by just using
& can even be created by just using
- Did you know you can also omit the
body tags? Your browser will create them for you.
true, except for one:
document.all. This is because of backward compatibility issues.
- In CSS, do you think quotes around font family names with spaces are required? (Example:
font-family: 'Comic Sans MS'). Apparently not.
Style guides are the new Photoshop
The talk from Stephen took a pretty interesting approach when it comes to creating mockups for responsive websites. In short, he's tells us that Photoshop (or other actual design tools for that matter) shouldn't be used to create mockups, but start with the HTML and CSS directly. You can live-demo the mockup to your client, and export the documentation that has been written in CSS. In my opinion, that's pretty flexible and the real design work can be done later. Pretty interesting approach!
- Use tools like Adobe Edge Inspect to preview & inspect web designs on devices.
- The Twitter Bootstrap (much like other frameworks out there) is a design pattern library, not a styleguide.
- Stephen would like to see a tool that automatically takes screenshots, is highly maintainable, has documentation in CSS and is free-form writable. Sadly, it currently doesn't exist (yet).
- To get around this problem, you could use a combination of tools that does this for you: Dexy for documentation, PhantomJS/CasperJS for screenshots and Jinja for the code.
- Make your CSS modular and scalable: Take the SMACSS approach.
- Stephen shared his version of the Dexy Styleguide Demo.
Antoine Hegeman, Bor Verkroost, Bram Duvigneau & Chris Heilmann
Fun fact: I've been to the same school as Bram, and it was very nice to see him again (sadly, he could not actually see me since he's born blind). Great respect for all the members in the accessibility panel (this also includes Chris - who doesn't have a disability - but did a great job asking interesting questions), who showed us which problems they're facing when surfing the web.
- Prevent too much scrolling
- Make sure your semantics are correct
- Make proper use of whitespace
- Get rid of extra clicks for navigation (example: Splash screens)
- Don't add a screen reader to your site; blind people would use their own anyway
More CSS secrets: Another 10 things you may not know about CSS
Lea was actually the first person who told me about Fronteers. I was blown away after watching her talk from last year (10 things you might not know about CSS3), especially since she was live coding on stage. This year, she returned with a follow-up from last year and once again, my mind exploded with some useful info.
- The CSS property
background-attachment: local allows you to set a background image relative to it's element's contents. This allows you to create pretty nifty stuff.
box-shadow gives you a pretty ugly shadow when working with transparent PNG or speach bubbles. CSS filters (
filter: drop-shadow) come to the rescue!
- Almost nobody is using
text-align: justify because of the huge white spaces that will appear. Solution:
hyphens: auto; which will automagically add hyphens for better reading.
- Using the
steps property in combination with animations, a very cool animated sprite can be created. Example by @simurai.
Day 2 (October 5th)
The biggest devils in the smallest details
My mouth fell wide open during the presentation of Marcin. He's one of the Google Doodle creators (there are actually a couple of Google employees working full-time on Google Doodles!), which made me expect a lot of "design things" that would be presented. Yet, Marcin showed us the problems his team is suffering when they come up with a great idea but don't know how to port it to the web/put it inside a doodle.
- The Jules Verne doodle actually had multiple versions, since people didn't understand what to do and could use the joystick.
- The PAC-MAN doodle has some fun facts. At the 256th level in Pac-man, there would be a kill screen; The Google Doodle does this as well. People called their ISP because - in the first version of the doodle - the game would automatically start, including the sounds. Those people calling thought it was a robot invasion.
- People didn't know what to do with the Robert Moog doodle, since it was too complex.
- Images hiding other parts of the image are used for the Rube Goldberg / 4th july doodle in order to make it work on all browsers.
- A couple of the doodles during the Olympics were interactive, like the one with the hurdles. Apperently, a couple of days before that, the GamepadAPI got released and the Google Doodle team decided they really needed/wanted a doodle that was working with that API.
Open source ain't free
David changed his talk at the last moment (he wanted to talk about Keep it Simple, Smartypants). The creator of jQuery Masonry got overwelmed by it's succes, and loads of people were asking him for support for the project. At first, David told them: It's open source, you figure it out, deal with it. Personally, I've dealt with a lot of these problems too (Marcofolio.net contains loads of demo's and people ask me all the time to add/change stuff).
Yet, David changed his point of view. He decided to start his own company where people could download Isotope. It comes with support and is even better than Masonry, but you'll need to pay in order to use it. It provided David with enough money to get some stuff he wanted in his personal life, and he can be a nice guy to provide support for a project he cares so much about.
The State of HTML5 Video
Jeroen is the creator of the famous JW Player, a commonly used video player for websites. Even the first versions of Youtube used his player! Fun fact: Back than, Jeroen sold a site wide license for only $15! The latest version of the player (natively) supports the HTML
<video> element, and Jeroen told us a couple of (upcoming) things from the element.
Building the web platform
Anne van Kesteren
For me, the talk from Anne was pretty hard to follow. Mainly this was because his talk was about an area of expertise which I didn't know a lot about, and Anne did. And with a lot, I mean: a lot (he should, since he's a co-writer on the specs).
Sadly, because of the high/different level of his talk, I didn't make a lot of notes. Yet, he shared a Live DOM viewer with us, that shows which elements are created (even with an empty DOM). The W3C standards are now on Github for pull requests/forking.
I can smell your CMS
Although Phil didn't had the most technical talk (which I mostly love), his talk was one of the most fun at Fronteers. One of his great one-liners: WYSIWYG is more a WYSIWTF when you look at the source. People from the crowd were asking questions to Phil after the conference, and he shortly answered all of them in a seperate blog post.
- Client think that they know what they want. Instead, try giving them something they actually need.
- Don't create huge homepages, both on KB/MB or long scrolling sites.
- Let traces of your CMS don't effect your end user: Don't show long/ugly URL's, no bloaded stuff in the HTML (like ASP.NET View State) and ugly HTML left behind by a WYSIWYG-editor.
- YAGNI: You Ain't Gonna Need It. Loads of clients ask for stuff ("We want mobile support!") while < 0.1% of the visitors uses a mobile device. Challenge the client to re-think what they really, really want.
- Provide the client with small CMS'ses with small room for error, like Jekyll and Perch.
Although I wouldn't directly call Peter a shy guy, he is quite hold back. But his very creative mind makes him one of those persons who tells you: "Look at what I made" and will blow you away. He was working with CSS3 transitions, got stuck on a problem and solved it in a very nifty way.
- Instead of using
translate, you could also use the
matrix property to
tranform an element.
matrix property is pretty complex and takes 6 argument. To understand it better, Peter greated a useful matrices tool.
- Next to the
matrix, you also have the
matrix3x property to
transform elements in 3D space. That one takes an even more shockingly 16 parameters!
- There a lots of argument that you should use CSS transitions instead of JS animations. A couple of them are: Optimized, hardware accelerated, no reflows, battery friendly (mobile) and lot's of FPS.
- Problem: You can's stop an transition while it's animating. Peter found a solution around this problem, by getting the current computed style (
window.getComputedStyle(element, null);) and directly applying it with JavScript and removing the transition. Note: The
transitionEnd function is not called when you work like this.
- As an end-result, Peter showed us a nicely 3D cube created with pure CSS3 transitions (with some JS).
JS Minty Fresh: Identifying and Eliminating Smells in Your Code Base
"Code! Code everywhere!" The talk from Rebecca really was more my kind of talk: more in depth JS programming stuff. With her Minty Fresh-talk she wanted to inspire the audience to embrace beautiful written, highly maintainable code. Get rid of code smells in your code base!
- Problems of code smells: Harder debugging/maintaining/adding features, you create more smells on top (which you never can/will fix), you obscure opportunity.
- Writing unit tests can help you write better code or create smells in the first place.
- Use deferred.pipe() and jQuery.when() working with AJAX calls (especially when it comes to retreiving for several data sources).
- Template your HTML instead of building the HTML in your JavScript yourself (Underscore.js and Knockout.js could help you out here).
The Web Platform & the Process of Progress
Fronteers ended with a very inspirational talk by Alex. Especially his final words/call to action were true (bud sadly hard to realize): Stop supporting old browsers! Yet, his talk gave some great pointers on how you can try to convince your client to actually drop support as well.
- Polyfills are a tax for your website. It's like pollution: Your clean code will be cluttered with polyfills. Don't even mention mobile browsers that will download more lines of code, just because of polyfills.
- The currently popular
<canvas>-element was already introduced by Apple in 2004. We've never been able to use this great element, since it took soo long for browsers (especially Internet Explorer) to support it.
- Optimistically, New Features Shipped Today Will Not Be Usable Until 2016
- Big websites like Youtube and Google show warning dialogs you should upgrade your browser. Gmail, Google+ and Yahoo Mail even don't support older browsers at all. Gmail will drop support for IE8 when IE10 hits the market. So why should your website?
- Because we're making everything fully backward compatible, viewers of a website will never feel the need to upgrade their browser. That's what we need to change in order to make the web a better place.
For more tweets, pictures, slides (if they are added later) etc., please visit the Fronteers page on Lanyrd. Also, for more notes I would recommend you to read this collective note making for day 1 and day 2. The picture above this post has been made by Robert, who took more amazing shots.
Tags: fronteers conference notes tips
Interested in this topic? You might enjoy another article I've written called
Spread the word and submit to: