COOL IT IDEAS AND STUFF

See the original english version Click here!

 

HTML ถูกใช้งานอย่างแพร่หลาย สำหรับ Web Developer แล้ว การที่ได้รู้จักและมีความเข้าใจใน HTML Attributes จะช่วยทำให้พวกเขาทำงานได้สะดวกและมีประสิทธิภาพมากขึ้น และบทความนี้จะมาแนะนำ

1. การใช้ Popover Attributes เพื่อสร้าง Accessible Native Popover Elements

ในอดีต Web Developers มักจะใช้ Native Browser Windows เป็น Popup Elements เพื่อแสดง Top-Layer Content (เช่น การแสดง T-shirt Size Chart เมื่อ User คลิก Link บน E-Commerce Website) โดย Native Browser เหล่านั้นดูจะไม่เป็นมิตรกับ User และไม่สามารถปรับแต่งได้เลย ต่อมา พวกเขาได้สร้าง In-page, CSS-Styled Popovers พร้อม External Libraries เพื่อแสดง Content ดังกล่าวในลักษณะที่เป็นมิตรกับ UI/UX

ตอนนี้คุณสามารถสร้าง Popovers ได้โดยไม่ต้องเขียน JavaScript Code แม้แต่บรรทัดเดียวด้วย HTML ล้วน ๆ โดยมาตรฐาน Web สมัยใหม่ ประกอบด้วย การรองรับ Inbuilt Popover ผ่าน Popover API

ลองดู Source Code ต่อไปนี้:

จาก HTML Snippet ข้างต้น ใช้ Popover Element ที่เรียบง่ายโดยใช้ popover Attribute มันใช้ popovertarget Attribute เพื่อแสดง popover Element โดยไม่ต้องใช้ JavaScript นอกจากนี้ เรายังจัดสไตล์ฉากหลังแบบป๊อปโอเวอร์โดยใช้ ::backdrop Pseudo-Element:

Popover Element ที่เรียบง่าย ที่สร้างด้วย HTML Popover API ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

คุณสามารถเพิ่ม Animations สำหรับ Native Popovers ได้โดยใช้ @starting-style CSS at-rule ตามที่อธิบายไว้ในMDN Documentation ยิ่งไปกว่านั้น คุณสามารถสร้าง CSS-Styled Tooltips โดยใช้ JavaScript Methods ของ Popover API ได้ ซึ่ง Popover Web API ยังคงเป็น Browser Feature ที่ยังใหม่ ดังนั้น คุณอาจต้องรอสักครู่ก่อนที่จะใช้งานบน Production

2. การใช้ Autofocus Attribute ใน Dialogs และ Pages

โดยทั่วไป คอมพิวเตอร์จะประกอบด้วย Input Elements หลัก ๆ 2 รายการ ได้แก่ Keyboard และ Mouse แต่ในบางสถานการณ์ Users มักจะใช้เฉพาะ Keyboard ในกิจกรรมบางอย่าง เช่น พนักงานจาก Production Company จำนวนมากอาจใช้เพียง Keyboard สำหรับการป้อนข้อมูลในระหว่างงานยุ่ง ซึ่งพนักงานไม่สามารถใช้คอมพิวเตอร์ด้วยมือทั้ง 2 ข้างได้อย่างมีประสิทธิภาพ ด้วยเหตุนี้  Browsers จึงใช้การรองรับ Keyboard ด้วย Tab Navigation , Key-Binding โดยอัตโนมัติสำหรับ Popovers และ Dialogs และ Shortcut Keys เป็น Inbuilt Accessibility Features

มาตรฐาน HTML ยังมี autofocus Attribute เพื่อ Focus Form Elements โดยอัตโนมัติในระหว่างการ Load Page และ Dialog/Popover แสดงสถานะ ด้วย Attribute นี้ จะช่วยให้คุณสามารถเพิ่มประสิทธิภาพการทำงานของ Users ด้วยการ Focus Elements ให้เหมาะสมที่สุด

ลองดูตัวอย่างต่อไปนี้ ที่ Auto-Focuses ตัว Text Input ที่ 2 เนื่องจาก Text Input ตัวแรก ถูกกรอกไว้ล่วงหน้าแล้ว:

การใช้ Autofocus Attribute เพื่อเพิ่มประสิทธิภาพการทำงานของ Users ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

ดังที่แสดงในตัวอย่างด้านบน Users สามารถ Focus ไปที่ Pre-Filled Text Input ได้โดยการกด Alt + Tab Shortcut และนี่ก็คือ Source Code เพื่อให้ได้ผลลัพธ์ข้างต้น:

