สวัสดีครับ จริงๆแล้วบทความนี้เคยทำมานานแล้ว แล้วก็บ่อยด้วย เกี่ยวกับขั้นตอนการติดตั้ง Ubuntu 13.10 ซึ่งเวอร์ชั่นใหม่  ก็มีกำหนดจะออกเดือนหน้าอยู่แล้วด้วย วันนี้ก็เลยถือโอกา

ขั้นตอนการติดตั้ง Ubuntu 13.10 Desktop

สวัสดีครับ วันนี้มาเขียนบล็อกสั้นๆ แนะนำทริคเล็กๆ น้อยๆ ในการแก้ปัญหา warning ของ VS Code นะครับ ซึ่งจะเกิด เมื่อเราใช้ Tailwind CSSปัญหาคือ VS Code จะขึ้น warning Unknown at ru

วิธีแก้ปัญหา unknown at rule ของ tailwind css

สวัสดีครับ วันที่ 6 เป็นการทำ animation คล้ายๆ การ์ดเกม  ซึ่ง ก็จะมี 2 states คือ ตอนที่เอาเมาท์ไปชี้ ก็จะคล้ายๆ เราเลือกการ์ดใบนั้น และก็ตอนคลิ๊กที่การ์ด 

เรียน​ CSS Animation | Day 6 - Card Game

สวัสดีครับ วันที่ 5 เป็นการทำป้ายไฟ Neon เท่ๆ ด้วยการใช้ `text-shadow` ครับ และก็มี effect นิดๆหน่อย แรงบันดาลใจจากเว็บ ETH Global Tokyo Day 5 

เรียน​ CSS Animation | Day 5 - Open 24 Hours

สวัสดีครับ วันที่ 4 เป็นการทำ ส่วนโชว์ Information โดยเมื่อกด click ก็จะมีข้อความขึ้นมา เป็น animation ครับ Day 4 - Click Meโค๊ดบน Codepen<ReactCodepen hash="YzjGawG" />

เรียน​ CSS Animation | Day 4 - Click Me!

สวัสดีครับ วันที่ 3 เนื่องจากไม่มีเวลาเท่าไหร่ ทำให้วันนี้ไม่ได้เรียนรู้อะไรมาก เลยมาทำ Hover Effect ง่ายๆครับ โดยใช้ `rotate`, `translateY` และ `scale` Day 3 - Simple Hover

เรียน​ CSS Animation | Day 3 - Simple Hover

สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับวันที่ 2 ฝึกการทำ Card Flip ครับ หลังจากได้ทำลง Codepen เสร็จ และอัพคลิป video ลง Yout

เรียน​ CSS Animation | Day 2 - Card Flip

สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับ สำหรับวันแรก ก็จะเป็นเรื่องง่ายๆ คือการใช้ keyframes ทำการ transform `scale` ให้เหมือ

เรียน​ CSS Animation | Day 1 - Heart

สืบเนื่องมาจากผมใช้ giscus.app ที่เป็น Comment System โดยใช้ Github Discussions แต่ปัญหาคือ ผมไม่เคยได้ Notifications เวลามี activity ใน discussions เลย ทั้

บันทึกการใช้ Cloudflare Worker เพื่อรับ Webhook จาก Github

วิธีการทำปุ่ม Connect Wallet สำหรับ Decentralize App  ปัจจุบันนั้นง่ายมาก และมีหลาย Library ให้เลือกใช้ เช่น - web3-react- Web3M

ทำปุ่ม Connect Wallet เชื่อมต่อ Blockchain ง่ายๆ ด้วย Rainbowkit

วันนี้จะมาแนะนำ Frontend Tooling ตัวนึงที่ชื่อว่า Vite อ่านว่า วีด อ่านคล้ายๆกับ veet โดย Evan You ผู้สร้าง Vue.js นั่นเอง แต่ตัว Vite ไม่ได้รองรับแ

สร้างโปรเจ็ค React ด้วยการใช้ Vite

Cookie Consent เป็น JavaScript Plugin ที่ทำให้เราทำ Cookie Consent แสดง Popup เพื่อขอความยินยอมจากผู้ใช้งานได้แบบง่ายๆ เลย ตัว Plugin เป็น Vanilla JavaScript นั่นหมายความว่า ส

ตัวอย่างการใช้ Cookie Consent เพื่อรองรับ PDPA แบบง่ายๆ

