โปรเจกต์ CSS Zen Garden

 (csszengarden.com)
2 คะแนน โดย GN⁺ 2025-04-28 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • CSS Zen Garden เป็นโปรเจกต์สาธิตที่แสดงให้เห็นว่าแม้จะเป็นเอกสาร HTML เดียวกัน ก็สามารถมอบประสบการณ์ด้านภาพที่แตกต่างกันโดยสิ้นเชิงได้ด้วย การออกแบบที่อิง CSS เพียงอย่างเดียว
  • เมื่อเลือกสไตล์ชีตจากรายการดีไซน์ ระบบจะเปลี่ยนเฉพาะ CSS ภายนอกโดย คง HTML เดิมไว้ ทำให้การเรนเดอร์หน้าตาเพจเปลี่ยนไป
  • ผู้เข้าร่วมสามารถดาวน์โหลดตัวอย่าง HTML/CSS ไปทำงานบนเครื่องของตนเองได้ แต่ตอนส่งผลงานจะสามารถ แก้ไขได้เฉพาะสไตล์ชีตเท่านั้น
  • ไฟล์ CSS ที่เสร็จสมบูรณ์และแอสเซ็ตที่เกี่ยวข้องจะต้องอัปโหลดขึ้นเว็บเซิร์ฟเวอร์ของตนเองแล้วส่งเป็นลิงก์ และผลงานที่ได้รับเลือกจะถูกนำไปติดตั้งบนเซิร์ฟเวอร์ของ CSS Zen Garden
  • ให้ความสำคัญกับ CSS ที่ใช้งานได้จริงมากกว่าฟีเจอร์ทดลอง และกำหนดให้ CSS ต้องผ่านการตรวจสอบความถูกต้อง รวมถึงทำงานได้บน IE9+ และเบราว์เซอร์ Chrome·Firefox·iOS·Android เวอร์ชันล่าสุด

การทดลอง CSS ที่ทำให้ HTML เดิมดูแตกต่างกันได้อย่างสิ้นเชิง

  • CSS Zen Garden เป็นเดโมที่สร้างขึ้นเพื่อแสดง พลังในการแสดงผลของ CSS
  • ผู้ใช้สามารถเลือกรายการที่ต้องการจากลิสต์ดีไซน์ แล้วนำ สไตล์ชีต นั้นมาใช้กับหน้าปัจจุบันได้
  • ข้อจำกัดสำคัญคือห้ามแก้ไข HTML และเปลี่ยนได้เฉพาะไฟล์ CSS ภายนอกเท่านั้น
    • โครงสร้างเอกสารเดิมจะยังคงอยู่ แต่ผลลัพธ์ด้านภาพจะเปลี่ยนไป
    • แสดงให้เห็นว่าการออกแบบและการเขียนโค้ดสามารถขยายขอบเขตความเป็นไปได้ด้านภาพของเว็บได้ไกลเพียงใด
  • มองได้ว่าเป็นโปรเจกต์เพื่อการเรียนรู้ที่กระตุ้นให้เกิดการมีส่วนร่วมและแรงบันดาลใจ พร้อมแบ่งปันผลลัพธ์ที่สามารถทำได้จริงด้วย CSS

วิธีเข้าร่วมและขั้นตอนการส่งผลงาน

  • ผู้เข้าร่วมจะนำหน้านี้มาออกแบบใหม่โดยอาศัยงานภาพที่โดดเด่นและ ทักษะด้าน CSS
    • ไฟล์ตัวอย่างมีคอมเมนต์กำกับไว้ จึงใช้เป็นจุดเริ่มต้นได้แม้สำหรับผู้เริ่มต้น CSS
    • มีบทแนะนำขั้นสูงและเคล็ดลับให้ที่ CSS Resource Guide
  • สามารถดาวน์โหลดไฟล์ตัวอย่าง HTML และ CSS ไปทำงานบนสำเนาในเครื่องได้
  • หากต้องการส่งผลงาน ต้องอัปโหลดไฟล์ CSS ที่เสร็จแล้วและแอสเซ็ตที่เกี่ยวข้องขึ้นเว็บเซิร์ฟเวอร์ที่ตนควบคุม แล้วส่งผ่าน ลิงก์ส่งผลงาน
    • ไม่แนะนำให้ส่งงานที่ยังไม่เสร็จสมบูรณ์
    • ผลงานที่ได้รับเลือกจะถูกทีม CSS Zen Garden ดาวน์โหลดและนำไปติดตั้งบนเซิร์ฟเวอร์
  • สิ่งตอบแทนจากการเข้าร่วมคือการได้รับการยอมรับ แรงบันดาลใจ และการมีส่วนร่วมใน แหล่งข้อมูลที่แบ่งปันร่วมกัน ซึ่งแสดงศักยภาพของ CSS

