GyaanSetu WebDev

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

209 articlesDeep, practical knowledge

OpenCode ช่วยลดเวลา Sprint ลงได้ 1 ชั่วโมง ด้วยการทำ Refactoring React Hooks ผ่าน Terminal

ในช่วงการทดลองใช้งานเป็นเวลาสองสัปดาห์ OpenCode สามารถเปลี่ยนชื่อ React hook ใน 11 คอมโพเนนต์, สร้างไฟล์ pytest ที่ผ่านการทดสอบ และอัปเกรดแพ็กเกจ npm ได้ทั้งหมดผ่าน command line ซึ่งช่วยประหยัดเวลาการทำงานใน Sprint ของทีมไปได้ประมาณหนึ่งชั่วโมง โดยที่ทีมยังคงสามารถใช้ editor ที่ตนเองถนัดได้ตามปกติ

WebDev · 4 min read

บอทอีเมล AI ขโมยรหัสผ่านผ่าน CSS ที่ถูกซ่อนไว้ โดยสามารถหลบเลี่ยง Outlook และ Gmail ได้

นักวิจัยในงาน Black Hat USA 2026 ได้สาธิตให้เห็นว่า CSS ที่ถูกสร้างขึ้นมาเป็นพิเศษสามารถซ่อนข้อความจากสายตามนุษย์ได้ ในขณะที่เอเจนต์อีเมลที่ขับเคลื่อนด้วย AI ยังคงสามารถอ่านข้อความนั้นได้ ซึ่งช่วยให้เอเจนต์เหล่านี้สามารถดึงข้อมูลรหัสผ่าน, โทเค็น และที่อยู่ IP จาก Outlook, Gmail, Yahoo และ Proton ออกไปได้

WebDev · 4 min read

แก้ไขปัญหา Illegal Instruction: รวมการแก้ไขบั๊ก Vite บน Android เรียบร้อยแล้ว

แก้ไขปัญหา Illegal Instruction: รวมการแก้ไขบั๊ก Vite บน Android เรียบร้อยแล้ว บั๊ก Vite บน Android ได้รับการแก้ไขแล้ว เป็นเวลาสิบเดือนที่นักพัฒนาที่ใช้ Termux บน Android arm64 ต้องเผชิญกับการแครชอย่างต่อเนื่อง เมื่อ...

WebDev · 3 min read

Flag ใหม่ใน TS 6.0 บังคับใช้ Bracket Notation ช่วยลดปัญหาโปรแกรมแครชจาก Undefined Property

ด้วยการเปลี่ยนการเข้าถึงแบบ dot-notation บน index signatures ให้กลายเป็น error ในขั้นตอนการคอมไพล์ แฟล็กใหม่นี้จะช่วยให้ตรวจพบข้อผิดพลาดจากการระบุคีย์ไม่ครบได้เร็วขึ้น และเมื่อใช้คู่กับ --noUncheckedIndexedAccess จะช่วยเพิ่มความปลอดภัยในการจัดการกับ undefined-type ได้อย่างสมบูรณ์

WebDev · 3 min read

ปุ่มสลับ Edge แบบคลิกเดียวของ Cloudflare ช่วยให้ทุกเว็บไซต์พร้อมสำหรับ AI Agent

ปุ่มสลับ “Browser Run → Agent Readiness” ใหม่ จะเพิ่ม JavaScript payload ขนาดเล็กเข้าไปใน HTML ที่ส่งออก เพื่อลงทะเบียนเว็บไซต์กับ WebMCP โดยอัตโนมัติ พร้อมมอบชุดเครื่องมือสำเร็จรูป 2 ชุด ได้แก่ Content Credentials และ Site MCP Server proxy

WebDev · 3 min read

World Labs เปิดตัวกระบวนการ Real-to-Sim-to-Real เพื่อลดต้นทุนการฝึกฝนหุ่นยนต์

ในพอดแคสต์ล่าสุดของ a16z Fei-Fei Li และ Yunzhu Li ได้อธิบายว่า SceniX ของ World Labs สามารถสร้าง Digital Twin ที่แม่นยำของคลังสินค้า ร้านอาหาร และโรงแรม ช่วยให้หุ่นยนต์สามารถฝึกซ้อมการทำงานในระบบจำลองได้ก่อนที่จะลงมือปฏิบัติงานในสถานที่จริง

WebDev · 3 min read

How to Stop Training Bots While Keeping Citation Bots for ChatGPT Traffic

