Things explored & learned

• Exclusive Accordion
  • https://codepen.io/web-dot-dev/pen/BaMbKyM
  • https://codepen.io/web-dot-dev/pen/XWvBZNo
• Popover API
  • Popover API lands in Baseline
  • Popover API is Here
  • MDN Popover API examples
  • Chrome for Developers - 079: Popover and Dialog
  • Progressively Enhanced Popover Toggletips
• dialog
• CSS Anchor Positioning
  • https://codepen.io/monknow/pen/jOgxmJg
• Scroll-Driven Animations
  • A bunch of demos and tools to show off Scroll-driven Animations
• Full-bleed layout with modern CSS
  • Popping Comments With CSS Anchor Positioning and View-Driven Animations
  • Anchor tool
  • Una's demos
• The :user-valid and :user-invalid pseudo-classes
  • https://codepen.io/web-dot-dev/pen/wvNJGrO
• Consolidate CSS Grid
  • CSS Grid Areas
• importmap
  • https://web.dev/blog/import-maps-in-all-modern-browsers
  • https://www.youtube.com/watch?v=B_cJHBiY47M
• Intl APIs
  • JS Intl API Examples - Dependency Free Formatting
  • Intl.DurationFormat
• Local first web applications
  • Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB
  • https://localfirstweb.dev/
  • https://www.localfirst.fm/
  • https://www.powersync.com/blog/local-first-is-a-big-deal-especially-for-the-web
  • https://squads.com/blog/building-better-apps-with-local-first-principles

Popover versus modal dialog

Source

The modal <dialog> element

• Opened with dialog.showModal().
• Closed with dialog.close().
• Makes the rest of the page inert.
• Does not support light-dismiss behavior.
• You can style the open state with the [open] attribute.
• Semantically represents an interactive component that blocks interaction with the rest of the page.

The [popover] attribute

• Can be opened with a declarative invoker (popovertarget).
• Closed with popovertarget (auto popover) or popovertargetaction=hide (manual popover).
• Does not make the rest of the page inert.
• Supports light-dismiss behavior.
• You can style the open state with the :popover-open pseudo-class.
• No inherent semantics.