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

Front End Study Hall #018 was an IndieWeb meetup on Zoom held on January 2, 2025.

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

Front End Study Hall #018

January 2, 2025

Participants

• Joe Crawford
• Dr. Matt Lee
• Kevin Marks
• Tantek Çelik
• (and a few other folks who found their way via Eric Meyer's retoot on Mastodon)

Notes

• Joe's Zoom background today is from the website for David Siegel's Creating Killer Websites - which in 1996 was state of the art - which at the time meant <FONT> and <TABLE> tags and spacer GIFs to push what was possible on the web.
  • https://thehistoryoftheweb.com/tables-layout-absurd/
  • https://web.archive.org/web/19980115114608/http://killersites.com:80/
  • https://www.xml.com/pub/a/w3j/s1.people.html

Modern browser features and Ruby on Rails

• Dr. Matt Lee ran current Ruby on Rails this past weekend and was asked whether the frontend stack should use more modern features, some were familiar, some weren't:
• :has()
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:has
  • Bruce Lawson calls it "The God Selector" https://brucelawson.co.uk/2024/css-has-the-god-selector/
• CSS Nesting
  • CSS Nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting
  • Previously only available in LESS, CSS syntax in many environments can use a nested syntax
• "Import Maps"
  • A way to point to namespaced JavaScript modules
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
  • https://guides.rubyonrails.org/getting_started.html#import-maps
  • Akin to source maps https://developer.mozilla.org/en-US/docs/Glossary/Source_map
• "Badging"
  • Might be referring to the Badging API https://developer.mozilla.org/en-US/docs/Web/API/Badging_API

For the next FrESH

• Goal for next FRESH for Joe Crawford make :has based navigation a11y compliant (with ARIA-?) for https://lab.artlung.com

Misc Topics, What's up with an abbreviations?

• Why is a11y abbreviated like that?
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility has an answer
  • It's less characters to type
  • Some find it an unhelpful abbreviation

I have a static site, how do I add search? How do I find things within my site as it grows?

• Use a widget from a popular search engine
• e.g. Google https://programmablesearchengine.google.com/controlpanel/create
• Community member capjamesg has wrotten about his own site and search engine https://jamesg.blog/2021/07/20/building-a-blog-search-engine/
• Consider other means to help navigate, an index page with all your

• Very much in the vein of a digital garden, yes, sites expand, get unwieldly, but can evolve over time, this is something of a natural growth of using websites like a journal, like a diary, like a notebook, like a scientist's records

• • Joe is not discovering radium, but is discovering/improving radial gradients?
• Kevin Marks points out that Twitter at one time had an export that. included a JavaScript based search that did not require any sort of backend server technology
• SQLite based search?
• Fuzzy Find Riprep - editor - Vim, Sublime Text style codes
• Joe uses phpStorm, BBedit, PyCharm
• Our own editors or operating systems can be helpful to search our own site
• Tools like Obsidian or Scrivener can search across a corpus on a local machine

Aside on Debugging

• • https://jvns.ca/blog/2022/12/08/a-debugging-manifesto/
  • https://store.wizardzines.com/products/poster-debugging-manifesto

About consistency in browser rendering

• MSIE / CSS Gradient - hacks in CSS
  • Browser consistency is far better these days
  • -moz-, -webkit- prefixes cruft
  • things like Tantek Çelik's Box Model hack are thankfully no longer state of the art when box-sizing: border-box is now widely available
  • Should I worry about nesting of my HTML code?
  • What code formatting matters? How do we take in. reactions and criticism of others?
  • Adam Bosworth on his time in the MSIE team: "we will render" no matter what

Misc

• Happy New Year FrESH! 🥳
• how to publish and represent opening hours for venues in the context of recommendations
• some background here: https://chat.indieweb.org/2025-01-02#t1735811146863500
• venue owners find it hard to update more than place
• people trust individuals more than larger services for more precise information
  • https://chat.indieweb.org/2025-01-02#t1735811566445500

• Representing time intervals or any human construct comes. with limitations
  • https://www.xkcd.com/2867/
  • opening hours based on sunset
  • park signs that say it is open until sundown
  • business hours - perceived complexity, actual complexity

And. more on standards and their power

• There's no standard way for a buisiness to represent their operating hours in a way search engines and sites like yelp can consume, a la a robot.txt file?
  • how/why is moving a text file from one computer to another more perhaps technically different than signing into (creating accounts on) multiple sites / services and updating them via forms
  • anil dash's statement about "wherever you get your podcasts" is only true because Apple forced people to use an open RSS podcast standard for their dominant podcast tools / directory. see: https://www.anildash.com//2024/02/06/wherever-you-get-podcasts/
  • counter-example: Google Reader's shut down affecting the feeds/RSS ecosystem

• • RSS is powerful and portable - Joe saw a podcast that went quiet for years then 8-9 year then published a new episode! https://alifewellwasted.com/
  • counter-example: tuaw(.)com being taken over by a gen AI spammer, took weeks for Christina Warren to get people to notice and get tuaw slop feeds taken down by Google News