State of the Browser 2023 Conference Recap

Preamble#anchor

I’ve been working on this recap in bits and pieces since the State of the Browser conference in September. Now that it’s already mid-October I’m happy to finally be able to share my lightly edited notes from each of the speaker sessions.

I also added a “More Background” section at the end that gets into more detail about how a guy from the Midwest ended up sponsoring and attending a conference in London.

SotB Sessions#anchor

Michael R. Lorek – “Web Standards: Does Anyone Actually Care?”#anchor

Validate your code, test for accessibility, pen test it – it all contributes towards the resilience of the code you release. Educate yourself and your peers on web standards, it’s important!

Recording and Transcript of “Web Standards: Does Anyone Actually Care?”

My Session Notes#anchor

• Highlights of the evolution of the web, from introduction in 1991 to 1.13 billion (200 million active) websites on the internet today
• Recap of UX layers of a Web Page from 2006
• Definition of Web Standards from the W3C, standards are important. But now in 2023, do folks still care about web standards?
  • Zero of the global top 100 used sites in 2022 contained valid HTML, two in 2021
  • Three had valid CSS in 2021, 13 of 94 were valid CSS in 2022
• The web is broken, why? What’s the cause
  • WYSIWYG tools, building sites without any code
  • WordPress, themes are rarely validated
  • Third Party Snippets, often risks of questionable code quality
  • Design systems are mostly on JS frameworks
  • Enterprise tech like No code, SaaS
  • AI? Not ready but will it ever fix all that flawed code?
  • Inadequate teaching of semantics and standards
• Why do we need to validate, what are the benefits?
  • SEO – better crawlability, semantics are going to help
  • Accessibility – Improper formatting can lead to barriers, lack of semantics or misuse causes confusion
  • Security – Missing doctypes, unescaped characters, improper attribute quoting. All can lead to inconsistent rendering, opens up vulnerabilities, and manipulating attributes for XSS attacks
• Details matter
  • HTML charset needs to be prioritized in the first 1024 characters
  • Be aware of inconsistencies and semantic details, acronyms vs abbreviations for example
  • UTC, Cities and Time Zones – adding <time> to the code to detail the time zone
  • Multiple languages mixed on one page
• Code quality is imperative
  • Ensure code is clean and readable, understand its backend and frontend performance, accessibility, sustainability
  • It all adds up!

Chris Ferdinandi – “Speedy Dev Insights”#anchor

Recordings and Transcript of “Speedy Dev Insights”

My Session Notes#anchor

• My First Web Component
  • Creating a custom element requires at least one dash (single word elements are reserved)
  • customElements.define()
  • constructor function runs when a new instance is created
  • additional functions can be created to manage callbacks and other actions like the connectedCallback example
  • Quick intro of a counter button, placed in the page 3 times to illustrate the same component being used multiple times and maintaining its own state
• Two-way data binding with 15 lines of JavaScript
  • Demo is two identical forms that we want to match values across them
  • JS native API called Proxy watches for changes and lets you take action in response
  • input event listener can trigger when changes are made to inputs, that in turn can trigger the change that Proxy is watches for which updates the other input
• 13 web dev tricks
  • Event Delegation – To catch events on multiple elements, attach an event listener to a parent and filter to only the ones you care about
  • Early Return pattern – nested if statements are hard to read, can return return; when the opposite is true instead
  • Multiple Selectors – You can pass a comma separated string to querySelector and querySelectorAll
  • Data Attribute selectors – cleaner code, but also can make event delegation easier by using the handler name to run the equivalent function
  • Object => Query String Conversion – Use the URLSearchParams method and run the toString() method on it
  • Dedupe an Array – Utilize a Set which can’t have duplicate values, Array.from(new Set(wizards));
  • Random ID generator – crypto.randomUUID();
  • True Type checking – typeof is unreliable because it returns an object for several different types. Instead call the Object.prototype.ToString method on the item instead. Returns object followed by the actual object type like [object Array]
  • Numeric separators – In modern JS you can use underscores to break big numbers into smaller parts, commas will cause issues
  • Looping over objects – Rather than for/in, instead use a simple for/of loop and Object.entries
  • Object Property shorthands – Variable names as the property and name will auto-assign
  • Simpler Boolean returns – Returning the conditional check if it’s returning a boolean itself
  • GIF is pronounced ‘jif’ – (personal note, this is also backed up by the creator of the format)

Amy Hupe – “It all means nothing in the end”#anchor

We need to know where we’re heading to, and we need to derive meaning from the journey and the destination. And the good news is that we get to decide that. It all means nothing in the end, but only if you let it.

Recording and Transcript of “It all means nothing in the end”

