คุณไม่จำเป็นต้องใช้ JavaScript สำหรับสิ่งนั้น

 (htmhell.dev)
3 คะแนน โดย GN⁺ 2023-12-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

หลักการสำคัญของการพัฒนาเว็บ: กฎแห่งสิทธิ์ขั้นต่ำ

  • หนึ่งในหลักการสำคัญของการพัฒนาเว็บคือ 'กฎแห่งสิทธิ์ขั้นต่ำ' ซึ่งหมายถึงการเลือกภาษาระดับต่ำสุดที่เหมาะกับวัตถุประสงค์ที่กำหนด
  • ในบรรดา HTML, CSS, JS นั้น HTML เป็นตัวเลือกที่ควรให้ความสำคัญที่สุด ตามด้วย CSS และสุดท้ายคือ JS
  • แม้ JS จะยืดหยุ่นได้มากที่สุด แต่ก็มาพร้อมความเสี่ยง เช่น การโหลดล้มเหลว การใช้ทรัพยากรเพิ่มขึ้น และปัญหาด้านการเข้าถึง

สวิตช์แบบกำหนดเอง

  • เมื่อต้องสร้างสวิตช์แบบกำหนดเองแทนเช็กบ็อกซ์ทั่วไปตามข้อกำหนดด้านดีไซน์ ก็สามารถทำได้ด้วย HTML และ CSS โดยใช้คลาสเทียม :checked แทน JS
  • เบราว์เซอร์จะเชื่อมโยงองค์ประกอบ input ที่อยู่ภายใน label ให้อัตโนมัติ และทำให้คลิกได้ จึงสามารถสลับสถานะได้โดยไม่ต้องมีตัวจัดการ JS เพิ่มเติม

ความสามารถเติมข้อความอัตโนมัติแบบเนทีฟ: Datalist

  • แทนที่จะใช้ JavaScript สามารถใช้ datalist ซึ่งเป็นความสามารถในตัวของเบราว์เซอร์ เพื่อแสดงตัวเลือกที่ถูกกรองอัตโนมัติตามที่ผู้ใช้พิมพ์ได้
  • ผู้ใช้สามารถพิมพ์ค่าที่ต้องการเอง หรือคลิกไอคอนดรอปดาวน์ที่เบราว์เซอร์เพิ่มมาเพื่อดูตัวเลือกทั้งหมดได้

ตัวเลือกสีแบบเนทีฟ

  • แทนที่จะใช้ตัวเลือกสีที่ซับซ้อนและสร้างด้วย JS สามารถใช้ตัวเลือกสีแบบเนทีฟที่เขียนได้ด้วย HTML เพียงบรรทัดเดียว
  • ในเบราว์เซอร์ที่ใช้ Chromium ยังมีความสามารถเพิ่มเติมในการเลือกสีจากตำแหน่งใดก็ได้บนหน้าจอ

แอคคอร์เดียน

  • สามารถใช้องค์ประกอบ details และ summary เพื่อซ่อนเนื้อหาไว้จนกว่าผู้ใช้จะต้องการ และช่วยปรับปรุงโครงสร้างของหน้า
  • สามารถใช้แอตทริบิวต์ open เพื่อเปิดรายการใดรายการหนึ่งของแอคคอร์เดียนไว้เป็นค่าเริ่มต้นได้

โมดัลแบบโต้ตอบ

  • สามารถใช้องค์ประกอบ dialog เพื่อสร้างโมดัลสำหรับแสดงข้อมูลแก่ผู้ใช้หรือขอให้ผู้ใช้ป้อนข้อมูล
  • ใช้ JS เพื่อเปิดโมดัล แต่ส่วนที่เหลือทั้งหมดสามารถจัดการได้ด้วย HTML และ CSS แบบเนทีฟ

บทสรุป

  • บทความนี้แสดงให้เห็นว่าสามารถใช้ JS ให้น้อยลง และสร้างเว็บไซต์ที่ดีกว่าเดิมได้ด้วยการใช้ความสามารถของ CSS และ HTML ให้เต็มที่
  • สิ่งสำคัญคือการทดสอบแนวทางการพัฒนาใหม่ ๆ โดยคำนึงถึงการเข้าถึง

