events/2026-06-04-front-end-study-hall

Front End Study Hall #052 was an IndieWeb meetup on Zoom held on 2026-06-04.

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

Front End Study Hall #052

Jun 4, 2026

Participants

• Joe Crawford
• Nick Simson https://www.nicksimson.comO
• capjamesg https://jamesg.blog
• Chris Burnell https://chrisburnell.com
• Template:Jonas https://www.jonasolson.se
• Eric M
• Emily N
• Thomas Vander Wal https://vanderwal.net
• Reilly Spitzfaden https://reillyspitzfaden.com
• mandaris https://mandarismoore.com/
• Tabitha https://tabitha.computer
• Tantek Çelik

Joe's Background Today

• BWC - Bad Website Club https://badwebsite.club holds free education about website making based on Free CodeCamp curriculum and post all their sessions on YouTube to watch if you can't watch when they first give them. https://www.youtube.com/@badwebsiteclub

Notes

• The "To-Study" list on Front_End_Study_Hall is full to bursting!
• Do you have something that's always bothered you about HTML & CSS? Do you have a bug right now we can try to attack together? Let's dive in!
• What if a web browser had a button for you to share your tabs with friends? (i.e. to help you get through the 100 tabs you have open)
• Nick has a question about the <cite> element and using it inline in paragraphs. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite
  • Often in a blockquote
  • Vs... figcaption
  • James has written about displaying blockquotes before and touches on markup but not explicitly with the <cite> element: https://jamesg.blog/2024/05/09/blockquotes
  • heydon pickering: https://heydonworks.com/article/the-blockquote-element/
  • Cite is hard to use in a WYSIWYG environment
  • Browser vendors could in theory do something more with <cite>
• We didn't always have tabs
• target attribute: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/target
  • _self, _parent, _top, _blank
  • there is no "_tab" target type
• When there is an appropriate HTML tag in browsers, use it.
• Where does authorship come from? (hand-written vs. WYSIWYG, optionally with processors in the middle)
• Sidenote: has anyone encountered the <blockquote> with a <footer> pattern before??? (https://smolcss.dev/#smol-unbreakable-boxes) (I tend to prefer the figure and figcaption pattern myself for marking up quotes like this)
  • I've used this pattern doing work with academic related environments where the blockquite is within the text as a call out with the cite attribute in it, but then also build that citation in the <footer> as well. I've done this with scripting in building the page. Some things in the footer are called out as numbered footnotes int the text, and the blockquote also gets a footnote number and called out in the footer using that number. I don't think I used cite elemnt wrapping in the footer as we used it to wrap text in-line to note there is a citation.

• https://www.craigabbott.co.uk/blog/2026/our-css-isnt-opinionated-enough/
  • e.g., do `<button>` instead of `<div class="btn">`

• marking up changes to page
  • https://reillyspitzfaden.com/posts/2025/04/databending-part-3/ this page does it as an `<aside>`
  • How do you let people know that items have changed?
  • what if there was a date-updated attribute in HTML that you could use to show edits?
  • Changelogs written for people
  • h-feed / RSS of changelog
  • del/ins elements are applicable here: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del, https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
  • del has strike out by default
  • who consumes change histories?
  • (edited) in parentheses can appear in some contexts where edits are supported
    • Discourse for example has a pencil icon that, when clicked, shows information about the edit history (not sure if it's full edit history or just when something was updated)
  • If you change a lot in an article, maybe it's worth creating another post and keeping the old one?
    • Each article could then have links to newer/older versions
• You might add a preface to blogs older than a certain number of years to remind the reader that things may have changed since the post was originally published.
• It would be cool to have an automated tool that that lets you easily add a preface to all articles that are about a project that is no longer active.

• https://mandarismoore.com/2026/05/02/admonish-the-callout/

• link_repair has an example of link repair
  • https://unrot.link is an interesting but simple after-the-fact drop-in frontend script to find and replace dead links with archive.org ones

Shape-outside

• https://theosoti.com/short/wrap-text-around-images/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside
• https://codepen.io/artlung/pen/KwNRWwp
• https://meyerweb.com/other/memb/
• https://bennettfeely.com/clippy/

Drop Cap, :first-letter

• https://badwebsite.club/bootcamps/spring-2026/lessons/2026-06-04/
• https://index.starstar.website/

Personal Library

• https://are.na/
• Powerful API to interact with it. https://www.are.na/editorial/on-our-api
• https://tabitha.computer/ https://library.aulophyte.com/
• Google Books, indiebookclub.biz
• personal_library

• Windows 7 css: https://khang-nd.github.io/7.css/

• Lawrence Lessig's copyright presentation - https://www.youtube.com/watch?v=xVk77VQuPAY
• archival_copy

Group Photo 2026-06-04