events/2026-05-21-front-end-study-hall

Front End Study Hall #051 was an IndieWeb meetup on Zoom held on 2026-05-21.

• Archived from: https://etherpad.indieweb.org/2026-05-21-front-end-study-hall

Participants

• Joe Crawford https://artlung.com/
• Thomas Vander Wal https://vanderwal.net
• capjamesg https://jamesg.blog
• jo
• mandaris https://mandarismoore.com/
• Emily M
• Eric M
• Tantek Çelik

_Welcome to the triumphant return of Front End Study Hall after a 6 week hiatus. A 2 week cadence ought to return now_

Joe's Background Today

• Single panel comic from 1993: https://en.wikipedia.org/wiki/On_the_Internet,_nobody_knows_you%27re_a_dog by Peter Steiner originally published in the New Yorker magazine
• Joe Crawford chooses backgrounds as a conversation starter!
• Building impressions of trust:
  • Performance, SSL
  • Including links to corroborating information

Conversation Starters

• • What are the things about websites which go toward establishing trust?
    • Trust can be "is what the website communicates trustworthy?"
    • Do I have a sense of who is responsible for this website?
    • What features and tools - frontend tools in HTML, CSS, in the assembly of pages and applications - can we provide on the frontend to encourage trust?
    • What antipatterns for trust do we try to avoid?

LINKS FOR POTENTIAL DISCUSSION

• SEE THE LONG LIST AT Front_End_Study_Hall which is ordered oldest to newest

Notes

• Should we start an IndieWeb Zoom Choir?
• Admonishments / Callouts - the warning icon - ⚠️
  • https://mandarismoore.com/2026/05/02/admonish-the-callout/
  • https://github.com/orgs/community/discussions/16925
  • James does a sort-of callout on his draft pages: images/8/8f/jcb_draft.png* install HTML element
  • https://developer.chrome.com/blog/install-element-ot
• Working within the limits of a hosting provider

• How to author in Markdown and then get a callout / warning / complicated html widget

• • https://github.com/orgs/community/discussions/16925
  • Apparently Typora (markdown tool James uses for writing) understands this syntax!
  • https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/

• https://dfrlbook.com/ Design for Real Life by Eric Meyer and Sara Wachter-Boettcher
  • Stress cases: https://dfrlbook.com/chapter3
  • Accessibility is not an edge case
  • Designing for purpose for difference!
• https://slack.com/intl/en-gb/help/articles/4403914924435-Add-alt-text-to-images
  • You can add alt text to an image in Discord too
  • Discord lets you set an image as a spoiler
• There isn't really a native admonition / callout HTML element

• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
  • A declarative syntax for creating

• We all use things differently

• https://shkspr.mobi/blog/2022/05/designing-for-non-rectangular-browser-windows/
• Lots of fun images in https://www.yankodesign.com/2025/01/23/the-strangest-nokia-designs-top-10-concepts-that-never-launched/
• https://theosoti.com/short/wrap-text-around-images/

• Sandbenders: http://technovelgy.com/ct/content.asp?Bnum=80

> "I like your computer," she said. "It looks like it was made by Indians or something." > Chia looked down at her sandbenders. Turned off the red switch. "Coral," she said. "These are turquoise. The ones that look like ivory are the inside of a kind of nut. Renewable." > "The rest is silver?" > "Aluminum," Chia said. "They melt old cans they dig up on the beach cast it in sand molds. These panels are micarta. That's linen with this resin in it."

• https://www.kirstenoulton.com/sandbenders-and-the-sad-haptics-of-my-office/

• https://en.wikipedia.org/wiki/Nintendo_DS_Browser
  • Using a browser in a device with two screens
• Some watches are circular in form factor
  • Circular interface design, like the exercise Rings feature on Apple Watch
• Failure modes for software interfaces
  • Medical systems, avionics, etc. need to have failure modes that prevent catastrophe

• https://unsung.aresluna.org/molly-guard-in-reverse/
  • https://en.wiktionary.org/wiki/molly-guard
• Preventing accidental failure
  • "Are you sure you really want to do this?"
    • https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
    • https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
    • https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
    • Basic Http Authentication is a great example!
• “Tragic Design”: https://www.amazon.com/Tragic-Design-Impact-Bad-Product/dp/149192361X
  • https://www.tragicdesign.com
    • Joe Crawford has now bought copies of both Design for Real Life and Tragic Design from bookshop.org

• https://en.wikipedia.org/wiki/Natalie_Jeremijenko
  • Artist who takes on technology and meaning in a confrontational and sometimes playful way

• Web haptics
  • https://haptics.lochie.me/
  • Haptics can generate trust -- did I actually complete the action?
  • Ought to be used sparingly

• 410 Gone -- requires care to keep up

• https://en.wikipedia.org/wiki/FiveThirtyEight
• Extent to which a site can lose trust by pages going missing on the web that people expect? (especially for corporations)

• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction#origin_types
• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity
• You can get the specificity value for a CSS selector by hovering over the selector in dev tools (works in at least Safari and Firefox); you have to leave your mouse cursor for a second before it pops up.
• Code isolation
• https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using
• https://www.oreilly.com/library/view/css-the-definitive/9781098117603/

All web pages have styles

User-agent stylesheets, Author stylesheets, and User stylesheets.

Ways to unset https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/all https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/unset https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#initial_value

• prefers-color-scheme media feature:
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme

• How do we build adaptable components that adhere to the look and feel of the page
• https://jamesg.blog/assets/styles/styles.css

• color-scheme: dark; is a valid thing one can put as a css rule to force dark scheme on an area of the page. in the absence of other colors set, it will use default browser dark colors

Group Photo 2026-05-21