สิ่งที่มีแต่เว็บดีเวลอปเปอร์ยุค 90 เท่านั้นที่จำได้ (2014)

 (zachholman.com)
1 คะแนน โดย GN⁺ 2024-01-26 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เว็บส่วนตัวในยุค 1990s เป็นช่วงที่ยังขาดเครื่องมือจัดเลย์เอาต์แบบมาตรฐาน จึงต้องฝืนสร้าง การจัดวางและเอฟเฟกต์ ด้วยเทคนิคอย่าง , , 1x1.gif,  , DHTML
  • ก่อนที่ CSS layout จะกลายเป็นมาตรฐาน 1x1.gif และ   ที่ใส่ซ้ำๆ ถูกใช้ราวกับเป็น เครื่องมือจัดวางหลัก สำหรับดันตำแหน่งขององค์ประกอบ และบทความนี้ก็ล้อเลียนความคิดถึงแบบเกินจริงนั้น
  • CSS ยุคแรกๆ มุ่งไปที่เอฟเฟกต์ภาพเล็กๆ อย่างการลบเส้นใต้ของลิงก์และเปลี่ยนสไตล์ a:hover ส่งผลให้เส้นแบ่งระหว่างลิงก์กับข้อความธรรมดาเริ่มเลือนราง
  • DHTML เชื่อมโยงกับวัฒนธรรม คัดลอก-วางโค้ด ที่ใช้ CSS กับ JavaScript ปนกันเพื่อสร้างเอฟเฟกต์อย่าง alert() ตอนโหลด, หิมะตก, เมนูแอคคอร์เดียน, แบบคัสตอม
  • ฟอนต์พิกเซล, ปุ่ม 88x31, Internet Explorer 4.0, GeoCities, FrontPage ’98 ปรากฏในฐานะวิธีที่เว็บไซต์ส่วนตัวสมัยนั้นใช้โอ้อวดตัวเลือกทางเทคนิคและตัวตนของตัวเอง

ยุคที่ กับ คือแอนิเมชัน

  • การเอา ไปใส่ไว้ใน ถูกพูดถึงแบบติดตลกว่าเป็นเหมือนคอมพิวเตอร์แอนิเมชันชั้นสูงของเว็บยุค 1990s
  • มีน้ำเสียง ภูมิใจเกินจริง ประมาณว่าเว็บดีเวลอปเปอร์ยุค 1990s มีเรื่องสำคัญจะเล่ามากกว่ายุคนี้ที่มี jQuery หรือฐานข้อมูลแบบ non-relational

เลย์เอาต์ที่ดันทั้งหน้าเว็บด้วย 1x1.gif

  • 1x1.gif, spacer.gif, transparent.gif ต่างก็หมายถึง GIF โปร่งใสขนาด 1 พิกเซล × 1 พิกเซล
  • สามารถกำหนดค่า WIDTH และ HEIGHT ของรูปภาพ HTML ให้ใหญ่ขึ้นเพื่อสร้างพื้นที่ว่างที่มองไม่เห็น และดันองค์ประกอบของหน้าไปยังตำแหน่งที่ต้องการได้
  • โค้ดตัวอย่างใช้ , , , , ``, และ CGI เว็บเคาน์เตอร์ร่วมกันเพื่อจัดการทั้งโครงสร้างและของตกแต่งในคราวเดียว
  • มีการประชดต่อว่า 1x1.gif ทำให้วางองค์ประกอบไว้ตรงไหนของหน้าก็ได้ และยังเป็นวิธีเดียวในการจัดกึ่งกลางแนวตั้งมาจนถึงทุกวันนี้

จัดระยะด้วย   แบบทำมือ

  • ถ้าใช้แท็กรูปภาพได้ไม่สะดวก ก็ยังมีวิธีใส่   ซ้ำๆ เพื่อจัดระยะ
  • มีตัวอย่างการแทรก   หลายตัวระหว่าง PLEASE SIGN กับ MY GUESTBOOK BELOW: เพื่อจัดวางข้อความของ guestbook
  • ต่อด้วยมุกว่า ถ้าได้เหรียญนิกเกิลทุกครั้งที่ใช้   ในยุค 1990s ก็คงมีเงินพอจ่ายค่าบริการส่วนเกินรายเดือนของ AOL แน่นอน