A generic “Disallow: /” for GPTBot only blocks the training crawler; the citation bots that surface your pages in ChatGPT’s answer pane remain active. Use explicit robots.txt rules or Cloudflare’s AI Crawl Control to allow OAI-SearchBot, ChatGPT-User, and their peers while denying GPTBot, ClaudeBot,

WebDev · 4 min read

การเปลี่ยนจาก Score-Sorted มาเป็น A-Res ช่วยแก้ปัญหาบั๊ก ‘Same-Grid-Forever’ บนหน้าโฮมเพจของเรา

ด้วยการประมวลผลแถวที่ผ่านการคัดเลือกเพียงครั้งเดียวและใช้เพียง min-heap ขนาด 24 รายการ วิธีการสุ่มแบบ weighted reservoir sampling แบบใหม่ไม่เพียงแต่ช่วยให้ตารางรีเฟรชใหม่ทุกครั้งที่มีการโหลดหน้าเว็บ แต่ยังช่วยลดการใช้หน่วยความจำของ SQLite ลงได้อย่างมหาศาล

WebDev · 3 min read

วิธีแก้ไขปัญหา JSON-LD ของสินค้าซ้ำซ้อนบน Shopify ใน 5 ขั้นตอนง่ายๆ

ใช้เครื่องมือ Schema Markup Validator ของ Google เพื่อระบุไฟล์ธีมหรือแอปที่เป็นต้นเหตุ จากนั้นลบโค้ด JSON-LD ส่วนเกินออก และตรวจสอบแอปของคุณอีกครั้ง โดยแต่ละขั้นตอนจะช่วยคืนค่า Schema ของสินค้าให้เหลือเพียงชุดเดียวที่ถูกต้อง เพื่อเพิ่มประสิทธิภาพในการแสดงผล Rich Results ให้ดียิ่งขึ้น

WebDev · 1 min read

ต้นทุนที่แท้จริงของการโฮสต์ Whisper ด้วยตัวเอง เทียบกับ APIs

ต้นทุนที่แท้จริงของการโฮสต์ Whisper ด้วยตัวเอง เทียบกับ APIs เมื่อทีมของคุณเห็นบิลค่าใช้จ่ายของ AssemblyAI ใครบางคนอาจถามว่า "ทำไมเราไม่โฮสต์ Whisper เองล่ะเพื่อประหยัดเงิน?" มันฟังดูเหมือนจะง่าย แค่ดาวน์โหลด...

WebDev · 3 min read

การระดมส่ง SMS (SMS Bombing) ช่วยบดบังการแจ้งเตือนการสลับซิม (SIM-Swap) เปิดทางให้ผู้โจมตีเข้ายึดเบอร์โทรศัพท์ได้โดยไม่มีการแจ้งเตือน

เหยื่อรายหนึ่งได้รับข้อความยืนยันตัวตนถึง 400 ข้อความภายในเวลาเพียง 10 นาที ซึ่งเป็นกลยุทธ์ที่ไม่เพียงแต่ทำให้โทรศัพท์ถูกรบกวนจนใช้งานไม่ได้ แต่ยังช่วยปกปิดการขโมยเงินจากธนาคารและการยึดซิม (SIM-swap) ที่กำลังเกิดขึ้น บีบให้ทั้งผู้ใช้งานและนักพัฒนาต้องเร่งรับมืออย่างรวดเร็ว

WebDev · 3 min read

Cloudflare Bot Challenge ทำให้การส่งข้อมูล POST สำหรับการชำระเงินแบบปกติใช้งานไม่ได้ แต่การใช้ Fetch ช่วยแก้ปัญหาได้

ฟอร์ม HTML ธรรมดาที่เปลี่ยนเส้นทางไปยัง Stripe สามารถใช้งานได้ในการทดสอบ แต่กลับพบข้อผิดพลาด 503 เมื่อใช้งานจริงผ่าน Chrome บน Cloudflare การเปลี่ยนมาใช้รูปแบบการส่งข้อมูลแบบ fetch-first ช่วยให้การส่ง POST ผ่านการตรวจสอบบอทได้ และใช้การเปลี่ยนเส้นทางด้วย GET เพื่อดำเนินการชำระเงินให้เสร็จสิ้น

WebDev · 4 min read

สคริปต์ทำความสะอาดข้อมูลลบชิ้นส่วนโค้ดออกจากบทความหลายสิบรายการ

