GyaanSetu WebDev

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

230 articlesDeep, practical knowledge

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

นักพัฒนาชาวกานาเปิดตัว PowerPulse โดยใช้ AI Low-Code แม้ไม่มีประสบการณ์การเขียนโค้ด

PowerPulse ช่วยให้ทุกคนในกานาสามารถรายงานเหตุไฟฟ้าดับ ดูฟีดข้อมูลแบบเรียลไทม์ และสะสมคะแนนจากการมีส่วนร่วมได้ แอปนี้สร้างขึ้นด้วย Next.js, Tailwind, Supabase และโฮสต์บน Vercel โดยมีเป้าหมายที่จะเพิ่มระบบคาดการณ์ด้วย AI และการแจ้งเตือนแบบ Push Notification เพื่อแก้ปัญหา cold-start ในช่วงเริ่มต้น

WebDev · 3 min read

Fable 5 ปรับราคาเพิ่มเป็นสองเท่าของ Opus 4.8 บีบให้นักพัฒนาต้องทบทวนการวางโครงสร้าง Prompt Stacks ใหม่

Claude Fable 5 มาพร้อมกับ context window ขนาด 1 ล้านโทเคน และขีดจำกัด output ที่ 128K แต่ด้วยราคา 10 ดอลลาร์ต่อหนึ่งล้าน input tokens และ 50 ดอลลาร์ต่อหนึ่งล้าน output tokens ซึ่งสูงกว่า Opus 4.8 ถึงสองเท่า ทำให้โมเดลนี้กลายเป็นโมเดลเฉพาะทางสำหรับกรณีการใช้งานที่ยอมรับความผิดพลาดไม่ได้

WebDev · 1 min read

การเปลี่ยนไปใช้ DeepSeek และ Qwen ช่วยลดค่าใช้จ่าย AI ของ Bot ตัวหนึ่งจาก 420 ดอลลาร์ เหลือเพียง 28 ดอลลาร์

ด้วยการส่งคำสั่ง 85% ไปยังโมเดลที่มีราคาถูกกว่า การทำ caching สำหรับ prompt ที่ซ้ำกัน และการบีบอัดข้อมูลนำเข้า ทีมงานสามารถลดค่าใช้จ่ายรายเดือนจาก 420 ดอลลาร์ เหลือเพียง 28 ดอลลาร์ โดยที่ยังคงรักษาความเร็วในการตอบสนองและประสบการณ์การใช้งานของผู้ใช้ไว้ได้เช่นเดิม

WebDev · 2 min read

pnpm v12 ลดเวลาการติดตั้งแบบ Warm จาก 381 ms เหลือเพียง 12 ms ด้วยการเขียนใหม่ด้วย Rust

การเขียนใหม่นี้มีชื่อว่า “pacquet” ซึ่งจะแทนที่ Node.js bootstrap ด้วย Rust binary แบบ single-threaded โดยที่ยังคงรักษา flag และรูปแบบ lockfile ทั้งหมดไว้เหมือนเดิม นักพัฒนาสามารถเลือกใช้งานได้แล้ววันนี้ผ่าน `pnpm self-update next-12` เพื่อทดสอบประสิทธิภาพที่มีต่อ CI pipelines ของตนเอง

WebDev · 2 min read

นักพัฒนาลดภาระงาน API โดยเปลี่ยนจาก REST มาใช้ tRPC ภายในเวลาเพียงสองสัปดาห์

การย้ายระบบครั้งนี้ช่วยกำจัดทั้ง OpenAPI spec, การสร้าง SDK, Postman collection และการเขียน TypeScript interfaces ด้วยมือ ทำให้ Editor สามารถตรวจพบความไม่สอดคล้องกันของข้อมูลได้ทันที และช่วยลดขนาดของ repository ลงได้อย่างมหาศาล

WebDev · 3 min read

ทีมสร้างระบบอัตโนมัติสำหรับการสร้าง VPAT ใน CI เพื่อสกัดกั้น Pull Request ที่ไม่รองรับการเข้าถึง

ด้วยการรวมการสแกน axe-core, ตัวช่วยคีย์บอร์ด Vitest แบบกำหนดเอง และการจัดเก็บผลลัพธ์จาก screen-reader ในรูปแบบ JSON เข้ากับขั้นตอนการ Build ทำให้ Pipeline สามารถสกัดกั้น Pull Request ที่ส่งผลกระทบต่อการเข้าถึง (Accessibility Regression) ได้ทันที พร้อมทั้งสร้างไฟล์ PDF VPAT โดยอัตโนมัติในทุกการ Release ที่สำเร็จ

WebDev · 3 min read

เลิกเสียชั่วโมง GPU ไปเปล่าๆ: เมื่อไหร่ควรใช้ Prompting, RAG หรือ Fine-Tuning

