ความสิ้นเปลืองที่เป่าลมหายใจเข้าไป

ผมไม่ชอบดีไซน์แบบ Liquid Glass เลยยังไม่ได้อัปเดตเป็น iOS 26 หรือ macOS 26 พูดให้ตรงกว่านั้นคือผมคิดว่ามันเจ๋งจริงๆ นะ แต่การที่เครื่องมือถือของผมต้องเรนเดอร์ด้วย GPU ตลอดเวลาเพียงเพื่อความสวยงามล้วนๆ มันไม่โอเคสำหรับผม (อย่างน้อยก็ตอนนี้) แต่ฟุ่มเฟือยเล็กๆ สักหน่อยก็คงไม่เป็นไรใช่ไหม? คอมโพเนนต์เล็กๆ ที่มีประสิทธิภาพและอิงกับ CSS เป็นหลัก นั่นแหละคือสิ่งที่ผมต้องการพอดี

ทำไม?

ที่นี่คือบล็อกที่รองรับภาษาเกาหลี จีน และอังกฤษ ในเมื่อผมเป็นคนเกาหลี ผมก็เขียนบทความเป็นภาษาเกาหลีอย่างรวดเร็ว แล้วยกงานแปลอังกฤษกับจีนให้ Claude ทำ มันลื่นไหลเป็นธรรมชาติมาก 😅

ผลลัพธ์

วิธีการพัฒนา

ผมทำ CSS ไม่เก่งเลยจริงๆ พูดตรงๆ C++ หรือ Rust น่าจะง่ายกว่าหรือเปล่า? (ถึงจุดประสงค์จะต่างกันก็เถอะ) แต่ยุคนี้คือยุคของ AI และโอเพนซอร์ส ผมเลยปรึกษากับ Claude เพื่อสร้างดีไซน์ที่ต้องการ
ผมไล่ดูรีโพซิทอรีเปิดหลายๆ อัน รวบรวมตัวอย่างดีไซน์และวิธีการพัฒนาที่ถูกใจ แล้วเอาไปปรึกษากับ AI ผมพยายามอย่างเต็มที่ที่จะบาลานซ์ระหว่างประสิทธิภาพ ความสวยงาม และความเรียบง่าย สรุปสั้นๆ คือใช้ CSS ให้คุ้มที่สุด

ข้อจำกัด

ช่วยไม่ได้จริงๆ Safari และมือถือของ Apple ไม่รองรับการตั้งค่า CSS ที่ใส่ url ลงใน backdrop-filter: เพื่อทำ SVG filter AI บอกว่านี่เป็นไอเดียที่ Apple เสนอเอง แต่ Chrome เป็นฝ่ายทำออกมาก่อน ถึงอย่างนั้นการทำ frosted glass มาแทนก็ถูกใจผมอยู่ 🙂

GitHub

บล็อกของผมเป็นโอเพนซอร์สทั้งหมด! ถ้าสนใจก็ลองดูไฟล์ FloatingLanguagePicker.astro พูดตามตรง เกินครึ่งเป็นสูตรคำนวณค่าการหักเหของแสงเลยยากอยู่ ฮ่าๆ

ซอร์สโค้ด ดูได้ที่นี่