Astro Blog Theme
Minimal Astro blog starter theme ที่ focus บน typography, dark mode, และ content — ไม่มี bloat
อ่านเพิ่ม →#frontend 61
รายการ Projects, Resources และ Notes ทั้งหมดที่มี tag นี้
Projects 7
JSON Diff Visualizer
เว็บ tool สำหรับเปรียบ JSON สอง version แบบ side-by-side พร้อม highlight การเปลี่ยนแปลงแบบ nested
อ่านเพิ่ม →Type Scale Explorer
เครื่องมือสำรวจ typographic scale แบบ visual — ปรับ base size, ratio, และ font family แล้วดู preview ทันที
อ่านเพิ่ม →CSS Animation Library
collection ของ CSS animation snippets แบบ copy-paste — entrance, exit, loading, micro-interaction พร้อม Astro demo page
อ่านเพิ่ม →Astro Component Playground
Interactive sandbox สำหรับทดสอบ Astro components แบบ real-time — เขียน component code แล้วเห็น preview ทันที
อ่านเพิ่ม →Zod Schema Studio
Web tool สำหรับเขียน Zod schema แบบ interactive — เห็น type output และ validation errors แบบ real-time ไม่ต้อง setup project
อ่านเพิ่ม →Web Component UI Kit
ชุด UI components ที่สร้างด้วย Custom Elements ล้วน — Button, Badge, Tooltip, Dialog — ใช้ร่วมกับทุก framework หรือ vanilla HTML
อ่านเพิ่ม →Resources 39
Astro Server Islands — Dynamic Content ใน Static Site
Server Islands คือ Astro 5 feature ที่ช่วยฝัง dynamic server-rendered component ลงใน static page โดยไม่ต้อง sacrifice performance ของหน้าอื่น
อ่านเพิ่ม →Browser Web APIs — ResizeObserver, Clipboard, Broadcast Channel, Web Workers
Web APIs ที่ใช้บ่อยและมักถูกมองข้าม: ResizeObserver, MutationObserver, Clipboard, Broadcast Channel, Web Workers
อ่านเพิ่ม →CSS Architecture — BEM, CUBE CSS, Utility Classes
แนวทางจัดการ CSS ใน project ขนาดใหญ่: BEM naming, CUBE CSS methodology, เปรียบเทียบ Tailwind vs custom CSS
อ่านเพิ่ม →CSS @property — Typed Custom Properties
CSS @property ทำให้ custom properties มี type, initial value, และ inheritance control — รองรับ animation ของ color, number, และ gradient
อ่านเพิ่ม →CSS Cascade Layers — จัดการ Specificity แบบมีระบบ
@layer ช่วยควบคุมลำดับความสำคัญของ CSS โดยไม่ต้องพึ่ง specificity hack หรือ !important
อ่านเพิ่ม →CSS color-mix() และ Modern Color Functions
color-mix() ผสมสีโดยตรงใน CSS, relative color syntax แก้ไข channel เดียว, light-dark() สำหรับ adaptive color ไม่ต้องการ media query
อ่านเพิ่ม →CSS Grid Advanced — Subgrid, Template Areas, Named Lines
เทคนิค Grid ระดับสูง: subgrid, named grid areas, auto-placement algorithm, และ grid ซ้อน grid
อ่านเพิ่ม →CSS Logical Properties — Writing Mode Aware Layout
margin-inline, padding-block, inset-inline-start — เขียน CSS ที่รองรับ RTL และ vertical text โดยไม่ต้องเขียน rule ซ้ำ
อ่านเพิ่ม →CSS Nesting — Native Nested Selectors
CSS Nesting ที่รองรับใน browser ตั้งแต่ Chrome 120+ ทำให้เขียน nested selectors ได้โดยไม่ต้องใช้ Sass — ครอบคลุม syntax, &, @nest, และ gotchas
อ่านเพิ่ม →CSS oklch() — ระบบสีสมัยใหม่ที่ดีกว่า hsl()
oklch() คือ color space ที่มนุษย์มองเห็นได้สม่ำเสมอ (perceptually uniform) — สร้าง palette ที่ consistent กว่าเดิมด้วย 3 ค่า: Lightness, Chroma, Hue
อ่านเพิ่ม →CSS Scroll-Driven Animations
Animate elements ตาม scroll position โดยใช้ animation-timeline: scroll() และ view() — ไม่ต้องการ JavaScript หรือ ScrollTrigger
อ่านเพิ่ม →CSS Scroll Snap
CSS Scroll Snap สำหรับ carousel, full-page scroll และ horizontal scroll — scroll-snap-type, scroll-snap-align, mandatory vs proximity, และ scroll-padding
อ่านเพิ่ม →CSS Subgrid — Nested Grids ที่ Align กับ Parent
CSS Subgrid ช่วยให้ nested elements align กับ grid ของ parent ได้ — แก้ปัญหา misaligned columns ใน card grids
อ่านเพิ่ม →Deploying Static Sites — Vercel, Netlify, GitHub Pages
วิธี deploy static site ด้วย Vercel, Netlify, และ GitHub Pages — เปรียบเทียบ features, ราคา, และ workflow
อ่านเพิ่ม →ESLint + Prettier Configuration — TypeScript Project Setup
ตั้งค่า ESLint + Prettier ที่ทำงานร่วมกันได้สำหรับ TypeScript project: rules, integrations, pre-commit hooks
อ่านเพิ่ม →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 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 Proxy & Reflect
Proxy ดักจับ operations บน object (get, set, delete) และ Reflect ให้ default behavior — ใช้สร้าง reactive data, validation, lazy loading
อ่านเพิ่ม →Playwright E2E Testing — Browser Automation for Modern Web
ทดสอบ UI แบบ end-to-end ด้วย Playwright: เขียน tests, locators, page objects, API mocking, CI integration
อ่านเพิ่ม →Progressive Web App (PWA) — Manifest, Service Worker, Offline
สร้าง PWA ตั้งแต่ web app manifest ถึง service worker caching strategy และ install prompt
อ่านเพิ่ม →TypeScript Conditional Types — infer, Mapped Types, Template Literal Types
เทคนิค TypeScript ระดับสูง: conditional types, infer keyword, mapped types modifiers, template literal types
อ่านเพิ่ม →TypeScript Configuration — tsconfig.json Guide
เข้าใจ tsconfig.json ทุก option ที่สำคัญ: strict mode, paths, module resolution, target, lib — ตั้งค่าให้ถูกสำหรับแต่ละ project
อ่านเพิ่ม →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
อ่านเพิ่ม →Web Performance Checklist — ตรวจสอบก่อน Ship
Checklist สำหรับ frontend performance ที่ครอบคลุม Core Web Vitals, images, fonts, JavaScript, และ network — ใช้ก่อน deploy ทุกครั้ง
อ่านเพิ่ม →HTMX — HTML Attributes แทน JavaScript สำหรับ Dynamic UI
คู่มือ HTMX — ทำ AJAX, WebSocket และ SSE ด้วย HTML attributes โดยไม่เขียน JavaScript
อ่านเพิ่ม →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
อ่านเพิ่ม →Tailwind CSS v4 — สิ่งที่เปลี่ยนไปและสิ่งที่ต้องรู้
สรุป Tailwind CSS v4 — CSS-first config, เลิก tailwind.config.js, @theme directive และ performance ที่ดีขึ้น
อ่านเพิ่ม →Content Security Policy (CSP) — ป้องกัน XSS ด้วย HTTP Header
คู่มือตั้งค่า CSP header เพื่อป้องกัน Cross-Site Scripting (XSS) และ injection attacks บน static site
อ่านเพิ่ม →SVG Sprites & Icon System — icon ที่ maintain ง่ายและ accessible
วิธีสร้าง icon system ด้วย SVG sprite (symbol + use) และแนวทางทำ accessible icons ที่ถูกต้อง
อ่านเพิ่ม →Notes 13
@starting-style — CSS transition ตอน element ปรากฏครั้งแรก
อ่านเพิ่ม →text-wrap: balance — จัดบรรทัด heading ให้สมดุลอัตโนมัติ
อ่านเพิ่ม →HTML lazy loading — โหลด resource เมื่อใกล้จะเห็น
อ่านเพิ่ม →Event Delegation — ผูก listener ครั้งเดียวกับ parent
อ่านเพิ่ม →fetch + ReadableStream — อ่านข้อมูลแบบ streaming
อ่านเพิ่ม →Intl API — format ตัวเลข วันที่ และ relative time แบบ native
อ่านเพิ่ม →CSS Anchor Positioning — ยึด element กับ element อื่น
อ่านเพิ่ม →Performance API — วัด timing ใน browser อย่างแม่นยำ
อ่านเพิ่ม →CSS :has() เปลี่ยนวิธีเขียน hamburger nav ไปเลย
:has() ทำให้ hamburger menu เป็น CSS-only ได้จริงโดยไม่ต้อง JavaScript
อ่านเพิ่ม →CSS Custom Properties inherit ลงมาตาม DOM — override ได้ที่ระดับ component
CSS variables ทำงานแบบ cascade เหมือน property ทั่วไป — ตั้งที่ :root แล้ว override ใน component ได้เลยโดยไม่กระทบส่วนอื่น
อ่านเพิ่ม →:focus-visible แทน :focus สำหรับ keyboard accessibility
:focus-visible แสดง outline เฉพาะเมื่อ navigate ด้วย keyboard — ไม่รกตาเมื่อ click ด้วย mouse
อ่านเพิ่ม →<dialog> element — native modal โดยไม่ต้อง library
browser มี <dialog> built-in พร้อม focus trap, backdrop, Escape key — ไม่ต้อง install อะไรเพิ่ม
อ่านเพิ่ม →clamp() สำหรับ fluid typography ไม่ต้อง media query
font-size ที่ scale ตาม viewport อัตโนมัติ ไม่ต้องเขียน breakpoint เลย
อ่านเพิ่ม →Books 2
CSS: The Definitive Guide
อ่านแล้ว
Every Layout
กำลังอ่าน