What I Learned at RenderConf 2016

Overview

I spent three days in April in the town of Oxford located in the South West country side of England. I was there to attend a Front-End Developer conference called "Render". The conference boasted some great speakers from companies such as Google, Facebook, npm and more.

So what did I learn? I could honestly write an entire book on everything I took away from the conference. But because I'm sensible I'll key in on just a few points that I found particularly interesting.

Service Workers & Non-Native Apps

Two topics which I found fascinating were the talks from Google's Jake Archibald, and Operas Bruce Lawson. Together they spoke about the Service Worker API and the rising trend of non-native apps. Service Workers give you the ability to serve your page with no connection after a user has visited for the first time while online using an install event. There's numerous benefits to this, for instance you could create a messaging app that displays all of the messages you've received online, while you're offline. This could also be further expanded to send messages that users have sent while offline the next time they get network connectivity. The implementation can be as simple or complex as you like, but it gives you a lot of good options especially as finding a data connection can be a hassle in some countries.

Creating a manifest that your site can read from will allow you to prompt your users to add your page to their devices home screen upon their visit. If utilized in combination with a service worker you could essentially create an app-like experience without the need for the user to install one. You can even specify the landscape mode the page opens up on, the home screen icon and more. This saves space on the users device, prevents any kind of distribution lag caused when deploying from an app store and other numerous benefits.

While these two technologies are still early in-development I believe that they will become quite important in the future. At the time of writing this service workers are not available in Safari, but with their rising popularity the community hopes that will change.

Accessibility

Accessibility should be taken seriously. I've taken several measures to improve the situation for users of my applications but after listening to the talk from Robin Christopherson it makes me realize there's even more I can do. Things like generous font sizes and contrasts really help those with visual impairments. There's also things to take into consideration such as dyslexic friendly fonts, avoiding Sans-Serif fonts when possible, and more.

One topic he discussed that I found quite interesting was that users who aren't what you'd typically consider impaired can visually, or physically impair themselves with the way they use their device. For example somebody who is in a rush, holding a drink in one hand, or driving a car. Each of these situations might benefit from a tool that's traditionally considered for impaired users. For example larger sized buttons, voice navigation, etc.

He also played a sound byte from a regular captcha input that plays when you click the accessibility button. The crowd was challenged to see if they were able to successfully figure out what it was saying. The results were quite shocking, not a single person had the same results as the person sitting next to them. It's put me off using the traditional captcha inputs. While some services are using captcha for translation services, it's a nightmare to use for impaired users and should be avoided as much as possible.

SVG Animations

Some of the talks focused heavily on using SVG images and animations. The topics discussed included how to properly utilize, optimize and implement them. I particularly enjoyed the talk from Val Head who gave some insight into how to add meaningful animations to a page. She provided fantastic examples and explained how it can add to the user experience when utilized properly. She also went in-depth regarding the cubic-bezier function and shared some great tools such as cubic-bezier.com which can be used to fine-tune your animations.

Wrapping Up

I've left Render with a wealth of knowledge and I can't wait to make use of it all. This post doesn't even scratch the surface.

I also met some fantastic people during the three days I was in Oxford. My team even came fourth place during the pre-conference pub quiz.