Notes 67

YAML parse date โดยอัตโนมัติ — quoted vs unquoted ให้ผลต่างกัน และส่งผลกับ z.date() ใน Astro schema

ไม่ต้องติดตั้ง Inkscape หรือ ImageMagick — sharp แปลง SVG เป็น PNG ได้ทันที

:has() ทำให้ hamburger menu เป็น CSS-only ได้จริงโดยไม่ต้อง JavaScript

CSS variables ทำงานแบบ cascade เหมือน property ทั่วไป — ตั้งที่ :root แล้ว override ใน component ได้เลยโดยไม่กระทบส่วนอื่น

worktree ให้มีหลาย branch active พร้อมกันโดยไม่ต้อง stash หรือ commit กลางคัน

process.env ทุกตัวเป็น string | undefined โดยค่าเริ่มต้น — merge declaration ทำให้ autocomplete และ type safe ได้ง่ายๆ

ไม่ต้องไล่ดูทีละ commit — git bisect ให้ mark good/bad แล้ว Git บอกเองว่า commit ไหนทำให้พัง

ความคิดเรื่อง trade-off ระหว่าง static generator กับ CMS สำหรับเว็บ developer ส่วนตัว

arr.at(-1) อ่าน element สุดท้าย — สะอาดกว่า arr[arr.length - 1] มาก

Web Crypto API มี randomUUID() ในตัว — ไม่ต้อง import uuid หรือ nanoid เพื่อแค่สร้าง unique ID

:focus-visible แสดง outline เฉพาะเมื่อ navigate ด้วย keyboard — ไม่รกตาเมื่อ click ด้วย mouse

Pagefind ค้นหาภาษาไทยได้ แต่ไม่รู้จัก root word — ต้องพิมพ์ตรงๆ ถึงจะเจอ

settings บาง project-specific ควรอยู่ใน .vscode/settings.json ไม่ใช่ global — commit ไว้ใน repo ได้เลย

any ปิด type checker ทั้งหมด ส่วน unknown บังคับ narrow ก่อน — ใช้ unknown เมื่อไม่รู้ type จริงๆ

Astro 5 เปลี่ยน API — entry.slug ถูกลบออก ใช้ entry.id แทนสำหรับ glob loader

details/summary ทำ accordion toggle ได้ใน HTML ล้วน — browser จัดการ open/close, keyboard และ accessibility ให้ทั้งหมด

browser มี <dialog> built-in พร้อม focus trap, backdrop, Escape key — ไม่ต้อง install อะไรเพิ่ม

ลืม JSON.parse(JSON.stringify()) ไปได้เลย — structuredClone() รองรับ Date, Map, Set และ type อื่นๆ ได้ถูกต้อง

font-size ที่ scale ตาม viewport อัตโนมัติ ไม่ต้องเขียน breakpoint เลย

stash โดยไม่ใส่ชื่อคือหายนะเมื่อมีหลาย stash — -m ช่วยได้

ไม่ต้อง enum — as const ทำให้ array หรือ object เป็น readonly literal type ที่ infer ได้แม่นยำ

Native CSS nesting ใช้ & แทน parent selector เหมือน Sass/SCSS — build tool ไม่จำเป็นอีกต่อไปสำหรับ nested CSS

git rebase -i HEAD~N เปิด editor ให้เลือก squash, reword, drop หรือ reorder commit ก่อน push — ทำให้ history อ่านแล้วเข้าใจได้

string กับ string ที่เป็น UserId หรือ Email — TypeScript มองเหมือนกัน Branded Type ทำให้ต่าง เพิ่มความปลอดภัยโดยไม่มี runtime cost

Object.groupBy(array, keyFn) แทน reduce ที่ verbose — ส่งคืน object ที่ key คือค่าที่ groupBy และ value คือ array ของ items ในกลุ่มนั้น

oklch(lightness chroma hue) ปรับ lightness แล้วสีดูสว่างขึ้นจริงในสายตา ไม่ใช่แค่ค่าตัวเลข — ต่างจาก hsl ที่ yellow กับ blue มี perceived brightness ต่างกันมาก

cherry-pick เอา commit hash ที่ต้องการมาใส่ branch ปัจจุบัน — ใช้เมื่อ hotfix อยู่ใน feature branch แต่ต้องการ deploy ก่อน

satisfies ตรวจว่า value ตรงกับ type ไหม โดยยังเก็บ inferred type ที่แคบกว่าไว้ใช้งาน — ต่างจาก as ที่ยอมทุกอย่าง และ : ที่ทำให้ type กว้างขึ้น

popover attribute + popovertarget ทำ overlay ที่ accessible ได้ใน HTML ล้วน — มี focus trap, light dismiss และ :popover-open selector

Promise.all หยุดทันทีเมื่อมี reject — Promise.allSettled รอทุกตัวจบแล้วค่อยรายงานผลแยก fulfilled/rejected

grid-template-columns: subgrid ส่ง grid track ของ parent ลงมาให้ลูกหลานใช้ต่อ — ไม่ต้องวาง column ซ้ำอีกชั้น