Fronteers 2019

This year it was held again in the eye-catching and beautiful Tuschinski theater in Amsterdam on 3 and 4 October. The talks were given in the main hall which has a great traditional atmosphere (and great seats 😉). What makes Fronteers such a nice conference is that the talks are very diverse. The talks are not just technical but can be very broad, for example about the history of the web or how the process of adding a new feature to the web works. The conference, hosted by Phil Hawksworth, was held in two days. There were 18 talks in total, excluding the lightning talks. In this article, I will give an overview of the talks.

The main hall

All constraints are beautiful — Charlie Owen

Charlie explained that we all have to work and live with constraints, but that is not a bad thing. By adding boundaries and constraints, people just get more creative. For examples haikus and sonnets, where there is a limitation on word usage.

Technology places many constraints on the web, but also people have many constraints. We should think about our users and make our applications inclusive for everyone, not exclusive to a certain group of people with a good phone and internet connection. We should care about users with disabilities, even though companies do not want to spend time and money on it. We should make time for accessibility, because 15% of the people have disabilities and the people who are not disabled should realize that it is a temporary privilege.

According to Charlie, performance engineering is nice, but we should change it to resilience engineering, which means making websites that are tough. She recommends the usage of progressive enhancement and server-side rendering to make websites more robust and resilient, but these measures should only be taken into account when a website is important. Some guidelines to measure the importance could be whether someone’s life depends on the application, it will impact a user legally or his/her job or whether it will cost the user money.

Deep dive into images on the web — Chen Hui Jing

Chen Hui Jing gave an inspirational talk about rendering images on the web. She gave a historical overview of how images came to be as we know them today and how image data is stored. She also mentioned the Burn all GIFs day on 5 November 1999, which was a result of the company Unisys that had a patent on GIF files and wanted users to pay for usage. Fortunately, Unisys decided to back off on the license payment and we can use GIFs freely on the web today.

Chen Hui Jing also showed optimization tips for JPG and PNG images.

Optimizing JPG images

• Use high-quality source material (JPEG)
• Alignment of the image on the 8x8 pixel grid
• Reduce contrast and saturation
• Saving your JPG as a grayscale image and color it in sepia with CSS
• Slight blurring of an image

(Of course, you can also use JPG encoders)

Optimizing PNG images

• Reduce the number of colors
• Choose the right pixel format
• Use indexed images
• Optimize fully transparent pixels

She continued her talk about how images combined with other pixel data are rendered on the screen by the browser. The rendering pipeline paints the parts of the display in layers and combines the layers into one final image through compositing. Also, a rasterization process has to be performed before graphics can be displayed on the screen. This process is repeated when the UI on the page changes, but since only part of the screen changes the invalidation method is used to figure out what changed and only change the relevant pixels.

Chen Hui Jing explained that the rendering tasks were originally done by the CPU on the main thread and that could take a while. Because of the major development of the GPU, browser engineers moved the rendering tasks to the GPU. With WebRender, the separation between painting and compositing is removed. And because of the GPU’s parallel processing power, painting and compositing can be done in a single step.

More information on Chen Hui Jing’s talk can be found here

Fun & Games with ES Proxies — Christophe Porteneuve

Christophe Porteneuve explained to us the world of proxies in JavaScript with demo examples. The general idea behind a proxy is that you redefine the semantics of some core language features without altering the original object, it wraps it. Proxies can be explained by traps and handlers.

Traps are functions with a pre-defined name that intercepts a language interaction to replace or customize it. It can delegate to the original behavior with the Reflect API. A handler is an object that bundles a series of traps. It is usually single-topic. A proxy is an object that wraps another object and intercepts some or all of the possible language interactions on that object. It will pass down the interactions defined in the handler to the object.

Some of the available traps are:

• Get
• Set
• Has
• defineProperty
• setPrototypeOf

It is better to use the reflect API for methods to use on traps instead of using the Object methods such as in and delete.

There are also revocable proxies. The revocable construction method makes it possible to revoke access to the underlying object which can be useful in some cases.

