CSS Day

Thursday MC

Adam Argyle

Adam is a bright, passionate, punk engineer with an adoration for the web who prefers using his skills for best in class UI/UX and empowering those around him. He’s worked at small and large companies, and built an app for pretty much every screen (or voice). He is capable of over-engineering, but spends lots of brain power not. Loves CSS, loves JS, loves great UX.

State of the CSS Community

Video

Una Kravets

Una is a Developer Relations Engineer at Google Chrome where she leads the Web UI & DevTools DevRel team. Previously, she was the Director of Product Design at Bustle Digital Group and worked on building maintainable design systems as a UI Engineer at DigitalOcean and IBM. Una is the co-host of the CSS Podcast and Designing in the Browser video series. She has built open source libraries such as CSSgram, spoken at over 80 developer events around the world, and is an avid calligrapher/doodler.

Dialog dilemmas and modal mischief: a deep dive into popovers and how to build them

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. There are many ways to build them, and new features in the web platform are about to make this a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about dialogs, including the new ‘popover’ attribute, “modality” and using the top layer.

Video, slides

Hidde de Vries

Hidde (@hdv) is a freelance front-end and accessibility specialist. He is a participant in the W3C’s Open UI Community Group, loves CSS and strongly believes in a web that puts people first. Hidde writes about these things and more on hidde.blog.

For over 15 years, he worked for organisations like Mozilla, W3C, the Dutch government and the European Commission. Hidde has a degree in Philosophy and used to be involved with the professional association for Dutch front-end developers, organising meet-ups, workshops and conferences.

Designing voice interfaces

It takes more than words to design and build an effective voice interface. In this talk, Léonie will explore voice character and design, conversational user experience, APIs for generating synthetic speech in the browser and in the cloud, and techniques for manipulating the voice output including the most interesting CSS module you've never heard of!

Video

Léonie Watson

Léonie is Director of TetraLogical; a member of the W3C Board of Directors, and co-Chair of the W3C Web Applications Working Group. She's also co-organiser of the Inclusive Design 24 (#id24) conference; and co-author of the Inclusive Design Principles and the Do No Harm Guide: Centering accessibility in data visualization.

Tinkerer by Night

As a designer I try to be a master of my chosen medium – CSS and HTML with a whiff of JS. No better way to explore the possibilities of CSS by stretching it to the max. Throw your certainties out of the window and start experimenting with new, elegant and joyful ways to design and code the Web. Sometimes a success, just as often a total fiasco – but always educational, humbling and fun! This live-coding session pays homage to utterly useless side projects and to why they are important for my digital design students as well.

Video, slides, links and demos

Sanne 't Hooft

Sanne is a seasoned lecturer at the Hogeschool van Amsterdam. His specialties include interaction design and code for digital design students. Until now 5793 (and counting…) students have had the pleasure ;-) of attending one of his courses. In a past life Sanne used to be an interaction designer of large complex functional applications. As part of that job, he created lots and lots of prototypes to test new interaction design ideas using actual code. Nowadays his code tinkering (which is limited to utterly useless side projects) is always fun (and educational), allowing him to push the capabilities of CSS and keep his coding skills sharp.

Style Recalculation Secrets They Don't Want You To Know

A deep dive into style recalculations and CSS selector performance

How do browsers actually recalculate styles when webpages change? Can the way you write CSS impact the speed of the recalculation process?

In this talk, we'll go through the details of how browser engines react to DOM changes and apply styles to the page again. We'll also take a look at examples and case studies to make things practical. And finally, we'll review developer tools that will help you investigate style performance bottlenecks.

Video, slides

Patrick Brosset

Patrick has been working with web technologies for over 2 decades. He has built websites and apps, libraries and open-source frameworks, and has worked on both Firefox and Chromium DevTools.

Patrick currently works at Microsoft as a developer relations PM on the Microsoft Edge team. He is passionate about the web platform, PWA, and DevTools, and writes a lot of articles about it at on his blog, css-tricks, smashing magazine, and others.

Why Doesn't CSS Have Scope?

