Bookmarks

เอกสาร HTML, CSS, JavaScript ที่ครบที่สุดและน่าเชื่อถือที่สุด — อ้างอิงก่อนเสมอ

แนวทาง performance, accessibility และ best practices จาก Google Chrome team

บทความ CSS และ React ที่อธิบายได้ลึก visual มาก เข้าใจ concept จริงไม่ใช่แค่ syntax

CSS layout patterns ที่ใช้ intrinsic design ไม่พึ่ง breakpoint เปลี่ยนวิธีคิดเรื่อง CSS ไปเลย

archive บทความ CSS ที่ดีมาก ตั้งแต่พื้นฐานถึง advanced โดยเฉพาะ flexbox/grid guides

บทความ UX, design patterns และ frontend technique เชิงลึก

เอกสาร Astro — เขียนได้ดีมาก ตัวอย่างชัดเจน เป็น reference ที่ใช้บ่อยที่สุด

อ่านทั้งเล่มสักครั้ง ทำให้เข้าใจ type system ลึกกว่าแค่ใช้ตามตัวอย่าง

เอกสาร GSAP พร้อม interactive demos — หา ScrollTrigger options ได้ทุกอย่างที่นี่

schema validation library ที่ใช้กับ TypeScript — เอกสารสั้น อ่านรวดเดียวจบได้

test runner สำหรับ Vite ecosystem — เอกสารครบ setup ถึง advanced mocking

color picker สำหรับ oklch() space พร้อม gamut visualization และ converter

visualize type scale ratios — เลือก ratio แล้วดู preview ทุก step พร้อม CSS

color palette ที่คำนวณมาแล้วสำหรับ UI — accessible contrast ทุก step ทั้ง light/dark

เลือก font พร้อม preview typography pairing — filter ตาม language support ได้

วาด diagram แบบ whiteboard sketch — ใช้วางแผน layout และ system diagram

ตรวจ browser support ของ CSS/JS feature ก่อนใช้งาน — ดู baseline ตาม usage threshold

ดู package size ก่อน npm install — มี tree-shakeable flag และ alternatives

compress รูปภาพใน browser — เปรียบ WebP/AVIF/JPEG แบบ side-by-side ก่อน export

static site search ที่ index ตอน build — ไม่ต้องการ backend หรือ Algolia

simplified man pages ที่อ่านง่าย — ตัวอย่าง command จริงที่ใช้บ่อย ไม่ใช่ option ทุกตัว

ทดสอบ regex พร้อม explanation แต่ละส่วน รองรับ JavaScript, Python, PHP

note-taking แบบ local-first Markdown ไม่มี vendor lock-in — ใช้เป็น second brain หลัก

cheatsheets สำหรับ developer — bash, vim, git, markdown สรุปกระชับ

Maciej Cegłowski อธิบายว่าทำไมเว็บถึงหนักขึ้นเรื่อยๆ ทั้งที่ content ไม่ได้มากขึ้น — ยังทันสมัยอยู่

อธิบาย TCP slow start และทำไม first request ที่เล็กกว่า 14kB ถึงได้เปรียบ network-wise

Derek Sivers อธิบายทำไมถึงเก็บทุกอย่างเป็น plain text — เรื่อง longevity และ control ของข้อมูล

ยังเป็น reference ที่ดีที่สุดสำหรับ Flexbox — visual เข้าใจง่าย bookmark ไว้เปิดดูเสมอ

จัดการ Claude API keys, ดู usage และทดสอบ prompts ใน Workbench ก่อน deploy

เอกสาร Claude API ครบ — Messages API, tool use, streaming, prompt caching, model comparison

Claude web interface — ใช้ทดสอบ prompts และ workflows ก่อน integrate กับ API

ตัวอย่าง prompts จาก Anthropic แยกตาม use case — ดูเป็น reference สำหรับ system prompt design

workflow automation แบบ visual + code สำหรับ self-host — เชื่อม AI กับ tools อื่น ไม่ต้องเขียน backend

visualize การทำงานภายใน LLM แบบ interactive — เข้าใจว่า token คืออะไรและ transformer ทำงานยังไง

เอกสาร Google Shopping feed — ตรวจ product data quality, disapprovals และ feed optimization

ข้อมูล structured data สำหรับ product pages — ใช้เป็น reference ขณะเพิ่ม JSON-LD

ตรวจ Core Web Vitals จาก field data จริง (CrUX) — ดูผลกระทบต่อ search ranking

monitor การ index, rich results, coverage issues — สำคัญมากสำหรับ e-commerce SEO

ทดสอบ structured data ว่า Google เข้าใจถูกต้องและจะแสดง rich result ได้ไหม

test website performance จากหลาย location จริง — waterfall chart ดู bottleneck ได้ชัดกว่า Lighthouse

browser extension สำหรับ audit accessibility — แม่นยำ ไม่มี false positive ใช้ใน dev workflow

ตรวจ a11y บน live URL — highlight errors บนหน้าจริงด้วย visual overlay

track Lighthouse scores ของหลายหน้าพร้อมกันตลอดเวลา — เห็น performance trend

เปรียบดาวน์โหลด npm packages รายสัปดาห์ — ช่วยเลือก library ที่ active มีคนใช้จริง