Web Directions hover 2022

Global, OnlineNew Dates, April 29 & May 6

The conference CSS deserves

April 22nd

  • 11:00am–3:00pm Sydney
  • 10:00am–2:00pm London
  • 1:00pm–5:00pm New York

New in ‘22 — the CSS browsers will ship this year

Jen Simmons, Evangelist, Web Developer Experiences, Safari & Webkit Apple

Whether you’ve been writing CSS for a year, or for two decades, it seems we always need more from what browsers provide. A lot of great solutions to long-standing problems are landing in 2022.

Come hear about many of the most requested additions to CSS — including parent selectors, better viewport units, tools for dealing with !important battles, subgrid, wide gamut color, color font palettes and the #1 most requested, Container Queries

Cascade Layers

Bramus Van Damme, Front End Developer

When writing CSS, we have to carefully think about how we write and structure our code. Without any proper “plan of attack” the Cascade can suddenly work against us, and we might end up with pieces of code overwriting each other, selectors getting heavier and heavier, a few !important modifiers here and there, … — Uhoh!

To regain control over the Cascade in those situations there’s a new CSS language feature to help us: Cascade Layers (CSS @layer).

Let’s take a look at what these Layers are, how we can use them, where they fit in, and what benefits they bring.

:where :is :has?

Kilian Valkhof, Founder Polypane

When people say CSS is hard, they often mean that writing good CSS selectors is hard. As a developer, you need to make a lot of trade-offs: a more precise selector also comes with increased specificity, making it hard to overwrite style elsewhere. Targeting two sets of elements often means duplicating the selector and after twentyfive years of CSS, you still can't style based on child elements.

...except CSS now has solutions for all these problems, and more. In this talk we'll explore the impact the new :is, :where and :has pseudo-classes will have on the way you write CSS, how to use some of these features ahead of browser support and the amazing CSS they enable.

Focus Visible, At Last!

Josh Goldberg, Open Source Developer

:focus-visible is the CSS selector of your accessible focus management dreams! It targets elements that receive focus only when the user appears to be using an input modality that would benefit from a visual. This talk will cover the history of bad :focus behavior, how :focus-visible fixes things, and general tips for focus visualizations and management in your CSS and HTML.

Refreshment break

,

Need a quick breather? Or why not share your thoughts with others attending? We'll be back soon.

Type-setting in CSS: Using typography to enhance your design

Martine Dowden, CTO, UX / UI Designer & Developer

From hands, to chisels, quills, the printing press, and now the web, a written record of our existence has been a constant throughout history. Languages, and how they are depicted, have evolved alongside the tools we use to render them. Often overlooked in design, text content is an integral part of the visual aspect of an application and CSS allows us to control and manipulate its look and feel.

In this talk we will cover a little bit about the history of typography leading up to where we are today, how to make decisions about fonts and their usage in our application, and the CSS properties that allow us to manipulate our type for a polished beautiful design.

The colorful future of CSS

Alvaro Montoro, UI Manager Visa

CSS has evolved considerably over the years, and some of the most exciting recent changes are coming from the color specification. Long gone are the days of just using RGB or HSL. Instead, there are new color formats, a new notation, new functions, and so much more.

We'll dive into the most recent CSS Color Module Level: review what's coming, show examples of the latest function definitions and explore the relative colors and how they can revolutionize white-labeling.

How Does CSS Work? and How We Can Change How It Works!

Elad Shechter, CSS/HTML Architect Appwrite

When you start creating a new website or web application, even before writing a single style, the browser applies styles to it — its default styles. Have you ever asked yourself who decides what those basic default styles will be?

In this talk, I want to teach you the different CSS levels in browsers, how they work, and how we can control and manipulate them.

April 29th

  • 11:00am–3:00pm Sydney
  • 10:00am–2:00pm London
  • 1:00pm–5:00pm New York

Are CSS Pre-Processors Becoming Obsolete?

Facundo Corradini, Front-end developer Scalable Path

