Bruce Lawson’s personal site

• Northern Bloke talking about CSS on YouTube link of the month: Be the browser’s mentor, not its micromanager – Andy Bell on how we can hint the browser, rather than micromanage it by leaning into progressive enhancement, CSS layout, fluid type & space and modern CSS capabilities to build resilient front-ends that look great for everyone, regardless of their device, connection speed or context
• Focus management still matters – Sarah Higley takes us on a magical mystery tour of sequential-focus-navigation-starting-point
• Date and Time Pickers for All “the release of the React Aria and React Spectrum date and time picker components… a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes @internationalized/date, a brand new framework-agnostic library for locale-aware date and time manipulation … All of our date and time picker components have been tested across desktop and mobile devices, and with many different input methods including mouse, touch, and keyboard. We have worked hard to ensure screen reader announcements are clear and consistent.
• Replace the outline algorithm with one based on heading levels – The HTML spec now reflects what actually happens in browsers, rather than what we wish happens. The outlining algorithm allowed what would be effectively a generic heading element, with a level corresponding to its nesting in sectioning elements. But no browser implemented it, so the spec reverts to reality so developers didn’t mistakenly believe it is possible.
• What is the best way to mark up an exclusive button group? by Lea Verou
• Perceived affordances and the functionality mismatch – a companion piece by Léonie Watson
• JSX in the browser by Chris Ferdinandi
• An Accessibility-First Approach To Chart Visual Design
• Bunny Fonts “is an open-source, privacy-first web font platform designed to put privacy back into the internet…with a zero-tracking and no-logging policy”, so an alternative to Google Fonts
• Font Subsetting Strategies: Content-Based vs Alphabetical – “Font subsetting allows you to split a font’s characters (letters, numbers, symbols, etc.) into separate files so your visitors only download what they need. There are two main subsetting strategies that have different advantages depending on the type of site you’re building.”
• Dragon versions and meeting accessibility guidelines “Dragon responds to the visible text label, the accessible name and the “name” attribute … Microsoft are in the process of buying Nuance, and it’s a measure of how unpopular Nuance is that most people think that a Microsoft takeover would be a very good thing.”
• The Surprising Truth About Pixels and Accessibility – “Should I use pixels or ems/rems?!”
  by Josh W. Comeau
• Android accessibility: roles and TalkBack by Graeme Coleman (Tetralogical)
• Three Steps To Start Practicing Inclusive Product Development – “Product teams aren’t intentionally designing products that exclude users, but a lack of team diversity, specialized knowledge and access to feedback from people with disabilities results in users being left behind.”
• Court OKs billion-dollar Play Store gouging suit against Google
• The hidden history of screen readers – “For decades, blind programmers have been creating the tools their community needs”
• Introducing: Emoji Kitchen 😗👌💕 – Jennifer Daniel, the chair of the Unicode Consortium’s emoji subcommittee, asks “How can we reconcile the rapid ever changing way we communicate online with the formal methodical process of a standards body that digitizes written languages?” and introduces the Poopnado emoji

• Link o’ the week! Help the CMA help the web – Stuart Langridge on how you can help with the final push for a better web on mobile. Whether you agree with us or not, please tell the CMA what you think.
• Keyboard-Only Scrolling Areas from the Jello Biafra of #a11y, Adrian Roselli
• Firefox rolls out Total Cookie Protection by default to all users worldwide “making Firefox the most private and secure major browser available across Windows, Mac and Linux.”
• Meet Web Push in Safari! I like that Safari won’t hassle me to subscribe to push notifications without a user gesture, and settings are integrated. Presumably same for iOS and iPad next year. Good to see this work happening.
• The CMA Final Report on the Mobile Ecosystems market study: a repudiation of Apple’s narrative over privacy and safety as justifications for the status quo – “Apple submitted that the WebKit restriction is primarily motivated by security considerations… CMA concluded that the WebKit restriction is unlikely to be justified by security concerns.”
• Chrome user device characteristics report – Data on device memory, network speeds, number of cores, smallest Android display sizes in BR, DE, EG, GB, ID, IN, JP, NG, US, ZA from Chrome usage stats
• The Email Markup Consortium is “a community-led group of industry professionals working to improve the user experience, accessibility, performance, consistency, and reliability of email markup”
• Japanese regulator’s interim report on Competition Assessment of the Mobile Ecosystem has lots of talk about the #appleBrowserBan, @webkit and PWAs (English, PDF)
• Apple now supports SSML – Speech Synthesis Markup Language. With SSML, you can include multiple ways to say text in a single request, instead of splitting it up into multiple AVSpeechUtterances.
• Using SQL to find my best photo of a pelican according to Apple Photos by Simon “l33t h4xx0r” Willison
• Silicon Valley’s Horrible Bosses – Dispatches From the Elon Musk School of Management
• Talking of hideously toxic workplaces, Kraken Announces Global Hiring Push and Commitment to Crypto-First Culture

