Open Source

Atom เป็นโปรแกรมแก้ไขข้อความสุดล้ำจาก GitHub หลังจากเปิดซอร์ซ และได้นักพัฒนาจาก webupd8team สร้างไฟล์ไบนารีบน Ubuntu ไว้ให้ ผมก็ได้ฤกษ์ทดลองใช้งานและจะขอเขียนรีวิวสั้นๆ เกี่ยวกับว่าที่ผู้ท้าชิงตำแหน่งสุดยอดโปรแกรมแก้ไขข้อความจากแชมป์เก่าอย่าง vi และ Emacs ตัวนี้ครับ

หน้าตาโปรแกรมในเสี้ยววินาทีแรกที่เห็น หลายคนคงนึกไปถึง Sublime Text อย่างแน่นอน ซึ่งก็อาจนับได้ว่าเป็นแรงบันดาลใจอย่างแรงกล้าเลยทีเดียว เพราะเมื่อลองกดปุ่ม ctrl+shift+p ก็จะมีเมนูอัจฉริยะแบบพิมพ์ค้นหา (ตัวโปรแกรมเรียกความสามารถนี้ว่า Command Palette) โผล่ขึ้นมาเช่นเดียวกันอย่างกับแกะเลยครับ (ฮาาา)

ภาพ 1 หน้าตาโปรแกรมพร้อมข้อความต้อนรับเมื่อเปิดครั้งแรก

อย่างไรก็ตาม ผมพบว่าด้วยความที่ Atom เติบโตมาภายใต้ร่มเงาของ GitHub ทำให้มันได้รับความสามารถเฉพาะตัวอันโดดเด่น 2 อย่างติดมาด้วย นั่นคือ

  1. ความสามารถในการทำพรีวิว Markdown แบบสดๆ ซึ่ง Markdown ตัวนี้เป็นแบบที่ถูกปรับแต่งเพิ่มความสามารถโดย GitHub เองอีก (มีชื่อเรียกว่า GitHub Flavored Markdown) มันถูกเคลมว่าเหมาะสำหรับการทำเอกสารประกอบโปรแกรมอย่างยิ่งยวด ด้วยความสามารถที่เพิ่มขึ้นมาอย่างการทำตาราง และการเน้นสีโค้ดของโปรแกรม

ภาพ 2 การทำพรีวิว Markdown แบบสดๆ

  1. มีการเน้นบรรทัดที่ถูกแก้ไขจากการจดจำ (commit) ใน Git ครั้งก่อนอย่างชัดเจน ที่ด้านหน้าของแต่ละบรรทัดจะมีสีเขียว (มีข้อความเพิ่มเติม) สีแดง (ลบข้อความทิ้ง) หรือสีน้ำตาล (แก้ไขข้อความบางส่วน) กำกับไว้ และบอกชื่อกิ่งก้าน (branch) กำกับไว้ที่มุมล่างขวา พร้อมทั้งสรุปว่ามีการแก้ไขไปแล้วกี่บรรทัด

ภาพ 3 บรรทัดที่ถูกแก้ไขจากการจดจำที่ถูกเน้นสีด้านหน้าบรรทัด

ถึงกระนั้น ตัว Atom เพียวๆ ก็ยังขาดความสามารถไปหลายอย่าง เช่น การแสดงแผนที่ย่อ (minimap) แบบเดียวกับ Sublime Text ซึ่งแก้ไขได้ง่ายๆ เพียงแค่ติดตั้งแพ็คเกจเพิ่มเติมลงไป โดยสามารถทำผ่านคอมมานด์ไลน์ได้ดังนี้

$ apm install minimap

เรียบร้อยก็ปิดแล้วเปิด Atom ใหม่ เพื่อให้แพ็คเกจที่เพิ่งติดตั้งถูกโหลดขึ้นมามาใช้งาน

ส่วนใครที่กลัวหน้าต่างดำๆ พร้อมการพิมพ์คำสั่งยั้วเยี้ย ก็สามารถลงแพ็คเกจได้ผ่านตัวโปรแกรมโดยเปิด Settings เข้าไปที่ Packages (หรือกด ctrl+shift+p setting package) แล้วค้นหาแพ็คเกจมาลงเพิ่มได้ตามใจชอบ วิธีนี้เมื่อลงเสร็จแล้ว แพ็คเกจจะถูกโหลดขึ้นมาใช้งานทันที ไม่จำเป็นต้องปิดโปรแกรมแล้วเริ่มใหม่ด้วยครับ

ภาพ 4 ติดตั้งแพ็คเกจผ่านตัวโปรแกรมเลยก็ได้

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

ภาพ 5 หน้าต่างแสดงรายละเอียดแพ็คเกจ Vim Mode

ด้านธีมนั้นมี 2 แบบหลักๆ คือ UI (สีสันหน้าต่างโดยรวม) กับ syntax (สีโค้ดโปรแกรม) ซึ่งถ้าหากว่าธีมที่มีให้ยังน้อยไป ก็สามารถลงธีมเพิ่มเติมได้ (เป็นแพ็คเกจอีกเช่นกัน)

ภาพ 6 หน้าต่างเลือกธีมและติดตั้งเพิ่มเติม

หรือถ้าหากสีสันที่มีให้เลือกยังไม่ถูกใจอีก ก็สามารถแก้ไขสีธีมได้เอง โดยอาจเริ่มจากหาจากธีมที่ต้องการแก้ผ่านช่อง Filter packages ด้านซ้ายมือ แล้วเลือก Open in Atom หลังจากนั้นก็ลงมือแก้ไขไฟล์ LESS (เป็น CSS แบบพัฒนาความสามารถให้ตั้งตัวแปร/สร้างคลาสได้) ตัวอย่างนี้ผมอาศัยความช่วยเหลือจากแพ็คเกจ Color Picker ในการเลือกสีอีกทีหนึ่ง

