Tools

Productivity

• ใช้ Raindrop ในการ bookmark
• ใช้ ClickUp ในการจัดการงานและชีวิตส่วนตัว
• ใช้ Noi เป็น Browser อันที่สอง
• ใช้ Tldraw สำหรับการวาด Diagram
• ใช้ Eagle ในการจัดการ Digital Assets ต่างๆ
• ใช้ Sidekick เป็น browser สำหรับการทำงาน
• ติดตั้ง Browser Extension ที่มีประโยชน์

AI

• Grok ดีที่สุด ฉลาดพอตัว มีฟีเจอร์ครบ ประสบการณ์ดี
• OpenWeb UI ดีทีสุดสำหรับ Multi Modals AI Chat

AI Coding

AI in Website

• Vibe Coding Tools ที่แนะนำ => v0(Next.js + Shadcn UI), Loveable(Vite-react + Shadcn UI), etc.
• Vibe Coding Tools โอเคร ถ้าใช้ Draft UI คร่าวๆ แล้วเอามาทำต่อใน IDE เพื่อปิดจบ Fullstack Project
• ไม่ควรปิดจบ Fullstack Project ใน ที่ Vibe Coding Tools

AI in IDE

• AI in IDE => แนะนำ Windsurf(แนะนำกว่า) หรือ Cursor
• การเขียน Program แบบ Functional ดีที่สุดสำหรับ AI refactor ง่าย, test ง่าย, code งั้น มี rules มี standard ที่ AI เข้าใจได้ชัดเจน
• การ Solve Problem => 1. สั่งให้เป็น Functional ก่อน 2. กำหนดเช่น กำหนด lint script ใน package.json 3. บอกให้ bun run lint แล้วแก้ไข error ให้หมด 4. ถ้ายังแก้ไม่หมดให้ copy error จาก prompt วางใน ai command ในไฟล์
• Completion ที่ดีที่สุดอยู่ใน => ใช้ Windsurf(แนะนำกว่า) หรือ Cursor
• ถ้าเชื่อมต่อกับ APIs เช่น Database, Payment, Storage, Resource ต่างๆ ใช้ MCP
• การเลือก Models ดูจาก AI Models
• ถ้ามี AI Rules จะช่วย Scope ให้ AI ทำตามที่ต้องก่รได้มากขึ้น ถ้าไม่เขียน workspace rules ก็เขียนที่ Global Rules ก็ยังดี

Windows

• ติดตั้ง Dev Drive จะช่วย Build เร็วขึ้น
• Terminal => แนะนำ Windows Terminal หรือ Rio หรือ Warp
• Shell => ใช้ Powershell
• package manager => ใช้ Scoop

Node.js

• Package Manager => ใช้ Bun แทน NPM หรือ PNPM ได้เลย
• ใช้ ni สำหรับการเพิ่มประสิทธิภาพการจัดการ dependencies
• สร้าง packages ใช้ Vite Lib หรือ tsdown
• data fetching => ใช้ fetch หรือ ofetch
• CLI Tools => ใช้ clack หรือ picocolors หรือ cliffy
• fullstack framework => ใช้ Nuxt หรือ Next.js
• Web Tools => ใช้ Vite หรือ Rsbuild
• Server => ใช้ Nitropack

ถ้าเราใช้ Next.js, Nuxt อยู่แล้วเครื่องมือต่างๆด้านบนอาจไม่จำเป็นเพราะมันทำได้ในตัว แต่ก็สามารถดูๆไว้เผื่อใช้ในโอกาสต่างๆ

Progarmming

• เขียน typescript แทน javascript เสมอ ให้สร้างไฟล์ .ts แทน .js ได้เลย ความรู้พื้นฐาน javascript ยังใช้ได้เสมอใน typescript
• programming paradigms เช่น imperative(ip), functional(fp), object-oriented(oop) => การเขียนแบบ functional ชีวิตดีสุด แฮปปี้มีความสุขที่สุด เพราะ error handling ดี, test ง่าย, refactor ง่าย AI เข้าใจดี แต่อาจไม่ปัญหาในเรื่อง performance ถ้าเขียนไม่เหมาะสม

Frontend

• Design System => Shadcn UI(สำหรับ React), PrimeVue(สำหรับ Vue)
• Framework => Next(ถ้าใช้ react), Nuxt(ถ้าใช้ vue)
• Styling => UnoCSS(ฟีเจอร์เยอะ ปรับแต่งได้หลากหลาย) หรือ Tailwind CSS(utility-class ที่คิดมาให้แล้ว)
• Icon => Iconify(มีเยอะทุกรูปแบบ ได้ได้หลาย Framework)

Backend

• Database => Supabase Database หรือ Neon
• Authentication => ใช้ Clerk (ง่าย ยิ่งใช้ยิ่งแพง), WorkOS(ไม่ยาก ยิ่งใช้ยิ่งถูก), Supabase(ถ้าใช้ Supabase Database อยู่แล้ว)

Deployment

Web Serverless

• Cloudflare Pages (ราคาถูก ไม่แพง)
• Vercel (ประสบการณ์ดี ราคาแพงกว่า)

Container Deployment

• Railway ประสบการณ์ดี ราคาดี ใช้ง่าย ดีที่สุดเท่าที่เคยเจอมา

Do Projects

• ใช้ git เสมอ git init ตั้งไว้เลย gh repo create เชื่อม github ตั้งไว้เลย และอย่าลืม .gitignore ทุกครั้ง
• ติดตั้ง Linter/Formatter เช่น Biome หรือ ESLint หรือ OxLint เสมอๆ
• ใช้ Githooks เช่น lefthooks ก็จะดี
• AI Commit เช่น aicommits หรือ czg ทำให้การ commit เป็นเรื่องสนุกและไม่น่าเบื้อ
• เขียน README.md สักหน่อย ก็ดี ยิ่งมีแล้วให้ AI มาอ่าน ก็จะช่วยให้เข้าใจได้มากขึ้น
• การกำหนด script ใน package.json จะช่วยให้เรียกใช้ง่ายขึ้น และถ้าใช้ ni พิมพ์ nr จะง่ายขึ้นไปอีก
• เวลาเลือกใช้ dependencies อะไร ถ้าเป็นไปได้ให้เลือกแบบ ESM Module
• ถ้า Projects ใช้ มี Internal Packages แนะนำให้เปลี่ยนรูปแบบเป็น Monorepo ใช้ Turborepo และอย่าลืมใช้ Remote Caching

Do Products

• Website Projects => ถ้าเลือกง่าย มี ecosystem ครอบคลุมเลือก Next.js ถ้าเลือกสิ่งที่ดีที่สุดเลือก Nuxt
• Docs => ใช้ Gitbook(ง่าย มีราคา ปรับแต่งไม่ได้) หรือ Vitepress(ปรับแต่งได้ ใช้ vue) หรือ FumaDoc(ปรับแต่งได้ใช้ react)
• หา tools ต่างๆอื่นๆ Bookmark ของผม