Front End Study Hall #041 was an IndieWeb meetup on Zoom held on 2025-11-25.

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

Front End Study Hall #041

Nov 25, 2025

Participants

• Joe Crawford
• Kevin Marks
• Thomas Vander Wal - https://vanderwal.net
• Template:btrem https://btrem.com
• Jeremy Cherfas https://jeremycherfas.net
• pcarrier.com https://pcarrier.com
• Eric M

Joe's Background Today

• Lynx Web Browser home page a reminder to check your sites in a text browser!

Notes

• To Study list is great! Front_End_Study_Hall

Animated SVG!

• Joe sharing - https://koaning.io/posts/svg-gifs/ an SVG that works like a GIF using https://asciinema.org
• https://koaning.io/posts/svg-gifs/parrot.svg - let's inspect it!
  • has animation-duration, you could adjust animation play state
  • Does NOT use animate, animateMotion or animateTransform nodes in the SVG, rather it uses a style element with a keyframe based animation
  • could a scrubber bar be created for this animation?
  • how would this be made accessible?
  • could you add audio in some way?
• brings to mind the late SMIL was tried

Corner Style: Explored!

• Looking at Chrome based corner shaping with CSS - https://codepen.io/amit_merchant/pen/MYyaJOX
  • https://en.wikipedia.org/wiki/Superellipse
  • many of the CSS corner shapes are based on superellipse** https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/superellipse
  • You might say that every corner-style is a kind of superelljpse!

@keyframes hyper {
 from {
   corner-shape: superellipse(-infinity);
 }
 to {
   corner-shape: superellipse(infinity);
 }
}

• Result in Chrome:

• "The button is breathing"
• corner-shape is only available in Chrome (and Edge) as of this meeting but slated to make it to other browsers in time

• The "Get Gemini" button in Chrome can be unpinned

Animation Notes

• Firefox includes a mechanism to adjust the curve of the animation timing function https://www.joshwcomeau.com/animation/linear-timing-function/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timing-function
• https://medium.com/@bruno.mazza87/the-12-principles-of-animation-and-css-1492cc7c41a7
• https://www.joshwcomeau.com/animation/linear-timing-function/
• Joe has been using animation-play-state on :hover to control animation playback

Hooray Interns!

• shape outside devtool was added to Firefox by an Intern

Reminder: "canidev.tools" website

• https://www.canidev.tools/
  • Great site that shows how to accomplish development tasks in the dev tools of various browsers

Elsewise

• Eric submitted a PR to improve NetNewsWire for a theme to help distinguish links
• https://stackoverflow.com/questions/1140307/what-are-the-valid-html-tags-in-rss-feeds/79829913
  • a couple of very solid links on this from 2003
  • https://feedparser.readthedocs.io/en/latest/html-sanitization/
  • https://web.archive.org/web/20080826033749/http://diveintomark.org/archives/2003/06/12/how_to_consume_rss_safely

Theming web pages as old operating systems

• https://github.com/jdan/98.css
• https://sakofchit.github.io/system.css/
• https://botoxparty.github.io/XP.css/#title-bar

Weather App in Android Regression

• UK Met Office ~ redesigned their app and the map timeline went to hell
  • https://bsky.app/profile/kevinmarks.com/post/3m6ffsg6qdk25
  • https://bsky.app/profile/kevinmarks.com/post/3m6fgd2bkqc2f
  • web version https://weather.metoffice.gov.uk/maps-and-charts/rainfall-radar-forecast-map

• to do this well, use leaflet.js - https://leafletjs.com/
• Joe trying to share - https://openseadragon.github.io
  • Crashed his browser and his Mac and he was dropped from the call

• • Joe uses Firefox for exploring dev tools because their tools have proven more reliable on his machine

• • UK maps of radio coverage maps
  • enormous GIF file with few colors, and all compositived over using Leaflet
  • OpenStreetMap
  • mix-blend-mode: multiply could be, or simply with transparency and layers you get nice
  • Leaflet testimonial from Kevin Marks