My Session Notes#anchor

• Had historically derived meaning from her work, very career driven
• Sudden loss of motivation early this year, leading to an existential crisis.
• Time away to travel and recharge, came back still feeling uninspired
• Turned to journaling and deep introspection, realized a loss of purpose in her work
• Emphasized the importance of connecting one’s work to a core perspective
  • the intersection of skills, experiences, and values.
  • It’s unique to you.
• Setting meaningful goals is crucial and that goals should:
  • align with my core perspective
  • be something I care about
  • be achievable (fuck moonshots!)
  • be measurable (know if I’m making progress)
• Achieving goals and tracking progress are important for avoiding burnout. Signs of burnout:
  • Emotional exhaustion – the fatigue that comes from caring too much, for too long
  • Depersonalization – depletion of empathy, caring, and compassion
  • Decreased sense of accomplishment – sense of futility, feeling that nothing you do makes a difference
• Disconnect from external validation, we’ll always need some but it should not be the sole source of self-worth. Examples:
  • pay raises
  • promotions
  • performance reviews
• Cultivating meaning involves focusing on fulfilling my purpose, making progress against my goals, and enjoying the journey.
• While the ultimate outcome might be uncertain, the journey and how one gets there can bring meaning to one’s work and life.

Ian Lloyd – “Accessibility Is Easy… Except for When It Isn’t”#anchor

Leverage native HTML for built in accessibility affordances, use ARIA and tried & tested patterns for common use cases, get creative with complex UIs but be sure to test thoroughly.

Recording and Transcript of “Accessibility Is Easy… Except for When It Isn’t”

My Session Notes#anchor

Acronyms referred in the talk

• WCAG – Web Content Accessibility Guidelines
• SC – Success Criterion
• ARIA – Accessible Rich Internet Applications
• a11y – Accessibility
• AT – Assistive Technology (e.g. screen readers)

Accessibility low hanging fruit

• <button>, if you need to roll your own you’ll need to make sure they’re keyboard operable, with a button role, styled, and state maintenance

Hall of Shame

• the linkput – an input element of type button wrapped with a link
• the lutton – a link with a role of button
• disclosure/checkbox/button/link/heading combo – div
• First rule of ARIA – don’t use ARIA if a native HTML element or attribute exists with the semantics and behavior you need.

Tricky examples

• Table row selection, shows the detail of selected rows in the right panel
• Multi-select menu – choosing between <select>, checkboxes, checkboxes in a disclosure
• Theater seat chooser – be sure to convey detail, if seat button is dimmed explain why, make navigation easier with keyboard (arrow keys), group sections of the seats together for quicker traversing

Recap

• Native HTML is preferred
• Use ARIA and tried & tested patterns where possible
• For complex UIs, start with as much native HTML and tested patterns first and then get creative. Test with as much Assistive Technology and as many users as you can

Kilian Valkhov – “Stop using JS for that: Moving features to CSS and HTML”#anchor

Just because you know something needs a specific browser hack, that may not be true anymore. You can make better websites if you check those assumptions every now and then.

Recording and Transcript of “Stop using JS for that: Moving features to CSS and HTML”

My Session Notes#anchor

• The rule of least power suggests choosing the least powerful language for a given purpose in web development. Helps to maintain accessibility and performance.
  • HTML is preferred over CSS
  • CSS is preferred over JavaScript
• Old techniques will still work, but just because it used to require JavaScript doesn’t mean that’s still the case.
  • Several web features and interactions that traditionally required JavaScript can now be achieved with HTML and CSS.
  • It’s important to question assumptions and try new web development techniques.
• Examples
  • custom toggles – can be achieved with CSS using pseudo elements :before and :checked
  • datalists – HTML <datalist> auto suggest using the <option> items inside
  • color pickers – <input type="color"> and it can pick colors from anywhere on the screen (even outside the browser)
  • smooth scrolling – scroll-behavior: smooth; CSS property on html
  • scroll margins – CSS property that only applies while scrolling scroll-margin-top
  • scroll target – :target property will let you style the scroll target
  • fixed (sticky) elements – CSS position: sticky will lock elements to the top as you scroll
  • scroll snapping – useful for carousels or sliders, scroll-snap-type on the parent and scroll-snap-align on the child items
  • accordions – <details> and <summary> can do essentially the same thing, can also use :marker to have a different marker for when the details element is open or closed.
  • modals – <dialog> gets us most of the way there, still needs a bit of JavaScript
  • container queries! Not in the presentation, wanted to make note of them

Diego Gonzalez – “THE BLUE PWANET”#anchor

