COOL IT IDEAS AND STUFF

See the original english version Click here!

HTML เป็นหัวใจสำคัญของ Web ในฐานะ Programmer คุณอาจคุ้นเคยกับพื้นฐานของ HTML มาบ้างแล้ว แต่ยังมี Features บางอย่างที่ไม่ค่อยมีใครรู้จักซึ่งสามารถช่วยพัฒนาทักษะการพัฒนา Web ของคุณได้ ในบทความนี้ ดังนั้นเรามาเพิ่มทักษะ HTML ของคุณ ด้วย 9 เคล็ดลับเหล่านี้กัน

1. เปิด Device Camera

คุณรู้ไหมว่า คุณสามารถใช้ HTML เพื่อเข้าถึงอุปกรณ์กล้องของ User ได้ เมื่อใช้ Capture Attribute คุณสามารถเปิดทั้ง กล้องด้านหน้าหรือกล้องด้านหลังของ Mobile Device เพื่อถ่ายภาพได้ เพียงเพิ่ม Capture Attribute ให้กับ File Input Element แล้วระบุ "user" สำหรับกล้องหน้าหรือ "environment " สำหรับกล้องหลัง

2. Website Refresh อัตโนมัติ

หากคุณต้องการให้มีการ Refresh Website ของคุณโดยอัตโนมัติ หลังผ่านช่วงระยะเวลาหนึ่ง คุณสามารถทำได้โดยการเพิ่ม Meta Tag อย่างง่ายลงไปใน Head Section ของ HTML Document ของคุณ ซึ่ง http-equiv Attribute ที่มีการระบุค่า "refresh" จะช่วยให้คุณสามารถระบุช่วงเวลา (เป็นวินาที) สำหรับ Page ที่ต้องการจะ Refresh

ในตัวอย่างนี้ จะมีการ Refresh Website ทุก ๆ 10 วินาที สิ่งนี้อาจเป็นประโยชน์สำหรับ Live Data Updates หรือการแสดง Dynamic Content

3. Spellcheck Activation

เชื่อว่า คุณคงไม่ชอบที่จะเห็นการสะกดคำผิด ในการกรอกแบบฟอร์มของคุณ สำหรับกรณีนี้ HTML ได้จัดเตรียม spellcheck Attribute ที่สามารถ Set ค่าให้เป็น "True" เพื่อ Activate การตรวจสอบการสะกดคำ อีกทั้งคุณยังสามารถระบุภาษาที่ต้องการจะใช้ด้วยการเพิ่ม lang Attribute เข้าไป

สำหรับ Attribute มาตรฐานตัวนี้ สามารถรองรับการใช้งานบน Browsers ส่วนใหญ่ที่พวกเราใช้กันอยู่ และยังสามารถปรับปรุง User Experience โดยรวมได้อีกด้วย

4. ป้องกันการแปลภาษา

อาจมีกรณีที่คุณต้องการป้องกันไม่ให้มีการแปลบางวลีหรือคำบางคำ ด้วยการตั้งค่า translate Attribute เป็น "no" จะทำให้คุณสามารถระบุได้ว่า ไม่ต้องมีการแปล Elements ที่ต้องการเหล่านั้น สิ่งนี้มีประโยชน์สำหรับการรักษาชื่อของ Brand, Logo หรือ Content อื่น ๆ ที่ควรคงไว้ในภาษาที่เป็นต้นฉบับ

5. Disable Default Favicon Requests

ตามค่า Default เมื่อ Users เข้าเยี่ยมชม Frontend Application ของคุณ Web Browsers จะส่ง Request ไปที่ favicon.ico ของ Application นั้น อย่างไรก็ตาม อาจมีบางกรณีที่คุณต้องการ Disable ลักษณะการทำงานดังกล่าว อย่างเช่น เมื่อมีการสร้าง Desktop Application

หากต้องการ Disable ค่า Default ของ Favicon Request คุณสามารถใช้ Code ต่อไปนี้:

การเพิ่ม Meta Tag นี้ ถือเป็นการสั่งให้ Browser เพื่อ Load รูปภาพเปล่า ๆ แทนที่จะส่ง Request ไปยัง Server ซึ่งสามารถช่วยประหยัด Bandwidth และปรับปรุงประสิทธิภาพด้วยการกำจัด Favicon Requests ที่ไม่จำเป็น

