#tips 50

Browser DevTools Tips — Debug เร็วขึ้น 10 เท่า

เทคนิค DevTools ที่ใช้บ่อยใน Chrome และ Firefox — Console shortcuts, Network tab, CSS live edit, Performance profiling, Accessibility panel และ JavaScript debugging

CSS Animations & Transitions — ทำ UI ให้มีชีวิตชีวา

รวม pattern CSS animation และ transition ที่ใช้จริงในการสร้าง UI ที่ smooth — hover effects, micro-interactions, page transitions และ reduced motion

CSS Container Queries — Responsive ตาม Container ไม่ใช่ Viewport

Container queries ให้ component ปรับ layout ตามขนาดของ parent container แทน viewport — ทำให้ component เป็น truly reusable ในทุกที่ที่วาง

CSS Flexbox Cheatsheet — จัดวาง Layout ให้ตรงใจ

รวม CSS Flexbox properties ที่ใช้บ่อย ทั้ง container และ item properties พร้อม visual guide และ use cases จริงสำหรับ navigation, card grid, centering

CSS Scroll Snap

CSS Scroll Snap สำหรับ carousel, full-page scroll และ horizontal scroll — scroll-snap-type, scroll-snap-align, mandatory vs proximity, และ scroll-padding

HTML Semantic Elements — เขียน HTML ให้มีความหมาย

รวม HTML5 semantic elements ที่ควรรู้ทั้งหมด ว่าควรใช้ element ไหนในสถานการณ์ใด ทำไมถึงสำคัญต่อ accessibility และ SEO และความสัมพันธ์กับ ARIA

JavaScript Array Methods ที่ใช้บ่อยใน Frontend

รวม array methods สำคัญใน JavaScript/TypeScript ที่ใช้จริงในการ transform, filter, และ reduce data ก่อน render ใน Astro/React

JavaScript Date & Intl API — จัดการวันที่และการแสดงผลหลายภาษา

วิธีใช้ Date object, Intl.DateTimeFormat, Intl.NumberFormat, Intl.RelativeTimeFormat และ Temporal API สำหรับจัดการวันที่ใน JavaScript โดยไม่ต้องใช้ library

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

npm Scripts — Task Automation โดยไม่ต้องใช้ Gulp หรือ Makefile

ใช้ npm scripts ใน package.json เป็น task runner สำหรับ build, dev, lint, format, test และ deploy — ไม่ต้องติดตั้ง tool เพิ่ม เพราะ npm มีให้ทุก project อยู่แล้ว

Regular Expressions ใน JavaScript — Pattern Matching ที่ใช้ได้จริง

Regex patterns ที่ใช้บ่อยใน JavaScript และ TypeScript รวม flags, character classes, groups, lookahead/lookbehind และ use cases จริงสำหรับ validation และ parsing

TypeScript Generics — เขียน Code ที่ flexible และ type-safe

เข้าใจ TypeScript generics ตั้งแต่พื้นฐานจนถึง advanced — generic functions, constraints, conditional types, infer keyword และ utility types ที่สร้างเอง

TypeScript Type Narrowing — จัดการ Union Types อย่างปลอดภัย

เทคนิค TypeScript type narrowing ที่ช่วยให้ compiler รู้ type ที่แน่นอน ณ จุดนั้น ครอบคลุม typeof, instanceof, in, discriminated unions และ type guards

HTTP Security Headers — ป้องกันเว็บด้วย Headers

รายการ HTTP security headers ที่ควรตั้งค่าสำหรับเว็บใดก็ตาม ครอบคลุม CSP, HSTS, X-Frame-Options, Permissions-Policy และวิธีตั้งค่าใน Astro + Railway

Responsive Design Patterns — CSS ที่ใช้จริงบน Static Site

Pattern สำหรับ responsive layout บน CSS ล้วนๆ ที่ใช้ได้จริง ครอบคลุม fluid typography, container queries, intrinsic grid และ mobile-first approach

Linux Terminal Tips สำหรับ Web Developer

