บทความ IT เจ๋งๆ
11 Frontend Tricks ที่ Frontend Developers หลายคนยังไม่รู้
25-ธ.ค.-20
คัมภีร์เทพ IT
ในบทความนี้เป็น Tricks ส่วนหนึ่งที่ Frontend Developers หลายคนยังไม่ค่อยได้ทราบกันมากนัก ซึ่ง Tricks เหล่านี้ใช้งานกับ HTML / CSS / JavaScript และนี่ก็คือ 11 Frontend Tricks ที่ Frontend Developers หลายคนยังไม่รู้
1. Datalist Element
นี่อาจเป็น HTML Element ประเภทหนึ่งที่คุณอาจไม่ค่อยเห็นว่ามีการใช้งานกันมากนัก
<datalist> Tag ถูกใช้เพื่อให้มี "autocomplete" Feature สำหรับ <input> Elements คุณจะเห็น Drop-Down List ของตัวเลือกที่กำหนดไว้ล่วงหน้าขณะที่คุณพิมพ์ตัวอักษรลงไป
ตัวอย่าง:
<datalist> id attribute (ดูคำที่เป็นตัวหนาจากด้านบน) ต้องเท่ากับ List attribute ของ <input> นี่คือสิ่งที่ผูกพวกมันเข้าด้วยกัน
2. Clickable Label ที่มี Checkbox
หากคุณต้องการ Label ที่สามารถคลิกได้ สำหรับ Checkbox คุณมักจะใช้ Label Element ที่มี “for” Attribute ได้ ดังที่เห็นจากด้านล่างนี้
คุณสามารถใส่ Label Element ครอบ Checkbox เพื่อทำสิ่งเดียวกันได้ ดังนั้น เมื่อคุณคลิก "I agree" มันก็จะเลือก Checkbox
ตัวอย่าง:
3. Child Selectors
นี่อาจเป็นสิ่งที่ใช้ได้ดีที่สุดใน List ของบทความนี้ แต่คนส่วนใหญ่ไม่ทราบขอบเขตของพลังของมัน
Child Selectors ถูกใช้เพื่อจับคู่ Elements ทั้งหมดที่เป็น Child ของ Element ที่ต้องการ มันช่วยให้เกิดความสัมพันธ์ระหว่าง 2 Elements
ตัวอย่าง:
4. Writing Mode
แม้ Writing Mode จะเป็นที่รู้จักไม่มากนัก แต่เป็น CSS Property ที่ทรงพลัง
สิ่งนี้จะช่วยให้ Text เขียนในแนวตั้งได้ ดังนี้:
Code สำหรับทำสิ่งนี้มันง่ายมาก
ตัวอย่างแบบเต็ม ๆ:
Writing-Mode Property มี 5 Options ที่เป็นไปได้
5. calc() Function
calc() CSS Function ช่วยให้คุณทำการคำนวณเมื่อระบุค่า CSS Property
ความสามารถของ calc() ที่มีประโยชน์ที่สุดก็คือ ความสามารถในการใช้ Units ที่แตกต่างกันมาคำนวณได้ เช่น Percentages และ Pixels การที่ไม่มี Preprocessor จะสามารถทำเช่นนั้นได้ มันเป็นสิ่งที่ต้องเกิดขึ้นใน Render Time
ตัวอย่าง:
6. Math.round & Math.floor Alternatives
แม้จะไม่ได้เป็นสิ่งที่ง่ายต่อการอ่านมากนัก แต่มันก็ยังเป็น Trick ที่เจ๋งจริง ๆ
Math.floor() คุณสามารถใช้ 0|:
Math.round() คุณสามารถใช้ +.5|0:
7. Console.table
หวังว่าคุณคงเคยได้ยินและเคยใช้ console.log() มาบ้างแล้ว แต่สิ่งที่คุณอาจไม่เคยได้ใช้เลยก็คือ console.table() ซึ่งใช้ใน Array หรือ Object สิ่งนี้จะแสดง Table ในมุมมองของ Console อย่างเป็นระเบียบ
ตัวอย่าง Array:
8. Console.time
อีกหนึ่ง Console Method ที่มีประโยชน์ โดย console.time() จะใช้เริ่มตัวจับเวลา มันใช้ Parameter เป็น Label จากนั้นคุณใช้ console.timeEnd() ที่มี Label เดียวกัน และ Console จะส่ง Output ออกมาเป็นเวลาในรูปแบบมิลลิวินาทีจากเวลาที่คุณเรียก console.time() และ console.timeEnd()
ตัวอย่าง:
9. In Operator
“in” Operator สามารถใช้ตรวจสอบว่ามี Index อยู่ใน Array หรือไม่ และจะ Return ค่า True หรือ False
ตัวอย่าง:
คุณยังสามารถตรวจสอบว่ามี Property อยู่ใน Object หรือไม่
ตัวอย่าง:
10. เปลี่ยน Chrome ให้เป็น Text Editor
หากคุณป้อนคำสั่งด้านล่างในแถบ URL และกดปุ่ม Return มันจะเปลี่ยน Chrome ให้เป็น Notepad
11. Multiple Statements ใน If Block โดยไม่ใช้ Curly Brackets
อาจมีหลายคนที่ยังไม่เคยเขียน Code ในลักษณะนี้มาก่อน ซึ่ง Trick ในหัวข้อนี้อยู่ที่ Comma
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด