Panupong WS

[Note] YAML dates ใน Astro Content Collections

Tue, 16 Jun 2026 00:00:00 GMT

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

[Project] ระบบจัดการหลักฐานคดี (evidence case app)

Mon, 15 Jun 2026 00:00:00 GMT

ระบบจัดการหลักฐานคดี

[Note] Astro Actions — type-safe server functions ใน Astro 5

Mon, 15 Jun 2026 00:00:00 GMT

Astro Actions — type-safe server functions ใน Astro 5

[Note] Astro Middleware — intercept requests ก่อนถึง page

Mon, 15 Jun 2026 00:00:00 GMT

Astro Middleware — intercept requests ก่อนถึง page

[Note] @starting-style — CSS transition ตอน element ปรากฏครั้งแรก

Mon, 15 Jun 2026 00:00:00 GMT

@starting-style — CSS transition ตอน element ปรากฏครั้งแรก

[Note] text-wrap: balance — จัดบรรทัด heading ให้สมดุลอัตโนมัติ

Mon, 15 Jun 2026 00:00:00 GMT

text-wrap: balance — จัดบรรทัด heading ให้สมดุลอัตโนมัติ

[Note] git blame --ignore-rev — ซ่อน commit ที่เป็นแค่ formatting

Mon, 15 Jun 2026 00:00:00 GMT

git blame --ignore-rev — ซ่อน commit ที่เป็นแค่ formatting

[Note] git rebase --onto — ย้าย commits ไปอยู่บน branch อื่น

Mon, 15 Jun 2026 00:00:00 GMT

git rebase --onto — ย้าย commits ไปอยู่บน branch อื่น

[Note] git sparse-checkout — clone แค่บางโฟลเดอร์จาก monorepo

Mon, 15 Jun 2026 00:00:00 GMT

git sparse-checkout — clone แค่บางโฟลเดอร์จาก monorepo

[Note] HTML lazy loading — โหลด resource เมื่อใกล้จะเห็น

Mon, 15 Jun 2026 00:00:00 GMT

HTML lazy loading — โหลด resource เมื่อใกล้จะเห็น

[Note] Array.flat() และ flatMap() — จัดการ nested arrays

Mon, 15 Jun 2026 00:00:00 GMT

Array.flat() และ flatMap() — จัดการ nested arrays

[Note] JavaScript Error Types — ประเภท Error ที่ควรรู้

Mon, 15 Jun 2026 00:00:00 GMT

JavaScript Error Types — ประเภท Error ที่ควรรู้

[Note] Event Delegation — ผูก listener ครั้งเดียวกับ parent

Mon, 15 Jun 2026 00:00:00 GMT

Event Delegation — ผูก listener ครั้งเดียวกับ parent

[Note] fetch + ReadableStream — อ่านข้อมูลแบบ streaming

Mon, 15 Jun 2026 00:00:00 GMT

fetch + ReadableStream — อ่านข้อมูลแบบ streaming

[Note] Intl API — format ตัวเลข วันที่ และ relative time แบบ native

Mon, 15 Jun 2026 00:00:00 GMT

Intl API — format ตัวเลข วันที่ และ relative time แบบ native

[Note] TypeScript Declaration Merging — ต่อเติม type ที่มีอยู่

Mon, 15 Jun 2026 00:00:00 GMT

TypeScript Declaration Merging — ต่อเติม type ที่มีอยู่

[Note] TypeScript Exhaustive Check — ให้ compiler บอกเมื่อลืม case

Mon, 15 Jun 2026 00:00:00 GMT

TypeScript Exhaustive Check — ให้ compiler บอกเมื่อลืม case

[Project] AI Prompt Library

Sun, 14 Jun 2026 00:00:00 GMT

คลัง prompts ส่วนตัวที่ใช้จริง จัดเก็บเป็น Markdown ใน ~/.prompts/ พร้อม CLI สำหรับค้นหา, ใช้งาน และ track ว่า prompt ไหนให้ผลดี

[Project] Astro Blog Theme

Sun, 14 Jun 2026 00:00:00 GMT

Minimal Astro blog starter theme ที่ focus บน typography, dark mode, และ content — ไม่มี bloat

[Project] CSS Variable Toolkit

Sun, 14 Jun 2026 00:00:00 GMT

npm package สำหรับ CSS custom properties — ชุด design tokens, utility mixins, และ dark mode theme generator พร้อมใช้ใน Astro, Next.js, และ Vanilla CSS

[Project] Dev Session Starter

Sun, 14 Jun 2026 00:00:00 GMT

Script และ tmux config สำหรับเปิด development environment ด้วยคำสั่งเดียว — sessions, panes, และ services ขึ้นมาพร้อมทำงานทันที

[Project] E-commerce Content AI

Sun, 14 Jun 2026 00:00:00 GMT

ใช้ Claude API สร้าง product descriptions สำหรับอะไหล่มอเตอร์ไซค์ — รับ spec จาก CSV, ส่งผ่าน Anthropic SDK, export เป็น JSON/Markdown ที่พร้อม copy เข้า platform

[Project] JSON Diff Visualizer

Sun, 14 Jun 2026 00:00:00 GMT

เว็บ tool สำหรับเปรียบ JSON สอง version แบบ side-by-side พร้อม highlight การเปลี่ยนแปลงแบบ nested

[Project] Markdown Notes Exporter

Sun, 14 Jun 2026 00:00:00 GMT

Script สำหรับ export note จาก Obsidian vault เป็น formats ต่างๆ — PDF, HTML, และ clean Markdown ที่ไม่มี wiki links

[Project] quick-note-cli

Sun, 14 Jun 2026 00:00:00 GMT

terminal notepad เขียนด้วย Node.js — บันทึก note ลง ~/.notes/ ด้วยคำสั่งเดียว พร้อม tag, search, และ export เป็น markdown