• Link o’the week: A Management Maturity Model for Performance – “Despite advances in browser tooling, automated evaluation, lab tools, guidance, and runtimes, however, teams struggle to deliver even decent performance with today’s popular frameworks. This is not a technical problem per se — it’s a management issue, and one that teams can conquer with the right frame of mind and support” by Big Al Russell
• The tech tool carousel by Andy Bell
• Internet Explorer retires on June 15, 2022 – For a long time, it was my browser of choice for downloading Firefox.
• React Native Accessibility – GAAD 2022 Update – React Native accessibility is dragging itself into the 21st century
• HTML Sanitizer API – Chromium & Firefox intend to ship a new HTML Sanitizer API, which developers can use to remove content that may execute script from arbitrary, user-supplied HTML content. The goal is to make it easier to build XSS-free web applications.
• W3C Ethical Web Principles – “The web should be a platform that helps people and provides a positive social benefit. As we continue to evolve the web platform, we must therefore consider the consequences of our work. The following document sets out ethical principles that will drive the W3C’s continuing work in this direction”
• What’s new for the web platform – Jake and Una at Google i/o yesterday showing new web platform features. Highlights: native <dialog> element for popup dialogs that has a11y baked in, the ability to give accent colours in CSS to form controls, declarative lazy loading of off-screen/ less important images. This should allow us to remove hacky components from our web pages, so they’ll be faster (as they’re in the browser) and more likely to be secure and accessible. Can we kill crappy framework dialogs and other form components and replace them with native browser-based equivalents?
• The page transition API uses CSS animations for highly customisable wiggly things to make your sites and PWAs feel more natively app-like. It’s really nice (don’t be put off by Jank Architect’s infomercial demeanour)
• Debugging accessibility with Chrome DevTools – another Google i/o vid
• WordPress’ market share is shrinking – “If WordPress wants to maintain its market share or better yet, grow it, it’ll have to get its act together. That means it should focus on the performance of these sites across the spectrums of site speed and SEO. The Full Site Editing project is simply taking far too long. That’s causing the rest of the platform to lag behind current web trends.”
• Responsive layouts for large screen development – “More than 250 million large screen Android devices are currently in use, including tablets, foldables, and Chrome OS.”
• The UK’s Digital Markets Unit: we’re not making any progress, but we promise we will “in due course” – “at least this document confirms that it is still Government policy to do it “in due course” and “when Parliamentary time allows””
• Porting Zelda Classic to the Web – deep dive into the technical challenge to port an ancient game written in C++ to Web Assembly

• Developing a Report on Competition in the Mobile App Ecosystem – The U.S. National Telecommunications and Information Administration is preparing a Report on Competition in the Mobile App Ecosystem, following Biden’s Executive Order to address the problem of “dominant tech platforms undermining competition and reducing innovation”. Includes PWAs and #AppleBrowserBan in scope.
• Questions and Answers: Digital Markets Act: Ensuring fair and open digital markets
• Trust – “many developers are suspicious of browser features but trusting of third-party libraries” by Jeremy keith
• Why I don’t miss React: a story about using the platform by Jack Franklin. Would Facebook ever end React? It was unthinkable that Nokia, Blackberry, MooTools, Internet Explorer would ever disappear. But they did.
• New to the web platform in April – Discover some of the interesting features that landed in stable and beta web browsers during April 2022. By Rachel Andrew
• Celebrating Firefox: How we got to 100 – Aww. I’m pretty sure I started with the preview release. Good times.
• Bundle Buddy – “Visualizing what code is in your web bundle, and how it got there” for all your “we had great DX writing this, why is it so slow and such a network hog and why are our customers using our competitors’ fast apps instead?” needs
• Well Color Us Surprised—This SC Can Be a Tricky Customer – by Ian Lloyd, who doesn’t know how to spell “colour”.
• Global PC shipments pass 340 million in 2021 and 2022 is set to be even stronger – death of desktop exaggerated?
• Changing the face of the web: W3C Web Fonts Working Group and MPEG recognized with a Technology & Engineering Emmy® Award – yes, really; W3C got an Emmy.
• Hack on Bored Ape Yacht Club NFTs leads to $3m simian oblivion – My non-fungible Thoughts and Proof of Prayers to those who have suffered this terrible loss.