HTML Snippet ข้างต้น ใช้ autofocus Attribute ใน 2 ตำแหน่งด้วยกัน:

• ใน Show Modal Button Element เพื่อ Focus หลังจาก Page Load Event
• ใน Text Input ที่ 2 เพื่อ Auto-Focus เนื่องจาก Text Input ตัวแรกได้ถูกกรอกไว้ล่วงหน้าแล้ว

ในที่นี่ เรายังมีการใช้ method="dialog"  Attribute ที่ตั้งค่าไว้ เพื่อปิด Dialog โดยไม่ต้องใช้ JavaScript Code

3. การ Validate Text Inputs ด้วย Pattern Attribute

ในปัจจุบัน Web Apps สมัยใหม่เกือบทั้งหมด ใช้การ Validate ฝั่ง Client-Side ใน Forms ต่าง ๆ Developers มักใช้การ Validate แบบ Real-Time ในฝั่ง Client-Side เพื่อปรับปรุงความเป็นมิตรต่อ Users ของ Apps ของพวกเขา ตอนนี้คุณไม่จำเป็นต้องใช้ JavaScript เพื่อใช้ Validate การ Input แบบ Real-Time โดยใช้ Regex-base เนื่องจาก HTML มี pattern Attribute ใน Input Elements

สมมติว่า คุณต้อง Validate ตัว Product Identifier ที่มีตัวอักษรภาษาอังกฤษ 2 ตัวและตัวเลข 6 หลัก ที่เชื่อมต่อกันโดยใช้เครื่องหมายยัติภังค์ เช่น GR-100200

HTML Snippet ต่อไปนี้ ใช้การป้อนข้อความที่เปิดใช้งานการ Validate ข้อมูล สำหรับ Requirement ข้างต้น:

ณ ที่นี้ pattern Attribute จะป้องกัน Form Submission ด้วยการแสดง Validation Message บน Browser สำหรับ Invalid Inputs แต่เราจะนำการ Validate แบบ Real-Time ไปใช้งานได้อย่างไร

การ Validate แบบ Real-Time สำหรับ pattern สามารถทำได้ด้วย :valid และ :invalid CSS Pseudo-Classes ดังที่แสดงใน HTML Code Snippet ต่อไปนี้:

จาก HTML Snippet ข้างต้นใช้ CSS Code เพื่อกำหนด Styles ตาม Validation State ดังที่แสดงในตัวอย่างต่อไปนี้  Invalid Inputs จะเปลี่ยนขอบของ Input Box เป็นสีแดงและแสดงเครื่องหมายกากบาทสีแดง ในขณะเดียวกัน Valid Inputs จะมีการแสดงเส้นขอบสีเขียวพร้อมเครื่องหมายถูกสีเขียว:

การตรวจสอบ Input แบบ Real-Time ด้วย pattern Attribute และ CSS ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ CSS Pseudo-Elements เช่น :valid และ :invalid ได้จากบทความนี้

คุณสามารถเข้าถึง validityState Interface ของ Input ที่ใช้ pattern เพื่อตรวจสอบความถูกต้องจาก JavaScript ได้ดังนี้:

4. การจัดการ Mobile Virtual Keyboard Mode ด้วย Inputmode Attribute

สำหรับ Mobile Devices สมัยใหม่ เราจะไม่เห็น Physical Keyboard จริง แต่มันจะมาพร้อมกับ Virtual Keyboard ที่แสดงผลบน Touch Screen แทน ซึ่ง Virtual Keyboard นี้มีหลาย Modes ตัวอย่างเช่น อาจแสดงเฉพาะปุ่มตัวเลขสำหรับ Number Input Elements และ Keyboard Interface แบบรูปเต็มสำหรับ String Inputs ทั่วไป Mobile Browser จะเปลี่ยน Virtual Keyboard Mode โดยอัตโนมัติตามประเภท Input แต่ Developers ยังสามารถปรับแต่งได้โดยใช้ inputmode Attribute ของ Input Elements

สมมติว่า คุณใช้ Text Input ที่มีรูปแบบเฉพาะเพื่อบันทึก OTP PIN จาก User:

Mobile จะแสดง Keyboard Layout แบบเต็มรูปแบบ เนื่องจากเป็น String Type Input ทั่วไป:

String Input Element ทั่วไปจะเปิด Keyboard Layout แบบเต็มรูปแบบบน Android ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

ลองมาใช้ inputmode Attribute ดังต่อไปนี้กับ Input Element:

