Panupong WS
เว็บส่วนตัวสำหรับรวบรวม projects, resources และ notes ด้าน tech, dev และ graphic design สร้างด้วย Astro และ TypeScript แบบ static site
อ่านเพิ่ม →#web 32
รายการ Projects, Resources และ Notes ทั้งหมดที่มี tag นี้
Projects 9
Astro Minimal Starter
Starter template สำหรับ Astro ที่ stripped-down จนเหลือแค่สิ่งจำเป็น — dark mode, TypeScript strict, font loading, global CSS reset พร้อมใช้งานได้เลย
อ่านเพิ่ม →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 มาก
อ่านเพิ่ม →Multi-Agent Tmux Workflow
ระบบ orchestration ใช้ tmux แบ่ง session หลายหน้าต่าง ให้ AI หลายตัวทำงานพร้อมกันบน codebase เดียวโดยไม่ชนกัน
อ่านเพิ่ม →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 ที่เปลี่ยนแปลงได้
อ่านเพิ่ม →Resources 21
Astro Islands Architecture — JavaScript เฉพาะที่จำเป็น
เข้าใจ Islands Architecture ของ Astro ว่าทำงานอย่างไร ทำไมถึงส่ง zero JS by default และเมื่อไรควรใช้ client directives เพื่อ hydrate component
อ่านเพิ่ม →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 ในทุกที่ที่วาง
อ่านเพิ่ม →GitHub Actions สำหรับ Static Site — CI/CD อัตโนมัติ
ตั้งค่า GitHub Actions workflow สำหรับ static site ให้รัน build check อัตโนมัติทุก push และ deploy ไปยัง Railway หรือ GitHub Pages เมื่อ merge เข้า main
อ่านเพิ่ม →HTML Semantic Elements — เขียน HTML ให้มีความหมาย
รวม HTML5 semantic elements ที่ควรรู้ทั้งหมด ว่าควรใช้ element ไหนในสถานการณ์ใด ทำไมถึงสำคัญต่อ accessibility และ SEO และความสัมพันธ์กับ ARIA
อ่านเพิ่ม →HTTP Caching — Cache-Control, ETag, Stale-While-Revalidate
ทำความเข้าใจ HTTP caching headers ที่ถูกต้อง ลด server load และเร็วขึ้นสำหรับผู้ใช้กลับมา
อ่านเพิ่ม →JavaScript Array Methods ที่ใช้บ่อยใน Frontend
รวม array methods สำคัญใน JavaScript/TypeScript ที่ใช้จริงในการ transform, filter, และ reduce data ก่อน render ใน Astro/React
อ่านเพิ่ม →Progressive Web App (PWA) — Manifest, Service Worker, Offline
สร้าง PWA ตั้งแต่ web app manifest ถึง service worker caching strategy และ install prompt
อ่านเพิ่ม →Web Fonts Optimization — โหลด Font เร็วโดยไม่กระทบ UX
วิธี optimize font loading ให้ไม่เกิด FOUT/FOIT, ใช้ font-display อย่างถูกต้อง, preconnect, self-host fonts, variable fonts และ system font stack
อ่านเพิ่ม →HTTP Security Headers — ป้องกันเว็บด้วย Headers
รายการ HTTP security headers ที่ควรตั้งค่าสำหรับเว็บใดก็ตาม ครอบคลุม CSP, HSTS, X-Frame-Options, Permissions-Policy และวิธีตั้งค่าใน Astro + Railway
อ่านเพิ่ม →SEO Meta Tags — คู่มือครบสำหรับ Static Site
รวม meta tags ที่จำเป็น ตั้งแต่ title, description, Open Graph, Twitter Card ไปจนถึง JSON-LD structured data สำหรับ static site
อ่านเพิ่ม →Responsive Design Patterns — CSS ที่ใช้จริงบน Static Site
Pattern สำหรับ responsive layout บน CSS ล้วนๆ ที่ใช้ได้จริง ครอบคลุม fluid typography, container queries, intrinsic grid และ mobile-first approach
อ่านเพิ่ม →Web Accessibility Checklist — สิ่งที่ต้องทำก่อน Deploy
รายการตรวจสอบ accessibility สำหรับ static site ครอบคลุม keyboard navigation, ARIA, color contrast และ screen reader
อ่านเพิ่ม →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 ที่ถูกต้อง
อ่านเพิ่ม →Content Security Policy (CSP) — ป้องกัน XSS ด้วย HTTP Header
คู่มือตั้งค่า CSP header เพื่อป้องกัน Cross-Site Scripting (XSS) และ injection attacks บน static site
อ่านเพิ่ม →Accessibility Testing Tools — ตรวจ a11y อย่างมีระบบ
รวม tools สำหรับ test web accessibility ตั้งแต่ automated scan ถึง manual testing ด้วย screen reader
อ่านเพิ่ม →Astro Image Optimization — ใช้ astro:assets ให้ถูกต้อง
คู่มือใช้ <Image /> component และ getImage() ใน Astro สำหรับ WebP, lazy loading และ responsive images ที่ optimize แล้ว
อ่านเพิ่ม →Core Web Vitals — ทำ Static Site ให้ได้คะแนนสูง
แนวทางปรับ LCP, CLS, INP สำหรับ static site บน Astro ที่ทำได้จริงโดยไม่ต้องจ้างผู้เชี่ยวชาญ
อ่านเพิ่ม →CSS Grid — Cheatsheet ฉบับใช้งานจริง
รวม CSS Grid properties ที่ใช้บ่อย พร้อม pattern สำเร็จรูปสำหรับ layout ยอดนิยม เปิดดูได้เลยโดยไม่ต้องค้น MDN ทุกครั้ง
อ่านเพิ่ม →Books 2
Don't Make Me Think
อ่านแล้ว
Web Performance in Action
Backlog