USA readers: you have just over 2 weeks to tell the US regulator your thoughts on the Apple Browser Ban, whether you’re in favour of Apple allowing real browser choice on iOS by setting Safari free, or against it. You’re welcome to use Bringing Competition to Walled Gardens, our response to a similar investigation by the UK Competition and Markets Authority for inspiration/ cutting and pasting. Make your voice heard!

• OMG let it be true: The leaked “final” version of the Digital Markets Act: A summary in ten points – “Article 5 point (e) has been expanded to capture instances where the gatekeeper requires business users to offer or interoperate with a web browser engine. This is most likely meant to address Apple’s policy of requiring all browsers running on iOS to utilize Apple’s WebKit browser engine”
• Learn PWA – A course that breaks down every aspect of modern progressive web app development
• Building a split-button component – foundational overview of how to build an accessible split-button component, by Adam Argyle
• CSS Parent Selector “In this article, I will explain the problem that :has solves, how it works, where and how we can use it with some use-cases and examples, and most importantly how we can use it today.”
• Mobile data costs fall but as demand for internet services surges, progress remains too slow – “almost one billion people live in countries where basic internet access remains unaffordable. And even in countries where 1GB is priced at less than 2% of average monthly income, income inequality means that basic internet access will still be out of reach for many lower-earners.”
• The Front-End Developer’s Guide to the Terminal by Josh W Comeau
• Designing for Children – “An evolving guide that aims to refine a new standard for both design and business to direct the development towards products and services that have ethics and children’s best interests at their core.”
• Brief Note on Buttons, Enter, and Space by everyone’s favourite Adrian.
• Download icons, logos, and vector SVGs from any site SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.
• Your iOS app may still be covertly tracking you, despite what Apple says – “Apple’s landmark App Tracking Transparency may not be as tough as some people think”
• Automating the accessibility tests of your source code with GitHub Actions
• Accessible Description Exposure – how and where the accessible description is exposed by assorted screen readers, by Adrian Roselli
• Cognitive Accessibility Guidance – supplemental guidance from W3C
• Staybl is a browser for Parkinson’s patients, with “customizable tremor compensation tremor compensation, high-contrast design, a particularly legible font, and general ease of use.”
• Warp – a new terminal written in Rust – looks very promising, with lots of useful features. Beta is free to download on Mac (other platforms coming)
• This is a map of America’s broadband problem – A county-by-county look at the broadband gap
• Beanstalk cryptocurrency loses $182m of reserves in flash ‘attack’ – ‘Code is law’ cryptotwats lose $182m in a manoeuvre perfectly legal according to its own code, then go sobbing to the FBI. My Decentralised thoughts and Proof of Prayers are with them in this difficult time.

• A Proposal For Type Syntax in JavaScript – “a set of syntax for types that engines would entirely ignore, but which tools like TypeScript, Flow, and others could use. This allows us to keep the things you love about TypeScript – its type-checking and editing experience – while removing the need for a build step in development.”
• Justice Department Issues Web Accessibility Guidance Under the Americans with Disabilities Act 18 March 2022: for businesses that are open to the public (Title III): “…the ADA’s requirements apply to all the goods, services, privileges, or activities offered by public accommodations, including those offered on the web”
• An anthology of insights, for a more inclusive internet – from Google’s Next Billion Users initiative
• Intent to Prototype: @scope – Scoped Styles! You can optionally provide a lower boundary so styles don’t cascade to all children
• Shifting left, or: making accessibility easier by doing it earlier – A useful slidedeck by that nice Mr @hdv about making accessibility better, and cheaper
• A Designer’s Guide to Documenting Accessibility & User Interactions an excellent article by @walterstephanie
• Apple would be forced to allow sideloading and third-party app stores under new EU law – EU: “We believe that the owner of a smartphone should have the freedom to choose how to use it, This freedom includes being able to opt for alternative sources of apps”. It’ll be interesting to see what this means for the #applebrowserban.
• Galaxy A12 is the most shipped smartphone in 2021 – The £140 Android device topped the list of 10 most shipped smartphones last year overtaking Apple
• Carousels: No one likes you – “I would like to suggest an easy alternative to adding a carousel to your page. Are you ready? Think about the content on your page”
• UA gotta be kidding – Brian Kardell on the history and lies of the humble UA string
• The Infinite Exploitation Of Cryptocurrency – “code is law”, so an attacker took $600 million of cryptocurrency from the browser-based play-to-earn blockchain game Axie Infinity, in complete accordance with the contracts involved, because Sky Mavis (the developers) had allowed them to.
• Bitcoin Failed in El Salvador. The President Says the Answer Is More Bitcoin – “plans for Bitcoin City: a new charter city to be built from scratch, centered on bitcoin mining—and powered by a volcano”

