Nick Posts - Answer Overflow

Nick

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers PPrisma DTDrizzle Team KKinde

Posts Comments

KPCKevin Powell - Community

•Created by Nick on 1/12/2025 in #front-end

Centering a div vertically... (Kevin's shape-outside video)

2 replies

KPCKevin Powell - Community

•Created by Nick on 12/22/2024 in #front-end

Animating clip path with gsap?

Anyone know why animating this clip-path isn't working? It's just jumping from the initial to end state, and I'm not sure why :/ https://codepen.io/nwoodward/pen/bNbWJKK?editors=1010

<svg width="0" height="0">
  <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
    <path d="M0 0 H100 A0 0 0 0 1 100 100 H0 A0 0 0 0 1 0 0 Z"></path>
  </clipPath>
</svg>

gsap.to(".hero", {
  clipPath: `path("M20 10 H80 A20 20 0 0 1 80 90 H20 A20 20 0 0 1 20 10 Z")`,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "1px top",
    end: "bottom top",
    pin: true,
    markers: true,
    toggleActions: "play reverse play reverse",
  },
});

<svg width="0" height="0">
  <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
    <path d="M0 0 H100 A0 0 0 0 1 100 100 H0 A0 0 0 0 1 0 0 Z"></path>
  </clipPath>
</svg>

gsap.to(".hero", {
  clipPath: `path("M20 10 H80 A20 20 0 0 1 80 90 H20 A20 20 0 0 1 20 10 Z")`,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "1px top",
    end: "bottom top",
    pin: true,
    markers: true,
    toggleActions: "play reverse play reverse",
  },
});

26 replies

PPrisma

•Created by Nick on 11/30/2024 in #help-and-questions

New to Prisma, can I not rely on the order of the array when creating nested records?

So referencing organiser.events[0] doesn't seem to refer to Event 1?