สวัสดีครับ วันนี้วันศุกร์ค่ำๆ ก่อนนอนว่างๆ เลยลองเล่นตัว Solana Playground ดูซักหน่อยว่าเป็นยังไง (ยังเป็นตัว Beta อยู่นะ

ลองเขียน Hello World Solana ด้วยการใช้ Solana Playground

Headlessui เป็น UI Components จากทีม Tailwind Labs ปัจจุบัน รองรับ React.js และ Vue.js โดยปัจจุบันมี Component ให้เลือก เช่น Dropdown, Menu, Tog

ตัวอย่างการทำ Tab ด้วย Headless UI ของดีจาก Tailwind Labs

 API Routesใน Next.js เราสามารถทำตัวเป็น Backend APIs ได้เลย โดยที่ไม่ต้องมี Server เพิ่ม  โดยเพียงแค่สร้างโฟลเดอร์ `api` ไว้ภายใน `page

ตอนที่ 7 - API Routes การทำ API ด้วย Next.js

ปกติแล้ว Routing ใน Next.js จะเป็นแบบ file-system เพียงแค่เราสร้างไฟล์ในโฟลเดอร์ `pages` เราก็จะได้หน้าเว็บนั้นๆ เช่น สร้างไฟล์ `about.js` url เราก็จะเป็น `/about`ทีนี้ถ้าเรามีเ

ตอนที่ 6 - การทำ Dynamic Routes

ตอนนี้จะเป็นเรื่องของ Fetching API เพื่อดึงข้อมูลจาก API มาแสดง ซึ่งจริงๆ แล้ว fetching data นั้นทำได้หลายท่ามากๆ เช่น Client Side - ด้วยการใช้ `useEffect` และทำการ `fetch` แ

ตอนที่ 5 - Data Fetching และการดึงข้อมูลจาก API

วิธีการทำระบบไฟล์อัพโหลดด้วยการใช้ Node.js + Express และ Multer ซึ่งบทความนี้เป็นบทความอัพเดท จากที่เคยเขียนไว้ก่อนหน้านี้ 7-8 แล้วครับ ทำระบบอัพโหลดไฟล์ด้วย Node.js(/blog/2015/

ทำระบบอัพโหลดไฟล์ด้วย Node.js + Multer

วันนี้ได้ลองหัดเล่นตัว Spin ก็เลยนำมาเขียนบันทึกเป็นการเรียนรู้เอาไว้ครับ ซึ่งจริงๆแล้วตัว Spin มันก็ยังเป็น early preview อยู่นะครับ เนื่อง

บันทึกการลองเล่น Spin

วันนี้เพิ่งได้อัพเดท Rust เป็นเวอร์ชั่นล่าสุด คือ 1.62.0 ก่อนหน้านี้คือ 1.60.0 และได้ไปอ่าน Changelog  แล้วพบ

Rust 1.62.0 มี Cargo Add แล้ว

วันนี้ขอเขียนบันทึกเรื่อง Git Rebase ไว้ซักหน่อย เพราะเป็นคำสั่ง ที่ใช้บ่อยมากๆ แม้จะไม่เท่าพวก `git push`, `git pull`, `git checkout` ก็เถอะ โดยผมติต่างว่า ผู้อ่าน อาจจะพอมีพ

บันทึกการใช้ Git Rebase และ Squash

บันทึกการเรียน Tour Of Rust บทเรียนที่ 5 - Tour of Rust - Chapter 5 - Ownership & Borrowing DataBorrowing กับ Ownership เป็นเรื่อ

Tour of Rust - Ch.5 - Ownership & Borrowing Data

พอดีว่าผมห่างหายกับการเขียน React.js ไปพักใหญ่ๆ คือแทบไม่ได้เขียนโค๊ด หรือทำเว็บเลย ตั้งแต่ปีที่แล้ว และเพิ่งกลับมารื้อฟื้นใหม่ ก็ต้นปี 2022 ที่ผ่านมา ก็ได้ไปเจอตัว State Manageme

[React.js] หัดใช้งาน Zustand เพื่อจัดการ State

สวัสดีครับ ตอนที่ 4 มาพูดถึงเรื่องของ Pre Rendering กันครับ บทนี้ส่วนใหญ่เป็นทฤษฎี พยายามอ่านทำความเข้าใจไปก่อนครับ ไม่เข้าใจทั้งหมดไม่เป็นไร รอบทถัดไปเรื่อง Data Fetching เพื

ตอนที่ 4 - เรื่องของ Pre Rendering

มาต่อกันที่บทที่ 3 ครับ บทนี้ก็ยังใช้ source code ที่ได้จาก `create-next-app` นะครับ วันนี้ต่อด้วยเรื่องของ Assets และการจัดการ CSS โดย Assets ก็หมายถึงพวก static files ทั้งหลาย เ

ตอนที่ 3 - การจัดการ Assets, Metadata และ CSS

 Create Pages & Routingสำหรับบทเรียนนี้ เรายังคงอ้างอิงจาก โค๊ด จาก `create-next-app` โดยเราจะทำหน้าเว็บขึ้นมาเพิ่ม 2 หน้าครับ คือ Index  กับหน้า About 

ตอนที่ 2 - สร้าง Page และการ navigate ระหว่าง Pages

สวัสดีครับ มาเริ่มตอนแรกกันด้วย Next.js คืออะไร และการขึ้นโปรเจ็ค Next.js กันครับ Next.js คืออะไร?Next.js เป็น React Framework ที่ช่วยให้เราทำงานส

ตอนที่ 1 - Hello Next.js เริ่มสร้างโปรเจ็ค

ผมเคยเขียนบทความเกี่ยวกับ Next.js ไว้เมื่อปี 2020 ตอนที่ผมเพิ่งหัดใช้ Next.js ณ​ ตอนนั้นคือ version 9.3 และปัจจุบัน ก็มีพัฒนามาจน vers

Next.js คืออะไร? + มาหัดเขียนเว็บด้วย Next.js กันดีกว่า

สวัสดีครับ ขอต้อนรับเข้าสู่เนื้อหา React.js ฉบับเริ่มต้น  โดยเนื้อหา เหมาะสำหรับมือใหม่หัดเขียนนะครับ เน้นพื้นฐาน และมีตัวอย่างง่ายๆ ให้ลองทำ ลองฝึกครับ เตรียมความพร้

ตอนที่ 1 - เริ่มต้นเขียน React.js

ช่วงนี้เห็นหลายๆเว็บใช้ Tailwind CSS กันเยอะมาก และแต่ละเว็บก็หน้าตาคล้ายๆกัน ชวนให้นึกถึงสมัยก่อน ที่เปิดเว็บไหนๆ ก็เจอแต่ Bootstrapแม้ว่าจะเห็นเว็บ

วิธีเริ่มต้นใช้งาน Tailwind CSS ง่ายๆ ผ่าน CDN

 FallbackLink: Ethernaut : 1. Fallbackจากทีแรกผมตั้งเป้าหมายไว้ว่า จะลองหัดเขียนโดยที่

Ethernaut - Level 1 - Fallback

สืบเนื่องจากช่วงนี้ผมสนใจ WebAssembly เป็นพิเศษ เนื่องจากสนใจ Rust ด้วย และคิดว่ามันก็น่าสนใจ และมักจะเห็นคนพูดถึงสองตัวนี้บ่อยๆ ก็เลยพยายามศึกษาเรื่อยๆ เวลาว่างๆ เอาจริงๆ

ทดลอง Compile Rust เป็น WebAssembly

มาต่อ Part ที่สอง ของการสร้าง ERC-20 token ด้วย ink! กันครับ ก่อนหน้านี้เราสร้าง Token ที่มี `total_supply` มีการ Transfer token ได้แล้ว- สร้าง ERC-20 Token ด้วย ink! P

สร้าง ERC-20 Token ด้วย ink! Part 2/2

วันนี้มาลองสร้าง ERC-20 token ด้วย ink! ครับ ซึ่งถ้าหากใครไม่เคยเขียน ink! มาก่อน หรือภาษา Rust มาก่อน แนะนำอ่านบทความก่อนหน้านี้ที่ผมได้เขียนไว้ครับ ทดลองเขียน S

สร้าง ERC-20 Token ด้วย ink! Part 1/2

สำหรับบทความนี้จะเป็นบทความเกี่ยวกับการเตรียมเครื่องมือ การตั้งค่า สำหรับ Substrate Development กันนะครับ เนื่องจาก Substrate นั้น เขียนด้วยภาษา Rust(ht

เตรียมเครื่องมือสำหรับ Substrate Development

วันนี้มาลองทำ custom tasks สำหรับ Hardhat กันดีกว่า ซึ่งปกติแล้ว คำสั่งที่ผมมักใช้บ่อยๆ สำหรับ Hardhat คือ `run` กับ `test````npx hardhat run <SCRIP

วิธีการสร้าง Custom Task สำหรับ Hardhat

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

วิธีการลบ node_modules ทั้งหมด

สวัสดีครับ วันนี้ผมจะขอมาบันทึกการเรียนรู้ Solidity ผ่าน Ethernaut นะครับ ตัวผมเองก็เพิ่งเริ่มศึกษา Solidity ไม่นาน ก็เลยคิดว่าจะลองเอา Et

บันทึกการเรียนรู้ Solidity ผ่าน Ethernaut

วันนี้ลองเล่น และลองอ่าน Overview ตัว Fastify เบื้องต้นดู ว่ามันเป็นยังไง หลังจากได้ยินมาซักพักแล้ว อยากรู้ว่าถ้าเปรียบเทียบกับ Express(https://expres

Fastify 101 - ทดลองเล่น Fastify เบื้องต้น

 React สำหรับผู้เริ่มต้นสวัสดีครับ 👋สำหรับ Tutorial นี้ผมสร้างมาเพื่อจุดประสงค์คือ ต้องการทบทวนตัวเอง เพราะว่าช่วงนี้ผมห่างหายจากการเขียนโค๊ดไปซักพัก เกือบๆ 1 ปี หรือแม้แต่

React สำหรับผู้เริ่มต้น (ฉบับปี 2022)

สวัสดีครับ วันนี้ผมได้ลองทำตาม Tutorial นี้ - Develop Smart Contracts with ink! ก็เลยนำมาย่อย อธิบายทบทวนตัวเองไปในตัวด

ทดลองเขียน Smart Contract ด้วย ink! + Rust + Substrate

บันทึกการเรียน Tour Of Rust บทเรียนที่ 4 - Tour of Rust - Chapter 4 - Generic TypesGeneric เป็น type ที่มีความสำคัญมากในภาษา Rust

Tour of Rust - Ch.4 - Generic Types

สวัสดีครับ วันนี้ขอบันทึกเกี่ยวกับการใช้งาน Terrain และ LocalTerra ครั้งแรกนะครับ ส่วนตัวผมไม่เคยเขียนหรือทำอะไรกับ Platform ทางฝั่ง Terra เลย เคยได้ยิน และเห็นบทความผ่านตามาเฉยๆ 

บันทึกการใช้งาน Terrain และ LocalTerra สำหรับทำ Smart Contract บน Terra

สำหรับคนที่สนใจเรียนเกี่ยวกับ Web3 / Blockchain / Smart Contract พลาดไม่ได้เลยกับเว็บ Pointer เรียนฟรีๆ แล้วยังได้ตังอีกด้วยอย่างที่ผมเคยบอกว่าช่วงนี้

แนะนำเว็บ Pointer.gg - เรียนฟรีแถมยังได้เงินอีกต่างหาก

เป้าหมายคือ ต้องการสร้าง Smart Contract ด้วย Assembly Script ตั้งแต่เริ่มต้น โดยดูจาก NEAR Example - Guestbook(https://examples.near.org/guest

สร้าง Smart Contract บน Near Protocol ด้วย Assembly Script

วันนี้ผมได้ลองใช้งาน esbuild ครั้งแรก ซึ่งก่อนหน้านี้ เคยได้ยิน และได้เห็นผ่านตา แต่ไม่เคยได้จับมันจริงๆ เพราะส่วนใหญ่ผมก็จะเป็นแค่ผู้ใช้งาน Library/

ลองหัดใช้งาน esbuild เบื้องต้น

สวัสดีครับ วันนี้มาแนะนำบทความสร้าง Token  บน Solana ผ่านการใช้งาน SPL Token CLI กันครับทั้งหมดเป็น Devnet นะครับ และไม่ควรใช้ Wallet จริง ควรเป็น Wallet (Keypair

ทดลองสร้าง Token บน Solana ด้วย SPL Token CLI

บันทึกการเรียน Tour Of Rust บทเรียนที่ 3 - Tour of Rust - Chapter 3 - Basic Data Structure Types Chapter 3 - Basic Data Structu

Tour of Rust - Ch.3 - Basic Data Structure Types

NEAR เป็นอีกหนึ่ง Blockchain ที่ผมสนใจรองลงมาจาก Solana เพราะด้วยทั้งสองใช้ภาษา Rust ซึ่งเป็นภาษาที่ผมกำลังหัดเขียนอยู่พอดี จริงๆ Terra, Polkadot, Mina,

บันทึกการเรียนรู้ NEAR ผ่าน NEAR 101 Workshop

สวัสดีครับ วันนี้จะมาบันทึกการเขียน Smart Contract ด้วย Rust บน NEAR นะครับ เนื่องจากว่าผมลองไปทำ Challenge 2 - Hello World smart contract เ

บันทึกการเขียน Smart Contract แรก บน NEAR Protocol

สวัสดีครับ ช่วงนี้ผมก็พยายามลองเรียนไปเรื่อย มั่วๆ หลายๆ ภาษา หลายๆ Protocol เข้าใจบ้าง ไม่เข้าใจบ้าง อาศัยทำตาม ค่อยๆ อ่าน ค่อยๆ จด ไปเรื่อยๆ วันนี้มาถึงคิวของ NEAR ครับวันนี้ม

ลองหัด NEAR ด้วยการใช้ NEAR CLI เบื้องต้น

ก่อนหน้าที่ผมเขียนบทความไว้ เขียน Solana Program ด้วย Anchor Framework เมื่ออาทิตย์ก่อน ณ ตอนนั้นที่เขียน ตัว Anchor คือ เวอร์ชั่น ~0.23~ แต่วันนี้ An

อัพเดท Anchor v0.24

สวัสดีครับ ของ Week 2 เรื่องของ Arrays ผมอาจจะไม่ได้ฟังและดู Video ทั้งหมดนะครับ มีข้ามๆไปบ้าง ส่วนใหญ่คือดู Slide และก็อ่าน Note เอาครับ ซึ่งก็แปล และสรุปจาก Note เป็นหลักครับ

CS50x : Week 2 - Arrays

บททึกการเรียน Tour Of Rust บทเรียนที่ 2 - Tour of Rust - Chapter 2 - Basic Control Flow Chapter 2 - Basic Control Flow 🦀

Tour of Rust - Ch.2 - Basic Control Flow

บันทึกการเรียน Tour Of Rust บทเรียนที่ 1 - Tour of Rust - Chapter 1 - The Basics Chapter 1 - The Basics 🦀 Variables (ตัว

Tour of Rust - Ch.1 - The Basics

สวัสดีครับ ช่วงนี้เป็นช่วงที่ผมพยายามเรียนภาษา Rust บางครั้งเรียนๆ แล้วก็ลืม เลยอยากเขียนบันทึกไว้ บทความนี้ก็เลยมีจุดประสงค์เพื่อใช้จดบันทึกการเรียน Rust ผ่าน Tour of Rust(http

เรียนภาษา Rust ผ่านเว็บ Tour of Rust

สวัสดีครับ วันนี้มาแนะนำ Platform ในการเรียน Web3 / DApp / Smart Contract / Blockchain ครับ ซึ่งช่วงนี้ผมก็น่าจะวนเวียนอยู่แถวๆนี้ครับ เพราะกำลังเริ่มต้นศึกษา และก็ไม่ได้สนใจแค่ E

เรียน Web3 / DApp เบื้องต้น ด้วย Figment Pathways

ก่อนหน้านี้ ผมเขียนบทความ เริ่มต้นเขียน Solidity ด้วย Hardhat ไปแล้ว วันนี้ขอเป็นบทความเริ่มต้นคล้ายๆ เดิม แต่เปลี่ยนจาก Hardhat(https://har

หัดเขียน Smart Contract แรก ด้วย Remix IDE

วันนี้ลองทำ Frontend เพื่อใส่ปุ่ม Connect Wallet ให้กับเว็บไซต์ ซึ่งผมจะใช้ตัว Solana Wallet Adapter ข้อดีคือ มัน handle หลายๆ Wal

ทำ Frontend เชื่อมต่อ Wallet ด้วย Nextjs + Solana Wallet Adapter

Anchor เป็น Solana Framework สำหรับเขียน Program  ที่ช่วยให้เขียน Solana Program ง่ายและสะดวกขึ้น ปกติถ้าเราไม่ใช้ Ancho

เขียน Solana Program ด้วย Anchor Framework

สวัสดีครับ วันนี้มาพบกับบทความเกี่ยวกับการเขียน Smart Contract บน Solana กันนะครับ จริงๆ บทความนี้เกิดขึ้นมาเพราะผมอยากทบทวนและเรียบเรียงสิ่งที่เรียนรู้มาครับ และอยากลองดูว่าเข้าใ

มาลองหัดเขียน Smart Contract บน Solana กัน ด้วยแอพ Hello World

สวัสดีครับ วันนี้เป็นการจัดบันทึกนะครับ เนื้อหาอาจจะไม่ได้เรียบเรียงเท่าไหร่ เมื่อสัปดาห์ที่แล้ว ผมได้เรียน Bootcamp ที่จัดโดย Chainlink

บันทึก Solana Blockchain Developer Bootcamp โดย Chainlink

เนื้อหา Week 1 - C เริ่มเรียนการเขียนโปรแกรมจริงๆ ด้วยการเขียนภาษาซี  สำหรับบทเรียนนี้ มือใหม่ หรือคนที่ไม่เคยหัดเขียนโปรแกรม อาจจะงงๆ กับการใช้งานโปรแกรมได้ และผมม

CS50x : Week 1 - C

ช่วงนี้ผมค่อนข้างอินกับ Smart Contract เพราะกำลังอยู่ในช่วงหัดเขียน หัดลองครับ ก็เลยลองเขียนเป็นบทความเผื่อใครหลายๆ คนที่สนใจเหมือนๆกัน ตัวผมเองก็ยังเป็นมือใหม่มากๆบทความนี้จะพา

เริ่มต้นเขียน Solidity ด้วย Hardhat

สวัสดีครับ สำหรับบทความนี้จะมาแนะนำขั้นตอนเริ่มต้นการตั้งค่า และโปรแกรมที่จะใช้เขียนภาษา C++ กันนะครับ โดยสิ่งที่ต้องมีคือ Compiler ครับ ซึ่งถ้าเราใช้ IDE บางตัว ก็อาจจะมี Compile

เริ่มต้น C++ บน Mac OS

เนื้อหา Week 0 - Scratch เป็นเรื่องทั่วๆไปสำหรับคนที่ไม่เคยเรียน Computer Science ก็จะได้รู้ว่าคอมพิวเตอร์มันอ่านข้อมูล เก็บข้อมูล หรือเข้าใจข้อมูลได้ยังไง binary คืออะไร algorith

CS50x : Week 0 - Scratch

สวัสดีครับ ผมทำบทความชุดนี้ขึ้นมา เพราะอยากจดบันทึกสิ่งที่ได้เรียนในคอร์ส CS50 นะครับ ได้ทบทวนเนื้อหา ได้เรียนรู้สิ่งใหม่ๆ ได้ฝึกเรียบเรียง และ

จดบันทึกคอร์ส CS50x - Harvard

สวัสดีครับ บทความนี้ขอจดบันทึการใช้งาน Ganache บน Mac OS ซักนิดนะครับสืบเนื่องจากช่วงนี้ผมเริ่มหัดเขียน Solidity / Web3 / Blockchain มาได้ 1

ทดลองใช้งาน Ganache UI

สวัสดีครับ ตอนนี้เว็บ Devahoy ก็มีการเปลี่ยนแปลงอีกแล้วนะครับ คือเปลี่ยนจาก ~~Gatsby~~ มาใช้ Next.js เรียบร้อยแล้วจริงๆ ต

อัพเดทเว็บอีกแล้ว v6.0 จาก Gatsby มา Next.js

tmux เรียกตัวเองเป็น terminal multiplexer มีประโยชน์มากเวลาอยากแบ่ง windows แยกหน้าจอ หรือทำงาน session ค้างๆนานๆ เห็น dev หลายๆ คนใช้ tmux + vi/vi

จดบันทึกการใช้งาน tmux

สวัสดีครับ ช่วงนี้ผมสนใจอยากเขียนภาษา Rust ก็เลยเริ่มต้นศึกษา เวลาว่างๆ วันละ ครึ่งชม. หรือ 1ชั่วโมงบ้าง แล้วแต่วัน เลยอยากจะเขียนบล็อกบันทึกไว้ สืบเ

มาหัดเขียนโปรแกรมด้วยภาษา Rust กันเถอะ

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

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

หากใครทำเว็บ JAM Stack ไม่ว่าจะเป็น Gatsby, Next.js หรือ Static Site อื่นๆ ก็คงต้องมองหา Comment System ให้กับเว็บไซต์ของเรา ไม่เหมือน Wordpress ที่มีระบบ Comment ติดมาด้วยซึ่งพ

แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website

สวัสดีครับ ห่างหายไปนาน วันนี้มาแนะนำ Chalk.js ครับ เป็น Debugging Tool ตัวนึงที่ผมใช้บ่อยมากๆ และจริงๆแล้ว หลายๆ Library ก็ใช้เจ้าตัวนี้อยู่เช่นกัน เพียงแค่บางทีเราไม่รู้เท่า

มาลองใช้งาน Chalk.js เพิ่มสีสันให้ Output ของเรากันดีกว่า

สวัสดีครับ วันนี้ผมได้มีโอกาสมาจับ Windows 10 ซึ่งตัว Windows เนี่ยผมไม่ได้ใช้งาน มา 7-8 ปีได้ละครับ เพราะผมได้ซื้อคอมมาประกอบ ใช้งานนั่นเอง เหตุผลหลักๆ คือ1. อยากหาเครื่อ

ลองใช้งาน Windows 10 + WSL 2 และปรับแต่งนิดหน่อย

มาเริ่มลงมือทำ Workshop กันดีกว่าครับ หลังจากได้เรียนรู้ Nuxtjs มา 11 ตอนแล้ว สำหรับตอนนี้จะเป็นการนำเอาทุกๆอย่างที่เรียนมาทั้งหมด มาทำ Workshop กันนะครับ โดยอาจจะมีสอดแทรกเนื้อหา

Nuxt.js Fundamental ตอนที่ 12 - ทำ Workshop เว็บ Portfolio

ต่อมาดูเรื่องของการทำ SEO กันบ้างนะครับ การทำ SEO ใน Nuxt.js คือ เราสามารถกำหนด title, แทรก script หรือ stylesheet ลงไปใน `<head></head>` ได้ หรือ การกำหนด meta tag ของ Social med

Nuxt.js Fundamental ตอนที่ 11 - ทำ SEO และ Meta tags

ต่อมาขอเสริมเรื่องการทำ Internal API กันซักนิด ต่อยอดจาก ตอนที่ 8 - ทำระบบ Authenticationจากตอนก่อนหน้านี้ ผมใช้ API ที่อยู

Nuxt.js Fundamental ตอนที่ 10 - การทำ Internal API และ Middleware

เชื่อว่าในเกือบทุกๆ Web Application ย่อมมีการทำระบบ Authentication แน่นอน มีระบบ Login ระบบสมัครสมาชิก และระบบเหล่านี้ ก็เป็นระบบเริ่มต้น ที่น่าศึกษา เพราะเป็นพื้นฐานของเว็บไซต์เก

Nuxt.js Fundamental ตอนที่ 8 - การทำระบบ Authentication

สำหรับตอนนี้เป็นการ Deploy โปรเจ็ค Nuxt.js ของเรากันครับการ Deploy เราจะมี 2 แบบครับ คือ- Server Side - เราจำเป็นต้องใช้ Hosting ที่รองรับ Node.js เช่น VPS, Digital Ocean, Her

Nuxt.js Fundamental ตอนที่ 9 - การ Deploy Nuxt.js

มาถึงเรื่องการเก็บข้อมูลลง Store โดยใช้ Vuex กันบ้างครับ ตัว Nuxt.js ก็รองรับการใช้งาน Vuex เลย  หากเราต้องการใช้งาน ก็แค่เพิ่มไฟล์ `index.js` ใน folder `store

Nuxt.js Fundamental ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store

สวัสดีครับ วันนี้มีคอร์ส Nuxt.js มาแนะนำครับ นั่นก็คือ Nuxt.js Fundamental โดยเนื้อหาแบ่งเป็น 2 แบบคือ แบบบทความ และ แบบ Video บน Youtube ดูยาวๆ

บทความและวิดีโอสอน Nuxt.js Fundamental

ต่อมาคือการ Fetch ข้อมูลจาก API นะครับ ใน Vue.js ปกติ เราอาจจะ fetch data โดยผ่าน function `mounted` หรือสร้าง function ใน `methods` อาจจะใช้ `fetch` หรือ `axios` ก็ได้ซึ่งใน 

Nuxt.js Fundamental ตอนที่ 6 - การ Fetch ข้อมูลจาก API

 Nuxt Content คืออะไร?Nuxt Content เป็น Module ที่ทำให้เราสามารถที่จะอ่าน JSON, YAML, Markdown หรือ CSV ใน folder `content` เหมือนกับการใช้พวก MongoDB API หรือเป็น QueryBuild

Nuxt.js Fundamental ตอนที่ 5 - Nuxt Content และ Async Data

สำหรับหัวข้อนี้จะเป็นเรื่องของทฤษฎี อาจจะอ่านแล้วเข้าใจยากซักหน่อย แต่เชื่อเถอะว่าเนื้อหาส่วนนี้ค่อนข้างสำคัญครับ และมีประโยชน์มาก หากเราเข้าใจ Concept เข้าใจการทำงานของมัน เราก็ส

Nuxt.js Fundamental ตอนที่ 4 - Nuxt.js Concept

ก่อนหน้านี้ใน ตอนที่ 1 เราจะเห็นได้ว่า เราสามารถสร้างหน้า Pages ง่ายๆ ด้วยการสร้างไฟล์ `.vue` ไว้ในโฟลเดอร์ `pages` เท่านั้น ก็ได

Nuxt.js Fundamental ตอนที่ 3 - การกำหนด Routing

สำหรับ ขั้นตอนนี้ เราจะใช้ตัวช่วยอย่าง `create-nuxt-app` มาขึ้นโปรเจ็ค Nuxt.js ครับ ข้อดีของ `create-nuxt-app` คือ เป็น Script ที่ช่วยทำให้เราไม่ต้องมา Config ค่าต่างๆ ของ Nux

Nuxt.js Fundamental ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app

สวัสดีครับ บทความนี้ผมจะพาเพื่อนๆ น้องๆ พี่ๆมาลองเขียนเว็บไซต์ด้วยการใช้ Nuxt.js กันนะครับ ซึ่งสิ่งที่ควรมีคือ เพื่อนๆ ต้องมีพื้นฐานการเขียนเว็บมาก่อน และพื้นฐานการใช้ Vue.j

Nuxt.js Fundamental ตอนที่ 1 - เริ่มต้นกับ Nuxt.js

สวัสดีครับ ขอต้อนรับสู่ Nuxt.js Tutorial บทความสอนเขียนเว็บด้วย Nuxt.js ครับสำหรับ Tutorial ชุดนี้ เพื่อนๆ สามารถอ่านได้ฟรีครับ หรือใครชื่นชอบแบบ Video สามารถดูคอร์สออนไลน์บน Yo

Nuxt.js Fundamental ตอนที่ 0 - พื้นฐานการเขียนเว็บด้วย Nuxt.js

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

วิธีการ Kill Process

สวัสดีครับ เนื่องจากว่าช่วงนี้ผมรู้สึกว่า เวลาเปิด iTerm2 หรือ Terminal ขึ้นมา มันเริ่มช้าๆ หน่วงๆ บ้างเวลาพิมพ์คำสั่ง  สงสัยเ

ทำไม ZSH ของเราช้าจัง? + ทำให้เร็วขึ้นได้มั้ย

วันนี้นั่งลองแก้ปัญหาการใช้งาน VS Code คือ ทุกๆครั้ง ที่จะพิมพ์ แล้วมันขึ้น augo suggestion แล้วผมต้องกด `Shift` + `(` เพื่อจะพิมพ์ function แต่มันดัน accept augo suggestion ซะอย่

ปิด Auto suggestion ใน VS Code ที่มันกวนใจ

Ahoy! สวัสดีครับวันนี้ผมจะมาเขียนบล็อกแชร์ประสบการณ์ และบันทึกการอัพเดท Blog ของผมกันนะครับ จริงๆ ไม่ได้ปรับแก้อะไรมากมาย ยังคงใช้ Gat

บันทึกการการอัพเดท Blog v3 เปลี่ยนไปใช้ Gatsby + MDX และ Theme UI

สืบเนื่องจากว่าตอนนี้ย้ายบล็อก มา Host เองแล้ว  เมื่อก่อน Netlify มี DNS และ CND เอง ก็เลยยกเลิก Cloudflare ไป แต่ตอนนี้ไม่ใช้ Netlify แล้ว ก็เลยกลับมาลอง Cloudfl

ว่าด้วยเรื่อง Caching ของ Cloudflare

สวัสดีครับ วันนี้ขอมาเขียนเป็นบันทึก วิธีการสร้าง SSH การ Setup SSH ต่างๆ เพราะเนื่องจากว่า ทุกครั้งที่จะ Generate ใหม่ หรือสร้างใหม่ หรือไปเพิ่ม SSH ทำ Deploy Key ทีไร ก็ลืมคำสั่

SSH คืออะไร? + วิธีสร้าง SSH Key

วันนี้นั่งปรับแต่ง CSS โดยจะลองใช้ `position: sticky` แต่แอบสงสัยว่า ทำไมบาง element มันก็ไม่ยอม sticky เวลาเลื่อน scroll ลงแฮะ ลองแก้ และลองหาข้อมูล พบว่า มีหลายๆข้อเลยที่มีโอกาส

ปัญหา CSS Sticky

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

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

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

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

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

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

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

จดบันทึก Command Line

วันนี้มาพบกับบทความเกี่ยวกับพื้นฐาน React.js ครับ ว่าด้วยเรื่องการของจัดการ Form และ Input ต่างๆ กันนะครับเนื่องจากว่าการทำ Web Application ปฎิเสธไม่ได้ว่า เราต้องใช้พวก Input F

Tutorials

สอนเขียนเว็บด้วย Next.js + Mini Workshop

Nuxtjs Fundamental - พื้นฐานการเขียนเว็บด้วย Nuxt.js

สอนทำเว็บไซต์ด้วย Node.js, Express และ MongoDB

All Posts

ขั้นตอนการติดตั้ง Ubuntu 13.10 Desktop