events/2025-12-11-front-end-study-hall
Front End Study Hall #042 was an IndieWeb meetup on Zoom held on 2025-12-11.
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!
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
- https://uxcampdc.com/ (no event this year,
- 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://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
| Front End Study Hall (FrESH) | |
|---|---|
| Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend | |
| 2026 | 01-15 • 01-29 • 02-12 • 02-24 |
| 2025 | 01-02 • 01-16 • 01-30 • 02-13 • 02-25 • 03-11 • 03-27 • 04-08 • 04-24 • 05-08 • 05-20 • 06-03 • 06-17 • 07-01 • 07-17 • 07-31 • 08-12 • 08-28 • 09-18 • 09-30 • 10-14 • 10-30 • 11-13 • 11-25 • 12-11 • 12-30 |
| 2024 | 04-24 • 05-07 • 05-23 • 06-06 • 06-18 • 07-02 • 07-16 • 08-01 • 08-27 • 09-12 • 09-26 • 10-10 • 10-24 • 11-07 • 11-21 • 12-05 • 12-17 |
