CSS Day

browser.api.special() + #cssday {
  15th & 16th of June, 2017; }

Compagnietheater, Amsterdam

See our 2024 edition!

Programme

Day 1: Browser API Special

08:15Doors openbreakfast, coffee & registration
09:00Rachel NaborsAnimations
09:50Peter-Paul KochConstraint Validation
10:40<br>
11:10Philip WaltonPolyfills & Houdini
12:00Ruth JohnWeb Audio
12:50<br type="lunch">
13:50Ada Rose EdwardsWebVR
14:40Mike TaylorWeird APIs
15:30<br>
16:00Patrick KettnerProgressive Web Apps
16:50Chris WilsonPayments & Credentials
17:40Partydrinks & discussions

Day 2: CSS Day

08:30Doors openbreakfast, coffee & registration
09:00Bert Bos & Håkon Wium LieCSS Reset
09:50Rachel AndrewGrid Layout
10:40<br>
11:10Mark BoultonDesigning Grids
12:00Jen SimmonsWriting Modes
12:50<br type="lunch">
13:50Gregor AdamsVariables
14:40Tab AtkinsHoudini & the Future
15:30<br>
16:00Chris CoyierFour Properties
16:50Stephen HayCSS for Evil, not Good
17:40Partydrinks & discussions

Browser API Special, Thursday June 15th

Your MC: Mathias Bynens

Mathias is a Belgian web standards enthusiast. He likes HTML, CSS, JavaScript, Unicode, performance, and security.

WebVR

VR is here, there are VR web browsers and new APIs to enable VR across a wide range of devices. The WebVR APIs rely on WebGL to render an immersive environment. This interactive talk aims to introduce a way of writing and controlling WebGL scenes with just HTML, accessible to web developers of all skills; no knowledge of 3D rendering required!!

Ada Rose Edwards

Ada Rose is a Senior Engineer and Developer Advocate for the Samsung Internet web browser. Specialising in Virtual Reality and Progressive Web Apps.

Web Payments and Credential Management

By now, you know that Progressive Web Apps is really just a name for reducing user friction. This session will work through the next two scenarios that are challenging on the web today: getting users to authenticate and keeping them logged in, and creating pain-free checkout experiences so users can easily give you money. In this session, we'll look at the Credential Management API and the Payment Request API as solutions to these problems.

Chris Wilson

Chris Wilson is Developer Advocate on the Web team at Google. He started helping build the web in 1993 when he co-authored the original Windows version of the NCSA Mosaic browser. He then spent fifteen years at Microsoft working on Internet Explorer, and then joined Google in 2010. He has a particular interest in enabling awesome user experiences and hacking on audio and MIDI in the web platform, and is a long-time participant in various web standards working groups. He chairs the Web Platform Incubation Group at the W3C, and also sits on the W3C Advisory Board.

Weird APIs

The DOM hasn't been known for its sense of design or ergonomics, since, well, ever. In this talk I've cover a handful of browser DOM APIs that can get pretty weird.

We'll learn about some of the warts of the web platform, why we're mostly stuck with them, and ideally how we can learn from their mistakes.

Come get weird with the Fullscreen API, DOM Events, Indexed DB, showModalDialog, CSSStyleDeclaration, Canvas, WebRTC APIs... and more!

Mike Taylor

Mike Taylor leads the Web Compatibility team at Mozilla, and works from home in Austin, TX. Previously he worked at Opera Software as a “Web Opener”, whatever that means. In a former life, he studied linguistics and still has hopes of learning English one day.

Progressive Web Apps

Progressive Web Apps are one of the hottest things to come to the web platform in years, but how much of it is just hot air? When can you actually start shipping these things? Decades ago! In a hands on presentation, I'll show how PWAs are truly meant to be progressive - building on an evolution of web technologies nearly as old as the web itself, and still let you ship one of the most performant and cutting edge web apps around.

Patrick Kettner

Patrick Kettner won an eighth grade talent show competition singing Gloria Gaynor’s 1978 disco hit “I Will Survive”, and things have been looking up ever since. He has traded in the golden microphone for a PM position on Microsoft Edge, as well as being the lead developer for Modernizr. He lives in Seattle with his wonderful partner Katrina, son Holden, and dog Baxter.

Constraint Validation

Form validation is literally the oldest trick in the JavaScript book: it was just about the only thing you could use JavaScript for in Netscape 2. Nowadays the state of the art has advanced with the Constraint Validation API and the CSS :invalid pseudo-class. That sounds great ... until you actually try to use them.

