วิธีแก้ปัญหา unknown at rule ของ tailwind css
สวัสดีครับ วันนี้มาเขียนบล็อกสั้นๆ แนะนำทริคเล็กๆ น้อยๆ ในการแก้ปัญหา warning ของ VS Code นะครับ ซึ่งจะเกิด เมื่อเราใช้ Tailwind CSSปัญหาคือ VS Code จะขึ้น warning Unknown at ru...
Tutorials
บทเรียน Tutorials / Guides / How-to ทั้งหมดในเว็บไซต์ แบ่งตามหมวดหมู่ภาษาต่างๆ
All Posts
บทความทั้งหมด 331 บทความ
เรียน CSS Animation | Day 6 - Card Game
สวัสดีครับ วันที่ 6 เป็นการทำ animation คล้ายๆ การ์ดเกม ซึ่ง ก็จะมี 2 states คือ ตอนที่เอาเมาท์ไปชี้ ก็จะคล้ายๆ เราเลือกการ์ดใบนั้น และก็ตอนคลิ๊กที่การ์ด ...
เรียน CSS Animation | Day 5 - Open 24 Hours
สวัสดีครับ วันที่ 5 เป็นการทำป้ายไฟ Neon เท่ๆ ด้วยการใช้ `text-shadow` ครับ และก็มี effect นิดๆหน่อย แรงบันดาลใจจากเว็บ ETH Global Tokyo Day 5 ...
เรียน CSS Animation | Day 4 - Click Me!
สวัสดีครับ วันที่ 4 เป็นการทำ ส่วนโชว์ Information โดยเมื่อกด click ก็จะมีข้อความขึ้นมา เป็น animation ครับ Day 4 - Click Meโค๊ดบน Codepen<ReactCodepen hash="YzjGawG" />...
เรียน CSS Animation | Day 3 - Simple Hover
สวัสดีครับ วันที่ 3 เนื่องจากไม่มีเวลาเท่าไหร่ ทำให้วันนี้ไม่ได้เรียนรู้อะไรมาก เลยมาทำ Hover Effect ง่ายๆครับ โดยใช้ `rotate`, `translateY` และ `scale` Day 3 - Simple Hover...
เรียน CSS Animation | Day 2 - Card Flip
สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับวันที่ 2 ฝึกการทำ Card Flip ครับ หลังจากได้ทำลง Codepen เสร็จ และอัพคลิป video ลง Yout...
เรียน CSS Animation | Day 1 - Heart
สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับ สำหรับวันแรก ก็จะเป็นเรื่องง่ายๆ คือการใช้ keyframes ทำการ transform `scale` ให้เหมือ...
บันทึกการใช้ Cloudflare Worker เพื่อรับ Webhook จาก Github
สืบเนื่องมาจากผมใช้ giscus.app ที่เป็น Comment System โดยใช้ Github Discussions แต่ปัญหาคือ ผมไม่เคยได้ Notifications เวลามี activity ใน discussions เลย ทั้...
ทำปุ่ม Connect Wallet เชื่อมต่อ Blockchain ง่ายๆ ด้วย Rainbowkit
วิธีการทำปุ่ม Connect Wallet สำหรับ Decentralize App ปัจจุบันนั้นง่ายมาก และมีหลาย Library ให้เลือกใช้ เช่น - web3-react- Web3M...
สร้างโปรเจ็ค React ด้วยการใช้ Vite
วันนี้จะมาแนะนำ Frontend Tooling ตัวนึงที่ชื่อว่า Vite อ่านว่า วีด อ่านคล้ายๆกับ veet โดย Evan You ผู้สร้าง Vue.js นั่นเอง แต่ตัว Vite ไม่ได้รองรับแ...
ตัวอย่างการใช้ Cookie Consent เพื่อรองรับ PDPA แบบง่ายๆ
Cookie Consent เป็น JavaScript Plugin ที่ทำให้เราทำ Cookie Consent แสดง Popup เพื่อขอความยินยอมจากผู้ใช้งานได้แบบง่ายๆ เลย ตัว Plugin เป็น Vanilla JavaScript นั่นหมายความว่า ส...
ลองเขียน Hello World Solana ด้วยการใช้ Solana Playground
สวัสดีครับ วันนี้วันศุกร์ค่ำๆ ก่อนนอนว่างๆ เลยลองเล่นตัว Solana Playground ดูซักหน่อยว่าเป็นยังไง (ยังเป็นตัว Beta อยู่นะ...
ตัวอย่างการทำ Tab ด้วย Headless UI ของดีจาก Tailwind Labs
Headlessui เป็น UI Components จากทีม Tailwind Labs ปัจจุบัน รองรับ React.js และ Vue.js โดยปัจจุบันมี Component ให้เลือก เช่น Dropdown, Menu, Tog...
ตอนที่ 7 - API Routes การทำ API ด้วย Next.js
API Routesใน Next.js เราสามารถทำตัวเป็น Backend APIs ได้เลย โดยที่ไม่ต้องมี Server เพิ่ม โดยเพียงแค่สร้างโฟลเดอร์ `api` ไว้ภายใน `page...
ตอนที่ 6 - การทำ Dynamic Routes
ปกติแล้ว Routing ใน Next.js จะเป็นแบบ file-system เพียงแค่เราสร้างไฟล์ในโฟลเดอร์ `pages` เราก็จะได้หน้าเว็บนั้นๆ เช่น สร้างไฟล์ `about.js` url เราก็จะเป็น `/about`ทีนี้ถ้าเรามีเ...