People talk a lot about how CSS “isn’t scoped” and that this is a problem somehow. But what do they mean? Isn’t apportioning scope to style what CSS is for? This session will ask whether “global” CSS is such a bad thing, if stylesheets themselves are really a good thing, if we really need to rely on a framework developed at a genocide fomenting social media company to add scope to CSS, and what we can learn about CSS from the critical reception of Swedish death metal band Entombed’s 1996 album, “To Ride, Shoot Straight, and Speak The Truth”.

Video

Heydon Pickering

Heydon is a technical writer, frontend developer, and video producer. They co-wrote Every Layout with Andy Bell—the release of which first being announced at this very conference! Heydon likes CSS algorithms, baritone guitars, and generative art.

This Talk Is Under Construction: A Love Letter to the Personal Website

Remember Geocities? The unbridled creativity and questionable colour schemes of a bygone era. There was a time when websites existed as reflections of your personality or a shrine to your favourite band rather than carbon copies of a Facebook page or Twitter feed. Content wasn’t algorithmically curated, but shared through links pages and webrings.

With today’s browsers and modern CSS, we have at our fingertips so many powerful APIs and tools to build the most incredible, beautiful and wonderfully pointless websites that have ever existed, in ways that are accessible and performant like never before. And in the wake of Twitter’s slow demise, the humble personal website is rising from the ashes.

This is a manifesto for building something just for the fun of it, and a rallying cry to tell your story on a platform that’s entirely yours.

Video

Sophie Koonin

Sophie is the web engineering lead at Monzo Bank in London, responsible for the web platform across the organisation and working on internal tooling that powers Monzo’s award-winning customer service. Building websites since the age of 10, she’s passionate about creating inclusive, accessible and fun websites that people love. Sophie writes about tech & mental health at localghost.dev, builds intentionally useless web apps, and makes music.

Friday MC

Michelle Barker

Michelle is a Senior Front End Developer at Ada Mode, where she builds web apps for the renewable energy industry. She’s the author of front-end blog CSS { In Real Life }, and a Mozilla Tech Speaker. She has written articles for CSS Tricks, Smashing Magazine, and Web Designer Magazine, to name a few. She enjoys experimenting with new CSS features and helping others learn about them.

CSS Containers, What Do They Know?

A deep-dive introduction to CSS Container Queries

How did Container Queries go from ‘impossible’ to ‘shipping’ after so many years? How do we use them, and what hidden powers do they have? What are CSS containers, and what queries can they respond to? Let’s find out!

While the basics look a lot like media queries, and can work as a drop-in replacement for many existing @media rules — there are some key differences to understand, and a lot more power than you might expect. Along the way we’ll encounter CSS fundamentals like normal flow, intrinsic and extrinsic sizing, value resolution, and more. Join me to learn all you need to know about using container queries in your web projects.

Video, slides

Miriam Suzanne

Miriam is an artist, engineer, and open-web advocate. She’s a co-founder of OddBird, Invited Expert on the W3C CSS Working Group, and Sass core contributor who enjoys pushing the boundaries of web technology.

These days she’s working on specifications for Container Queries, Scope, and Cascade Layers in CSS; extending the Sass color module to support wide-gamut colors; and learning to crochet socks.

Modern CSS Development: Tooling & Workflows

In this session, you'll learn how to use modern tooling to your advantage when working on CSS code. Quickly scaffold out your project, use code snippets in any context, setup powerful editor workflows, and more. You'll also learn about tools that can help with CSS performance and visual regression testing, so you can confidently change your code while trusting the process!

Video

Umar Hansa

Umar is a front-end web developer, public speaker and content creator based in London. Umar has a focus on writing tips, tutorials and documentation for the modern web platform. One of the projects he plans to explore and share with the community is using modern tools and technologies for a better development and debugging workflow.

Modern CSS For Dynamic Component-Based Architecture

Unlock the potential of modern CSS development! Explore a modern project architecture that emphasizes theming, responsive layouts, and component design. Learn about features to improve code organization, and dig into layout techniques such as grid and container queries. Get inspired by real-world examples of context-aware components that use cutting-edge CSS techniques. After this informative session, you’ll be inspired to expand your CSS skills and ready to create scalable, future-friendly web projects.

