Satelite Events

Schedule

Mozilla Roadshow Event

Tuesday, May 23, 17:30

Join Mozilla for a casual evening of tech talks and networking before the Front-Trends 2017 Mixer event—entrance is free. This event will start with a brief intro into the 2017 Mozilla tech road map and then deep dive into three web topics:

Open Mixer Event

Tuesday, May 23, 19:30

Catch up with fellow Front-Trenders the night before the conference. Everyone is invited (even those without a Front-Trends ticket), so bring your colleagues, developer friends and loved ones. There will be food, drinks, games and music!

Wednesday, May 24

The best time to have ideas is before you know what you’re doing. The early history of the Web is full of experiments and false starts that fizzled out, but might be worth trying again. There are also some lessons about what not to do that we failed to learn from the first time. At the very least, we can inject some life into the boring, corporate, centralized Web of 2017. In this talk, we’ll roll back the stone and descend into the pyramid of the ancient web to see what treasures are worth stealing, and what booby traps are waiting to ensnare us.

This talk will go over some of the superpowers of CSS. From fauxtoshop to recreating common UI elements, or querying for browser information via at-rules, CSS supertricks offer control and new capabilities.

You’ll learn where to use these superpowers for good, and when (and why) they shouldn’t be used—all while keeping accessibility in mind along the way.

You’ve been there: big bang redesigns are usually a very, very bad idea. Redesigning and rebuilding an existing website from scratch is risky and unpredictable, and in many cases the level of complexity is highly underrated and underestimated. In mid-2016, Smashing Magazine has decided to make a big switch from the existing WordPress setup to an entirely new design, entirely new architecture (JAM Stack) and an entirely new, GitHub-based, editorial workflow.

In this talk, Vitaly will share some of the insights into Smashing Magazine’s Relaunch in 2017 — with decisions made, failures, successes, lessons learned and shady’n’dirty techniques used along the way. Among other things, you’ll learn how Smashing Magazine uses HTTP/2, service workers and server-less architecture with static site generators to boost performance, with a dash of React, Flexbox, CSS and the peek into the new GitHub-based editorial workflow here and there. Beware: the session will contain at least 27 illustrations of cats!

The times when a browser simply had to parse and show some markup are long gone. These days they are full of interesting api’s exposing various information and behaviour to web developers. This talk will walk you through a few of these api’s, some of which you might know, some maybe not.

“The next billion” is a phrase bandied around a lot these days. Connected smart phones are bringing computing and the internet to many people who are now learning to use digital interfaces for the first time – people all over the globe; from West Africa to India to Brazil. Serving these users is both an economic opportunity and an ethical imperative.

So what does this actually mean in practice? How does someone who’s been introduced to technology through a second-hand cheap Blackberry knock-off powered by a car battery respond to these new and shiny ways of interacting with machines? What effects do unreliable power and intermittent internet have on the user experience? How can we make sure that keeping up with the cutting edge won’t alienate the people in these fast-growing emerging economies who are just starting to get into the web?

In this talk we’ll go through examples from working with novice tech users in resource-constrained environments, and discover how they navigate apps, comprehend interfaces, input data, and understand screen flows. You’ll learn how certain UI patterns, animations, and navigation conventions hinder or help, and leave with an understanding of how to include these millions of new users in your product thinking.

Everyone has a pattern library or dreams about having one. We went through conversations and the codification of our visual dictionary and then we ended up with a beautiful living document.

But what happens when we need to re-use our components and they don’t fit in the design? How do we re-use our patterns in slightly different use cases?

We have all the tech to make a front end really modular, we have techniques and methodologies which enabled us avoiding the bad parts of the languages we use. Every part of the puzzle seems to be falling in the right place.

Yet, sometimes we are struggling to handle the variations of our patterns in a reliable and maintainable way. Our codebase is getting filled with exceptions and overrides and refactoring of base patterns becomes impossible. This talk will explain some techniques to get back control and why the might work or not in the way we’d expect.

The Internet of Things can become quite boring pretty fast. Turning on the lights in your apartment with an app is a nice novelty, but it isn’t really very creative. And as developers we like to tinker and look under the hood, but manufacturers like their walled gardens. This talk is about combining sensors, switches and displays with different technologies to solve problems that don’t really exist and more importantly just to have fun with IoT and make geeky stuff. This talk contains monsters, and lots of them.