In this presentation PPK will discuss how the API works, why it is not all that great, and draw some valuable lessons about how not to design APIs. He'll also tell you how to validate your forms properly.

Peter-Paul Koch

Peter-Paul Koch is a mobile platform strategist, browser researcher, and conference organiser in Amsterdam, the Netherlands. He specialises in the mobile web, and especially mobile browser research. On the Web he’s universally known as ppk. He won renown with his browser compatibility research, founded Fronteers, the Dutch association of front-end professionals, and consults with mobile and desktop browser vendors on their implementation of Web standards. His personal mobile phone collection consists of about 50 pieces. Occasionally one of them emits a soft, melancholy beep, but he has no idea which one and studiously ignores it.

Polyfills & Houdini

Philip Walton

Philip Walton is an engineer working on the web platform at Google. He writes and speaks about emerging web technologies and builds libraries and tools to help developers be successful on the web today.

Alice in Web Animations API Land

Animation is back in the web development tool chest! We know of declarative CSS Animations and Transitions and fully featured JavaScript animation libraries like GreenSock, but there's an upcoming third option: the Web Animation API! In this talk Rachel Nabors will take you on a magical journey with Alice from Wonderland to show you how this new API is used to run the CSS Animations in your browser and how you can use it to generate and manipulate animations in your project. Colorful, interactive, useful fun for all disciplines.

Rachel Nabors

Rachel is a Program Manager on the Edge Platform Team at Microsoft where she represents the web design and animation communities. At the W3C, she works to bring about the animation APIs tomorrow's web will be built on. Her goal: unite developers, designers, and Uxers--head, hand, and heart--to make the web a better place for everyone.

In the past she has worked on interactive projects with companies like Adobe, Sesame Street, and Mozilla. Today Rachel speaks, writes, experiments, curates the Web Animation Weekly newsletter, and cultivates the Animation at Work community. You can catch her as @rachelnabors on Twitter and at rachelnabors.com

The Web Audio API (with a little bit of MIDI)

Audio with web technologies; it doesn't always have to be annoying background music that starts playing when you open a new tab.

The Web Audio API is extremely powerful, we can create sounds, load them, analyse them, modify them in an insane amount of different ways. This is an in-depth talk into the different methods of the API and not just the details, but how best we could use them in our development work flow. What techniques really come in useful when loading and manipulating sounds? We'll outline just that so you can go away feeling more confident knowing you that yes you can use audio!

And if all that wasn't enough, there's just a sprinkling of MIDI to go on top.

Ruth John

Ruth is a web developer and creative technologist, who has enjoyed a career spanning over a decade working on websites, applications and most recently interactive art projects. She likes to educate people about new web technologies and inspire them to try them, coming up with exciting and engaging ways to use them, as well as interesting integrations into everyday development. As a Google Developer Expert she's almost always got a conference talk lined up or article ready to be published.

Her favourite things include hacking with hardware, evangelising about Web Audio and MIDI and taking her award nominated, hand coded, audio/visual software to the streets, (or more recently conference after parties).

CSS Day, Friday June 16th

Your MC: Vasilis van Gemert

Vasilis van Gemert is a lecturer at the Amsterdam University of Applied Sciences, where he teaches the next generation of digital product designers how to design things with the web as a material. Before he became a lecturer he worked as a principal front-end developer for large and small clients in The Netherlands. Today he only creates websites for himself. This not only means that he can use any new feature he wants, it also means he is able to investigate things that might not seem very interesting. Most of the time this turns out to be true.

CSS Reset

In this session the two inventors of CSS will talk about what they’d do differently if they could design CSS all over again. For instance, was the C-language syntax optimal, or should CSS1 have been even simpler to achieve quick and widespread interoperability?

Bert Bos

Bert Bos studied Mathematics and Computer Science at the University of Groningen, The Netherlands, where he also got his PhD, on a thesis about Graphical User Interfaces. Together with Håkon Wium Lie he invented CSS (Cascading Style Sheets) and, in 1995, he joined W3C to further develop and standardize CSS. He created the Internationalization activity of W3C and was also involved in developing Web technologies such as HTML, XML and MathML. Today he is still Activity Lead for both the Style and Math Activities in W3C, but also works on other topics, such as, most recently, Web Security. Bert is based at ERCIM, the European host of W3C, in Sophia-Antipolis in the south of France.

Håkon Wium Lie

