events/2024-06-18-front-end-study-hall: Difference between revisions

Front End Study Hall #005 was an IndieWeb meetup on Zoom held on 2024-06-18.

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

Front End Study Hall #005

Jun 18, 2024 12:00pm PDT

Participants

• Joe Crawford
• Otto Rask
• Reilly Spitzfaden
• Mark Sutherland
• pcarrier.com
• Template:Aaron Klemm

Notes

• {artlung}: my background today is a CSS sprite background from ebay from 2014. Improved browser SVG support there are less CSS sprites than there once were, but if you go poking around websites in DevTools you'll find some sprite sheets under the image resources. Some further reading:
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
  • https://css-tricks.com/css-sprites/
• Last week we looked at a bunch of CSS art, {Ros} shared The Simpsons in CSS https://pattle.github.io/simpsons-in-css/
• There are apparently Flash pieces in the Tate Modern
• I showed my hand-typed SVG last FESH, so here it is in live use: https://codepen.io/meyerweb/pen/zYQpVbG
• That canvas color cycle idea well presented here: http://www.effectgames.com/demos/canvascycle/
• SVGs support links maybe in case you want that imagemap-like effect on a page https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a
  • Mark showed off an interactive screen which included flying pigeons, made with animated SVG
  • SVG https://www.nan.fyi/svg-paths - terrific manual SVG code editing tutorial
  • Using Lottie for browser animations: https://lottiefiles.com/
• https://mjml.io/ for easier email templating?
• "If()" is coming to CSS officially: https://lea.verou.me/blog/2024/css-conditionals/
• famfamfam silk: https://github.com/legacy-icons/famfamfam-silk
• famfamfam flags https://github.com/legacy-icons/famfamfam-flags
• https://www.kickstarter.com/projects/mwlucas/run-your-own-mail-server
• https://www.daily.co/ an API for video - allows upload and storage of user video
• {pcarrier} let us all brainstorm solutions to a tricky use of SVG - getting an emoji character with a known font size to sit center, reliably, within a square SVG. It is remarkably tricky!
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline
  • https://github.com/facebook/react-native/issues/4457 (seemingly unrelated)
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform - transform="translate(0 4)" as an attribute on a <text> element did a fair job but feels very much like it could be an unreliable hack
  • as a group we brainstormed other possible solutions