events/2025-05-20-front-end-study-hall

Front End Study Hall #028 was an IndieWeb meetup on Zoom held on 2025-05-20.

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

Front End Study Hall #028

May 20, 2025

Participants

• Joe Crawford
• jo
• capjamesg
• Eric M
• Nick Simson
• Template:vanderwal
• Jeremy Cherfas
• benji
• Mike Kupietz
• Ross A. Baker (working and lurking)

The To Study List is long!

• Front_End_Study_Hall#To-Study_List!

Joe's Zoom Background

• Microformats.org codifies ways to embed data into documents.
  • Originally I wanted to use an original 1995 Dublin Core page of some kind as a backdrop but reading the history in a way that builds on previous work adding metadata to documents. I originally was thinking about Dublin Core https://en.wikipedia.org/wiki/Dublin_Core https://www.dublincore.org/resources/metadata-basics/ https://schema.org/ https://ogp.me/ and earlier ideas such as ICBM metadata https://en.wikipedia.org/wiki/ICBM_address or PICS labels https://www.w3.org/PICS/labels.html ...the goal of making documents on the web richer, more discoverable, more findable, better indexed and cross-refer

• Taylor Swift JSON-LD example: https://developers.google.com/knowledge-graph

• Rel Edit https://jamesg.blog/2025/05/09/extending-my-edit-web-page-bookmarklet

• educational institutions, libraries, library information technologies
• MARC format. (https://en.wikipedia.org/wiki/MARC_standards)
• OCLC (Ohio College Library Consoritum, the creators of Dublin Core): https://www.oclc.org/en/home.html
• Citing a book what it is, edited contribution

• Folksonomy - tagging and tag views on twitter is how gRegor Morrill connected with Joe Crawford on Twitter
• James found the IndieWeb via Chris Aldrich using hashtags on Twitter.
• Link tags connect to things like stylesheets but are invisible to the user
  • James: I love stylesheets :D
• Link tags have the capacity to denote a "next" or "prev" or "index" to create relationships between pages in a set, much of that is unimplemented in browsers
• I want my orange browser-based RSS button back. AMEN!
• At one time RSS / Atom icons were built into browsers to display that icon and make it clickable via autodiscovery

• HTML "rev" history - In an HTML 2 document I spottedan idea of not just link rel but the reverse of that link, link rev
• https://en.wikipedia.org/wiki/FOAF
• RDF Schema - Wikipedia
  • Failed promise: https://artlung.com/blog/2024/05/31/goodbye-foaf/
• RDF lots of parameters, computationally expensive
• Tom Guber ontologies of folksonomies - - smallest viable ontology - being able to explain - https://tomgruber.org/writing/ontology-of-folksonomy.htm
• Having triples within RDF - relationhips in RDF are action, subject,
• XRD is more flexible - https://docs.oasis-open.org/xri/xrd/v1.0/xrd-1.0.html, https://equalsdrummond.name/2008/09/06/xri-in-a-nutshell/

Burning Questions 1

• From Jo Editing things on a canvas?
• Form data is edited on an image
• given a document with no server, and only client-side code, can a section of page or a canvas element update in real time?

• yes, with event handlers to listen to form elements, and then update the target section:

• • James' code: https://gist.github.com/capjamesg/8e848debf2d89e5b5f910f7bb81f81b4
  • Claude example of drawing input text to a canvas: https://poe.com/chat/kr50o8zlvszldw1zsp
  • Taylor Swift example: https://gist.github.com/capjamesg/eee8640d41d5d9272f1052086c049346

Burning Questions 2: Performance on iOS

• JavaScript animation which updates based on user input on a slider range element has terrible performance
• Performance transform with keyframes
• iOS 15 is slow, visual display janky

Answer

• debounce!
  • a function that runs too frequently can be the cause of performance issues of this
  • Debounce on MDN
  • Some check to assure that if the function is running not to start another
  • time based programming with setTimeout or setInteval can be useful - to create an event loop that will do an action under certain conditions

Joe's Green Lined Paper Demo

• https://codepen.io/artlung/pen/ZYYNJOx
• The chat on Bluesky https://bsky.app/profile/artlung.com/post/3lpkgdxhszk25
• Dot matrix printer playing "Eye of the Tiger": https://youtu.be/u8I6qt_Z0Cg

Try

• https://lab.vanderwal.net/
  • Personal infocloud! Places where we can experiment with web pages are good! Putting up interim versions for experimentation is part of learning "the grain of the web" https://frankchimero.com/blog/2015/the-webs-grain/ also mentioned in Matthias Ott's recent talk "Painting with the Web" at Beyond Tellerand https://youtu.be/1Pq7VqNrtk4
  • e.g. https://labs.jensimmons.com

• Followup From Fresh #027
  • Joe Crawford spent some time on a JavaScript-less version of Reilly Spitzfaden's nav and hamburger menu which uses zero-height elements, has() and :focus-within to take a stab at an accessible, JavaScript-less menu
  • Codepen: https://codepen.io/artlung/pen/raagwmm

Catch

• Awesome RSS toolbar icon he uses remains compelling and a demonstration of the utility of making link rels visible!
  • First spotted by the crew of Fresh #022
  • RSS and Atom don't get enough love from browsers

• Safari on Mac doesn't allow setting webmail as the target for mailto: Joe made a bookmarklet to rewrite them this past week https://lab.artlung.com/safari-mailto-webmail/

Finally

• GO MAKE A WEB PAGE

Last Word

• We also talked a wee bit (not enough!) about eco mode. The Front End Study Hall page currently has this bit:
  • Suggested topic from Tantek Çelik: an "eco mode" theme (and switching UI!) in addition to light/dark, see:
    • recent IWC DUS session: Sustainable Web Sites and watch the recording for background.
    • result of the IWC DUS session, Joschi Kuphal's demo (worth watching the video, linked at top of that page, for visual and charts!)
      • with example of page with light/dark/eco-mode switcher at bottom: https://jkphl.is/ecomode/index-2.php
    • more recently, an independently developed freely usable more-sustainable SVG icons set: https://github.com/codewordcreative/susty-icons/tree/main?tab=readme-ov-file#a-work-in-progress-before-initial-release
• we hope to revisit this in future! - with the caveat that wholistic environmental impact of web publishing broadly is more than just light/dark mode but defining those metrics is worthwhile!