events/2025-03-27-front-end-study-hall

events/2025-03-27-front-end-study-hall was an IndieWeb meetup on Zoom held on .

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

Front End Study Hall #024

March 27, 2025

Participants

• Joe Crawford https://artlung.com/
• Template:jonathan https://jonathanwold.com
• Ross A. Baker https://rossabaker.com/
• jo https://dead.garden
• gRegor Morrill https://gregorlove.com
• bkardell https://bkardell.com
• benji https://benji.dog
• mandaris https://mandarismoore.com/
• Eric M
• Tantek Çelik
• Fractalkitty

Agenda

• The agenda is set by the participants! What HTML & CSS are on your mind today?
  • James is thinking about view transitions (how do they work; and what does browser support look like?)

Joe's Background

• Mission Impossible Website, 1996 https://web.archive.org/web/19961022174928/http://missionimpossible.com/
  • Was thinking about sites from that time and trying to remember the first time I ever encountered video as a result of a website, and mostly the experiences were negative, difficult, constrained by bandwidth and technology, and 30 years later we can watch video when walking around on phones!

Space Jam!

• Eric's background is the original Space Jam website
  • Jen Simmons Space Jam (CSS Grid): https://labs.jensimmons.com/2017/02-015.html
  • Original Space Jam (tables galore!): https://www.spacejam.com/1996/

Centering a poem, simply

• Center a block, keep text left aligned, don't artificially constrain width:
  • https://paste.rossabaker.com/ross/d819c68c75614ed2ac29eed7382bf4de
    • Ross asked "how'd I do" - Joe Crawford replies: it's great! Terrific use of fit-content
  • Eric M has a take on a similar topic: https://meyerweb.com/eric/thoughts/2022/04/26/flexibly-centering-an-element-with-side-aligned-content/
    • max-inline-size: max-content;

W3C Breakouts Day 2025

• Was yesterday https://www.w3.org/2025/03/breakouts-day-2025/
  • Learnings 30 months is the baseline time before developers take up a tool on the web
  • After 30 months features are 95% in the wild

• Inspiration for a rebuild of my personal site, refinding / updating my love of working with HTML / CSS

"Graceful degredation" as the opposite of progressive enhancement. https://canwe.dev/ https://caniuse.com/

• https://bcd-watch.igalia.com/ : Keeping an eye on changes to MDN’s Browser Compatibility Data - subscribe to updates via RSS

• q: How mature is a feature?
  • Flexbox, Anchor Positioning came out and then changed, Grid changed until 2017
  • W3C candidate recommendation is a metric
  • Do folks here care to know how mature is a feature?
  • Do folks here care if a feature they use can or is expected to change in a breaking way in the future?

Coming back to making web pages after a long hiatus!

• Question from Jonathan Wold - has an 18 year old site
  • Writing markup, using 11ty as SSG, integrate WordPress
  • "The web is way better these days" - Joe
  • Making on the web is fun - James
  • MDN is essential

• Rachel Andrews and Jen Simmons https://labs.jensimmons.com/ are terrific places to start
• https://web.dev/shows/designing-in-the-browser
• How to approach design?
  • Design for 1 column using grid, then add breakpoints to use the space - Joe Crawford
  • Design to your desired look, then stretch and squish the design and decide how you'd like to alter it
  • View source on interesting pages!
  • Get your iteration time, the time to writing code and seeing the result - get that interval as short as possible
  • Stay inspired! The web is great!

Recent site by Joe

• https://artlung.com/cssbattles/ - using single grid by default, and then using column-count to maximize space
• using columns is mostly not great as a reading experience, a bit too paper-newspaper, important to consider how visitors will use and read the site

Learning CSS Grid!

• https://cssgridgarden.com -- a great game to teach you the basics

• Another Use case for columns - dense links at the tops of pages on:
• https://atomicarchive.com/resources/documents/effects/glasstone-dolan/index.html
• Seismic effects of nuclear weapons
• Fundamental texts ought to be converted to HTML
• Out of print books - full support for internet archive
• https://bkardell.com/effects-of-nuclear-math/html/ - this is a fork which uses MathML instead of MathJax :) and a post about it https://bkardell.com/blog/NuclearMaths.html
• John Gruber's site is not mobile friendly https://daringfireball.net/
  • Mobile browsers have Reader view, which on iOS now includes a "Listen to Page"
• Read aloud button: "Listen to Page"
• Mission: Impossible theme MIDI (M:IDI?): https://bitmidi.com/mission_impossible_theme-mid
• song.link
• archive.is
• bsky.link was an example: https://github.com/capjamesg/bsky.link
• https://github.com/karpathy/arxiv-sanity-preserver for ArXiv paper pages
• Translation tools can be fed a web page url and translate
• Old toys to translate to pig-latin, or flop a page upside down before scale: -1; was available in CSS.

More on video on the web history!

• • RealPlayer - RealAudio
  • Star Wars Prequel downloads
  • Apple showcased Quicktime by having a dedicated place one could download trailers for upcoming movies (in a range of filesizes

---

• Participate in the Carnival of Mathematics from Fractalkitty this month: https://aperiodical.com/carnival-of-mathematics/
  • Share something about math on the web!

Some Cool Links To Peruse

(potentially worth discussing)

• https://9elements.github.io/fancy-border-radius/
• https://ishadeed.com/article/css-relative-colors/
• https://www.builder.io/blog/animated-css-accordions
• https://web-platform-dx.github.io/web-features-explorer/features/
• https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
  • I wish this had support on iOS - James

Closing Thought from Joe Crawford

• Everyone's carrying around dang web pages in their pockets, make and share a web page with your pal!