งานบำรุงรักษาตามปกติเกิดข้อผิดพลาดในการระบุแท็ก {% raw %} ของ Liquid โดยระบบเข้าใจผิดว่าเป็นตัวแปรที่ไม่ได้ปิด และได้ลบโค้ดบล็อกที่อยู่ล้อมรอบออกจากทุกบทความที่มีการใช้งานแท็กดังกล่าว ส่งผลให้ต้องทำการ Rollback ฉุกเฉิน และต้องกลับมาทบทวนกระบวนการทดสอบการย้ายข้อมูล (migration testing) ใหม่

WebDev · 3 min read

Hermes Agent เปิดกว้างสู่การทำ AI Automation แต่ก็ผลักภาระด้านความปลอดภัยไปที่นักพัฒนา

การออกแบบเชิงโมดูลของ Hermes Agent แยกโมเดลภาษา แกนกลางการจัดการ และเครื่องมือที่สั่งการได้ออกจากกัน ช่วยให้คุณสามารถเชื่อมต่อสคริปต์, การเรียกใช้ REST หรือคำสั่ง Docker ได้ แต่ในขณะเดียวกันก็กำหนดให้คุณต้องทำ sandbox ให้กับเอเจนต์และปกป้อง API keys ด้วย

WebDev · 3 min read

BrowserAct เอาชนะ Playwright โหมด Headless ในการทดสอบการตรวจจับบอท

จากการทดสอบเปรียบเทียบกันบนหน้าล็อกอินจำลอง (sandbox) พบว่าเบราว์เซอร์แบบ Stealth ของ BrowserAct ส่งค่า isBot:false ในขณะที่เซสชัน Headless เริ่มต้นของ Playwright รายงานค่าเป็น isBot:true ซึ่งเผยให้เห็นว่าค่า user-agent และ webdriver flags เริ่มต้นนั้นเปิดเผยร่องรอยของการใช้งานอัตโนมัติได้อย่างไร

WebDev · 4 min read

การอัปเกรด Astro 7 ส่งผลกระทบต่อ Math, Heading Links และ Custom Options – วิธีแก้ไข

Astro 7 เปลี่ยนมาใช้เอนจิน markdown Sätteri ที่พัฒนาด้วย Rust ซึ่งจะรัน syntax highlighting ก่อนปลั๊กอิน HTML-AST การเปลี่ยนแปลงนี้ทำให้บล็อก $$...$$ ถูกจัดประเภทผิดเป็นโค้ด ทำให้ปลั๊กอิน heading-slug ไม่สามารถสร้าง ID ได้ และทำให้การตั้งค่า markdown ที่ไม่ใช่มาตรฐานที่คุณกำหนดไว้หายไป

WebDev · 4 min read

การจองหน่วยความจำของ Substring สิ้นเปลืองไป 7.8 MB ใน Hot Loop – เปลี่ยนมาใช้ Span Lookup แทน

โปรไฟล์เลอร์เผยให้เห็นว่าการสร้าง string ใหม่สำหรับการค้นหาใน dictionary ทุกครั้งผ่าน Substring ทำให้เกิดขยะ (garbage) ในหน่วยความจำถึง 7.8 MB การใช้ GetAlternateLookup ของ .NET 9 ร่วมกับ ReadOnlySpan<char> ช่วยกำจัดปัญหาการจองหน่วยความจำและทำให้ loop ทำงานเร็วขึ้น 1.5 เท่า

WebDev · 1 min read

CollectionsMarshal ช่วยลดเวลาการนับ Dictionary ให้เร็วขึ้นกว่า TryGetValue ถึง 1.7 เท่า

ผมทำ Hashing ทุกคำสองรอบเพื่อที่จะนับมันเพียงครั้งเดียว เมื่อสัปดาห์ที่แล้วผมได้ทำ profiling ตัว log parser ซึ่งทำหน้าที่นับ error code ใน log ประจำวัน โดยตรรกะหลักคือการอัปเดต dictionary แบบง่ายๆ นักพัฒนาส่วนใหญ่...

WebDev · 1 min read

AV2 Promises 30% Gains but No FFmpeg Support or Hardware Decoders Yet

The AV2 reference encoder 1.0.0, released in May 2026, shows a 30 % bitrate reduction over AV1, but it runs far slower than existing AV1 encoders, lacks integration in FFmpeg, and has no hardware decoders, making it unsuitable for live streaming pipelines.

WebDev · 3 min read