Christophe also mentions the library Immer for making usage of immutable states easier. It goes well with React because it makes usage of the … operator unnecessary, which makes the code more readable.

Some problems with proxies are that the this context is affected, it becomes the proxy context. There are issues with identity-based mechanisms such as WeakMap, and there are also issues with built-in objects with methods that use internal slots.

The slides with code can be found here

Paint the web: creating art with CSS — Eva Lettner

This was a very fun talk to watch. Eva showed us live how to create art with CSS. It was amazing how she made it look so easy. Eva explained which tools she would use to create a floating bee on the screen. It was great to see how much you can do with just rectangles, border-radius, triangles (change 3 border sides to solid transparent and one to color), box-shadow, gradients, and pseudo-elements (before and after). The takeaway of her talk was that we all should make useless stuff to learn and create something fun.

Secrets of native-like PWAs —Jad Joubran

His talk was about how we should make PWAs more native like. Jad stated that PWAs are successful when they are built with Web Technologies that satisfy and exceed user expectations.

The pillars of native-like PWAs are:

• UI
• UX
• Reliability
• Performance

The steps to make a PWA more native like are as follows:

0. Design & Build an App Shell

1. Build an advanced app shell, with a tab bar and possibility to swipe between pages
2. Reduce JavaScript footprint by code splitting
3. React with fast interactions, every action needs a reaction/feedback
4. Make it work offline with caching but be mindful of storage, and don’t forget to clear cache when a user is logged out
5. Increase ‘add to homescreen’ conversion, by delaying the prompt for ‘use the app’ until the user is engaged and wants to make more use of the service
6. Build a smooth update process. We can learn from native desktop apps how to notify the user there is an update available

Joubran concluded the talk by stating that we should put more attention to the details.

Who designed this? Where web platform features come from, and how to get involved — Rachel Andrew

This talk was about how new specifications on de web are designed and evaluated. Fronteers (a volunteer organization) is a member of the W3C (a community that develops open standards). Rachel has been the Fronteers representative to the W3C and Fronteers can cast a vote for whom should be elected for the W3C Advisory Board. Participants on the Advisory Board use their best judgment to find the best solutions for the Web in general. W3C working groups work on specific web standards and Fronteers members can apply if they want to join, because Fronteers is a member of W3C. It does take a while before changes and new features are made, patience is required. Rachel wants to raise awareness that all developers can contribute by reading and commenting on specification issues on https://github.com/w3c

Rachel also asked the audience to raise browser bugs, use firefox nightly to help test the web, and to help web platform tests in improving the web.

100% CSS Mario Kart — Stephen Cook

This talk was just amazing. Stephan wanted to make the statement that even though the code was not optimal for production, he wanted to show what CSS can do and that we should not blindly use JavaScript when CSS is also a powerful tool. In his case, he used box shadows to create a Mario character in Mario Kart. Stephan used animations (negative animation-delay) with keyframes to make Mario move and make the scenery move. In order to listen to the left and right keys on the keyboard to make Mario move, Stephan used the valid and invalid pseudo-classes together with the pattern attribute for input. For changing characters he used radio buttons and the checked attribute.

Custom Web Shadow Elements, or Whatever… — Paul Lewis

There are a lot of discussions on frameworks and Web Components. Paul talks about the two camps of web standards and the proprietary (frameworks and libraries). They bring their own perks and drawbacks to the web. For example, proprietary technology moves faster but often more code is needed and there are breaking changes while businesses are dependent on the library. In the case of web standards, one size does not fit everyone. But the changes are rare so the platform is very reliable and web standards are portable. Paul describes the two worlds as ends in a continuum. Sometimes we are leaning more to the proprietary end and sometimes we are more going towards the web standards. It is a trade-off, because we all have to make choices if we care more about the performance, portability, or features.

Paul continues about the discussions between the two camps about Web Components, but wants to say that we should always have a conversation about standards and the proprietary and protect this process instead of trying to answer the question who is right. One cannot live without the other. Web standards are known and need the proprietary to investigate the unknown, to try out new things. When the proprietary changes are good enough they could become web standards.

