Chai Phonbopit

สวัสดีครับ หลายคนอาจจะงงๆ ว่าทำไมหน้าเว็บเปลี่ยนไป? จริงๆแล้วคือผมได้ทำการย้ายบล็อกจากเดิมที่เป็น Next.js + MDX มาเป็น Ghost แทน และบล็อกเดิมก็ถูก redirect ไป https://2023.devahoy.com ถ้าเข้ามาจาก link เดิมครับ


ทำไมถึงย้าย?

จริงๆ ก่อนหน้านี้ที่จะย้าย ผมตัดสินใจแยกเป็น 2 เว็บ

 * blog.devahoy.com - เป็น Ghost
 * devahoy.com - เว็บเดิม เป็น Next.js

แต่เนื่องจาก Next.js ไม่ได้มีเนื้อหาเพิ่ม แล้วจะแยกเว็บมาทำไมหว่า ก็เลยตัดสินใจใช้ root domain ดีกว่า เป็น Ghost ไปเลย ส่วน url เดิมๆ ก็ถูก deploy 

ย้ายบล็อกอีกแล้ว 🤣

ตัวอย่างการทำ Dialog หรือ Modal ด้วยการใช้ Tailwind CSS และ Headless UI ซึ่งตัว Headless UI เป็น UI Components รองรับทั้ง React และ Vue สำหรับใครที่ไม่รู้จัก สามารถเข้าไปดูรายละเอียด และตัวอย่างได้ในเว็บเลย มี Component หลายแบบ

Headless UICompletely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.Headless UI


เริ่มทำ Dialog

สร้างโปรเจ็ค React ขึ้นมา ด้วย Vite + TypeScript

npm create vite@latest headless-modal -- --template react-ts

cd headless-m

ทำ Dialog (Modal) ด้วยการใช้ Headless UI + TailwindCSS

หลังจากวันก่อน ได้ลองใช้งาน Playwright ไป วันนี้ก็เลยลองเอาตัว Playwright มาลองทำ testing ง่ายๆ ด้วยการจำลองเว็บ โดยใช้ default เว็บ ของ React + Vite (เว็บที่เป็น counter)

ลองใช้งาน Playwright ในการทำ e2e testingสวัสดีครับ บทความนี้มาลองเล่น Playwright เพื่อเอามาทำ automate e2e testing ครับ Playwright เป็น e2e testing framework (end to end) ที่พัฒนาโดย Microsoft ตัว API มีความคล้ายกับ Puppeteer (แน่นอนแหละ main contributor ของ puppeteer ย้ายมา playwright) Fast and reliable end-to-end testingDEV

ลอง Playwright เทสแอพ React + Vite แบบง่ายๆ

สวัสดีครับ บทความนี้เป็นตัวอย่างการทำ Subscribe events Token หรือจะใช้กับ NFT ก็ได้ โดยเมื่อเราได้รับ event เราก็สามารถแจ้งเตือน Push Notification, ส่ง email, Post Slack , Discord, Telegram หรือ LINE ก็แล้วแต่เราเลย

บทความนี้ ผมใช้ Viem นะครับ เนื่องจากลองเปลี่ยน Tool จาก Ethers.js ดู โดยการเชื่อมต่อผ่าน JSON RPC

viem · TypeScript Interface for EthereumBuild reliable Ethereum apps & libraries with lightweight, composable, & type-safe modules from viem.Get Started

ตัวอย่าง ผมจะลองทำการ subscri

ทำ subscribe event ง่ายๆ เมื่อมีคนโอน token (USDT)

เนื่องจากผมเห็น Twitter เกี่ยวกับ Viem ผ่านๆ เมื่ออาทิตย์ที่ผ่านมา ยังไม่ได้มีเวลาลอง วันนี้ก็เลยถือโอกาสลองเล่นดูว่าจะทดแทน Ethers.js ได้หรือไม่ และดี หรือไม่ดียังไง อย่างนึงที่ผมไม่ค่อยชอบสำหรับ Ethers.js คือ Docs ไม่ค่อยน่าอ่านเท่าไหร่ 🤣

viem · TypeScript Interface for EthereumBuild reliable Ethereum apps & libraries with lightweight, composable, & type-safe modules from viem.Get StartedGitHub - ethers-io/ethers.js: Complete Ethereum library and wallet implementation in JavaScript.Complete 

ลองใช้งาน Viem เปรียบเทียบกับ Ethers.js

ขั้นตอนการรัน Local Node สำหรับการพัฒนา Smart Contract บน Ethereum วันนี้ขอนำเสนอ 3 วิธีครับ คือ

 1. ใช้ Hardhat Node
 2. ใช้ Ganache
 3. ใช้ anvil (Foundry)

โดย default ถ้าเราไม่ได้ปรับอะไร ตัว local node จะรันที่ port 8545 คือ http://127.0.0.1:8545


Hardhat Node

Hardhat มาพร้อมกับ built-in ตัว Ethereum local Node

# 1. ติดตั้ง hardhat
npm install hardhat

# 2. run local node
npx hardhat node

จะได้ผลลัพธ์เป็น local Node มี account และ private key (ห้ามใช้เงินจริงเด็ดขาด เพราะเป็น public pr

วิธีการรัน Ethereum Blockchain บน Local Node

 How To Connect SSH into Docker Container> วิธีการ SSH เข้าไปใน Docker Container```bashdocker exec -it <container name> /bin/bash```

วิธีการ SSH เข้าไปใน Docker Container

วิธีการดูเวอร์ชั่น Ubuntu

 How To Check Ubuntu Version> วิธีการดูเวอร์ชั่น Ubuntu```bashlsb_release -a```หรือ```bashlsb_release -d```

 How To Command Lineเอาไว้รวบรวมคำสั่ง Command Line ที่ใช้บ่อยๆ ปัญหาคือ บางครั้งก็จะลืม เวลาจะหาวิธีหรือหาคำสั่ง ต้องพิมพ์ Google ทุกครั้งเลยเกิดไอเดียว่า ทำไมไม่ทำ Note ไว้

จดบันทึก Command Line

 How To Check File Size> วิธีการดูขนาดไฟล์Display ขนาดไฟล์ทั้งหมด```bashdu -h <PATH>```Sort by file Size```bashdu -h <PATH> | sort -rh | head -5```ดู Disk Space

วิธีการดูขนาดไฟล์

 How To Kill Process> วิธี kill processบางครั้ง Start server แล้ว port ชอบซ้ำ หรือบางที stop แล้ว process ค้างอยู่ รัน port ไม่ได้ เพราะ address ซ้ำวิธีแก้คือ หา process id

วิธีการ Kill Process

ติดตั้ง PostgreSQL บน Mac OS```bashbrew install postgresql start/restart servicebrew services restart postgresql```การ connect ผ่าน CLI```bash defaultpsql postgres

วิธีการเชื่อมต่อ PostgreSQL

เชื่อว่าหลายๆ คนน่าจะมีปัญหา มีหลายๆโปรเจ็ค แล้วแต่ละโปรเจ็ค ก็ต้องติดตั้ง npm ทำให้มี node_modules เต็มไปหมด และเปลืองเนื้อที่ในการเก็บข้อมูลซึ่งวิธีแก้คือ1. อาจจ

Tutorials

Latest Posts

Tags

วิธีการดูเวอร์ชั่น Ubuntu

How To Check Ubuntu Version

Tags