ข้อกำหนดด้าน CSS และไลเซนส์

  • ข้อกำหนดมุ่งเน้นไปที่ CSS ที่ใช้งานได้จริงและเป็นประโยชน์ มากกว่าฟีเจอร์ใหม่เชิงทดลอง
    • หากเป็นไปได้ แนะนำให้ใช้ CSS 1 & 2
    • CSS 3 & 4 ควรถูกจำกัดไว้กับส่วนที่รองรับอย่างกว้างขวาง หรือไม่เช่นนั้นต้องมีทางเลือกทดแทนที่ชัดเจน
    • CSS ต้องผ่านการตรวจสอบความถูกต้อง
    • เมื่อคำนึงถึง user agent รุ่นใหม่และสภาพแวดล้อมมือถือ การทำให้ทุกแพลตฟอร์มมีเลย์เอาต์เหมือนกันทุกพิกเซลอาจเป็นเรื่องยาก
    • ดีไซน์ต้องทำงานได้อย่างน้อยบน IE9+, Chrome, Firefox, iOS, Android เวอร์ชันล่าสุด
  • ผลงานที่ส่งต้องเป็น งานภาพต้นฉบับ และต้องเคารพกฎหมายลิขสิทธิ์
    • ควรลดการใช้เนื้อหาที่อาจสร้างความไม่สบายใจให้น้อยที่สุด
    • ดีไซน์แนวสวนมีอยู่มากพอแล้ว จึงแนะนำให้ใช้ธีมภาพที่มีเอกลักษณ์และน่าสนใจ
  • ลิขสิทธิ์ของงานกราฟิกยังคงเป็นของผู้ส่งผลงาน แต่ CSS ต้องเผยแพร่ภายใต้ไลเซนส์ Creative Commons BY-NC-SA 3.0 เช่นเดียวกับเว็บไซต์ เพื่อให้ผู้อื่นนำไปใช้เพื่อการเรียนรู้ได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-04-28
