Bruce Lawson’s personal site

• The F-word, Episode 3 Episode 3 in which Vadim Makeev and I talk about Web site resilience, HTML nesting rules, masonry layout, Web We Want.
• Web Engine Diversity and Ecosystem Health – a very interesting and thought-provoking piece by Brian Kardell
• People, Power and Technology: The 2020 Digital Attitudes Report
• Remediating sites – “you need to make alterations to a web page that already exists, and where you can’t change the HTML, so your job is to write some bits of JavaScript to poke at the page”. Practical advice on developing & testing this with Greasemonkey from @sil
• Disclosure widgets – details and summary, ARIA widgets for IE11, accordions and accessibility by Adrian Roselli
• The Valuable 500 – “The global movement putting disability on the business leadership agenda. We need 500 national and multinational, private sector corporations to be the tipping-point for change and to unlock the business, social and economic value of people living with disabilities across the world. Because the potential of 1.3 billion should not be ignored.”
• Embedded YouTube and Google Maps – are they accessible? TL;DR: not fully.
• Modern Touch-Friendly Design by Addy Osmani
• The Fastest Google Fonts by Hazza Roberts
• Stack Overflow’s 2020 Developer Survey surveyed 65,000 people. Some interesting nuggets: 46.5% of developers said “HTML/ CSS” is their “most dreaded” language; jQuery is still king, but is slowly losing ground to React.js and Angular year over year.
• Military And Intelligence Personnel Can Be Tracked With The Untappd Beer App
• Find wheelchair accessible places with Google Maps – “People can now turn on an “Accessible Places” feature to have wheelchair accessibility information more prominently displayed in Google Map”
• Microsoft: we were wrong about open source – pigs fly, hell freezes over.
• Science confirms it: Websites really do all look the same
• Building a physical <blink> tag! – Quarantine finally causes Terence Eden to lose the plot.
• Developer who wrote vanilla HTML+CSS in Notepad declared a witch

• Does masonry belong in the CSS Grid specification? – The Firefox team have experimented with extending the CSS Grid spec to allow Masonry layout. It’s behind a flag in FF Nightly. The @csswg are looking for feedback.
• Responsive masonry layout with CSS grid + vanilla JavaScript (resize viewport!) by the fab Ana Tudor
• Proper VoiceOver support coming soon to Firefox on MacOS – yay.
• Hammer and Nails – “Do you download source and build tools and run the compiler every time you run an app on your desktop? No? Then why is it fine to make web users do it?”. An intemperate rant by flame-haired FOSS Adonis (or is it “Anubis”?), Stuart Langridge.
• Second-guessing the modern web – article looking at whether React-style development which pushes tons of JS to the client to parse and execute is the best thing ever. TL;DR: no.
• The Web We Want Survey Results – What developers want from devtools, browsers and general standards
• 10 Best Free Static Site Generator Tools – another nifty article by Stuart
• The best totally free web fonts & typefaces
• Styling in the Shadow DOM With CSS Shadow Parts
• Bye, Amazon – Inventor of XML, Tim Bray, quits as a VP at Amazon Web Services “in dismay at Amazon firing whistleblowers who were making noise about warehouse employees frightened of Covid-19”.
• Web Sites as ‘Public Accommodation’ under a Pandemic – “If you dodged an accessibility lawsuit because you have physical locations, what does it mean when those physical locations close? What about when the number of locations or the operating hours are reduced?”
• Payments and Authentication: Driving toward a Whole Greater than Parts – W3C
• generic-components -“A collection of generic web components with a focus on Accessibility, Easy to use, Easy to style

• Link O’ The Week: Looking at coronavirus.data.gov.uk -Web superhero @dracos wrote up how he vastly improved the performance of the UK government Coronavirus data website. Spoiler alert: “The important thing is to have a resilient base layer of HTML and CSS, and then to enhance that with JavaScript.”
• The F-Word podcast, Episode 2 – What’s new in Chrome 81 & Firefox 75, gaps in Safari release notes, webdev glossary, a11y for designers.
• Storage for the web There are many different options for storing data in the browser. Which one is best for your needs? Pete LePage from Google finds out.
• Better Form Inputs for Better Mobile User Experiences
• An introduction to CSS Grid by Chris Ferndinandi
• How does TypeScript work? The bird’s eye view
• Introducing the fastest and most user-friendly content encryption – Hurray, the AMP team have come up with a new DRM mechanism.

• The Cost of Javascript Frameworks – “A framework should go beyond developer experience value and provide concrete value for the people using our sites” by TinkyWinky Catfish.
• HTML isn’t done! (Chrome Dev Summit 2019) – video by Greg Whitworth and Nicole Sullivan on the visual and accessibility revamp of form controls in Chromium
• Accessibility for UX Designers – a starter guide for UX Designers about delivering accessible websites.
• Watched Box – “Declarative container queries FTW! A custom element as a ResizeObserver root. The easiest way to get working with ResizeObserver and creating container queries with JavaScript.”
• Responsive Images the Simple Way
• Constrained CSS grids without max-width by Ethan Marcotte
• Ensure your website is available and usable for everyone during COVID-19 – a checklist for resilience, SEO, a11y etc
• 98.css is “a CSS library for building interfaces that look like Windows 98.”

This week, my friend Vadim Makeev and I released the first episide of our podcast, The F-word, which discusses Front-end, browsers and standards. The web site is built on Eleventy, hosted on Github so anyone can contribute and has a 100% Lighthouse score. The pilot episode is 38 minutes long—why not have a listen!!

• Inclusive Inputs – An exploration into how to make inputs more accessible.
• Beginner’s Guide to Eleventy by Tatiana Mac
• The WebAIM Million, updated – “Home pages with WCAG failures up to 98.1% (from 97.8% last year). Page complexity increased 10.4% in that time. Home pages with ARIA present averaged 60% more errors than those without.
• Good Email Code – templates for HTML emails “making sure it is semantic, functional, accessible and meeting user expectations. Consistency between email clients and pixel perfect design are also important but always secondary.”
• Web Animations in Safari 13.1
• Updates to form controls and focus – Nice changes to forms aesthetics, focus and a11y in Chromium
• Accessible SVGs – an oldie but gold article
• Helping Seniors During the Covid-19 Crisis – How my chums at @wixeng partnered with local authorities to build a volunteer call center app to help vulnerable populations during the current crisis, in one week. “we would be happy to translate it to other languages, adjust it to other government regulations, and assist in implementing it, if requested.”
• Webcam Hacking – “a technical walkthrough of how I discovered several zero-day bugs in Safari during my hunt to hack the iOS/MacOS camera. This project resulted in me gaining unauthorized access to Front & Rear Cameras, Mic, Plaintext Passwords & More”
• colors.lol – “Overly descriptive color palettes.”

• 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.”