Bruce Lawson’s personal site

• Link o’the week: Get Static – “If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static…health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering”
• Apple’s attack on service workers – “I very much hope that Safari devs will be reasonable and not go ahead with the drastic hobbling of service workers that they’re planning”
• Accessible SVGs: Inclusiveness Beyond Patterns
• Accessible UI Component Libraries Roundup
• A Practical Overview Of CSS Houdini
• Jaws adds support for content marked up with del and ins in Firefox and the Chromium browsers (though not Edge original or IE)
• Chrome 80/81 Bug: Accessible Name Calculation
• Making Sure Content Lives On… – Uncle @briankardell came up with an interesting service which will tell the wayback machine to take a snapshot of a newly-published article using RSS or an HTTP Post. Any WordPress plugin gurus want to add this to the ‘publish’ process?

Now wash your hands.

• Link o’the Week: Open Peeps is a library of illustrated people – mix and match expressions, clothes, etc. Free for personal/commercial use, by Pablo Stanley.
• Me! Me! Me! corner: Web Accessibility Checklist: 15 Things to Improve Your Website Accessibility – a monster 5000 words from yours truly, on avoiding the worst and most common errors.
• Stop using Material Design text fields! – “I recently started working on a project built with Google’s Material Design UI library, and noticed quite a few usability and accessibility issues.”
• Headers and Jump Links? The Solution is scroll-margin-top – “you have a position: fixed; header at the top of the page obscuring the header you’re trying to link to!” solved
• You talkin’ to me? – a really cool prezzo by Léonie Watson on the state of speech synthesis, and how to control the emotional cadences.
• Resize text to fit the parent with variable font width axis “Adjust the width of your text to fit its parent container using a variable font width axis” by Mandy Michael
• Proposal o’the week: Focus Traversal API – “a proposed feature that would allow an author to better understand and manipulate the Focus system within a web page. This includes support for computing the next and previous Focus targets for any given element, moving the focus forward or backward programatically from an element without knowing the next focus target, and other focus related features.”
• Using the HTML title attribute – Updated March 2020 Uncle Stevo says “If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute”. Basically, it’s only useful for labeling iframes.
• roughViz – JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
• Not a ‘math person’? You may be better at learning to code than you think – “a natural aptitude for learning languages is a stronger predictor of learning to program than basic math knowledge, or numeracy”
• On ethical design, and the Ethical Design Handbook – flame-haired FOSS Adonis @sil reviews @trinefalbe’s groovy new book
• Why Are We Talking About CSS4? – there isn’t a “CSS4” and there are no plans for it. Should there be?
• Top web browsers 2020: Firefox sinks to share unseen since 2005 – “Safari slumped four-tenths of a percentage point to 3.9%, while Opera Software’s namesake dropped two-tenths of a point, falling to 1.2%.’
• Grindr sold by Chinese owner after US raised national security concerns .It’s currently owned by Kunlun, part of the consortium that own Opera’s browsers.
• Groovy thing o’ the week: radiooooo – This is lovely. Choose a country, and a decade (1900-now) and hear music from that time and place.
• This person does not exist shows you a computer generated image of a person every time you refresh.
• Do Not Touch Your Face – “Using your webcam, you train a machine learning algorithm (specifically Tensorflow.js) to recognize you touching your face and not touching your face. Once it’s trained, it watches and alerts you when you touch your face.”
• Anorak Corner: The History of the URL – “all that matters is adoption. If you can get people to use it, however slipshod it might be, they will help you craft it into what they need. The corollary is, of course, no one is using it, it doesn’t matter how technically sound it might be.”

• Web Browser Privacy: What Do Browsers Say When They Phone Home? (PDF, 14pp) – “browsers split into three distinct groups from this privacy perspective. In the first (most private) group lies Brave, in the second Chrome, Firefox and Safari and in the third (least private) group lie Edge and Yandex.”
• Google Lighthouse is now available as a Firefox extension
• Why the GOV.UK Design System team changed the input type for numbers – <input type=number> Considered Naughty
• MDN Browser Compatibility Survey – “We know from past surveys that browser compatibility is a very common pain point, and we would like to get a better understanding of these pain points. This survey will take you approximately 10 minutes”
• Why open source matters by the Government Digital Service of Canada
• Things to consider when doing usability testing with disabled people
• How Proactively Publishing Publication Dates Could Help Facebook Fight Fake News – a good idea by Andy Mabbett
• Me! Me! Me! corner: Speaker’s Story: Bruce Lawson, HTML5 Spec Editor and Musician – CFPland interviewed me
• Do NOT click this link! Userinyerface – “a challenging exploration of user interactions and design patterns”. So wonderfully frustrating.

