บทความ IT เจ๋งๆ

ในฐานะ Web Developer การเรียนรู้เคล็ดลับที่จะทำให้ชีวิตของคุณง่ายขึ้นถือเป็นเรื่องที่ควรทำ โดยเฉพาะอย่างยิ่งหากเคล็ดลับเหล่านั้นสามารถนำไปใช้งานได้ทันที บทความนี้จึงได้รวม 8 เคล็ดลับ ที่ Web Developers สามารถนำไปประยุกต์ใช้งานได้ทันที ซึ่งเป็นเคล็ดลับเกี่ยวกับ HTML, CSS และ JavaScript ที่มีประโยชน์และอาจมีบางเคล็ดลับที่คุณไม่เคยทราบมาก่อน

1. External Links

การทำ External Links สามารถทำได้หลายวิธี วิธีหนึ่งที่คุณทำได้ก็คือ การเพิ่ม Class พิเศษให้กับ External Links ทั้งหมด นี่อาจดูเป็นเรื่องยุ่งยากสักหน่อยและอาจเกินความจำเป็น แต่มันสามารถทำได้ง่ายมากเมื่อใช้ CSS 

ลองมาดู Selector ด้านล่างนี้กัน

CSS Selector นี้ใช้ a Tags ซึ่งใน href Attribute มีเครื่องหมาย // (เพื่อกรองเอา Relative URLs ออกไป) และไม่รวม URL ของ Website ของคุณเอง

Selector นี้มักจะใช้ร่วมกับ before หรือ after Pseudo-Element โดยที่ Pseudo-Element มักจะมี Icon อยู่ด้วยแทบจะทุกครั้ง ลองดูตัวอย่างต่อไปนี้

ในตัวอย่างข้างต้น External Links มี before Pseudo-Element ที่เพิ่ม External Link Icon ไว้ที่ด้านหน้าของ Link

2. Easy Counting

คุณอาจเคยใช้ console.log มาแล้วหลายครั้ง มันเป็นวิธีที่ดีที่ Web Developer เป็นจำนวนมากใช้เมื่อต้องการ Debug แต่คุณรู้หรือไม่ว่า ยังมี Functions ที่เป็นประโยชน์อีกมากมายให้ใช้งาน

หนึ่งใน Functions เหล่านั้นก็คือ count Function โดย Function นี้จะบันทึกจำนวนครั้งที่มีการเรียกใช้งาน count Function ซึ่งวิธีนี้จะช่วยให้คุณสามารถ Track ได้ว่ามี Event เกิดขึ้นกี่ครั้ง โดยที่ไม่ต้องสร้างตัวนับ (Counter) ด้วยตัวเอง

count Function มี 1 Argument นั่นคือ Labal ที่ชื่อ Name ดังที่เห็นในตัวอย่างด้านบน โดย Argument นี้จะทำงานเหมือน Identifier สำหรับ Counter หากไม่มี Label ระบุไว้ ก็จะใช้ “default” Label 

ในตัวอย่างด้านบน names Array มี 5 names ซึ่ง count Function จะถูก Call ในทุก ๆ การวน Loop ซึ่งทำให้ Counter จะ Return 5 กลับมา

3. Angles

Angles ถูกใช้อย่างมากใน CSS เพื่อ Rotate Elements บางอย่างหรือสร้าง Animation ส่วนใหญ่เราใช้บางอย่างเช่น transform: rotate(180deg) สำหรับสิ่งนี้ แต่ก็ยังมี หน่วยอื่น ๆ ที่เป็นไปได้อีกมากมายที่คุณสามารถใช้ได้ อีกทั้งคุณยังสามารถใช้ rad, grad และ turn

สิ่งที่น่าสนใจที่สุดคือหน่วย turn โดยแทนที่คุณจะเขียน transform: rotate(180deg) คุณสามารถใช้ transform: rotate(0.5turn) หรือถ้าคุณต้องการ Rotate Elements 2 ครั้ง คุณสามารถใช้ transform: rotate(2turn) แทนที่จะใช้ transform: rotate(720deg)

     transform: rotate(0.5turn); in action

4. Captions และ Subtitles

