Tutorial

Emmet ที่จะทำให้การสร้างเว็บ ลื่นไหล Tab เดียวจอด...

By Arnon Puitrakul - 22 มิถุนายน 2015

เคยประสบปัญหาเวลา เราเขียนเว็บกันมั้ยครับ เราต้องค่อย ๆ มานั่งพิมพ์ ทีล่ะตัว ๆ ไปเรื่อย ๆ Web Developer หลาย ๆ คนเลยเริ่มไปหาพวกโปรแกรม Code snippet มาใช้ ซึ่งผมก็เป็นเหมือนกัน แต่ผลปรากฏว่า เราก็ต้องมาสร้าง snippet เพื่อใช้เองอีก ทำให้เสียเวลามาก ๆ
ซึ่งแน่นอนว่า สมัยนี้เรามี Editor มากมายกายกองให้เราใช้ ไม่ได้มีแค่ Dreamweaver หรือ Notepad เหมือนเมื่อก่อนแล้ว และอีกอย่าง สมัยนี้เราใช้ IDE ตัวเดียว แต่สามารถเขียนได้หลาย ๆ ภาษาได้ในโปรแกรมเดียวด้วยล่ะ
ซึ่งอย่างที่ผมกำลังใช้อยู่ตอนนี้คือ Sublime Text ก็เป็น IDE สารพัดประโยชน์ดีจริง ๆ ใช้เป็น Default Text Editor แทน TextEdit บน OSX เลยทีเดียว กลับมาที่ Emmet กันต่อ
Emmet เป็น Plugin ตัวนึง ที่ทำให้เราเขียนโค๊ตได้อย่างลื่นไหลมาก ๆ เราสามารถที่จะทำได้มากกว่าที่ Code snippet ทั่ว ๆ ไปทำได้อีกด้วยล่ะ ! !

Editor ที่ Emmet รองรับ

เนื่องจาก ผู้สร้าง Emmet ต้องการให้มันใช้ได้กับหลาย ๆ IDE เขาเลยทำออกมาเป็น Plugin เพื่อให้ Developer สามารถดึงมาใช้ได้กันเยอะ ๆ (ผมชอบเวอร์ ~~ )

  • Sublime Text 3 (Version 3 อย่างเดียว Version 2 ใช้ไม่ได้นะ หรืออาจจะใช้ได้ แต่เคยลองแล้วไม่ได้อะ)
  • Eclipse
  • Vim หรือที่บางคนเรียก Vi ผ่าน Package Manager ได้เลย
  • มีอื่น ๆ อีก แต่ผมไม่เคยใช้ เลยไม่กล้าพูด

เรามาลองใช้กันดีกว่า

เรื่องแรกคือ Abbreviations ถือเป็น Core ของตัว Emmet เลยทีเดียว ไม่งั้นเราจะใช้ทำไมเนอะ

div>h1

อย่างเช่น เราต้องการ Div Tag แล้วข้างใน Div Tag จะมี h1 อยู่ข้างใน เราก็พิมพ์ตามด้านบน พอกด Tab ก็จะออกมาเป็น

<div>
   <h1></h1>
</div>

เรามาลองอะไรที่ซับซ้อนกว่านี้หน่อย

html>(head>title{this is test.})+body

มันก็จะออกมาเป็น

<html>
   <head>
     <title>This is test.</title>
   </head>

   <body>

   </body>
</html>

อีกอย่าง ถ้าเราใส่ปีกกาจะเป็นการเพิ่ม Content ลงไปใน Tag ที่เรากำหนดไว้ เช่น ตัวอย่างข้างบน ที่เราใส่ title{This is test} มันก็คือการใส่ This is test ลงไปใน Tag title นั่นเอง

Class & ID

บางครั้ง ไม่สิ ทุกครั้งสิ เราก็ต้องมากำหนด Style ด้วย CSS ผ่าน Class หรือ ID ถ้าเราจะกำหนด Class เราก็แค่ใส่ จุด แล้วตามด้วยชื่อ Class ที่เราต้องการ เช่น

div.container

เมื่อเรากด Tab เราก็จะเป็น

<div class = "container"> </div>

ส่วน ID ก็เช่นกัน แต่เปลี่ยนจาก จุด เป็น # เช่น

div#section1

ก็จะกลายเป็น

<div id = "section1"> </div>

แล้ว Properties อื่น ๆ ละ ?