[Project] RSS Reader CLI

Sun, 14 Jun 2026 00:00:00 GMT

CLI tool สำหรับอ่าน RSS feeds ใน terminal — ดึง feed, แสดงบทความล่าสุด, บันทึก source ไว้ใน config

[Project] Site Screenshot Tool

Sun, 14 Jun 2026 00:00:00 GMT

CLI tool ถ่าย screenshot จาก URL list ด้วย Playwright — รองรับ responsive breakpoints, dark mode และ batch export

[Project] Type Scale Explorer

Sun, 14 Jun 2026 00:00:00 GMT

เครื่องมือสำรวจ typographic scale แบบ visual — ปรับ base size, ratio, และ font family แล้วดู preview ทันที

[Resource] AI Agents & Agentic Patterns

Sun, 14 Jun 2026 00:00:00 GMT

สถาปัตยกรรมและ patterns สำหรับ AI agents: agentic loop, tool use, multi-step planning, orchestration, parallel agents และการจัดการ context window

[Resource] Astro Islands Architecture — JavaScript เฉพาะที่จำเป็น

Sun, 14 Jun 2026 00:00:00 GMT

เข้าใจ Islands Architecture ของ Astro ว่าทำงานอย่างไร ทำไมถึงส่ง zero JS by default และเมื่อไรควรใช้ client directives เพื่อ hydrate component

[Resource] Astro Server Islands — Dynamic Content ใน Static Site

Sun, 14 Jun 2026 00:00:00 GMT

Server Islands คือ Astro 5 feature ที่ช่วยฝัง dynamic server-rendered component ลงใน static page โดยไม่ต้อง sacrifice performance ของหน้าอื่น

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] Browser Web APIs — ResizeObserver, Clipboard, Broadcast Channel, Web Workers

Sun, 14 Jun 2026 00:00:00 GMT

Web APIs ที่ใช้บ่อยและมักถูกมองข้าม: ResizeObserver, MutationObserver, Clipboard, Broadcast Channel, Web Workers

[Resource] Claude API & Anthropic SDK

Sun, 14 Jun 2026 00:00:00 GMT

ใช้งาน Anthropic SDK กับ TypeScript: Messages API, streaming, tool use (function calling), system prompts, token counting และ best practices

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] CSS Architecture — BEM, CUBE CSS, Utility Classes

Sun, 14 Jun 2026 00:00:00 GMT

แนวทางจัดการ CSS ใน project ขนาดใหญ่: BEM naming, CUBE CSS methodology, เปรียบเทียบ Tailwind vs custom CSS

[Resource] CSS @property — Typed Custom Properties

Sun, 14 Jun 2026 00:00:00 GMT

CSS @property ทำให้ custom properties มี type, initial value, และ inheritance control — รองรับ animation ของ color, number, และ gradient

[Resource] CSS Cascade Layers — จัดการ Specificity แบบมีระบบ

Sun, 14 Jun 2026 00:00:00 GMT

@layer ช่วยควบคุมลำดับความสำคัญของ CSS โดยไม่ต้องพึ่ง specificity hack หรือ !important

[Resource] CSS color-mix() และ Modern Color Functions

Sun, 14 Jun 2026 00:00:00 GMT

color-mix() ผสมสีโดยตรงใน CSS, relative color syntax แก้ไข channel เดียว, light-dark() สำหรับ adaptive color ไม่ต้องการ media query

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

Sun, 14 Jun 2026 00:00:00 GMT

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

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] CSS Grid Advanced — Subgrid, Template Areas, Named Lines

Sun, 14 Jun 2026 00:00:00 GMT

เทคนิค Grid ระดับสูง: subgrid, named grid areas, auto-placement algorithm, และ grid ซ้อน grid

[Resource] CSS Logical Properties — Writing Mode Aware Layout

Sun, 14 Jun 2026 00:00:00 GMT

margin-inline, padding-block, inset-inline-start — เขียน CSS ที่รองรับ RTL และ vertical text โดยไม่ต้องเขียน rule ซ้ำ

[Resource] CSS Nesting — Native Nested Selectors

Sun, 14 Jun 2026 00:00:00 GMT

CSS Nesting ที่รองรับใน browser ตั้งแต่ Chrome 120+ ทำให้เขียน nested selectors ได้โดยไม่ต้องใช้ Sass — ครอบคลุม syntax, &, @nest, และ gotchas

[Resource] CSS oklch() — ระบบสีสมัยใหม่ที่ดีกว่า hsl()

Sun, 14 Jun 2026 00:00:00 GMT

oklch() คือ color space ที่มนุษย์มองเห็นได้สม่ำเสมอ (perceptually uniform) — สร้าง palette ที่ consistent กว่าเดิมด้วย 3 ค่า: Lightness, Chroma, Hue

[Resource] CSS Scroll-Driven Animations

Sun, 14 Jun 2026 00:00:00 GMT

Animate elements ตาม scroll position โดยใช้ animation-timeline: scroll() และ view() — ไม่ต้องการ JavaScript หรือ ScrollTrigger

[Resource] CSS Scroll Snap

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] CSS Subgrid — Nested Grids ที่ Align กับ Parent

Sun, 14 Jun 2026 00:00:00 GMT

CSS Subgrid ช่วยให้ nested elements align กับ grid ของ parent ได้ — แก้ปัญหา misaligned columns ใน card grids

[Resource] Deploying Static Sites — Vercel, Netlify, GitHub Pages

Sun, 14 Jun 2026 00:00:00 GMT

วิธี deploy static site ด้วย Vercel, Netlify, และ GitHub Pages — เปรียบเทียบ features, ราคา, และ workflow

[Resource] Docker Basics — Container, Image, Compose

Sun, 14 Jun 2026 00:00:00 GMT

