Code Editor บางเบาแจกฟรี และเป็นโครงการ Open-source ของ Adobe ขึ้นเวอร์ชั่นเต็ม 1.0 แล้ว พร้อมเปิดตัวเครื่องมือช่วยนักออกแบบเว็บไซต์ Extract for Brackets ช่วยแกะไฟล์จาก PSD มาเป็น HTML ได้เร็วขึ้น
ผ่านมาเร็วอย่างน่าใจหาย ตั้งแต่ผมคุยกันเรื่อง Brackets ครั้งแรก จนถึงวันนี้ Adobe เปิดตัว Brackets รุ่น 1.0 แล้ว
1. ข้อมูลน่าสนใจของ Brackets ล่าสุด
- ออกมาแล้ว 44 เวอร์ชั่นใน 3 ปี
- ทุกเวอร์ชั่นมีการดาวน์โหลดไปใช้งานมากกว่า 100,000 ครั้ง
- มีชุมชนออนไลน์ร่วมกันพัฒนามากกว่า 240 ชุมชน
- ติดอันดับที่ 16 ของโครงการใน GitHub (ได้รับการโหวตดาวมากกว่า 18,000 ครั้ง)
- ปัจจุบันมีตัวเสริม (Extension) มากกว่า 439 extension และมีธีมให้เลือกใช้กว่า 75 Theme (โค้ชพลก็แอบเปลี่ยนเป็นแบบ Sublime เหมือนกันนะ)
- แปลเป็นภาษาท้องถิ่นไปแล้วกว่า 31 ภาษา
2. Adobe Brackets 1.0 และของใหม่
หากใครดูชุดวิดีโอสอนการใช้งาน Edge Code และ Bracket ที่โค้ชพลทำไว้จะรู้ว่า Bracket ตอนเปิดตัวจนถึงตอนนี้มีของเจ๋งๆ อย่าง
- Live Preview
- Quick Edit
- CSS Shape Editor
- และอื่นๆ อีกมากมาย
ในเวอร์ชั่นใหม่อย่าง 1.0 ก็ไม่น้อยหน้ารุ่นเปิดตัวแน่นอน นั่นคือ
Core Text Editor
อัพเดตความสามารถในส่วนของการแก้ไข code
- Multi-selection: เลือกแก้ไขได้ทีละหลายๆ บรรทัดพร้อมกัน เลือกโดยกดปุ่ม Ctrl (Windows) หรือ Cmd (MAC OS X) แล้วคลิกบรรทัดทีต้องการ
- Multi-editing: แก้ไขคำที่เหมือนกันใน code ได้หลายตัวในทีเดียว ให้เลือกคำที่ต้องการแล้วใช้ปุ่ม Ctrl+D (Windows) หรือ Cmd + D (Mac OS X)
- Split View: แบ่งหน้าจอโปรแกรม เปิดดูไฟล์มากกว่า 1 ไฟล์ได้ คือแนวนอน (Horizontal) และแนวตั้ง (Vertical)
- Custom Key Mapping: ตั้งปุ่มลัดเองได้ เช่นต้องการใช้ปุ่มลัดแบบเดียวกับ Sublime Text หรือ TextMate (ดูวิธีทำที่นี่)
และมีธีมขาว และดำมาให้เลือกตั้งแต่ติดตั้งโปรแกรม (อันนี้ผมชอบ ฮ่าๆ)
เขียนโค้ดเพื่อการออกแบบเว็บโดยเฉพาะ (Design-oriented Coding)
ฟีเจอร์นี้จะเน้นไปที่การอำนวยความสะดวกให้กับ
- Modern Web Designer
- Front-end Developer
เป้าหมายมีดังนี้ครับ
- สนับสนุนการแก้ไขและแสดงผล LESS และ SASS (ตอนนี้ทำผ่าน Extension)
- รองรับ CSS Lint (ตอนนี้ทำผ่าน Extension)
- รองรับ CSS Animation
- รองรับ CSS Shape (ตอนนี้ทำผ่าน Extension)
- รองรับบริการ Extract จาก Adobe Creative Cloud (อ่านต่อด้านล่าง)
3. Extract for Brackets: แกะไฟล์ Photoshop ให้เป็น Code!
Extract เป็นชื่อบริการออนไลน์ของ Adobe Creative Cloud ที่ช่วยเราแกะไฟล์ภาพ (Assets) และ Code (CSS) ออกมาจากไฟล์ Photoshop ได้ โดยตอนที่ผมเขียนบทความนี้อยู่ บริการนี้เชื่อมต่อเข้ากับการทำงานใน Creative Cloud ผ่านหน้าเว็บ และ Adobe Dreamweaver CC 2014.2 เรียบร้อยแล้ว
สำหรับ Extract for Brackets ก็เป็นความสามารถแบบเดียวกับที่กล่าวมาข้างต้น เพียงแต่สามารถใช้ใน Brackets โดยตรง โดยที่ไม่ต้องไปเปิด Adobe Dreamweaver CC นั่นเอง
โดยความสามารถของ Extract for Brackets เบื้องต้นมีดังนี้ครับ
- ดูขนาดความกว้างและสูง รวมถึงตำแหน่งของ Asset ใน Photoshop Layer (แปลงหน่วยเป็น px และ % ได้)
- ดูชื่อ font และ font style รวมถึง font formatting ในรูปแบบ CSS
- เลือก Layer 1 หรือหลายอัน ที่เป็นรูปภาพ เพื่อ export ออกมาเป็นไฟล์ภาพในงานได้ (ตั้งชื่อไฟล์ภาพได้ทันทีเลยด้วย ด้วย ด้วย)
เรียนวิธีใช้ Brackets ฟรี!
ใครสนใจใช้ Bracket แบบจริงๆ จังๆ ก็ไปเรียนกับโค้ชพลในหลักสูตรออนไลน์ได้จากปุ่มด้านล่างเลย