Tutorial

เขียน HTML/CSS อย่าง Overpowered ด้วย Emmet

By Arnon Puitrakul - 01 เมษายน 2021

เขียน HTML/CSS อย่าง Overpowered ด้วย Emmet

หลาย ๆ คนถามมาเยอะมากเวลาเห็นเราเขียนพวก HTML และ CSS ว่าเราใช้ Plugin อะไรในการที่ทำให้พิมพ์แล้วดู OP GG มาก ๆ กด ๆ ไม่กี่ตัวได้ทั้งยวงเลยอะไรแบบนั้น วันนี้เราจะมาเผยความลับของเรากัน ผ่าน Plugin ที่ชื่อว่า Emmet

Emmet คืออะไร ?

Emmet เป็น Plugin สำหรับ Text Editor ที่ทำให้เราสามารถเขียน HTML และ CSS ได้โคตรเร็ว ผ่านการใช้พวกตัวย่อต่าง ๆ ซึ่งเราสามารถติดตั้งได้ใน Text Editor ต่าง ๆ เยอะมาก

ตัวอย่างเช่น Visual Studio Code ที่มันจะมาพร้อมกับ Emmet ให้เราเลย ถ้าเราเปิดไฟล์พวก HTML และ CSS มันจะเปิดการใช้งานให้เองเลย โดยที่เราไม่ต้องทำอะไรเลย สะดวกมาก ๆ

มาลองใช้งานกัน

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

เริ่มจากง่าย ๆ ก่อน เวลาเราเขียน HTML เปิดไฟล์มา เราจะต้องเขียนพวก Head และ Body Tag ต่าง ๆ นา ๆ หลายบรรทัดมาก ๆ พิมพ์ผิดพิมพ์ถูก ซึ่งเราสามารถใช้ Emmet ในการ Generate ตรงนี้ได้เลย โดยการพิมพ์ html:5 เท่านั้น

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

เวลาเราเขียนพวก Tag ต่าง ๆ เราก็สามารถเขียนชื่อ Tag นั้น ๆ ได้โดยตรงเลย ไม่ต้องมีเครื่องหมายมากกว่าน้อยกว่า เพิ่มเติมคือ เราสามารถใส่จำนวนลงไปได้ด้วย เช่น ถ้าเราต้องการ <li> ทั้งหมด 5 ตัว เราก็สามารถพิมพ์เป็น li*5 มันก็จะ Generate ออกมาให้เรา 5 ตัวไปเลย

<li>Header 1</li>
<li>Header 2</li>
<li>Header 3</li>
<li>Header 4</li>
<li>Header 5</li>

เอาให้อลังการกว่านั้น เราสามารถที่จะใส่พวก Index ลงไปได้ด้วย เช่น เราต้องการ li เหมือนเมื่อกี้เลย แต่ใน Content ให้มันแสดงเป็น Menu 1, Menu 2 ไปเรื่อย ๆ เราก็สามารถทำได้โดยการใช้คำสั่ง li{Header $}*5 ถ้าเราลองสังเกตุ ตรงเครื่องหมาย {} จะเป็นเครื่องหมายสำหรับ Content ที่อยู่ข้างใน โดยที่เราสามารถกำหนด Content ที่อยู่ใน Tag ใด ๆ ผ่านเครื่องหมายปีกกาได้เลย เท่สุด ๆ ไปเลย

h1.title -> <h1 class="title"></h1>

จากนั้น ถ้าเราต้องการกำหนดพวก Class หรือ ID ใน HTML Tag ก็ทำได้เช่นเดียวกัน จำง่าย ๆ คือ เวลาที่เราเขียน CSS Selector เราจะใช้ จุด แทน Class และ เครื่องหมายสี่เหลี่ยมแทน ID ใช่แล้ว ใน Emmet ก็ทำแบบนั้นเช่นกัน เช่น เราอยากได้ h1 ที่มี class ว่า title เราก็สามารถพิมพ์เป็น h1.title ได้เลย ตัว ID ก็เช่นกัน ก็เปลี่ยนเป็น เครื่องหมายสี่เหลี่ยมเท่านั้นเอง

h1.title.red-text -> <h1 class="title red-text"></h1>

หรือ ถ้าเราต้องการใส่หลาย ๆ Class และ ID เราก็สามารถใส่จุด และสี่เหลี่ยมต่อ ๆ กันได้เลย เช่น เราต้องการ h1 ที่มี class ชื่อ title กับ red-text และ ID เป็น title-me เราก็สามารถใช้เป็น h1.title.red-text#title-me