เราสามารถเติม Properites อื่น ๆ ได้โดยใช้ [ ] แล้วข้างในก็เติม Properites ที่เราต้องการเข้าไป เช่น เราต้องการ Properites enable แล้วให้ค่ามันเป็น True ที่ Tag Link

div[enable=true]

พอเรากด Tab ก็จะกลายเป็น

<div enable = "true"></div>

แต่แค่นี้คงยังไม่มันส์ แล้วถ้าเกิดว่าเราจะต้องเขียนอะไรซ้ำ ๆ กันเยอะ ๆ อย่างเช่นเขียน li สัก 100 อันล่ะ (สมมุตินะ) ถ้าเขียนเองคงตายแน่นอน ถึงจะใช้ Sublime กด Cmd + Shift + D ก็ต้องกดไปอีก 99 ครั้ง ไหน ๆ เราก็ใช้ Emmet แล้ว ก็ใช้มันให้เป็นประโยชน์กันเถอะ

ul>li*100

ผลที่ออกมาก็จะเป็น ul แล้วข้างในเป็น li 100 อัน เยอะมากก......!!@#@#%#%
แต่นอกจากที่เราจะใช้ตัวคูณเพื่อเสก Tag ตามจำนวนที่เราต้องการแล้ว เรายังสามารถรันตัวเลขลงไปได้ด้วย เช่นใน Tag li เมื่อกี้ผมต้องการกำหนด ให้ใน Tag li มี Class ชื่อ ls แล้วตามด้วยเลข Tag ที่เท่าไหร่ ใน Emmet เราสามารถที่จะรันตัวเลขแบบอัตโนมัติก็ได้โดยใช้ $ เช่น

ul>li.item $$$*100

ผลที่ได้ก็จะออกมาเป็น

<ul>
   <li class = "item 001"></li>
   <li class = "item 002"></li>
             .
             .
             .
   <li class = "item 100"></li>
</ul>

ได้กันเป็นแบบนี้เลยทีเดียว เจ๋งมาก ! !
กับอีก Feature นึงคือ การ Generate Lorem ipsum ได้ด้วยล่ะเช่น

p>lorem

มันก็จะออกมาได้เป็น

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolores sit natus modi aut aliquid numquam fuga, suscipit impedit pariatur molestias optio neque quis blanditiis harum, a! Possimus, asperiores, animi.</p>

แต่ถ้าเราต้องการ ให้มัน Generate ออกมาสัก 4 คำก็ได้โดยการใส่เลขจำนวนคำหลัง lorem เช่น เราต้องการให้มัน Generate ออกมา 4 คำก็ต้องเขียนไปว่า lorem4 เช่น

p>lorem4

ผลก็จะได้ออกมาเป็น

<p>Lorem ipsum dolor sit.</p>

เพิ่มเติม เล็กน้อย

ในไฟล์ html ของเรา อย่างน้อยก็จะต้องมีพวก Tag head, body อะไรที่เป็นพื้นฐาน ซึ่งถ้าเราต้องพิมพ์ html>head>title... อะไรก็คงเยอะ มันเลยมี Snippet ของตัว Emmet เข้ามาช่วยอีก นั่นคือ html:5 พอกด Tab เท่านั้นแหละ รู้เลย !!! มาหมด

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

</body>
</html>

จริง ๆ แล้วนอกจากที่เอามาให้ดูในนี้แล้ว มันยังมีทางฝั่ง CSS ด้วย แต่ไม่ขอเอามาพูดและ เพราะเริ่มเยอะไปมากแล้ว สามารถเข้าไปดูที่เหลือได้ใน Document ของ Emmet ได้เลยที่ http://docs.emmet.io เขาจะบอกหมดเลยว่า มันมีอะไรบ้าง บอกเลยว่า เยอะมาก ๆ ผมยังจำได้ไม่หมดเลย (กำลังหัดใช้อย่างจริงจังมากอยู่ด้วยล่ะ)
จากที่เห็น ว่ามันทำให้เราเขียนเว็บได้ง่ายมาก ๆ มากกว่าเมื่อก่อนที่เราค่อย ๆ พิมพ์ทีล่ะตัวเยอะเลย ซึ่งจริง ๆ แล้วทั้งหมดนี้ก็เป็นเพียงแค่เครื่องมือช่วยทำให้เราเขียนโค๊ตได้สะดวกขึ้นเท่านั้นเอง แต่ที่สำคัญที่สุด ก็อยู่ฝีมือเราจริง ๆ แล้วล่ะครับ

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...