events/2024-08-27-front-end-study-hall

Front End Study Hall #009 was an IndieWeb meetup on Zoom held on 2024-08-27.

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

Front End Study Hall #009

August 27, 2024

Participants

• Joe Crawford
• to2ds
• Nick Simson
• Dr. Matt Lee
• benji
• capjamesg
• Tantek Çelik

Notes

• Joe Crawford's background today is an homage to Charli XCX's album "brat" which came out a few months ago. CodePen for the background: https://codepen.io/artlung/full/eYwKoxB - a similar background got a nice laugh at IWC Portland 2024. https://artlung.com/blog/2024/08/25/post-xoxo-ramble/
• SASS
  • useful for organzing stylesheets on your website, can be used to effectively concatenate and compile stylesheets
  • Joe Crawford uses phpStorm - and the watcher uses Compass SASS to compile http://beta.compass-style.org/
  • We compile and contenate CSS to reduce overall filesize down the wire
  • capjamesg uses the metric "Could I access the site reasonably on train wifi?"
• Rasmus made a website to run in late 90s browsers like IE and Navigator: http://1998.rsms.me/ (SSL not supported)
• starting-style, dialog, popover
  • starting-style; https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style - is a new and broadly available feature in CSS to set initial styles that can apply for an element that is made visible on user or script action
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  • https://hidde.blog/popover-semantics/
• On deciding what web platform features we can use
  • Often the metric is "will the browsers that my users/audience use be able to understand the technology?
  • The "i don't want to get fired" metric: don't deploy a feature to production with poor support
  • Some links that help evaluate compatibility
    • https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility
    • https://web.dev/baseline
    • https://webstatus.dev/ has a nicely sortable table — caveat, features in that table could be proposals or could be actual standards (with proper specs, tests), or somewhere in between
  • will I get fired for using this feature (which then doesn't work in some browsers) ?
  • can I depend on it now to work for users?
  • can I depend on it to keep working for the next month, year etc.?
  • mostly no for professional sites, but yes for personal sites, where longevity is more personally important
• Topic: Can a Web Component get built in 15 minutes when the proctor has not prepared and is tired from attending XOXO?
  • Question 1: Are hypens required in web component tags - yes they are
  • https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
  • After the meeting, {artlung} was able to get a blink tag working in this CodePen after another 20 minutes or so: https://codepen.io/artlung/pen/RwzJmLz
• Namespaces, prefixes:
  • CSS prefixing in design systems: https://designsystem.digital.gov/how-to-use-uswds/
  • https://github.com/uswds/uswds
  • https://github.com/uswds/uswds/tree/develop/src/stylesheets/packages
• Future ideas:
  • use cases for knowing the maturity of a spec?