Fronteers Conference 2014
On 9 and 10 october was the big event. Two days of inspiring talks and where you meet old friends and make new ones. This article gives a summary of most of the talks. The master of ceremony for this conference was Jake Archibald.
The first day Heydon Pickering @heydonworks talked about best practises on developing with html and CSS. It is all about semantics, it is more readable, understandable and maintainable. For example use [role="tab"][aria-selected="true"] instead of .tab-active. He mentioned that the difference in performance is extremely minimal whether using attributes or class names.
Daniel Espeset @danielespeset gave a peak in how they set up their infrastructure for front end development at Etsy.
Arnout Kazemier's talk was about pushing the realtime web forward. He discussed the pro's and cons of the latest technology to use for realtime web. For example, Websockets, it is supported in IE10 Firefox 31, Chrome 37 safari 7.1, iOS Safari 8 and Android 4.4 and has a simple and understandable API. But at this time of writing it has also some serious bugs:
- Writing to a closed websocket connection can crash your phone. You have to add some latency to avoid crashing browsers.
- Pressing esc in Firefox closes the connection. (fixed in FF20)
- Firefox can create ghost connections.
- 4G, 3G and slower do not suppport Websockets. Fallback is to filter out the mobiles.
- Virus scanners, extensions, the user and network server firewalls can block Websockets
At this stage the newest technology is not really useful in production environment. It is something to keep an eye on, one day we can use the realtime web.
Rachel Nabors @rachelnabors gave a visually beautiful styled presentation about the state of web animation. Animation improves adoption rate of new interfaces, change can be more easily comprehended when it’s gradual, especially for the young and elderly. You have 3 kinds of animations:
- Static animation: start --> finish
- Stateful animations: default state --> event --> predefined state
- Dynamic animations: current state: 1. factores + event + factors: 1a new state, 1b new state
The mini sessions gave us a glance in game development for the web. There are hundreds of frameworks available, Thomas Palef recommended Phaser, a free open source HTML5 framework. If you want to get started with game development he advices to start making a really tiny game like ping, space invader or breakout. Once you have the hang of it, start creating another one with a little more complexity, and so on. Until you ar ready to create a real game you might think people want to play.
Day two started with Nicholas Gallagher @necolas talking about making the Twitter UI infrastructure. The ui is split up in ui-components like: ui-icon, ui-ProductPage etc. Each component has its own file infrastructure and contains only the code necessary for the component, including tests. For the worksflow they created automatic tasks to test and run the new change: make install, build, test etc. They design for adaptability and define components as the unit of scale.
Mobile first means performance first - Dave Olsen
- Avoid DOM reflows & repaints. they slow down page render time as well as burn battery.
- Use touch or fastclick.
- Use CDNs to serve common js libraries to help reduce RTT for requests.
- Use service like penthouse to find critical CSS.
- Also focus on getting a fast initial render.
Sara Soueidan @sarasoeidon gave us a rollercoaster ride through animating SVGs with CSS and HTML. It was a great talk with lot of examples. Things to know about using svg:
- CSS animations only work inside the svg, when using an img, object, embed, iframe tag, or embedded in CSS as background, but CSS interactions won't.
- When you use inline svg both CSS animations and CSS interactions will work.
- SVG2 will contain more attributes which we can use in CSS.
- With SMIL you can e.g. animate attributes and do event handling. At this time of writing SMIL does not work in IE and Opera Mini.
Hell, is not understanding my own code - Kyle Simpson
Everyone at the conference has written code that worked without knowing why. First learn the language in depth and you also need better tools. Kyle Simpson @getify gave us a list of handy tools to make your live as JS developer easier. He is working on a configurable two way formatting tool to end the discussion of whether or not using semi colons, whitespace vs tabs. Pick the tools that suits you, but be aware there is no such thing as a holy grail for the right toolset. The tools he recommended are:
- esprima/acorn (parser)
- escodegen (code generator)
- escope/eslevels (scope analyzer)
- istanbul (code coverage)
- estraverse (analyze AST)
- eslint (pluggable code linting rules)
Petro Salema closed the conference with an inspiring talk, named "Dream big, think small".