Håkon Wium Lie proposed Cascading Style Sheets (CSS) while working with Tim Berners-Lee at CERN in 1994. Along with Bert Bos, he developed a set of ideas for web style sheets into a implementeable W3C Recommendation. As CTO of Opera Software he shepherded Opera's implementation, and he proposed the Acid2 test to ensure that all browsers complied. He is now the chairman of YesLogic, which makes the Prince CSS-to-PDF formatter. He holds a MS from the MIT Media Lab, and a PhD from the University of Oslo.

A Tale of Four Properties

There are some values in CSS that allow you to create shapes. For example, you can use the clip-path property and the circle() function to clip and element in a circle of your liking. A circle is a "basic shape" in CSS, just as it is in SVG, and you can use these basic shapes as values for a number of CSS properties. Basic shapes don't include "path" though, which is the ultimate vector defining syntax. In a strange twist, path() does exist in CSS, in places that don't support basic shapes!

In other words, it’s complicated. In this session Chris will show you how to carefully navigate this minefield.

Chris Coyier

Chris is a web designer and developer. He created CSS-Tricks, a website all about building websites. Going strong for nearly 10 years, it’s a community with a blog, forum, almanac, and video screencast.

He is also the co-founder of CodePen, a playground for front-end web development. CodePen is a code editor for HTML, CSS, and JavaScript right in the browser. It’s also a community. People share what they make, write and comment about code, collect favorites, follow each other, and more. It’s a social network for front end designers and developers.

Chris is the co-host of a podcast called ShopTalk, a show about (you guessed it), building websites. Modelled after CarTalk, the show features call-in questions and industry guests. It’s going on 230 episodes!

Chris has also spoken at events all over the world and authored two books: Pratical SVG and Digging Into WordPress. The web is Chris’ life and career focus. The web is an incredible, inspiring, and empowering place and helping people know it better is good for everyone.

Variables

The concept of CSS variables has been around for a while but just recently most modern browsers actually started to support them. I always knew that something amazing would happen and that this feature would allow things beyond our imagination.

While the use case for variables might be very obvious the features are often underestimated. Variables in CSS allow behavior that was preivously not possible. Looking at every detail and reading the specs carefully can deliver some interesting facts. I found awesome but also scary possibilities and created examples for any use case I could think of.

It turns out that CSS variables are a real "Game changer" with one mind blowing feature after the other.

You want to interact between CSS and JS, you're looking for a layout framework, or simply want to reduce your code base? CSS variables cover all these cases and a lot more.

Gregor Adams

If you have ever heard of Gregor Adams aka “pixelass” it was probably related to some impressive use of CSS. In the past years Gregor dedicated a lot of time to art, in form of fractals, illusions or animations. Being creative, as he says, is one of the reasons for his wide range of skills and source for his love for detail. A few years ago Gregor decided to try something new and quit his old job to work as a web developer. Self taught and mentored by the open source community he soon found his path and now spends a lot of time helping others or speaking about his works.

Writing Modes

The web was invented to display text in a left-to-right horizontal writing mode — the way English and other western European languages flow. But as Bruce Lawson says, WWW stands for the World Wide Web, not the Western Wealthy Web. It's more important now than ever to be inclusive and global in our thinking, and resist imperialistic and nationalistic impulses.

Of course, over time the web has evolved. Unicode and the bidirectional algorithm provide support for right-to-left languages. More recently, the CSS Writing Mode specification added support for scripts that are typeset vertically. This talk will go through the Writing Mode Specification, unpacking our landscape of CSS tools for typesetting a complex range of written language. You'll also learn tricks for using writing mode properties to typeset graphic design effects for horizontal languages.

Jen Simmons

Dubbed “the Terry Gross of the tech industry,” Jen Simmons is the host and executive producer of The Web Ahead. Her in-depth interviews explain emerging technology and predict the future of the web — and won the 2015 Net Award for Podcast of the Year.

Jen is a Designer and Developer Advocate at Mozilla, where she advocates for web standards and researches the coming revolution in graphic design on the web. She’s spoken at events including SXSW, An Event Apart, Fluent, Generate, Future of Web Design, and Respond. Her talk, Modern Layouts: Getting Out of Our Ruts, was awarded Best Conference Presentation at CSS Dev Conf 2014.

Jen launched her first client website in 1998 and spent years making sites for small mom & pop shops, arts organization, and creative individuals. Her more well-known clients include CERN, the W3C, Google, Drupal, Temple University, and the Annenberg Foundation. Jen earned a MFA in Film and Media Arts from Temple University. She lives in New York City.