• Link o’the week: In-Browser Performance Linting With Feature Policies by Timotei Catflap
• A Complete Guide to Links and Buttons by Chris Coyier
• Declarative Shadow DOM – “In order to support Shadow DOM in SSR environments, a declarative Shadow DOM API is required”(proposal)
• Autofill on Browsers: A Deep Dive – on eBay’s engineering blog. Also note that autocomplete is the only sufficient technique currently for WCAG 2.1 1.3.5 AA.
• <select> your poison – accessible, custom select components, by Sarah Higley
• Styling The Good Ol’ Button Element so you don’t need to fake them with <div>, do you?
• The ultimate guide to iframes
• Semantic HTML with Bruce Lawson – I bravely went on the @JSJabber podcast to tell them to use less JavaScript and more good old fashioned HTML. None of them punched me.
• Monzo’s tone of voice guide – really nice guide to writing for the web (and email and everywhere else)
• Igalia Chats with Martin Robinson on a11y – The George Clooney of web standards, Brian Kardell, is ruthless interrogator
• Howdy-do, Prince 13.2! Support custom list markers for PDF/UA; Support rendering intents for color conversion; Fixed issue affecting Indic texts and Baekmuk Batang font; Fixed bug affecting the JavaScript Array slice method, and lots more.
• Responsible Web Design and Joomla 4, by Brian Teeman
• Google users in UK to lose EU data protection – “Google is planning to move its British users’ accounts out of the control of European Union privacy regulators, placing them under U.S. jurisdiction instead, sources said. The shift, prompted by Britain’s exit from the EU, will leave the sensitive personal information of tens of millions with less protection”
• [css-device-adapt] Remove @viewport – CSS Working Group proposes to deprecate this spec. (it shipped in Opera Presto and IE Trident, but those have joined the choir invisible)
• Malware Steals Data By Adjusting Screen Brightness – in a way imperceptible to a user, but easily captured with a camera and turned back into data
• Why Amazon knows so much about you – long piece accompanying a BBC documentary
• The Great Google Revolt – “Some of its employees tried to stop their company from doing work they saw as unethical. It blew up in their faces.” Long read.

• Scroll To Text Fragment is coming soon (to Chromium browsers), even though its syntax is even uglier than me. So you can link to any text in a page, even though there’s no ID to add to the URL. Hope they fix its accessibility before it gets released, though.
• ING open sources Lion: A library of performant, accessible & flexible Web Components “a white-label, open-source, framework-agnostic component library”, “allow for accessibility & extendability”, “Stay as close to native semantic HTML elements as possible”
• Squarespace, Wix, & Weebly: Accessibility Review – “For accessibility, avoid Weebly. Both Squarespace and Wix are capable of creating accessible sites, but the user has to be looking to do so—it isn’t gonna happen by default. Wix seems to be taking accessibility a bit more seriously than Squarespace, so I’m inclined to recommend Wix as the better option”. Disclosure: I do occasional consultancy for Wix on accessibility and standards.
• Toward Responsive Elements – Uncle Brian writes about the work going on in @csswg to give us Element queries that can actually be implemented, are compatible with CSS’s architecture today and are “webby”.
• Mozilla lost the browser wars. It still thinks it can save the internet.
• Tech Startups Are Flooding Kenya With Apps Offering High-Interest Loans – “App-based lending has become synonymous in Kenya with predatory practices .. Last summer newspapers reported that a 25-year-old man from a tea farming village north of Nairobi had hanged himself after defaulting on a $30 loan from an unspecified app.”
• How Microloans Bring Financial Reliability to People in Kenya by Opera Software (tucked away in the investor part of the site)
• Why Google Did Android by Tim Bray
• 2020 State of Malware Report (PDF) “the average number of threats detected on a Mac is not only on the rise, but has surpassed Windows—by a great deal.”

