jcayzac Posts - Answer Overflow

jcayzac

Explore posts from servers

•Created by jcayzac on 8/14/2024 in #front-end

What `rel` value for miscellaneous feeds?

rel="alternate" is only valid if the feed is an alternate representation of the current document. My documents each serve a few dozen feeds for the user to pick from, and I wonder what rel I should use for those.

6 replies

KPCKevin Powell - Community

•Created by jcayzac on 8/10/2024 in #front-end

Y offset when toolbar is visible (Chrome Android only)

When the toolbar is visible, my circle's center's Y position is above the clip location by an amount that seems equal to the height of the toolbar. When the toolbar auto-hides during scroll, the circle's center is at the right place. It's only on Android, not on desktop even when enabling toolbar autohide.

const { clientX: x, clientY: y } = e as MouseEvent
const { clientWidth, clientHeight } = document.documentElement
const clipPath = [0, Math.hypot(Math.max(x, clientWidth - x), Math.max(y, clientHeight - y))].map(r => `circle(${r}px at ${x}px ${y}px)`)

await document.startViewTransition(async () => commit()).ready
await document.documentElement.animate({ clipPath }, {
  duration: 600,
  easing: 'ease-in',
  pseudoElement: '::view-transition-new(x-lightdark)',
}).finished

const { clientX: x, clientY: y } = e as MouseEvent
const { clientWidth, clientHeight } = document.documentElement
const clipPath = [0, Math.hypot(Math.max(x, clientWidth - x), Math.max(y, clientHeight - y))].map(r => `circle(${r}px at ${x}px ${y}px)`)

await document.startViewTransition(async () => commit()).ready
await document.documentElement.animate({ clipPath }, {
  duration: 600,
  easing: 'ease-in',
  pseudoElement: '::view-transition-new(x-lightdark)',
}).finished

1 replies

KPCKevin Powell - Community

•Created by jcayzac on 8/9/2024 in #front-end

MPA element view transitions that don't animate forward?

What could cause view transitions to be ignored when navigating to another page, yet work as expected when navigating back ? All my view transitions are critical css and use unique ids. If I try to debug them in devtools then they start working. It's weird.

3 replies

KPCKevin Powell - Community

•Created by jcayzac on 8/2/2024 in #front-end

Is 'sizes' required when using w in 'srcset' ?

MDN says so, although I see a lot of real-world examples that do away with it. What happens when no 'sizes' is present. Will the browser completely ignore the srcset, or pick a size based on the current layout size of the img element (scaled by the display density) ?

4 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/29/2024 in #front-end

FOUT

