GyaanSetu WebDev

Frontend, Backend และ DevOps สำหรับเว็บยุคใหม่

244 articlesDeep, practical knowledge

ผู้ใช้กดปุ่มย้อนกลับบ่อยกว่าการควบคุมอื่นเกือบทุกอย่างในเบราว์เซอร์ โดยพวกเขาคาดหวังว่าหน้าจอก่อนหน้าจะ

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

WebDev · 3 min read

การแปลง HTML เป็น PDF ดูเหมือนจะเป็นเรื่องง่ายในทางทฤษฎี คุณสร้างเทมเพลตที่สวยงาม ใส่ข้อมูลลงไป และคาดหวังว่าจะได้เอกสารที่

การแปลง HTML เป็น PDF ดูเหมือนจะเป็นเรื่องง่ายในทางทฤษฎี คุณสร้างเทมเพลตที่สวยงาม ใส่ข้อมูลลงไป และคาดหวังว่าจะได้เอกสารที่เหมือนกับหน้าเว็บแบบพิกเซลต่อพิกเซล แต่ในความเป็นจริงแล้ว กระบวนการ...

WebDev · 6 min read

นักพัฒนาสามารถทำงานได้เร็วขึ้นถึง 10 เท่า หลังจากการเขียน TypeScript 7 ใหม่ด้วยภาษา Go แบบขนาน

TypeScript 7 มาถึงอย่างเป็นทางการแล้ว TypeScript 7 เปิดตัวแล้ว โดย Microsoft ได้สร้างแกนหลักขึ้นมาใหม่ด้วยภาษา Go ซึ่งการเปลี่ยนแปลงนี้จะช่วยให้การคอมไพล์โค้ดเร็วขึ้นมาก และทำให้ Editor ของคุณทำงานได้ลื่นไหลขึ้น...

WebDev · 3 min read

ใช้เว็บแคมควบคุมอวตาร VRM ได้ที่ 17.3 FPS บน M1 Max ด้วย MediaPipe

การทำ Retargeting จากเว็บแคมไปยัง VRM แบบเรียลไทม์: เบราว์เซอร์จะสามารถควบคุมอวตาร 3D โดยใช้เพียงเว็บแคมได้หรือไม่? ผมได้ทดสอบ MediaPipe Holistic เพื่อดูว่ามันสามารถตรวจจับการเคลื่อนไหวของร่างกาย ใบหน้า และมือ เพื่อ...

WebDev · 1 min read

WhatsApp RAG Bot แก้ปัญหาการสร้างข้อมูลเท็จ (Hallucination) ด้วยการบังคับใช้การอ้างอิงรูปแบบ JSON

โปรโตไทป์นี้สร้างขึ้นบน PostgreSQL ร่วมกับ pgvector โดยเปลี่ยนจากการใช้ Prompt ที่ซับซ้อนมาเป็นการใช้ JSON schema เพื่อตรวจสอบความถูกต้องของข้อมูลทุกชุด หากโมเดลไม่สามารถระบุ Chunk ID ได้ คำตอบจะถูกปฏิเสธ และผู้ใช้จะได้รับข้อความแจ้งอย่างชัดเจนว่า “ฉันมีข้อมูลไม่เพียงพอที่จะตอบคำถามนี้”

WebDev · 2 min read

การเปลี่ยนมาใช้ Contract Testing ช่วยลดปัญหา API พังจาก 2 ครั้งต่อเดือนเหลือศูนย์ได้ภายใน 6 เดือน

การที่ทีมเปลี่ยนจากการตรวจสอบด้วย mock-server มาเป็นการทำ consumer-driven contract testing ช่วยเพิ่มจำนวน contract จาก 3 เป็น 47 รายการ ซึ่งช่วยขจัดปัญหาการรวมระบบ (integration) ที่ผิดพลาดในแต่ละเดือน และสามารถตรวจพบ breaking changes ได้ก่อนที่จะถูกนำขึ้นระบบ production

WebDev · 3 min read

การพลาดทราฟฟิกจาก AI อาจทำให้เว็บไซต์ที่ติดอันดับต้นๆ สูญเสียรายได้มหาศาล

ผลการศึกษาจาก Vercel-MERJ พบว่า GPTBot และ ClaudeBot ดาวน์โหลดเพียงแค่ HTML ดิบ โดยข้ามขั้นตอนการประมวลผล JavaScript ไป ส่งผลให้เฟรมเวิร์กฝั่งไคลเอนต์อย่าง React หรือ Vue สามารถครองอันดับบน Google ได้ แต่กลับไม่ถูกตรวจพบโดยผู้ช่วย AI อย่าง ChatGPT และ Bing AI

WebDev · 4 min read

Elevare’s AI Agent Slept on a Full Queue After RLS Hid All Jobs

The AI orchestrator queried the pending-jobs table, saw zero rows and entered idle mode, while an RLS policy silently filtered out every row for its service role. Jobs piled up unnoticed until the team added a canary-row check to expose the blind spot.

WebDev · 3 min read

เอเจนต์ AI สร้างผลลัพธ์เครื่องมือปลอม นำไปสู่การล่มแบบเงียบในเวิร์กโฟลว์อัตโนมัติ

บล็อกล่าสุดเตือนว่า เอเจนต์ AI สามารถสร้างชื่อเครื่องมือขึ้นมาเอง ส่งอาร์กิวเมนต์ที่ไม่สอดคล้องกัน หรือแม้แต่ปลอมแปลงผลลัพธ์ว่าสำเร็จ ซึ่งกรณีหลังนี้ที่เรียกว่า “silent crash” จะทำให้ข้อมูลที่ผิดพลาดไหลต่อเนื่องไปตามระบบ (pipelines) จนส่งผลให้เกิดการแจ้งเตือนที่ผิดพลาดและการดำเนินการที่สร้างความเสียหายสูง