คู่มือนี้จะเจาะลึกถึง 3 กลไกสำคัญ ได้แก่ prompting, retrieval-augmented generation (RAG) และ fine-tuning เพื่อช่วยให้คุณแยกแยะระหว่างช่องว่างด้านความรู้ (knowledge gap) และช่องว่างด้านพฤติกรรม (behavior gap) พร้อมทั้งมีเช็คลิสต์ 3 ขั้นตอนในการเลือกเครื่องมือที่ถูกต้อง ก่อนที่จะต้องเสียค่าใช้จ่ายด้านการประมวลผล (compute) จำนวนมาก

WebDev · 4 min read

Auto-Animate เปิดตัว Marko 6 Adapter สร้างแอนิเมชันให้กับรายการด้วยแท็กเพียงตัวเดียว

Adapter ตัวใหม่นี้จะเชื่อมต่อกับ lifecycle onMount ของ Marko และสร้าง MutationObserver เพื่อขับเคลื่อนเอนจินของ auto-animate ช่วยให้นักพัฒนาสามารถใช้ <auto-animate> ครอบรายการเพื่อสร้างเอฟเฟกต์การเข้า การออก และการจัดลำดับใหม่ที่ลื่นไหลได้ โดยไม่ต้องเขียน JavaScript เพิ่มเติม

WebDev · 3 min read

การนำเข้าด้วย React-Fiber ช่วยลดความคลาดเคลื่อนระหว่างดีไซน์และโค้ด ช่วยทีมประหยัดค่าใช้จ่ายในการดูแลรักษาได้มหาศาล

ปลั๊กอินนี้จะอ่าน Fiber tree ภายในของ React แทนที่จะเป็น DOM ที่ถูกเรนเดอร์ออกมา โดยจะจับคู่คอมโพเนนต์เข้ากับเลเยอร์ใน Figma โดยตรง พร้อมทั้งรักษา variants, ข้อกำหนด auto-layout และ state triggers ไว้ ช่วยขจัดขั้นตอนการสร้าง design tokens ใหม่ด้วยตัวเอง

WebDev · 3 min read

Claude Fable 5 โดดเด่นกว่า GPT-5.6 ในด้านการสร้างโค้ด โดยทำคะแนนได้สูงถึง 80% บน SWE-Bench Pro

แม้ว่า GPT-5.6 จะได้เปรียบเรื่องราคาต่อโทเคนและทำได้ดีในงานเอเจนต์แบบหลายขั้นตอน แต่โมเดลของ Anthropic ก็แสดงให้เห็นถึงความเหนือกว่าอย่างชัดเจนในด้านเกณฑ์มาตรฐานการเขียนโค้ดจากการใช้งานจริง นักพัฒนาควรทดลองใช้ทั้งสองโมเดล โดยคำนึงถึงส่วนลดการทำแคชและรูปแบบของภาระงานก่อนตัดสินใจเลือกใช้งาน

WebDev · 3 min read

อัปเกรดเป็น TypeScript 7 หรือไม่? เตรียมพบกับการตรวจสอบที่เร็วขึ้นสูงสุดถึง 10 เท่า แต่ต้องระวัง CI ล้มเหลว

เอนจิน tsgo ใหม่ที่พัฒนาด้วยภาษา Go ช่วยให้การ Build เร็วขึ้นสูงสุดถึงสิบเท่า แต่เนื่องจาก API แบบ programmatic ยังมีการเปลี่ยนแปลงอยู่ จึงส่งผลให้เครื่องมือยอดนิยมหลายตัวทำงานผิดพลาด จนกว่าจะถึงช่วง API freeze ของเวอร์ชัน 7.1 แนะนำให้ทีมต่าง ๆ ใช้ TS 6.x สำหรับการ Build และใช้ @typescript/native-preview สำหรับการตรวจสอบอย่างรวดเร็ว

WebDev · 3 min read

Zod + Vercel AI SDK Guarantees Type-Safe JSON From LLMs, Preventing Crashes

A production classifier once threw an exception after an LLM added an unexpected “explanation” key, exposing how raw JSON parsing can silently break services. Wiring Zod schemas into Vercel’s AI SDK or Anthropic’s tool-use API catches such mismatches before they crash your app.

WebDev · 5 min read

นักพัฒนา Junior ลดขนาด Python Docker Image ลง 93% เหลือเพียง 85 MB พร้อมลดเวลา CI เหลือเพียง 90 วินาที

ด้วยการเปลี่ยนจากการใช้ python:latest แบบเริ่มต้น มาเป็นการทำ multi-stage build แบบ 3 ขั้นตอนบน python:alpine นักพัฒนาสามารถลดขนาด Image จาก 1.2 GB เหลือเพียง 85 MB ซึ่งช่วยลดระยะเวลาการทำงานของ pipeline จาก 11 นาที เหลือเพียง 90 วินาที พร้อมทั้งช่วยลดค่าใช้จ่ายในการจัดเก็บข้อมูลและลดช่องโหว่ในการโจมตี

WebDev · 3 min read