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

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

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

Front End Study Hall #031

July 1, 2025

Participants

• Joe Crawford https://artlung.com/
• Thomas Vander Wal
• benji
• Fractalkitty
• Template:btrem
• Kevin Marks
• capjamesg
• Tantek Çelik
• Dr. Matt Lee

Joe's Zoom Background

• Joe's background today is the first webcam: https://www.bbc.com/news/technology-20439301
  • https://web.archive.org/web/19971210230542/
  • https://codepen.io/artlung/pen/PwqgaBP

Update from Fractal Kitty

• Fractalkitty built a Svelte page using TypeScript of full page with iframes - separarate site with iframes - one source of truth for that. Can use "npm" for libraries and not use a CDN - really prototype https://inquiries.link/ - Not rely on
• Math!
• Graphing calculator! Desmos!
• Tailwind - decided against using it in favor of regular CSS
  • class names are not descriptive
  • there's no cascade anymore - classnames are descriptive
  • can correlate html, ids. and classes with what's in css
• created Svelte templates

Math - from Manny

• https://mandarismoore.com/2025/06/16/the-mathening.html

Audio Tag Styling HOWTO

• • mandaris - Example: https://mandarismoore.com/2025/06/04/crucial-track-for-june.html
  • https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
  • https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices
  • https://stackoverflow.com/questions/4126708/how-to-style-html5-audio-tag

• appearance mdn has no effect on audo elements
  • https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
• Sliders math interactives vs audio elements vs form element selects
• Audio element that matches your design
• https://codepen.io/benjifs/pen/WbvBbQa
  • https://www.media-chrome.org/docs/en/get-started

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling
• Chromecast, platform facilities - replicate

Funny enough the coffee webcam had a link to an audio file

• https://en.wikipedia.org/wiki/Au_file_format
• Panic Audion vs Soundjam MP (aka iTunes)

Aside

• Joe Crawford got his TRMNL device which was inspired by benji https://usetrmnl.com
• https://www.benji.dog/articles/trmnl-metrotransit/

Web-based text editors

• Question from Matt Lee: are there any in-browser rich text editors which aren’t awful/universally hated?
  • https://quilljs.com/
  • https://trix-editor.org/
  • https://github.com/Ionaru/easy-markdown-editor
  • https://www.draftail.org/

Web Accessibility in rich, educational, mathematical exploration UIs

• From Sophia / Web Accessibility
  • Have a hidden element for caption with
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live
  • Polygon symmetry dynamic additions, how do I communicate the changes that occur after user actions
• P5 have a "describe" section - aria-live
• https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/
• https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/
  • aria-live region nuances
• Maybe an analogy for "Toast"
• https://css-tricks.com/accessible-svgs/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
• https://webtips.dev/html-popovers - this has aria areas

James: I have every link up my sleeve.

Why margin-inline

James asking about `margin-inline`

• https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
• More semantic in nature, like the distinction between b and strong

• Why for Sophia's interface is her year calendar 19 by 19 with 4 days?

Mayan / Bahai calendar - squares 19 day cycles

• • visualizations are exploratory
  • more data makes for richer ability to create meaning from the data

• https://haiku.oom9.xyz/
  • Or on mastodon: @bot@haiku.oom9.xyz
  • Or on bluesky: https://bsky.app/profile/haiku.oom9.xyz
  • :)
  • D3 play in haiku: https://codepen.io/fractalkitty/pen/QwWbGjd

For more events see: https://events.indieweb.org/