Check back for updates as we continue to bring you the Front-Trends lineup!
Klub Medyka, Oczki 1A Street
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:
Klub Medyka, Oczki 1A Street
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!
Registration & Breakfast
The Power of CSS
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.
Big Bang Redesign: Smashing Magazine’s 2017 Relaunch
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!
I didn't know the browser could do that!
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 past and future of designing interfaces
Field-tested interfaces for the next billion
“The next billion” is a phrase bandied around a lot these days. It’s both an economic opportunity and an ethical imperative. 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.
So what does this actually look like? 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 of how novice tech users in resource-constrained environments 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.
Components, patterns and sh*t it’s hard to deal with
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.
Watch you back, Browser! You're being observed.
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.
End of Day 1
Registrtion & Breakfast
Time to Interaction: a journey to fast user experiences
Motion In Design Systems: Animation, Style Guides, and the Design Process
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.
Rendering performance inside out
Ever wondered why some things are "performant" and others aren’t?
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.
A Cartoon Intro to React Fiber
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.
I'm in IoT
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!
The How, What and Why of migrating to ReactJS
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.
End of Day 2
Concept 13, Bracka 9 Street
Enjoy the evening with a beautiful skyline view of Warsaw at Concept 13. Present your Front-Trends badge to enter.
Free drinks and scrumptious finger food awaits!
Registration & Beakfast
Alternative Reality DevTools
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.
Let's save the internet: How to make browsers compatible with the web
Building a Progressive Web App
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.
Changing the layout game
End of Day 3