The evolution of Progressive Web Apps (PWAs), their core technologies, deep integration with the operating system, Project Fugu for enhancing web capabilities, and the potential future of the Web Install API

Recording and Transcript of “THE BLUE PWANET”

My Session Notes#anchor

• Progressive Web Apps (PWAs) – Yes they’re still a thing, yes they still exist, and are stronger than ever.
• Evolution of web applications
  • starting with Ajax and the ability to change web page elements without reloading the entire page.
  • Link to homescreen, just a link with no other functionality
  • PWAs
• PWAs have three fundamentals
  • HTTPS
  • Manifest file
  • Service Worker
• Project Fugu, a joint effort between various companies to bring powerful APIs to the web platform
  • Importance of deep integration into the operating system, more advanced applications and no longer a “lite” version
  • new features for web apps such as access to clipboard, window controls, file handling, shortcuts, and web share targets.
• Every PWA is a web app, but not every web app is a PWA
• Coming up short on getting developers on board with building PWAs, using Service Workers and Manifest files, and understanding the benefits
  • Calls into question if install-ability criteria should change, Chrome already dropped the service worker requirement
• Web Install API, a new idea
  • allow websites to install other websites or web applications without proprietary workarounds
  • enable scenarios of online web stores
  • install same ad cross-domain apps
  • Challenges – Preserve privacy of users, avoid install prompt spam
• Expansion of PWAs
  • widget – companion apps using adaptive card templates
  • sidebars – introduces new display override values, can be detected in CSS & JS too
  • these initiatives are Edge-specific, seeking interest from other browsers
• mentions the evolution of apps and the appearance of new app types packaged in web bundles

Harry Roberts – “Cache Rules Everything”#anchor

We only have two jobs; we only need two tags – cache-control and etag. Consider how fresh a file needs to be and set these headers accordingly, and don’t revalidate hashed files.

Recording and Transcript of “Cache Rules Everything”

My Session Notes#anchor

• The best request is the one that’s never made
• Key Concepts
  • Cache – how long can I reuse this file without checking for updates?
  • Revalidation – How do I check that a file has changed after my cache time limit is up?
  • Cache stops the client from speaking to the server so revaldation shouldn’t happen while cached
  • Fresh – file is in the cache within it’s expiration date
  • Stale – file is in the cache but has passed it’s expiration date
  • Fresh does not mean up to date
  • Request – Client requests a response from the server
  • Response – Server responds to the request, with a status code like 200 (success) or 304 (renewal of cache)
• Headers we don’t need
  • pragma – pragma: no-cache, not meant to be a response header, just delete immediately
  • expires – expires: wed, 13 sep 2023 08:49:31 gmt, not terrible but expires at an absolute time and fails if a user has changed their system time. Cache-control is better
  • last-modified – last-modified: wed, 13 sep 2023 08:49:31 gmt, a revalidation header that’s not harmful but etag is better
• Headers we do want
  • cache-control – cache-control: private, max-age=300, must-revalidate, a caching header, rules and conditions for caching a response
    • max-age – how long, in seconds
    • no-store – don’t store this file
    • no-cache – forbids the browser from going straight to the cache, will check with the server first before releasing a cached file to the browser
    • public – max-age assumes public, exposes cacheability on a CDN
    • private – intended for personal use, don’t reuse or store in CDN
    • must-revalidate – caches are permitted to serve stale content (e.g. when offline) unless explicitly told otherwise with this directive
    • stale-while-revalidate – revalidation is synchronous, this makes it async while revalidation is pending
    • s-maxage – shared max age for CDNs, separate from browsers. Can flush CDN cache on build, so you can afford to make these higher
    • immutable – contract with the browser that “this file will never changed”
  • etag – weak etags only hashes the file name, strong etags hash the contents of the file and are preferred. This is a revalidation header, slightly more reliable than last-modified
• Can we cache this file?
  • yes – cache-control: max-age=3600
  • no – cache-control: no-store
• Does this need to always be up-to-date?
  • yes – cache-control: no-cache
  • no – cache-control: max-age=3600
• Can this response be shared?
  • yes – cache-control: public, max-age=3600
  • no – cache-control: private
• Can we reuse this response even if it’s stale?
  • yes – cache-control: max-age=3600
  • no – cache-control: max-age=3600, must-revalidate
• Can we tolerate a slightly out of date response while performing revalidation?
  • yes – cache-control: max-age=3600, stale-while-revalidate=600
  • no – cache-control: max-age=3600
• Do we need to configure CDNs and browsers differently?
  • yes – cache-control: max-age=3600, s-maxage=86400
  • no – cache-control: max-age=3600
