#design 20

Astro Blog Theme

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

Type Scale Explorer

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

Font Pairing Tool

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

Link-in-Bio Page

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

Color Palette Explorer

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

Markdown CV

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

CSS Playground

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

CSS Art Wallpaper Generator

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

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

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

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

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

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

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

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

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

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

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

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