Designing Grids

We’ve been using the same 12 column grids on the web now for over a decade. What started with a few blog posts by an influential couple of design bloggers in 2006 found its way into new (at the time) CSS frameworks and that was that. However, there is way more to designing grids than choosing how many columns you want. Lucky for us, with Grid Layout, we have a powerful tool to realise those grids.

This talk will delve into grid design theory and make it applicable for today’s web. We’ll tackle how you systematically make decisions about how to approach grid design and resulting layout. How you create connectedness between design elements and how a well-designed grid can help answer a plethora of design problems in your process. Mark will bridge the gap between grid design and layout theory and modern web design that you can put into practice tomorrow. Together we might just move the web on from 12 columns for the next decade.

Mark Boulton

Mark is a typographic designer and a member of the International Society of Typographic Designers; author of Designing for the Web and Web Standards Creativity; co-creator of Gridset; and was a founding partner of indie publisher, Five Simple Steps.

Mark is the Design Director at Monotype following the acquisition of his small design studio, Mark Boulton Design. Previously, Mark Boulton Design worked with global media companies such as ESPN and Al Jazeera; small brands with big stories like Hiut Denim; technology organisations such as Drupal and Alfresco; and home to the greatest scientific experiment on earth, CERN.

Living in Wales with his wife and two small children, Mark likes nothing more than riding up hills on his bike, trying to cook Japanese food, and consistently moaning about the design of bathroom taps.

What I discovered about layout via CSS Grid

CSS Grid Layout finally lands in browsers in 2017, after over five years of specification and browser development. For some of us, we may quickly find 80% of our users have support for the spec. For others, we can take advantage of Grid in a progressively enhanced way - leaning on CSS Feature Queries to detect support. Grid enables a whole range of layout possibilities, both in terms of streamlining existing patterns and in creating new design possibilities for the web.

This is a talk about Grid Layout, and the previously impossible tasks that grid makes possible. However it is also a talk about what it is to do CSS layout in 2017. I’ll be sharing the things I’ve learned about layout, as I’ve learned about Grid. Passing on the key lessons that can help you really take advantage of what has shipped in browsers already, and the things that are to come.

Rachel Andrew

Rachel Andrew is a front and back-end web developer, author and speaker. Her books include the recent Get Ready for CSS Grid Layout and she is a regular contributor to a number of publications both on and offline. Rachel is co-founder of the CMS Perch, a Google Developer Expert and an Invited Expert to the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk.

CSS for Evil, not Good.

Fact one: The language we use for designing the Web is a constantly evolving, powerful tool.

Fact two: People who stand to gain something from you have a motive to deceive.

In this presentation, Stephen explores the dark—and sometimes scary—space where both meet.

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 Head of UX at online auction platform Catawiki.

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

Houdini & the Future

Tab Atkins

I'm Tab Atkins Jr, and I wear many hats. I work for Google on the Chrome browser as a Web Standards Hacker. I'm also a member of the CSS Working Group, and am either a member or contributor to several other working groups in the W3C.

Side Events

Lecture and masterclass by CSS pioneers Bert Bos and Håkon Wium Lie, June 15th

CSS pioneers Dr. Bert Bos, from the World Wide Web Consortium (W3C), who is based in France, and Dr. Håkon Wium Lie from YesLogic, will give a unique lecture and a masterclass at CWI on Thursday 15 June 2017. They will talk about 'A walk-through of CSS Grid' and 'CSS in print'. Everybody interested in the current state and future of the CSS web standard for web design and print is cordially invited. Please save the date! Abstracts can be found below.

The lecture and the masterclass will be given in English. Date: Thursday 15 June, 14.00-17.00h. Location: Centrum Wiskunde & Informatica (CWI) , Science Park 123, 1098 XG Amsterdam. Admission fee:100 euro. Admission for Members of W3C, ISOC.nl, students and press: 1 euro. As there is limited space available, please register soon.

More info: cwi.nl

role=drinks, June 17th

It’s an accessibility meetup! The event features lightning talks by accessibility specialist, time to talk to the speakers and fellow attendees, and more than enough time to grab a drink.

You'll have to register, but on the other hand it's free. So what's not to like?

More info: roledrinks.com

“Heading home after a very fun #cssday. Thanks for everything guys, see you next year! (with html api day 😉)” — Tom