Frontend United 2019

Web design is complicated. Web development is complicated. Everything seems to be constantly changing—there’s so much to keep track of. But there’s one thing we can confidently say for sure: websites need an internet connection in order to work. Right? Well, even that is no longer true. Thanks to the powerful technology of service workers, you can now design and develop websites that work offline. This is a game-changer! And now you’ve got something new you need to learn. But don’t worry - Jeremy is here to talk you through a whole range of offline strategies. By the end of this presentation, you’ll have all the knowledge and code you’ll need to free your website from the tyranny of the network connection.

https://frontendunited.org

It’s almost here! Houdini — the future of CSS! This spec allows developers to write web worklets with JavaScript syntax and access the CSS Object Model for the very *first* time. Everything will change! In this talk, we’ll will walk through some of the visual magic we can create by using Houdini and its various upcoming browser APIs, and go through a live demo of how we can get started with implementation. Learn about how to use Houdini and what it means for the future of web application styling.

https://frontendunited.org/

Videos shown during the presentation, but removed due to copyright:
Video 1 (14:51): https://www.youtube.com/watch?v=jD8tjhVO1Tc
Video 2 (29:01): https://www.youtube.com/watch?v=dVp9Z5k0dEE
Video 3 (36:43): https://www.youtube.com/watch?v=7G0OUHnCudw

Talk description:
My talk will enable Delegates to gain first hand knowledge of Equality, Diversity, Inclusion and Unconscious Bias. This knowledge will greatly assist delegates in embedding equality, diversity and inclusion into the design of websites and web related products.

Implicit or unconscious bias occurs when our brains make extremely quick judgements and/or assessments of groups and individuals. These biases or snap judgements are often pre-judgments or prejudices that are not in the main factually based. Unconscious bias is far more prevalent than conscious bias and unconscious biases are often incompatible with ones conscious values. Our biases are influenced by factors such as our background, stereotypic views, cultural environments and personal experiences. Unconscious bias can lead to prejudice, which is defined as:

Prejudice – ‘An opinion or feeling about individuals or people of a different group, which is formed beforehand, without informed knowledge, thought or reason and which is likely to be sustained even in the face of evidence to the contrary’.

Bias is a pre-judgement in favour of or against a thing, person or group compared with another. An individual, a group, an organisation or institution can hold biases, both conscious and unconscious. Unconscious bias can be damaging to individuals, organisations and is considered to be the root cause of many discriminatory practices in the workplace and across society in general. Unconscious Bias is natural, (we all do it), Its unintended, It can effect decisions and it can be mitigated.

The impact of unconscious bias heavily influences how we make decisions about groups and individuals as we navigate society and in particular the workplace. My talk will cover the key characteristics of unconscious bias and facilitate a change in the mind-set of delegates that will ensure a more ‘intelligent’ way of thinking and processing information that we currently hold and are likely to receive about individuals and groups. Delegates will develop a greater understanding of how to manage personal biases in a professional manner.

Key Contents:
Equality, Diversity, Inclusion and Unconscious Bias
Embedding equality, diversity, inclusion in website design
Challenging stereotypes, prejudices and myths.
Equality, Integrity, Honesty and Dignity: ‘Competence’ & ‘Confidence’
Subject & Object: ‘My’ value sets and cultural viewpoints: Luggage or Baggage
Prevention, Pro-action & Promotion
Personal & Professional Boundaries: Setting and Understanding the Parameters
What is Unconscious Bias
Understanding the ‘Unconscious Mind’
Affinity Bias
In-group Bias
Stereo-typing & Unconscious Bias
Social Comparison Bias
Decision Making and Unconscious Bias
Recognising your Own Biases
Why Controlling our Biases is Vital for a Healthy Workplace and Healthy Society
My talk will encourage delegates to develop Inclusive websites that responds effectively to equality, diversity and inclusion and products that are truly ‘discrimination free’.

https://frontendunited.org/

Two years have passed since Grid Layout launched across all major browsers. However as it was landing and becoming available for us to use in production, work on the spec continued. Due to this work, Level 2 of the Grid Specification contains the most wanted feature as people come to grips with the spec - subgrid.

In this talk I will explain what subgrid is, the problems that it will solve for web designers and developers, and the things that it will make possible. I’ll also take a look at some of the other things that are coming to CSS Layout, and how you can get involved in pushing all of these new things forward.

https://frontendunited.org/

