julius Posts - Answer Overflow

julius

Posts Comments

TTCTheo's Typesafe Cult

•Created by julius on 11/13/2023 in #questions

WebRTC Client <-> Server

158 replies

TTCTheo's Typesafe Cult

•Created by julius on 3/26/2023 in #questions

css sibling selector

5 replies

TTCTheo's Typesafe Cult

•Created by julius on 1/26/2023 in #questions

Updating linear gradient using JavaScript (React)

Is there a simple way to update a linear gradient background using javascript? Right now i have it like this in my CSS:

:root {
  --bg-gradient: linear-gradient(
    25deg,
    hsl(240deg 15% 13%) 0%,
    hsl(233deg 22% 15%) 11%,
    hsl(226deg 30% 17%) 23%,
    hsl(221deg 40% 18%) 36%,
    hsl(215deg 52% 19%) 48%,
    hsl(221deg 62% 26%) 61%,
    hsl(238deg 46% 36%) 74%,
    hsl(264deg 54% 40%) 87%,
    hsl(287deg 84% 36%) 100%
  );
}
body {
  background-image: var(--bg-gradient);
}

:root {
  --bg-gradient: linear-gradient(
    25deg,
    hsl(240deg 15% 13%) 0%,
    hsl(233deg 22% 15%) 11%,
    hsl(226deg 30% 17%) 23%,
    hsl(221deg 40% 18%) 36%,
    hsl(215deg 52% 19%) 48%,
    hsl(221deg 62% 26%) 61%,
    hsl(238deg 46% 36%) 74%,
    hsl(264deg 54% 40%) 87%,
    hsl(287deg 84% 36%) 100%
  );
}
body {
  background-image: var(--bg-gradient);
}

and the idea is to update the --bg-gradient var to any valid gradient string that i take in from user input. this was my initial idea:

// from input
const editBgGradient = `linear-gradient(
  45deg,
  hsl(240deg 100% 20%) 0%,
  hsl(290deg 100% 29%) 23%,
  hsl(340deg 100% 37%) 46%,
  hsl(30deg 100% 46%) 66%,
  hsl(47deg 95% 56%) 82%,
  hsl(31deg 82% 66%) 91%,
  hsl(16deg 60% 75%) 97%,
  hsl(0deg 17% 83%) 100%
)`

// run as an event handler
const saveBgGradient = () => {
  document.documentElement.style.setProperty("--bg-gradient", editBgGradient);
  setTree({ ...tree, bgGradient: editBgGradient });
};

// from input
const editBgGradient = `linear-gradient(
  45deg,
  hsl(240deg 100% 20%) 0%,
  hsl(290deg 100% 29%) 23%,
  hsl(340deg 100% 37%) 46%,
  hsl(30deg 100% 46%) 66%,
  hsl(47deg 95% 56%) 82%,
  hsl(31deg 82% 66%) 91%,
  hsl(16deg 60% 75%) 97%,
  hsl(0deg 17% 83%) 100%
)`

// run as an event handler
const saveBgGradient = () => {
  document.documentElement.style.setProperty("--bg-gradient", editBgGradient);
  setTree({ ...tree, bgGradient: editBgGradient });
};

But nothing happens when this function runs - the variable isn't updated. I'm guessing it can't parse the string as a linear-gradient function or whatnot? I saw this but that looks like a hassle: https://www.w3schools.com/tags/canvas_createlineargradient.asp. Is there any other way? Seems like a simple problem

5 replies

TTCTheo's Typesafe Cult

•Created by julius on 12/2/2022 in #questions

Radix UI Select as Form Input

Can i?

52 replies

TTCTheo's Typesafe Cult

•Created by julius on 11/29/2022 in #questions

Tool to hunt down Memory Leaks

Is there a tool out there anyone recommend to hunt down memory leaks? Nextjs crashing after some time (less memory = faster crash) and I can’t figure out where the culprit is. T3-turbo stack project

4 replies

TTCTheo's Typesafe Cult

•Created by julius on 11/23/2022 in #questions

How do I get Tailwind Intellisense on activeProp?

3 replies

TTCTheo's Typesafe Cult

•Created by julius on 11/18/2022 in #questions

Set value based on current

Is there a shortcut for setting a value based on it's current value in Prisma, I have a field that's initially null that I would like to update in a webhook, but if it's already set i don't want to update it. Can i do this in a single query or do I have to first get the field and then update based on the response of the firrst query?

5 replies

TTCTheo's Typesafe Cult

•Created by julius on 11/15/2022 in #questions

encode uuid to be accepted by google

6 replies

TTCTheo's Typesafe Cult

•Created by julius on 11/11/2022 in #questions

Zustand Syntax & Conventions

Been experimenting with Zustand a bit and really liking the simplicity so far. Got a few questions regarding syntax and conventions(?). 1. For defining actions, do you do logic inside the set function or outside? i.e. which of these would you prefer?

export const useStore = create<Store>((set, get) => ({
  count: 0,
  decrement() {
    const count = get().count;
    console.log("sideeffect here", count);
    set({ count: count - 1 });
  },
  increment() {
    set((state) => {
      console.log("sideeffect here", state.count);
      return { count: state.count + 1 };
    });
  },
}));