ความคิดเห็นจาก Hacker News

  • มีบริบทบางอย่างที่มองไม่ค่อยเห็น ถ้าไม่ใช่คนที่เคยทำเว็บดีเวลลอปเมนต์ในช่วงที่สิ่งนี้ถูกสร้างขึ้น
    ก่อน CSS เราเคยใช้ element table แบบผิดวัตถุประสงค์เหมือนเป็นกริดเพื่อจัดเลย์เอาต์ และหั่นรูปภาพเป็นชิ้น ๆ ใส่ลงในแต่ละช่อง ตอนนี้คนยังพอจำเรื่องนั้นได้ แต่ดูเหมือนว่า กระแสต่อต้าน CSS ในตอนนั้นจะค่อนข้างถูกลืมไปแล้ว
    มีเว็บดีเวลลอปเปอร์จำนวนมากที่พอใจกับสถานะเดิมและไม่อยากเรียน CSS และมีความเชื่อผิด ๆ ที่ติดทนว่า “CSS ทำได้แค่ดีไซน์น่าเบื่อ ๆ เป็นสี่เหลี่ยม” Dave Shea รวบรวมดีไซน์สวย ๆ มาโชว์ใน CSS Zen Garden จนข้ออ้างนั้นแทบจะจบลง และชนะขาดจนตอนนี้น่าสนุกดีที่แม้แต่ความจริงว่าเคยมีข้อถกเถียงแบบนั้นก็ยังถูกลืมไปแล้ว

    • CSS ยุคแรก ๆ มีความสามารถน้อยกว่าตอนนี้มาก border-radius ก็เพิ่งเข้ามาราวปี 2011 และแม้แต่เว็บที่ค่อนข้างเรียบง่ายอย่าง https://90s.dev/ ก็ยังต้องใช้ CSS สมัยใหม่ประมาณ 420 บรรทัดตาม https://90s.dev/style.css
      ทั้งที่ใช้ nesting และ :has ซึ่งเปลี่ยนเกมไปมากอยู่พอสมควรแล้วก็ตาม จำได้ว่าด้วยข้อจำกัดพื้นฐานของ CSS ในตอนนั้น ถ้าจะทำรูปทรงที่สร้างได้ไม่เป็นธรรมชาติ ก็ต้องแก้ทั้ง CSS และโครงสร้าง HTML
    • เหตุผลที่ใช้ table ในยุคแรก ๆ ก็เพราะการจัดให้ตรงด้วย CSS ข้ามหลายเบราว์เซอร์เป็น ฝันร้าย มันเป็นฝันร้ายที่แพงมาก และจะไหวก็ต่อเมื่อเป็นสตาร์ทอัพที่มีเงินเหลือพอจะรื้อ HTML บ่อย ๆ เท่านั้น
    • จำช่วงเวลาที่แน่ชัดไม่ค่อยได้ แต่เคยมีช่วงหนึ่งที่ CSS ซึ่งเพิ่งเริ่มโผล่มายังไม่พอสำหรับการทำเลย์เอาต์ที่ซับซ้อนขึ้น ไม่มี flexbox และไม่ต้องพูดถึง grid
      ผมมองว่า CSS Zen Garden มีอยู่เพื่อแสดงให้เห็นว่า ณ เวลานั้น CSS ทำได้ถึงแค่ไหน
    • ผมไม่เคยเข้าใจเลยว่าการใช้ element table ทำเป็นกริดมันผิดตรงไหนมากมายจริง ๆ นอกจากเรื่อง “semantic HTML” ที่มีความหมายแค่กับบางแอปพลิเคชันแล้ว ก็ไม่ค่อยเห็นอะไรเป็นพิเศษ
    • จำกระแสต่อต้าน CSS ไม่ได้ แต่จำได้ว่าเว็บจำนวนมากใช้ CSS นิดหน่อยสำหรับจัดสไตล์ฟอนต์ แต่ยังใช้ table สำหรับเลย์เอาต์ นั่นไม่ใช่การต่อต้าน แต่เป็น ความเป็นจริงเชิงใช้งาน
      ถ้าต้องการกริดที่เสถียรและคาดเดาได้ ก็ใช้ table layout โดยเฉพาะกับเลย์เอาต์ที่แน่นและซับซ้อนยิ่งเป็นแบบนั้น บ่อยครั้งแม้แต่ส่วน navigation ก็เป็น table layout และเป้าหมายในตอนนั้นคือ pixel perfect
      จำ spacer element ราวปี 2000 ได้ไหม? สุดท้ายมันก็ไม่ติดตลาด และ pixel GIF ก็พบได้บ่อยกว่าและคาดเดาได้มากกว่า
      ก่อนที่ flexbox จะเริ่มแพร่หลายในปี 2014 เลย์เอาต์ด้วย CSS float เหมือนการหมุนจานหลายใบ div ว่างกับ div ที่มีคอนเทนต์ทำงานต่างกันจนปวดหัว และถึงเวลานั้นจะเอาคืนมาไม่ได้ แต่อย่างน้อยก็ได้เงิน
      ความคิดที่ว่า CSS ยุคแรกให้เลย์เอาต์ “Zen Garden” เจ๋ง ๆ ได้ง่าย ๆ ไม่ตรงกับประสบการณ์ของผมเลย แต่ผมทำเว็บสื่อข้อมูล ไม่ใช่เว็บศิลปะสนุก ๆ

  • เว็บนี้เก่าแล้ว และเป็นความเก่าในความหมายที่ดี
    ในยุค 2000 มันเป็น culture shock สำหรับผม และทำให้ผมหลุดจาก Microsoft ASP.NET ไปสร้างแอปบน Linux ผมตระหนักว่า “server controls” ที่มีพารามิเตอร์ inline style เป็นแนวทางที่ผิดโดยสิ้นเชิง หรือจะเรียกว่าเป็นแนวทาง “ต่อต้านอินเทอร์เน็ต” ก็ได้
    Alex Russell ผู้สร้าง Dojo JS เคยแสดงมุมมองแบบนั้นในคอนเฟอเรนซ์หนึ่ง และผมช็อกเมื่อเห็นว่าระหว่างที่รับข่าวเทคโนโลยีผ่านช่องทางของ Microsoft นั้น ผมพลาดข้อมูลไปมากแค่ไหน
    หลายปีเครื่องมือของผมมีแค่ Web.py, HTML, JS, CSS ประมาณนั้น จากนั้น jQuery, Backbone, Underscore ก็เข้ามาแล้วผ่านไป ก่อนที่ React กับ TypeScript จะทำให้ “full stack” แบบใหม่กลับมาดูอุ้ยอ้ายอีกครั้ง

    • ผมไม่รู้ว่าอะไรที่ทำให้สร้างแอปแบบนั้นใน ASP.NET ไม่ได้ ASP.NET ไม่ได้ห้ามสิ่งนั้น และก็สร้าง stylesheet กับแยกไฟล์ JS ได้
      ที่ประชดคือของเก่ากลับมาเป็นของใหม่อีกครั้ง ฝั่ง Next.js กำลังสร้าง view state ขึ้นมาใหม่ Tailwind ก็เป็น inline styling ส่วน shadcn ใช้ React components เรียกว่าเกือบวนกลับมาครบรอบ
    • ตอนนี้มี Svelte แล้ว และพอจะมองได้ว่าเป็น full stack ที่ “ฉลาด” อยู่บ้าง
    • สิ่งนั้นยังอยู่บนออนไลน์อยู่ มันค่อนข้างเป็นของโบราณ แต่ดูได้ที่ https://www.ajaxtoolkit.net/ ซอฟต์แวร์องค์กรที่ไม่มี drag panel นี่ไม่มีหรอก
      ช่วงหนึ่ง semantic markup กับ CSS นำหน้า แต่ทุกวันนี้ผมหมดความสนใจแม้แต่จะไปดูว่าเทรนด์เป็นอย่างไรแล้ว ผมเลิกสนใจแถว ๆ “HTML ใน JavaScript” (JSX)
    • ผมเริ่มจาก ASP กับ PHP แต่ ASP.NET มีลักษณะช่วยให้นักพัฒนา Visual Studio สร้างเว็บแอปหยาบ ๆ มากกว่า และไม่เหมาะกับเว็บในความหมายกว้าง
      ไม่จำเป็นต้องย้ายไป Linux ด้วยซ้ำ ฝ่าย IT ไม่อนุญาตให้ใช้เดสก์ท็อป Linux ผมเลยทำทั้งหมดบน Windows แล้ว deploy ไปทั้งเซิร์ฟเวอร์ Windows และ Linux

  • ผมรู้สึกว่าแก่นของ CSS Zen Garden คือ ถ้าใช้ semantic HTML ให้เต็มที่ ก็สามารถแยก presentation กับ content ออกจากกันและจัดการได้อย่างเป็นอิสระโดยสมบูรณ์
    ตอนนี้ก็ยังทำได้ถึงระดับ Zen Garden แต่จริง ๆ แล้วเป็นการเคลื่อนไหวอยู่ภายในข้อจำกัดของ CSS มันใกล้เคียงกับ “CSS ทำสิ่งนี้ได้ เราจึงทำดีไซน์แบบนี้” มากกว่า “เราอยากได้ดีไซน์แบบนี้ จึงใช้ CSS แบบนี้”
    ยังมีการเลือกสไตล์จำนวนมากที่ทำได้ก็ต่อเมื่อต้องแก้ DOM โดยตรง และมีหลายอย่างที่ pure CSS ทำไม่ได้ ผมเคยเห็นในการถกเถียงของ W3C ด้วยซ้ำในทำนองว่า “ก็แค่ห่อ div เพิ่มอีกอันก็ได้ แล้วทำไมต้องมี property CSS ใหม่”
    การแทรกหรือเปลี่ยนรูปภาพนั้นทำได้ง่าย แต่การเปลี่ยน SVG ที่จัดสไตล์ได้ทำไม่ได้ เพราะต้องใส่ node SVG ลงใน HTML โดยตรง สุดท้ายการตัดสินใจเรื่อง presentation กับโครงสร้าง content ก็ปะปนกันในระดับ HTML และ JavaScript และแม้แต่การเปลี่ยนดีไซน์ง่าย ๆ ก็ต้องแตะทั้ง stack

    • คำสัญญาของชุมชน CSS คือสามารถแยก structure กับ presentation ออกจากกันได้เสมอ
      หลังจากเขียน GUI มา 30 ปี ตอนนี้ผมมั่นใจแล้วว่าตำแหน่งที่ขีดเส้นแบ่งนั้นผิด สิ่งที่ควรแยกแทนคือ เจตนา โปรเจกต์ Composites ของผมทำหน้าที่นั้นอยู่ และผมตื่นเต้นมากที่จะได้เปิดตัวสัปดาห์หน้า
    • แล้ว XSLT ก็เข้าสู่ฉาก
    • ในทางกลับกัน CSS ทุกวันนี้ทรงพลังมาก จนดีไซน์จำนวนมากที่ไม่ใช่วิมานในอากาศ แต่คำนึงถึงคุณลักษณะของสื่อ สามารถทำให้เป็นจริงได้อย่างสะอาดด้วย CSS และ HTML เท่านั้น

  • จากมุมมองของคนที่เรียน CSS จากแหล่งข้อมูลอย่าง Zen Garden และ Eric Meyer เครื่องมือ CSS สมัยใหม่อย่าง Tailwind ดูเหมือนเป็น anti-pattern

    • เห็นด้วยอย่างยิ่ง Tailwind มีปัญหาเยอะจริง ๆ
      HTML ถูกข้อมูลสไตล์ปกคลุมไปหมด การอ่าน HTML ควรเป็นการดูเนื้อหาและความหมาย ไม่ใช่การถอดรหัสว่า pl-16 pr-8 bg-olive-500 text-gray-700 “น่าจะเป็นส่วนหัวของการ์ดสินะ”
      ทุกวันนี้อาจพูดได้ว่าผู้คนไม่อ่าน HTML กันแล้ว แต่ถ้านักพัฒนาที่ใช้เฟรมเวิร์กแบบนี้ทำให้ HTML กลายเป็นกองรกเละเทะ ใครจะอยากอ่านกันล่ะ เมื่อคลาสของเฟรมเวิร์กมีมากเกินไป HTML ก็มีสัญญาณรบกวนมากกว่าเนื้อหา แล้วการอ่าน HTML ก็หายไป จากนั้นนักพัฒนาก็ยิ่งสุมคลาสและสไตล์เพิ่มขึ้น กลายเป็น วงจรเสริมแรงตัวเอง
      นักพัฒนาเว็บยังทำสไตล์ซ้ำซ้อนหนักมาก แทนที่จะมีอะไรอย่าง .button กลับมีชุดอย่าง text-white rounded bg-gray-aaa กระจัดกระจายอยู่เป็นร้อย ๆ ที่ ไม่รู้ว่าเป็นปัญหาของ Tailwind หรือปัญหาของนักพัฒนา แต่ในโปรเจกต์ใหญ่ ๆ ถ้าจะเปลี่ยนสไตล์ขององค์ประกอบ UI ที่คล้ายกันทั้งหมด ก็กลายเป็นเกมตีตัวตุ่นว่าต้องไปหา inline style ตัวไหนขององค์ประกอบไหน
    • เครื่องมือ CSS แบบนั้นดูเหมือนจะดึงดูดคนที่เรียนพัฒนาเว็บมาแบบแก้ปัญหาเฉพาะหน้า ตอนแรกอยากสร้างดีไซน์ในหัว เลยเริ่มจาก “เฮดเดอร์ ข้อความ รูปภาพ” แล้วเรียนไปแบบ “จะจัดกึ่งกลางยังไง?”, “จะเปลี่ยนสียังไง?”, “ระยะห่างระหว่างองค์ประกอบล่ะ?”
      จากนั้นกล่องเครื่องมือไอเดีย CSS ก็เกิดขึ้นอย่างรวดเร็ว แต่กลับพลาดรายละเอียดที่ทำให้ CSS ทำงานได้ดี ผมรู้วิธีอ้อมปัญหาแปลก ๆ ด้วย position: absolute และ transform แต่ไม่รู้รายละเอียดปลีกย่อยของ block formatting context หรือ box model
      ถ้าความรู้ CSS มีแต่แผ่นแปะที่ติดทับบนความรู้ CSS แบบหลวม ๆ ก็เท่ากับเผาเชื้อเพลิงทิ้งเท่านั้น ในตอนนั้น วิธีที่เอากล่องเครื่องมือสไตล์ที่ประกอบกันได้มาใช้เพื่อหลบกับดัก CSS จำนวนมากจึงอาจดูน่าดึงดูด
      สิ่งที่เปลี่ยนความคิดของผมคือซีรีส์หนังสือออนไลน์สั้น ๆ ที่สอน HTML/CSS ตั้งแต่พื้นฐาน อธิบายทุกอย่างจากหลักการแรกเริ่มและบอกว่าทำไมมันถึงเป็นแบบนั้น ไม่ใช่แค่โยน “10 วิธีจัด div ให้อยู่กึ่งกลาง” มาให้แล้วจบ ผมอ่านจบในช่วงบ่ายวันหนึ่ง แล้วมุมมองต่อการพัฒนาเว็บก็เปลี่ยนไป แต่จำชื่อหนังสือไม่ได้เลย ประโยคที่จำได้เป็นพิเศษคือ “display: block เหมือนเอกสาร Word ส่วน display: flex ใกล้เคียงกับวิธีที่ผู้คนคาดหวังมากกว่า”
    • โค้ด Tailwind น่าเกลียดจริง ๆ ผมไม่ชอบ ตอนมันออกมา ผมกำลังทำงานกับไซต์ใหญ่ ๆ อยู่ และแนวคิดที่ให้ใส่คุณสมบัติสไตล์เป็นร้อย ๆ ในทุก ๆ หน้าหลายพันหน้า แทนที่จะเป็นไม่กี่บรรทัดในไฟล์ CSS กับชื่อคลาสเดียว ดูเหมือนเป็นการถอยหลังครั้งใหญ่ที่ย้อนข้อดีของ CSS ไปครึ่งหนึ่ง
    • ผมคิดว่ามันทำงานได้ดีในฐานะมาตรฐานของบริษัทระดับหลายร้อยคน ถ้าอยากสไตลิงทุกอย่างแบบใช้ครั้งเดียวบน landing page ก็ทำแบบนั้นได้

  • เหมือนแสงสว่างเล็ก ๆ ในยุคมืดของ Tailwind และ CSS-in-JS
    ทุกวันนี้คงยากที่จะรู้สึกได้ว่า CSS Zen Garden สำคัญแค่ไหนเมื่อราว 20 ปีก่อน

    • CSS-in-JS เป็นโซลูชันเพื่อ การจัดโครงสร้างโค้ด เป็นหลัก แบบ Styled Components หรือ Emotion มันไม่ได้เปลี่ยนวิธีการทำงานของ CSS โดยพื้นฐาน
    • แน่นอนว่ามันทำให้ผมรัก CSS แต่ก็ไม่ได้ทำให้ผมไม่เข้าใจว่าทำไม Tailwind ถึงน่าดึงดูดในโปรเจกต์ขนาดใหญ่
    • ตอนเริ่มเรียน CSS ผมซื้อหนังสือที่พวกเขาออกมา มันเป็นอีกยุคหนึ่งจริง ๆ

  • เมื่อก่อนเว็บไซต์นี้มีอิทธิพลต่อผมมหาศาล
    สำหรับคนที่ไม่รู้ คือเราสามารถส่งดีไซน์สำหรับเนื้อหา HTML เดียวกันได้โดยใช้แค่ CSS และรูปภาพ ตัวอย่างที่ผมประทับใจเป็นพิเศษมีดังนี้
    https://csszengarden.com/202/
    https://csszengarden.com/189/
    https://csszengarden.com/177/
    https://csszengarden.com/136/
    https://csszengarden.com/206/
    เคยมีดีไซน์ที่เมื่อเลื่อนหน้า ดาบที่เป็น position: fixed จะ “ผ่าหน้ากระดาษตรงกลาง” ด้วย แต่ตอนนี้ดูเหมือนจะไม่มีอยู่ในรายการแล้ว อีกอันที่จำได้คือส่วนบนสุดของหน้าเป็นระดับน้ำทะเล และเมื่อเลื่อนลงไปใต้น้ำ ด้านล่างสุดจะมีอย่างใดอย่างหนึ่งระหว่างปลาหมึกยักษ์ เรือดำน้ำ หรือไดเวอร์

    • ผมก็เหมือนกัน พอเห็นดีไซน์เหล่านั้นก็ทำให้นึกว่า เว็บดีไซน์ทุกวันนี้น่าเบื่อขนาดไหน

  • ผมเคยลงดีไซน์ไว้ที่นั่นสองแบบ และทุกวันนี้ก็ยังได้รับอีเมลมาขออนุญาตนำ CSS ไปใช้ซ้ำ

  • วันนี้เห็น CSS Zen Garden บน HN แล้วดีใจจริง ๆ คิดถึงยุคนั้นมาก
    แต่ตอนนี้ขอบ่นหน่อย
    สิ่งที่น่ากังวลที่สุดเกี่ยวกับ Tailwind และ “เฟรมเวิร์ก” CSS อื่น ๆ ที่คล้ายกัน รวมถึงการพัฒนาซอฟต์แวร์สมัยใหม่โดยรวม คือการที่ผู้คนเริ่มภูมิใจกับ การไม่เข้าใจระบบพื้นฐาน มากขึ้นเรื่อย ๆ
    Tailwind ให้คำตอบที่รวดเร็วและผิวเผิน แค่แปะ utility class ลงในหน้า ก็ได้ผลลัพธ์ที่ “ดูดีพอ” โดยไม่ต้องเรียนรู้ว่า CSS ทำงานจริง ๆ อย่างไร ไม่สนใจว่า HTML จะกลายเป็นกองรกที่มีคลาส CSS มากกว่าเนื้อหาหรือไม่
    เป็นทัศนคติแบบ “มันทำงานยังไงแล้วสำคัญตรงไหน? ก็ได้หน้าสวย ๆ ออกมาแล้วนี่ สำเร็จแล้ว!”
    นี่ไม่ใช่ปัญหาเฉพาะของ Tailwind แต่เป็นกระแสที่ใหญ่กว่าของอุตสาหกรรม ที่ยกย่องความไม่รู้ และรีบเอาแต่ผลลัพธ์โดยไม่สร้างความเข้าใจที่แท้จริง
    ตั้งแต่เมื่อไหร่ที่การไม่รู้กลายเป็นเรื่องน่าภูมิใจ? น่าเศร้าที่ความลึกซึ้งและความชำนาญถูกมองเป็นทางเลือก หรือถึงขั้นเป็นสิ่งที่ไม่น่าปรารถนา

    • ถ้าเห็นว่า HTML ส่วนใหญ่แย่แค่ไหนจะช็อกเลย เมื่อกี้ดู Twitter โพสต์หนึ่งในไทม์ไลน์ของผมมีแค่ย่อหน้าข้อความหนึ่งย่อหน้า รูปหนึ่งรูป และไอคอนที่เป็นลิงก์ประมาณ 10 อัน แต่เฉพาะ HTML ก็มี 254 บรรทัด ขนาด 21.8kB มี div ซ้อนกัน 104 ชั้น และคลาสมากกว่า 860 คลาส
      จำนวนคลาสมากกว่าจำนวนตัวอักษรของเนื้อหาข้อความ และเฉพาะชื่อคลาสก็ประมาณ 9kB แล้ว สิ่งเดียวกันนี้ถูกทำซ้ำกับทุกโพสต์ในไทม์ไลน์
      จริง ๆ ควรพอด้วย div ไม่กี่ตัว คลาสไม่กี่คลาส กับคลาสต่อไอคอนหนึ่งอัน และ CSS อีกไม่กี่บรรทัด พูดจริง ๆ คือใช้จำนวนตัวอักษรน้อยกว่าตัวอักษรของชื่อคลาสในโพสต์เดียว ก็สามารถจัดสไตล์ทุกโพสต์ในไทม์ไลน์ได้แล้ว
      ไม่เข้าใจเลยว่านักพัฒนามืออาชีพสร้าง HTML ที่บวมเทอะทะ ไร้เหตุผลขนาดนี้ได้อย่างไร
    • การพัฒนาซอฟต์แวร์คือการสะสมชั้น abstraction ไปตามกาลเวลา แล้วคุณเขียน assembly เก่งแค่ไหนล่ะ?
    • เข้าใจว่าหมายถึงอะไร แต่ผมว่าใช้ไม่ได้กับ Tailwind คลาสของ Tailwind ตรงกับพร็อพเพอร์ตี CSS โดยตรง ดังนั้นถ้าไม่เข้าใจ CSS จริง ๆ ก็ทำอะไรได้ไม่มากนัก

  • รู้สึกเหมือนหลุดมาจากอดีต ผมชอบ CSS Zen Garden แต่เป้าหมายและปรัชญาของมันเหมาะกับโลกที่วัตถุประสงค์หลักของเว็บไซต์คือ การให้บริการเอกสาร
    ดูเหมือนโลกของสื่อที่หลากหลายจะทิ้งวิสัยทัศน์ของเว็บแบบนั้นไว้ข้างหลังตั้งแต่ราวกลางทศวรรษ 2000

    • ผมว่าไม่ใช่สื่อที่หลากหลายเท่าไร แต่เป็นเว็บที่เปลี่ยนไปเป็น เน้นการตลาด 100% มากกว่า เลื่อนลงไปก็มีแต่โฆษณาไม่หยุด
    • นั่นเป็นการถอยหลังอย่างร้ายแรง
      https://blog.danieljanus.pl/2019/10/07/web-of-documents/
    • ถึงจะบอกว่า “โลกที่วัตถุประสงค์หลักของเว็บไซต์คือการให้บริการเอกสาร” แต่เรายังอยู่ในโลกนั้นนะ ไม่ได้พูดประชด
      ยกเว้นแอปแผนที่ไม่กี่ตัว เว็บส่วนใหญ่ก็ยังเป็นเรื่องของการอ่านอะไรสักอย่าง และไม่จำเป็นต้องมีของรก ๆ มากมายขนาดนี้ มันซับซ้อนขึ้นก็เพราะนักพัฒนาชอบความซับซ้อนมากกว่าความเรียบง่าย
    • “สื่อสมัยใหม่” นี่หลากหลายจริงหรือ? ผมว่าความหนาแน่นของข้อมูลและอัตราส่วนสัญญาณต่อสัญญาณรบกวนกลับแย่ลงมากกว่า

  • ดีใจที่ Garden กลับมา CSS Zen Garden กับ Spoono เคยเป็นเว็บไซต์โปรดของผมในยุคที่การออกแบบเว็บด้วย CSS เป็นเทคโนโลยีล้ำสมัย และผู้คนเริ่มใช้ div ซ้อนกันลึก ๆ แทน table ซ้อนกันลึก ๆ
    หนังสือก็ดีด้วย