Thinking Out Loud

"Straight from the horse's mouth"
Billy Watson Senior Front End Developer

UpFront 2019; what we learnt...

A couple of members of the Absurd Front End team were in attendance at this year’s UpFront conference at Manchester's Bridgewater Hall.

It was a great opportunity to meet other experts in the field as well as see talks by industry specialists spanning a selection of different topics - this year ranging from product design to microservices and webhooks.

The day was packed with some cracking speakers and the format started off with more general themes in the Front End sphere like accessibility and ethics before delving deeper into the more technical side of things as the day progressed, culminating in machine learning and augmented reality!

Future Ethics

First off was Future Ethics, which raised several important issues around how the parameters of ethics have become more acute as technology has progressed and advanced. “It’s time we took ethics seriously” and the responsibility of tech and tech companies has never been more integral.

UpFront 2019

Cennydd Bowles raised legitimate debates in his talk, arguing that the things we build aren’t neutral, that raw data is an oxymoron and user-centred design is individualistic - maybe we need to refocus more on society’s needs? He also suggested that ethics shouldn’t oppose technical progress, but accompany it, and outlined a critique design phase which encompassed deontology, utilitarianism and virtue ethics.

Gov.uk Design System

Next up was Ignacia Orellana who works as a Service Designer for the government - and her talk was about the services behind the the gov.uk design system. This mammoth project replaced more than 1800 sites and over 700 services - so any change affects millions of users - and the design system provides styles, components, a prototype kit and Nunjucks templates.

The project had a unique set of challenges, needing to meet the needs of hundreds of users, allow users to contribute, ensure the system continues to be relevant and also to make it sustainable - document process, continuous improvement and training first timers. Often people don’t use a pattern library if they can’t influence it, but this was a great success and over the last six months, ten new components have been created and 70 people are contributing on Github.

Being Truly Accessible

After a coffee break was a talk about Being Truly Accessible by Rachel Morgan-Trimmer. We take accessibility seriously at Absurd, and Rachel’s talk was truly inspiring. She has ADHD, autism and face blindness, and began by “untangling disability and conditions and stuff” which illustrated how many different challenges people can have in their life.

User-centred design is individualistic - maybe we need to refocus more on society’s needs?

It helps to think of accessibility as usability for all, and a quote from that talk that rang particularly true is that “accessibility is a foundation, not a feature” - which makes a mockery of it being treated as an eleventh-hour bolt-on. The talk concluded with some great suggestions, including ‘not everyone has your knowledge’, ‘be aware people may be hiding their disability’ and ‘remember how you create info is not necessarily how it’s received’. The most poignant for me though, was ‘sometimes the most accessible thing you can do is nothing’.

CSS Grid

The final talk of the morning was Building Intelligent Layouts with CSS Grid, introducing the concept of intrinsic web design which is fluid, beyond responsive and lends itself perfectly to the Grid specification. We’ve used this on some Absurd projects already; it enables simpler markup and styles as well as complete control, and Michelle Barker showcased how to use repeat() to make code more concise and how to use the Fr (fraction) unit to allow flexibility.

Michelle also explained the difference between implicit and explicit, how to avoid the common pitfalls that break layout (like not having enough tracks) and the usage of a visual layout definition called grid template areas. Grid is an incredibly powerful specification for the future of CSS as it also allows elements to be context-aware, and this talk was fantastic as the demo also included possibilities like utilising minmax() instead of media queries, naming of gridlines to make placing items easier and how the use of dynamic CSSVars allows even more flexibility.

Ignacia Orellana

Time for dinner, and with it a chance to discuss and digest the subjects covered so far. The talk that followed, Microservices Mousetrap by Phil Hawsworth, was full of energy and engaging concepts delivered with enthusiasm - exactly what’s needed to reengage the brain after a big, tasty feed!

Webhooks and Microservices

Phil’s talk was about how by breaking the monolith we can achieve bought and built specialist services. Each of these has its advantages; and if you can’t (or won’t) build one yourself, a CMS, assets or commerce service or identity provider can be of great use - though also a risk as single service vendors depend on their success more..

