ott
ott
PostsComments
TTCTheo's Typesafe Cult
Created by ott on 2/7/2024 in #questions
Creating `AudioContext` in Next.js
I've had quite a lot of trouble creating an AudioContext object in my nextjs project. I'm expanding on the ReactFlow Audio API guide https://reactflow.dev/learn/tutorials/react-flow-and-the-web-audio-api which uses ReactFlow as a UI to connect AudioNodes. I have a component that contains my ReactFlow component that I dynamically load in with {ssr: false} on a page. There's a snippet at the top of the flow file 
// flow.tsx
let ctx: AudioContext | undefined = undefined;
if (typeof window !== "undefined") {
  ctx = new AudioContext();
}
export default function Flow() {
  if (!ctx) {
    return null;
  }  
  store.setup({ctx})
  // ...
}
// flow.tsx
let ctx: AudioContext | undefined = undefined;
if (typeof window !== "undefined") {
  ctx = new AudioContext();
}
export default function Flow() {
  if (!ctx) {
    return null;
  }  
  store.setup({ctx})
  // ...
}
(that I think should only run once, but I'm not sure) 
// page.tsx
"use client";

import dynamic from "next/dynamic";

const DynamicFlow = dynamic(() => import("~/components/flow"), {
  loading: () => <div>Loading</div>,
  ssr: false,
});

export default function FlowPage() {
  return <DynamicFlow />;
}
// page.tsx
"use client";

import dynamic from "next/dynamic";

const DynamicFlow = dynamic(() => import("~/components/flow"), {
  loading: () => <div>Loading</div>,
  ssr: false,
});

export default function FlowPage() {
  return <DynamicFlow />;
}
There isn't a lot of documentation on this, I've read - https://github.com/vercel/next.js/discussions/14086 - https://stackoverflow.com/questions/70950877/next-js-typescript-window-in-not-defined In some parts of my zustand store I need to use the context 
// store.ts
// ...
const node = context.createOscillator();
// store.ts
// ...
const node = context.createOscillator();
What/where is the best way to construct an AudioContext object, and is there any way for me to always have a valid AudioContext in my zustand store?
3 replies
TTCTheo's Typesafe Cult
Created by ott on 12/16/2023 in #questions
horizontal scroll
Im trying to make a small game with a scene you can scroll horizontally on. It's meant for mobile devices in the vertical position. I'm struggling to get the css for image or background image to work the way I want it to: - the image should take up 100% of the screen height - all the extra image should be accessable by horizontal scrolling I've tried all the different background size stuff, different object fit, and overflow properties but I can't get it to work. Are there any css wizards out there who can help?
2 replies
TTCTheo's Typesafe Cult
Created by ott on 10/17/2023 in #questions
OAuth providers on vercel preview deployments with NextAuth
When vercel creates new subdomans for PR deployments, those domains aren't valid for my OAuth providers so I can't login. Has anyone got around this issue? I remember Theo saying Clerk solved this, but I'm using nextauth for this project and don't want to switch my auth provider for something like this.
4 replies
TTCTheo's Typesafe Cult
Created by ott on 1/20/2023 in #questions
What is the `:::tip` syntax in markdown called and how do I use it?
I saw it in the astro docs, but it's not part of the default markdown spec. I tried to search for it, but it's hard to search for special characters.
4 replies
TTCTheo's Typesafe Cult
Created by ott on 1/9/2023 in #questions
Python app + nextjs frontend writing to the same database
I have a python app (discord bot) that keeps track of settings/stats in a postgres database. I want to build a dashboard with the t3 stack where you can view and change those settings, but I'm worried about schema clashing with prisma. I currently use asyncpg and no ORM in my python app and plan to use prisma on my frontend. I'm early enough in development where it wouldn't be an issue to switch to prisma in my python app, but that might create more issues like schema sharing. Also, is possible to create a monorepo with a nextjs app and a python app? I couldn't find anything answers online.
11 replies
TTCTheo's Typesafe Cult
Created by ott on 12/23/2022 in #questions
Auth solution for encrypting, not hashing, passwords
I'm working on an application where a user signs up with identical credentials from another website. We then use that password to scrape that website (with permission) and display data on web and mobile apps. Are there 3rd party auth providers who allow you to encrypt a user's password instead of hashing it? I've looked around for a bit and I'm not sure if I can access a user's password from Auth0 or Clerk.dev.
15 replies
TTCTheo's Typesafe Cult
Created by ott on 11/5/2022 in #questions
check if a key is required on a zod object
is there a way to tell if a key on a zod object is required edit: is there a way to tell if a key on a zod object is required in typescript programmatically
11 replies