คำสั่ง Docker ที่ใช้บ่อยสำหรับ developer: build image, run container, Compose, volume, network

[Resource] ESLint + Prettier Configuration — TypeScript Project Setup

Sun, 14 Jun 2026 00:00:00 GMT

ตั้งค่า ESLint + Prettier ที่ทำงานร่วมกันได้สำหรับ TypeScript project: rules, integrations, pre-commit hooks

[Resource] Fetch API Patterns — Data Fetching, AbortController, Retry

Sun, 14 Jun 2026 00:00:00 GMT

Patterns สำหรับ fetch ข้อมูล: timeout, retry, AbortController, error handling, caching headers, streaming response

[Resource] Git Advanced — Rebase, Stash, Bisect, Reflog

Sun, 14 Jun 2026 00:00:00 GMT

คำสั่ง Git ขั้นสูงที่ใช้บ่อยในงานจริง: interactive rebase, stash, cherry-pick, bisect, reflog, และ fixup workflow

[Resource] Git Branching Workflow — Feature Branch, Trunk-Based, GitFlow

Sun, 14 Jun 2026 00:00:00 GMT

เปรียบเทียบ branching strategy แต่ละแบบ เมื่อไหรควรใช้อะไร พร้อม command ที่ใช้บ่อย

[Resource] GitHub Actions Advanced — Matrix, Cache, Reusable Workflows

Sun, 14 Jun 2026 00:00:00 GMT

GitHub Actions ขั้นสูง: matrix builds, dependency caching, reusable workflows, environment secrets, และ workflow triggers

[Resource] GitHub Actions สำหรับ Static Site — CI/CD อัตโนมัติ

Sun, 14 Jun 2026 00:00:00 GMT

ตั้งค่า GitHub Actions workflow สำหรับ static site ให้รัน build check อัตโนมัติทุก push และ deploy ไปยัง Railway หรือ GitHub Pages เมื่อ merge เข้า main

[Resource] GSAP Animation Guide — คู่มือ Animation ที่ทุก Frontend ควรรู้

Sun, 14 Jun 2026 00:00:00 GMT

GSAP คืออะไร ทำงานยังไง และวิธีใช้งานจริงในโปรเจกต์ — ตั้งแต่ gsap.to() พื้นฐานไปถึง ScrollTrigger และ Timeline

[Resource] HTML Forms & Native Validation

Sun, 14 Jun 2026 00:00:00 GMT

Native HTML5 form validation, Constraint Validation API, custom error messages, และ patterns สำหรับ accessible forms

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] HTTP Caching — Cache-Control, ETag, Stale-While-Revalidate

Sun, 14 Jun 2026 00:00:00 GMT

ทำความเข้าใจ HTTP caching headers ที่ถูกต้อง ลด server load และเร็วขึ้นสำหรับผู้ใช้กลับมา

[Resource] Browser Storage — localStorage, sessionStorage, IndexedDB

Sun, 14 Jun 2026 00:00:00 GMT

เปรียบเทียบและใช้งาน browser storage: localStorage สำหรับ simple KV, IndexedDB สำหรับ structured data ขนาดใหญ่

[Resource] Intersection Observer API — Lazy Load, Scroll Animations, Infinite Scroll

Sun, 14 Jun 2026 00:00:00 GMT

ใช้ IntersectionObserver ตรวจว่า element เข้า/ออก viewport โดยไม่ต้องใช้ scroll event

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] JavaScript Closures และ Scope — เข้าใจจริง ไม่ใช่แค่ท่อง

Sun, 14 Jun 2026 00:00:00 GMT

Scope chain, lexical environment, closures ทำงานยังไง, และ use cases จริงที่เจอบ่อย

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] JavaScript Design Patterns

Sun, 14 Jun 2026 00:00:00 GMT

Design patterns ที่ใช้บ่อยใน JavaScript/TypeScript: Singleton, Observer, Factory, Strategy, Command, และ Module pattern

[Resource] JavaScript Error Handling — try/catch, Custom Errors, Result Pattern

Sun, 14 Jun 2026 00:00:00 GMT

Patterns สำหรับจัดการ errors ใน JavaScript/TypeScript: custom error classes, error chaining, Result type, async error handling

[Resource] JavaScript Generators และ Iterators — Lazy Sequences

Sun, 14 Jun 2026 00:00:00 GMT

function*, yield, iterators protocol และ use cases จริง: infinite sequences, async generators, pipeline

[Resource] JavaScript Modern APIs (2023–2025)

Sun, 14 Jun 2026 00:00:00 GMT

APIs ใหม่ที่ใช้ได้ใน modern browsers และ Node.js: Object.groupBy, Array methods ใหม่, structuredClone, Promise.withResolvers, และอื่นๆ

[Resource] JavaScript Modules (ESM) — Import/Export ที่ควรรู้

Sun, 14 Jun 2026 00:00:00 GMT

เข้าใจ ES Modules, named exports, default exports, dynamic import(), re-exports และการใช้ร่วมกับ TypeScript และ Astro

[Resource] JavaScript Promises & Async/Await — จัดการ Asynchronous อย่างถูกต้อง

Sun, 14 Jun 2026 00:00:00 GMT

อธิบาย Promise chain, async/await, error handling, Promise.all/race/allSettled และ pitfalls ที่พบบ่อยเมื่อเขียน async JavaScript ใน TypeScript

[Resource] JavaScript Proxy & Reflect

Sun, 14 Jun 2026 00:00:00 GMT

Proxy ดักจับ operations บน object (get, set, delete) และ Reflect ให้ default behavior — ใช้สร้าง reactive data, validation, lazy loading

[Resource] Node.js CLI Tools — commander, inquirer, chalk, ora

Sun, 14 Jun 2026 00:00:00 GMT

สร้าง CLI tool ด้วย Node.js: parse args ด้วย commander, prompts ด้วย inquirer, colors ด้วย chalk, spinner ด้วย ora

