events/2024-05-07-front-end-study-hall
Front End Study Hall #002 was an IndieWeb popup on Zoom held on 2024-05-07.
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
- 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/
- 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 ;)