Last Thursday I was lucky enough to get over to the highly regarded web development conference ffconf in Brighton. This was my first time at the event and I can say that it lived up to and even exceeded my expectations. In this post I want to share with you the key takeaways from the event as a whole, having stratified out what I saw as three common themes throughout the conference. Namely, these themes were: Empathy, New and Future Tools and Creative Experiences. Some talks also blurred these boundaries, as you may see from the talk contents.

Empathy

One underlying theme that underpinned several talks at ffconf was empathy. We saw this from the perspective of mentoring in Jo Franchetti’s talk ‘Mentoring: Being the help you wish you’d had‘ where she made the fantastic emphasis on being the mentor you wish you had had earlier in your career. A core message from Jo’s talk was that mentoring is for everyone and that folks at all levels of their career (including senior developers) should consider having and being a mentor. Jo made the fantastic point that teaching others helps cement what we already know as developers, and any potential gaps we may have in our understandings. Furthermore mentoring helps us build up our patience and ability to remain calm.

The emphasis on language and how we talk to others, especially about technology was another core aspect. Jo explained that we often fall into the trap of using language like ‘obviously’ or ‘best practices’ which can often be unhelpful as it implies that often complex or nuanced ideas are in fact simple.

The theme of empathy continued through Jenny Wong‘s talk ‘Is it possible to build a truly diverse community?‘. Jenny went through her experiences organising WordCamp London and the lessons and reflections she had taken away from these events. One of her key points was that often we may talk about the idea of diversity at tech events, but that this can be quite a passive ideal, and one of the things we should be reaching for is inclusivity.

Jenny explained that as with a good website, accessibility is the core to making community events inclusive, allowing everyone to access an event. If organising an event you need buy-in from the whole organising committee to accessibility. Jenny showed how they made ‘does X make the event more accessible?’ and if the answer was yes then it was prioritised. This meant changing things like the tone of voice and ensured use of gender-neutral pronouns on the website, to providing childcare for parents and hearing loops and making sure they work for those hard of hearing. You can see the full list of Jenny’s recommendations and approaches on her slides here.

Charlie Owen‘s talk ‘Dear Developer, the Web Isn’t About You‘ tackled empathy very directly from viewpoint of the relationship between developer and users. She made the very powerful point that as developers we should be aiming to build websites for our users and not for ourselves. Outlining telling statistics like 53% of users will abandon a site after 3 seconds when the average load time for a site on 3G is 12 seconds helped paint this issue. Here Charlie argues we have got so excited with shiny new technology (JavaScript) libraries that we have made the experience worse for users.

A photo of Charlie Owen in front of a screen saying Move at an appropriate speed and make things work

The message is that JavaScript has become the default delivery mechanism for websites, even though leveraging HTML and CSS are more fault tolerant and are generally more performant for user experience. Charlie’s takeaways were that we should be focusing on progressive enhancement, with the rule of least power being applied; if something can be done without JavaScript it probably should be.

New and Future Tools

Machine Learning and AI are topics that have been hard to ignore over the past few years. Personally, I have a fairly superficial understanding of the topic, but thankfully Eleanor Haproff gave an absolutely fantastic introduction to the topics in her talk ‘The Future of JavaScript & Machine Learning’. The talk started out succinctly explaining a common question about the difference between AI and Machine Learning, outlining that machine learning is more about computers learning from data to improve a decision task, and AI is more around simulating human intelligence.

She went on to describe how Neural Networks, an old but powerful machine learning method, is the current popular method to tackle many AI and ML problems. Neural Network nodes simulate biological neurons in some regards, making them powerful in solving complex problems. Eleanor explained how a traditional Neural Network generally has many ‘layers’. This starts with weighted input layers which then adjust based on continued input, an output layer, as well as ‘hidden’ middle layers. A node in the network will activate when it matches a ‘threshold function’. Eleanor went on to explain how networks need to be trained to work, and can learn in an unsupervised or supervised manner. The difference here is that in supervised learning the network is given correct answers upfront and the network tries to mimic the function that produces that result. With unsupervised the network tries to determine its own patterns in the given data.

