A couple of weeks ago, myself and Adam Rustell (FED at Redweb) took the long trip from the South Coast to Manchester for UpFront Conf 2018.
UpFront is a two-day event, with a workshop on the first day, followed by a single-track conference on the second. Back for its 4th year running, UpFront collated a list of speakers with talks ranging from mental illness in the industry to the newest, cutting-edge front end technologies.
This blog post will briefly go through each talk from the conference.
Web Annotation: The Web’s Conversation Layer
The first talk from Lyza Danger Gardner looked at a new W3C standard known as web annotation, which aims to establish a conversation layer, laid over the top of an existing webpage. This allows users to add annotations, or highlight certain areas of an article, either for private or public use.
Lyza talked through the history of web annotations before highlighting the issues and enhancements that annotations could bring to the web.
Climate Feedback (a non-profit group of nearly 200 climate scientists) are successfully using hypothes.is to add contextual information and highlights to articles on third-party websites surrounding climate change.
Once some of the broader questions regarding security, identity, authority and freedom have been answered, this new standard could become useful on the web.
Gavin Elliott, Head of Interaction Design at DWP Digital gave a personal talk which looked at mental health and how it’s effecting our industry directly. Telling stories from his past, Gavin spoke about how he confronted his own deep, sophisticated mental health challenges. He shared how he learned to handle anxiety and ‘imposter syndrome’.
Imposter syndrome is where you do not feel like you are doing enough, or that you are not good enough to be doing the job you have. With so many new frameworks and libraries to understand, it’s easy for front end developers to worry about not learning enough, or not using the latest technologies.
Gavin said, “Being honest about how we feel doesn’t make us weak — we can overcome our impostor.”
Yes, your site can (and should) be accessible: Lessons learned building FT.com
Accessibility is something which is often wrongly overlooked by front end developers. Laura Carvajal from The Financial Times spoke about the quick and easy ways in which accessibility can be implemented on the web to provide a better user experience for everyone. The web should be inclusive to all, and websites should be designed and built so that everyone can use them.
According to Laura’s talk, with 16% of the UK population having a disability, there is a combined potential annual spending loss of £212 billion. So, it makes business sense to put aside both time and budget to ensure your website is accessible – something we strongly believe in and practise at Redweb.
Laura highlighted these issues by using real examples and videos from disabled users.
Make your animations perform well
When used correctly, CSS animations can add real value to a user’s experience on the web. Having said that, when badly implemented they can be deadly to a website’s performance and turn visitors away.
Anna Migas from Lunar Logic spoke about the best techniques to code smooth, fast animations which don’t require the browser and computer to work too hard.
By using both the Chrome and Firefox developer tools, front end developers can see how much repainting is occurring and how animations are performing (along with many other things).
Modern browsers can animate four properties cheaply: position, scale, rotation and animation. Anything else will have a negative effect and is likely to not hit 60fps (frames per second).
Amazing things your browser can do
Personally, this was my favourite talk of the day. Creative Web Developer Ramon Guijarro showed how far web apps have come and how a native app experience can be mimicked by using Web APIs.
Although browser support is currently limited for most of the examples shown, it does show the power of the web and how web apps could be used in the future.
Below goes into more detail of each Web API’s demonstrated:
- Location: Browsers can use GPS and network information to accurately get your position
- Video/Pictures: Browsers can capture video and photos without needing any plugin. Users can even switch between front and rear device cameras and face detection is now possible
- Battery: It’s possible to read battery levels and see if a device is on charge or not. Network information can also be shown
- Notifications: Browsers can now send rich, interactive notifications that integrate with the operating system, just like native apps do. These notifications show in the notification bar and can even be sent without being on the website
- Payments: Browsers can now display native UIs to collect payment and shipping data, with fallbacks to a payment form for users on a non-compatible browser
- Listen/Repeat: Websites can ‘talk’ and listen in different languages, checking how accurately a user has relayed the words
- Gaming: Connected gamepads can be detected with the browser reacting to specific button presses
- Bluetooth: Websites can interact with wireless devices such as Bluetooth light bulbs. With smart homes becoming more popular, this could be useful soon
- Once browser support has increased, these Web APIs will enhance a user’s experience and allow for quicker and shorter journeys.
You can view the demos here: https://soyguijarro.github.io/magic-web (Chrome Canary for Android is recommended for the complete experience).
Stephanie Nemeth showed her love for interaction and beauty by creating wearable clothes which users can interact with. Using a web app, users can change the colours of LED bulbs which have been added to different clothes and accessories.
She shared her story of building interactive fashion, the obstacles she faced and the solutions she found to overcome them.
Although Stephanie had working prototypes at numerous stages, she was only happy with the outcome when she knew it was scalable and clean – this approach can be used for development and shows the importance of thinking ahead to the future.
The final talk was from arguably the most well-known speaker of the day: Wes Bos. Wes is a Fullstack Developer who creates online courses to help front end developers learn about new frameworks, libraries and technologies with a simple, practical and straightforward approach.
At Redweb we are beginning to utilise some of the new features of ES6, which is allowing us to reduce the need for jQuery and utilise more web APIs. Learning ES6 is a learning curve but will help us to develop more intuitive websites with a better and smoother user experience.
As well as the talks I’ve mentioned, UpFront also has a small section of lightning talks from those new to speaking at conferences.
Overall, I think going to UpFront 2018 was really beneficial to both me and Adam. On top of being reassured with the work we are doing, we learnt new things and met new people. It’s also inspired us going forward in many different areas – and who knows, we might even give lightning talks a go next year!
All images courtesy of @upfrontconf.