[Resource] Node.js File System — fs/promises, path, Common Patterns

Sun, 14 Jun 2026 00:00:00 GMT

อ่าน เขียน คัดลอก ลบไฟล์และ directory ด้วย fs/promises และ path module — patterns ที่ใช้บ่อยใน scripts

[Resource] Node.js Streams — Readable, Writable, Transform, Pipeline

Sun, 14 Jun 2026 00:00:00 GMT

จัดการข้อมูลปริมาณมากด้วย Node.js Streams: pipe, pipeline, Transform streams, backpressure, และ async iteration

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] npm Workspaces & Monorepo Basics

Sun, 14 Jun 2026 00:00:00 GMT

จัดการ multiple packages ใน repo เดียวด้วย npm workspaces — shared dependencies, cross-package scripts, และ monorepo patterns

[Resource] package.json Modern Fields — exports, type, engines

Sun, 14 Jun 2026 00:00:00 GMT

Fields สำคัญใน package.json สำหรับ modern npm packages: exports map, type: module, engines, files, และ npm publish workflow

[Resource] Playwright E2E Testing — Browser Automation for Modern Web

Sun, 14 Jun 2026 00:00:00 GMT

ทดสอบ UI แบบ end-to-end ด้วย Playwright: เขียน tests, locators, page objects, API mocking, CI integration

[Resource] Prompt Engineering — Patterns ที่ใช้จริง

Sun, 14 Jun 2026 00:00:00 GMT

เทคนิค prompt engineering ที่ใช้กับ Claude และ LLM ทั่วไป: zero-shot, few-shot, chain-of-thought, system prompts, structured output และ prompt injection

[Resource] Progressive Web App (PWA) — Manifest, Service Worker, Offline

Sun, 14 Jun 2026 00:00:00 GMT

สร้าง PWA ตั้งแต่ web app manifest ถึง service worker caching strategy และ install prompt

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] TypeScript Conditional Types — infer, Mapped Types, Template Literal Types

Sun, 14 Jun 2026 00:00:00 GMT

เทคนิค TypeScript ระดับสูง: conditional types, infer keyword, mapped types modifiers, template literal types

[Resource] TypeScript Configuration — tsconfig.json Guide

Sun, 14 Jun 2026 00:00:00 GMT

เข้าใจ tsconfig.json ทุก option ที่สำคัญ: strict mode, paths, module resolution, target, lib — ตั้งค่าให้ถูกสำหรับแต่ละ project

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] TypeScript Module Augmentation & Declaration Merging

Sun, 14 Jun 2026 00:00:00 GMT

เพิ่ม types ให้ third-party modules, extend interface ที่มีอยู่, และสร้าง .d.ts files สำหรับ JavaScript libraries

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] TypeScript satisfies & const Assertions

Sun, 14 Jun 2026 00:00:00 GMT

satisfies operator (TS 4.9) และ as const ช่วย infer types ที่แคบลงโดยไม่ต้อง annotate — ทำให้โค้ดปลอดภัยขึ้นโดยไม่เสีย flexibility

[Resource] Vite Config Guide — Plugins, Alias, Build Options

Sun, 14 Jun 2026 00:00:00 GMT

vite.config.ts ตั้งแต่ alias, resolve, plugins จนถึง build optimization และ dev server options

[Resource] Vitest — Unit Testing สำหรับ TypeScript และ Vite Projects

Sun, 14 Jun 2026 00:00:00 GMT

Vitest คือ test runner ที่เร็วที่สุดสำหรับ Vite-based projects — setup วิธีเขียน test และ pattern ที่ใช้จริง

[Resource] VS Code Setup สำหรับ Astro + TypeScript

Sun, 14 Jun 2026 00:00:00 GMT

การตั้งค่า VS Code ที่ทำให้การเขียน Astro + TypeScript smooth ที่สุด — extensions, settings.json, snippets, และ debug config

[Resource] Web Components & Custom Elements

Sun, 14 Jun 2026 00:00:00 GMT

สร้าง reusable components ด้วย browser APIs โดยตรง: Custom Elements, Shadow DOM, HTML Templates — ไม่ต้องการ framework

[Resource] Web Fonts Optimization — โหลด Font เร็วโดยไม่กระทบ UX

Sun, 14 Jun 2026 00:00:00 GMT

วิธี optimize font loading ให้ไม่เกิด FOUT/FOIT, ใช้ font-display อย่างถูกต้อง, preconnect, self-host fonts, variable fonts และ system font stack

[Resource] Web Performance Checklist — ตรวจสอบก่อน Ship

Sun, 14 Jun 2026 00:00:00 GMT

Checklist สำหรับ frontend performance ที่ครอบคลุม Core Web Vitals, images, fonts, JavaScript, และ network — ใช้ก่อน deploy ทุกครั้ง

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

Sun, 14 Jun 2026 00:00:00 GMT

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

[Resource] Zsh/Bash Shell Scripting — Automation ใน Terminal

Sun, 14 Jun 2026 00:00:00 GMT

เขียน shell scripts สำหรับ automate งาน: variables, conditions, loops, functions, error handling, และ common patterns

[Note] CSS Anchor Positioning — ยึด element กับ element อื่น

Sun, 14 Jun 2026 00:00:00 GMT

CSS Anchor Positioning — ยึด element กับ element อื่น

[Note] sharp รองรับ SVG input ได้โดยตรงผ่าน librsvg

Sun, 14 Jun 2026 00:00:00 GMT

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

[Project] Panupong WS

Sat, 13 Jun 2026 00:00:00 GMT

เว็บส่วนตัวสำหรับรวบรวม projects, resources และ notes ด้าน tech, dev และ graphic design สร้างด้วย Astro และ TypeScript แบบ static site

