CSS Day

Oh Snap!

CSS scroll-snap is a classic CSS property; small, innocent looking API with huge potential. Learn the basics and value essentials of CSS scroll-snap, the ancillary properties scroll-padding and scroll-margin, debugging with DevTools, plus a bag of snap tricks and glimpse into supporting future properties.

Video, slides, snap gallery, Scroll Snap 2 spec

Adam Argyle

Adam is a bright, passionate, punk engineer with an adoration for the web. He prefers using his skills for best in class UI/UX and empowering those around him. While currently a developer advocate at Google on Chrome, he’s worked at small app agencies, medium design agencies, startups, and consulting companies. At those companies his roles spanned product lead, front end architect, ui/ux engineer, ux designer, service designer and platform lead. These roles lead to developing over 50+ web apps across nearly every imaginable stack and screen size. His perspective on web dev is extracted from these experiences.

Getting Creative with Keyframes

Working with keyframes can be difficult even if you only have one animation, but the real problems begin when you have 3 objects with 5 animations, each of which has different keyframes, duration, timing-function… and yet they all need to be exactly synchronized. So how do we do that?!

Video, slides and demos

Amit Sheen

Amit is an experienced web developer, doing mainly front-end, specializing in CSS, animations, and creative coding. Over the years he's taken part in developing dozens of advanced web/mobile applications from the ground up, and he's always ready for a new challenge. Amit has an entrepreneurial mindset, a pathological curiosity about new technologies, and a constant desire to learn new things.

Collaborating without Borders

Fifty years ago, working meant a commute, regular work hours, and an office. Today, all it requires is a computer and a fast internet connection.

So, how can a fully distributed company come together to build reliable, coherent, and inspiring products used by millions of users worldwide?

From Communication Guidelines to Design Principles, from Ideation to Release, this talk will touch on all the essentials to make Remote Work work.

Video, slides

Ana Ferreira

Ana is Head of design at Doist. Ana started at Doist in 2013 after discovering her passion for creating applications that simplify peoples’ lives. Today, she leads the fully distributed design team from her home in Porto, Portugal, in all design efforts, from brand to product, for the task management app, Todoist, and the asynchronous messaging app, Twist.

Ana is passionate about design, product, usability, accessibility, and productivity. And she believes the future of work is remote.

The Joy of CSS

A full Bob Ross style CSS landscape live-coding session. Ben will show us what the point of drawing with CSS is, and why laziness isn’t something to be ashamed of. We’ll take a peek inside Ben’s brain and his life as a designer.

Video, slides and talk outline

Ben Evans

I’m a CSS artist, frontend developer, UX/UI designer and illustrator. I absolutely love being creative. Design is my life. I have done nothing else in my spare time since before I can remember. From designing Lego spaceships as a young boy, to designing and building websites used by millions today. It’s something I do before going to bed, and something I can’t wait to do in the mornings.

The CSS Cascade, a deep dive

CSS is short for Cascading Style Sheets. But what exactly is this Cascade, and how does it work? What are Origins? How do you calculate Specificity? And where do those new Cascade Layers you might have heard of fit in? And oh, what exactly happens when you use an !important somewhere?

In this insightful talk, we’ll take a look under the hood of browsers, and detail how they determine which CSS declarations to apply and which not.

Video, slides

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.

Escaping the sRGB Prison

Imagine that I told you that you are only allowed to use two-thirds of the colors that your screen can display. All the brightest and most vivid shades are not allowed. Unacceptable, right?! Welcome to Web design for the last seven years. You might not know it but compared to native apps, you are in the sRGB Prison. After attending this talk you will understand the measurable, reproducible sensation we call color. You will understand Lab and OKLab color spaces, be comfortable with gamut volume plots, and be able to laugh at snake-oil claims about color gamut coverage in advertising. Having broken out of jail, and knowing the basics of perceptual uniformity, you will be really looking forward to seeing CSS Color 4 and 5 implemented in all browsers. This is an intermediate to advanced talk about the current state and near future of cutting edge color on the Web.

Video, slides

Chris Lilley

Chris Lilley is a Technical Director at the World Wide Web Consortium (W3C). Considered “the father of SVG”, he also co-authored PNG, was co-editor of CSS2, chaired the group that developed @font-face, and co-developed WOFF and WOFF2. Ex Technical Architecture Group. Chris is co-editor of CSS Color levels 3, 4 and 5, and is the W3C representative to the International Color Consortium. Also, he's a recipient of an Emmy Award :-)

Our MC!

Hui Jing Chen

Hui Jing is a self-taught designer and developer with an inordinate love for CSS. Reducing lines of code in her web projects makes her extremely happy. She used to play basketball full-time and launched her web career during downtime between training sessions.

In And Out Of Style

It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!

Video, slides

Jeremy Keith

Jeremy Keith lives in Brighton, England where he makes websites with the splendid design agency Clearleft. You may know him from such books as DOM Scripting, Bulletproof Ajax, and HTML5 For Web Designers: Return Of The Standards. He’s the curator of the Responsive Day Out conference, and he organised the world’s first Science Hack Day. He also made the website Huffduffer to allow people to make podcasts of found sounds—it’s like Instapaper for audio files. Jeremy spends most of his time goofing off on the internet, documenting his time-wasting on adactio.com, where he has been writing for over ten years.

CSS Variable Secrets

