dysbulic 🐙 Posts - Answer Overflow

dysbulic 🐙

Posts Comments

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 4/4/2024 in #front-end

How to color text so it is visible against any background color?

35 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 2/12/2024 in #back-end

Cookie Confusion

I'm using iron-session to store the information necessary for ConnectKit's Sign-In With Ethereum (SIWE) to work on a GitHub pages hosted site backed by Supabase edge functions. (ConnectKit expects to have access to a /session endpoint that returns the authenticated user's Ethereum address.) iron-session stores session information as an encrypted string sent back and forth as a cookie. The problem I'm having is if SameSite is set to Lax or Strict, I get an error:

This attempt to set a cookie via a set-cookie header was blocked because it had a SameSite="Lax" attribute but came from a cross-site response which was not a response to a top-level navigation.

This is because the Supabase edge functions run on a randomuid.supabase.co host. If I set SameSite to None, I can get the cookie to go through, but I know browsers are increasingly restricting third-party cookies. Anyone have a suggestion as to how I should restructure my code? The obvious solution would be to use Supabase's session, but because I'm using SIWE, I don't think I have access to it. The Google page on deprecation of third-party cookies lists a few technological alternatives, probably using partitioned cookies is the way to go.

1 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 1/18/2024 in #back-end

My Svelte app compiles, but dies on loading. ⸘Why‽

I'm working on my first Svelte app, & it dies in the browser with:

Uncaught Error: No element `#globe` found.
    at instance (App.svelte:5:7)
    at init (Component.js:135:5)
    at new App (App.svelte:32:31)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<App> (proxy.js:349:11)
    at main.ts:4:13

Uncaught Error: No element `#globe` found.
    at instance (App.svelte:5:7)
    at init (Component.js:135:5)
    at new App (App.svelte:32:31)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<App> (proxy.js:349:11)
    at main.ts:4:13

I've defined a <article id="globe"> in the Svelte app where this script is running.

5 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 9/10/2023 in #front-end

How to get an element to fit within its parent?

I'm working on a simple layout: https://codepen.io/u3b4/pen/gOZmKmw The basic structure is something like:

<main>
  <section class="top">
    <menu>…</menu>
    <video/>
  </section>
  <section class="bottom">
    <div class="bar"/>
  </section>
</main>

<main>
  <section class="top">
    <menu>…</menu>
    <video/>
  </section>
  <section class="bottom">
    <div class="bar"/>
  </section>
</main>

What I want to do is put a max-width: 100svw & max-height: 100svh on the main element, and then have the children resize to fit within a single screen. I'm using a columnar flexbox on main and a regular flexbox on .top. Currently the video is way too big. I've tried object-fit: contain, but that was no good. Can someone point me in the right direction?

5 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 7/25/2023 in #os-and-tools

Is this a bug in Chrome *(`@supports (animation)` for a SVG favicon)*?

I have the following SVG as my favicon on https://bafybeihfwqwlluejiuskhmgdcq7sme54m4ewtzfluodr2duj3yokjzyehe.ipfs.dweb.link/

<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @font-face {
        font-family: 'Battle Skill';
        /* `url()` pointing to a external file doesn't work in Firefox favicon. */
        src: url('data:font/woff2;base64,…'); /* omitted b/c it's 300KiB */
      }

      text {
        fill: #e4711b;
        font-family: 'Battle Skill';
        font-size: 415px;
        paint-order: stroke fill markers;
        stroke-width: 10;
        stroke: #00ff19;
        animation: scroll 5s ease-in 0s infinite;
      }

      @keyframes scroll {
        0% { transform: translateX(0px) }
        10% { transform: translateX(0px) }
        20% { transform: translateX(-200px) }
        30% { transform: translateX(-200px) }
        45% { transform: translateX(-425px) }
        55% { transform: translateX(-425px) }
        70% { transform: translateX(-575px) }
        80% { transform: translateX(-575px) }
        100% { transform: translateX(0px) }
      }

      rect { fill: green }

      @supports (not(animation: scroll)) {
        text { animation: none }
        rect { fill: red }
      }
    </style>
  </defs>
  <title>MBTI Ligature</title>
  <rect width="300" height="300"/>
  <text x="-3.172616" y="280.16232">MBTI</text>
</svg>

<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @font-face {
        font-family: 'Battle Skill';
        /* `url()` pointing to a external file doesn't work in Firefox favicon. */
        src: url('data:font/woff2;base64,…'); /* omitted b/c it's 300KiB */
      }

      text {
        fill: #e4711b;
        font-family: 'Battle Skill';
        font-size: 415px;
        paint-order: stroke fill markers;
        stroke-width: 10;
        stroke: #00ff19;
        animation: scroll 5s ease-in 0s infinite;
      }

      @keyframes scroll {
        0% { transform: translateX(0px) }
        10% { transform: translateX(0px) }
        20% { transform: translateX(-200px) }
        30% { transform: translateX(-200px) }
        45% { transform: translateX(-425px) }
        55% { transform: translateX(-425px) }
        70% { transform: translateX(-575px) }
        80% { transform: translateX(-575px) }
        100% { transform: translateX(0px) }
      }

      rect { fill: green }

      @supports (not(animation: scroll)) {
        text { animation: none }
        rect { fill: red }
      }
    </style>
  </defs>
  <title>MBTI Ligature</title>
  <rect width="300" height="300"/>
  <text x="-3.172616" y="280.16232">MBTI</text>
</svg>

In Firefox, I get an animated favicon. In Chrome, I get just the first letter, on a green background, no animation. In Brave, I just get a green square, no letters. I'm using @supports (not(animation: scroll)) to try and identify environments that don't support @keyframes, but it doesn't match any of the browsers. Shouldn't it?

2 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 7/19/2023 in #front-end

TypeScript `|` Combinator

I have the following code:

ceramic.did = new DID({
  provider: threeID.getDidProvider(),
  resolver: {
    ...get3IDResolver(ceramic), // returns a ResolverRegistry
    ...getKeyResolver(),        // returns a ResolverRegistry
  } as ResolverRegistry,
});

ceramic.did = new DID({
  provider: threeID.getDidProvider(),
  resolver: {
    ...get3IDResolver(ceramic), // returns a ResolverRegistry
    ...getKeyResolver(),        // returns a ResolverRegistry
  } as ResolverRegistry,
});

And, TypeScript is giving me the following error:

Type 'ResolverRegistry' is not assignable to type 'Resolver | ResolverRegistry | undefined'.
  Type 'ResolverRegistry' is missing the following properties from type 'Resolver': registry, cache, resolvets(2322)
(property) resolver?: Resolver | ResolverRegistry | undefined

Type 'ResolverRegistry' is not assignable to type 'Resolver | ResolverRegistry | undefined'.
  Type 'ResolverRegistry' is missing the following properties from type 'Resolver': registry, cache, resolvets(2322)
(property) resolver?: Resolver | ResolverRegistry | undefined

I thought that let pet: Cat | Dog means I can assign either a Cat or Dog to it. Is that not right?

2 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 7/18/2023 in #front-end

Why is the height of my body 0px?

I'm playing around with a personality type scoring interface. For some reason, the <body> and #root (it's a Next.js app) have a calculated height of 0px. https://bafybeigigh6p2fcpfqmck32vkpi3i3akknmh5sbabtvupbiknfzqrkw4ha.ipfs.w3s.link/ Anyone have any suggestions?