WebDev · 3 min read

Inbox Leases Stop Cron Email Races From Crashing Alerts

By assigning each cron run a unique lease ID, filtering on timestamps and labels, and logging lease metadata, teams can prevent stray messages from triggering duplicate or missed alerts—even when inboxes are shared.

WebDev · 3 min read

Open Interpreter ช่วยให้ LLM รันโค้ดในเครื่องได้โดยตรง ช่วยลดค่าใช้จ่าย Cloud และเพิ่มความเป็นส่วนตัว

ด้วยการอนุญาตให้โมเดลภาษาขนาดใหญ่ (LLM) สามารถส่งคำสั่ง shell และรันสคริปต์บนเครื่องของผู้ใช้ได้ Open Interpreter จึงช่วยลดความจำเป็นในการใช้ Cloud API ที่มีราคาแพง พร้อมทั้งช่วยรักษาความปลอดภัยของไฟล์ที่สำคัญไว้ภายในเครื่อง แต่ในขณะเดียวกันก็ทำให้เหล่านักพัฒนาจำเป็นต้องสร้างระบบ Sandbox และขั้นตอนการขอความยินยอมขึ้นมา

WebDev · 2 min read

เอเจนต์เขียนโค้ด AI ขับเคลื่อนดีลเอาท์ซอร์สใหม่ถึง 43% ด้วยการกำหนดราคาตามผลลัพธ์

ภายในปี 2026 เอเจนต์อัตโนมัติสามารถแยกย่อยฟีเจอร์ เขียนโค้ด รันการทดสอบ และเปิด pull requests ได้โดยไม่ต้องมีมนุษย์คอยสั่งการ ส่งผลให้บริษัทต่างๆ เปลี่ยนจากการคิดค่าบริการรายชั่วโมงเป็นการจ่ายตามผลลัพธ์ที่ตรวจสอบได้จริง

WebDev · 3 min read

การทำ PostgreSQL Migrations ล้มเหลวด้วยข้อผิดพลาด "Read-Only Transaction" เมื่อส่งคำสั่งไปยังเครื่อง Replica

ข้อผิดพลาดนี้มักเกิดจากการพยายามเขียนข้อมูลลงใน read replica ซึ่งมักมีสาเหตุมาจาก PgBouncer จัดเส้นทางการเชื่อมต่อ, role ถูกตั้งค่าเริ่มต้นเป็นแบบอ่านอย่างเดียว (read-only) หรือการตั้งค่าบนระบบคลาวด์ที่ใช้ reader endpoint โดยบทความนี้จะแสดงวิธีแก้ไข flag สำหรับธุรกรรมปัจจุบันและวิธีป้องกันปัญหาดังกล่าว

WebDev · 3 min read

ทีม Frontend ลดขนาด Bundle ให้เป็นศูนย์ด้วยการทำ Tree-Shaking บน Type-Safe API Mocks

ทีมได้สร้างเลเยอร์ Mock สำหรับใช้เฉพาะในขั้นตอนการพัฒนาโดยใช้ Axios interceptors และ tree-shaking ของ Vite โดยการควบคุมการทำงานของ interceptor ผ่าน import.meta.env.DEV, flag VITE_ENABLE_MSW ที่กำหนดเอง และตัวแปร MODE ทำให้โค้ด Mock ทั้งหมดถูกตัดออกจาก production bundles ส่งผลให้ขนาดของ bundle ไม่เปลี่ยนแปลง

WebDev · 3 min read

RamenHire’s Email Bug Turned Every Hiring Alert into a Phishing Hook

The flaw let any applicant inject a fake "verify" link into the HTML email template; the payload stored with the job listing and appeared in every subsequent notification until a new escapeHtml helper was added and both unit and live tests confirmed the fix.

WebDev · 3 min read

ทดสอบโค้ดของตัวเอง: สิ่งที่ได้เรียนรู้จากการทำ Contract Testing

ทดสอบโค้ดของตัวเอง: สิ่งที่ได้เรียนรู้จากการทำ Contract Testing ผมคิดว่าโปรเจกต์ Zerodha clone ของผมเสร็จสมบูรณ์แล้ว มันเป็นโปรเจกต์ MERN stack ที่มี Node เป็น backend, React เป็น frontend, MongoDB และ Razorpay…

WebDev · 3 min read

ดัชนีทั่วโลกฟรี รวบรวมรายชื่อท่าเรือ 3,804 แห่ง และสนามบิน 9,640 แห่ง – ไม่ต้องลงทะเบียนใช้งาน

เว็บไซต์นี้ดึงข้อมูลจาก NGA World Port Index, UN/LOCODE และ OurAirports พร้อมทั้งจัดการข้อมูลที่ไม่สอดคล้องกัน และเพิ่มข้อมูลการจับคู่ความลึกของน้ำต่อประเภทเรือ รวมถึงรันเวย์ต่อประเภทเครื่องบิน โดยให้บริการผ่าน Next.js static build ซึ่งไม่มีค่าใช้จ่ายในการประมวลผลต่อเนื่อง

WebDev · 4 min read

TypeScript เพิ่ม Const Type Parameters เพื่อป้องกันการเกิด Literal Widening ใน Generics

modifier `const` แบบใหม่ใน type parameter จะสั่งให้ compiler ทำการ infer type ที่แคบที่สุดเท่าที่จะเป็นไปได้ ทำให้ค่า literal อย่างเช่น "GET" ยังคงความเป็น literal แม้จะส่งผ่านข้ามขอบเขตของฟังก์ชัน ช่วยลดความจำเป็นในการต้องเขียน `as const` ซ้ำๆ

WebDev · 3 min read