How We Built the World Wide Web in Five Days — Jeremy Keith & Remy Sharp

In this talk, we were taken back to the history of the internet, from the Big Bang to CERN in WOII up to the point where ARPANET was created and grew into the internet. Then, Tim Berners Lee at CERN built the software he named The World Wide Web in 6 weeks with the NS Builder. Jeremy and Keith were invited to CERN as hackers to recreate the first web browser from 30 years ago. They rebuilt the software on a NeXT machine how it was supposed to work: just content, hyperlinks and editable text.

Jeremy and Remy emphasized that the web browser was published for free by CERN, which was very generous. Their takeaway was that the web lost its simplicity and resilience if we compare it to how it used to be. Web development is sometimes becoming too complex, where it used to be just to linking pages to each other. ‘If you have something wonderful, defend it otherwise you will lose it’. The world wide web is built by everyone and should be open for everyone to create. We should defend the openness of the web.

“The web lost its simplicity and resilience if we compare it to how it used to be”

Component API Design and the Developer Experience — Diana Mounter

Diana works at Github and explains that it is a difficult task to offer a great developer experience for the 31 million developers they serve. She works on the Primer CSS which takes care of the styling of Github, but it is hard to make changes, there is a slow feedback loop, and there is a risk of unintended side-effects. Diana realizes that there comes a lot of responsibility for Github in serving websites. There is always a tension between offering flexibility for the developers and constraints from the business. Github used to have global CSS styles but that became a mess where it wasn’t clear what changes would have an impact on. That is why Github tried to make separate components for UI elements. These components help them repeat and for encapsulation.

Components on the Web — Jack Franklin

Jack talked about what approaches we could use to building components on the web. Jack also knows that not everyone has the chance to start over with new technologies in the code stack they use every day. He would suggest to just start adding new reusable components to the code when you have the chance. Once you start it becomes easier to add more components. Jack explained that a component is at the core a box of functionality which provides HTML, CSS, and JavaScript. It should be a black box where you can work in isolation. In the former days, frameworks would divide the application up into the model (data), view (HTML), and controller (business logic). But bugtracing would become hard, you don’t know where to start. When using components, you can fix the bugs in isolation. Jack emphasizes on creating black box components: when using the component you don’t have to worry about its implementation.

Jack discussed that when you are building components you will have the trade-off between maintainability and configurability. His takeaway was to always prefer explicit configuration over implicit options. Then, Jack talked about when to consider splitting up components because they are becoming too big. You can consider the following criteria:

• How many lines of code is it?
• How many different HTML elements does it render?
• How hard is the component to understand?
• Is the component hard to name? Would there be an ‘and’ in the name?

Unfortunately, it is not always possible to put everything in black box components. They do not know about each other or the system, but sometimes it’s required they do (for state and data fetching). Therefore, some components cannot be black boxes.

Jack states that it is better to incrementally add new features (in this case components) to the code to immediately add value to the project instead of rebuilding the application with new technology from the ground up. Jack’s final takeaway was to try out new technologies even though it might end up being a mistake. With a component based system you can easily revert a mistake, or just not ship it.

Learning From Machines — Ashi Krishnan

This talk about AI was mind-blowing with amazing visuals. Ashi started the talk off by saying we are all computations and that our world has been created on a powerful ancient computer. Her talk shows the similarities between how AI computers operate and the human brain works. You just have to watch the talk yourself.

“We are all computations. Our world has been created on an ancient computer, powerful beyond imagining”

High Performance Web — Peter Müller

Peter Müller shows us how users experience a website with non-performing web fonts. Web fonts take more time to be loaded instead of system fonts. 70% of the websites use web fonts mostly for brand recognition, but companies should know how to use web fonts while still serving a good user experience. Peter divides user experience into the first paint on the screen and the first meaningful paint on the screen. Peter shows us 3 fast font loading techniques:

1. Use the font-display in CSS or as display attribute
2. Self-hosting of fonts
3. Preload fonts
4. Subsetting (choosing which parts of the font you want to use and create a new file from it)