Eleanor addressed a common question from developers, which is if JavaScript is so ubiquitous, why hasn’t Machine Learning taken off? The answer is that it is a growing field within JavaScript, with TensorFlow.js, a WebGL powered Machine Learning library from Google, leading the way. Eleanor showed some TensorFlow.js demos, each showing off something different that TensorFlow.js is capable of. This ranged from style transfer of famous art onto images, to playing Pacman by moving your head, to finding images that match your body position with a web camera. We were shown how many of these demos can be found on the fantastic website https://aijs.rocks/ which acts as a showcase for great JavaScript based AI demos. Eleanor’s closing remarks were around why the browser is a fantastic test bed for using machine learning, as we have a plethora of input devices from the keyboard and mouse, to webcam and microphone.

Willian Martins gave a fantastic overview of future JavaScript proposals in his talk ‘Back to the future of JS: the next features and amazing proposals‘. Willian outlined the current TC39 (the steering group for JavaScript) proposals which may (or may not!) be coming to developers in the future. He started by exploring what we mean by the this keyword in JavaScript, an often misunderstood concept. Wilian went on to explain there are numerous ways to set this, using one of the explicit binding functions like bind, call and apply, creating a new instance of the defined object, or with an object member function. Wilian explained that for many developers this can get confusing and that using bind or an ES6 Arrow function can be useful in making this predictable.

After a contextual introduction to the this keyword, the talk examined a new syntax for avoiding having to bind extracted functions. The This-Binding syntax proposal allows developers to avoid having to explicitly bind this in the following fashion:


import { map, takeWhile, forEach } from "iterlib";

getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));

// Equivalent in ES6
import { map, takeWhile, forEach } from "iterlib";

let _val;
_val = getPlayers();
_val = map.call(_val, x => x.character());
_val = takeWhile.call(_val, x => x.strength > 100);
_val = forEach.call(_val, x => console.log(x));

The next syntax examined is the pipeline operator which stops having to nest function calls as values. Instead, you can use the simple |>operator to cleanly express that you want to pass the output of a given function to the next function. In some regards, it is similar to the Unix pipe operation in this regard. It looks a little something like this:

    
    // Current approach
    let result = exclaim(capitalize(doubleSay("hello")));
    result //=> "Hello, hello!"
    
    // The same with pipeline operator
    let result = "hello"
         |> doubleSay
         |> capitalize
         |> exclaim;

    result //=> "Hello, hello!"

The last syntax Wilian demonstrated is the partial application syntax, which allows developers to define function calls that take an argument which gets passed in at a later call. This is achieved using the question mark (?) symbol in the function call. As well as functions it is possible to use the syntax with template strings in a similar fashion. 

    
      // Partial application in a function
      const addOne = add(1, ?); // apply from the left
      addOne(2); // 3

      // Partial application in template string
      const hello =  `Hello there ${?}`
      hello(“James”) // “Hello there James”

Wilian warned that these features are proposals for the language and are not yet production ready. As such we should aim to be aware of them but understanding they are not official parts of the language just yet. You can find Wilian’s slides here.

Creative Experiences

Creative experiences was another common theme throughout the conference with several talks focusing on building interactive and fun experiences using web technologies. Firstly there was Lisi Linhart talk on Practical Web Animations. Lisi’s talk was split into web animations from the perspective of the developer and then from the perspective of why they’d be useful to the user.

First up was a more developer oriented perspective, which took us through the browser rendering cycle and learnt about which CSS properties cause which parts of the render steps to execute. For example, we see that using a position property like ‘left’ would cause a full layout reflow, whereas using transform-x would cause a composite reflow which is cheaper for the browser. She also explained how creating new layers using will-change or translateZ can help can prevent reflowing too many elements. The caveat was added that having too many layers can negatively affect performance.