• Interop 2022 is a really exciting collaboration between Igalia, Bocoup, Webkit, Microsoft Edge and Google Chrome to enhance interoperability between browsers. Yay! I want to snog all of them.
• A Complete Guide to CSS Cascade Layers by Miriam Suzanne (who wrote the spec, so she should know. Vadim and I interviewed her on the F-word episode 11.)
• Hello, CSS Cascade Layers by Ahmad Shadeed
• Are we live? – “If you have an interface where content is dynamically updated, and when the content is updated it does not receive focus, then you likely are going to need a live region.” Scott O’Hara does a deep dive into the fun quirks of live regions in real Assistive Tech.
• Say Hello to selectmenu, a Fully Style-able select Element – Can’t wait to see this in browsers, given that 93.6% of React select components are literally vast lumps of carcinogenic walrus turds, forged in Mordor by Margaret Thatcher and Hitler.
• What makes writing more readable? “An examination of translating text to make it as accessible as possible.” I found this fascinating, especially as each paragraph of the article has a translation next to it
• Version 100 in Chrome and Firefox “Chrome and Firefox will reach version 100 in a couple of months. This has the potential to cause breakage on sites that rely on identifying the browser version to perform business logic. This post covers the timeline of events, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.”
• PWA Haven – Really neat collection of utility apps, all implemented as PWAs and using powerful Project Fugu. “The goal is to have PWA’s replace as many simple native apps as possible” by ThaUnknown_
• I’ve Built a Public World Atlas with 2,500 Datasets to Explore Inspired by Encarta, built in Python, accessible at worldatlas.org

• Safari 15.4 Beta Release Notes
• Push Notifications, WebXR, and better PWA support coming to iOS – “iOS 15.4 beta has finally added icon support in the manifest, Web Push, AR, and VR experiments” says @firt
• Browsing with assistive technology videos – EXCELLENT short videos (<5 mins) that show you how people using screen readers, keyboard-only, screen magnifiers etc use the web. And narrated ASMR-style by “Mr Mellifluous” Pattypoo Lauke
• Going Dutch – The continuing saga of Apple’s conflict with the Netherlands Authority for Consumers and Markets (ACM) — the Dutch equivalent of the U.S. Federal Trade Commission. By John Gruber, so expect some reality distortion field.
• Using Google Fonts Breaches GDPR – “The Bavarian state court in Munich, Germany, on 20 January 2022, decided that using Google fonts in your site breaches the GDPR” (the linked version. Self-hosting doesn’t breach GDPR, and is better for performance by eliminating another DNS lookup)
• Behavioral ad industry gets hard reform deadline after IAB’s TCF found to breach Europe’s GDPR – “the regulatory sanction prohibits behavioral advertisers from using the IAB’s so-called “Transparency and Consent Framework” (TCF) to bypass user consent by claiming legitimate interest as a legal base to track and profile web users.” I don’t know what IAB TCF is, but I bet it smells like bums.
• Announcing PWA Studio, the VS Code extension for building Progressive Web Apps! “The PWA Studio VSCode extension brings everything you need to build high quality PWAs right to your VSCode!”
• No, Apple Did Not Crowdfund :focus-visible in Safari – Uncle Eric sets the record straight: “The addition of :focus-visible to WebKit was lead by the community, done by Igalia, and contributed to WebKit without any involvement from Apple except in the sense of their reviewing patches and accepting the contributions.”
• Talking of Igalia, Wolvic is an open source browser “that opens a portal to the Web and all it has to offer, including immersive games, videos, and environments built for XR” from your chums at Mozilla and Igalia
• How to document accessibility as a UX designer – “Focus on the output, not the implementation.”
• Apple’s cloud gaming restrictions may be biggest news in CMA interim report
• Dozens of U.S. states say Apple stifles competition; back ‘Fortnite’ maker
• The Costs of Exclusion: West Africa Regional Report (PDF) – The Alliance for Affordable Internet (A4AI) has qualitative evidence of the economic impact that digital technology has on women’s lives — and the economy at-large — in Ghana, Côte d’Ivoire and Nigeria.
• Facebook: Daily active users fall for first time in 18-year history – Biz 101: if your business is connecting everyone on the planet, then facilitating genocide, you’re going to lose users.