ความเห็นของ GN⁺

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

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

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

 
GN⁺ 2023-12-03
ความคิดเห็นบน Hacker News

  • มีการชี้ว่าบทความไม่ได้กล่าวถึงกรณีที่มีการใช้ JavaScript ในบางด้านเพราะมีความเข้ากันได้ดีกว่า

    • แม้จะสามารถใช้ JavaScript รุ่นใหม่ผ่านการทรานสไพล์ได้ แต่การทำ polyfill ให้ฟีเจอร์ที่ขาดหายไปของ CSS และ HTML นั้นยากกว่ามากและบางครั้งก็เป็นไปไม่ได้
    • เมื่อใช้พร็อพเพอร์ตี appearance ทาง MDN ระบุข้อควรระวังไว้มากมาย และแนะนำให้ทดสอบอย่างละเอียดโดยเฉพาะเมื่อใช้ appearance: none
    • datalist ใช้งานไม่ได้บน Firefox Android และจะแสดงเป็นเพียงช่องกรอกข้อมูลธรรมดา
    • ตัวเลือกสีมีความไม่เป็นมาตรฐานอย่างมาก จึงยากต่อการใช้งานในธุรกิจส่วนใหญ่
    • ตัวบทความเองก็ยอมรับถึงความไม่สม่ำเสมอของ details และ dialog
    • หวังว่าสักวันเบราว์เซอร์จะรองรับฟีเจอร์เหล่านี้อย่างสม่ำเสมอ แต่จนกว่าจะถึงตอนนั้นก็คงจะใช้เป็นหลักในโปรเจ็กต์ส่วนตัวเท่านั้น

  • แสดงความประหลาดใจที่แม้กระทั่งในปี 2023 เรายังเผชิญปัญหา UX ทั่วไปเกี่ยวกับฟอร์มและการป้อนข้อมูลของผู้ใช้อยู่

    • ไม่เข้าใจว่าทำไมปัญหานี้จึงยังไม่ได้รับการแก้ไข
    • เคยมีความพยายามจะแก้ปัญหานี้ในคราวเดียวผ่าน XForms แต่ไม่ได้ถูกนำไปใช้งานในเบราว์เซอร์ และแทนที่ด้วย CSS/JS component framework ที่ให้ชุดองค์ประกอบฟอร์มแบบจำกัด

  • ไม่เคยรู้จัก datalist มาก่อน แต่ดูเหมือนว่าจะทำงานได้ไม่ดีบน Chrome Android

    • แม้จะเห็นตัวเลือกจากคีย์บอร์ดได้ แต่เป็นครั้งแรกที่เห็นฟีเจอร์นี้ใน UI เว็บบนมือถือ และไม่มั่นใจว่าผู้ใช้ทั่วไปจะค้นพบวิธีใช้ได้
    • บน Firefox Android ไม่รองรับเลย

  • มีการกล่าวถึงการเลื่อนแบบลื่นไหลแบบเนทีฟด้วย scroll-behavior: smooth, แครูเซลแบบเนทีฟด้วย scroll-snap, และแอนิเมชันที่อิงกับการเลื่อน

    • แนะนำให้จำกัดการใช้ฟีเจอร์เหล่านี้และใช้อย่างระมัดระวัง เพราะมักมีผลข้างเคียงในทางลบ

  • การใช้ <details> มีข้อดีคือสามารถค้นหาเนื้อหาด้วย Ctrl+F ได้ และในขณะที่ JavaScript accordion อาจเปิดไม่ได้ แต่ <details> เปิดได้

  • มีความเห็นว่า datalist ไม่ใช่ตัวเลือกที่เหมาะสม เว้นแต่จะเป็นเครื่องมือภายใน

    • ค่าเริ่มต้นไม่ดี ปรับสไตล์ไม่ได้ และเมื่อมีข้อจำกัดด้านการตกแต่งหรือการเปลี่ยนพฤติกรรม JavaScript ก็มักเป็นทางเลือกเดียว

  • มีความเห็นว่าหากทำตามมาตรฐาน HTML ทุกอย่างจะสม่ำเสมอและสามารถนำไปใช้กับเรื่องอย่างการเข้าถึงหรือการแปลภาษาได้ง่าย

    • ชี้ถึงปัญหาที่แม้แต่ปุ่มย้อนกลับยังใช้งานไม่ได้ เพราะเว็บไซต์สมัยใหม่โหลดหน้าแบบไดนามิก

  • ชี้ว่า CSS สามารถถูกใช้เป็นเครื่องมือที่ทำให้หน้าเว็บอ่านยากได้

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

  • กล่าวถึง "Rule of Least Power" เป็นหนึ่งในหลักการสำคัญของการพัฒนาเว็บ

    • มีความเห็นจากนักพัฒนาคนหนึ่งว่าไม่เคยได้ยินหลักการนี้มาก่อน และสงสัยว่ายังมีนักพัฒนาฟรอนต์เอนด์ที่อยากทำงานให้เรียบง่ายที่สุดเท่าที่จะเป็นไปได้อยู่หรือไม่