🛠️ แนวทางใหม่ในการสร้าง HTML Tools Simon Willison ใช้คำว่า HTML tools เรียกแอปพลิเคชันที่เขาสร้างขึ้นกว่า 150 ตัวในช่วงสองปีที่ผ่านมา โดยส่วนใหญ่เขียนขึ้นด้วยความช่วยเหลือจาก LLMs จุดเด่นคือ รวมทุกอย่างไว้ในไฟล์เดียว ทำให้สามารถ copy-paste ไปใช้งานหรือโฮสต์บน GitHub Pages ได้ทันที โดยไม่ต้องใช้ React หรือ build step ที่ซับซ้อน 🌐 เทคนิคสำคัญในการพัฒนา เขาแนะนำให้ โหลด dependencies จาก CDN เพื่อลดความยุ่งยาก และใช้ copy-paste เป็นกลไกหลัก เช่น การสร้างปุ่ม “Copy to clipboard” เพื่อให้ผู้ใช้สามารถนำข้อมูลไปใช้ต่อได้สะดวก นอกจากนี้ยังมีการใช้ localStorage สำหรับเก็บ state หรือ API keys และการเก็บข้อมูลใน URL เพื่อแชร์หรือ bookmark ได้ง่าย ⚡ การต่อยอดด้วย Pyodide และ WebAssembly หนึ่งในแนวทางที่น่าสนใจคือการใช้ Pyodide เพื่อรัน Python ในเบราว์เซอร์ และการใช้ WebAssembly เพื่อเปิดโอกาสให้ซอฟต์แวร์จากภาษาอื่น ๆ ทำงานบน HTML tools ได้ เช่น OCR หรือการบีบอัดภาพ สิ่งเหล่านี้ทำให้ HTML tools สามารถทำงานซับซ้อนโดยไม่ต้องพึ่ง server 🚀 บทเรียนและแรงบันดาลใจ Simon ย้ำว่า การสร้าง HTML tools เป็นวิธีที่สนุกและทรงพลังในการเรียนรู้ความสามารถของ LLMs และยังช่วยให้เข้าใจศักยภาพของ Web APIs ได้ลึกขึ้น เขาแนะนำให้ทุกคนลองสร้างคอลเลกชันของตัวเอง โดยเริ่มจาก GitHub Pages และไฟล์ HTML ง่าย ๆ 📌 สรุปเป็นหัวข้อ ✅ แนวคิด HTML Tools ➡️ แอปพลิเคชันเล็ก ๆ รวม HTML, CSS, JS ในไฟล์เดียว ➡️ ไม่ต้องใช้ React หรือ build step ✅ เทคนิคการพัฒนา ➡️ โหลด dependencies จาก CDN ➡️ ใช้ copy-paste และปุ่ม clipboard ➡️ เก็บข้อมูลใน URL และ localStorage ✅ การต่อยอดด้วยเทคโนโลยี ➡️ Pyodide สำหรับรัน Python ในเบราว์เซอร์ ➡️ WebAssembly สำหรับ OCR และ image compression ‼️ คำเตือนในการใช้งาน ⛔ การฝัง API key ใน HTML อาจเสี่ยงถูกขโมย ⛔ การพึ่งพา CDN ต้องตรวจสอบเวอร์ชันและความปลอดภัย ⛔ การใช้ localStorage เก็บข้อมูลสำคัญอาจเสี่ยงต่อการรั่วไหล https://simonwillison.net/2025/Dec/10/html-tools/