6 Talks from Front-Trends 2018 We Fell in Love With
Recently we participated in one of the most popular web development conferences in Europe, Front-Trends. As in the past, this event took place in Warsaw’s Expo Center, and the event organization was excellent. We had a chance to experience Front-Trends not only as developers, but also as sponsors.
This year’s speakers presented various topics from modern web development. Progressive enhancement, performance, beyond JavaScript, i18n, and programming as an art were issues were addressed during the two-day long conference. Here are the talks that our developers found the most interesting.
Live and machine learn by Sarah Drasner
Sarah Drasner raised the bar for the other speakers by opening the conference with a remarkable overview of what machine learning is and why it is not always a good idea to rely on it. Disconcerting examples from COMPAS, a widely used tool for calculating the Recidivism Score for criminals, have likely changed the minds of many attendees on the subject. Many examples showed how biases in the data can influence results of the algorithms.
However, there was something even more important than that. It was the notion that technology is changing lives and it is our choice how we will harness this power. Using Azure’s API, Sarah showed how to detect emotions and how to use it for the greater good. The question is, do we really need advanced algorithms to fix the world’s problems? In the last example, Sarah showed how rewriting a fire department’s internal app into a Progressive Web App resulted in big improvements. Sometimes just adding a Service Worker with offline support can be a huge advancement.
Further reading:
- Weapon of Math Destruction
- Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech
- A Popular Algorithm Is No Better at Predicting Crimes Than Random People
- Courts Are Using AI to Sentence Criminals. That Must Stop Now
- Language Understanding (LUIS) — Microsoft Azure
Do the right (to left) thing: directional content in react by Maja Wichrowska
You won’t understand the problem until you have to face it. That was my thought after listening to this fantastic presentation. Maja talked about struggles that she and the team at Airbnb faced while making their service accessible to people who read text from right to left. Sounds like a piece of cake? It turns out it’s not that easy, but they managed to develop a high-performing and cross-browser solution — react-with-direction. She explained what the problem was about, showed the approach they took, and the failures and lessons they learned after each of them. I strongly encourage you to examine her presentation on your own and try to predict the potential failures after each attempt.
Further reading:
- Building RTL-Aware Web Apps & Websites by Ahmed Nefzaoui
- Web design for right-to-left languages by Lennart Schoors
- Right-To-Left Development In Mobile Design by Robert Dodis
- Let’s Talk About RTL by Ahmad Alfy
The Layers of Web by Jeremy Keith
The main topic during this year’s Front-Trends conference was progressive enhancement. Jeremy shares the enthusiasm of Progressive Web Application creators and shows this concept as the next milestone in web development. I liked this talk, especially the layers analogy. As developers, we tend to think in binary categories, but nothing is black or white. It’s more of a gradient transition defined as layers.
The same principle is valid for web technologies. We can divide them into several layers. It helps with applying progressive enhancement in your current workflow. You can easily imagine how your application needs to behave when you remove a particular layer. I strongly suggest using this concept in your daily basis work.
Further reading:
- Resilient web design: Chapter 5 — Layers by Jeremy Keith
- The Way of the Web by Jeremy Keith
- Progressive Enhancement: What It Is, And How To Use It? by Sam Dwyer
- Progressive Web Apps
High performance web fonts by Peter Müller
I was amazed to see how easily you can optimize the time of the first meaningful paint of a webpage by reducing the payload and critical path of web font files. A simple solution was presented by Peter Muller on Front-Trends 2018 in his “High performance web fonts” talk. Almost 70% of the websites are using Web Fonts and, if used properly, they can be almost as fast as system fonts.
In his example, Peter showed how rendering time can drop from 6.5s to 2.5s on a 3G connection (over 66% performance increase) with just a few tricks! To achieve this you have to follow certain practices: Self Hosted Fonts, Preload, Subsetting, Set `font-display` Property and Setup Fallbacks. It might seem like tedious work, but the best thing is that you don’t have to do it yourself! Peter created an automated CLI tool called Subfont which will analyze your page statically in order to generate the most optimal web font subsets and then inject them into your page.
This solution is not suitable for every type of page though. Keep in mind that if you use subsets with dynamically generated content, the set of used characters can not be predicted reliably.
Further reading:
- Slides from the presentation
- Subfont tool
- Webfont optimisation by Google Developers
- FontFace Observer
- Font Style Matcher
- Glyphhanger for showing unicode ranges
Haute codeture by Stephanie Nemeth
JavaScript is everywhere nowadays, and it is capable of doing more and more. Saying that, what is the weirdest and the most unconventional task for JS you could possibly imagine?
One of the most distinctive projects was showed by Stephanie. Her project, called LED Couture is a webapp that allows you to control LED lights attached to her dress, necklace and umbrella in real-time! The wearables, powered by an Arduino, communicated with the webapp using the MQTTprotocol. With only 2 bytes of overhead, it’s an amazing solution for anything from IoT to microservices communication.
It was an amazing combination of web and hardware technologies. If you want to check out more cool projects by Stephanie, make sure to follow her on twitter.
Further reading:
What’s next in templating by Filip Bech-Larsen
Front-end frameworks have become a must-have in modern web development. They not only help with state management but also with views rendering. Filip presented a new way of rendering dynamic content using the latest ES6 feature, template strings. This fascinating talk was about the JavaScript standard trying to catch up with current frameworks. Thanks to this, you can now use template strings for efficient content rendering.
One of the examples that was mentioned by Filip is lit-html, of which its lightweight performance has support from Polymer’s creators. It seems to be perfect, but we need to keep in mind that this library was made to be a part of the Polymer framework. That’s why it’s best to use it with web components, which are still not well-supported by browsers. I like the trend to replace features provided by modern frameworks with native APIs. I can’t wait to see if we will use any frameworks in the future.
Further reading:
- What’s next in templating by Filip Bech-Larsen
- Getting Literal With ES6 Template Strings by Addy Osmani
- Efficient Template Rendering Using lit-html
- Custom Elements v1: Reusable Web Components by Eric Bidelman
- Build Your First App with Polymer and Web Components by Luke Oliff
SwingDev’s booth
This year SwingDev joined Front-Trends as a silver sponsor. In our booth we gave attendees a chance to blow off some steam in our VR experience, Office Demolisher. In the game you had one minute to break as many things in our office as possible, in the virtual world, of course :) The best demolisher won a Samsung Gear VR headset.
Attendees could also augment their reality a little bit. Using our WebAR demo, they could land a SwingDev spaceship in several locations in the venue. If you missed that, or didn’t participate in FrontTrends, you can still try it out! Just open our app on your smartphone and scan the marker. Wonder how we did it? Check out the code in our repository.
It was a great pleasure for us to be a part of the Front-Trends conference this year, not only as attendees, but also as a sponsor. We met fascinating people, learned about new trends in web development, and we had a chance to share our knowledge with others. Attendees were excited to learn about our company and try our Office Demolisher game. We hope you’ll visit us next year to see the amazing things we are working on next!
Like it? Tap the 👏 button! Thank you!
This article is a collaborative work of our employees: Mirosław Ciastek, Aleksander Stós, Gabriel Oczkowski and Kacper Kula.
You can find us on our Twitter, Github, Facebook and Instagram.
