events/2024-05-07-front-end-study-hall

Front End Study Hall #002 was an IndieWeb popup on Zoom held on 2024-05-07.

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

Participants

• Joe Crawford
• Mark Sutherland
• Ros
• benji
• Tracy Durnell
• mandaris
• Kevin Marks
• gRegor Morrill
• Add yourself here… (see this for more details)

Reminders

• Code of Conduct code-of-conduct
• What is this? Front End Study Hall

Notes

Responsive hamburger menus

• • popover - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover
• https://web.dev/blog/popover-api
  • Popover Polyfill: https://github.com/oddbird/popover-polyfill
  • CodePen experimenting with a popover https://codepen.io/artlung/pen/gOJYxxj?
  • Relevant issue discussing opening popover from CSS: https://github.com/openui/open-ui/issues/771

• CSS shorthand property `background` https://developer.mozilla.org/en-US/docs/Web/CSS/background
• https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

• old-school way to do it with a checkbox and label and adjacent selector https://codepen.io/kevinmarks/pen/pomzrZv
  • Forked version including flexbox: https://codepen.io/marksuth/pen/MWdWBjQ

gRegor Morrill: No hamburger icon, but I set up a CSS-only, no-form version using `:target` selector:

• https://gregorlove.com/2020/02/my-indiewebcamp-austin-2020-projects/
• via tutorial: https://shellcreeper.com/full-css-responsive-navigation-toggle-no-javascript/

Scroll animation styles

• https://www.akaivyc.com/
  • https://codepen.io/hexagoncircle/pen/PXVEVZ
  • https://codepen.io/borntofrappe/pen/NWPGvjW
• Scroll https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy
• Greensock has a js toolkit to do subtle scroll effects https://gsap.com/scroll/
• d3.js has a lot of power for scrolling things too https://vallandingham.me/scroller.html

Locating images in source

• Variety of ways to include image from to CSS to JS
• gRegor Morrill in our test with vogue.com, using Inspector in Chrome on Windows, I found if I hovered over the `<source>` element, over each image URL in the `srcset` attribute, the one that was displayed ("current") showed a popover with preview, dimensions, and URL of the "Current Source". Screenshot: https://imgur.com/a/jDyNHUx
• We learned about https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc as a result

Dark mode

• Dark mode - is this a good method? https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/
  • Basic dark mode using `light-dark()` function https://caniuse.com/?search=light-dark https://codepen.io/artlung/pen/OJYLjKY
  • Can I Use - https://caniuse.com/ - shows support in different browsers
  • Jeremy Keith at IndieWebCamp https://adactio.com/journal/15941 and later toggling: https://adactio.com/journal/17086

Topics to discuss

• Something flexy I don't know what it would be called - pulling a date out of a list (live code!)
  • example: https://read.cv/iggy - date is in another column at full width, collapses inline at mobile width
  • flex
  • grid-area with media queries
  • https://codepen.io/benjifs/pen/wvbwrMv
  • box sizing nuances (margin versus box width) https://every-layout.dev/rudiments/boxes/

• Browser support (specifically testing on older browsers)
  • need help troubleshooting an issue someone told me about but I can't reproduce I suspect is browser related ;)