Web Directions remixed 2022

From risky and may never be in your browser, to stable and just released yesterday; follow Adam as he strolls through proposals, specs and supporting tools for all the this new CSS hotness.

Over the last decade Object-Oriented & Responsive design have become the norm – with tools like Flexbox, Grid, intrinsic sizing, and aspect-ratio giving us even more layout control. CSS has always been designed for a responsive web, but that goalpost can shift over time. Now several new CSS proposals like Container Queries, Cascade Layers, Scoped Styles, and Nesting are all aimed at improving the way we write responsive components and design systems.

CSS Layout is all about boxes. We know that some boxes are blocks, and others are inline, and we can change the display type of elements by changing the value of the display property. That property holds the key to much more than this, however. It is the foundation on which all layout is built; the core of the inbuilt CSS layout system. Learning Grid Layout, or Flexbox, without understanding Display, leaves you with a wobbly foundation and more questions than answers.

The real question isn’t “Should I use Grid or Flexbox?” but instead, “How do I want these boxes to behave?” Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and be able to make more informed decisions when deciding how to build any part of your design, big or small.

Language specification can be a bit of a mystery. This talk will introduce the stages of the TC39 process for introducing a new language feature to JavaScript, and some high level concerns around our design process.

JavaScript gets faster as it executes! Just-In-Time (JIT) compilers are used in all major JavaScript engines to improve the speed, but how do they work? By understanding the principles of JIT compilation, web developers have the opportunity to optimize their code.

Part of ES2020 are the Optional Chaining and Nullish Coalescing Operators. By combining these two we can make our code more robust, and also shorten it along the way. This talk takes a look at when and how we can use these two exciting ECMAScript features.

Lots of people treat the ternary operator with suspicion. At first glance, ternaries appear unnecessary. Nothing more than a tool for the overly-clever to trim some characters from their code; a favourite hack for coders who don’t care about readability. And sure, it’s all too easy to turn ternaries into an indecipherable mess. But what if we’re missing something? What if there's more to ternaries than meets the eye?

We’ll take a deep look at what makes a ternary different from an if-statement. And we’ll explore ways to write safer conditionals. Finally, we’ll examine the do-expression TC39 proposal and explore how it might help the situation.

The way we write JavaScript is poised for dramatic change in the 2020's. Here's why: the slow death of IE11 and rollout of ES Modules will converge toward a new generation of JavaScript tooling. These tools are faster, typesafer, and polyglot, leading to both a better developer and user experience. Change is afoot!

Chromium's Project Fugu is an open collaboration to push the capabilities of the web platform forward through standards. When combined with Progressive Web Apps, we're approaching a point where whole classes of applications that were previously exclusive to native apps are coming to market on the web. This talk digs into the what, but also the why, of this huge expansion of power for web developers.

One of the promoses of PWAs is installability-but how can developers best ensure users install their PWA, and manage the installation process? In this presentation Penny McLachlan will cover

• What the 'install capability' unlocks for users
• use cases that are typically suitable for installed web apps, and why & how not to annoy users by forcing them to install
• When to ask the user to install for common use cases (and when not to!)
• Patterns to use to promote installable web apps without being annoying
• How to trigger the install prompt and measure interactions

It’s 2021. Long gone are the times where a PWA was only a shortcut in a user’s home screen. PWAs play nicely with desktop environments. It’s about time. The presentation goes through cutting edge features and APIs that allow a PWA to integrate seamlessly with a desktop OS. To demo this, we go through a purpose built PWA that utilizes existing and experimental features that can provide a delightful UX, all powered by the web platform.

The WebXR API can be used to make VR and AR capable websites this talk will introduce some of the newer augmented reality features and how to use them.

The web has a history of being an over-sharer. Original defaults tended to allowing everything—with restrictions needing to be explicitly added by the site. Newer APIs follow the principle of least privilege, so that's better, but still have the challenge of maintaining backwards-compatibility leaves sites with a lot of responsibility to create a safe experience for visitors.