You’re a smart cookie. If someone asks you to build a responsive accordion, you’ll figure it out. The same goes for a table. Or a calendar. Or, God forbid, a multi-level-mega-drop-down. But how would you go around slightly more complicated components?

What if you had to build a sophisticated car configurator with a real-time updated 3D view? What about an advanced mortgage calculator? How about a feature comparison table, a music festival schedule, an election map, an airfare booking and check-in, a live world football championship leaderboard and a theatre map seat selection? In this session, we’ll take a microscopic examination of common interface components and problems appearing in responsive user interfaces.

We’ll cover them all: both from the design and from the development perspective — with a dash of sad stories from the life of a web designer here and there. Keep in mind: you won’t be able to unsee the things you’ll see in this session. Yes, it’s going to be dirty, tricky and horribly annoying at times. You’ll leave with a toolbox of practical techniques that you’ll be able to apply to your work right away. And potentially some tips for saving money on airfare, too!

https://frontendunited.org/

We often think of SVG as primarily useful for graphics, icons, and interactive visualisations. What if I told you that there is a number of ways to take advantage of SVG for styling, in order to accomplish things that CSS still only dreams of? This talk is chock-full of practical examples, taught in Lea’s trademark live coding style, as well as the caveats of every technique presented.

https://frontendunited.org/

In this session, we’ll demystify this buzzwordy term, and explore how this approach to simplifying the technology stack can lead to shorter development times, with better Performance and greater security.

We’ll see how the JAMstack is placing more power, more confidence, and more capabilities in the hands of designers, authors and front-end developers.

And we’ll show how serverless functions can augment this stack to let us rapidly build interfaces and APIs to power sites that we’d be brave enough to share with the world.

https://frontendunited.org/

Still think browsers are only capable of parsing HTML, CSS and JavaScript? Think again! Browsers have become much more powerful and contain numerous APIs that can enrich the user experience or are just plain fun.

This talk will introduce you to some of them (like battery, speech, audio, location, …) and show you how easy it is to unleash their power with JavaScript.

https://frontendunited.org/

In data visualization for the web, SVG is usually only used to create shapes; circles, rectangles, lines. But SVG can do much more than "just" be a shape. In this talk, Nadieh will show you how to experiment with SVG gradients and filters to make data visualizations even more fun and engaging. She'll demonstrate how to implement the techniques using JS, CSS, and the de-facto data visualization library d3.js. From rainbow, moving and dynamic SVG gradients based on data, to SVG filters with which to create glow, gooey, and fuzzy effects that brighten up any visual.

https://frontendunited.org/

Abstract: 70% of websites use downloadable fonts now, at least at a basic level. But with CSS Fonts 4 support for OpenType Variable Fonts — a single font file that behaves like multiple fonts, or even an infinity of morphing fonts — and for restyling the palette of Color Fonts, the capabilities opening up for typography on the web are extraordinary. In this session, Chris Lilley explains the most recent, cutting-edge developments and also recaps OpenType font features from CSS Fonts 3, to further improve typography with CSS. Learn what's possible today, and in the near future.

https://frontendunited.org/

Websites are a very visual medium. You therefore might think that they will work for people who are Deaf. But is that true? Marie tells a personal and entertaining story about things you’ve never realised. About four-dimensional language, the pros and cons of video captions, the recognition of exclusion and, of course, the importance of inclusivity.

If you think about improving usability and accessibility of your website, there’s some points of interests that are already well known. For example, use enough contrast to make text readable. When using colours in your designs, consider people who are color blind. Do not write complicated text, and so on.

But there are so many more things you can do. In order to find out what these things are, you really need to listen to people who are dealing with a particular ‘disability’ or situation. People will tell or show you things that you never considered before.

If you want to reach a large or a specific group, you have to involve people from that group in the design process. Listen to the people who are the real experts, to those who are in a particular situation and run into their particular problems daily. They are the real experts.

In my presentation I will sign about how sign language is an intrinsically different language and how to make your website accessible for Deaf people, but actually for everyone.

https://frontendunited.org/

Technology was never neutral; its social, political, and moral impacts have become painfully clear. But the stakes will only get higher as connected cameras will watch over the city, algorithms oversee society’s most critical decisions, and transport, jobs, and even war will become automated. The tech industry hasn’t yet earned the trust these technologies demand.

Drawing on years of research for his new book Future Ethics, designer Cennydd Bowles will illuminate the moral challenges that lie ahead for technologists, and discuss how practitioners and companies can create more thoughtful, ethical products for future generations.

https://frontendunited.org/

