Frontend

[nichoth]

frontend

• Flash of Undefined Custom Elements (FOUCE)
  • waiting for customElements.whenDefined()

await Promise.allSettled([
    customElements.whenDefined('my-button'),
    customElements.whenDefined('my-card'),
    customElements.whenDefined('my-rating')
]);

---

dialog element

• scottohara.me — Use the dialog element (reasonably)
• KittyGiraudel/a11y-dialog
• Smashing Magazine — CTA Modal: How To Build A Web Component
  • nichoth/modal — my thing, based on the Smashing Magazine one
• shoelace.style

misc

---

• Instant Loading Web Apps With An Application Shell Architecture — Addy Osmani
• islands architecture
• fresh — the framework for deno
• Things you forgot (or never knew) because of React
• accessible components

---

• Front-End solution: progress indicator

signals

• mastodon.social/@developit — Persisted Signals
  • persisted signal gist
• signal-utils — gist

dialog element

• Dialog :: Stuff browsers give for free
  A nice video explanation of dialog element.

• MDN dialog docs

• Hidde's Blog — Dialogs and popovers seem similar. How are they different?

In addition to the element, HTML now has a popover attribute. This post goes into the differences between dialogs, popovers, overlays and disclosure widgets. We'll also look at what it means when an element is modal. All somewhat related concepts

accordion

Use the details HTML element.

• my component
• Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion
• and

  : a native HTML accordion

The details and summary elements, again

If removing this marker so you can insert your own custom chevron or other visual expanded/collapsed state marker, it will actually make the state of the widget unclear with Firefox and VoiceOver, since the announcement of the default triangle direction is the only way state is communicated in that pairing.

event.currentTarget

• Event currentTarget to the rescue

[currentTarget] will always refer to the element which you attached the event to

[nichoth]

vite + file paths

file paths in your deployed website

see for example, the identity project

The Scenario
You are using vite to bundle the site, and deploying to Github Pages. That means that when you deploy, the website will be in a sub-path, like https://ssc-half-light.github.io/identity/. This disrupts path resolution in the app. ie, your index.html file has a path like src="/assets/index-a28f996c.js", but that doesn't work because your entire website is deployed to a directory under identity/.

the solution
In the script that calls vite, add an option for the base path: vite build --base=/identity/. This way the paths still work locally, when you call the command vite, and in production they are correct too.

[nichoth]

HTML

• Templates for Dynamic HTML Elements

[nichoth]

CSS

• CSS Nesting is Here
• Surprising Facts About New CSS Selectors
• panda-css
• Designing Beautiful Shadows in CSS — Josh W Comeau
• shoelace — A collection of professionally designed, every day UI components built on Web standards. Works with all frameworks as well as regular HTML/CSS/JS.
  • shoelace.style
• 12 Modern CSS One-Line Upgrades

---

• nue-glow — syntax highlight thing for markdown

---

• Every Layout

[nichoth]

web components

2024-09-10

• Improving the Screen Reader Experience for Learn WCs
• masonry-gallery Web Component
• What is a Component Library and Should You Build Your Own?

---

• HTML web components
• gomakethings / html web components
• The elevator pitch for Web Components
• shoelace — A forward-thinking library of web components.

---

• AN ATTEMPTED TAXONOMY OF WEB COMPONENTS
• HTML web components

web components + SSR

• HTML Web Components on the Server Are Great

there are now several tools designed to perform tasks like this using ordinary HTML syntax instead.

they perform "Server Side Rendering" of HTML Web Components, allowing you to compose complex, dynamic pages from components that are delivered to the browser as meaningful, resilient HTML.

• See tonic SSR example
• Why we Server Side Render Web Components
• enhance.dev
• 11ty/webc

[nichoth]

state machines

• developit/unistore — 350b / 650b state container with component actions for Preact & React

[nichoth]

SPA

• Understanding single page apps & client-side routing
• Paint Holding - reducing the flash of white on same-origin navigations

[nichoth]

a11y

• collection of accessible components and patterns from Melanie Sumner
• another similar collection from Scott O’Hara
  • accordion demo is cool

[nichoth]

web components

• component.gallery + See Gitbub

CSS

Use web component selectors

sl-dialog::part(close-button) {
  display: none;
}

[nichoth]

CSS grid

• An Interactive Guide to CSS Grid

minmax function

the min value can’t be a flex value

---

• Grid by Example — Everything you need to learn CSS Grid Layout
• gridbyexample.com/examples
• A responsive grid layout with no media queries

[nichoth]

CSS columns

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web.

• CSS tricks — columns
• column-count
• MDN — Using multi-column layouts
• Basic concepts of multi-column layout

Specifying both number and width of columns

If you specify both the properties on a multicol container, then column-count will act as a maximum number of columns.