Today I Learned

Link MongoDB with Prisma

First to use in MongoDB Atlas, and deploy it to Vercel. Whole process:

1. Prisma Usage:

1).Project initialization: run npm init --yes

2).Installing Prisma: run yarn add -D prisma or npm i -D prisma

3).Generating Prisma project configuration: run npx prisma init

4).Additionally, executing the above commands will automatically generate the following files:

prisma/schema.prisma: This is the Prisma schema file used to define your database models and relationships.

.env file: This is an environment variable file used to store sensitive information and configuration parameters, such as database connection details.

5).set schema.prisma

!! important: set .env

DATABASE_URL="mongodb+srv://test:test@cluster0.ns1yp.mongodb.net/myFirstDatabase/?retryWrites=true&w=majority" You need to first create a database in MongoDB Atlas, then link to it.

use npx prisma db push to deploy it to MongoDB Atlas

2. How to deploy it to Vercel:

First, click Project Setting - Environment Variables

Then add new Key- Vaule pair:

DATABASE_URL + XXX

Add redeploy it, and it works !

Official Docs

Official Docs

Reference Docs

Best Practice with Panel Scroll for BotCard

A really cool library, you can simply add it to typescript and use it, Sth need to know:

1. Need to use yarn add react-reveal and npm both.

   (don't know why, but if I just use one, it won't work.)

2. If you want casecade show, you can add features in Fade.

   <Fade bottom cascade duration={4000}> </Fade>

3. If you want to import it, use require('/') seems work better.

   const Fade = require('react-reveal/Fade');

Official Docs

Tailwind CSS !important modifier

Make any utility important by adding a ! character to the beginning:

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

Official Docs

nested backdrop-filter

Backdrop filter tidak akan berhasil jika parent memiliki efek backdrop-filter juga.

issue — workaround

pre overflow: scroll inside flex

Pernah pake overflow-x: scroll pada pre element tapi ngga ngaruh, malah parent yang ada scrollnya?

Mungkin parentnya didalem display: flex. Kalau iya, coba tambahin min-width: 0 pada parentnya.

Credit

import mdx file sebagai component

Import mdx file di component, caranya mirip seperti import component biasa:

import Contents from '@/mdx/Contents.mdx';

// Penggunaan
<Contents />

Ternyata ada di dokumentasinya. Biasakan membaca dulu ya gais jangan kaya saya wkwk.

:not() pseudo-class

Pake :not() ini emang agak tricky, salah penggunaan hasilnya juga bisa ngga sesuai harapan.

Contoh, styling inline code dimana bukan children dari pre ataupun .code-block. Penggunaannya:

:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}

:not(pre, .code-block) {
  > code {
    background-color: 'red';
  }
}

Turborepo dependsOn

"build": {
  "dependsOn": ["^lint", "test"]
},

dependsOn dengan ^ menandakan task dari package lain, sedangkan yang tanpa ^ task dari package itu sendiri.

Misal: app A pas mau build harus running tasks lint di semua package dependenciesnya, dan juga harus running task test app A itu sendiri.

e.target.valueAsNumber

Pakai e.target.valueAsNumber untuk otomatis mengembalikan nilai input sebagai number. Tidak perlu parseInt(e.target.value) lagi.