<div class="container">
    <h1 class="title">Welcome</h1>
</div>

เมื่อกี้เราเล่นกำหนดทีละส่วนไป เราสามารถทำ Nested ซ้อน ๆ กันไปเลยได้ด้วย ตัวอย่างเช่น เราต้องการ Code แบบด้านบน เราก็สามารถพิมพ์เป็น .container>h1.title ได้เลย

เราลองมาแยกส่วนดูกัน เราจะเห็นว่า มันจะมีเครื่องหมายมากกว่า (>) คั่นอยู่ ถ้าเราลองแยกออกมา เราจะเห็นว่า แยกได้ออกมาเป็น 2 ส่วนด้วยกันคือ .container ซึ่งก็คือการสร้าง Div Tag ที่ใช้ Class ชื่อว่า container ออกมานั่นเอง อ่อ เป็นเรื่องที่เราลืมบอก ถ้าเราไม่ได้กำหนด Tag มันจะใส่เป็น Div Tag ให้เป็น Default อยู่แล้ว และอีกชิ้นก็คือ h1.title ก็คือการสร้าง Heading 1 ที่มี Class ชื่อ title อยู่นั่นเอง ดังนั้นการใส่เครื่องหมายมากกว่า จะเป็นการบอกว่า สิ่งที่อยู่หลังเครื่องหมายมากกว่าจะเป็นลูกของตัวข้างนอกนั่นเอง

.container>(h1.title+(.content-container>p.content))+(footer>.container)

ลองมาดูอะไรที่มันซับซ้อนกว่านี้กัน ดูจากด้านบน เราจะเห็นว่ามันมีอะไรเยอะมาก ๆ อันที่เพิ่มขึ้นมาคือ เครื่องหมายวงเล็บ และ เครื่องหมายบวก เรามาดูทีละอย่างกัน

<h1 class="title"></h1>
<div class="content-container"></div>

เครื่องหมายบวกจะคล้าย ๆ กับเครื่องหมายมากกว่า ที่ว่าเป็นเรื่องของการจัดเรียง Code โดยที่ ถ้าเป็นเครื่องหมายบวก จะเป็นการเอามาต่อท้ายเช่น h1.title+.content-container ก็จะเป็น Code แบบด้านบน จะเห็นว่า มันจะต่างจากการใช้เครื่องหมายมากกว่าที่ ถ้าเป็นเครื่องหมายมากกว่า มันจะเป็นลูก แต่การใช้เครื่องหมายบวก จะเป็นการเอามาต่อกัน

<h1 class="title"></h1>
<div class="content-container">
    <p class="content"></p>
</div>

ในตัวอย่างนี้เกิดจาก h1.title + (.content-container > p.content) จะเห็นว่า คล้ายกับด้านบนเลย แต่เราเพิ่ม p.content มาเป็นลูกของ .content-container แต่จะสังเกตุเพิ่มเติมว่า เราเพิ่มพวกเครื่องหมายวงเล็บมาด้วย มันเอาไว้เพื่อให้เราสามารถอ่านได้ง่ายขึ้นนั่นเอง

นอกจากนั้นการใช้วงเล็บ เรายังสามารถนำไปใช้คู่กับการคูณเหมือนที่เราดูกันในตอนแรกได้เช่น  (.content-container > p.content) * 10 มันก็จะสร้าง Div Tag ที่เป็น Class content-container ที่ข้างในในมี Paragraph Tag ที่เป็น Class content ทั้งหมด 10 ชุดด้วยกัน

สรุป : Emmet เป็น Plugin ที่โคตร OP

ที่เราเอามาโชว์ในวันนี้เรียกได้ว่าเป็นน้ำจิ้มเลยก็ว่าได้ จริง ๆ แล้วมันยังทำอะไรได้อีกเยอะมาก ๆ ถ้าเราอยากรู้ว่ามันทำอะได้อีก เราสามารถเข้าไปดูใน Cheat Sheet ของ Emmet ได้เลย แรก ๆ มันอาจจะทำให้เราช้าหน่อย เพราะเรายังจำไม่ได้ว่า เราจะต้องใช้ว่าอะไร แต่ถ้าเราใช้ไปเรื่อย ๆ เริ่มเซียน เราสามารถเขียนทั้ง Layout ได้ในเวลาแค่ไม่กี่วินาทีเท่านั้นเอง

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...