const organiser = await prisma.organiser.create({
    data: {
      id: "kp_cb03a5581e674879b5940cbb5f697575",
      email: "[email protected]",
      firstName: "firstName",
      lastName: "lastName",
      events: {
        create: [{
          name: "Event 1",
          startOn: new Date("2024-12-15T17:00:00Z"),
          description: "Description 1",
          status: "live",
          address: {
            create: {
              line1: "456 Snow Avenue",
              city: "Manchester",
              postcode: "M1 1BB",
            },
          },
        },
        {//... more events}
        ],
      },
    },
    include: {
      events: true,
    },
  });



    prisma.rSVP.create({
      data: {
        attendeeId: attendees[0].id,
        eventId: organiser.events[0].id,
        status: "going",
      },
    }),

const organiser = await prisma.organiser.create({
    data: {
      id: "kp_cb03a5581e674879b5940cbb5f697575",
      email: "[email protected]",
      firstName: "firstName",
      lastName: "lastName",
      events: {
        create: [{
          name: "Event 1",
          startOn: new Date("2024-12-15T17:00:00Z"),
          description: "Description 1",
          status: "live",
          address: {
            create: {
              line1: "456 Snow Avenue",
              city: "Manchester",
              postcode: "M1 1BB",
            },
          },
        },
        {//... more events}
        ],
      },
    },
    include: {
      events: true,
    },
  });



    prisma.rSVP.create({
      data: {
        attendeeId: attendees[0].id,
        eventId: organiser.events[0].id,
        status: "going",
      },
    }),

3 replies

KKinde

•Created by Nick on 11/26/2024 in #💻┃support

Typescript jwt payload type?

9 replies

KKinde

•Created by Nick on 11/26/2024 in #💻┃support

"AuthProvider gives access to auth data in your app"

Hi! I originally followed a youtube video on Kinde that didn't show the AuthProvider in the docs. The docs say that it's needed for token refreshing, but I'm a little confused how it is used for data access? Is it referring to client side data? Because so far I've only been using getKindeServerSession and it's been working fine Thanks, Nick

3 replies

KKinde

•Created by Nick on 11/24/2024 in #💻┃support

Middleware: Not being redirected back to the protected page

4 replies

PPrisma

•Created by Nick on 10/10/2024 in #help-and-questions

Prisma Studio not respecting 'not null' fields?

I'm creating a model like this:

model Enquirer {
  fName     String
  sName     String
  email     String   @unique
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Enquirer {
  fName     String
  sName     String
  email     String   @unique
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

but prisma studio lets me add records with or without fName, sName and email :/ any thoughts what I might be doing wrong? thanks

3 replies

KPCKevin Powell - Community

•Created by Nick on 9/21/2024 in #back-end

Can't connect to my Postgres instance from my app

I've got a Postgres instance set up in a docker container, which allows local connections without a password:

# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     trust
# IPv4 local connections:
host    all             all             127.0.0.1/32            trust
# IPv6 local connections:
host    all             all             ::1/128                 trust
# Allow replication connections from localhost, by a user with the
# replication privilege.
local   replication     all                                     trust
host    replication     all             127.0.0.1/32            trust
host    replication     all             ::1/128                 trust

# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     trust
# IPv4 local connections:
host    all             all             127.0.0.1/32            trust
# IPv6 local connections:
host    all             all             ::1/128                 trust
# Allow replication connections from localhost, by a user with the
# replication privilege.
local   replication     all                                     trust
host    replication     all             127.0.0.1/32            trust
host    replication     all             ::1/128                 trust

I've set a password for my postgres superuser, but my app refuses to connect (my app is outside the docker container): Connection string: POSTGRES_URI=postgresql://postgres:[email protected]:5432/next-payload-3 I've tried both with and without a password, and these are the errors respectively: With: ERROR: Error: cannot connect to Postgres: password authentication failed for user "postgres" Without: ERROR: Error: cannot connect to Postgres: SASL: SCRAM-SERVER-FIRST-MESSAGE: client password must be a string I output the POSTGRES_URI in my config before the adapter uses it, and it looks fine. The adapter

  import { postgresAdapter } from '@payloadcms/db-postgres'

  db: postgresAdapter({
    pool: {
      connectionString: process.env.POSTGRES_URI,
    },
  }),

  import { postgresAdapter } from '@payloadcms/db-postgres'

  db: postgresAdapter({
    pool: {
      connectionString: process.env.POSTGRES_URI,
    },
  }),

I'm just not really sure if this is a postgres, payload, or drizzle issue (payload uses Drizzle under the hood). I'm betting Drizzle (because it gives me no end of problems), but was hoping someone could tell me if I've made an obvious mistake? Thanks, Nick

4 replies

DTDrizzle Team

•Created by Nick on 9/18/2024 in #help

Sharing a database - Keeps trying to drop other tables when pushing tables with the different prefix

So I've got tables with the prefix chris-woodward-gallery and cars-under-20k. I was learning, and still am, so want to make the use of vercel's free db. Problem is I've set up my schema to prefix the tables, and removed any reference to the chris-woodward-gallery variant, but when I push it still say it's trying to drop those tables. As a big-old-noob I'm struggling to debug this tbh:

PostgresError: cannot drop sequence "chris-woodward-gallery_address_id_seq" because other objects depend on it
//snip
  severity_local: 'ERROR',
  severity: 'ERROR',
  code: '2BP01',
  detail: 'default value for column id of table "chris-woodward-gallery_address" depends on sequence "chris-woodward-gallery_address_id_seq"',
  hint: 'Use DROP ... CASCADE to drop the dependent objects too.',
  file: 'dependency.c',
  line: '1204',
}

PostgresError: cannot drop sequence "chris-woodward-gallery_address_id_seq" because other objects depend on it
//snip
  severity_local: 'ERROR',
  severity: 'ERROR',
  code: '2BP01',
  detail: 'default value for column id of table "chris-woodward-gallery_address" depends on sequence "chris-woodward-gallery_address_id_seq"',
  hint: 'Use DROP ... CASCADE to drop the dependent objects too.',
  file: 'dependency.c',
  line: '1204',
}

2 replies

KPCKevin Powell - Community

•Created by Nick on 9/3/2024 in #front-end

CSS View Transitions only working 50% of the time

1 replies

KPCKevin Powell - Community

•Created by Nick on 8/15/2024 in #front-end

Not sure how to make this hero text animation responsive

2 replies

KPCKevin Powell - Community

•Created by Nick on 7/23/2024 in #back-end

Does anyone use Drizzle here? Many-to-Many relationships and types

Hi, Am a bit confused with Drizzle tbh. I think this is how you set up and query a M:N relationship, but it seems very long-winded, so it kinda feels like a skill issue: Let's say I've got a Users and a Jobs table

// Drizzle relationships:
export const usersRelations = relations(users, ({ many }) => ({
  usersToJobs: many(usersToJobs),
}));

export const jobsRelations = relations(jobs, ({ many }) => ({
  usersToJobs: many(usersToJobs),
}));

export const usersToJobsRelations = relations(
  usersToJobs,
  ({ one }) => ({
    user: one(users, {
      fields: [userToJobTable.userId],
      references: [userTable.id],
    }),
    job: one(jobs, {
      fields: [usersToJobs.jobId],
      references: [jobs.id],
    }),
  }),
);

// Querying all users and the jobs they've applied for
  const users = await db.query.users.findMany({
    with: {
      usersToJobs: {
        with: {
          jobs: true,
        },
      },
    },
  });

// Drizzle relationships:
export const usersRelations = relations(users, ({ many }) => ({
  usersToJobs: many(usersToJobs),
}));

export const jobsRelations = relations(jobs, ({ many }) => ({
  usersToJobs: many(usersToJobs),
}));

export const usersToJobsRelations = relations(
  usersToJobs,
  ({ one }) => ({
    user: one(users, {
      fields: [userToJobTable.userId],
      references: [userTable.id],
    }),
    job: one(jobs, {
      fields: [usersToJobs.jobId],
      references: [jobs.id],
    }),
  }),
);

// Querying all users and the jobs they've applied for
  const users = await db.query.users.findMany({
    with: {
      usersToJobs: {
        with: {
          jobs: true,
        },
      },
    },
  });

Is that right? I don't seem to be able to access the other side of the relationship, so it can't be (so like users.jobs or whatever it should be). I feel like I must be missing something. Wouldn't the equivalent in Sequelize just be:

User.belongsToMany(Job, { through: User_Job });
Job.belongsToMany(User, { through: User_Job });

const results = await User.findAll({
  include: Job,
});

User.belongsToMany(Job, { through: User_Job });
Job.belongsToMany(User, { through: User_Job });

const results = await User.findAll({
  include: Job,
});

Also, if I'm using my schema to create Zod types with drizzle-zod:

import { createInsertSchema } from "drizzle-zod";
export const userSchema = createInsertSchema(users);

import { createInsertSchema } from "drizzle-zod";
export const userSchema = createInsertSchema(users);

I'm a bit stumped as to how to type it now it includes that nested usersToJobs and the jobs? I know I should extend the userSchema, just no idea how to do it correctly! Appreciate any help 🙂 Nick

12 replies

DTDrizzle Team

•Created by Nick on 7/23/2024 in #help

Querying and typing a many to many relationship?

So I'm enjoying using drizzle, but querying a many to many relationship seems a bit verbose, which makes me think I'm doing it wrong. It's also making using drizzle-zod a bit confusing: So I've set up my tables, user and profile

// Drizzle relationships:
export const userRelations = relations(users, ({ many }) => ({
  usersToProfiles: many(userToProfiles),
}));

export const profileRelations = relations(profiles, ({ many }) => ({
  usersToProfiles: many(usersToProfiles),
}));

export const usersToProfilesRelations = relations(
  usersToProfiles,
  ({ one }) => ({
    user: one(users, {
      fields: [usersToProfiles.userId],
      references: [users.id],
    }),
    profiles: one(profiles, {
      fields: [usersToProfiles.profileId],
      references: [profiles.id],
    }),
  }),
);

// Querying all users and their profiles
  const listings = await db.query.users.findMany({
    with: {
      usersToProfiles: {
        with: {
          profiles: true,
        },
      },
    },
  });

// Drizzle relationships:
export const userRelations = relations(users, ({ many }) => ({
  usersToProfiles: many(userToProfiles),
}));

export const profileRelations = relations(profiles, ({ many }) => ({
  usersToProfiles: many(usersToProfiles),
}));

export const usersToProfilesRelations = relations(
  usersToProfiles,
  ({ one }) => ({
    user: one(users, {
      fields: [usersToProfiles.userId],
      references: [users.id],
    }),
    profiles: one(profiles, {
      fields: [usersToProfiles.profileId],
      references: [profiles.id],
    }),
  }),
);

// Querying all users and their profiles
  const listings = await db.query.users.findMany({
    with: {
      usersToProfiles: {
        with: {
          profiles: true,
        },
      },
    },
  });

I'm then not sure how to extend the User schema with its usersToProfiles and its Profiles:

export const userSchema = createInsertSchema(users);
export const UserWithProfilesSchema = userSchema.extend() // not sure how to extend here
export type UserWithProfileType = z.infer<typeof UserWithProfileSchema>;

export const userSchema = createInsertSchema(users);
export const UserWithProfilesSchema = userSchema.extend() // not sure how to extend here
export type UserWithProfileType = z.infer<typeof UserWithProfileSchema>;

1 replies

KPCKevin Powell - Community

•Created by Nick on 6/27/2024 in #front-end

Grid col 1fr behaviour vs percentages?

1 replies

KPCKevin Powell - Community

•Created by Nick on 6/26/2024 in #front-end

Positioning within a grid

1 replies

DTDrizzle Team

•Created by Nick on 6/18/2024 in #help

Trying to get Drizzle, Lucia and Vercel-postress to work together (no changes to schema detected)

Hi! I'm new to drizzle and lucia and am just having a problem setting up both with vercel-postgres: I'm creating an adapter for Lucia in my schema.ts:

export const createAdapter = (db: PgDatabase<any, any, any>) => new DrizzlePostgreSQLAdapter(db, sessionTable, userTable);

and using it in db/index.ts. But this doesn't allow drizzle to see the session or user schemas (no changes are detected when I drizzle-kit push )

import { drizzle } from "drizzle-orm/vercel-postgres";
import { sql } from "@vercel/postgres";
import * as schema from "./schema";

export const db = drizzle(sql, { schema });
export const adapter = schema.createAdapter(db);

import { drizzle } from "drizzle-orm/vercel-postgres";
import { sql } from "@vercel/postgres";
import * as schema from "./schema";

export const db = drizzle(sql, { schema });
export const adapter = schema.createAdapter(db);

Any ideas? Sorry if it's obvious! Nick

7 replies

KPCKevin Powell - Community

•Created by Nick on 6/1/2024 in #front-end

Intrinsic image sizes

Just looking to optimize my images (actually using Astro, but I'm leaning towards the raw picture tag because it seems like it has more flexibility) The width and height attributes are intrinsic values right? ie not how big I'd like to render the image, but how big the image is on my HDD. I swear I see the former definition used everywhere? I'd then use the sizes attribute (in a picture tag) or css to set the render sizes with relevant breakpoints? Thanks, Nick

118 replies

KPCKevin Powell - Community

•Created by Nick on 5/23/2024 in #os-and-tools

Alias'ing an MS exchange email address

Sorry if this is a simple question, but I'm always wary/shit-scared of messing with emails/dns 😄 I'm using a primary domain on O365, exampleA.com, with licenses and users set up, and have another unrelated domain, exampleB.com, with no licenses. I'd like to alias [email protected], with [email protected], so that anyone emailing @exampleB.com will actually mail @exampleA.com. I've found an MS guide here: https://learn.microsoft.com/en-us/microsoft-365/admin/setup/add-domain?view=o365-worldwide but just wanted to ask "is this doing what I think it's doing", and if any replies would appear as being from exampleB.com or if it will default to exampleA.com? Thanks!

3 replies

KPCKevin Powell - Community

•Created by Nick on 5/14/2024 in #back-end

DMARC: None vs Quarantine

Anyone mind ELI5 the difference between my DMARC policy of 'none' and more proactive policies? Afaik 'none' should count as having DMARC set up, but doesn't prevent spam? But should I be wary of setting it to 'quarantine'?

1 replies

KPCKevin Powell - Community

•Created by Nick on 5/13/2024 in #front-end

Tracking scripts failing on deployment

Hi all, Not really something I've messed about with but I keep trying to add tracking scripts to a site and they keep failing. Running locally gets this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'q')

and uploading to cloudflare gets this, followed by other errors (all pointing to the tracking script):

src/layouts/main-layout.astro:32:917 - error ts(2304): Cannot find name 'd'.

<!-- <script>window.faitracker=window.faitracker||function(){this.q=[];var t=new CustomEvent("FAITRACKER_QUEUED_EVENT");return this.init=function(t,e,a){this.TOKEN=t,this.INIT_PARAMS=e,this.INIT_CALLBACK=a,window.dispatchEvent(new CustomEvent("FAITRACKER_INIT_EVENT"))},this.call=function(){var e={k:"",a:[]};if(arguments&&arguments.length>=1){for(var a=1;a<arguments.length;a++)e.a.push(arguments[a]);e.k=arguments[0]}this.q.push(e),window.dispatchEvent(t)},this.message=function(){window.addEventListener("message",function(t){"faitracker"===t.data.origin&&this.call("message",t.data.type,t.data.message)})},this.message(),this.init("key",{host:"https://api.factors.ai"}),this}(),function(){var t=document.createElement("script");t.type="text/javascript",t.src="https://app.factors.ai/assets/factors.js",t.async=!0,(d=document.getElementsByTagName("script")[0]).parentNode.insertBefore(t,d)}();</script> -->

<!-- <script>window.faitracker=window.faitracker||function(){this.q=[];var t=new CustomEvent("FAITRACKER_QUEUED_EVENT");return this.init=function(t,e,a){this.TOKEN=t,this.INIT_PARAMS=e,this.INIT_CALLBACK=a,window.dispatchEvent(new CustomEvent("FAITRACKER_INIT_EVENT"))},this.call=function(){var e={k:"",a:[]};if(arguments&&arguments.length>=1){for(var a=1;a<arguments.length;a++)e.a.push(arguments[a]);e.k=arguments[0]}this.q.push(e),window.dispatchEvent(t)},this.message=function(){window.addEventListener("message",function(t){"faitracker"===t.data.origin&&this.call("message",t.data.type,t.data.message)})},this.message(),this.init("key",{host:"https://api.factors.ai"}),this}(),function(){var t=document.createElement("script");t.type="text/javascript",t.src="https://app.factors.ai/assets/factors.js",t.async=!0,(d=document.getElementsByTagName("script")[0]).parentNode.insertBefore(t,d)}();</script> -->

Anyone got any ideas? I'm stumped. 🧐

1 replies

Gaming

Programming