Julien Castets Posts - Answer Overflow

Julien Castets

•Created by Julien Castets on 10/22/2024 in #questions

Flowbite vs tailwind UI vs shacdn vs ??

I want to create an application UI in React with: * Dark/Light mode support * Charts * Paginated, searchable, and sortable tables * A large collection of reusable components * Pre-built templates (e.g., with a side navigation menu) Budget is not a constraint, I’m willing to pay for the best solution Many online reviews comparing Tailwind UI and Flowbite are old. What would you use today, and why? And more importantly, what wouldn't you use?

16 replies

TTCTheo's Typesafe Cult

•Created by Julien Castets on 6/22/2023 in #questions

Migrate django application to nextjs

I want to migrate an old django application to nextjs incrementally, and I struggle to have the same behavior with my URLS. Is there any option to provide to next.config.mjs so next doesn't change the URL at all, and doesn't try to add or remove slashes? With the current django app: * localhost:9400/auth/login -> HTTP 301 to /auth/login/ * localhost:9400/auth/login/ -> HTTP 200 * localhost:9400/dashboards/ -> HTTP 404 * localhost:9400/dashboard -> HTTP 200 With the following configuration in next.config.mjs, a call to localhost:3000/auth/login/ returns HTTP/308 to /auth/login.

  async rewrites() {
    return {
      beforeFiles: [],
      afterFiles: [],
      fallback: [
        {
          source: "/:path*",
          destination: "http://localhost:9400/:path*",
        },
      ],
    }

  async rewrites() {
    return {
      beforeFiles: [],
      afterFiles: [],
      fallback: [
        {
          source: "/:path*",
          destination: "http://localhost:9400/:path*",
        },
      ],
    }

If I add skipTrailingSlashRedirect: true, to next.config.mjs, then localhost:3000/auth/login/ queries django to /auth/login (the extra slash is removed), django returns HTTP/301 to /auth/login/ which is returned to the client by nextjs. I can't find the correct config to provide to next :/

2 replies

TTCTheo's Typesafe Cult

•Created by Julien Castets on 12/17/2022 in #questions

fix create-t3-app (and trpc) dangerous default?

By default, trpc (https://github.com/trpc/trpc/discussions/2071) and create-t3-app send server errors to clients

const t = initTRPC.context<Context>().create({
  transformer: superjson,
  errorFormatter({ shape }) {
    return shape;
  }
});

const t = initTRPC.context<Context>().create({
  transformer: superjson,
  errorFormatter({ shape }) {
    return shape;
  }
});

Here, shape contains the stack trace of the error and a message which can contain sensitive info. I updated my errorFormatter to hide these sensitive info:

  // By default, trpc sends the stack trace of the error to the client. Remove
  // these sensitive details before sending to the client.
  errorFormatter({ error, shape }) {
    const safeMessage = error.code === "INTERNAL_SERVER_ERROR" ? "Internal server error" : shape.message;
    const { stack, path, ...safeData } = shape.data;

    return {
      ...shape,
      message: safeMessage,
      data: {
        ...safeData,
      }
    };

  // By default, trpc sends the stack trace of the error to the client. Remove
  // these sensitive details before sending to the client.
  errorFormatter({ error, shape }) {
    const safeMessage = error.code === "INTERNAL_SERVER_ERROR" ? "Internal server error" : shape.message;
    const { stack, path, ...safeData } = shape.data;

    return {
      ...shape,
      message: safeMessage,
      data: {
        ...safeData,
      }
    };

Do you think it should be a default?

2 replies

TTCTheo's Typesafe Cult

•Created by Julien Castets on 12/16/2022 in #questions

How to infer the ref type of a component?

Let's say you have a component that wraps an input:

const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<"input">>((props, ref) => {
    return <input ref={ref} type="text" />;
});

const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<"input">>((props, ref) => {
    return <input ref={ref} type="text" />;
});

And another component using Input, and forwarding the ref to it:

const LabelInput = React.forwardRef<HTMLInputElement, LabelInputProps>(({ text, ...props }, ref) => {
    return (
        <div>
            <label>{text}</label>
            <Input ref={ref} {...props} />
        </div>
    );
}
);

const LabelInput = React.forwardRef<HTMLInputElement, LabelInputProps>(({ text, ...props }, ref) => {
    return (
        <div>
            <label>{text}</label>
            <Input ref={ref} {...props} />
        </div>
    );
}
);

Here, we give HTMLInputElement as first type param of React.forwardRef. Is there a way to compute this value dynamically? In other words, is there a way to introspect the type of ref of Input? https://codesandbox.io/s/keen-swanson-rcxint?file=/src/App.tsx

3 replies

Gaming

Programming