Build a design system in less than an hour? That's crazy. But not entirely impossible. In this session, Brad will demonstrate how to use Pattern Lab to simultaneously build both a design system's front-end components and several screens of a real pilot project.

Throughout the talk, he'll discuss topics like front-end code architecture, designing in the browser, modular development best practices, designing with dynamic data, and more.

When building interfaces, often we think about making them accessible when it’s just a bit too late. What about baking accessibility into the front-end development from the start?

In this session, Sara will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind. Even though she will be building only as many patterns as the time allows, you’ll leave with many small but important and impactful strategies that you can apply to many other UI components, as well as to your design process and coding. From this sweet series of mini component-level case studies, you will learn how to think, and code, accessibly.

The website is already live. You are really proud of how it turned out, but then you notice that something is off… After some time you realize that the problem might lie in performance: things take too long to load, there are moments when you see awkward content jumps and at times scrolling feels painful. Sounds familiar? This talk is for you.

During the session we will talk about the causes of painful performance and look into simple and actionable steps how to make a website more performant with a little effort. Most of the examples will be based on a real-life debugging experience. We will dive into the undiscovered areas of Developer Tools and into the basic performance auditing. I will help you understand how browser rendering works and why it can be one of the causes of flawed interaction performance. To leave you with some ideas about where to start your debugging, I will also provide you with examples of UI patterns that are bound to slow down your experience, if implemented incorrectly.

Animation on the web can be one of the most powerful tools in a creator's toolbox. It can help users to understand changes in context, visualize content or data in easier ways, reinforce actions, and countless other benefits. But one aspect that can make your users' web experience way more memorable is to use that animation to help them feel a sense of emotion (the good kind)!

In this session, we'll build a FUNctional page together with a variety of animated techniques. Learn how to move from design to code, adding in motion and timing, all while giving our users that elusive serving of delight that they didn't know they needed!

In interface design, little details make all the difference. Sometimes an interface looks complicated, clunky, boring and difficult but it seems to be very difficult to point out why it’s like that, and how we can improve it. Often just a few minor touches are enough to turn a seemingly complex design into a straightforward one. In this session, Steve will be providing strategies and techniques to achieve just that — refactoring live, on stage.

We'll be looking at a poorly designed UI and will be redesigning it, while looking at common issues faced by designers and developers regularly — from colors and borders and icons to box-shadows and tables and price labels. By the end of the session, you’ll see what difference a few small changes can do to bring a design to the next level.

Within a context of continual change on our teams, projects, and within our work, how do we build trust, design alliances, and navigate conflict? How can we work with teams and within organizations to transform knowledge into action? How do we cultivate a shared understanding about a problem space and align groups to make key decisions?

Facilitation is powerful skill in design. In this talk, we’ll spark within you a love and appreciation for facilitation, demonstrate hands-on ways to try it out, and share with you how facilitation can be practiced to create a more equitable and inclusive culture at work.

In this talk, you will —

• Practice creative skills needed to facilitate healthy team dialogue and align a group
• Learn how to incorporate reflection into any design process or project for the sake of shared learning
• Understand how to “see” and work with power and within power structures in ways that benefit the collective
• Leave with a list of resources if you want to learn more

Within a context of continual change on our teams, projects, and within our work, how do we build trust, design alliances, and navigate conflict? How can we work with teams and within organizations to transform knowledge into action? How do we cultivate a shared understanding about a problem space and align groups to make key decisions?

Facilitation is powerful skill in design. In this talk, we’ll spark within you a love and appreciation for facilitation, demonstrate hands-on ways to try it out, and share with you how facilitation can be practiced to create a more equitable and inclusive culture at work.

In this talk, you will —

• Practice creative skills needed to facilitate healthy team dialogue and align a group
• Learn how to incorporate reflection into any design process or project for the sake of shared learning
• Understand how to “see” and work with power and within power structures in ways that benefit the collective
• Leave with a list of resources if you want to learn more

The job title front-end developer is very real. Job boards around the world confirm that. But what is that job exactly? What do you need to know to do it? What do the people that are very good at it think about how and why they do their work?

We're going to go through a journey through all of this, not just for the sake of it, but because we'll learn how we can be better at our job by understanding how other people are good at theirs.

We'll also get into the idea that front-end development might be going through a bit of an identity crisis with the front end becoming home to more and more complex technology.

Do you already know who the Mystery Speaker is?

CSS has come a long way since the browser wars of the late 90s. What used to be a struggle, is now often a breeze (see box-shadow or border-radius). But the last 2 years have pushed CSS into entirely new territory: with DOM-aware variables and calculations that can drive your design, without all the invasive Javascript.

• Basics for understanding Custom Properties & Calc().
• Practical examples and use-cases for data-infused design.
• Integrating with CSS Grids to build layouts on-the-fly.

Git is the de facto industry standard tool for storing and editing code for a reason — it's powerful, scalable, flexible… but it can be confusing and intimidating, whether you're a newbie or you use it every day! Because Git is generally used via the command line, it’s hard to develop a mental model of what all of those commands actually do to your repo under the hood. This incomplete understanding makes it all too easy to get yourself into a Git mess on a daily basis!

So, let’s learn more about Git! Katie Sylor-Miller, author of OhShitGit.com, will walk through common workflows in Git, using a visual representation of a repo to flesh out our mental model of Git’s data structures and common workflows. We’ll learn how to avoid getting into Git messes in the first place with best practices, workflows, and tools that will keep your commits in order. Finally, we’ll learn how to leverage Git’s powerful features to save yourself when everything seems to go wrong.

Much of the JavaScript that powers our apps is transformed from the elegant ES6 you write to a tangled mess of transformed and polyfilled code. Only legacy browsers actually _need_ those transformations, yet it's a safe bet that you're serving that code to modern browsers as well. That means we're sending a lot of extra JavaScript to users that just don't need it!

Now what if I told you—and just hear me out—that your app could send a bundle with less polyfills and transforms while legacy browsers still get the bundle you're already serving them now? This technique is called differential serving. In this live coding talk you'll learn how differential serving can seriously reduce the amount of JavaScript you send to modern browsers—all while preserving the existing experience you have for legacy browsers! Drop into this session to get practical advice on how to modify your toolchain to spit out both modern and legacy babel-fied bundles, and how to serve those bundles the right way to your users.

Newer developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web and in apps. But the fun really starts when you add Variable Fonts. The design, technical, and performance benefits are really exciting, but when you combine them with other CSS capabilities like custom properties, calculations, and grid it’s a whole new way to think about design and development.

We’ll see how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.

CSS Grid revolutionizes how we create layouts on the web — but how exactly should we use it? When someone emails you a PDF, how do you know the best way to get started? Where should you use what code? How do you translate a static drawing into a dynamic layout? In the spirit of Smashing’s “no slides” rule, Jen Simmons will live code a design from start to finish (or however close to finish she gets before time’s up). No net, no preparation. How does someone in the real world create a layout using the tools of Intrinsic Web Design?