The last technique is tricky, you need to know which characters are used on the web page. Aggressive subsetting is seen as an anti-pattern. To make subsetting work you need external dependencies, and a complex workflow (every time content on a page changes the workflow has to rerun). Then, still there are fallback typography flaws (characters have different fonts). Luckily, Peter created the tool Subfont which can automate the web font loading optimization for you. It’s available on NPM.

It Was the Best of Times, It Was the Worst of Times — Raymond Camden

Raymond gave a talk on his journey through the web and web development. It was a more humorous talk where he would talk about which things were better in the past and the things which are definitely better today. Raymond even quit as a web developer for a while because web development became too hard for some browsers. The takeaway at the end was that web browsers are better than before but also more complex than before. Browsers should document better what the changes are for the developers and what is available and what is not. It is good that browsers are being improved but it is hard to keep track of all the changes nowadays.

The Universe in a Single Arrow — Anjana Vakil

Anjana gave an enthusiastic and inspiring talk about functional programming in JavaScript with the Lambda calculus. The lambda functions are anonymous (not saved in a variable), pure (no side effects), with single input where the whole body is its return value. After that, Anjana did her magic with arrow functions in order to create church numerals. She showed us that you can do simple math with arrow functions, but also Boolean logic, and control flows. It was amazing to see but also mind boggling 🤯

The Web Design Cheat Code: Using SVG to Bridge CSS’ Gaps — Lea Verou

The queen of CSS is back. Leas talks are always fast paced small tutorials where a lot of live code is shown. She showed how SVGs used in CSS can be very powerful. By doing so, you can change the styling of block quotes, meters, and list bullets. After that, Lea showed how to create sketchy borders with stroke-dasharray combined with animation, calcin geometry attributes, and SVG filters such as feTurbulance and feDisplacementmap. In order to create squigglevision as border lines, we can use animate in SVG with SMIL on the attribute name seed, because you cannot use CSS animations on SVG filter parameters. The downside is that this can be CPU intensive.

The Future of Web Typography With Variable Fonts — Mandy Michael

Mandy mesmerized us with variable fonts. A variable font is a font file that acts like multiple fonts. A variable font can contain one or more axes and you can animate them. Mandy showed us some nice demos with the variable font decovar. Using variable fonts is similar to using normal fonts in CSS but you can specify a range of font-weightinstead of a single value. Other properties you can use are font-stretch, font-style, and font-optical-sizing. With the font-variation-settings, you can define weight, width, italic, slant, and optical size in one line. Variable fonts are well supported by browsers. You can define a fallback by using @supports in CSS. By using variable fonts, you are reducing the number of font requests and when using WOFF2 files, the file size does not always have to be larger compared to single weight fonts. Mandy encourages us to try out variable fonts, it’s easy to use and much is possible.

The Mobile Web: MIA — Alex Russell

The last talk was a bit of a depressing one. Alex tells us that the mobile web is not doing well, because no one is using the web on mobile devices. Using services such as Google maps and Gmail were amazing and mind blowing when they were introduced on desktop. That brought a lot of users from the traditional applications on the computer to the browser. Now, everyone has a mobile phone. However, according to research done by Google, the web is not essential to the future of computing on mobile devices. Alex states that for the web community this would mean that the web will be extinct on mobile devices. We should work together to make the web great again. Alex states that the ecosystem we are working on today is not healthy, we are leaning too much on the legacy of the web for desktop. The mobile web does not compete with mobile apps, and Apple is actually making sure that the web stays down, while most of the people who have other mobile devices have bad hardware. With bad CPUs, websites cannot perform well on phones, and unfortunately, networks cannot make up for it. We have to give up on responsive design, solely working on that is not the solution. A good experience is about performance, otherwise the web is not accessible. We have to start mobile device first, after that scale to desktop. It’s not too late, we have to use the tools nowadays available to us to set performance budgets, such as webpagetest and Lightwallet.

Final thoughts

Overall, it was a great conference with a lineup of very cool talks. Recurring themes were constraints and trade-offs, be it in web development or in daily life. If you want to watch the talks yourself, they are recorded separately and published on Vimeo. More information on the speakers can be found on the Fronteers website.