React has changed a lot. Hooks are new since version 16.8 and have changed the way we use React. With lazy() and Suspense, you can dynamically import modules.

During this talk, we will build a small application, using Webpack, using both React and custom hooks, dynamically imported components, Context, …

https://frontendunited.org/

Last year we won Best Site at the Automatic Design Awards. In this talk we go into the decisions we made throughout the project, both from a design as a development perspective. We take look at how we used WordPress’ Gutenberg editor on a large-scale website while ensuring usability and accessibility on the front end and how we collaborated as a designer and a developer.

https://frontendunited.org/

Despite our best intentions, sometimes the work we do just doesn’t get used. Sometimes it’s due to unforeseen circumstances, sometimes it’s because of fundamental process or communication issues, and sometimes it’s down to the implementation. When it comes to design systems, these challenges can be even more difficult because by definition, people from multiple disciplines and teams need to collaborate and be invested in the solution.

I'd like to share my story of creating a design system called Stylabilla - why I think it worked, and why developers, designers and product owners have embraced it across the company.

https://frontendunited.org/

In the beginning there was HTML, then there was CSS, then JS, then JS frameworks, then CSS in JS, then... Things started to get little complicated a little while back. To try to make sense of some of this, let's get together for a live demo (what could possibly go wrong!) presentation of building out a site with GatsbyJS.

Here's what we'll do:

install Gatsby
investigate some components - custom header, footer, menu, etc
create some static pages
discuss how some React functions work - simple ones like "link" so my brain doesn't fall apart!
Once we're that far, we how about we hook it up to a Drupal backend for fetching real content, and then deploy it as a blazingly fast, static website (just HTML, CSS, and JS - nothing fancy - meaning it can be hosted on ultra-cheap shared hosting or even something free like GitHub Pages).

Sound like fun? Great.

https://frontendunited.org/

While researching the idea of making tailor made websites for real people with real disabilities Vasilis made it harder to type for someone who has difficulty typing, and removed semantics for someone who is blind. And he created funny, yet invisible animations.

https://frontendunited.org/

When thinking about how to solve our design problems, we often look to what others are doing. And when we don't, our stakeholders do. We call this "inspiration". But at the heart of it is a focus on solutions rather than problems. We fall in love with a solution to someone else's problem and try to make it fit our own. We contribute to design sameness, and confuse it with reasoned convention. In making things easier for ourselves, we might miss opportunities to really make a difference.

Stephen will explore the why and how of deeply understanding design problems. We'll look at why it's important to think outside of the box, when it's appropriate to look at the work of others, and what to do with it when we do.

https://frontendunited.org/

PWA is the new black and one of the hottest topics in mobile and web development. With a set of browser features, javascript tools, and some best practices, we can make our web applications work in any kind of context. Even when the user is not in the ideal scenario, like traveling in the subway.

Vue.js is one of the most popular frontend frameworks and it changed the way we code a web application, it let us scale our apps progressively and it has a great developer experience that allows us build PWA easily.

In this talk, I will show you why PWA is really important for mobile and web developers and how we can fix "The Subway Dilemma" mixing browser features, JavaSript and Vue.js.

https://frontendunited.org/

A lot of people consider complete re-write to be the best solution for project migration. Even though, this might definitely give better result at the end comparing to gradual migration, most projects can not afford this move due to limited work-force, budget or other reasons.

But what if we could migrate our applications bit by bit without polluting global scope, messing up with CSS leaking and different JS bits yelling at each other? What if we could do this in isolated manner as if we would have several sandboxes in our applications where we are allowed to do anything we want?

This talk will tell 3 entertaining stories (spiced with quite a few code examples) of application migrations with different approaches, different architectural decisions and different results. Attendees will get idea of how to approach framework-agnostic frontend migrations using micro-services architecture, web components and good sense of humour.

https://frontendunited.org/

Vue 3.0 is just around the corner and as a major release, it comes with lots of new features. Believe me when I tell you, that some of those might introduce completely new ways of building Vue components, redefining the best practices we know today. As a fan of component composition, I couldn’t be more excited about what’s to come.

https://frontendunited.org/

Why should a frontend developer learn about Design? Maybe he shouldn't. But he should be ready to fight back when he sees non-realistic and non-performant design proposals. He should be ready to make small decisions when there's no designer around. He should advocate for well-implemented designs when the stakeholders and backend developers say it is "near enough" if the functionality is already there. Understanding and being able to discuss Design doesn't make him a designer, but someone ready to face all these challenges.

https://frontendunited.org/