What we learned at State of the Browser 2023
Written by Alistair
If there’s one annual conference we carve out time in our diaries for, it’s SotB. Because there’s nothing we love more than nerding out with other devs about what’s new in the world of the web.
Here are our top takeaways from this year’s talks courtesy of Lead Developer, Alistair.
'Web standards: does anyone actually care?' by Michael R. Lorek
Michael R. Lorek kicked off the day with a talk about Web Standards, why they’re important and the state of the web currently as they relate to Web Standards. A perfect talk for this conference given it’s run by London Web Standards!
The key message Michael was getting at was that it’s really important to publish high-quality work on the web, and some of the things we need to consider as web developers to do so. He mentioned that HTML and CSS validation and testing the security of sites using pen-testing methods are really important for security and are very rarely done within the industry.
I definitely agree that for security and code maintainability, validation is really important. One argument he used was that it was also important for SEO. However he then went on to show that basically none of the top 1,000 sites have valid HTML – so you could argue that it doesn’t make much of an impact on SEO!
'It all means nothing in the end' by Amy Hupe
Amy Hupe is known best for her work on design systems and documentation, but her talk at SotB23 was on burnout and finding value and meaning in your work. It was absolutely fantastic, really making us think about how to work best in the tech industry whilst also caring for ourselves, our emotions and self-worth. It was also one of the funniest conference talks I’ve seen, perhaps only beaten by a previous talk of hers!
The inspiration of the talk was that Amy found she really didn’t care about her work. She had burnt out, lost the passion and drive for design systems and the tech industry, and was struggling with the fact her self-worth was somewhat tied up in her work. That’s a feeling that I’ve also felt before, when I’ve pushed with all I had to get a project over the line and then felt like sitting at a computer is the last thing I care for.
The best thing about this talk was the key points that Amy made about how best to structure the relationship we have with our job to keep ourselves validated and motivated whilst also enjoying and thriving in our work:
- Having times where you’re not fully invested in your work is fine, but if you work a full-time job it’s not a solution for happiness.
- We all have a “core perspective” that shapes how we see and interact with the world. Amy defines that as a combination of your skills, experience and values. By identifying that perspective and aligning it with our work it will help us be motivated, productive, feel successful and, most importantly, happy.
- Goals we make should align with our core perspective, but also should be achievable. Setting up impossible goals is a great way to disappoint ourselves. In Amy’s own words: “**** Moonshots”
- It’s important to feel validated and successful, and we come to rely on certain structures to achieve that. Within big organisations, that may be promotion trees. On social media, the number of likes. By relying only on those structures, you risk losing your main source of validation so it’s key that you can also validate yourself based on the goals you’ve achieved also.
Amy gave us all a lot to think about, and it was an absolutely brilliant talk. It’s only been a couple of weeks but already I’m feeling better about the changes I’ve made to how I make goals, aligning my work alongside my core perspective, and making sure that both within and outside of work I’m enjoying how I spend my time!
'Accessibility is easy… except for when it isn’t' by Ian Lloyd
I always love an accessibility talk. State of the Browser always has at least one each year and they’re fantastic. And this year was no exception. Ian Lloyd gave a fantastic overview of some easy and really tricky accessibility points, featuring lots of examples, some serious stuff and also some great laughs. I loved that format – it makes me think I should put more jokes, memes and references in my talks…!
At the beginning, Ian covered some simple accessibility issues that most of the audience were familiar with, things like image alternative text, using headings and buttons etc. We then had a run through of “Accessibility Horror”, with some awful examples of developers getting it completely wrong in silly ways!
That was the “Accessibility Is Easy” bit done!
The “Except for When It Isn’t” for the rest of the talk was absolutely fascinating, and really went into the details of how you can make really complex UIs accessible. When it comes to accessibility, I know my stuff and do audits and such, but it was really evident how much experience Ian has – fixing some UIs I wouldn’t even know where to start with! It was extremely interesting to see how he went about working out interfaces that don’t match common patterns, like tab controls within a table, a theatre seat picker, multi-select menus or the “DiaMenuClosure” he showed.
Really inspiring and balanced, so it offered some new information to everyone in the audience — something very tricky at a conference with a fair few accessibility experts attending!
'Stop using JS for that: moving features to CSS and HTML' by Kilian Valkhof
I was really looking forward to Kilian’s talk because he has a really interesting insight on browsers and development. He develops the web browser Polypane, which is designed to make it easier for developers to debug and test the websites they build. That gives him a really interesting perspective on the industry, seeing what tools developers are using and what they’re testing, whilst also having insight into what makes a browser tick. This talk wasn’t about Polypane though, it was about HTML, CSS and how they can take the place of JavaScript.
It was a really good review of some of the new-ish features of HTML and CSS that have had support for a few years, but aren’t always being used in favour of JavaScript replacements. Browser vendors listen to developers and have been implementing features like accordions, input suggestions, smooth scrolling and dialogs, all in HTML and CSS. I’d recommend watching the recording to see them all, Kilian does a great job of demonstrating!
Two tips he mentioned that I found really interesting in particular was how the CSS appearance:none works to make replaced-elements styleable (I never knew what it did), and to use outline-color:transparent on a focus outline for free support for forced-colors mode!
'THE BLUE PWANET' by Diego González
This was a thematic masterpiece, with an ocean-themed talk on Progressive Web Apps with sea graphics and Attenborough-style narration throughout! Diego gave a really interesting overview about PWAs, their history, how they work and what the future holds for them.
It was looking at some of the future directions and options that really caught my attention, including some of the really challenging issues with implementing them. We want users to be able to easily see a site is installable, but don’t want spam popups like we have with web push notifications. We want to offer lots of new capabilities but how should we restrict them?
Although some of those decisions, challenges and options are really tricky and I don’t have an answer for them, Diego’s talk brought them to my attention and made me think. It also reassured me that even if I don’t know what the answer is for PWAs, the web community is wary and mindful of getting it right.
'Cache rules everything' by Harry Roberts
Harry has done some fantastic web performance talks and this is no exception. He went in-depth and focused on the HTTP cache, how to set it up correctly and some of the pitfalls and mistakes people commonly make. We were asked to put our hands up if we knew caching headers in-depth — I raised my hand and oh boy I was proven wrong!
Once again check out the recording as it really goes into the exact details of how caching works, what headers to keep or remove, how to come up with caching strategies and how caching works on public and private resources. It really was a complete and fantastic explanation of something that seems simple but really isn’t!
'Speedy dev insights' by Chris Ferdinandi
Chris put together three short pre-recorded videos that were played between longer talks, giving a bit of a demo and some tips on a range of development stuff.
The first was building a custom Web Component, which are web-native ways to build custom components in JS. I’ve found Web Components can be a bit tricky to learn, but Chris made them look easy!
Speedy dev insight two was on data binding using Proxies, which is super cool! In our websites we use Proxies through Alpine but it was really cool seeing how you can also work with them directly!
The final insight was a rapid-fire run through of 13 smaller tips, really delivering on the “Speedy” promise! There were some great tips in there that you could use in day-to-day development. Unfortunately, he then went and spoiled all the good favour he’d gathered from the audience by trolling us and mispronouncing GIF. What a shame!
'Exploring the potential of the Web Speech API in karaoke' by Ana Rodrigues
As the end of the day approaches at a conference, and the attendees start looking forward to the afterparty and dinner, it can be a bit tricky to keep everyone engaged. Ana had absolutely no problem with that however, with a brilliantly entertaining, fun, and interesting talk on karaoke in the web browser!
The Web Speech API is a new in-built browser feature that allows developers to receive audio input and easily turn it into text, without need for a third-party service. Ana decided to build a karaoke machine using web technologies and added the Web Speech API to score her singing!
It was great fun and a really good walkthrough of how she built it and how the Web Speech API works! It was also really impressive for her demonstrating the karaoke machine by singing, during her first conference talk!
That final talk got everyone excited and energised again, just in time to go to the pub for the afterparty!
Head back to the journal for more top takeaways, team views, and just general design and dev stuff.
More posts you might like
