Sense Then Love

Documentation

• Svelte
• SvelteKit
• SvelteKit SVG
• Svelte Code Checker
• Prisma
• Prisma Data Platform
• Prisma Client
• Prisma Schema
• Prisma Full Text Search
• PlanetScale
• Cloudflare Workers
• Cloudflare Images
• Cloudflare Turnstile
• Cloudflare API
• Cloudflare Environments
• Cloudflare Compatibility Dates
• Zod
• Validator
• Sass
• SubtleCrypto
• PNPM
• Mailchannels
• Buffer
• Vite
• Sanitize HTML
• Wrangler
• Typescript
• Markdown
• Open Graph
• CSP

Code Examples

• Sveltekit + Prisma
• Sveltekit + Turnstile
• Sveltekit Authentication
• Sveltekit + Protected Routes
• Subtle Crypto
• Cloudflare + JWT
• Cloudflare + MailChannels + DKIM

Articles

• Prisma + NextJS
• Using Prisma with Planetscale
• Prisma + Cloudflare Workers
• Prisma + Data Proxy
• ECDSA vs RSA
• SubtleCrypto + JWT
• NPM to PNPM
• Cloudflare Worker Explanation
• Sveltekit + Sass
• Cloudflare Global Network
• Cloudflare + MailChannels + DKIM
• Faster Websites
• PlanetScale Restore to Backup
• Relative Time

Videos

• Learn Prisma In 60 Minutes
• Prisma & PlanetScale Best Practices
• MySQL Scaling Made Easy
• Faster MySQL with HTTP/3

Utilities

• Squoosh
• SVG Icons
• Flowbite
• Jwt.io
• White to Grey Hex's
• CSP Validator
• DNS Checker
• Emoji's
• Open Graph Preview

Tech Stack Costs

• MailChannels: FREE for Infinite Outbound API Emails/month
• Namecheap: $19.58/year for Domain Registration
• Github Team: $4/month for 2G of storage
• Cloudflare Workers: $5/month for 285 servers allowing 10 million requests/month
• Cloudflare Images: $5/month for 100,000 images stored
• Proton Business: $19.98/month for 2 users w/ secure inboxes, calendars, & 1,000GB of cloud storage
• Prisma Data Platform: $29/month for 500 CPU minutes/month
• Planetscale: $29/month for 10 GB storage, 50 million row writes/month & 100 billion row reads/month

Local install

1. Install git
2. Install node & npm
3. Install nvm
4. In bash navigate to the place you would love to place this code

git clone https://github.com/sensethenlove/sensethenlove.git
cd sensethenlove
nvm use 18
npm install -g pnpm
pnpm setup
source /Users/[ username ]/.zshrc
pnpm i

Start development server

pnpm dev

Write to schema.prisma, prisma.ts & .env files to prep for github qa branch push or qa deploy

pnpm qaWrite

Write to schema.prisma, prisma.ts & .env files to prep for github main branch or poduction deploy

pnpm mainWrite

Validates code & then pushes to github qa branch

pnpm qaPush

Validates code & then pushes to github main branch

pnpm mainPush

Deploy to qa

pnpm qaDeploy

Deploy to production

pnpm mainDeploy

How to update database schema

1. Bash pnpm qaData to view qa data in browser
2. Update schema @ ./prisma/schema.prisma
3. Bash pnpm schemaDeploy to push schema changes to qa branch in PlanetScale
4. In .apps.toml file click DASHBOARD_PLANETSCALE link
5. Click Branches tab
6. Click qa link
7. Scroll to bottom of page
8. Select Deploy to main
9. Click Create deploy request button
10. Click Deploy changes

View logs for production server

pnpm mainLogs

View logs for qa server

pnpm qaLogs

Updates all dependencies

pnpm up

Open Prisma Studio w/ Production data

pnpm mainData

Open Prisma Studio w/ QA data

pnpm qaData

Format schema.prisma in VSCodium on save

Preferences > Settings > JSON

{
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma",
    "editor.formatOnSave": true
  }
}

Set default tab size in VSCodium to 2 for new files

Preferences > Settings > JSON

{
  "editor.tabSize": 2
}

Show what folder we are in @ the tab level of VSCodium

Preferences > Settings > JSON

{
  "workbench.editor.labelFormat": "short"
}

Stop VSCodium from compacting folders in sidenav

Preferences > Settings > JSON

{
  "explorer.compactFolders": false
}

Increase indent for sub folders in VSCodium sidenav

Preferences > Settings > JSON

{
  "workbench.tree.indent": 18
}

Get project wide typescript reporting in VSCodium

Preferences > Settings > JSON

{
 "typescript.tsserver.experimental.enableProjectDiagnostics": true
}

Show autocomplete suggestions in VSCodium

Control + Space

Reload VSCodium

This is helpful when type definitions are stale (showing incorrect errors)

Command + Shift + P
Developer: Reload Window

Create new table using schema & data from exisiting table

CREATE TABLE _CategoryToQuote
AS SELECT * FROM _QuoteToCategory;

Add primary key to table

ALTER TABLE Category
ADD PRIMARY KEY (id); 

Add unique key to table

ALTER TABLE _CategoryToQuote
ADD CONSTRAINT _CategoryToQuote_AB_unique
UNIQUE (A,B);

Add index (key) to table

ALTER TABLE `_QuoteToCategory`
ADD INDEX `_QuoteToCategory_B_index` (`B`);

Swap data between two columns

UPDATE _CategoryToQuote old
JOIN _CategoryToQuote new USING (A,B)
SET new.A = old.B, new.B = old.A;