• Link o’the Week: Old CSS, new CSS – fun article about the very early days of CSS and web development. You young’uns don’t know you’re born.
• Code snippet o’the Week: Building an accessible autocomplete control – An excellent explanation of how to build an accessible autocomplete that works without JavaScript. My go-to code when I need one of these.
• Click-Away Pound Survey – “In 2016, the survey found that more than 4 million people abandoned a retail website because of the [accessibility] barriers they found, taking with them an estimated spend of £11.75 billion. In 2019, that lost business, the ‘Click-Away Pound’, has grown to £17.1 billion.”
• Testing aria-live support by Zoë Bijl
• Responsive Type and Zoom by Adrian Roselli
• Hydration – Jeremy Keith on why Server-Side Rendering “has a whiff of progressive enhancement to it but none of the user benefits.”
• The State of JavaScript 2019 – in which 40% of “full-stack developers” describe themselves as “CSS Experts”. Hmmm.
• Inclusive Design for the Immersive Web – proposal for a W3C Community Group to come up with guidelines to ensure accessible XR (virtual reality and augmented reality)
• The WebAIM Million Update: A 6-month accessibility re-analysis of the top 1,000,000 home pages – image alternative text errors decreased by 2.2%; Implementation of HTML regions and ARIA landmarks is on the rise; significant increase in ARIA usage; Pages with ARIA present have 27 more detectable errors (65% more errors) on average than pages without ARIA.
• Prince 13.1 adds support for CSS variables in @page rules and margin boxes; changes the @page rules to inherit from the document root element; extends -prince-pdf-tag-type to support the Artifact and Table values; fixes Thai line-breaking support.
• Why are HTML links called ‘Anchors’? – Sir Uncle Timbo answers my question on Twitter.
• Google admits it sent private videos in Google Photos to strangers – yikes.
• Mastercard chief says breaking up global payments system is ‘stupid’ – Concerns about data integrity help explain why Mastercard pulled out of Libra”. “every time you talked to the main proponents of Libra, I said ‘Would you put that in writing?’ They wouldn’t. .. “when you don’t understand how money gets made, it gets made in ways you don’t like”.
• Open source beyond the market – by David Heinemeier Hansson, Creator of Ruby on Rails, Founder & CTO at Basecamp
• The Ragtag Squad That Saved 38,000 Flash Games From Internet Oblivion – “But while beneficial for internet safety at large, losing Flash came at a cost. The vibrant digital artifacts created using the technology would soon become obsolete.”

• Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords
• Why use a form element when submitting fields with JavaScript? asks Chris Ferdinandi. And then answers it, too!
• India is now a larger smartphone market than the US – “India overtook the US to become the second-largest market, with 158 million phones shipping to the country in 2019.”
• 4 CSS layouts without using media queries with explanation for the Flexbox-challenged people like me
• Masonry layout – Interesting (and very well thought-out) proposal to extend CSS Grid to allow ‘masonry’ layout, and discussion of whether masonry is conceptually an extension of Flexbox or a new display type
• How to find CFPs for developer conferences by @philnash
• Norway’s Opera acquires Estonian startup PocoSys to expand its fintech operations – Hmmm.
• ICE Uses Open Source to Violate Human Rights – “Every open source dependency listed here (updated nightly) is used in Palantir’s software and supports ICE in its systematic human rights violations.”
• There are already Chinese components in your pocket – so why fret about 5G gear? – “This is literally the whole point of standards”
• Want to help someone? Shut up and listen! – fascinating and funny 17 min talk by Ernesto Sirolli, an aid worker, on listening to people and enabling their entrepreneurial spirit.
• What font should you use on the cover of your pulp novel? – a cracking thread by @pulpLibrarian

Hello, you divine diplodocus! Here’s the best of my reading from the last 2 weeks. Last week I was sunning myself in Marbella, Spain, at Forum for the Future, as a guest of the Joomla community. (I’m on their Open Source Matters Advisory Board.)

Anyhow, here we go!