การเพิ่ม Captions หรือ Subtitles ลงใน Audio และ Video ทั้งหมดบน Website ของคุณ จะช่วยอำนวยความสะดวกให้แก่ Visitors ของคุณเป็นอย่างมาก ซึ่งแน่นอนว่า Visitors สามารถเข้าใจไดทันทีเมื่อได้รับชมหรือรับฟัง

คุณสามารถเพิ่ม Captions หรือ Subtitles โดยใช้ track Tag ซึ่งคุณสามารถใช้ Tag นี้ภายใน audio หรือ video Tag ได้

นี่คือสิ่งที่กำลังกล่าวถึงข้างต้น

label Attribute ระบุ Title ของ Text Track ส่วน kind Attribute ระบุ Type ของ Text Track และสามารถมีได้ 1 ในค่าต่าง ๆ ดังต่อไปนี้: Captions, Chapters, Descriptions, Metadata หรือ Subtitles และ srclang Attribute ระบุ Language ของ Text Track และจำเป็นต้องมี หาก kind Attribute เป็น Subtitles

5. Dynamic Properties

มีหลายครั้งที่คุณอาจพบว่า ตัวคุณเองอยู่ในสถานการณ์ที่คุณต้องเพิ่ม Dynamic Properties ให้กับ Object ซึ่งโชคดีที่สิ่งนี้สามารถใช้ใน JavaScript ได้ แต่ในความเป็นจริงแล้ว ยังมีหลายวิธีที่ทำแบบนี้ได้

นี่คือแบบแรก:

 

อีกทั้งคุณสามารถรวม Dynamic Properties เข้ากับ Interpolation ได้หากคุณกำลังใช้งาน ES6

ลองดูตัวอย่างต่อไปนี้ซึ่งเราได้เพิ่ม Property พิเศษ ให้กับ person Object โดยใช้ Interpolation

 

วิธีสุดท้ายในการเพิ่ม Dynamic Property ให้กับ Object ก็คือ การ Set มันในลักษณะเดียวกับที่คุณเพิ่ม Key-Value Pair ลงใน Array

 

ข้อได้เปรียบที่สำคัญของวิธีนี้ก็คือ มันช่วยให้คุณไม่แค่เพียงเพิ่ม Dynamic Properties เมื่อทำการ Declare Object เพียงเท่านั้น แต่ยังสามารถใช้ร่วมกับ If-Statement ได้อีกด้วย

 

6. Styling Optional และ Required Input Elements

CSS มาพร้อมกับ :optional และ :required Pseudo-Class สำหรับการ input, select และ textarea Tag โดยที่ :optional Pseudo-Class จะหมายถึงถึง Element ที่ไม่มีการตั้งค่า Required Attribute ไว้ ส่วน :required Pseudo-Class หมายถึง Element ที่มีการตั้งค่า Required Attribute ไว้ 

 

นี่คือสิ่งที่แสดงตาม Code ด้านบน:

7. Comma-Separated List

นี่เป็นเคล็ดลับเล็ก ๆ น้อย ๆ ที่ช่วยให้คุณสร้าง List ที่คั่นด้วย , (เครื่องหมายจุลภาค) โดยใช้เพียง HTML Unordered List และ CSS เพียงไม่กี่บรรทัด

เพื่อให้สามารถใช้งานได้ คุณต้องแน่ใจว่าได้ตั้งค่า Display Property ของ li Tag เป็น Inline-Block

นี่คือตัวอย่างของผลลัพธ์:

 

8. Unique Array Values

เคล็ดลับสุดท้ายในบทความนี้ ช่วยให้คุณสามารถ Remove ค่าที่ Duplicate กันออกจาก Array ได้ วิธีหนึ่งที่ทำได้ก็คือ การใช้ filter Function ปกติแล้วมีหลายวิธีในการแก้ไขปัญหานี้

วิธีที่น่าสนใจในการ Remove ค่าที่ Duplicate กันออกจาก Array ก็คือ การรวม Set Constructor กับ Spread Operator ซึ่งมันทั้งเรียบง่ายและ Clean

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

 

 

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

 

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

 

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

• 6 Front-End Coding Ideas ที่จะช่วยทำให้คุณอยาก Coding มากขึ้น
• 12 สุดยอด GitHub Repos ที่จะทำให้ Developers หลงรัก ในปี 2021
• 10 JavaScript Hacks ที่ Web Developer ทุกคนควรรู้ไว้