harshcut
harshcut
Explore posts from servers
TTCTheo's Typesafe CultDTDrizzle Team
PostsComments
TTCTheo's Typesafe Cult
Created by harshcut on 5/24/2024 in #questions
Scaling page with respect to viewport width
Is there a way to scale a web page completely with respect to viewport width? All components should have the same aspect ratio. I was thinking this has something to do with the <meta name="viewport" but not sure.
4 replies
TTCTheo's Typesafe Cult
Created by harshcut on 4/10/2024 in #questions
Streaming file from Client to Server to S3
I am working on a side project in which i need to upload data to an s3 bucket. The user will select a large file on the React frontend and upload it. The file is sent to an Express.js server that will pipe/stream the chunks to an s3 bucket as soon as they arrive. Is the formData that i send from the client to server a readableStream? 
const handleFileUpload = async (event) => {
  const formData = new FormData(event.currentTarget)
  event.currentTarget.reset()
  const { data } = await fetch(`${import.meta.env.VITE_SERVER_URL}/upload`, {
    method: 'POST',
    credentials: 'include',
    body: formData,
  }).then((res) => res.json())
}
...
<form onSubmit={handleFileUpload}>
  <input type="file" name="file" required />
  <button type="submit" disabled={loading}>
    Upload
  </button>
</form>
const handleFileUpload = async (event) => {
  const formData = new FormData(event.currentTarget)
  event.currentTarget.reset()
  const { data } = await fetch(`${import.meta.env.VITE_SERVER_URL}/upload`, {
    method: 'POST',
    credentials: 'include',
    body: formData,
  }).then((res) => res.json())
}
...
<form onSubmit={handleFileUpload}>
  <input type="file" name="file" required />
  <button type="submit" disabled={loading}>
    Upload
  </button>
</form>
14 replies
TTCTheo's Typesafe Cult
Created by harshcut on 2/25/2024 in #questions
`MaxListenersExceededWarning` on using `tailFile.on` inside `socket` connection
(node:4068) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 update listeners added to [TailFile]. Use emitter.setMaxListeners() to increase limit
new event listners (tailFile.on('update')) are created whenever new socket connection is established, causing the above warning. what could be better wat to handle this? TailFile class extends events.EventEmitter. 
import { Server } from 'socket.io'
import TailFile from './tail-file'

const tailFile = new TailFile('server.log')
tailFile.init()

const io = new Server(8000, { cors: { origin: 'http://localhost:3000' } })

io.on('connection', (socket) => {
  const queue = tailFile.get()
  socket.emit('init', queue)

  tailFile.on('update', (data) => socket.emit('update', data))
})
import { Server } from 'socket.io'
import TailFile from './tail-file'

const tailFile = new TailFile('server.log')
tailFile.init()

const io = new Server(8000, { cors: { origin: 'http://localhost:3000' } })

io.on('connection', (socket) => {
  const queue = tailFile.get()
  socket.emit('init', queue)

  tailFile.on('update', (data) => socket.emit('update', data))
})
2 replies
TTCTheo's Typesafe Cult
Created by harshcut on 9/28/2023 in #questions
Take-home assignment
I have a take-home assignment in which i need to implement a multi-column (not separate lists) drag and drop component in React without using any libs. Using html drag and drop apis was easy, but it didn't look exactly like this (video below). Then i used mouse events, and could only make it work (https://react-dnd-harshcut.vercel.app/) with single column. Does anyone one have any suggestions on how to proceed for two-column layout? My next thought would be calculating the position of the cursor on left or right side of the container and shifting the list items in it. Seems like a lot of work just for a take-home assignment.
4 replies
TTCTheo's Typesafe Cult
Created by harshcut on 7/2/2023 in #questions
importing data into [slug]
i have a '/craft' page where i display all the craft titles. at '/craft/{id}' i have to display a specific craft. how do people usually import the data for slug pages depending upon the id? also how do you import custom components for specific pages?
20 replies
TTCTheo's Typesafe Cult
Created by harshcut on 6/18/2023 in #questions
is this the correct use of usecallback?
  const foo = React.useCallback(() => {
    const clientDate = new Date()
    const utcDate = clientDate.getTime() + clientDate.getTimezoneOffset() * 60000
    const timeOffset = 5.5
    const localDate = new Date(utcDate + 3600000 * timeOffset)
    setDate(localDate)
  }, [])

  React.useEffect(() => {
    foo()
    const timer = setInterval(() => foo(), 1000)
    return () => {
      clearInterval(timer)
    }
  }, [foo])
  const foo = React.useCallback(() => {
    const clientDate = new Date()
    const utcDate = clientDate.getTime() + clientDate.getTimezoneOffset() * 60000
    const timeOffset = 5.5
    const localDate = new Date(utcDate + 3600000 * timeOffset)
    setDate(localDate)
  }, [])

  React.useEffect(() => {
    foo()
    const timer = setInterval(() => foo(), 1000)
    return () => {
      clearInterval(timer)
    }
  }, [foo])
7 replies
TTCTheo's Typesafe Cult
Created by harshcut on 4/21/2023 in #questions
help with prisma schema (coming from sql)
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  email     String   @unique
  password  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
+  Slot      Slot?    @relation(fields: [slotId], references: [id])
+  slotId    String?  @db.ObjectId
}

model Slot {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  timestamp DateTime @unique
+  users     User[]
}
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  email     String   @unique
  password  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
+  Slot      Slot?    @relation(fields: [slotId], references: [id])
+  slotId    String?  @db.ObjectId
}

model Slot {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  timestamp DateTime @unique
+  users     User[]
}
3 replies
TTCTheo's Typesafe Cult
Created by harshcut on 3/25/2023 in #questions
Right way to install deps in a Monorepo?
i have a question regarding installing and managing dependencies in a monorepo. i currently have a repository with yarn workspaces enabled and turborepo. the workspaces are — client, server, ui. all these workspaces use typescript and few @types/~ as dev dependencies along with other packages. should i install the dev dependencies that are same in every workspace in the root of monorepo or in each workspace separately? what i want is a guide to installing deps the right way in a monorepo.
1 replies
TTCTheo's Typesafe Cult
Created by harshcut on 2/15/2023 in #questions
Compiling TailwindCSS for Monorepos
I have a monorepo with workspaces - ui and client. I want to create components in ui and use them in client. I am using tailwindcss as my style provider, but am having a very hard time compiling it. I am not going to publish them on NPM, and it just need to work in client which is a nextjs project. Any help is appreciated.
18 replies
TTCTheo's Typesafe Cult
Created by harshcut on 12/23/2022 in #questions
Want to create a collaborative editor with Next.js
I am currently trying to figure out yjs with next.js. Are there any better alternatives for react based applications?
12 replies