• Link o’the Week: Roles and relationships absolutely golden post by @codingchaos on the ARIA needed for those gnarly composite widgets (and very timely for a project I’m starting soon)
• Opera: Phantom of the Turnaround – 70% Downside – If this report about Opera’s “pivot into predatory short-term loans in Africa and India, deploying deceptive ‘bait and switch’ tactics to lure in borrowers and charging egregious interest rates ranging from ~365-876%” is true, it would make me very sad
• New browser on the block: Flow – Mr PPK interviews Piers Wombwell about a new rendering engine, Flow.
• HTML attributes to improve your users’ two factor authentication experience by Phil Nash
• My Priority of Methods for Labeling a Control – excellent post with actionable information
• Intent to Deprecate and Freeze: The User-Agent string – farewell, browser sniffing!
• Snowpack – “With Snowpack you can build modern web apps (using React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.”
• A list of everything that *could* go in the <head> of your document (there’s a LOT)
• W3C Advisory Committee Elects Technical Architecture Group – Once again, we have a good @w3ctag with people I trust to steward standards the right way.
• Letters to Young People Who Inspire Us, by Madeleine Albright, Michelle Bachelet, Tim Berners-Lee and More – Sir Uncle Timbo’s letter to the girls at the Women’s Technology Empowerment Centre in Lagos, Nigeria.
• Reverberations – “how come a church organ doesn’t sound like a chip tune, which is also built up from simple waveforms? Well, actually it will, if you remove the church. And if you connect a Commodore 64 to a loudspeaker in a large hall, it will sound like an organ.”
• city roads “This website renders every single road within a city” using OpenStreetMap and WebGL

Happy Nude Year, you perfectly pouting porcupine!

• The Guardian view on the gig economy: stop making burnout a lifestyle – “”Uncertain work is becoming the norm, with the result that unemployment statistics look better than the way Britons feel .. We ought to work and have careers that enable us to focus on our relationships and have soul-enriching pastimes. It cannot be socially good to consider leisure time as a lost commercial opportunity.”
• Why You Should Choose HTML5 article Over section, by l’il old me, helped by the resplendent @LeonieWatson
• Progressive Web Apps in 2020 by Maximiliano Firtman
• The $70B opportunity in India’s emerging social commerce sector – “Over 90% of the small and medium businesses we surveyed sell directly through WhatsApp in India — more than 4× the number who sell on Flipkart and Amazon.”
• Guiding Development of Contribution and Community Strategies in Open Source Software Requirements Engineering – PhD thesis by Johan Linåker
• Understanding Async Await by Sarah “Drazzo” Drasner
• TikTok boom: US Army bans squaddies from using platform on government-issued phones – As the first globally successful Chinese social property, TikTok has attracted scrutiny. Army spokesperson Lt Col Robin Ochoa described the app as “a cyber threat”.
• Putting devs before users: how frameworks destroyed web performance – “So creatives, stop being so focused on your CV or personal convenience. Stop putting your own interests above those of your users, and wasting hundreds of kilobytes on stuff no one cares about. You are likely not Facebook or Google, and you shouldn’t be designing or building things as if you are.”
• HTML is a living language – 11 minute podcast by Chris Ferdinandi
• China’s success at AI has relied on good data – But cheap labour has also played an important part: “a data supply chain using cheap labour at Chinese data factories no one has ever heard of.”
• Rhasspy “(pronounced RAH-SPEE) is an open source, fully offline voice assistant toolkit for many languages that works well with Home Assistant, Hass.io, and Node-RED .. intended for advanced users that want to have a voice interface to Home Assistant, but value privacy and freedom above all else.”
• Which emoji scissors close? – important research here

• CSS 3D transformations & SVG – “Resolving the co-evolutionary branches of HTML, CSS and SVG – and why it matters”
• If you ARIA label something, give it a role says Marco Zehe, screen reader user and Accessibility Lord of Mozilla.
• Making GOV.UK more than a website – using schema.org structured markup allows “meeting users where they are, meeting user needs at the point of need”, for example on Voice Assistants or in Google OneBox search results.
• Why <details> is Not an Accordion – “HTML really needs <accordion> , <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements”
• CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS, by Harry Roberts
• Understanding the PDF Tags Tree
• Vivaldi browser pretends it’s Chrome so websites don’t break – “it spotlighted baseless browser incompatibilities with Google search, Google Docs, WhatsApp and Netflix. It also said it’s got problems with Medium, Microsoft Teams, Twitch, Github, Abc Go, AT&T TV Now and Shopify”
• An adventurer’s guide to W3C specs – How do all the accessibility specs and guidelines fit together?
• A Remote Tanzanian Village Logs Onto the Internet – “The Danish company Bluetown installed a hot spot in Sagara B, with download speeds fast enough for Netflix and for local life to change.”
• China is making more of Africa’s phones than you think – “Chinese companies dominate Africa’s phone market”
• Another reason Prince Andrew is a disgrace – Buried in the T&Cs of his Pitch at Palace venture is that he takes 2% of your business for zero cash for 3 years after the pitch.
• Why WeWork went wrong – “The office-space startup took a tumble when investors tired of its messianic CEO and lack of profits. But why were its backers – the House of Saud among them – so keen to pour billions into it in the first place?”. Long, and fascinating article.

Merry Consumerfest, and a Happy Nude Year!