Tags:
Node Thumbnail

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

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

No Description

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

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

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

No Description

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

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

No Description

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

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

$ apm install minimap

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

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

No Description

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

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

No Description

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

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

No Description

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

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

No Description

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

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

No Description

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

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

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

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

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

No Description

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

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

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

Get latest news from Blognone

Comments

By: sukoom2001
ContributorAndroidUbuntu
on 12 May 2014 - 12:59 #702867
sukoom2001's picture

แต่ผมลองบน ubuntu 14.04 ภาษาไทยใช้ได้ดีครับ
alt="ubuntu thai"

By: nuntawat
WriterAndroidWindowsIn Love
on 12 May 2014 - 13:08 #702871
nuntawat's picture
  • มีข้อหนึ่งสองข้อ
  • ภาพอยู่หลัง break
By: panurat2000
ContributorSymbianUbuntuIn Love
on 12 May 2014 - 13:46 #702882 Reply to:702871
panurat2000's picture

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

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

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

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

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

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

By: neizod
ContributorTraineeIn Love
on 12 May 2014 - 15:13 #702904 Reply to:702871
neizod's picture

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

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

By: nullzer0
AndroidUbuntu
on 12 May 2014 - 19:18 #702981 Reply to:702871
nullzer0's picture

Emcas => Emacs

By: nat3738
ContributorAndroidRed HatUbuntu
on 12 May 2014 - 16:14 #702927

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

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

By: gab
Windows PhoneAndroidWindows
on 14 May 2014 - 00:27 #703277 Reply to:702927
gab's picture

เท่าที่ได้ลองก็แสดงภาษาไทยได้โอเคดีนะ ใช้บน win 7 x64
ผมใช้ตัวที่ build ไว้จาก someguy123

By: shinejikids on 12 May 2014 - 19:34 #702987

ผมรู้สึกว่า font มันไม่ค่อยชัดอะครับ มันดูจางๆ

By: mr_tawan
ContributoriPhoneAndroidWindows
on 12 May 2014 - 20:48 #703002 Reply to:702987
mr_tawan's picture

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


  • 9tawan.net บล็อกส่วนตัวฮับ
By: LazarusSP1
ContributoriPhone
on 12 May 2014 - 23:48 #703051 Reply to:703002

ใช่ครับ MacOS กับ Linux ไม่มี Clear Text ครับ

By: mr_tawan
ContributoriPhoneAndroidWindows
on 13 May 2014 - 04:36 #703084 Reply to:703051
mr_tawan's picture

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

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

No Description

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

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


  • 9tawan.net บล็อกส่วนตัวฮับ
By: pitsanupotajan
iPhone
on 12 May 2014 - 23:47 #703050
pitsanupotajan's picture

ลองแล้วครับเปิดไฟล์ใหญ่ๆ ช้ากว่า sublime มากๆ อืดๆ

By: flackez on 14 May 2014 - 14:35 #703395

ณ ตอนนี้ยังอยู่กับ sublime text ต่อไป รอพัฒนามากกว่านี้หน่อย :3

By: aommyindy
AndroidWindows
on 17 January 2016 - 16:14 #876024
aommyindy's picture

Atom ไม่อยากให้ มันลบ บรรบันที่ว่างๆ เอง ตั้งยังไงอ่ะ ครับ