[Resource] SEO Meta Tags — คู่มือครบสำหรับ Static Site

Sat, 13 Jun 2026 00:00:00 GMT

รวม meta tags ที่จำเป็น ตั้งแต่ title, description, Open Graph, Twitter Card ไปจนถึง JSON-LD structured data สำหรับ static site

[Note] Performance API — วัด timing ใน browser อย่างแม่นยำ

Sat, 13 Jun 2026 00:00:00 GMT

Performance API — วัด timing ใน browser อย่างแม่นยำ

[Project] CSS Animation Library

Fri, 12 Jun 2026 00:00:00 GMT

collection ของ CSS animation snippets แบบ copy-paste — entrance, exit, loading, micro-interaction พร้อม Astro demo page

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

Fri, 12 Jun 2026 00:00:00 GMT

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

[Note] TypeScript Conditional Types — T extends U ? X : Y

Fri, 12 Jun 2026 00:00:00 GMT

TypeScript Conditional Types — T extends U ? X : Y

[Project] Color Contrast Checker

Thu, 11 Jun 2026 00:00:00 GMT

CLI + Web tool ตรวจ WCAG color contrast ratio — รับ hex/rgb/hsl แสดง pass/fail AA/AAA และ suggest สี alternative

[Project] Schema Markup Generator

Wed, 10 Jun 2026 00:00:00 GMT

Web tool สร้าง JSON-LD structured data สำหรับ e-commerce — Product, BreadcrumbList, Organization schema พร้อม copy-paste

[Resource] HTMX — HTML Attributes แทน JavaScript สำหรับ Dynamic UI

Wed, 10 Jun 2026 00:00:00 GMT

คู่มือ HTMX — ทำ AJAX, WebSocket และ SSE ด้วย HTML attributes โดยไม่เขียน JavaScript

[Resource] Linux Terminal Tips สำหรับ Web Developer

Wed, 10 Jun 2026 00:00:00 GMT

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

[Resource] Turborepo — Monorepo Build System ที่เร็วด้วย Cache

Wed, 10 Jun 2026 00:00:00 GMT

คู่มือ Turborepo สำหรับจัดการ monorepo — task pipeline, remote caching และการตั้งค่า workspace กับ pnpm

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

Wed, 10 Jun 2026 00:00:00 GMT

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

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

Wed, 10 Jun 2026 00:00:00 GMT

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

[Note] CSS View Transitions API — page transition แบบ native

Tue, 09 Jun 2026 00:00:00 GMT

CSS View Transitions API — page transition แบบ native

[Resource] Cloudflare Workers — Serverless บน Edge Network

Mon, 08 Jun 2026 00:00:00 GMT

คู่มือ Cloudflare Workers — เขียน serverless function ที่รันบน 300+ edge locations พร้อม KV, D1, R2 storage

[Resource] OpenAI API — Text Generation, Vision และ Embeddings

Mon, 08 Jun 2026 00:00:00 GMT

คู่มือใช้ OpenAI API กับ Node.js/TypeScript — chat completions, streaming, vision และ embeddings

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

Mon, 08 Jun 2026 00:00:00 GMT

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

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

Mon, 08 Jun 2026 00:00:00 GMT

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

[Note] Set Methods ใหม่ ES2025 — union, intersection, difference

Mon, 08 Jun 2026 00:00:00 GMT

Set Methods ใหม่ ES2025 — union, intersection, difference

[Project] Markdown to PDF

Sun, 07 Jun 2026 00:00:00 GMT

CLI tool แปลง Markdown เป็น PDF ด้วย Playwright — รองรับ custom CSS, syntax highlight และ Thai font

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

Sun, 07 Jun 2026 00:00:00 GMT

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

[Note] Web Workers — รัน JS บน background thread

Sat, 06 Jun 2026 00:00:00 GMT

Web Workers — รัน JS บน background thread

[Resource] Astro SSR — output server/hybrid mode

Fri, 05 Jun 2026 00:00:00 GMT

คู่มือ Astro SSR mode — เปิด server rendering, adapters (Node.js, Cloudflare, Vercel), และ hybrid (บาง page static บาง page server)

[Resource] Bun Runtime — JavaScript runtime ที่เร็วกว่า Node

Fri, 05 Jun 2026 00:00:00 GMT

คู่มือ Bun — runtime ที่รวม bundler, test runner และ package manager ไว้ด้วยกัน ใช้แทน Node + npm ได้เลย

[Resource] Excalidraw — วาด diagram แบบ hand-drawn สำหรับ developer

Fri, 05 Jun 2026 00:00:00 GMT

Excalidraw คือ whiteboard tool แบบ open-source ที่วาด diagram ออกมาดูเหมือนวาดมือ เหมาะสำหรับ brainstorm, system design และอธิบาย architecture

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

Fri, 05 Jun 2026 00:00:00 GMT

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

[Note] HTML — responsive image ที่ถูกวิธี

Fri, 05 Jun 2026 00:00:00 GMT

HTML — responsive image ที่ถูกวิธี

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

Fri, 05 Jun 2026 00:00:00 GMT

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

[Project] URL Shortener CLI

Wed, 03 Jun 2026 00:00:00 GMT

CLI tool ย่อ URL ด้วย TinyURL API และจัดการ history — บันทึก, ค้นหา และ copy ไปยัง clipboard

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

Wed, 03 Jun 2026 00:00:00 GMT

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

[Note] ทำไม static site ถึงเหมาะกับเว็บส่วนตัวมากกว่า CMS

Wed, 03 Jun 2026 00:00:00 GMT

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

[Note] TypeScript Mapped Types — แปลง type ทุก key พร้อมกัน

Tue, 02 Jun 2026 00:00:00 GMT

TypeScript Mapped Types — แปลง type ทุก key พร้อมกัน

[Project] Daily Summary Bot