Web development can be tough. DOM APIs are known to be not convenient, and often we build the same things over and over again. Thanks to rolling releases by the browser vendors that changed. The development of the web as a platform has speed like never before. New APIs land in Browsers with every release. There is also this new term of “reactive programming” and new Observer/Observable APIs.

Looking for a way to detect DOM changes to update a different part of the page? MutationObserver got you covered. Want to get notified when elements enter the viewport to load assets? IntersectionObserver is your friend. You’re dealing with sequences of events over time and want to save some headaches? Observables will make your life way easier.

This talk we’ll cover the use cases of Observer/Observable APIs, go over the implementation details, and teach you what you need to know to use them in production.

17:40

End of Day 1

Thursday, May 25

To render a webpage browsers needs to go through the complex dance of networking, parsing and painting before any content can be displayed to your user. Over the years, we’ve developed mechanisms and hacks to aid the browser at each stage of this process, but these have always come at some cost or trade-off.

How can we utilize modern web platform features to load our resources as fast as possible? Should we still be inlining our critical content into the document or instead, how can HTTP/2 server push and Service Workers help us?

In this talk we will take a journey exploring the current, past, and future best-practices for loading assets in the browser and how we can achieve a first meaningful paint within and interaction within 1000ms. Ultimately creating a faster, more resilient experience for our users.

We all want to create the best possible product for our users, that also meets the goals of our business in the strongest way. But how do we know if we are really doing that? A/B testing is a tool and process that can validate your design and development decisions through data, helping you remain focused on your customers and achieve more success in solving their problems.

In this presentation, you’ll learn why A/B testing is important and why “expert” opinions about UX and visual design are so often wrong. I’ll talk about how Booking.com has been using A/B testing and other user research to optimize its products for a decade, and the do’s and don’t’s I’ve learned from running hundreds of experiments over the past three years there. You’ll leave with ideas for when and how to use data to improve your own work and add value to your business.

The Web has stepped down from virtual screens to the reality that you can touch: Bluetooth, beacons, blinking LEDs and flying robots! It’s there, but all tails are still leading us back to the new browser APIs. Stop pushing around screen pixels, let’s play with hardware in the Internet of Things!

Interface animations are most effective when they work in concert as part of the bigger picture. Designing and choreographing your web animation efforts from the top down leads to more effective animations that integrate into your design system. And, defining a motion language for your brand can help your team to develop a shared vision from which to work.

In this session, Val will cover guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use. All the things you need to make web animation work for you and your team.

Progressive Web Apps are all the rage these days! The technologies behind them allow you to build web apps that run really smoothly, launch really quickly, work well offline, and integrate into your OS just like your favorite native apps.

In this fast-paced talk, we’ll build a PWA from scratch and walk-through all the various pieces involved - the web app front-end, the web application manifest, service workers, and more.

React will be getting a new core algorithm soon with Fiber. This new algorithm improves perceived performance for complex pages. But to make that happen, the architecture had to be reconsidered from the ground up. In this talk, I’ll break down the new concepts and explain what makes it seem faster.

The application I look after at work is a large ticketing platform that was written using Angular 1 and has not been maintained. With the new release of Angular 2, we made the decision to migrate off Angular and onto React.

In this talk I’ll discuss why we did this (without criticising Angular, it has served us well) and how we’re migrating in small chunks. A big rewrite was off the cards; this application is business critical and as such we can’t afford to not be able to fix existing bugs or quickly add features because we’re rewriting. Instead we’ve split the work down into many small pieces that we can tackle one at a time.

I’ll go through some code examples and talk not only about the benefits but the negatives too, because it’s not all been plain sailing. We’ll see how React’s approach and characteristics make it very adaptable and we’ll look at how we updated tests as we went to ensure our migrations maintained feature parity.

Today’s devices are built around the web browser and chances are good every document you share will be delivered over the web — yet our tools still enforce the limitations of paper.

The web acts as a true equalizer crossing physical borders, walled gardens and is the purest expression of the digital medium in use today. The truly accessible, portable document format of today is the website and to fully realize the potential of this medium we need to rethink what general purpose (productivity) software for the web can be.

In this talk we’ll start from the observation that if you strip everything away the web should reduce to plain text. Through a series of case studies we’ll examine the historical challenges and possible future of text editing on the web.