He argued that we should ideally try to attain loose coupling and tight cohesion, and illustrated that smaller surfaces are easier to create greater agility, reason about and evolve. They also enable a more obvious path to MVP - keeping our stakeholders happy because we can choose to have something now, and something better later.

Serverless functions help to shift the burden, as they do one thing and do it well, and Phil illustrated this with an excellent demo of how you can use webhooks, triggers and automation to deploy AWS APIs using Netlify; with very low friction. It was an eye-opening talk and showed how webhooks give us a web-wide API: as they're just URLs. This could help to shape and inform some of the Lambda functions we’ve been working with recently at Absurd.

A more obvious path to MVP, webhooks also give us a web-wide API: as they're just URLs.

Several smaller talks were next - Lightning Talks from the ‘Speaker Bursary’ - which included Digital by Default: asking who gets left behind with the world’s digital shift.. for example, the only way to claim universal credit is online. JS to the Rescue offered tips on how to bring old, abandoned static Front End projects back from the grave with the use of a stack comprised of Express, middleware and body parser.

There was also Prime Directive (an agile concept usually used in retrospectives) which declared that it’s really hard to build a blame-free culture. It’s arrogant to blame something for introducing a bug and much more important to solve the problem. The speaker reasoned that everyone writes bad code sometimes, and we’re all doing our best so give people a break!

Machine Learning with JavaScript

We then got into the heavier, more technical part of the day - starting with Machine Learning with JavaScript. This has traditionally been the realm of Python - largely due to community, packages and syntax - but the recent release of TensorFlow.js has made this much more feasible with a fully supported JavaScript version.

Eleanor Haproff started off by explaining the difference between data science (solving complex problems with data), machine learning (learning from data) and artificial intelligence (simulation of human brain function) before moving onto artificial neural networks, which are algorithms and activation functions inspired by biological neutrons.

Based on the concept of using weighted inputs through layers to achieve output, we can use optimisers to train the model and adjust weights to achieve an expected output. Nasa use TensorFlow to identify planets orbiting stars, and it’s an incredibly exciting and powerful tool. With the JS release you can create and train models, load pretrained models and retrain existing models (transfer learning) either in the browser or serverside.

Michael Flarup

Because it utilises WebGL and the GPU to accelerate functions, memory management is very important to avoid leaks - though there are built in functions for this. The talk really got us thinking how we could leverage machine learning in our applications at Absurd, as it can be used for any number of creative projects; e.g. Magenta allows art and music to be made with machine learning.

Designing for Augmented Reality

The final session was called Designing for Augmented Reality by Michael Flarup who works for Northplay in Copenhagen. Their first game was called Conduct This, and was an example of where the theme of the game defined its design. It achieved 10,000 downloads in its first week - which isn’t bad - but then got featured in the AppStore which catapulted its popularity, getting 10,000 per hour and winning several awards on the way to over 4 million users.

The success inspired an augmented reality version, Conduct AR, and the talk was full of sage advice that the team learned along the way. Relinquishing control of the camera to the user introduces new, unique challenges as core interaction methods require specific design - and controlling both the camera of the ‘world’ and the game is actually quite difficult!

Michael argued that AR works best when you design spatial awareness into the core of your experience, e.g. you can necessitate vertical movement with mountains, and if you want your players to explore the world you need to make it worth exploring! You should “always allow the player to reposition the world” and “give players clear instructions before playing”, such as with lighting, surfaces and warnings on inadvertently hitting and breaking things whilst playing! Also, “UI in AR is hard. Make it clear what’s in-world and out-of-world”.

Conclusion

It was a fun, absorbing end to what was a great day full of interesting subjects, engaging speakers and pearls of wisdom - the range of topics was spot on and allowed different facets of what make up the world of Front End to be covered in levels of technicality. Now to see how we can incorporate some of this into our offerings!

For the opportunity to join us at future events like this and work with our team, take a look at our careers page (we're hiring!).