6. Download Link ที่ถูกคลิกโดยอัตโนมัติ

คุณเคยต้องการมอบประสบการณ์การ Download ที่ราบรื่นให้กับ Users ของคุณหรือไม่? ด้วย HTML คุณสามารถทำ การ Download โดยอัตโนมัติ เมื่อมีการคลิก Link ไปยัง Target Resource เพียงเพิ่ม download Attribute ลงใน Anchor (<a>) Tag

เมื่อ User คลิกที่ Link ตัว Browser จะเริ่ม Download File ที่ถูกระบุไว้ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับ File ที่ Download ได้ เช่น รูปภาพ, Document หรือ PDF

7. Customizing Form Validation Messages

HTML5 เปิดตัว Set ของ Built-in Form Validation Messages เพื่อช่วยให้ Users สามารถกรอก Forms ได้อย่างถูกต้อง อย่างไรก็ตาม คุณรู้ไหมว่า คุณสามารถปรับแต่ง Validation Messages เหล่านี้ เพื่อให้คำแนะนำที่เป็นมิตรต่อ ผู้ใช้มากขึ้นได้ โดยใช้ setCustomValidity() Method ใน JavaScript คุณสามารถแทนที่ Default Error Messages แล้วแสดง Messages ที่คุณต้องการได้

ในตัวอย่างนี้ เมื่อ User ทำการ Submit Form โดยไม่มีการ Input ค่าใด ๆ Error Message ที่เรากำหนดเองก็จะแสดงแทนที่ Default Validation Message ซึ่งช่วยให้ได้รับประสบการณ์เกี่ยวกับการใช้ Form Validation ที่เป็นรูปแบบของคุณเอง และเป็นมิตรต่อผู้ใช้มากขึ้น

8. ใช้ ‘colgroup’ และ ‘col’ elements จัดการกับ Style

ยังมีอีก Feature หนึ่งที่หลายคนอาจมองข้ามแต่กลับมีประสิทธิภาพในเรื่องของ HTML Tables ก็คือ <colgroup> Tag และ <col> Tag ซึ่ง Tags เหล่านี้มีวิธีการนำ Style ไปใช้งานกับทั้ง Columns แทนที่จะต้องกำหนดเป้าหมายไปยังแต่ละ Cell หรือ Row

9. Responsive Images ด้วย srcset

ในยุคปัจจุบันที่มักเน้นไปที่ Mobile เป็นหลัก การเพิ่มประสิทธิภาพในการ Load ภาพบน Devices ต่าง ๆ ถือเป็นสิ่งที่สำคัญมาก ซึ่ง HTML เองก็มี srcset Attribute ซึ่งช่วยให้คุณสามารถระบุ Image Source ได้หลาย Sources และสามารถระบุรูปภาพที่จะถูก Load ตามความสามารถของ Devices และขนาดของ Screen 

ในตัวอย่างนี้ มีการระบุ Image Sources ที่แตกต่างกัน 3 Sources ตามความหนาแน่นของ Pixels ที่แตกต่างกัน (1x, 2x, 3x) Browser จะทำการเลือกภาพที่เหมาะสมตามความละเอียด Screen ของ Devices มันช่วยให้มั่นใจได้ว่า Users บน Screen ที่มีความละเอียดสูง จะได้ดูภาพที่คมชัด โดยไม่ต้องเปลือง Bandwidth บน Screen ที่มีความละเอียดต่ำ

สรุป

HTML เป็นสิ่งที่มีประโยชน์อเนกประสงค์และมี Features ดี ๆ ซ่อนอยู่มากมาย ด้วย 9 เคล็ดลับนี้ เชื่อว่าคุณจะสามารถเพิ่มทักษะในการพัฒนา Web ของคุณและสร้าง Website ที่มีการโต้ตอบกับ Users และใช้งานง่ายได้มากขึ้น

ที่มา: https://blog.devgenius.io/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• วิธี Clone Git Repository โดยใช้ Personal Access Token สำหรับมือใหม่
• IT & Digital Events in October 2023
• 15 Websites ที่ Web Developers สามารถนำไปใช้งานได้