By now most developers use CSS custom properties on the regular, but few understand them deeply enough to harness their full power. Lea will take you on a journey from the practical to the mind-blowing, and from the widely implemented to the cutting edge, demonstrating a host of tips, tricks, and gotchas relating to CSS variables in her trademark interactive style. You will leave this talk with both your CSS toolbox and your mind refreshed, and a much deeper understanding of CSS custom properties that you ever thought possible.

Video, slides

Lea Verou

Lea has been working on improving the Web for over a decade, from many angles. She helps move Web technologies forwards, as an elected W3C Technical Architecture Group (TAG) member, and as a longtime CSS Working Group Invited Expert and co-editor of several CSS specs. She currently works at MIT, doing research at the intersection of usability and programming languages and intermittently teaching these topics. She is a well known speaker and author, having written several articles, book chapters, and the bestselling advanced CSS book CSS Secrets. Lea has also started several open source projects and web applications, such as Prism, Mavo, and Awesomplete. Her open source work is used on millions of websites. She tweets @leaverou and blogs at lea.verou.me. She holds a MSc in Computer Science from MIT. Despite her technical pursuits, Lea is one of the few misfits who love code and design equally.

Service Design and Front End Interaction

I have been working as a service design researcher for almost ten years in governmental organisations. But since I tracked a month of my own digital relation with ‘the government’ I have a new look on how government services should be designed. In my talk I’m going to take you on a trip through the complex world of digital governmental services and how democratic principles and user research should complement each other. You will have a new look on service design and front end interaction and you will realise that working in design might even be more political than being a member of parliament.

Video, slides & text

Maike Klip

Maike is a designer/researcher and works for the Dutch government. She has worked on digital services like student finance, the integration law and she helped develop the CoronaMelder app. She also did a photo series called ‘De begripvolle ambtenaar’ which researches the role of empathy in digital government. Last year she started working at the National ombudsman doing more contextual research into the (digital) relation citizens have with the government, for example in cases like the consequences of the gas extraction in the North of the Netherlands. She shares her work and process on her research blog.

I pressed ⌘B. You wouldn’t believe what happened next

Whenever you press ⌘B in Figma, what happens is a choreography of events of surprising complexity. It’s a collision of two worlds – keyboard shortcuts and typography – each one with hundreds of years of history.

Video, sort of behind the scenes slide deck (in Figma)

Marcin Wichary

Marcin is a design manager working at Figma in San Francisco, focusing on the editor. He was previously at Medium, Code for America, and Google. He’s also finishing a book about the history of keyboards and typing.

Creative CSS Layout

CSS layout has moved along in leaps and bounds in the past few years. Beyond flexbox and Grid, there is aspect-ratio, min, max and clamp functions, custom properties, and logical properties, all of which can help us solve common layout challenges. Plus a whole new range of features on the horizon (with some already landing in browsers!), including subgrid, container queries and the :has() pseudo-class (or “parent selector”). As developers, the challenge is no longer whether something can be done in CSS, but which of these tools to reach for in our CSS toolbox! This session will aim to bring you up to speed with modern CSS layout, and demonstrate some creative use cases.

Video, slides

Michelle Barker

Michelle is a Senior Front End Developer at Ada Mode, with an interest in green tech and creative coding. She is author of front-end blog CSS { In Real Life }, a writer for Smashing Magazine, Codrops and CSS Tricks, and a regular speaker on CSS topics. She has a background in illustration, and enjoys tinkering with code in creative demos and side projects, as well as helping others to fall in love with CSS.

Interop 2022

For the first time ever, all major browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2022 will improve the experience of developing for the web in 15 key areas. In this talk, you’ll find out how we got here, what the project focuses on, how success will be measured, and how you can track progress.

Video, slides & resources

Rachel Andrew

Rachel Andrew works for Google as a technical writer, working on web.dev and the Chrome Developers site. She is a front and back-end web developer, author and speaker, author or co-author of 22 books including The New CSS Layout and a regular contributor to a number of publications both on and offline. Rachel is a Member of the CSS Working Group, and can be found posting photos of her cats on Twitter as @rachelandrew.

When Design Systems Lie

Design systems come with promises. But sometimes they lie. Let’s explore when this happens, why it happens, and what we might do about it.

Video

Stephen Hay

Californian by birth and Dutchman by choice, Stephen is an art director, designer-who-codes, and writer. He designed and built his first website in 1995 while art directing for a design firm. He left print behind. The things that happened after that could turn a conference bio into a book—a thriller, even. Stephen is currently Creative Director at Rabobank.

Stephen wrote the book Responsive Design Workflow, which is all about content first, progressive enhancement, low-fi wireframing, and browser-based prototyping.

Keeping Your CSS Small: scopes, containers, and other new abilities

When CSS was first created, web pages were pretty small and, honestly, not very complicated. That's no longer the case, but CSS has been slow in adapting to this new reality and helping authors deal with their complexity explosion. As a result, authors have had to turn to complex CSS management strategies, like atomic CSS or CSS-in-JS, to keep things understandable.

This is no longer the case! I'll go over a number of new pieces of CSS and DOM technology, both mature and upcoming, that helps authors manage their CSS and keep things understandable *without* having to adopt some complex new tooling.

Video, slides

Tab Atkins-Bittner

I’m Tab Atkins-Bittner. I work as a spec hacker for Google on the Chrome team, working on CSS and other assorted web tech, and am the author of the Bikeshed spec-processing tool. I’m queer, a gamer (board and video), and love animals.