Mon, 01 Jun 2026 00:00:00 GMT

LINE Notify bot สรุปงานประจำวัน — ดึง git commits, tasks จาก todo file และ send สรุปผ่าน LINE ทุกเย็น

[Resource] Astro Content Collections — คู่มือฉบับใช้งานจริง

Mon, 01 Jun 2026 00:00:00 GMT

คู่มือการใช้ Content Collections ใน Astro 6 สำหรับจัดการเนื้อหาแบบ type-safe ด้วย Zod schema พร้อม patterns ที่ใช้บ่อยในโปรเจคจริง

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

Mon, 01 Jun 2026 00:00:00 GMT

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

[Resource] Drizzle ORM — Type-safe SQL ที่ไม่ซ่อน SQL จากคุณ

Mon, 01 Jun 2026 00:00:00 GMT

คู่มือ Drizzle ORM สำหรับ TypeScript — schema definition, query builder, migration และใช้กับ SQLite, PostgreSQL

[Resource] Turso & LibSQL — SQLite บน Edge

Mon, 01 Jun 2026 00:00:00 GMT

คู่มือใช้ Turso (LibSQL) สำหรับ edge database — เชื่อมต่อจาก Node.js, Cloudflare Workers และ Astro

[Note] Array.at() อ่าน element จากท้าย array ได้โดยไม่ต้องคำนวณ index

Mon, 01 Jun 2026 00:00:00 GMT

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

[Note] crypto.randomUUID() — สร้าง UUID v4 ใน browser และ Node.js โดยไม่ต้องลง library

Mon, 01 Jun 2026 00:00:00 GMT

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

[Resource] Web Storage — localStorage, sessionStorage และ IndexedDB

Sat, 30 May 2026 00:00:00 GMT

เปรียบเทียบ storage options ใน browser — localStorage, sessionStorage, IndexedDB และเมื่อไหร่ควรใช้อะไร

[Note] HTML Constraint Validation API — validate form โดยไม่ต้อง JS

Sat, 30 May 2026 00:00:00 GMT

HTML Constraint Validation API — validate form โดยไม่ต้อง JS

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

Thu, 28 May 2026 00:00:00 GMT

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

[Resource] Zod — Schema Validation ที่ TypeScript รัก

Thu, 28 May 2026 00:00:00 GMT

Zod คือ library สำหรับ validate ข้อมูลแบบ type-safe ซึ่ง Astro Content Collections ใช้ภายใต้ฝาครอบ รู้จัก Zod ให้ดีคือรู้จัก schema ของ content collection ให้ดีขึ้น

[Note] :focus-visible แทน :focus สำหรับ keyboard accessibility

Thu, 28 May 2026 00:00:00 GMT

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

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

Thu, 28 May 2026 00:00:00 GMT

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

[Note] TypeScript Utility Types ที่ใช้บ่อยสุด

Thu, 28 May 2026 00:00:00 GMT

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

[Resource] Service Workers — Cache Strategy สำหรับ Static Site

Mon, 25 May 2026 00:00:00 GMT

คู่มือ Service Worker สำหรับ offline caching, stale-while-revalidate และ cache management บน static site

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

Mon, 25 May 2026 00:00:00 GMT

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

[Note] CSS grid-template-areas — layout เป็น visual map

Fri, 22 May 2026 00:00:00 GMT

CSS grid-template-areas — layout เป็น visual map

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

Fri, 22 May 2026 00:00:00 GMT

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

[Project] Chrome Extension Starter

Wed, 20 May 2026 00:00:00 GMT

Template สำหรับสร้าง Chrome Extension Manifest V3 พร้อม Vite + TypeScript — มี popup, content script และ background service worker

[Resource] Pagefind — Full-text Search สำหรับ Static Site

Wed, 20 May 2026 00:00:00 GMT

Pagefind คือ library สำหรับเพิ่มระบบค้นหาให้กับ static site โดยไม่ต้องมี server หรือ external API ทำงานได้หลัง build เลย

[Resource] Tailwind CSS v4 — สิ่งที่เปลี่ยนไปและสิ่งที่ต้องรู้

Wed, 20 May 2026 00:00:00 GMT

สรุป Tailwind CSS v4 — CSS-first config, เลิก tailwind.config.js, @theme directive และ performance ที่ดีขึ้น

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

Wed, 20 May 2026 00:00:00 GMT

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

[Note]
และ
— accordion โดยไม่ต้องเขียน JavaScript

Wed, 20 May 2026 00:00:00 GMT

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

[Note] element — native modal โดยไม่ต้อง library

Wed, 20 May 2026 00:00:00 GMT

browser มี

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

Mon, 18 May 2026 00:00:00 GMT

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

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

Mon, 18 May 2026 00:00:00 GMT

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

[Resource] สร้าง RSS Feed กับ Astro — @astrojs/rss

Fri, 15 May 2026 00:00:00 GMT

วิธีตั้งค่า RSS feed สำหรับ Astro static site ด้วย @astrojs/rss รองรับ Content Collections และ custom channel metadata

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

Fri, 15 May 2026 00:00:00 GMT

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

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

Fri, 15 May 2026 00:00:00 GMT

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

[Note] AbortController — ยกเลิก fetch ที่กำลังรอได้

Fri, 15 May 2026 00:00:00 GMT

AbortController — ยกเลิก fetch ที่กำลังรอได้

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

Tue, 12 May 2026 00:00:00 GMT

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

[Project] Astro Component Playground

Sun, 10 May 2026 00:00:00 GMT

Interactive sandbox สำหรับทดสอบ Astro components แบบ real-time — เขียน component code แล้วเห็น preview ทันที

[Note] CSS @layer — จัดการ specificity โดยไม่ต้องแข่ง selector

Sun, 10 May 2026 00:00:00 GMT

