FleetAdmiralJakob 🗕 🗗 🗙 Posts

FleetAdmiralJakob 🗕 🗗 🗙

Explore posts from servers

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 10/6/2024 in #questions

Use eslint-plugin-react-compiler with the new ESLint flat config

Is it possible? Does the plugin support ESLint 9 and above? If it is possible how can I use it? The example only shows the way to use it with ESLint 8 and below (no flat config)

2 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 8/26/2024 in #questions

[Next.js Image Component] Cache Images between pages

I'm using Tanstack Query to dynamically fetch data that includes an image URL, which I then load using the <Image /> component. On a different page, I fetch new data, but the image URL is often the same as the one on the previous page. The issue is that the same image gets loaded twice. Is there a way to reuse the image across both pages to avoid reloading it?

7 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 8/14/2024 in #questions

Tanstack Table. flexRender

5 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 6/20/2024 in #questions

Post Quantum Encryption

Does somebody here knows a good library to use if you want post quantum encryption for your messaging app? I looked at libsignal, the implementation from signal of the signal protocol but it seems like it's only providing the frontend functions for typescript and it's only designed for the use inside signal

9 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 6/14/2024 in #questions

Does Sentry fully replace Axiom?

In Theo's latest tutorial he is not using axiom anymore and for my new project I want to know which tool might be the best one for me. Are there features that Sentry does not offer but Axiom?

2 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 5/18/2024 in #questions

shadcn/ui page reloads on form submit

I have this code to submit on enter on the form but the page reloads on the submit:

                <Form {...textMessageForm}>
                  <form
                    onSubmit={textMessageForm.handleSubmit(
                      onTextMessageFormSubmit,
                    )}
                    className="w-10/12"
                    ref={formRef}
                  >
                    <FormField
                      control={textMessageForm.control}
                      name="message"
                      render={({ field }) => (
                        <FormControl>
                          <Input
                            className="ml-4 w-full bg-secondary p-2"
                            placeholder="Message ..."
                            onKeyUp={(event) => {
                              if (event.code === "Enter") {
                                event.preventDefault();
                                formRef.current?.submit();
                              }
                            }}
                            {...field}
                          />
                        </FormControl>
                      )}
                    />
                  </form>
                </Form>

                <Form {...textMessageForm}>
                  <form
                    onSubmit={textMessageForm.handleSubmit(
                      onTextMessageFormSubmit,
                    )}
                    className="w-10/12"
                    ref={formRef}
                  >
                    <FormField
                      control={textMessageForm.control}
                      name="message"
                      render={({ field }) => (
                        <FormControl>
                          <Input
                            className="ml-4 w-full bg-secondary p-2"
                            placeholder="Message ..."
                            onKeyUp={(event) => {
                              if (event.code === "Enter") {
                                event.preventDefault();
                                formRef.current?.submit();
                              }
                            }}
                            {...field}
                          />
                        </FormControl>
                      )}
                    />
                  </form>
                </Form>

7 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 5/12/2024 in #questions

end to end encryption

Hi, I currently want to build a chat app with basic end to end encryption. Could someone show me a little bit how this should work? Like how do both participants in a chat know with what to decrypt the messages?

25 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 5/10/2024 in #questions

Next.js API Routes behaving differently on Vercel

4 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 5/9/2024 in #questions

What do you think about these videos

As I watch every video from Theo I'm confused about these two videos from DarkViper (I did not know this guy before watching these videos). What do you think about them? Seems like a profound critique. https://www.youtube.com/watch?v=m9fkdpmJD4o https://www.youtube.com/watch?v=s4BFIDYYYCA

34 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 4/21/2024 in #questions

Best WYSIWYG Editors

Any recommendations for React?

2 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 4/6/2024 in #questions

SQL/Drizzle Where Query Search Optimization

Hi, originally I wanted a fuzzy search but now I just wanted to look how far I can get with just a where query. I have a few concerns with the reads this query causes to the database. Especially I want to know if I can stop if I already have 5 via the name or if you generally have some read and performance optimizations.

