ZeLinguist Comments - Answer Overflow

ZeLinguist

•Created by codefork on 10/8/2024 in #questions

Resources for typescript error handling

Make it a habit to enable ESLint and fix every red squiggle as you encounter each one. Each error is different, which is why Google is the most sought after skill. Remember, ESLint will make it easy for React compiler to optimize your code.

3 replies

TTCTheo's Typesafe Cult

•Created by ZeLinguist on 10/24/2024 in #questions

Next.js 15 + Turbopack breaks TailwindCSS?

UPDATE: I opened localhost:3000 on Firefox instead of Safari and the TailwindCSS colors get applied instantly. Please check whether you can replicate the same behavior.

2 replies

TTCTheo's Typesafe Cult

•Created by utopia on 4/24/2024 in #questions

Tutotial - What settings to choose

1. Use TypeScript IF AND ONLY IF you're familiar with JavaScript. Learn TypeScript as soon as possible (after learning JavaScript). If you don't listen to me, you'll spend more time debugging type errors than building apps. 2. Use TailwindCSS IF AND ONLY IF you're familiar with CSS. Migrate from CSS to TailwindCSS after you start hating thinking of class names. 3. Use tRPC IF AND ONLY IF you're familiar with REST AND you genuinely need type-safety on the backend. 4. Use Drizzle because it doesn't abstract SQL as much as Prisma does. ORMs betters developer experience at the expense of performance. 5. Use the App router because past versions will deprecate. 6. Deploy PostgreSQL with Vercel using Vercel Postgres. The t3 stack lets you use one database for all your projects because it prefixes your table names with your project name. You can also deploy SQLite with Turso.

4 replies

TTCTheo's Typesafe Cult

•Created by ZeLinguist on 4/24/2024 in #questions

HELP ME w/ SIMPLE CSS/FLEXBOX

ANSWER: follow the cascade up and keep defining the height of the (grand)parent(s) of what you want to grow. Make sure that you apply flex everywhere you grow because grow is a flexbox class.

<main className="h-screen">
  <ResizablePanelGroup direction="horizontal" className="">
    <ResizablePanel defaultSize={25} className="">
      <section className="flex h-full flex-col space-y-3 p-3">
        <div className="flex items-center space-x-1">
          <DashboardIcon className="h-7 w-7" />
          <p className="text-xl">My Library</p>
        </div>
        <ScrollArea className="grow">
          <section className="space-y-3">
            <div className="flex items-center space-x-2 rounded-xl p-2 hover:bg-muted">
              <Skeleton className="h-14 w-14 rounded-xl" />
              <Skeleton className="h-4 w-20" />
            </div>
          </section>
        </ScrollArea>
      </section>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={75}>
      <nav className="flex items-center justify-between p-3">
        <div className="flex items-center space-x-2">
          <Image
            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
            src={SpotifyLogo}
            alt="Spotify Logo"
            width={28}
            height={28}
          />
          <p className="text-2xl">SpotiBye</p>
        </div>
        <Link href={"/"}>
          <Button>Sign Out</Button>
        </Link>
      </nav>
      {children}
    </ResizablePanel>
  </ResizablePanelGroup>
</main>;

<main className="h-screen">
  <ResizablePanelGroup direction="horizontal" className="">
    <ResizablePanel defaultSize={25} className="">
      <section className="flex h-full flex-col space-y-3 p-3">
        <div className="flex items-center space-x-1">
          <DashboardIcon className="h-7 w-7" />
          <p className="text-xl">My Library</p>
        </div>
        <ScrollArea className="grow">
          <section className="space-y-3">
            <div className="flex items-center space-x-2 rounded-xl p-2 hover:bg-muted">
              <Skeleton className="h-14 w-14 rounded-xl" />
              <Skeleton className="h-4 w-20" />
            </div>
          </section>
        </ScrollArea>
      </section>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={75}>
      <nav className="flex items-center justify-between p-3">
        <div className="flex items-center space-x-2">
          <Image
            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
            src={SpotifyLogo}
            alt="Spotify Logo"
            width={28}
            height={28}
          />
          <p className="text-2xl">SpotiBye</p>
        </div>
        <Link href={"/"}>
          <Button>Sign Out</Button>
        </Link>
      </nav>
      {children}
    </ResizablePanel>
  </ResizablePanelGroup>
</main>;

2 replies

Gaming

Programming