CSS pre-processors have been one of the most useful tools in our web development toolbox for decades. But with the advent of CSS "variables", native nesting, and other great new specs, many of their use-cases seem to have been taken over by the language itself.

In this talk we will dive into the similarities and differences between the features introduced by CSS pre-processors and those of the newer CSS specs, when to use each, and how they can get along

Effective CSS refactoring

Adrian Bece, Full stack developer

CSS refactoring is not an easy task. It requires a detailed analysis and audit to discover weaknesses and issues in the codebase. Choosing an effective refactoring strategy is also a challenge - The scope of changes can range widely per task, and the substantial changes can introduce bugs and regressions in the legacy codebase. In this talk, we’ll cover these topics and more - we’ll learn what makes the CSS codebase unhealthy and how we can combat regressions and catch them early in the development process.

Modern CSS rendering performance: The internals of web pages optimization

Michael Hladky, Human push-based.io

In this talk, we demystify the browser’s rendering pipeline and explore the different ways you can enhance the user experience by improving your CSS rendering performance. We will get to the core of browser rendering optimization, uncover what’s hidden under the hood there, and identify the opportunities for improvement that one can seize with a few lines of CSS only and RenderingNG architecture on hand. During this session, we will take a look at how the web page is rendered in a browser, go over the basic Chrome DevTools’ workflow for analyzing runtime performance and see how to benefit from these metrics by introducing only small changes in the CSS. All of the covered implementations will be demoed for you to see their real-world application.

Break time

,

Time for a quick break for a cup of coffee or tea. Chat to fellow attendees and speakers. Or visit one of our fantastic partners.

Real-world CSS custom props

Ben Buchanan, Engineering Lead Quantium

A few years ago we decided CSS custom properties were the future for our UI library, and we've been reducing the focus on SCSS ever since.

Custom props have added a useful new facet to our design system's API; and given us the power of runtime variables across a platform-agnostic environment.

But CSS Custom Properties changed our CSS more fundamentally than we expected. We needed to break free of old habits to allow their strength to come to the fore.

Ditch the Media Queries: Modern CSS Replacements for Better Responsive Code

Kathryn Grayson Nanz, Developer Advocate Progress

Thankfully, CSS has come a long way since the days when device-based breakpoints were the norm, but a lot of us got used to just throwing in a media query (or twelve) to make things responsive, and never quite broke the habit. Now that we have modern CSS features like grid, flexbox, calc, clamp, aspect-ratio, and more – in 2022, it’s finally time to ditch the media queries in your responsive code. Today, we’re going to start at the top and work our way down: from the big-picture display formatting all the way to the smallest CSS units. And as for your old stylesheets, don’t worry too much…we can refactor. We have the technology

Responsive patterns with subgrid

Rachel Andrew, Technical Writer Google

We were all pretty excited when CSS grid layout subgrid landed in Firefox, but in the long wait for it to make it to Chrome, it's a value that has had little attention in the past year. However, it is on the way, and in this talk, I'll show you some interesting patterns that it enables, so you'll be ready to take advantage of these new layout possibilities.

Practical Uses For Container Queries

Stephanie Eckles, Software Engineer Microsoft

Container queries are on the horizon, and a polyfill means they are available now as a progressive enhancement. See how you can improve your responsive layouts by learning how container queries work through exploring practical use cases.

Attend your way

Attend hover online, alongside some or all of our other front end engineering focussed conferences in 2022.

Or attend Hover as part of a membership to our comprehensive conference platform, Conffab. Conffab features hundreds of conference videos from our conferences, and other great conferences around the world.

2022 all Conference Pass

  • all 6 2022 online conferences live

  • all 2022 conferences videos

  • 12 months Conffab plus membership

  •  
  • $595

hover+

  • hover conference

  • hover conference videos

  • 12 months Conffab plus membership

  •  

  • $295 early bird
    until April 8th
  • $395 Standard

hover classic

  • hover conference

  • hover conference videos

  •  
  •  
  • $195 early bird
    until April 8th
  • $295 Standard

All 2022 online Web Directions conferences

Access to all 6 online Web Directions conferences in 2022–50+ hours of content.