• Is the file hashed?
  • yes – cache-control: max-age=2147483648, immutable
  • no – cache-control: max-age=3600
• Prefer etag, so we don’t fall into the trap of last modified forcing revalidating – especially with static site generators
• Don’t revalidate hashed files, because those are always going to change with a new build.
• We only have two jobs; we only need two tags – cache-control and etag

Ana Rodrigues – “Exploring the Potential of the Web Speech API in Karaoke”#anchor

Working example of a karaoke app using vanilla HTML, CSS, and JavaScript using the Web Speech API. You can learn by building “useless” things. Side projects don’t need to be monetized in order to be valid.

Recording and Transcript of “Exploring the Potential of the Web Speech API in Karaoke”

My Session Notes#anchor

• Exploring the potential of the Web Speech API to gamify karaoke, inspired by her love for the Rasmus and the desire to sing their songs (other than “in the shadows”)
• Using HTML, CSS, and vanilla JavaScript – avoiding libraries – to demonstrate browser native capabilities
• Web Speech API – split into two, speech recognition and speech synthesis
• Web Speech API isn’t perfect and has certain quirks
  • not supporting continuous dictation, so there’s JS that forces it to start itself back over again when it stops
  • needing HTTPS to send data
  • doesn’t work offline
  • not supported in Firefox
• Demo of the karaoke interface, where the speech recognition begins with the song and transcribes her singing, trying to match the lyrics with the input and highlighting correctly matched portions in green and unmatched in red
• Some matching challenges when singing vs speaking, with demos of both ways
• Concludes by encouraging side projects and creative exploration as valid learning experiences in web development.
• You can learn by building “useless” things. Side projects don’t need to be monetized in order to be valid. They don’t need to become NPM packages or open source projects.

Heydon Pickering – “What are Accessibility Overlays?”#anchor

The conference was ended with a world premiere of “What are Accessibility Overlays?” by Heydon, a masterpiece that blends useful information and humor in a way only Heydon can. Check it out here.

Other Recaps#anchor

Here are a few links from others regarding SotB2023, I’ll try to keep this updated as I find more. Send me a link if you know of one I’m missing!

• What we learned at State of the Browser 2023 by Alistair Shepherd
• It all means nothing in the end by Chris Ferdinandi

More Background#anchor

I’ve shared bits of this on social and in conversations, figured it’d be worthwhile to also share here to complete the picture of how a random guy from the Midwest in the States would find himself sponsoring and attending an event in London.

How it Started#anchor

For me, it all started back in April as initial details about State of the Browser 2023 were being released.

Even though the conference had been going since 2011, I hadn’t personally been aware of SotB until late in 2022 as recordings from that year’s conference were making the rounds. I greatly enjoyed those recordings and really liked the focus on web standards, accessibility, performance, and sustainability.

When I heard about the call for sponsors in April for the 2023 conference, I had a feeling there’d be a significant overlap between folks interested in attending and those with potential interest in Be Inclusive. So I decided to go ahead and sponsor not realizing at the time that sponsorship came with an in person ticket to attend as well.

The Snowball#anchor

My wife and I had never been outside of North America before, and hadbeen talking about visiting England first. We even looked up some flights and rates but we found it to be too expensive (this was around mid 2022 at the height of the “revenge travel” boom) so we opted to wait it out.

This snowball of a sponsored in person ticket renewed our interest, and in May of 2023 we started researching again. To our surprise, flights and rates had improved enough to make this a viable option. So we got to planning, where should we stay? How long?

That snowball grew until we had booked a vacation spanning nearly two weeks and four destinations. The SotB Conference would be the first full day and once that was done, it’s vacation time!

Final Prep#anchor

Now that I had quite a bit riding on this one decision, and I was about to take an 8 hour flight to be there in person, my next thought was “oh no, how do I force myself to get social and talk to people?”

I ended up deciding to rely on an ice breaker in the form of individually customized business cards. They were something visual, and afforded me a way to walk up to someone and say “Hey I’m Steve, want a one of a kind business card?”

Happy to say I was able to give away half of the 50 unique cards I had printed! If you’d like to read more about the process of making them, check out my One of a Kind Business Cards blog.

Aftermath#anchor

It was a lot of time and effort to prepare, but this conference and the vacation that followed it were truly highlights of the year for me. I had a blast learning from these wonderful speakers, the conversations during breaks and at the after party, and the ideas that re-watching and cleaning up my notes have sparked.

Every time I come back to these speaker sessions I find myself digging into details, finding tangents, reading more, and experimenting. Huge kudos to every single one of the speakers, I’m sure I’m not the only one they’ve inspired to give more thought and experimentation towards the topics they covered.

Onward and upward! 🚀