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

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

Front End Study Hall #042

Dec 11, 2025

Participants

• Joe Crawford https://artlung.com/
• Thomas Vander Wal https://vanderwal.net
• capjamesg https://jamesg.blog
• Template:webcraftsman https://jeffbridgforth.com
• Template:zephnet.biz https://zephnet.biz
• Eric M

Joe's Background

• From 2010: The article that popularized the term "responsive web design" https://alistapart.com/article/responsive-web-design/
  • by Ethan Marcotte https://ethanmarcotte.com/
  • Since then folks who make websites have embraced the idea of scaling to the browser and respecting user preferences

Recent Events

• Recent Photos Popup https://events.indieweb.org/2025/12/photography-popup-1-OaWgUHup1PkG
• Al Abut will likely be doing more development around photos this weekend at San Diego IndieWeb Camp 2025

Animation!

• James asks about using CSS as a means to show a sidebar and then hide it, based on something in https://practicaltypography.com/
  • Animation and then hide
  • Then hover state
  • Joe demoing his https://artlung.com/mixtapes/ to show a small trasform on hover of links and having it not alter the layout

• https://www.reviveourhearts.com/2025-annual-report/ - scroll-driven animation Jeff built recently for a timeline component
• animation horizontal on a timeline
• https://github.com/greensock/GSAP
  • Definitely influenced making scroll-based animations available
• innovator - adam argyle
• https://codepen.io/pimskie/full/OPMQVjP - Scroll-driven animation demo I (Jeff) found this week
• 30 months to widely available?

Accessibility Tools!

• Zephyr has more accessibility tooling https://zephnet.biz/
• mixins in css! https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Custom_functions_and_mixins

• https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
• ::focus-within, ::focus-visible
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:user-invalid
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:user-valid
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-within

Sprite Sheets

• Sprite Sheets / SCSS
• https://codepen.io/artlung/pen/zxqLRoz

Dev Advent Calendars!

• • https://adrianroselli.com/2025/12/web-design-dev-advent-calendars-for-2025.html

Elsewise

• Adam Argyle & Kevin Powell talking about interviewing for front end
• https://nerdy.dev/on-general-musings-with-kevin-powell-about-interviewing-for-frontend-roles-in-2025
• https://www.youtube.com/watch?v=JLdh9VU7YPk

• Every community ought to have
  • Photography agencies that makes web pages
  • US Digital Service
  • Gruber has a slightl contradictory take on Calibri's removal: https://daringfireball.net/2025/12/full_text_of_marco_rubio_state_dept_directive_times_new_roman

Anachronistic type in media; Code in film

• • https://en.wikipedia.org/wiki/Calibri default now
• Incongruus fonts in films!
• https://www.marksimonson.com/notebook/view/typecasting/
• https://vhbelvadi.com/in-defence-of-times

• https://www.tumblr.com/moviecode - it has RSS https://moviecode.tumblr.com/rss
• Speaking of US Digital Service
  • https://uxcampdc.com/ (no event this year, Joe Crawford encountered a lot of great US Digital Service folks at prior events there, it has been a great effort to create tools for the US federal government which does tons of communications, reports, websites
  • https://github.com/usds

• New Century Schoolbook has a posse! (both Eric and James appreciate it!)

Shape! polygon

• CSS, SVG, clip-path: polygon, shape:
• https://css-generators.com/svg-to-css/
• Joe made a shark with a polygon - with % based points, which is dependent on a particular aspect-ratio https://codepen.io/artlung/pen/vEGQzQK

"That's just peanuts to space"

• Eric M brought a custom background to Zoom today too! Honoring #042!
• 42! https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy
  • Douglas Adams - 42 was an arbitrary choice! No magical association with the ASCII value for the asterisk or any other scheme

Other

• Babelfish
• Book: Dictionary of Symbols from Penguin (has no symbols!)
• Igalia Podcasts - worth a listen says James
  • https://www.igalia.com/chats/

• https://en.wikipedia.org/wiki/Mystery_meat_navigation
• Consider carefully animating, hiding or fading core navigation!
• A website's functional parts ought to try to be be self-evidently functional where possible

• document.visibilityState === 'visible'
• window.matchMedia!
  • window.matchMedia('(prefers-reduced-motion: reduce)').matches

See Also

• 42