5 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 6/13/2023 in #front-end

Horizontal Accordion of Links

10 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 4/4/2023 in #os-and-tools

Virtual PulseAudio device that will run all my speakers simultaneously doesn't work. 🦠

1 replies

KPCKevin Powell - Community

•Created by dysbulic 🐙 on 3/1/2023 in #front-end

How to theme when using CSS modules?

So, I'm currently working on a pitch to dig deep into the guts of https://metagame.wtf and tear out all the Chakra UI. Replace it instead with semantic HTML & class and id-based matched CSS modules as parsed by whatever. The visual appearance of the page is contained solely in external CSS files, the structural appearance in the markup. So, a pair of programmers picks some set of issues to forward. They begin their session with a 30-minute overlap with the previous pair where they hand-off development tasks. And it just hands team to team in a single line through history. The problem is I would like to store styles as metadata in NFTs. Just JS-in-CSS style JSON-formatted styles. I want to insert the contents of that file into the CSS cascade giving it as much descriptive power as possible. So you can redraw your site to your liking. How would that work with CSS modules? You're not generating semantic tag classes & ids, you're creating something to get munged to get the program to work like we want. It is a hack. However, when combined with nested selectors and semantic matching, it is a really powerful way to target styles only to specific portions of the page. What I really need, I guess is that when I create a classes entry for a CSS module I need both the generated classname to pull in the files I've defined, but also the unaltered semantic name so that the user stylesheet can match on it (which is, again, stored in the NFT's metadata).

2 replies

Gaming

Programming