ZeLinguist Comments - Answer Overflow

ZeLinguist

•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