Video, write-up, slides

Stephanie Eckles

Stephanie is a front-end-focused SWE at Microsoft. She’s also the author of ModernCSS.dev which provides modern solutions to old CSS problems as in-depth tutorials and is the creator of StyleStage.dev, and author of SmolCSS.dev and 11ty.Rocks. Steph has well over a decade of webdev experience that she enjoys sharing as an author, egghead and workshop instructor, Twitch streamer, and conference speaker. She’s an advocate for accessibility, scalable CSS, and the Jamstack (especially Eleventy). Offline, she’s mom to two girls and a cowboy corgi and enjoys baking.

Supercharge your skills with creative coding Vol. IX: You :has the power.

The web platform is an incredible thing we all have access to. You’re able to create pretty much anything you want (within reason) by opening a browser. It’s just pixels, am I right?

In a sea of gradient text and three box layouts, express yourself! Creative coding really brings with it so many benefits. But, the main one? The confidence to solve whatever is laid in front of you. When you stop dwelling on the "Why?" and worry less about the "How?", you can focus on the exciting part, the "What?".

Video

Jhey Tompkins

Jhey brings ideas to life with code! Branded as a whimsical specialist, he shows people how to level up using creative coding on the web platform via the “Impractically practical”. He advocates for creative coding giving you the confidence to build anything you can imagine.

Shining Light on the Shadow DOM

Light DOM, Shadow DOM, encapsulation, slots, templates — vocabulary gets thrown around a lot when we talk about styling Web Components but how do all these pieces fit together? It’s easy to get caught up in the JavaScript of it all but in this talk, we’re going to dig into the nuances of styling these darlings of design.

Together we’ll examine the cascade and learn how inheritance works when Shadow DOMs get involved. After a crash-course in terminology, we’ll explore some of the “gotchas”, look at browser inconsistencies, and I’ll proffer some compatibility approaches that won’t give you a migraine. We’ll wrap things up by zooming out and examining how we can use Web Components to build consistency in a codified design library through theming.

Video, slides

Cassondra Roberts

Cassondra (aka castastrophe) is a design systems engineer for Adobe and member of the CSS Working Group. At Adobe and before that, Red Hat, her work involves collaborating with designers on building scalable systems; recently leveraging Web Components to build theme-able assets to be consumed in diverse contexts. More than anything, Cassondra cares about creating a free and open web that is accessible to all. She’s currently putting the finishing touches on a comprehensive guide to styling Web Components.

Liven up your websites with Scroll-Driven Animations and View Transitions

It is important for a user interface to feel polished and fluid. A great way to help with that are appropriate animations and transitions. They help users build an accurate mental model of how the interface works, thereby increasing the overall usability.

In this talk, you’ll learn how you can use View Transitions and Scroll-Driven Animations to achieve exactly that.

Video

Bramus Van Damme

Bramus is a web developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since.

As a Chrome Developer Relations Engineer at Google, he spreads the word on CSS, UI, and DevTools. Before joining Google, Bramus worked as a freelance developer in various front- and backend roles. For seven years he also was a College Lecturer Web & Mobile, educating undergrad students all about HTML, CSS, and JavaScript — in that order.

That’s not how I wrote CSS 3 years ago

How I write CSS has changed several times in the last two decades. It made different transitions, especially in the first couple of years, until I found my final form for the longest time. Due to some addition to the language, it changed again recently and will change even more with modern CSS.

In his talk, Manuel goes down memory lane and presents some of the most significant impacts that changed how we write CSS in the past, and he tries to predict future influences. He also explains why his project #100DaysOfMoreOrLessModernCSS was one of his best and worst ideas at the same time.

Video, slides

Manuel Matuzović

Manuel is a freelance frontend developer, accessibility auditor, teacher, and consultant who’s passionate about the web. He writes about accessibility, HTML, and CSS on his personal blog matuzo.at and on htmhell.dev.