• eyeo wins landmark copyright court decision; protects digital rights and sets important legal precedent for who ‘owns’ HTML – Media org Axel Springer (German gutter press, not the science publisher) lost its court case against Eyeo (Adblock Plus). They were sad at its sites’ ads being blocked, and claimed that the HTML of their sites is copyright, so blocking or changing any of it is copyright infringement. Herr Judge said “Keine Chance, du kolossaler Schweinehund. Verpiss dich.”
• Defensive CSS – “a collection of snippets that can help you in writing CSS that is protected. In other words, you will have fewer issues in the future” by Ahmad Shadeed
• Add a Service Worker to Your Site by Chris Ferdinandi
• A Complete Guide To Accessible Front-End Components by Vitaly Friedman
• Which accessibility settings do the Dutch really use on their phone? – Survey of 1 million people: “43% use one or more accessibility settings on their phone. 14% uses 2 or more accessibility settings”
• Chromium has started experimental implementation of <selectmenu> – it’s like select but you can style all the constituent parts, instead of twatting about with billions of divs and wiring up keyboard and ARIA yourself (or hoping a framework will)
• Boolean attributes in HTML and ARIA: what’s the difference? asks Hidde de Vries. And then, as a bonus, tells you the answer.
• A New Container Query Polyfill That Just Works by Coy Chrisier
• Full accessibility tree in Chrome DevTools
• Accessibility monitoring of public sector websites and mobile apps 2020-2021 – gov.uk
• Emojis and Accessibility: The Dos and Don’ts of Including Emojis in Texts and Emails – “A friend sent me a text the other day … I never got to the part where I was supposed to give them a call. The emojis got in the way.”
• RFC 3339 vs ISO 8601 – a handy venn diagram and table
• CEOs are hugely expensive – why not automate them? – “If a single role is as expensive as thousands of workers, it is surely the prime candidate for robot-induced redundancy.”
• Web3 is going just great

• Responsive Layouts, Fewer Media Queries
• Accessible Toggles by @MicheBarks
• taba11y – Chromium extension calculates the tab order of all elements and displays it visually
• Consultation on modified commitments in respect of Google’s ‘Privacy Sandbox’ browser changes “CMA is inviting observations and evidence on modified commitments offered by Google in relation to the CMA’s investigation into Google’s proposals to remove third party cookies and other functionalities from its Chrome browser.” Deadline: 5pm, 17 Dec.
• The UI fund – Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.
• Exploiting CSP in Webkit to Break Authentication & Authorization – “there was a vulnerability that we reported to Safari that Apple didn’t consider severe enough to fix quickly… after waiting for almost a year, we decided to explore the potential of vulnerability by targeting bug bounty programs”. And, of course, because of the Apple browser ban, all iOS browsers were vulnerable/
• Improving The Performance Of Wix Websites (Case Study) – my chum @DanShappir, the Panjandrum of Performance at @WixEng, on improving the speed of millions of sites hosted at Wix.
• Windows 11 blocks Edge browser competitors from opening links
• :has pseudo class prototyping status – your friends a Eeyo (Adblock Plus) are funding your friends at Igalia to implement the long wished-for :has pseudoclass (aka ‘parent selector’). Implementor Byungwoo Lee discusses problems of it, prototyping progress, current status and steps forward at BlinkOn 15 (captioned YouTube video, 25 mins)
• ‘Buy the Constitution’ Aftermath: Everyone Very Mad, Confused, Losing Lots of Money, Fighting, Crying, Etc – “ConstitutionDAO tried to buy the Constitution. Now it has a $40 million mess on its hands and entire refunds are being wiped out by high fees. Once cryptobro is quoted as saying “We have educated an entire cohort of people about the possibilities of web3”. Indeed.
• Thinking of uses for BlockChains – sagacious Uncle Tel does some thoughts
• Why are hyperlinks blue? and should they be underlined still?