Site Screenshot Tool
CLI tool ถ่าย screenshot จาก URL list ด้วย Playwright — รองรับ responsive breakpoints, dark mode และ batch export
อ่านเพิ่ม →#tools 35
รายการ Projects, Resources และ Notes ทั้งหมดที่มี tag นี้
Projects 12
CSS Animation Library
collection ของ CSS animation snippets แบบ copy-paste — entrance, exit, loading, micro-interaction พร้อม Astro demo page
อ่านเพิ่ม →Color Contrast Checker
CLI + Web tool ตรวจ WCAG color contrast ratio — รับ hex/rgb/hsl แสดง pass/fail AA/AAA และ suggest สี alternative
อ่านเพิ่ม →Schema Markup Generator
Web tool สร้าง JSON-LD structured data สำหรับ e-commerce — Product, BreadcrumbList, Organization schema พร้อม copy-paste
อ่านเพิ่ม →Markdown to PDF
CLI tool แปลง Markdown เป็น PDF ด้วย Playwright — รองรับ custom CSS, syntax highlight และ Thai font
อ่านเพิ่ม →URL Shortener CLI
CLI tool ย่อ URL ด้วย TinyURL API และจัดการ history — บันทึก, ค้นหา และ copy ไปยัง clipboard
อ่านเพิ่ม →Daily Summary Bot
LINE Notify bot สรุปงานประจำวัน — ดึง git commits, tasks จาก todo file และ send สรุปผ่าน LINE ทุกเย็น
อ่านเพิ่ม →Chrome Extension Starter
Template สำหรับสร้าง Chrome Extension Manifest V3 พร้อม Vite + TypeScript — มี popup, content script และ background service worker
อ่านเพิ่ม →Astro SEO Audit
CLI script ตรวจ SEO ของ Astro static site — ตรวจ meta tags, canonical URL, Open Graph, structured data และ performance hints
อ่านเพิ่ม →Zod Schema Studio
Web tool สำหรับเขียน Zod schema แบบ interactive — เห็น type output และ validation errors แบบ real-time ไม่ต้อง setup project
อ่านเพิ่ม →Product Catalog Validator
TypeScript CLI สำหรับ validate product catalog ก่อน import — ตรวจ required fields, format ราคา, รูปภาพ URL และ category hierarchy
อ่านเพิ่ม →Color Palette Explorer
เครื่องมือสำหรับสำรวจ color palette ที่ใช้ CSS custom properties อย่างเดียว ไม่มี JavaScript library ให้ copy hex code และดู contrast ratio แบบ real-time
อ่านเพิ่ม →Resources 20
Browser DevTools Tips — Debug เร็วขึ้น 10 เท่า
เทคนิค DevTools ที่ใช้บ่อยใน Chrome และ Firefox — Console shortcuts, Network tab, CSS live edit, Performance profiling, Accessibility panel และ JavaScript debugging
อ่านเพิ่ม →GitHub Actions สำหรับ Static Site — CI/CD อัตโนมัติ
ตั้งค่า GitHub Actions workflow สำหรับ static site ให้รัน build check อัตโนมัติทุก push และ deploy ไปยัง Railway หรือ GitHub Pages เมื่อ merge เข้า main
อ่านเพิ่ม →npm Scripts — Task Automation โดยไม่ต้องใช้ Gulp หรือ Makefile
ใช้ npm scripts ใน package.json เป็น task runner สำหรับ build, dev, lint, format, test และ deploy — ไม่ต้องติดตั้ง tool เพิ่ม เพราะ npm มีให้ทุก project อยู่แล้ว
อ่านเพิ่ม →VS Code Setup สำหรับ Astro + TypeScript
การตั้งค่า VS Code ที่ทำให้การเขียน Astro + TypeScript smooth ที่สุด — extensions, settings.json, snippets, และ debug config
อ่านเพิ่ม →HTMX — HTML Attributes แทน JavaScript สำหรับ Dynamic UI
คู่มือ HTMX — ทำ AJAX, WebSocket และ SSE ด้วย HTML attributes โดยไม่เขียน JavaScript
อ่านเพิ่ม →Linux Terminal Tips สำหรับ Web Developer
รวม command และ pattern ที่ใช้บ่อยใน terminal — file management, git shortcuts, process, และ productivity tips สำหรับ dev workflow
อ่านเพิ่ม →Turborepo — Monorepo Build System ที่เร็วด้วย Cache
คู่มือ Turborepo สำหรับจัดการ monorepo — task pipeline, remote caching และการตั้งค่า workspace กับ pnpm
อ่านเพิ่ม →OpenAI API — Text Generation, Vision และ Embeddings
คู่มือใช้ OpenAI API กับ Node.js/TypeScript — chat completions, streaming, vision และ embeddings
อ่านเพิ่ม →Astro SSR — output server/hybrid mode
คู่มือ Astro SSR mode — เปิด server rendering, adapters (Node.js, Cloudflare, Vercel), และ hybrid (บาง page static บาง page server)
อ่านเพิ่ม →Bun Runtime — JavaScript runtime ที่เร็วกว่า Node
คู่มือ Bun — runtime ที่รวม bundler, test runner และ package manager ไว้ด้วยกัน ใช้แทน Node + npm ได้เลย
อ่านเพิ่ม →Excalidraw — วาด diagram แบบ hand-drawn สำหรับ developer
Excalidraw คือ whiteboard tool แบบ open-source ที่วาด diagram ออกมาดูเหมือนวาดมือ เหมาะสำหรับ brainstorm, system design และอธิบาย architecture
อ่านเพิ่ม →Conventional Commits — เขียน Git Message อย่างเป็นระบบ
มาตรฐาน Conventional Commits ที่ทำให้ git log อ่านง่าย ทำ changelog อัตโนมัติได้ และเชื่อมกับ semantic versioning
อ่านเพิ่ม →Drizzle ORM — Type-safe SQL ที่ไม่ซ่อน SQL จากคุณ
คู่มือ Drizzle ORM สำหรับ TypeScript — schema definition, query builder, migration และใช้กับ SQLite, PostgreSQL
อ่านเพิ่ม →Turso & LibSQL — SQLite บน Edge
คู่มือใช้ Turso (LibSQL) สำหรับ edge database — เชื่อมต่อจาก Node.js, Cloudflare Workers และ Astro
อ่านเพิ่ม →Tailwind CSS v4 — สิ่งที่เปลี่ยนไปและสิ่งที่ต้องรู้
สรุป Tailwind CSS v4 — CSS-first config, เลิก tailwind.config.js, @theme directive และ performance ที่ดีขึ้น
อ่านเพิ่ม →สร้าง RSS Feed กับ Astro — @astrojs/rss
วิธีตั้งค่า RSS feed สำหรับ Astro static site ด้วย @astrojs/rss รองรับ Content Collections และ custom channel metadata
อ่านเพิ่ม →SQLite สำหรับ Web Developer — ใช้ได้ทั้ง local และ edge
คู่มือใช้ SQLite ใน Node.js, Cloudflare Workers (D1) และ LibSQL — database ที่ไม่ต้องการ server
อ่านเพิ่ม →Accessibility Testing Tools — ตรวจ a11y อย่างมีระบบ
รวม tools สำหรับ test web accessibility ตั้งแต่ automated scan ถึง manual testing ด้วย screen reader
อ่านเพิ่ม →pnpm — Package Manager ที่เร็วและประหยัด Disk
คู่มือใช้ pnpm แทน npm/yarn — content-addressable store, strict isolation และ workspace สำหรับ monorepo
อ่านเพิ่ม →Git Worktree — ทำงานหลาย Branch พร้อมกันโดยไม่ต้อง stash
git worktree ให้ checkout หลาย branch ออกมาเป็น folder แยกกันได้พร้อมกัน แก้ปัญหา "ต้องรีบ hotfix แต่ feature branch ยังไม่เสร็จ" อย่างถาวร
อ่านเพิ่ม →