Fronteers conf ’17

Conference report with takeaways from the Fronteers conference

This year marks the 10th anniversary of the Fronteers conference, held at Pathé Tuschinski in Amsterdam. A single track conference covering various topics of frontend development. The JDriven delegation this year consists of Patrick Ooteman, Auke Speksnijder and Martijn van der Wijst. Topics are: VR, Animations, Developer tools, Caching, a11y, and WebAssembly. The talks didn’t just cover javascript, CSS and HTML. Also relating subjects like writing better language, tackling imposter syndrome and Japanese culture came by. There even was a separate talk focused on emojis :)
We’ll try to summarize the nicest takeaways from the past couple of days.

We need browser wars

To start off, Niels Leenheer gives a talk about the importance of when to use and also when not to use progressive enhancement. You can imagine that a video tag can be replaced by an image for devices that don’t support the native video tag. But Youtube without videos, yeah, that won’t work at all.
After the audience loudly applaudes to an image of ‘goodbye Internet Explorer’, he emphasises that browser wars are a good thing. When every browser would run on Webkit (or nowadays even Chromium), the need to make browsers better would decrease.
Also he said:

‘IE6 was a good browser’

Daring statement! But then when you think about it, at the time it could do awesome things. IE6 became a pain in the ass for developers only later, when modern browsers came around and people were still using IE6. Key takeaway of the talk: think about users, not about browsers.

Imposter Syndrome

Jessica Rose was next to talk about Imposter Syndrome. A lot of people suffer from it. Amongst us 3, we all – to some or more extend – experienced moments of feeling inadequate at the jobs we have been doing. To deal better with the feeling of knowing nothing, Jessica explains that you could either be more friendly, work harder or find your sweet spot for learning to become better. The learning goal at hand should not be too easy and not be too hard, so progress can, and actually will be made.

Cool debugging features

Next up is Umar Hansa. He talks about new features of the Chrome (canary) devTools. We all find this the most interesting talk of the day. We can write a whole blog post about all the features covered! Though let’s list some cool features already:

  • Open a run command box (like in VSCode) with CMD + SHIFT + P
  • Take a screenshot of a whole page or single elements
  • Saving of code snippets for use over multiple web sites
  • Real-time code coverage panel that shows which parts of the code and CSS are (not) being used.
  • There’s a terminal in devTools!
  • Umar Hansa showing terminal in the chrome canary dev tools at Fronteers conference

  • You can import src files and save them while debugging and making changes. You can even do some sort of Git diff.
  • Free modern devTools course
  • Read more in the official updates..

Caching 101

Yoav Weiss gave a very in-depth talk about caching. According to him the two hardest things for a developer are:

  • Naming things, and
  • Invalidating cache

But caching is important. Only there are so many options!
Yoav Weiss showing different load times for different caching options at Fronteers conference
You can read most of what he talked about in Yoav’s own blogpost.

Internet for everyone

Accessibility (a11y) is a returning hot topic at Fronteers. Multiple talks spend some time about it. Alice Boxhall gives some nice insights in how to apply accessibility in your daily development work. E.g. you can use the devTools to inspect the accessibility tree (OAM) which is being used by screen readers by using an accessibility API. This way you can debug the robustness of your application. ‘Robustness’ being one of the four keys of accessibility guidelines set up by the The Web Content Accessibility Guidelines (WCAG):

Web content should be perceivable, operable, understandable and robust

User interactions require ability. The less an interface requires of its users, the more accessible it is. To have a very bad accessibility experience, visit: dontclick.it

Accessibility has 6 syllables

Ashley Bischoff is very elaborate on how language should be optimised for every reader of your text. This talk felt a bit like being back in college. But we all write documentation, content or presentations. So knowing some easy steps to improve on them is very welcome. Some pointers:

  • Use Maximum of 20 – 25 words per sentence
  • Use variety of word lengths, but as short as possible.
  • bit.ly/plainwords is a tool that gives you shorter synonyms for words.
  • bit.ly/readinganalyzer is a tool that analyses the difficulty of your text.

Javascript microcontrollers?

Istvan Szmozsánszky (a.k.a. Flaki), author of “The JavaScript World Domination” talked about a JavaScript alternative for Arduino and Raspberry Pi-like IOT devices to control hardware: the Espruino. There are node bots, node boats and of course node copters being controlled with JS. Even rockets. The nicest example was the BBC Micro:bit. Software with which 7th grade students learn to program (http://makecode.microbit.org).
Flaki also talked about all kind of JavaScript engines for IOT, like JerryScript, V7 and mJS, a 25 kB embedded JavaScript engine for C/C++ which uses only 1 kB of memory, more info.

Fronteers Jam Sessions

If you ever visit fronteers, be sure not to miss the jam sessions, because those are very fun. There were talks of about 8 minutes each, each covering a subject either in more depth or with a lot more humor. Highlight of the Jam Sessions was the talk of @stommepoes about the evolution of icons and how to better apply them to our interfaces. Also we learned that Jake Archibald should always be mentioned. He made a nice interactive quiz, touching subjects around the quirks of frontend development.
Jake Archibald explaining an answer to one of the quiz questions at Fronteers conference

Day 2 (by Auke)

On Friday there were also lots of interesting talks. We are not going to summarize them all, but here are some that we found interesting.

Testing

In the morning there was a good talk about testing. Alicia Sedlock touched on different kind of testing levels and which tools you could use to do that with. A funny example is the gremlins.js monkey/chaos testing library which can be used to test the robustness of your web application.
Key takeaway for us is: test components instead of whole pages to prevent false positives in your test results.

WebVR

Ruben van der Leun had a very good talk about WebVR. He talked about the history of virtual reality and did a nice live coding demo with A-Frame (watchable through a cardboard VR set). Ruben made it clear that it is pretty easy to create a VR experience with some basic models.

Wasm

Ash Kyd talked about Web Assembly or wasm and its benefits. Wasm is:

  • Not a language
  • A compile target (just like JavaScript, as more and more developers are writing TypeScript, CoffeeScript and other languages that compile to JavaScript)
  • Fast – it does not need to be parsed by the browser (JavaScript needs to be parsed by the browser)

You can write your code in C/C++/Rust, compile it to wasm and run it in the browser. There is a nice demo on the website of WebAssembly.org which shows a ported version of the game Tanks.
Web Assembly is still under construction. It is currently being designed as an open standard by a W3C Community Group that includes representatives from all major browsers.

End note

The nice thing about Fronteers is the talks cover a broad range of subjects. It once again becomes clear how diverse the field of frontend development is. On certain fields you’re much more experienced than others. Which is fine. We don’t need to be experts in all fields, but we can choose a speciality. We should always think about the user and the interaction possibilities of our products. It’s getting easier to include accessibility improvements into our development workflow. So let’s make the web easier for everyone.

Leave a Reply

Your email address will not be published. Required fields are marked *