Friday, May 26

Eleven years after the first release of Firebug, all browsers now have excellent developer tools of their own. One thing that always bothered me though, is how very similar these tools became to one another. What’s more, some of the original Firebug’s ideas can still be found in today’s devtools in an almost unchanged form!

With a strong belief that we should revisit those ideas, I started looking for an inspiration on how the alternative versions of devtools could look like. I talked with Android developers, designers, architects and electrical engineers about the tools they are using. I introduced people unfamiliar with how the Internet works to devtools and collected their thoughts and expectations. Finally, I had countless discussions with Front-End engineers about the way they are using them today.

This research gave a unique perspective on devtools and allowed me to build some interesting prototypes. In this talk I’d like to share both, the conclusions and the demos, with you.

During the browser wars, compatibility was a mess and so was the web. Dirty hacks, a huge pile of frustration and enormous amount of time to test through every browser were a part of our everyday life.

Times changed. Browser wars are finally over (right?!). But the web is still broken and browsers still work in different ways.

In this talk, we’ll explore the reason for web (in)compatibility, how to fix it and how you as wcompats can help to save the world (wide web).

It’s not difficult to find anyone that agrees that user testing is a good idea. But it’s even easier to find people who say they don’t have the time or the budget for user testing. Ida will show you tips, tools and examples from actual projects, and demonstrate that yes, you do actually have everything you need to do user testing.

This talk looks at it from a Computer Graphics perspective - we will work our way up from pixels to DOM & CSS performance as well as shedding light on Canvas 2D and WebGL. You will learn tips and tricks along the way to get silky-smooth 60fps for your web app.

If there’s anything that decades of psychological research have shown us, it’s that human cognition is full of bias, fallacy, and error. Even us smart software engineers, who sit around and think all day, are not immune to being humans, and therefore we fall into these pitfalls too.

In fact, there are so many ways our brains default to being lazy, which keep us from being the best developers we could be and prevent us from making the best software we could be making.

Whether it’s thinking through those complex logical problems or planning our work effectively or being productive in our open offices or even assembling the best teams, our brains just aren’t naturally acting in our favor.

We will will talk through pieces of psychological research in an effort to make everyone aware of how our minds work, how it’s making us all worse at tech, and what we all can do about it.

Our demand for layout on the web has changed, we’ve moved from building a series of pages, to building interfaces out of libraries of components that we compose together. Our tools for creating layout in the past have been an exercise in hacks, magic numbers, and workarounds.

The tools we had weren’t designed for the challenge, but we made them work. Today, we have game changers like Grid, Columns, Flexbox, and Calc. With these powerful features we’re capable of creating beautiful, flexible layouts with much more simplified code, and build out components that can independently adapt to the space in which they exist.

In this talk, we’ll discover the possibilities these features create. We’ll explore the ResizeObserver and the first steps toward the Container Query, creating smarter components with Flexbox, managing complex layout with Grid, and using CSS Variables to help us simplify managing the layout.

Deep neural networks are the latest hot computing trend – but to most people they are still a bit of a mystery.

With the release of libraries like Google’s Tensorflow and the open source ConvNetJS, there’s never been a better time for developers to start exploring deep learning. But I know from experience that wading through complex academic explanations can be pretty intimidating!

That’s why I wrote a talk that starts from scratch and assumes no prior machine learning knowledge – but by the end of it, I aim for you to go away as excited about neural networks as I am, and knowledgeable enough to rave to your friends about them in the pub.

We’ll look at what makes a neuron, how neurons become a network, how networks are trained and what the ‘Conv’ in ‘ConvNets’ means. We’ll see how ConvNets can produce weird and wonderful works of art, how they can turn your selfies into masterpieces, and look at some of the rather amusing ways they can go wrong!

Recent years have seen a shift in technical architectures. Building complex services for the web used to be just that – complex. Projects might have demanded a broad range of specialist skills which could stretch even the fullest of full-stack developers. These days we have a growing number of options for how we design, build and maintain the systems which keep our web sites and applications alive.

This talk will look at ways to make use of readily available microservices to unlock functionality​ and opportunity in otherwise simple technical stacks. We’ll talk about the benefits in keeping your stack simple, and in leaning on the expertise of others.