export const useStore = create<Store>((set, get) => ({
  count: 0,
  decrement() {
    const count = get().count;
    console.log("sideeffect here", count);
    set({ count: count - 1 });
  },
  increment() {
    set((state) => {
      console.log("sideeffect here", state.count);
      return { count: state.count + 1 };
    });
  },
}));

2. Do you create multiple stores, namespace (if so how) the different categories of your store, or keep all in root? i.e. lets say i have a counter, and some messaging system. would you create one useCountStore and one useMessagesStore or one big store and keep like { count: { value, increment, decrement }, messages: { ... } } or just keep all state and actions in the root store object like { count, increment, decrement, listMessages ... }. I tried slicing like this: https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md#slices-pattern but it places everything in the root, would something like this (but not this cause this doesn't work) be preferred?

const useBoundStore = create<BearSlice & FishSlice>()((...a) => ({
  bear: createBearSlice(...a),
  fish: createFishSlice(...a),
}))

const useBoundStore = create<BearSlice & FishSlice>()((...a) => ({
  bear: createBearSlice(...a),
  fish: createFishSlice(...a),
}))

3. For consuming the store, is performance affected a lot when grabbing the entire store when i need a few different keys, i.e. which of these is preffered:

// 1
const count = useStore(s => s.count);
const increment = useStore(s => s.increment);
const decrement = useStore(s => s.decrement);

// 2
const { count, increment, decrement } = useStore();

// 3
const { count, increment, decrement } = useStore(s => ({
  count: s.count,
  increment: s.increment,
  decrement: s.decrement,
}));

// 1
const count = useStore(s => s.count);
const increment = useStore(s => s.increment);
const decrement = useStore(s => s.decrement);

// 2
const { count, increment, decrement } = useStore();

// 3
const { count, increment, decrement } = useStore(s => ({
  count: s.count,
  increment: s.increment,
  decrement: s.decrement,
}));

3 replies

TTCTheo's Typesafe Cult

•Created by julius on 11/7/2022 in #questions

Use Prisma Enums in Runtime Validator

Can I use Prisma's generated enums in a zod runtime validator? I have in the @prisma/client this:

export const Language: {
  EN: 'EN',
  SV: 'SV',
};

export type Language = (typeof Language)[keyof typeof Language]

export const Language: {
  EN: 'EN',
  SV: 'SV',
};

export type Language = (typeof Language)[keyof typeof Language]

the goal is to do something like

const LanguageValidator = z.enum(Language);

const LanguageValidator = z.enum(Language);

but the Language isn't a real object. is there any workarounds to do this?

3 replies

TTCTheo's Typesafe Cult

•Created by julius on 10/6/2022 in #questions

Using Mongo through Docker on Apple Silicon

Has anyone successfully run Mongo using Docker on Apple Silicon? I'm getting some weird behavior when launching a container. When I run a basic Mongo container it starts up fine, but then my prisma db push fails with the following error:

Error: MongoDB error
SCRAM failure: Authentication failed.
   0: migration_core::state::SchemaPush
             at migration-engine/core/src/state.rs:349

Error: MongoDB error
SCRAM failure: Authentication failed.
   0: migration_core::state::SchemaPush
             at migration-engine/core/src/state.rs:349

I read this is cause prisma needs a replication set, but when i add that to my compose file, the container doesn't want to initialize, and I get this in a continous loop:

{"t":{"$date":"2022-10-06T20:40:25.595+00:00"},"s":"I",  "c":"-",        "id":4939300, "ctx":"monitoring-keys-for-HMAC","msg":"Failed to refresh key cache","attr":{"error":"NotYetInitialized: Cannot use non-local read concern until replica set is finished initializing.","nextWakeupMillis":13000}}

{"t":{"$date":"2022-10-06T20:40:25.595+00:00"},"s":"I",  "c":"-",        "id":4939300, "ctx":"monitoring-keys-for-HMAC","msg":"Failed to refresh key cache","attr":{"error":"NotYetInitialized: Cannot use non-local read concern until replica set is finished initializing.","nextWakeupMillis":13000}}

This is the compose setup:

mongo:
    container_name: my-db
    image: mongo
    env_file:
      - .env.development
    volumes:
      - mongo_db:/data/db
    command: --replSet rs0 # this line here seems to be bad
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_DATABASE: ${DATABASE_NAME}

mongo:
    container_name: my-db
    image: mongo
    env_file:
      - .env.development
    volumes:
      - mongo_db:/data/db
    command: --replSet rs0 # this line here seems to be bad
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_DATABASE: ${DATABASE_NAME}

Any ideas? Anyone got prisma+mongo+docker to play nice? PS: Not my choice to use Mongo

24 replies

TTCTheo's Typesafe Cult

•Created by julius on 9/18/2022 in #questions

Intersection Observers

Can someone tell me what I'm doing wrong here? I'm trying to get this IntersectinoObserver to update other elements than the one actually being observed, when the heading is scrolled into view, i want the corresponding element in the TOC to update and change some styles on it, but i can only get the observed element to change. is this some perf thing that wont let you do this? Source: https://github.com/t3-oss/create-t3-app/blob/38fd589c3c43e21eef19ec177e78192884b79d9e/www/src/components/navigation/tableOfContents.astro Demo: https://share.cleanshot.com/xddfsF

114 replies

Gaming

Programming