Schema Markup Generator
Web tool สร้าง JSON-LD structured data สำหรับ e-commerce — Product, BreadcrumbList, Organization schema พร้อม copy-paste
อ่านเพิ่ม →#javascript 51
รายการ Projects, Resources และ Notes ทั้งหมดที่มี tag นี้
Projects 2
Web Component UI Kit
ชุด UI components ที่สร้างด้วย Custom Elements ล้วน — Button, Badge, Tooltip, Dialog — ใช้ร่วมกับทุก framework หรือ vanilla HTML
อ่านเพิ่ม →Resources 26
Browser Web APIs — ResizeObserver, Clipboard, Broadcast Channel, Web Workers
Web APIs ที่ใช้บ่อยและมักถูกมองข้าม: ResizeObserver, MutationObserver, Clipboard, Broadcast Channel, Web Workers
อ่านเพิ่ม →Fetch API Patterns — Data Fetching, AbortController, Retry
Patterns สำหรับ fetch ข้อมูล: timeout, retry, AbortController, error handling, caching headers, streaming response
อ่านเพิ่ม →GSAP Animation Guide — คู่มือ Animation ที่ทุก Frontend ควรรู้
GSAP คืออะไร ทำงานยังไง และวิธีใช้งานจริงในโปรเจกต์ — ตั้งแต่ gsap.to() พื้นฐานไปถึง ScrollTrigger และ Timeline
อ่านเพิ่ม →HTML Forms & Native Validation
Native HTML5 form validation, Constraint Validation API, custom error messages, และ patterns สำหรับ accessible forms
อ่านเพิ่ม →Browser Storage — localStorage, sessionStorage, IndexedDB
เปรียบเทียบและใช้งาน browser storage: localStorage สำหรับ simple KV, IndexedDB สำหรับ structured data ขนาดใหญ่
อ่านเพิ่ม →Intersection Observer API — Lazy Load, Scroll Animations, Infinite Scroll
ใช้ IntersectionObserver ตรวจว่า element เข้า/ออก viewport โดยไม่ต้องใช้ scroll event
อ่านเพิ่ม →JavaScript Closures และ Scope — เข้าใจจริง ไม่ใช่แค่ท่อง
Scope chain, lexical environment, closures ทำงานยังไง, และ use cases จริงที่เจอบ่อย
อ่านเพิ่ม →JavaScript Date & Intl API — จัดการวันที่และการแสดงผลหลายภาษา
วิธีใช้ Date object, Intl.DateTimeFormat, Intl.NumberFormat, Intl.RelativeTimeFormat และ Temporal API สำหรับจัดการวันที่ใน JavaScript โดยไม่ต้องใช้ library
อ่านเพิ่ม →JavaScript Design Patterns
Design patterns ที่ใช้บ่อยใน JavaScript/TypeScript: Singleton, Observer, Factory, Strategy, Command, และ Module pattern
อ่านเพิ่ม →JavaScript Error Handling — try/catch, Custom Errors, Result Pattern
Patterns สำหรับจัดการ errors ใน JavaScript/TypeScript: custom error classes, error chaining, Result type, async error handling
อ่านเพิ่ม →JavaScript Generators และ Iterators — Lazy Sequences
function*, yield, iterators protocol และ use cases จริง: infinite sequences, async generators, pipeline
อ่านเพิ่ม →JavaScript Modern APIs (2023–2025)
APIs ใหม่ที่ใช้ได้ใน modern browsers และ Node.js: Object.groupBy, Array methods ใหม่, structuredClone, Promise.withResolvers, และอื่นๆ
อ่านเพิ่ม →JavaScript Modules (ESM) — Import/Export ที่ควรรู้
เข้าใจ ES Modules, named exports, default exports, dynamic import(), re-exports และการใช้ร่วมกับ TypeScript และ Astro
อ่านเพิ่ม →JavaScript Promises & Async/Await — จัดการ Asynchronous อย่างถูกต้อง
อธิบาย Promise chain, async/await, error handling, Promise.all/race/allSettled และ pitfalls ที่พบบ่อยเมื่อเขียน async JavaScript ใน TypeScript
อ่านเพิ่ม →JavaScript Proxy & Reflect
Proxy ดักจับ operations บน object (get, set, delete) และ Reflect ให้ default behavior — ใช้สร้าง reactive data, validation, lazy loading
อ่านเพิ่ม →Node.js File System — fs/promises, path, Common Patterns
อ่าน เขียน คัดลอก ลบไฟล์และ directory ด้วย fs/promises และ path module — patterns ที่ใช้บ่อยใน scripts
อ่านเพิ่ม →Node.js Streams — Readable, Writable, Transform, Pipeline
จัดการข้อมูลปริมาณมากด้วย Node.js Streams: pipe, pipeline, Transform streams, backpressure, และ async iteration
อ่านเพิ่ม →Regular Expressions ใน JavaScript — Pattern Matching ที่ใช้ได้จริง
Regex patterns ที่ใช้บ่อยใน JavaScript และ TypeScript รวม flags, character classes, groups, lookahead/lookbehind และ use cases จริงสำหรับ validation และ parsing
อ่านเพิ่ม →Vite Config Guide — Plugins, Alias, Build Options
vite.config.ts ตั้งแต่ alias, resolve, plugins จนถึง build optimization และ dev server options
อ่านเพิ่ม →Vitest — Unit Testing สำหรับ TypeScript และ Vite Projects
Vitest คือ test runner ที่เร็วที่สุดสำหรับ Vite-based projects — setup วิธีเขียน test และ pattern ที่ใช้จริง
อ่านเพิ่ม →Web Components & Custom Elements
สร้าง reusable components ด้วย browser APIs โดยตรง: Custom Elements, Shadow DOM, HTML Templates — ไม่ต้องการ framework
อ่านเพิ่ม →HTMX — HTML Attributes แทน JavaScript สำหรับ Dynamic UI
คู่มือ HTMX — ทำ AJAX, WebSocket และ SSE ด้วย HTML attributes โดยไม่เขียน JavaScript
อ่านเพิ่ม →Cloudflare Workers — Serverless บน Edge Network
คู่มือ Cloudflare Workers — เขียน serverless function ที่รันบน 300+ edge locations พร้อม KV, D1, R2 storage
อ่านเพิ่ม →Bun Runtime — JavaScript runtime ที่เร็วกว่า Node
คู่มือ Bun — runtime ที่รวม bundler, test runner และ package manager ไว้ด้วยกัน ใช้แทน Node + npm ได้เลย
อ่านเพิ่ม →Web Storage — localStorage, sessionStorage และ IndexedDB
เปรียบเทียบ storage options ใน browser — localStorage, sessionStorage, IndexedDB และเมื่อไหร่ควรใช้อะไร
อ่านเพิ่ม →Service Workers — Cache Strategy สำหรับ Static Site
คู่มือ Service Worker สำหรับ offline caching, stale-while-revalidate และ cache management บน static site
อ่านเพิ่ม →Notes 19
Array.flat() และ flatMap() — จัดการ nested arrays
อ่านเพิ่ม →JavaScript Error Types — ประเภท Error ที่ควรรู้
อ่านเพิ่ม →Event Delegation — ผูก listener ครั้งเดียวกับ parent
อ่านเพิ่ม →fetch + ReadableStream — อ่านข้อมูลแบบ streaming
อ่านเพิ่ม →Intl API — format ตัวเลข วันที่ และ relative time แบบ native
อ่านเพิ่ม →Performance API — วัด timing ใน browser อย่างแม่นยำ
อ่านเพิ่ม →CSS View Transitions API — page transition แบบ native
อ่านเพิ่ม →Set Methods ใหม่ ES2025 — union, intersection, difference
อ่านเพิ่ม →Web Workers — รัน JS บน background thread
อ่านเพิ่ม →Array.at() อ่าน element จากท้าย array ได้โดยไม่ต้องคำนวณ index
arr.at(-1) อ่าน element สุดท้าย — สะอาดกว่า arr[arr.length - 1] มาก
อ่านเพิ่ม →crypto.randomUUID() — สร้าง UUID v4 ใน browser และ Node.js โดยไม่ต้องลง library
Web Crypto API มี randomUUID() ในตัว — ไม่ต้อง import uuid หรือ nanoid เพื่อแค่สร้าง unique ID
อ่านเพิ่ม →HTML Constraint Validation API — validate form โดยไม่ต้อง JS
อ่านเพิ่ม →Nullish Coalescing ?? — ต่างจาก || ตรงไหน
อ่านเพิ่ม →structuredClone() deep copy ที่ถูกต้องกว่า JSON trick
ลืม JSON.parse(JSON.stringify()) ไปได้เลย — structuredClone() รองรับ Date, Map, Set และ type อื่นๆ ได้ถูกต้อง
อ่านเพิ่ม →AbortController — ยกเลิก fetch ที่กำลังรอได้
อ่านเพิ่ม →Generator Functions — function ที่ pause ได้
อ่านเพิ่ม →Object.groupBy — จัดกลุ่ม array ใน ES2024 โดยไม่ต้องเขียน reduce
Object.groupBy(array, keyFn) แทน reduce ที่ verbose — ส่งคืน object ที่ key คือค่าที่ groupBy และ value คือ array ของ items ในกลุ่มนั้น
อ่านเพิ่ม →WeakMap & WeakSet — reference ที่ไม่กัน GC
อ่านเพิ่ม →Promise.allSettled ไม่หยุดแม้ promise ตัวใดตัวหนึ่ง reject
Promise.all หยุดทันทีเมื่อมี reject — Promise.allSettled รอทุกตัวจบแล้วค่อยรายงานผลแยก fulfilled/rejected
อ่านเพิ่ม →Books 4
You Don't Know JS (series)
อ่านแล้ว
Eloquent JavaScript
อ่านแล้ว
JavaScript: The Good Parts
อ่านแล้ว
Programming TypeScript
Backlog