ตอนนี้ เราจะเห็น Keyboard Layout ที่เป็นตัวเลขบน Mobile ได้แล้ว ดังที่แสดงในตัวอย่างต่อไปนี้:

String Input Element ทั่วไปเปิดKeyboard Layout ที่เป็นตัวเลขบน Android ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

5. Browser-Level Lazy Loading สำหรับ Images ด้วย Loading Attribute

Web Developers มักจะพยายามปรับปรุงเวลาในการ Load Page เพื่อเพิ่มคะแนน SEO (Search Engine Optimization) และเพื่อปรับปรุง User Interactivity สำหรับ Lazy Loading Images ถือเป็นกลยุทธ์ที่รู้จักกันดีในการลดเวลาในการ Load Page ด้วยการ Load รูปภาพเมื่อจำเป็นต้องแสดงรูปภาพที่ต้องการ ซึ่ง Lazy Loading Images สามารถทำได้ด้วย Third-Party Libraries หรือเขียนขึ้นเองเพื่อให้ใช้งานได้ด้วย Intersection Observer API หรือ Scroll Events แบบดั้งเดิม

loading Attribute ของ img Tag จะช่วยให้คุณสามารถเปิดใช้งาน Lazy Loading ในระดับ Browser ได้โดยไม่ต้องเขียน JavaScript Code หรือใช้ Third-Party Libraries

คุณสามารถดู Source Code ต่อไปนี้:

ณ ที่นี่ Stock Image ด้านบนจะถูก Load เฉพาะในกรณีที่ User ทำการ Scroll ลงไป ดังที่แสดงในภาพตัวอย่างต่อไปนี้:

การเปิดใช้งาน Image Lazy Loading ด้วย loading Attribute ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

ในส่วนของ HTML Specification นั้น Lazy Loading ไม่สามารถปรับแต่งได้ แต่ Browsers ก็อาจเสนอ Options ที่สามารถปรับแต่งได้ หากมี Developers จำนวนมากใช้ Lazy Loading ในระดับ Browser แทนการใช้ External Libraries

6. การใช้ Custom Data-* Elements

โดยทั่วไป Browsers จะไม่ใช้ Validation Rules ที่เข้มงวดกับชื่อของ HTML Attribute ดังนั้น Developers จึงสามารถใช้ชื่อของ Custom Attribute ตามที่ต้องการกับ HTML Element มาตรฐานใดก็ได้ อย่างไรก็ตาม การใช้รูปแบบการตั้งชื่อ (Naming Conventions) ที่หลากหลายสำหรับ Custom Attributes ไม่ใช่แนวทางปฏิบัติที่ดี เนื่องจากจะทำให้ HTML Document Specification ไม่ถูกต้อง มาตรฐาน HTML จะกระตุ้นให้ Developers ใช้ data- Prefix สำหรับ Custom Attributes โดยนำเสนอ Features เฉพาะใน DOM API

นี่คือตัวอย่าง HTML Element ที่ใช้ Custom Data Attributes:

คุณสามารถเข้าถึง Custom Attributes Values เหล่านี้ได้อย่างง่ายดายโดยใช้ Camel-Cased Keys ด้วยการ Destructuring ผ่าน JavaScript ดังที่แสดงใน Code Snippet ต่อไปนี้:

คุณยังสามารถเข้าถึง Data Attributes เหล่านี้ภายใน CSS Documents ได้ดังนี้:

CSS Snippet ข้างต้น แสดงค่าของ data-player-name และ data-score ใน HTML Element ดังต่อไปนี้:

HTML Element ที่แสดง Custom Data Attributes ด้วย CSS ซึ่งเป็นการบันทึกหน้าจอโดยผู้เขียนบทความนี้

คุณสามารถใช้ Native HTML Tags สมัยใหม่ เพื่อพัฒนา Web Frontends ที่เรียบง่าย, ใช้งานง่าย, มีประสิทธิภาพสูง และสามารถเข้าถึงได้ โดยไม่ต้องใช้ Third-Party Libraries

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับพวกมันได้จากบทความนี้

ที่มา: https://levelup.gitconnected.com/

 

 

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

 

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

 

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

• 10 Tools ใหม่ ที่ช่วยให้ Software Developers ทำงานสะดวกขึ้น
• 7 Projects ที่ Programmer ควรลองทำ เพื่อเพิ่มทักษะและประสบการณ์ทำงาน
• 5 Errors ที่ทำให้ Python Code ช้าลง รวมทั้งวิธีแก้ไข