We'll explore how the platform is moving to safer defaults—from phasing out third-party cookies, removing passive fingerprinting surfaces, and enforcing cross-origin isolation. Alongside these ongoing efforts, we'll also go through the changes you can make today to protect your site—from improving cookie usage to locking down your third-party interactions. We will also explore some patterns for balancing appropriate collection of user information with protecting those same users from phishing or other forms of fraud.

Cryptography forms the backbone of how we securely use information online, but most developers don’t have more than a surface level understanding of cryptography. What's more, cryptography is so easy to mess up - even the experts get it wrong!

In this talk, attendees will learn about the basic cryptographic algorithms, how to use cryptographic libraries correctly (and what to avoid), what common attacks you should be thinking about, and what emerging web cryptography technologies you should be paying attention to.

Year after year, Cross-Site Scripting (XSS) continues to be the most expensive type of web vulnerability found in bug bounty programs. The most common variant of XSS occurs on the client side, when untrusted user input is passed to dangerous DOM APIs. Trusted Types is a novel web browser API designed to eliminate DOM-based XSS. It locks down dangerous DOM sinks, asking developers to prove that input is safe by using an appropriate security policy to avoid triggering a Trusted Types violation.

In this talk we show how web applications can significantly strengthen their security posture against DOM-based XSS by adopting Trusted Types, as well as the steps required to identify, fix, and prevent future Trusted Types violations.

Running other people's code is dangerous and some people will even tell you that you shouldn't do it. I'm here to tell you that actually, you can run other people's code safely. The solution is hardened JavaScript.

Authentication and authorization are daunting topics for many developers. Open standards for auth are well defined, but challenging to understand; OAuth, OIDC, JWT, IETF, PKCE?! I'll demystify the specs and concepts step-by-step, giving you the knowledge you need to tackle auth in your front-end apps.

Patrick is going to explore the current state of web performance measurement, both in a lab (synthetic) environment and from real users (RUM). There has been a lot of exciting advancement in this space with Google's Core Web Vitals and evolving of other metrics over the years.

We will also explore how synthetic and RUM data complement each other and when each is most appropriate to use.

The Core Web Vitals provide unified guidance that is essential to delivering a great user experience. Annie will talk about why and how these metrics were developed, how you can measure them on your site, and how they fit into the bigger picture of a product's user experience.

Third-party dependencies play an important role on most websites. This talk will discuss techniques that you can use to better understand, measure, and optimize your usage of third-party code.

A conference called Lazy Loading must feature a talk on lazy loading! With native lazy loading introduced in Chrome 77 and other browsers following suite, now is a fantastic time to refresh on what's available today.

We are going to look at how and where native lazy loading can be used, potential gotchas and how it can help improve your site performance both with images and JavaScript alike. You'll come away from this talk with more knowledge on lazy loading even though the property appears deceptively simple at first glance.

Ever wondered how screen readers do what they do? Ever wondered what screen readers actually do come to think of it?

Who uses them? What do they sound like? Where do they get their information from? What is it with screen readers and punctuation? And what exactly does my code have to do with it anyway?

Find out all this and more in What You See Is What I Get - one screen reader user's explanation of how it really works.

Are you coding for accessibility? Have you ever wondered how the accessibility information of the elements you've used and components you're building is exposed to assistive technologies, or why every accessibility person ever says: “Use native elements!”?

With this talk I aim to fill in the blanks by discussing how the Accessibility APIs work together with HTML elements, WAI ARIA and the Accessibility Tree to make the magic happen by extracting accessibility information from web interfaces and presenting it to assistive technologies.

Shared semantics is the web's killer feature that allows developers create accessible experiences. In this talk, Hidde dives into the meaning of semantics (no pun intended), how it improves your site, specific gotchas and the future.

Specs are usually not very fun, but I have learned that reading the ARIA specs is important to fully understand all the various options that are available. In this presentation, I will walk you through the ARIA spec and show you how to make the most out of it to create custom components with ARIA.