Brackets

[Dev] รู้จักกับ Emmet: Tool ที่จะทำให้การสร้าง Web ง่ายและลื่นไหลมากกว่าเดิม

เรื่องที่เกี่ยวข้อง - Adobe Edge Code CC @en, Bracket, Editor @en, Emmet.io @en, package @en, Tool @en, Zen Coding @en

สำหรับ Web Developer ความ enjoy อย่างหนึ่งในชีวิตคือการเขียน Code แล้ว Web แสดงผลตามคำสั่งและทำงานได้ตามต้องการ

และยิ่งเวลาเขียน Code ด้วยเครื่องมือ Editor ดีๆ สักตัว มันลื่นไหลเหมือนราวกับพ่อมดร่ายมนต์ได้อย่างคล่องแคล่วยังไงยังงั้น

และแน่นอนว่าปัจจุบัน Editor มันก็ไม่ได้จำกัดอยู่ที่ NotePad++ หรือว่า Adobe Dreamweaver อย่างเดียว มีให้เลือกมากกว่าภาษา programming ซะอีก

วันนี้ที่จะมาแนะนำก็คือ Plugin ที่ชื่อว่า Emmet.io ครับ

Emmet.io กับ Code snippet

Emmet.io logoหลักการทำงานของ Emmet.io (ผู้สร้างเดียวกับ Zen Coding) คือการพัฒนา workflow ที่ยืดหยุ่นกว่าการใช้ Code snippet แบบเดิมๆ

นั่นก็คือการใช้ Code snippet ที่พวกเราชื่นชอบนั้น มีข้อเสียนิดหนึง ตรงที่เราต้องประกาศ template ของ snippet ก่อนใช้งาน

หรือไม่ก็ต้องไปเสาะหา  template ที่คนอื่นสร้างไว้มาใช้ ซึ่งบ่อยครั้งก็ไม่ได้ถูกใจซะทีเดียว (ของฟรีนี่เนอะ)

Emmet.io เลยเสนอทางที่ดีกว่านี้ นั่นคือการเขียน code แบบ CSS-expression ที่จะทำให้เราสามารถแปลงตัวแปรและกำหนดรูปแบบของ snippet ที่จะสร้างออกมาโดย Emmet.io ได้อย่างลื่นไหล

ซึ่งถ้าคุณคุ้นเคยกับการทำงานใน HTML, CSS, Javascript อยู่แล้ว จะเข้าใจได้ไม่ยากเลย

 

Editor ที่ Emmet.io รองรับ

เนื่องจากผู้สร้าง Emmet.io นั้นต้องการสร้างมาเป็น plugin จึงมีการรองรับ Editor (IDE) ยอดนิยมต่างๆ ดังนี้

เข้าไปกดดูตัวอย่างการใช้งานได้จากหน้า web ของ Emmet.io ครับ (เห็นแล้วจะอึ้ง)

ที่มา – Emmet.io (ขอบคุณพี่ Sappawish ที่แชร์มาให้ facebook)

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save