ctx.db.query.city.findMany({
        limit: 5,
        where: (users, { like, or }) =>
          or(
            or(
              like(users.name, input.name + "%"),
              like(users.name, "%" + input.name),
            ),
            or(
              like(users.germanName, input.name + "%"),
              like(users.germanName, "%" + input.name),
            ),
            or(
              like(users.region, input.name + "%"),
              like(users.region, "%" + input.name),
            ),
          ),

ctx.db.query.city.findMany({
        limit: 5,
        where: (users, { like, or }) =>
          or(
            or(
              like(users.name, input.name + "%"),
              like(users.name, "%" + input.name),
            ),
            or(
              like(users.germanName, input.name + "%"),
              like(users.germanName, "%" + input.name),
            ),
            or(
              like(users.region, input.name + "%"),
              like(users.region, "%" + input.name),
            ),
          ),

9 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 4/5/2024 in #questions

Optimizing importing json into sqlite with or without drizzle

Hi guys, I have this script running over my 60k row json file and somehow this is really really slow. is there an optimized way for turso?

  const jsonData = JSON.parse(data);
  const parsedJsonData = citySchema.parse(jsonData);

  for (const city of parsedJsonData) {
    await db.insert(schema.city).values({
      id: city.id,
      lon: city.lon,
      admin1: city.admin1,
      admin2: city.admin2,
      lat: city.lat,
      country: city.country,
      name: city.name,
    });
  }

  const jsonData = JSON.parse(data);
  const parsedJsonData = citySchema.parse(jsonData);

  for (const city of parsedJsonData) {
    await db.insert(schema.city).values({
      id: city.id,
      lon: city.lon,
      admin1: city.admin1,
      admin2: city.admin2,
      lat: city.lat,
      country: city.country,
      name: city.name,
    });
  }

I'm now 15 min into this script and were able to only add 4k lines

5 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 4/5/2024 in #questions

Really fast search functionality SQLite (Turso)?????

I have a lot (150k cities) in my DB and want to build a instantly fast search (the fastest that is possible with minimal effort) is Turso the right thing to consider or are there other options that are better suited for a search functionality?

31 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/30/2024 in #questions

shadcn/ui: Why do I get the incorrect error message?

6 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/23/2024 in #questions

Playwright: How to check with considering URL Params

The thing is that my website redirects you to this URL: localhost:3000/home?cityId=... I want to just check if the first part is /home and ignore the url param. How can I do that with Playwright? Current code which not works:

await page.waitForURL("**/home");

expect(page.url()).toBe("http://localhost:3000/home");

await page.waitForURL("**/home");

expect(page.url()).toBe("http://localhost:3000/home");

11 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/22/2024 in #questions

react-hook-form: How to force lowercase characters

I want to accept a username that only consists of lowercase characters

16 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/22/2024 in #questions

Next.js: How to find out if the URL params loaded.

3 replies

TtRPC

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/15/2024 in #❓-help

trpc v11 error: The transformer property has moved to httpLink/httpBatchLink/wsLink

Just upgraded tRPC to v11 and I directly got this error: Type typeof SuperJSON is not assignable to type TypeError<"The transformer property has moved to httpLink/httpBatchLink/wsLink"> Type typeof SuperJSON is not assignable to type "The transformer property has moved to httpLink/httpBatchLink/wsLink" My client initialization of tRPC:

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

1 replies

TTCTheo's Typesafe Cult

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/15/2024 in #questions

trpc v11 error: The transformer property has moved to httpLink/httpBatchLink/wsLink

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

15 replies

TtRPC

•Created by FleetAdmiralJakob 🗕 🗗 🗙 on 3/13/2024 in #❓-help

Return undefined if param is not there

In this code cityById could be undefined and I want that this checks this and then weatherData gets undefined. Problem: I can't wrap this in a condition because of React's Hook Rules

  const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    { refetchOnWindowFocus: false, staleTime: 1000 * 60 * 60 /* 1 hour */ },
  );

  const weatherData = api.weather.getWeather.useQuery(
    {
      coordinates: cityById.coord,
      timezone: dayjs.tz.guess(),
      lang: locale,
    },
    { refetchOnWindowFocus: false, staleTime: 1000 * 60 * 60 /* 1 hour */ },
  );

5 replies

Gaming

Programming