events/2025-07-31-front-end-study-hall

Front End Study Hall #033 was an IndieWeb meetup on Zoom held on 2025-07-31.

• Archived from: https://etherpad.indieweb.org/2025-07-31-front-end-study-hall

Front End Study Hall #033

July 31, 2025

Participants

• Joe Crawford
• Thomas Vander Wal
• to2ds
• Mike Kupietz
• Eric M

Notes

• My background today is the https://html.energy/ - On August 2 there will be the second HTML Day in cities around the world
• Fish & Amp Chips
  • HTML leaking out into the real world
  • https://www.restaurantji.com/ny/brooklyn/fish-and-amp-chips-/
  • https://mastodon.social/@dmandl/114937867014285061

Media Accessibility

• Continued progress from FrESH #032 ~ https://lab.artlung.com/comics-a11y/
  • Seeking more examples of comics accessibility markup

TIL Tags: slot, template

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template
  • Meant to hold templated HTML for the purpose of being used to programmatically create new rows client-side
  • Often accomplished using backtick characters to create strings which can have a consistent mechanism to include JS values without lots of string concatenation

Server-Side!

• Kupietz had a problem with PHP HEREDOC generating JS files which contained backticked-JS vars for using in strings, which PHP then treated as embedded PHP variables, didn't just output literally to JS. The answer was NOWDOC. HEREDOC v NOWDOC: https://stackoverflow.com/questions/11153049/advantages-inconveniences-of-heredoc-vs-nowdoc-in-php
  • Server side usually Joe Crawford uses Twig

Notable Links!

• SVG Crop https://svgcrop.com/ ~ via Eric M, does exactly what it says on the tin! Crops SVG files encasing logos or logotypes with unsightly whitespace around them
• Great recent article on SVG: A Friendly Introduction to SVG by Josh Comeau

Updates!

• Mike Kupietz's draggable theme programming https://michaelkupietz.com/ - plugin enables any parts of a WordPress page to be draggable
  • learnings mobile vs desktop
  • no scroll - pointer events - rainbow hover effect: (Touch events, not pointer events... probably should have done pointer events but was already most of the way down the road to touch events when I discovered that. -Kupietz)
  • touch-action https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
  • github repo for plugin: https://github.com/kupietools/ktwp-wp-plugin-draggable-elements

• Awesome! I might use those CSS properties to enable moving the pinwheels on https://lab.artlung.com/slideorama-pinwheels/ ~ Joe Crawford

• Thomas submits Too Much Coffee Man comics for a11y assessment: https://www.shannonleowheeler.com
  • On looking at the source, turns out it appears the individual markup Apple Live Text, originating in Safari browser and MacOS

• Apple Live Text ~
  • https://apple.stackexchange.com/questions/462749/how-to-customise-safari-ocr
  • How does this work? Adds a component to the dom? Is there any customization available to this?
  • Is iOS and MacOS implemented in the same way?
  • Appears to work with JavaScript off
  • There is a Help item describing Live Text in Safari and interacting with the text in it but no ability to control the text
  • Relevant because it may impact a11y of comics
  • The Apple "Live Text" is part of the OS and is a layer on top of the image. Developers can add it into their apps, but Safari has it built in and enabled - https://developer.apple.com/documentation/visionkit/enabling-live-text-interactions-with-images/ (this is Apple Developer documentation link, not sure if it is available without a developer membership)
  • Part of VisionKit for iOS or Mac

Misc A11y Stuff

• https://roysamuelson.com/book/ - book on audio description for games and films
• https://www.qwantz.com/ - translation - crowdsourced?
• Perry Bible Fellowship a11y?
• Timing is everything - audio descriptions and inherent audio in a film have to work together
• Captions in video content also something I want to study
• Also to study is to examine if possible how mainstream comics companies deliver the accessibility layers in their comics (DC Comics, Marvel, etc)
• Pour one out for SMIL, which want intended to deal with synchronized multimedia

On the persistent lack of consistent markup for Quoting

• Thomas (again) brought up - https://lab.vanderwal.net/blockquote-plus.html The Blockquote Plus to sort out missing semantics
  • Eric M mentions that HTML 3 had a proposal for an author tag. Joe Crawford noticed when researching the first webcam (coffee!) for FrESH #031 that that page included an <author> tag, which surrounded an email address
    • https://web.archive.org/web/19990220223439im_/http://www.cl.cam.ac.uk/coffee/coffee.html
• Kupietz's scheme for per-domain emails and passwords: https://michaelkupietz.com/using-per-website-emails-passwords-to-protect-against-data-breaches/

Thanks all for joining!