ภาพ 7 แก้ไขสีธีมผ่าน Color Picker

Merge Conflicts เป็นอีกแพ็คเกจอีกหนึ่งที่น่าสนใจ มันทำหน้าที่เพียงแค่เน้นส่วนที่ Git ควบรวมกิ่งก้าน (merge branch) แล้วเกิดข้อขัดแย้ง (conflict) ให้เด่นขึ้นมาเพื่อการเปรียบเทียบที่ง่ายขึ้น พร้อมทั้งตัวเลือกว่าจะแก้ไขข้อขัดแย้งนี้ไปในทางไหน และเตือนว่ายังเหลือข้อขัดแย้งใดที่ยังไม่ได้แก้ไขอีกบ้างในไฟล์อื่น

ภาพ 8 ดูข้อขัดแย้งจากการควบรวมกิ่งก้านด้วย Merge Conflicts

ทั้งนี้ หากแพ็คเกจที่มีให้เลือกยังไม่เจ๋งพอ ธีมที่มีอยู่ก็สีงั้นๆ อยากจะพัฒนาของใหม่มาใช้เองแต่ต้น ก็สร้างแพ็คเกจ/ธีมเปล่าๆ ได้ผ่านคำสั่ง

$ apm init --package my-command
$ apm init --theme my-style

ภาษาที่ใช้สำหรับพัฒนาแพ็คเกจคือ CoffeeScript ครับ

สุดท้ายนี้อย่าลืมว่า Atom เป็นโปรแกรมที่รันบน Node.js แล้วแสดงผลผ่าน Chrome อีกที ดังนั้นหากเกิดข้อผิดพลาดขึ้น ก็อย่าได้ตกใจไปถ้าจะมีหน้าต่าง Inspect Element ที่แสนจะคุ้นเคยโผล่มาเช่นนี้

ภาพ 9 หน้าต่าง Inspect Element ภายในโปรแกรม Atom

เนื่องจากโปรแกรมยังไม่เสร็จดี (และจากสไตล์โปรแกรมยุคนี้ที่ชอบพัฒนาต่อเติมกันไปเรื่อยๆ ไม่มีวันเสร็จ) เจอแบบนี้แล้วก็อย่าลืมกดไปที่แท็บ Console แล้วจดข้อความแจ้งข้อผิดพลาดไปบอกนักพัฒนาที่หน้าแจ้งบั๊กของโครงการด้วยนะครับ

ปล. ใน build ที่ผมรีวิวนี้ ภาษาไทยบน Atom ยังใช้งานไม่ได้ครับ

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

ถึงกระนั้น ตัว Atom เพียวๆ ก็ยังขาดความสามารถไปหลายอย่าง เช่น การแสดงแผนที่ย่อ (minimap) แบบเดียวกับ Sublime Text ซึ่งแก้ไขได้ไม่ง่ายๆ เพียงแค่ติดตั้งแพ็คเกจเพิ่มเติมลงไป

ซึ่งแก้ไขได้ไม่ง่ายๆ ?

ส่วนใครที่กลัวหน้าต่างดำๆ พร้อมการพิมพ์คำสั่งยั๊วเยี๊ย

ยั๊วเยี๊ย => ยั้วเยี้ย

โดยอาจเริ่มจากหาจากธีมที่ต้องการแก้ผ่านช่อง Filter packages ด้านซ้ายมือ แล้วเลือก Open in Atom หลังจากก็ลงมือแก้ไขไฟล์ LESS

หลังจากก็ลงมือ ?

ข้อ 1 ซ้ำ 2 รอบเพราะพยายามจัดข้อความไว้กลางหน้าแล้ว Markdown ตีความเพี้ยนครับ ตอนนี้เป็นไปใช้ bullet list แทนแล้ว

ข้ออื่นเก็บหมดแล้วนะครับ

หวังอย่างเดียว อยากให้ภาษาไทยบยวินโดวส์โอเค

ตอนนี้บนลินุกซ์มีความสุขดีกับ vim

น่าจะเป็นตัววาดฟอนท์ของระบบปฎิบัติการณ์นะครับ ? (ปรกติบน Linux กับ OSX จะดูไม่คมเท่า Windows แต่ Windows จะแสดงผลผิดเพี้ยนมากกว่า)

ไม่ใช่ครับ Sub-Pixel Antialiasing ตอนนี้มีทุกเจ้า (นาน) แล้วครับ

ระบบวาดตัวหนังสือบน Windows จะใช้ Hinting เด่นกว่าเจ้าอื่น ๆ คือมันจะปัดลง Grid หมด ทำให้ตัวหนังสือดูบาง ๆ คม ๆ ซึ่งอ่านได้ง่ายแต่จะอาจจะมีรูปร่างบิดเบี้ยวได้กับหลาย ๆ Font โดยเฉพาะฟอนท์ที่ตัวบาง ๆ ที่ขนาดใหญ่ ๆ (เช่นที่ใช้ใน Metro App ครับ)

บาง OS ปิด Hinting ออกหมดเลยครับ เช่น iOS ที่มีความหนาแน่นของพิกเซลสูง ๆ เพราะว่าพอมีความหนาแน่นสูง ๆ แล้วก็ไม่มีความจำเป็นครับ ตัวหนังสือวาดออกมาสวยอยู่แล้ว แถมมีความถูกต้องมากกว่า

ทั้ง ๆ นี้ชอบแบบไหนแล้วแต่คนจะชอบครับ บางคนก็ชอบคม ๆ บางคนก็ชอบนุ่ม ๆ บน Linux นี่ปรับตั้งค่าเองได้ละเอียดด้วย