That was Web Day Out

I’m in Brighton, and it’s blowing a gale outside. The air is fresh and salty and I’m gliding back to my hotel room 50cm above ground, my mind still high on the day’s vibes.

I’ve just left Mrs Fitzherbert’s pub after a fantastic day at Web Day Out, ”a one-day event all about what you can do in web browsers today!” organised by Clearleft and MC’d by Jeremy Keith. Just up my street.

I love these kind of small, one day, focus driven conferences.

Eight talks around topics around what can be done in modern browsers, from CSS to the W3C working groups, via what is the browser baseline, battle tested progressive web apps, accessibility concerns and progressive enhancement. No JavaScript (frameworks) required, just love and care for CSS and HTML.

Brighton is the perfect place to host event like this. Its vibe and size are human, rich with creativity and imagination. Open minded.

Jemima Abu I can’t believe it’s not JavaScript

The day kick off in style and energy with a talk by Jemima Abu who covered some of the latest native HTML elements or CSS properties available in baseline. It was talk full of sparkles and passion. I connected immediately. It was my first opportunity to listen to Jemima present in person, and boy was I impressed.

We have a lot of shit in our packages

I’m probably going to repeat myself in this post, but the care and passion (and love) for native HTML and CSS was palpable. Both on stage and in the audience. I use a bunch of the elements that were presented, but the popover API stood out. It came up in a number of talks that followed. Tooltips, modals, or styling the select element, the popover api is at the rescue.

Rachel Andrew A pragmatic guide to browser support

Rachel Andrew (the grid lady, by her own admission) talked about Web Platform Baseline, how it worked and how to use it, relying on common sense and giving many useful tips on how to suggest new features, and how to decide to use one feature (or not) and when.

Think about your audience Think about your team Understand path to baseline.

Rachel’s presentations are so well structured and illustrated, it’s each time a renewed pleasure to listen to her.

Rachel announced that Subgrid becomes widely available next week!

Widely available: 30 months have passed since the newly interoperable date. The feature can be used by most sites without worrying about support.

Aleth Gueguen Progressive web apps from the trenches

Aleth Gueguen presented real world use and tests of PWAs with loads of tips, especially for iOS - surprise surprise - that are golden for people developing real world solutions that must run in real world conditions. Precious.

Let the user know the state of their data Make it seamful Provide a button to trigger a sync.

Harry Roberts Build for the web, build on the web, build with the web

Harry Roberts stormed the event with a punchy presentation that resonated close to my heart, and not only because he was kind enough to call me out, but because of what he echoed what I’m trying to express in a professional capacity for a while now. I was fortunate to work with Harry last year for a client, and he is an amazing person, generous, committed and so talented. I always learn so much when he’s around.

The web is versionless, and versionless is a virtue Stick with the web.

A opiniated talk on his love from the web. Check-out his post for a deep dive. His stories about SPA, made me laugh… (if you can name 5 pages of your website, it’s not an SPA). Harry elegantly framed out loud what I’ve been struggling to verbalise these last years.

Harry posted his slidedeck to SpeakerDeck.

Manuel Matuzovič Breaking with habits

Manuel is my latest favourite speaker and person. I had the pleasure of discovering him at Smashing Conf in Freiburg and later at beyond tellerrand (or the other way around) and I finally got to meet him in person at Web Day Out (it was his birthday!) He’s passionate (nerdy) and loves sharing his experience and knowledge, and is really a truly nice person.

I love the way he dives deep into a subject to explore and understand all the nook and cranies (checkout his talks on colour, or his type scale - brilliant!). I always learn so much each time our paths cross. Check out his blog and his no-class CSS framework Oli.

Richard Rutter What’s new in web typography?

Richard made me love typography, and I try to jump on every opportunity to read or listen to him. He dived into nerdy typographic details like font-size-adjust (0.417!), variable font properties or fluid typography. Check out his aspect value calculator.

His segment on lists (don’t miss his article on Piccalil.li) and headings positioning and aligment (text-box) were stunning. So many details… I was reminded to use OpenType properties more often (eg. font-variant-position). Super subtle.

Jake Archibald Customisable select and the friends we made along the way

A fascinating time travel in the history of the select element. It turns out select is the element the most re-created by developers, and the one that gives the most frustration (by far) - no surprise.

OpenUI W3C community group worked hard on the process that led to the popover API mentioned earlier by Jemima. Read more about the popover accessibility.

The stylable select has finally landed in browsers - 33 years after its initial proposal.

Many more stories about the top layer in which popover renders and how to position it (position-area) or style the picker (appearance) with any CSS properties and pseudo-selectors (::picker-icon). The select element allows any HTML element now, like div or img (or button!). Ever heard of selectedcontent? Powerful.

Lola Odelola The browser is the playground

Lola started with a project she led last year “alt-text as an Artistic Practice”. How would you describe an abstract image? Consider alt-text as the primary way to experience an image (prefer-alt-text - turns out, it’s a bad idea).

Robb sits in a room painted in shades of disrupted sleep and red velvet. He is amongst friends, drifting between the embers of his second coffee and the spark of a third. – Robb

or