CSS @layer — จัดการ specificity โดยไม่ต้องแข่ง selector

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

Sun, 10 May 2026 00:00:00 GMT

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

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

Tue, 05 May 2026 00:00:00 GMT

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

[Project] Link Garden

Sat, 02 May 2026 00:00:00 GMT

พื้นที่รวบรวมและจัดหมวดหมู่ลิงก์ที่น่าสนใจในแบบ digital garden สร้างด้วย Astro ไม่ใช่ bookmark ธรรมดา แต่มี note อธิบายว่าทำไมลิงก์นี้ถึงมีคุณค่า

[Project] Astro SEO Audit

Fri, 01 May 2026 00:00:00 GMT

CLI script ตรวจ SEO ของ Astro static site — ตรวจ meta tags, canonical URL, Open Graph, structured data และ performance hints

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

Tue, 28 Apr 2026 00:00:00 GMT

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

[Resource] SQLite สำหรับ Web Developer — ใช้ได้ทั้ง local และ edge

Sat, 25 Apr 2026 00:00:00 GMT

คู่มือใช้ SQLite ใน Node.js, Cloudflare Workers (D1) และ LibSQL — database ที่ไม่ต้องการ server

[Note] Discriminated Unions — type narrowing ที่ TypeScript ชอบที่สุด

Sat, 25 Apr 2026 00:00:00 GMT

Discriminated Unions — type narrowing ที่ TypeScript ชอบที่สุด

[Project] Zod Schema Studio

Mon, 20 Apr 2026 00:00:00 GMT

Web tool สำหรับเขียน Zod schema แบบ interactive — เห็น type output และ validation errors แบบ real-time ไม่ต้อง setup project

[Project] Reading Log

Sat, 18 Apr 2026 00:00:00 GMT

Static site สำหรับบันทึกหนังสือที่อ่าน พร้อม rating, note และ tags จัดการด้วย Astro Content Collections ไม่ต้องมี backend

[Project] Product Catalog Validator

Wed, 15 Apr 2026 00:00:00 GMT

TypeScript CLI สำหรับ validate product catalog ก่อน import — ตรวจ required fields, format ราคา, รูปภาพ URL และ category hierarchy

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

Wed, 15 Apr 2026 00:00:00 GMT

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

[Resource] Content Security Policy (CSP) — ป้องกัน XSS ด้วย HTTP Header

Fri, 10 Apr 2026 00:00:00 GMT

คู่มือตั้งค่า CSP header เพื่อป้องกัน Cross-Site Scripting (XSS) และ injection attacks บน static site

[Note] Generator Functions — function ที่ pause ได้

Fri, 10 Apr 2026 00:00:00 GMT

Generator Functions — function ที่ pause ได้

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

Thu, 02 Apr 2026 00:00:00 GMT

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

[Project] Astro Minimal Starter

Wed, 01 Apr 2026 00:00:00 GMT

Starter template สำหรับ Astro ที่ stripped-down จนเหลือแค่สิ่งจำเป็น — dark mode, TypeScript strict, font loading, global CSS reset พร้อมใช้งานได้เลย

[Note] WeakMap & WeakSet — reference ที่ไม่กัน GC

Wed, 25 Mar 2026 00:00:00 GMT

WeakMap & WeakSet — reference ที่ไม่กัน GC

[Resource] SVG Sprites & Icon System — icon ที่ maintain ง่ายและ accessible

Sun, 22 Mar 2026 00:00:00 GMT

วิธีสร้าง icon system ด้วย SVG sprite (symbol + use) และแนวทางทำ accessible icons ที่ถูกต้อง

[Note] oklch() — color function ที่ perceptually uniform กว่า hsl()

Wed, 18 Mar 2026 00:00:00 GMT

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

[Project] Font Pairing Tool

Sun, 15 Mar 2026 00:00:00 GMT

เครื่องมือ web-based สำหรับทดลอง Google Fonts pairing แบบ real-time เลือก heading + body font แล้วดูผลทันที ไม่ต้องสลับไป Google Fonts

[Resource] Accessibility Testing Tools — ตรวจ a11y อย่างมีระบบ

Sun, 15 Mar 2026 00:00:00 GMT

รวม tools สำหรับ test web accessibility ตั้งแต่ automated scan ถึง manual testing ด้วย screen reader

[Project] Second Brain CLI

Tue, 10 Mar 2026 00:00:00 GMT

เครื่องมือ command-line สำหรับจัดการ notes และ knowledge base ในแบบ Zettelkasten ช่วยเชื่อมโยงความคิดและดึงข้อมูลกลับมาได้รวดเร็ว

[Note] TypeScript Template Literal Types — type ที่ประกอบจาก string

Tue, 10 Mar 2026 00:00:00 GMT

TypeScript Template Literal Types — type ที่ประกอบจาก string

[Project] CSV Budget CLI

Sun, 08 Mar 2026 00:00:00 GMT

CLI tool สำหรับวิเคราะห์รายจ่ายจากไฟล์ CSV ของธนาคาร — จัดหมวดหมู่อัตโนมัติ สรุปรายเดือน และ export รายงาน

[Resource] Astro Image Optimization — ใช้ astro:assets ให้ถูกต้อง

Sun, 08 Mar 2026 00:00:00 GMT

คู่มือใช้ component และ getImage() ใน Astro สำหรับ WebP, lazy loading และ responsive images ที่ optimize แล้ว

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

Thu, 05 Mar 2026 00:00:00 GMT

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

[Project] Web Component UI Kit

Sat, 28 Feb 2026 00:00:00 GMT

ชุด UI components ที่สร้างด้วย Custom Elements ล้วน — Button, Badge, Tooltip, Dialog — ใช้ร่วมกับทุก framework หรือ vanilla HTML

[Note] CSS Logical Properties — เขียน layout ที่ตามทิศทางข้อความ