รวม command และ pattern ที่ใช้บ่อยใน terminal — file management, git shortcuts, process, และ productivity tips สำหรับ dev workflow

Web Accessibility Checklist — สิ่งที่ต้องทำก่อน Deploy

รายการตรวจสอบ accessibility สำหรับ static site ครอบคลุม keyboard navigation, ARIA, color contrast และ screen reader

Conventional Commits — เขียน Git Message อย่างเป็นระบบ

มาตรฐาน Conventional Commits ที่ทำให้ git log อ่านง่าย ทำ changelog อัตโนมัติได้ และเชื่อมกับ semantic versioning

CSS Custom Properties — Pattern สำหรับ Theming และ Dark Mode

วิธีใช้ CSS custom properties (variables) อย่างเป็นระบบ สำหรับ theming, dark mode, และ design tokens บน static site

Astro View Transitions — เปลี่ยนหน้าแบบ Smooth ด้วย ClientRouter

วิธีใช้ View Transitions API ใน Astro ผ่าน ClientRouter, transition:name สำหรับ shared elements, และการ handle events ที่ถูกต้อง

TypeScript Utility Types ที่ใช้บ่อย

รวม Utility Types ใน TypeScript ที่ช่วยลดการเขียน type ซ้ำซ้อน พร้อมตัวอย่างการใช้งานจริง

CSS Print Styles — ทำ @media print ให้ดูดีจริง

เทคนิค print stylesheet สำหรับหน้า CV, report และ document ที่พิมพ์หรือบันทึกเป็น PDF ได้อย่างถูกต้อง

CSS Grid — Cheatsheet ฉบับใช้งานจริง

รวม CSS Grid properties ที่ใช้บ่อย พร้อม pattern สำเร็จรูปสำหรับ layout ยอดนิยม เปิดดูได้เลยโดยไม่ต้องค้น MDN ทุกครั้ง

CSS :has() เปลี่ยนวิธีเขียน hamburger nav ไปเลย

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

git reflog — กู้ commit ที่หายไปแล้ว

CSS Custom Properties inherit ลงมาตาม DOM — override ได้ที่ระดับ component

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

git worktree แก้ปัญหา context switching ได้ดีกว่า stash

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

type-safe process.env ด้วย declaration merging

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

git bisect หา commit ที่ทำให้เกิด bug ด้วย binary search

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

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

Pagefind กับ Thai: ค้นหาได้แต่ stemming ไม่ทำงาน

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

.vscode/settings.json ตั้ง config แยกต่อ project

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

unknown vs any — ต่างกันตรงที่ต้อง narrow ก่อนใช้

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

Astro 5: ใช้ entry.id แทน entry.slug ใน Content Collections

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

<details> และ <summary> — accordion โดยไม่ต้องเขียน JavaScript

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

<dialog> element — native modal โดยไม่ต้อง library

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

Nullish Coalescing ?? — ต่างจาก || ตรงไหน

structuredClone() deep copy ที่ถูกต้องกว่า JSON trick

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

clamp() สำหรับ fluid typography ไม่ต้อง media query

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

git stash push -m ช่วยให้จำได้ว่า stash ไหนคืออะไร

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

as const ทำให้ TypeScript รู้ว่าค่าคือ literal จริงๆ

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

CSS Nesting — เขียน nested selector ได้เหมือน Sass โดยไม่ต้องใช้ preprocessor

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

git rebase -i — จัดเรียง รวม และแก้ commit ก่อน push

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

Branded Types — TypeScript nominal typing ที่ไม่มีใน spec

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

Object.groupBy — จัดกลุ่ม array ใน ES2024 โดยไม่ต้องเขียน reduce

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

git cherry-pick — เอา commit เดียวข้าม branch โดยไม่ merge ทั้งหมด

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

TypeScript satisfies — validate type โดยไม่ทำให้ type กว้างขึ้น

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

Promise.allSettled ไม่หยุดแม้ promise ตัวใดตัวหนึ่ง reject

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