Three aging emos post gradiose yet humbly against the urban backdrop of Leeds, looking either wistfully off into the distance or straight into the camera, they embody everything that can be right with the world. Hope, confidence, quietness, serenity, camaraderie. The day was good, and so are these people. – Salma

Lola dove deep into into W3C processes (she is the co-chair of W3C Technical Architecture Group) and described and explained many things I wasn’t aware of (eg. the priority of constituencies or reducing user fingerprinting). Throught her talk, she elegantly demonstrated why a ‘dream feature’ (like prefer-alt-text) can be a bad idea, and all that from the point of view of a browser engineer.

Amazed, and proud

I’m truly amazed by the rate at which new features, elements and properties are appearing, and proud to be part of this community, that strives to to design and build on the web, for the web, with native web elements.

More links:

• Mastodon toots
• Marc Thiele’s photos
• My Flickr album
• “That was Web Day Out” by Jeremy
• “Look into the future of the web platform” by Rachel

Make friends, not followers

Michael Flarup wrote about the comeback of small conferences in his latest newsletter that echoes another reason why I like attending these kind of events so much:

A conference is one of the few places where a scattered online community briefly becomes real.

There’s a realness that comes from meeting your peers face to face. All of the fluff that so often surrounds online discourse falls away. There is no hype, just passion. No engagement hook, just curiosity.

Instead of making followers, you make friends.

Thank you Jeremy and Clearleft for hosting such events 💜

I couldn’t make it to #WebDayOut. Thankfully, adactio.com wrote about it and linked to a bunch of online talk about it. Special shout out to joshtumath.uk who live-blogged each talk. adactio.com/journal/22465

Read @adactio post https://adactio.com/journal/22465 that mentioned:

“’Share what you know!”’ That was the original motto of the World Wide Web project.”

Got curious for source, did not find any on CERN web history sites. AI summaries only reference non sourced versions like

https://phys.org/news/2009-03-www20-techies-cyber-zoo.html

“the project’s slogan was “’et us share what you know.’”

Any evidence of this? was it informal? a tshirt? @ricmac @Jayhoffmann even reaching to @timbl

That was Web Day Out

(I meant to post this the weekend after the conference, but between me coming down with the lurgy, and then my server having some issues, it’s taken me until now to get my shit together)

On March 12th I had the pleasure of attending Clearleft’s latest conference, Web Day Out, in beautiful Brighton.

Billed as “A one-day event all about what you can do in web browsers today!”, it was a day dedicated to the web platform itself. No frameworks, just the vanilla web. HTML. CSS. And a smattering of Javascript. My favourite things.

And this was excellent timing, given we’ve nearly finished the migration of Pulse to a good old “boring” HTML/CSS frontend. We made a conscious decision during the migration away from the previous Wordpress/React site to make the minimum amount of changes, focusing primarily on the performance and accessibility improvements we could make on the way.

But now we’re at the end of that phase we will start looking at all the other improvements we can make, and I was super eager to refresh my knowledge of the web’s latest tricks.

After introductions from Jeremy, the day kicked off with Jemima Abu in a high-energy talk about how to use as little javascript as possible. Jemima demonstrated native HTML features such as accordions using the <details> element, and dropdown menus with Popover API, all with humour and an excellent use of memes, a favourite of mine was the comparison of the “left-pad incident” to Thanos’s “Snap”.

Next was Rachel Andrew, with a guide to using Baseline effectively. I’ve been lucky to see Rachel speak many times during my career, and I’m always in awe of her ability to clearly and concisely explore a topic.

Aleth Gueguen talked about building an offline-first multi-page progressive web app for use while out sailing on the ocean. I can’t imagine a more hostile R&D lab! Offline first, serve from the browser cache, store data in indexedDB, don’t try and manage state, just persist everything through the URL. This gave me flashbacks to the days of working for whales.org and prototyping something similar using CouchDB and PouchDB.

Harry Roberts went off on one about javascript front ends, and it was glorious (especially given the aforementioned migration). Some choice (paraphrased) quotes for me were:

• Going against the grain of the web has a cost, a literal cost.
• It is developers that make websites slow.
• If you can list more than one page of your site, then why are you trying to make it an SPA?

It was Manuel Matuzovič’s birthday, so we sang for him. Then he showed two very interesting projects, oli.css a classless base stylesheet with some very interesting configuration options, and UA+, a new type of user agent focused reset

Richard Rutter is another person I’ve had the pleasure of seeing speak numerous times now. I always pick up so many typography tips from his talks. Whenever I wonder why a design isn’t quite there yet, or I feel like it needs some extra polish, I always think “What would Richard do?”.

jake jake Jake Jake Jake Jake JAKE JAKE JAKE Archibald (you had to be there) gave us the story behind the long long road to having a customisable <select> element, and all the features that had to be in place to make it happen, including anchor positioning and popovers.

Lola Odelola finished the day by walking us through the standards process using an imaginary media query prefers-alt-text. I’d seen Lola speak previously at All Day Hey! last year, and this talk was a followup to her exploration of alt text as a space for art and creativity.

This was another fantastic conference from the Clearleft team, and one that I hope is repeated next year. It is absolutely incredible what you can do in the browser these days, and even though I thought I was keeping up with the latest developments, it astounded me how far things have come.