tick to indicate this is included

hover Conference
April 2022

  • 2 in-depth sessions
  • 6+ hours of content
  • World Leading experts
  • Hallway Track
tick to indicate this is included tick to indicate this is included tick to indicate this is included

Hover Conference Videos

All the hover conference presentations, captioned, transcribed and more

tick to indicate this is included tick to indicate this is included tick to indicate this is included

12 months Conffab plus membership

1 year access to our growing library of hundreds of conference presentation videos from world leading conferences

tick to indicate this is included tick to indicate this is included

Find the conference pass for you

Attend your way

Attend hover online, or as part a membership to our comprehensive conference platform, Conffab.

Conffab features hundreds of conference videos from our conferences, and other great conferences around the world.

2022 all Conference Pass

  • all 6 2022 online conferences live

  • all 2022 conference videos

  • Conffab presentation library

  •  
  • $595

Conffab Premium

hover+

  • hover conference

  • hover conference videos

  • Conffab presentation library

  • $295 early bird
    until April 8th
  • $395 Standard

Register Hover+

hover classic

  • hover conference

  • hover conference videos

  •  
  •  
  • $195 until April 6th
  • $295 Standard

Register Hover Classic

Our venue

hover 2021 will take place across 2 Fridays in April wherever it's most convenient for you.

Getting there:

Get out of bed, make a coffee, wander to your desk, and start right in. Or just watch from the comfort of your bed. If conditions allow watch in your office, or grab a team pass and watch together as a team.

No expensive flights, or long commutes, be part of it wherever you feel like.

Accommodation:

No need for hotel rooms or airbnbs!

Partners

We work closely with our partners and their technologies to deliver world leading online conferences.

Contact us for more on how we work can work with you to help you be even more awesome.

Twilio logo

Praise for past Web Directions events

Phil Whitehouse
Web Directions is the must-attend event of the year for anyone serious about web development.

Phil Whitehouse,
Innovation Lead DigitasLBi

Ethan Marcotte
I’ve been admiring the Web Directions events for years, and was honored to be part… What a fantastic event!

Ethan Marcotte,
inventor "responsive Web design"

Dave Greiner
Out of any conference, Web Directions is far and away our favourite

Dave Greiner,
founder Campaign Monitor

About Us

Co-founded and now run by John Allsopp, Web Directions has for over 15 years brought together leading developers, engineers, visual, IxD, UX and product designers, Art and Creative Directors, product managers indeed everyone involved in producing web and digital products to learn from one another, and the World's leading experts across this vast field.

We spend our lives thinking about what comes next, keeping up with trends in technology, practices and processes, and filtering the hype, to make sure you don't miss trends that matter, and don't waste time on hype that doesn't.

We promise attending one of our events will leave you significantly better versed in the challenges you face day to day, and in solutions for addressing them.

Due to the COVID-19 pandemic, we're switching things up a bit for 2020, 2021 (and beyond). We're delivering 6 highly focussed front end development conferences online.

And, our annual extravaganza, Web Directions Summit retns to Sydney in December 2022, bigger and better than ever.

vignettes from our events, social, speakers and more. Includes Hannah Donovan skylarking.

John Allsopp

John Allsopp has been working on the Web for nearly 30 years. He's been responsible for innovative developer tools such as Style Master, X-Ray and many more. He's spoken at numerous conferences around the World and delivered dozens of workshops in that time as well.

His writing includes two books, including Developing With Web Standards and countless articles and tutorials in print and online publications.

His "A Dao of Web Design" published in 2000 is cited by Ethan Marcotte as a key influence in the development of Responsive Web Design, who's acclaimed article in 2010 begins by quoting John in detail, and by Jeremy Keith as "a manifesto for anyone working on the Web".

Code of Conduct

For over a decade, we've worked hard to create inclusive, fun, inspring and safe events for the Web Industry.

As part of our commitment to these values, we've adopted a code of conduct for all involved: ourselves, our speakers, our partners and our audience.

If you have any concern or feedback, please don't hesitate to contact us.