Skip to main content

Web Directions Code Conference

By Haydon 5-10 minute read

Earlier this month, Gianfranco and I were lucky enough to go to the Web Directions Code conference in Melbourne.  The Code series of conferences has been running for 6 years now, and is primarily focussed around front end development. With such a frequently evolving industry, there’s always lots of great speakers, information, and developments to find out about, and our team is always enthusiastic about going along.

This year was no different, with all of the speakers presenting excellent content, it was clear they had put great time and effort into the topic and to their presentations. Some great animations, interesting and sometimes emotional stories, as well as videos made them very engaging.  Given that the conference covers quite a wide field of web development, some of the speakers' content was more relevant to what we do than others, so I thought I’d highlight a couple of the topics and speakers which were standouts for us.

I first saw Sara Soueidan present at the first Web Directions event I attended several years ago and was struck by the depth of knowledge she has in front end development, particularly around SVG and CSS. She covers a great deal in her short time on stage and I found myself furiously scribbling down notes throughout. Sara showed some of the emerging features of CSS, usage of SVGs and variable fonts.  

Sara firstly covered variable fonts, which I’m particularly excited about. They are a new approach to webfonts that aim to reduce the amount of data a user needs to download for a website, while enhancing the flexibility of typeface control. These fonts allow CSS to control the width, weight, slant, italics and optical size of the characters to a very fine level of detail. With a traditional webfont, to do this, multiple versions of the webfont needs to be included, resulting in a larger data download hit to the user.  Variable fonts are not fully browser supported just yet, though providing suitable fallbacks are put in place, they can be taken advantage of now.

Sara also covered colour theming in CSS, which can be used to cater for different users from an accessibility standpoint. This was focussed around the underlying setup from a development point of view, and offering the user control of this by an option on the page.  So for example a ‘dark’ or ‘light’ theme which can be toggled with the flick of a switch. As well as this, we had a glimpse of an emerging CSS feature - detecting the ambient light level on a device. This would allow a developer the ability to modify the website colours to cater for that - for example, reading at night time, compared to in bright sunshine. This development is a while away from being used as there is no current device support, but it’s very interesting to see these sorts of developments emerging and to see what other leading edge features are available.

Simon Knox had a very interesting presentation about the offline experience (or lack of) which we encounter when browsing the web. Now, most of us at some point have attempted to open a website when our home or office internet has gone down, to be greeted with an error page (in Chrome, you can play the dinosaur game at least). Simon demonstrated some advanced options which can be offered to a user in these situations for a much better experience. He showed that, through the clever use of JavaScript service workers, website content can be cached in the user’s browser, to be displayed at a later time, even when offline.  It is also possible to cache more than just the pages the user has visited directly, a great example of this is the documentation for a JavaScript library called lodash. Try visiting a page of the documentation, then go offline, you’ll find the rest of the documentation contents is still navigable.  I’m excited to give this a try and I’m thinking of situations where this will be most beneficial to our clients.

Another great talk was led by Paul Hesley, regarding the way we, as developers, deal with our JavaScript, specifically the way we compile it and then include it in our projects. He demonstrated how with ES6’s native module support now being available in almost every major browser, we can now export portions of the site’s JavaScript code as modules, which are then imported into other script files where dependencies are required. Essentially, this lets the browser determine the dependencies and modules required, which in turn, reduces the number of requests the browser will have to make on any given page under various conditions.  This will increase performance and overall make for a more efficient way to manage our scripts. I am very excited to start implementing this new way of writing our modules.

Marcos Caceres also conducted another great presentation revolving around the state of Authentication, and the possibilities it provides for us developers. Being able to access the authentication API within the browser allows us to do things such as silently signing users in, prompt them to re-authenticate when making changes to their account, or pre-fill a form with login details. This gives us the ability to provide users which a more fluid and comfortable user experience. For the time being, there is limited support for these features (Chrome only).  However, it’s very exciting to see what is going to be possible and accessible to developers in the near future.

Overall, there was a lot that we took away from the Code conference ‘18.  It is great to get a head start on learning about emerging technologies and techniques and we look forward to implementing these to improve the end user experience and provide more value to our clients.  The conference ran very smoothly and John is an excellent host, keeping things moving, introducing each speaker and posing questions to the speakers from the audience after each presentation.  We look forward to next year’s event!