Sat, 28 Feb 2026 00:00:00 GMT

CSS Logical Properties — เขียน layout ที่ตามทิศทางข้อความ

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

Fri, 20 Feb 2026 00:00:00 GMT

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

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

Fri, 20 Feb 2026 00:00:00 GMT

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

[Note] CSS color-mix() — ผสมสีใน browser ได้เลย ไม่ต้องพึ่ง JS

Sat, 14 Feb 2026 00:00:00 GMT

CSS color-mix() — ผสมสีใน browser ได้เลย ไม่ต้องพึ่ง JS

[Resource] pnpm — Package Manager ที่เร็วและประหยัด Disk

Thu, 12 Feb 2026 00:00:00 GMT

คู่มือใช้ pnpm แทน npm/yarn — content-addressable store, strict isolation และ workspace สำหรับ monorepo

[Note] HTML Popover API — tooltip และ dropdown โดยไม่ต้องเขียน JS เอง

Sun, 08 Feb 2026 00:00:00 GMT

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

[Resource] GitHub CLI (gh) — จัดการ GitHub จาก Terminal ได้เลย

Thu, 05 Feb 2026 00:00:00 GMT

คู่มือใช้ gh CLI สำหรับ PR, Issues, Actions และ workflow automation โดยไม่ต้องเปิด browser

[Project] Link-in-Bio Page

Sun, 01 Feb 2026 00:00:00 GMT

หน้า link-in-bio แบบ static ที่สร้างด้วย Astro ไม่พึ่ง third-party service ดูแลการออกแบบเองได้ 100% โหลดเร็วกว่า Linktree มาก

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

Wed, 28 Jan 2026 00:00:00 GMT

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

[Project] type-safe-env

Thu, 15 Jan 2026 00:00:00 GMT

TypeScript utility สำหรับ parse และ validate environment variables ด้วย Zod — crash ทันทีถ้า env ขาดหาย แทนที่จะ fail แบบ silent

[Note] CSS Subgrid ทำให้ grandchildren align กับ parent grid ได้

Mon, 12 Jan 2026 00:00:00 GMT

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

[Project] Multi-Agent Tmux Workflow

Wed, 10 Dec 2025 00:00:00 GMT

ระบบ orchestration ใช้ tmux แบ่ง session หลายหน้าต่าง ให้ AI หลายตัวทำงานพร้อมกันบน codebase เดียวโดยไม่ชนกัน

[Project] Color Palette Explorer

Mon, 01 Dec 2025 00:00:00 GMT

เครื่องมือสำหรับสำรวจ color palette ที่ใช้ CSS custom properties อย่างเดียว ไม่มี JavaScript library ให้ copy hex code และดู contrast ratio แบบ real-time

[Resource] Core Web Vitals — ทำ Static Site ให้ได้คะแนนสูง

Mon, 01 Dec 2025 00:00:00 GMT

แนวทางปรับ LCP, CLS, INP สำหรับ static site บน Astro ที่ทำได้จริงโดยไม่ต้องจ้างผู้เชี่ยวชาญ

[Project] DevLog Bot

Thu, 20 Nov 2025 00:00:00 GMT

บอท Discord สำหรับบันทึก dev log อัตโนมัติ ช่วยติดตามความก้าวหน้าของโปรเจคต่างๆ โดยไม่ต้องออกจาก workspace

[Project] Shareable ESLint Config

Thu, 20 Nov 2025 00:00:00 GMT

ESLint configuration package ที่แชร์ได้ across TypeScript projects — รวม rules สำหรับ Node.js, Astro, และ vanilla TS ในชุดเดียว

[Resource] Git Worktree — ทำงานหลาย Branch พร้อมกันโดยไม่ต้อง stash

Wed, 05 Nov 2025 00:00:00 GMT

git worktree ให้ checkout หลาย branch ออกมาเป็น folder แยกกันได้พร้อมกัน แก้ปัญหา "ต้องรีบ hotfix แต่ feature branch ยังไม่เสร็จ" อย่างถาวร

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

Mon, 20 Oct 2025 00:00:00 GMT

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

[Project] Markdown CV

Wed, 15 Oct 2025 00:00:00 GMT

CV/Resume ที่เขียนใน Markdown แล้ว render เป็น HTML ด้วย Astro — แก้ไขง่าย print-ready และไม่ต้องพึ่ง Canva หรือ Google Docs

[Project] CSS Playground

Sun, 05 Oct 2025 00:00:00 GMT

พื้นที่ทดลอง CSS techniques ที่อยากจำ ตั้งแต่ layout tricks ไปจนถึง animation และ custom properties

[Project] Obsidian Starter Vault

Mon, 15 Sep 2025 00:00:00 GMT

Vault สำหรับ second brain ที่ออกแบบให้ใช้งานได้จริงตั้งแต่วันแรก ไม่ซับซ้อนเกินไป เน้น capture → process → output

[Project] Obsidian to Astro Exporter

Fri, 12 Sep 2025 00:00:00 GMT

Script แปลง Obsidian vault เป็น Astro Content Collection — ดึง frontmatter, แปลง wikilinks เป็น markdown links, และ copy assets อัตโนมัติ

[Project] CSS Art Wallpaper Generator

Mon, 01 Sep 2025 00:00:00 GMT

Wallpaper patterns ที่สร้างด้วย CSS ล้วนๆ ไม่มี JavaScript ไม่มี canvas ใช้ CSS gradients, conic-gradient, และ custom properties ในการสร้าง pattern ที่เปลี่ยนแปลงได้

[Project] Image Optimizer CLI

Sun, 03 Aug 2025 00:00:00 GMT

Node.js CLI สำหรับ bulk compress รูปภาพ — แปลงเป็น WebP/AVIF, resize, และ strip metadata อัตโนมัติก่อน deploy