CSS ยุคแรกเริ่มจากการลบเส้นใต้ลิงก์

  • CSS ถูกแนะนำว่าเป็นเทคโนโลยีที่ปรากฏขึ้นช่วงปลายยุคทองของ HTML พร้อมคำสัญญาว่าจะแยกเนื้อหาออกจากสไตล์
  • สิ่งแรกๆ ที่คนทำกับ CSS ในเวลานั้นคือการ ลบเส้นใต้ ของลิงก์
  • พอลิงก์ดูเหมือนข้อความ และข้อความก็ดูเหมือนลิงก์ ก็ยิ่งเดาไม่ออกว่าควรกดตรงไหน
  • ยังมีการพูดถึงเอฟเฟกต์ที่ทำให้มีเปลวไฟลากตามเคอร์เซอร์เมาส์ด้วย
  • ตัวอย่างไฟล์ index.shtml จากปี 2000 มีเพียง inline CSS ว่า a:hover {text-decoration: none; color: #000000}
    • เป็นโค้ดที่ลบเส้นใต้เมื่อโฮเวอร์และเปลี่ยนสีเป็นดำ
    • และยังย้ำแบบขำๆ ด้วยว่านี่คือไฟล์ index.shtml ที่ใช้ SSI

DHTML และวัฒนธรรมการคัดลอกโค้ด

  • หลังจากลบเส้นใต้ลิงก์ด้วย CSS ก็ไปต่อด้วย JavaScript ที่แสดง alert("Welcome to my website!") ตอนโหลดหน้า
  • การจับคู่กันของ CSS และ JavaScript ถูกล้อว่าเป็น “เทคโนโลยีสยองขวัญ” ที่ชื่อ DHTML
  • เอฟเฟกต์ DHTML รวมถึงหิมะตกจากด้านบนของหน้า, image map แบบแอนิเมชันเมนูแอคคอร์เดียน, และ แบบคัสตอมที่ใช้
  • ด้วยเว็บอย่าง Dynamic Drive ปัญหาต่างๆ จึงถูกทำให้ดูเหมือนแก้ได้ด้วยการ คัดลอกบล็อกโค้ด 50 บรรทัด มาแปะ แทนที่จะลงมือแก้ด้วยตัวเอง
  • DHTML ถูกเปรียบว่าเป็น Twitter Bootstrap แห่งยุคนั้น

ฟอนต์พิกเซลและสุนทรียะของความละเอียดต่ำ

  • หน้าจอคอมพิวเตอร์ในยุคนั้นเป็น CRT ซึ่งแม้จะใหญ่ทางกายภาพ แต่ความละเอียดไม่ได้สูง
  • เพื่อใช้พิกเซลที่มีจำกัดให้คุ้มค่า จึงมีบรรยากาศของการใช้ ฟอนต์เล็กระดับประมาณ 6 พอยต์
  • เว็บดีเวลอปเปอร์ที่หลงใหลตัวอักษรแบบพิกเซลง่ายๆ หลายคนอยากผันตัวไปเป็นนักวาดภาพประกอบ และยังมีความพยายามใส่ภาพพิกเซลไอโซเมตริกลงใน splash screen ด้วย
  • พร้อมมุกปิดท้ายว่า เอาเวลาและเงินนั้นไปลงทุนใน IPO หุ้นดอทคอมแทนการติดตั้ง Photoshop อาจจะคุ้มกว่า

Internet Explorer 4.0 กับปุ่ม 88x31

  • มีการประชดว่าเหตุผลที่ทุกวันนี้คนเกลียด Internet Explorer ก็เพราะมันห่างไกลจาก “รูปแบบอันบริสุทธิ์” ของ Internet Explorer 4.0 มากเกินไป
  • Internet Explorer 4.0 ถูกพูดเกินจริงเหมือนเป็นเบราว์เซอร์ที่สมบูรณ์แบบ พร้อม Active Desktop และ Channels
  • เว็บไซต์ในยุคนั้นมักติด ปุ่มขนาด 88x31 พิกเซล ไว้มากมายเพื่อบอกว่าผู้เข้าชมควรใช้เบราว์เซอร์อะไร และเจ้าของเว็บใช้เครื่องมือหรือบริการอะไรอยู่
  • ปุ่มเหล่านี้ถูกเปรียบเหมือนเหรียญตราบนเครื่องแบบทหาร ที่บอกถึงการเลือกและสังกัดของผู้ดูแลเว็บไซต์
    • ตัวอย่างเอดิเตอร์คือ FrontPage ’98
    • ตัวอย่างเว็บเซิร์ฟเวอร์คือ GeoCities
    • ส่วนเว็บริงก็มีมุกว่าแต่ละเว็บอยากอยู่ในตำแหน่งที่ยกเว็บตัวเองให้สูงที่สุด ทั้งที่จริงไม่มีตำแหน่งนั้นอยู่เลย

มุกส่งท้ายถึงเว็บยุคปัจจุบัน

  • เว็บทุกวันนี้ถูกอธิบายว่าเป็นสภาพที่มี abstraction หลายชั้นซ้อนอยู่บน JavaScript
  • ปิดท้ายด้วยมุกว่า JavaScript ยังคิดเลขให้ถูกไม่ได้ด้วยซ้ำ แต่เราก็ยังสร้างเว็บมาถึงทุกวันนี้ได้อย่างน่าทึ่ง
  • และจบด้วยข้อเสนอให้เอา   ไปใส่ใน pull request ถัดไปเยอะๆ เพื่อแกล้งทีมแบบขำๆ

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

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

 
GN⁺ 2024-01-26
ความเห็นจาก Hacker News

  • เรื่อง server-side image map นี่รู้สึกใกล้ตัวมาก
    ผมเป็นผู้ดูแลระบบที่ทำเครื่องมือบนเว็บเป็นครั้งคราวมากกว่าจะเป็นเว็บโปรแกรมเมอร์จริงจัง ทักษะเว็บเลยเหมือนหยุดอยู่แถวต้นยุค 2000 และก็มีความรู้สึกต่อต้าน JavaScript แบบอธิบายไม่ถูกอยู่ด้วย ช่วงหลังผมต้องทำพฤติกรรมพื้นฐานสำหรับจัดการจุดบนรูปภาพในเครื่องมือตัวหนึ่ง ทั้งที่งานนี้น่าจะจบได้ด้วย JavaScript 5 บรรทัด แต่ในปี 2023 กลับเลือกทำด้วย server-side image map
    สุดท้าย แทนที่จะเป็น JavaScript 5 บรรทัด ก็กลายเป็น Python 50 บรรทัดสำหรับจัดการ state กับเคสพิเศษใน request handler เพื่อรองรับไวยากรณ์ fragment ประหลาด ๆ ฟังดูน่าเขินนิดหน่อย แต่ก็ภูมิใจแปลก ๆ ที่ยังทำให้มันใช้งานได้

    • สิ่งที่แย่ที่สุดของ server-side image map คือมัน ทำลายการเก็บถาวรโดยสิ้นเชิง
      ถ้าไปเจอเว็บเก่าใน archive.org Wayback Machine แล้วหน้าแรกทั้งหน้าทำด้วย server-side image map คุณจะไม่มีทางรู้เลยว่า URL ปลายทางของส่วนอื่นในเว็บคืออะไรหากไม่มีเซิร์ฟเวอร์ต้นฉบับ สุดท้ายก็ตันสนิท
    • ผมเคยแก้ การรองรับ server-side image map ของ Chromium ในปี 2015
      ตอนนั้นมันพังแทบหมด ถ้าการซูมไม่ใช่ 100% หรือ padding ไม่ใช่ 0 พิกัดก็จะเพี้ยน และยังมีปัญหาคล้ายกันอีกหลายจุด ที่ไม่มีใครสังเกตก็เพราะแทบไม่มีใครใช้ image map อยู่แล้ว และ server-side image map นั้นยิ่งแทบไม่มีคนใช้เลย
      ตอนนั้นผมเองก็อยากหาทางหนีแบบง่าย ๆ โดยไม่ใช้ JavaScript เลยนึกถึง HTML ยุค 90 ขึ้นมา แต่สุดท้ายหลังจากแก้บั๊ก Chromium แล้วก็สรุปว่า server-side image map ไม่ค่อยเวิร์ก เลยใช้ JavaScript ซึ่งเวอร์ชัน JavaScript ก็ดีกว่าจริง ๆ
    • ผมเห็นด้วยเต็มที่กับความรู้สึกแบบ “ต่อให้ทั้งนรกนี่มี JavaScript แค่ 5 บรรทัด ผมก็ไม่เอามันเข้ามาในโปรแกรม”
      HTMX เหมือนเป็นทางรอดจริง ๆ และถ้าซื้อ Tailwind UI ใคร ๆ ก็อาจกลายเป็นคนที่ทำอะไรอันตรายพอสมควรในฝั่งฟรอนต์เอนด์ได้เหมือนกัน แต่ก็อยากรู้มุมมองอื่นว่าทำไม JavaScript ถึงทำให้รู้สึกไม่สบายใจ สำหรับผมส่วนหนึ่งคือความไม่สม่ำเสมอของไวยากรณ์ และฝั่ง TypeScript แค่เห็นโฟลเดอร์ node_modules ก็เริ่มคลื่นไส้แล้ว
      โดยรวมมันให้ความรู้สึกว่าควบคุมสิ่งที่กำลังเกิดขึ้นทั้งหมดไม่ได้ เลยทำให้ผมห่างจากงานฟรอนต์เอนด์มานาน
    • ปลายปี 2019 ผมต้องควบคุม GUI ของอุปกรณ์ที่อยู่ในบริษัทจากที่บ้าน แต่ไม่มี remote desktop มีแค่เครื่องมือจับภาพหน้าจอกับเครื่องมือ command line สำหรับฉีดการคลิก
      ผมเลยเขียนเว็บเซิร์ฟเวอร์ด้วย Lisp ไม่กี่สิบบรรทัดเพื่อแสดง image map ของหน้าจอ แล้วพอมีคำขอจาก image map เข้ามาก็ให้มันแทรกการคลิกเข้าไป เดิมทีเป็นเครื่องมือใช้ครั้งเดียวเล็ก ๆ เพื่อประหยัดการเดินทางไปกลับที่ทำงาน แต่พอ COVID มา คนกลับใช้มันเยอะเกินคาด และจนถึงตอนนี้อาจยังมีใครใช้อยู่ก็ได้

  • ประโยคที่ว่า “ตอนนี้ก็ยังเป็นวิธีเดียวที่จะจัดกึ่งกลางแนวตั้งขององค์ประกอบได้” ไม่จริงอีกแล้ว แต่ ต้นทุนด้าน productivity จากการที่ตลอด 30 ปีที่ผ่านมาเราไม่สามารถใส่ vertical-align: middle; ลงไปใน div แล้วจบได้ น่าจะรวมกันเป็นมูลค่าหลายพันล้านดอลลาร์
    ผมยังจำยุค IE4 หรือ IE6 ได้ ที่เคยนิยมใส่ overline ให้ลิงก์ :hover แล้วก็เคยใช้ตารางทำ div กับปุ่มมุมโค้งมนด้วย และแม้เข้าสู่ยุค 2000 แล้ว ความทรมานจากการตัดภาพใน Photoshop แล้วเอาไปยัดลงในเซลล์ตารางก็ยังไม่หายไป

    • ตอนนั้นในเซลล์ตารางก็มี VALIGN=MIDDLE อยู่แล้ว
      ไม่แน่ใจว่าในยุค 90 ใช้ได้หรือยัง แต่ในยุค 2000 มีแน่นอน
    • เดี๋ยวนี้ผมให้ ChatGPT เขียน CSS แบบนั้นให้ แต่ตลกตรงที่มันเหมือนจะเสนอวิธีแก้อย่างน้อยสิบสองแบบ
      แถมมักปนกฎซ้ำซ้อนมาด้วย เช่น งานที่ใช้แค่ 2-3 กฎก็พอ แต่มันใส่มาเกิน 5 กฎ เรียกได้ว่าโง่อย่างน่าขันจริง ๆ
    • ยุคที่ใช้ตารางทำมุมโค้งมนเป็นอะไรที่ฮิตมากจริง ๆ
      ไม่รู้เสียเวลาไปกับ มุมพวกนั้น เท่าไหร่
    • ทุกวันนี้การจัดแนวตั้งก็ยังเป็นปัญหาใหญ่ และต้องอาศัยความเข้าใจรายละเอียดจุกจิกอยู่มาก
      แม้แต่ใน Tailwind CSS ก็ยังไม่ง่าย ต้องคอยดูว่าองค์ประกอบเป็น block หรือเป็น text และ layout ของ parent คืออะไร
    • หนึ่งใน CSS hack ที่ผมชอบคือ div { display: table-cell; vertical-align: middle; }
      มันไม่ได้ใช้ได้กับทุกสถานการณ์ แต่ถึงตอนแรกจะดูสกปรก ก็ยังแยกความรับผิดชอบได้ดีอยู่ และผมก็ไม่เห็นข้อเสียอื่นชัด ๆ

  • DHTML ในบริบทนี้ไม่ได้หมายถึง Distributed HTML แต่หมายถึง Dynamic HTML และนั่นก็เป็นที่มาของคำว่า Dynamic ใน Dynamic Drive ด้วย

    • ประโยคที่ว่า “DHTML ก็คือ distributed HTML อยู่แล้ว” เป็นมุกตลก แต่เหมือนมีการอ้างผิด
      พอเห็นคนอื่นอ้างผิดเหมือนกัน ก็เลยเป็นไปได้ว่าผู้เขียนอาจเพิ่งแก้ให้มันดูขำขึ้นเมื่อไม่นานนี้
    • ถึงอย่างนั้น คำบรรยายว่า “Technology of Terror” ก็ยังใช้ได้อยู่โดยไม่ต้องเถียง
    • ผมสงสัยว่าอาจตั้งใจพาดพิงถึงช่วงล่างที่พูดว่า “แค่ก็อปปี้แล้ววางได้เลย” และบางทีก็อาจเป็นการล้อ DCOM ด้วย
    • มีการคุยเรื่องนี้ในเธรดด้านล่าง: https://news.ycombinator.com/item?id=39127528
      ข้อสรุปคือมันเป็นมุกจริง แต่ไม่ใช่มุกที่ดีนัก
    • เหมือนเราเจอพวก ตำรวจความสนุก ตัวจริงเข้าแล้ว

  • เฟรมก็เป็นอีกอย่างที่ขาดไม่ได้ มันคือ “วิธีแก้” ดั้งเดิมของปัญหาที่ต้องแก้แถบนำทางของทุกหน้า
    ปัญหาคือเสิร์ชเอนจินสามารถจัดทำดัชนีแต่ละหน้าในเฟรมแยกกันได้ เลยต้องหาทางรับมือเวลามีคนเข้ามาที่หน้าเฟรมโดยตรง เส้นแบ่งระหว่างแต่ละส่วนก็มักชัดเกินไป ทำให้ดูแปลกและใช้งานไม่สะดวก

    • พวกเซียนตัวจริงใช้ server-side include
      แค่ใส่คอมเมนต์พิเศษไว้ใน HTML แล้ว Apache จะเอาเนื้อหาจากไฟล์อื่นมาแทนก่อนส่งให้ไคลเอนต์
    • ถ้าเว็บอื่นเอาหน้าของเราไปใส่ในเฟรม ก็จะปล่อยสคริปต์ frame-buster ออกไป และถ้าหน้านั้นกลายเป็นหน้าโดดเดี่ยวเพราะไม่มีเฟรมของตัวเอง ก็จะเรียกสคริปต์ frame-joiner กลับมาใช้
    • ทุกวันนี้เฟรมก็ยังถูกใช้อย่างน่าประหลาดใจในฐานะเทคโนโลยีพื้นฐานของ microfrontend
      ทฤษฎีอยู่ที่ https://martinfowler.com/articles/micro-frontends.html#Run-t... และดูการใช้งานจริงได้ที่ https://luigi-project.io
    • สัดส่วนที่น่าขันว่าเยอะมากของการใช้ JavaScript แบบ “AJAX” นั้นจริง ๆ แล้วทำด้วยเฟรมก็ได้ และถ้าเฟรมไม่หยุดนิ่งแล้วพัฒนาต่ออีกนิด ก็มีโอกาสที่ประสิทธิภาพจะดีกว่า
      ถ้า HTML table มีความสามารถพื้นฐานมากกว่านี้ และมี table กับ list view ที่อิง data source ให้ใช้ตั้งแต่ช่วงกลางยุค 2000 ก็คงประหยัดเวลาและเงินได้มหาศาล
      ยังไม่นับว่าถ้าเว็บรับมาตรฐานการชำระเงิน และให้เบราว์เซอร์จัดการการกรอกข้อมูลจ่ายเงินเอง จะประหยัดเงินไปได้อีกแค่ไหน
    • เส้นแบ่งระหว่างแต่ละส่วนก็ไม่ได้ตรงกันเป๊ะในทุกเบราว์เซอร์
      เด็ก ๆ เอ๋ย เคยมีสมัยที่ทุกคนไม่ได้ใช้เบราว์เซอร์ตัวเดียวกันนะ

  • ในปี 1996 หน้าแรกของ Microsoft มีแถบเมนูที่กางออกเมื่อเอาเมาส์ไปชี้ และฉันก็ตั้งใจจะหาว่ามันทำงานยังไง
    ตอนนั้น IE มีปุ่ม “ดูซอร์ส” แต่เพราะการออกแบบข้ามแพลตฟอร์มยังไม่ดี มันเลยเปิดเป็นเอกสาร Notepad และเซิร์ฟเวอร์ก็เป็น Unix ที่ใช้การขึ้นบรรทัดใหม่แบบ \n ขณะที่ Windows คาดหวัง \r ทำให้ซอร์ส HTML ดูเป็นเอกสารยาวบรรทัดเดียว
    ไม่ว่าจะไล่ดูซอร์สแค่ไหนก็มีแต่แท็ก HTML ที่รู้จักอยู่แล้ว และเนื้อหาก็เป็นเพียงข้อความที่มองเห็นบนหน้าเว็บ สิ่งเดียวที่ไม่คุ้นคือ HTML entity และเพราะมันมีอยู่ในทุกเว็บที่มีเมนูเคลื่อนไหว ก็เลยเชื่อว่ามันต้องเกี่ยวกันแน่
    อยู่ตั้ง 6 เดือนที่เชื่อว่าเอฟเฟกต์ DHTML จริง ๆ ถูกสร้างด้วยคาถาของสิ่งที่เรียกว่า HTML entity และต่อมาก็ไปเจอทิวทอเรียลของ WebMonkey ซึ่งกลายเป็นจุดเริ่มต้นของทั้งอาชีพ

    • ดูซอร์สคือจุดเริ่มต้นของฉัน
      เครื่องมือ minify กับ compiler นั้นยอดเยี่ยม แต่ฉันคิดถึงยุคที่ได้อ่านซอร์สที่เป็นระเบียบและดูแลอย่างดีของเว็บไซต์ที่ออกแบบดีจริง ๆ
      บางทีก็นึกว่า ถ้าเราเลือกวิธีบีบอัดที่ยังเก็บรูปแบบซอร์สดั้งเดิมไว้ได้แม้ในโค้ด production และยังรักษาความคาดหวังว่าคนอื่นทั่วโลกจะเข้ามาอ่านโค้ดของเราได้ ก็คงดีไม่น้อย วัฒนธรรมแบบนี้มีส่วนมากกับการพัฒนาอย่างรวดเร็วของเว็บยุคแรก และแน่นอนว่ามันเป็นส่วนสำคัญของเส้นทางที่ฉันเข้าสู่วงการนี้ด้วย
    • สงสัยเหมือนกันว่าตอนนั้นอะไรคือสิ่งที่ทำให้เกิด เมนูเคลื่อนไหว จริง ๆ ไม่ได้อยู่ในรุ่นที่เขียนโค้ดกันตอนนั้น เลยเดาว่าน่าจะเป็นแท็กหรือสคริปต์อะไรสักอย่าง
    • ฉันก็มีประสบการณ์คล้ายกันเพราะอยากเปลี่ยนรูปเวลาเอาเมาส์ไปชี้
      เลยไปซื้อ JavaScript Bible จาก Barnes & Noble มาอ่านทั้งสุดสัปดาห์ แล้วหลังจากนั้นก็เรียนรู้ต่อมาเรื่อย ๆ
    • WebMonkey นี่ทำให้ความทรงจำย้อนกลับมาชัดมาก

  • อย่าลืมว่า table ยังถูกใช้ทำ มุมโค้ง ด้วย
    เราจะสร้าง table แบบ 3×3 แล้วใส่รูปไว้ในทุกช่องยกเว้นช่องกลาง เพื่อทำองค์ประกอบเว็บที่มีมุมโค้ง ซึ่งตอนนั้นมันให้ความรู้สึกเหมือนเป็นจุดสูงสุดของความสร้างสรรค์ของมนุษย์
    HTML email ก็เคยบูมมาก และเพราะไคลเอนต์อีเมลอัปเดตช้ากว่าเบราว์เซอร์มาก ถ้าอยากให้แสดงผลถูกต้อง เทคนิคนี้ก็ยังถูกใช้อยู่จนถึงยุค 2010

    • ไม่มีวันลืมการทำชุดรูปอย่าง tl.gif, tr.gif, bl.gif สำหรับ table 3×3
      ตอนนั้นเบราว์เซอร์ไม่ render ภาพพื้นหลังในเซลล์ว่าง ดังนั้นถ้าอยากให้พื้นหลังด้านซ้ายและขวาแสดง ก็ต้องมี 1x1.gif ตามที่บทความพูดถึงด้วย ช่างเป็นวันเวลาอันงดงาม
    • พอได้ border-radius มา กระแสดีไซน์ก็เปลี่ยนไปทันที จนไม่มีใครอยากได้มุมโค้งกันแล้ว
    • หลายข้อในบทความนี้ดูจะใกล้กับ ช่วงต้นยุค 2000 มากกว่ายุค 90
      ก่อนจะทำมุมโค้งด้วย table ฉันจำได้ว่าเคยแต่งสกินให้แอปแชตหลายบริการชื่อ Trillian มันรองรับ Yahoo Chat, ICQ และอื่น ๆ และเราก็ใส่รูปแบบทำซ้ำในเซลล์ด้านบนกับด้านข้างเหมือนเวลาจัดการมุมโค้ง เพื่อให้ย่อขยายหน้าต่างได้ดี
    • https://www.folklore.org/Round_Rects_Are_Everywhere.html
      นี่คือผลงานชิ้นเอกสูงสุดของ Oz ผู้ยิ่งใหญ่และทรงอำนาจ จะว่าไป iPhone อาจจะยิ่งใหญ่กว่าก็ได้
    • table ยังถูกใช้ทำเงาด้วย

  • ถ้าเป็นเว็บยุค 90/00 ก็ต้องมีปุ่ม “เหมาะที่สุดสำหรับความละเอียด 800×600”
    ถ้าอยากดูเท่ขึ้นอีกหน่อยก็ต้องแปะ “Valid HTML 4.01”
    ตอนนั้นโฆษณายังเป็นแบนเนอร์ขนาดมาตรฐานแบบเรียบง่าย ไม่ใช่ชุด JavaScript ซับซ้อนกับวิดีโอโฆษณาเหมือนทุกวันนี้ ยังจำได้ว่าตกใจมากตอนเห็น Norton Internet Security 2003 แก้ HTML ของหน้าที่เข้าแบบเงียบ ๆ โดยลบเฉพาะแบนเนอร์ที่มีขนาดโฆษณามาตรฐานออก และปล่อยอย่างอื่นไว้เหมือนเดิม มันเป็นการยืนยันเมื่อ 20 ปีก่อนเหมือนกันว่า ad blocker ก็คือโซลูชันด้านความปลอดภัย

  • ทั้งบทความไม่มีคำว่า webmaster โผล่มาแม้แต่ครั้งเดียว ทำให้สงสัยเลยว่า Zach เคยอยู่ในยุค 90 จริงหรือเปล่า

    • ฉันยังเก็บนามบัตรคำว่า “Webmaster” ที่ทำไว้ช่วงปลายยุค 90 อยู่เลย
      ไม่มีใครเข้าใจหรอกว่าตำแหน่งนั้นเคย “เท่” แค่ไหน ตอนนี้มองย้อนกลับไปแม้แต่ฉันเองก็ยังเขิน แต่ก็เป็นความทรงจำที่ดีมากจริง ๆ
    • ฉันเคยทำงานกับผู้หญิงคนหนึ่งที่เรียกตัวเองอย่างเป็นทางการว่า “webmistress”
      ไม่ได้ล้อเล่นนะ

  • ถ้าอยากสัมผัสเว็บยุค 90s ด้วยตัวเอง ขอแนะนำ The Geocities Gallery https://geocities.restorativland.org/
    หน้าเว็บส่วนตัวแบบนี้มีความงดงามบางอย่างอยู่ แต่ละหน้ามีหน้าตาที่โดดเด่นเป็นของตัวเอง และแค่นั้นก็สะท้อนบุคลิกของผู้เขียนได้มากแล้ว
    โดยทั่วไปจะมีแนะนำตัว รูปถ่ายส่วนตัวแบบสุ่มไม่กี่รูป รายการลิงก์แนะนำพร้อมคำอธิบายสั้น ๆ และงานเขียนหลวม ๆ เกี่ยวกับงานอดิเรก จึงให้ความรู้สึกเป็นส่วนตัวและสงบมาก ตรงกันข้ามอย่างชัดเจนกับโซเชียลมีเดียทุกวันนี้ที่หน้าโปรไฟล์ทั้งหมดดูเหมือนกันหมด เรียบแบนและน่าเบื่อ พร้อมแรงกดดันจากคอนเทนต์ที่ยืดยาวไม่สิ้นสุดและการต้องรักษาภาพลักษณ์ชีวิตแบบหนึ่งเอาไว้

    • เลยทำให้เผลอหลงเข้า โพรงกระต่าย ไป
      ใช้เวลาอยู่นานทั้งเพื่อหาว่าเว็บเก่าของตัวเองเคยอยู่ในไดเรกทอรีไหนใต้ Area51 หรือบางทีมันอาจไม่ได้ถูกเก็บเข้า archive เลยก็ได้ และก็เพื่อรื้อฟื้นบรรยากาศของยุคนั้นไปด้วย
      ความทรงจำเป็นเรื่องแปลก พอเห็น Geocities แล้วแม้แต่กลิ่นของอินเทอร์เน็ตยุคเก่าก็ย้อนกลับมา ซึ่งน่าจะเป็นกลิ่นของห้องนั่งเล่นที่ตั้งคอมพิวเตอร์ของที่บ้านมากกว่า
    • จำได้ว่าช่วงกลางยุค 90s เคยเอาพื้นหลังลายอิฐของ Windows มาผสมกับกราฟิตีแบบ GIF โปร่งใส แล้วได้เอฟเฟกต์ที่เท่มาก
      งานยุคแรกของ กลุ่มศิลปะ BBS อย่าง ACID, ICE, FIRE ก็เท่มากจริง ๆ ในตอนนั้น
      ก่อนที่ IE5/6 จะครองโลก สิ่งที่ล้ำกว่านั้นส่วนใหญ่ถูกผลักไปอยู่ใน Flash ช่วงต้นยุค 2000s มีการสร้างเฟรมเวิร์กคล้าย React บนพื้นฐาน E4X และได้รับการรองรับจาก ActionScript/Flash/Flex กับ Mozilla/Netscape รวมถึงคล้ายกับรูปแบบ XML literal ของ VB.Net ด้วย
      Microsoft กับ Google ไม่ได้นำไปใช้ และสุดท้าย JSON ก็กลายเป็นราชา

  • ในยุค 90s คำตอบของคำถามเรื่องเลย์เอาต์เว็บแทบจะเป็น ตาราง เสมอ
    ข้อความจัดแนวเพี้ยนเหรอ? ตาราง. อยากได้เมนูเท่ ๆ เหรอ? ตาราง. จะทำทั้งเว็บไซต์เหรอ? ตารางซ้อนตาราง. ในเมื่อสามารถแฮ็กดีไซน์ด้วยแถวและเซลล์ได้ แล้วจะต้องมี CSS ไปทำไม

    • แม้แต่ในปี 2024 ก็ยังจริงอยู่สำหรับ เลย์เอาต์อีเมล
    • และอย่าลืมด้วยว่าต้องใส่แท็ก font ให้ทุกเซลล์
    • ตอนนั้นทุกอย่างเป็น TDD หมด คือ TD-Driven Design
    • ทุกวันนี้ก็ยังชอบตารางอยู่
      มันยอดเยี่ยมมากสำหรับงานออกแบบแบบไดนามิก และยังรองรับการรวมคอลัมน์/แถว การจัดแนว และการถ่วงน้ำหนักด้วย CSS ทุกวันนี้ก็ยังซับซ้อนกว่าตารางสมัยก่อนมาก
    • ตอนนี้เราแค่มีวิธีทำแบบนั้นที่ ถูกต้องเชิงความหมาย มากขึ้น