Apart from using system fonts, is there any way in 2024 to avoid FOUT while keeping Lighthouse happy? Inline SVG fonts subsetted for the critical content, maybe (so that the font initially used e.g. for the header's title only contains the dozen or so characters of the title) ?

31 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/29/2024 in #front-end

How to disable smooth scrolling during page navigation?

Either CSS-only or using JS is fine.

3 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/29/2024 in #front-end

Tailwind Typography's weird values

Tailwind uses some em values with lots of digits, e.g. 0.5714286em. Where do those come from? Is that some golden ratio-based thing? I think 0.6em probably looks the same for any reasonable font-size at any resolution.

11 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/27/2024 in #front-end

Ordered list base styles: is there a better way?

OK, this works, but it's ugly. Is there a less ugly way to implement some default chain of styling decimal > letters > romans > decimal… ?

:where(ol) {
  list-style-type: decimal;
  &[type="A" s] {
    list-style-type: upper-alpha;
  }
  &[type="a" s] {
    list-style-type: lower-alpha;
  }
  &[type="I" s] {
    list-style-type: upper-roman;
  }
  &[type="i" s] {
    list-style-type: lower-roman;
  }

  :where(ol) {
    list-style-type: lower-alpha;
    :where(ol) {
      list-style-type: lower-roman;
      :where(ol) {
        list-style-type: decimal;
        :where(ol) {
          list-style-type: lower-alpha;
          :where(ol) {
            list-style-type: lower-roman;
            :where(ol) {
              list-style-type: decimal;
            }
          }
        }
      }
    }
  }
}

:where(ol) {
  list-style-type: decimal;
  &[type="A" s] {
    list-style-type: upper-alpha;
  }
  &[type="a" s] {
    list-style-type: lower-alpha;
  }
  &[type="I" s] {
    list-style-type: upper-roman;
  }
  &[type="i" s] {
    list-style-type: lower-roman;
  }

  :where(ol) {
    list-style-type: lower-alpha;
    :where(ol) {
      list-style-type: lower-roman;
      :where(ol) {
        list-style-type: decimal;
        :where(ol) {
          list-style-type: lower-alpha;
          :where(ol) {
            list-style-type: lower-roman;
            :where(ol) {
              list-style-type: decimal;
            }
          }
        }
      }
    }
  }
}

5 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/25/2024 in #front-end

How to align 0..N items to start and 1 to end, with flex?

12 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/25/2024 in #front-end

How to avoid text to wrap when there's space, using flex or grid?

2 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/23/2024 in #front-end

How to disable view transitions on elements when I'm animating in startViewTransition?

So, I have view-transition-name here and there on various elements of my content, so that when I move from page to page they transition nicely and all. I just added an intra-page view transition on my theme-toggling button so that when I switch between light and dark, the new color scheme appears to reveal itself from the button. It works well, except the elements that have a view-transition toggle between light/dark immediately, which results in flicker in those elements: the element changes its colors to match the new color palette while on the page with the old theme, so it's basically invisible until the area with the new theme applied expands to cover it. It seems view transitions are unaffected by transition-property, so trying to restrict transitions only to layout-related properties on those elements had no effect. Is there maybe a pseudo selector triggered while same-page view transitions are happening? Any other idea? Here's a slowed-down video. The date-time on the left has a cross-page view transition name and is affected.

29 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/22/2024 in #front-end

Target logical heading level with CSS?

In the following HTML,

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

…heading 1 has a "resolved" heading depth of 1, and heading 3 of 4. However, the latter is not styled using the h4 selector, and still responds to the h1 selector. Is there a way to target headings by their logical level rather than their tag name?

9 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/21/2024 in #front-end

Table of contents in a separate document: yay or nay?

Apart from large, wide screens where it can reside in the margins, I find a TOC very intrusive when it's inlined in the document and absurdly complex to manage as a modal in the DOM for what it provides. What's everyone's opinion on simply making the TOC its own (non-indexed) document, and just link to it from a regular <a rel="contents nofollow" href="./toc.html">Table of Contents</a> link? I can see only pros: no need for a modal, navigation preserves scroll positions naturally, transitions are still possible…

3 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/20/2024 in #front-end

relative color syntax doesn't work with light-dark()?

My color palette is defined using light-dark(), e.g.

--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));

--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));

If I use relative color syntax, e.g.

background-color: rgb(from var(--bg-1) r g b / .5)

background-color: rgb(from var(--bg-1) r g b / .5)

…it doesn't set it. If I declare --bg-1 to be something fixed like #f1f1f1 then it works. I tried in the latest versions of chrome and firefox. Am I doing it wrong?

7 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/19/2024 in #front-end

What's the downside to using custom (non-registered) elements?

Things like <foo>, <bar> etc just behave like <div> and can be styled based on tag name instead of classes. Is there any downside, really?

5 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/19/2024 in #front-end

A11Y skip-to-content jumps over main navigation —how to navigate, then?

Something I find confusing: if skip-to-main content is the first thing on a page, and it jumps over any navigation bar to go directly to the main content, how is someone using assistive technology ever made aware that the navigation links exist?

9 replies

KPCKevin Powell - Community

•Created by jcayzac on 7/19/2024 in #front-end

Container queries: are "em" units computed using container ems or contained ems?

In @container (width > 15em), whose em is the width in? I think it's in contained ems (i.e. those of the current element), as it seems the alternative wouldn't make any sense, but I can't find any confirmation.

4 replies

DDeno

•Created by jcayzac on 5/15/2024 in #help

shebang and no file extension: how do I turn Typescript on?

I have scripts with a #!/usr/bin/env deno run shebang, but they execute as javascript —adding types lead to parsing errors. Can I enable typescript with a command line parameter to deno run?

3 replies

DDeno

•Created by jcayzac on 5/1/2024 in #help

Where has std/hash/sha3.ts gone?

Basically what the title says. This was removed from std/ at some point, but I can't find the current location of the module anymore (looking it up on deno.land returns nothing).

6 replies

DDeno

•Created by jcayzac on 1/10/2024 in #help

How to build a Response object with the 'url' property set

Writing unit tests. Some functions parse Response objects. How do I create some where the url property isn't an empty string? Crafting statusText and headers to mimick a server response from a certain host doesn't seem to work.

4 replies

Gaming

Programming