8 องค์ประกอบ HTML พื้นฐานที่คุณไม่จำเป็นต้องใช้ Library

เลิกต่อสู้กับเบราว์เซอร์ของคุณ เลิกติดตั้ง library สำหรับสิ่งที่คุณมีอยู่แล้ว

ลองใช้ 8 องค์ประกอบ HTML พื้นฐานเหล่านี้ดู:

  • <dialog>: ใช้สำหรับ modal มันจัดการเรื่อง focus และ backdrop ให้เสร็จสรรพ
  • <details> และ <summary>: ใช้สำหรับ accordion
  • popover: ใช้สำหรับเมนู ไม่ต้องใช้ JavaScript เลยแม้แต่นิดเดียว
  • <select> และ <datalist>: ใช้สำหรับ dropdown และ autocomplete
  • <input type="range">: ใช้สำหรับ slider ตกแต่งสไตล์ได้ด้วย CSS
  • <input type="color">: ใช้สำหรับ color picker
  • <input type="date">: ใช้สำหรับปฏิทิน ใช้งานได้ดีบนมือถือ
  • loading="lazy": ใช้สำหรับการโหลดรูปภาพ

การเน้นใช้ Native ก่อน ไม่ได้หมายความว่าต้องไม่มี dependency เลย แต่มันหมายถึงการที่คุณตรวจสอบเอกสาร (docs) ก่อนที่จะใช้ npm

Library ทำให้โค้ดของคุณหยุดนิ่ง แต่เบราว์เซอร์มีการพัฒนาอยู่เสมอ คุณจึงได้รับฟีเจอร์ใหม่ๆ มาใช้งานได้ฟรีๆ

เขียนโค้ดให้น้อยลง ได้เรื่อง accessibility มากขึ้น และใช้เวลาในการดูแลรักษาน้อยลง

ตรวจสอบเอกสารของแพลตฟอร์มก่อน เพราะบ่อยครั้งที่ฟีเจอร์ที่คุณต้องการ อยู่ห่างออกไปเพียงแค่ tag เดียวเท่านั้น

Source: https://dev.to/dimonb19a/8-native-html-elements-you-dont-need-a-library-for-29b4