As an end user, it was demonstrated how orientation and transitions help link and relate content for the user, reorienting them. This was demonstrated using VueJS transitions and a nice little demo custom built for ffconf!

An example animation when clicking between a the ffconf location and date

Lisi also showed how perceived performance can also be improved by use of activity and progress bars, hinting at content with cheap to render skeletons and informing the user during loading times to keep the application engaging. Perceived Performance was demonstrated using the new Web Animations API which aims to unify how developers do animations with JavaScript in the browser. In this demo Lisi made a ffconf logo that animated back and forth to indicate loading progression:

A loading animation featuring a slider going over the ffconf logo and it changing from pink to white

Next, we explored the concepts of Attention and Feedback in relation to users and animation. These two concepts are powerful in providing a strong user experience, allowing for expressive and fun ways of improving user journeys. Following the principle of feedback, we can do things like giving reactions to a user input and expressing that a form has been submitted for example. For attention, an explanation was given of how we can do things like showing possible actions to a user with an animation. Overall Lisi gave a fantastic overview of animation for both the user and the developer, blending UX and web technology concepts seamlessly. You can see Lisi’s slides here.

Remy Sharp‘s talk, ‘Using a Modern Web to Recreate 1980s Horribly Slow & Loud Loading Screens‘ came from a place of passion and interest to rebuild his experiences with his ZX Spectrum as a child in the browser. One of his main goals was to replicate the slowness of the original loading experience. Remy did a fantastic job of talking through his process of using the browser to replicate the audio data that was used on the original tapes to play Spectrum games. Next, he showed how to create the side bars of the original Spectrum displays, taking byte data, using the ScriptProcessorNode API and then rendering it to the Canvas. Here Typed Arrays sped up the processing of the binary data. After this, the actual screen rendering was tackled, showing how the screen was split into three 256×64 Arrays, and one 32×24 Array for the colour. Remy then demonstrated how it’s possible to ‘oldify’ images, using the Atkinson dither algorithm and the original Spectrum colour palette. The finale was a demonstration of how it was possible to take a photo on his iPhone and then using the code that he’d written render that image to a real-life spectrum, much to everyone’s delight!

Lastly Tim Holman‘s to talk ‘Weird and Curious Web’ which was a very fun and light-hearted overview of things that he has built over the years, including classic projects such as:

  1. Console.frog – a frog themed twist on the ubiquitous console.log
  2. Obnoxious.css – a irritating CSS framework
  3. Wowen Wilson – the game you didn’t know you needed; guess which movie Owen Wilson is saying ‘wow’ in
  4. Elevator.js – sometimes you just need to get back to the top of the page

Tim went through a series of more recent projects, including a deep dive into the DVD logo bouncing around the screen and how long it would take to hit the corner perfectly (spoiler; it’s a lot). He also showed an overview of a series of games he had created inspired by repetitive contemplative activities like Japanese Rock Gardens.

Next Tim introduced Buddy, a (hilarious) talking friend that follows you around the web in the form of a Chrome plugin. Lastly, we walked through a series of cool and interesting experiments in generative art. Tim explained that although sometimes the experiments seem silly or fun, the skills he learned on each project were very applicable to web development at large. APIs and technologies such as HTML5 Canvas, requestAnimationFrame and the maths involved in generative arts are just some examples of the ‘toolbelt’ Tim developed with his projects and experiments.

Conclusion

ffconf was a fantastic event, a great venue, with fantastic talks and a noticeable and refreshing emphasis on diversity and inclusion. I feel like the day had a great balance of talks, covering many aspects that are important as a software developer and not just the traditional ‘technical content’ avenue. I believe that this emphasis on skills and ideas that are not just technical knowledge but also how to be a developer in the context of a team and community is a great asset and one I’d like to see more of. Indeed, this year was my first ffconf, but hopefully not my last!

Photo Credit: Seb Lee-Delisle