สำหรับ Developer แต่ละคน เวลาที่เขียนโค้ด มักจะมีปัญหาที่ทำให้การทำงานช้าลงแตกต่างกันออกไป อาจจะเป็นเพราะคิดไม่ออกบ้าง ภาษาไม่ถนัดบ้าง หรืออะไรต่างๆกันไป แต่ปัญหาสำหรับผมนั้นออกแนวแตกต่างออกไปจากชาวบ้านพอสมควร เพราะปัญหาหลักๆในการทำงานของผมมี 3 ข้อ หลักก็คือ
- จำ syntax ภาษาไม่ได้
- พิมพ์ช้า
- ขี้เกียจ
เรื่องจำ Syntax ของภาษาไม่ได้นั้นไม่ถือเป็นปัญหาใหญ่เท่าไหร่ สาเหตุจริงๆมันเกิดขึ้นเพราะว่าในชีวิตการทำงานของผมนั้น ในภาษาและ framework สลับกันไปๆมาๆ ค่อนข้างมาก (CakePHP, Ruby on Rails, Python, AngularJS, บลาๆๆๆ) เลยมีปัญหาเกิดการสับสนในบางครั้ง ข้อนี้แก้ไขได้ด้วยการใส่ความตั้งใจเข้าไป(?)
ปัญหาต่อไปก็คือการพิมพ์ช้า ซึ่งถือเป็นปัญหาระดับชาติ ขนาดมีคอมเล่นเกมมาตั้งแต่มัธยมก็ยังพิพม์ช้าอยู่เลย อันนี้คงแก้ปัญหาไม่ได้ แต่เราจะพยายามใช้ IDE เมพๆ อย่าง Sublime มาช่วยแก้ปัญหานี้
ข้อสุดท้ายที่สำคัญที่สุด คือความขี้เกียจนั่นเอง อันนี้น่าจะเป็นผลต่อเนื่องมาจากข้อ 2 คือแบบ พิมพ์ช้าไง มันเลยขี้เกียจพิมพ์ เลยขิเกียจทำงานไง ไม่เคยอ้างนะ ไม่เลย
การแก้ปัญหา
การแก้ปัญหาของผมนั้น เอาจริงๆคือหาอะไรมาช่วยให้ไม่ลืมและพิมพ์แทนเราได้(โหว) ซึ่งคิดว่าเป็นการแก้ปัญหาที่ตรงจุดที่สุดแน่ๆ เราจึงขอเสนอ Sublime Text 3 สุด เมพ ของ เรา นั่น เอง
Download + Install ให้เรียบร้อย เราจะพบกับโปรแกรมหน้าตาแบบนี้
หน้าจอดำๆแบบนี้ แค่ดูก็ฉลาดแล้ว (ถึงแม้ผมจะใช้กรอบจะสีชมพูหวานแหววไปหน่อยก็เถอะ) ก่อนอื่นมาถึงก็ให้ทำการ Save ไฟล์ไปก่อนเลย เพื่อให้โปรแกรมมันเลือก Syntax ให้ ในที่นี้ให้เซฟเป็น .html
โอเค ตอนนี้เรามี Syntax Highlight เรียบร้อยแล้ว ทีนี้ ลองพิมพ์โค้ดนี้ลงไป (ขอร้อง อย่า Copy นะ T-T)
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> |
คาดว่าแต่ละคนคงใช้เวลาในการพิมพ์แตกต่างกันไป เร็วบ้าง ช้าบ้าง แต่บทความนี้ มันเอาไว้สำหรับคนพิมพ์ช้าหนิ? แปลว่า Sublime มันต้องมีอะไรฉลาดๆให้เราสิ เพราะบทความนี้ มีไว้สำหรับการปัญหา 3 ข้อ ก็คือ 1. จำ Syntax ไม่ได้ 2. พิมพ์ช้า และ 3. ขี้เกียจ
ต่อไปนี้ จะเป็นการแก้ปัญหาง่ายๆ โดยใช้ Sublime ของเรานั่นเอง โดยเริ่มจาก ลบโค้ดทั้งหมดที่พิมพ์มาเมื่อกี้ออกให้หมด(!)
พิมพ์คำว่า html ลงไป
กด Tab บนคีบอร์ด
OMGFWTFLOLROLF!!!!!! จะเห็นว่าทุกอย่างที่เรานั่งพิมพ์เมื่อกี้ สามารถพิมพ์เสร็จได้ภายใน 5 ตัวอักษร (h + t + m + l + Tab) ตรงนี้ สามารถแก้ปัญหาเรื่องการพิมพ์ช้า และการลืม syntax (โดยเฉพาะลืมใส่ <!DOCTYPE html>) ได้ แต่ไม่สามารถแก้ปัญหาเรื่องความขี้เกียจได้ เพราะทำแบบนี้ไปเราก็ขี้เกียจอยู่ดี แต่งานเสร็จไง เราไม่แคร์
นอกจากนี้ cursor ของเรายังอยู่ที่แท็ก <title> พร้อมให้เราใส่ Title ไปได้เลย รวมทั้งเรายังสามารถกด Tab อีกครั้ง เพราะให้ cursor เข้าไปที่แท็ก <body> ต่อได้เลย อะไรจะสะดวกขนาดนี้
ลองใส่ข้อมูลเข้าไปเล็กน้อย (<p> ก็ใช้ p + [Tab] ได้นะ ถ้าจะขี้เกียจขนาดนั้น)
ที่นี้ ไอเรื่องของคนขี้ลืม syntax เนี่ย ลืมล้างโลกขนาดไหนก็คงไม่ลืมพวก <p> <div> อะไรอย่างนี้กันหรอก แต่ถ้าเป็นอะไรยาวๆ อย่างพวก link css, script อะไรแบบนี้หละ แน่นอน เราก็สามารถใช้ link + [Tab] และ script + [Tab] ได้เช่นกัน
เห้ย มันใช้ได้มากเลยนี่หว่า แก้ปัญหาการพิมพ์ช้ากับการขี้ลืมได้หมดจรดเลย ถึงจะยังแก้เรื่องความขี้เกียจไม่ได้ก็ตาม เอาจริงๆ ขี้เกียจกว่าเดิมแน่ๆ
อะไรที่มากกว่านี้
นอกจากจะใช้กับพวก html หรือเหล่าภาษาพื้นฐานที่ Sublime มีมาให้แล้ว Sublime เองยังสามารถลงพวก Package ตัวช่วยต่างๆได้ โดยเพื่อความง่าย เราจะลง Package Control กันก่อน
https://packagecontrol.io/installation
ทำตามลิงค์ข้างบนที่ให้ไป Restart Sublime ซักครั้ง จากนั้นเราจะมาทำอะไรที่โหดๆกันต่อไป
พอเปิด Sublime ขึ้นมาอีกรอบแล้ว ให้เราเข้าในงาน Package Control ซึ่งสามารถเข้าถึงได้โดยการกดคีย์ลัด Ctrl+Shift+P (จำไว้ ได้ใช้บ่อยมาก) แล้วพิมพ์คำว่า package install เข้าไป กด Enter แล้วเราจะเจอ Package มากมาย
ในที่นี้ เราจะลองใช้ตัวช่วย syntax (เรียกอีกอย่างว่า Snippet) ซึ่งในตอนนี้ เราอยากใช้ Bootstraps 3 มากๆ เพราะมันเจ๋งดี
ในช่องเลือก Package พิมพ์คำว่า Bootstraps 3 ลงไป และเลือก Package อันแรกสุดนี้
ทีนี้ใน Bootstraps 3 Snippet ของเรา มันมีอะไรบ้างละ อยากรู้ ให้กด Ctrl+Shift+P เหมือนเดิม แล้วลองเลื่อนๆดู หรือจะพิมพ์คำว่า bs3 ไปเพื่อเป็นการ Filter ก็ได้ สังเกตุว่า มีให้เลือกเยอะมากๆ (ในรูปลบพวก <link>, <script> ไปแล้ว)
ให้ทำการพิมพ์สิ่งที่อยู่ใน [[…]] ลงไป แล้วทำการกด tab เพื่อ generate code (ถ้าทำการคัดลอกโค้ดไป ให้ทำการลบ [[, ]] ออกให้หมด เหลือแต่ข้อความด้านใน แล้วกด [Tab] ได้เช่นกัน)
แต่ถ้าใครจำไอพวกนี้ไม่ได้ ก็ Ctrl+Shift+P เพื่อไล่หาไปได้เรื่อยๆเช่นกัน เยเย
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>My Site</title> [[bs3-cdn:css]] </head> <body> [[bs3-navbar:static-top]] [[bs3-jumbotron]] [[bs3-cdn:js]] </body> </html> |
จะได้โค้ดแบบนี้กันเลยทีเดียว
ปล. ตรงที่เป็น href=”//netdna…. src=”//code…. src=”//netdna…หากใช้การเปิดไฟล์ HTML ตรงๆ ไม่ได้ผ่าน Web Server ให้ใส่ http: เข้าไปหน้า // เช่น href=”http://netdna….
ถ้าลองเอาไปเปิดใน Web Browser หละ
เห้ย นี้มันสุดยอกมากๆเลยนะเนี่ย เว็บออกมาหน้าตาสวยงาม มีแท็บเมนูด้านบนเรียบร้อน แถมเอาจริงๆ เว็บมันเป็น Responsive ด้วยซ้ำนะเนี่ย ซึ่งถ้าสังเกตุดูดีๆแล้ว เราเพิ่งพิมพ์ไปไม่กี่ตัวเอง
|
1 2 3 4 5 |
html + [Tab] bs3-cdn:css + [Tab] bs3-navbar:static-top + [Tab] bs3-jumbotron + [Tab] bs3-cdn:js + [Tab] |
กับคำว่า My Site บน Title นอกจากนั้น เราไม่ได้พิมพ์อะไรเลย
สรุปแล้ว เราสามารถแก้ปัญหาในเรื่องของการจำ Syntax หรือ คำสั่งต่างๆไม่ได้เป็นอย่างดี เพราะเราสามารถกด Ctrl+Shift+P เพื่อส่องได้ นอกจากนี้ การพิมพ์ช้ายังไม่เป็นปัญหาอีกต่างหาก เพราะเราพิมพ์ไปไม่กี่ตัวเอง แต่ปัญหาเรื่องความขี้เกียจกลับเพิ่มพูน แต่ไม่เป็นไรมั้ง เพราะงานเราเสร็จไว แถมโค้ดก็ยังออกมามีคุณภาพอีกต่างหาก แถมบทความเรายังชื่อ “Sublime กับความขี้เกียจ” อีกด้วย ซึ่งมันก็เข้ากันดีมั้ง
ใครมีเทคนิคอะไร ก็สามารถแชร์ๆกันได้ Package ที่น่าสนในอื่นๆสำหรับ Sublime ก็ยังมีอีกมาก สามารถนำมาใช้เพื่อเพิ่มความขี้เกียจกันได้อีกเช่นกัน สำหรับวันนี้ ขอสวัสดี
[…] Sublime ขอแนะนำให้อ่านบทความที่แล้วก่อนนะครับ […]