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

การทำงานของ Queue นั้นไม่ซับซ้อนอะไรมาก คือ ใครมาก่อน ก็ได้ก่อน หรือ FIFO(First In First Out) ซึ่งหลายๆคนก็น่าจะได้เรียนกันมาแล้วในวิชา Data Structure ถ้านึกไม่ออกก็ลองนึกถึงตอนที่ไปต่อคิวตามหน้าร้านอาหารดังๆกันดู Queue นี้แหละที่จะเข้ามาแก้ปัญหาความไม่เป็นระเบียบ ของระบบที่มันไม่สมดุล อย่างเช่น ร้านอาหารดังๆ ที่มีคนอยากจะไปกินกันเยอะกว่า จำนวนโต๊ะที่สามารถให้บริการในเวลานั้นได้ ทำให้จะต้องมีคนที่จะไม่ได้รับบริการในเวลานั้นอยู่จำนวนหนึ่ง และก็อาจจะมีคนใหม่ๆ เข้ามาเพิ่มอีกเรื่อยๆ ทีนี้ลองนึกภาพดูกันว่าถ้าไม่มีการจัดคิว มันจะเกิดอะไรขึ้น เช่น มีคนรออยู่ที่หน้าร้าน 20 กว่าคน แล้วอยู่ๆพนักงานก็เดินออกมาเรียกคนที่พึ่งมาถึงเข้าไปรับบริการในร้านก่อนคนอื่นๆที่มารอก่อนหน้านั้น มันคงจะต้องมีดราม่าเกินขึ้นแน่ๆ ใช้ไหมละ ดังนั้นร้านอาหารดังๆเหล่านั้นก็เลยจะต้องมีระบบคิว โดยบางร้านก็ใช้วิธีจดชื่อใส่กระดาษธรรมดาๆ หรือบางร้านก็อาจจะมี App ให้ลูกค้าใช้งานได้สะดวกขึ้น ซึ่งก็แก้ปัญหาได้เหมือนๆกัน

Vue.js ใช้มาตรฐานการนับเวอร์ชั่นแบบ SemVer หรือว่า Semantic Versioning ซึ่งจะประกอบไปด้วยตัวเลข 3 ส่วนได้แก่ Major เลขนี้จะเปลี่ยนตอนมีการปรับปรุงครั้งใหญ่ๆ ที่เวอร์ชั่นใหม่จะทำให้ Code ที่เคยเขียนไว้ด้วยเวอร์ชั่นเก่าใช้งานไม่ได้ หรือว่าพังนั่นเอง ซึ่งตอนนี้ของ Vue.js อยู่ที่เวอร์ชั่น 2 Minor เลขนี้จะเปลี่ยนเมื่อมีการเพิ่ม Features ใหม่ๆมาให้เราได้ใช้กัน ซึ่งตอนนี้อยู่ที่ 2.3 Patch จะเปลี่ยนเมื่อมีการแก้ Bug ตอนนี้แก้มีแก้กันไป 3 รอบละ เลยอยู่ที่ 2.3.3

พอดีได้ไปเจอโปรแกรมทำ Interactive Prototype ตัวหนึ่งชื่อว่า ProtoPie ดูน่าสนใจดี…

vbuild: Install once, Build everywhere vbuild เป็นอีกหนึ่ง build tool ที่น่าสนใจมาก เพราะใช้งานได้ง่ายๆ ด้วยคอนเซ็ป “no config just build” ทำให้เราไม่ต้องไปยุ่งอะไรกับ webpack ให้ยุ่งยากเลย แถมไม่ต้องรอติดตั้ง dependency สำหรับการ build ให้เสียเวลาเหมือน vue-cli อีกด้วย มันจึงเหมาะมากๆที่จะเอามาขึ้น prototype เร็วๆ โดยไม่ต้องไปสนใจอะไรมาก “no config just build” การติดตั้ง vbuild สามารถติดตั้งผ่าน npm ได้เลย

ทีม Design ของหลายๆทีมคงจะเริ่มเปลี่ยนมาใช้ Sketch กันแล้ว ซึ่ง Workflow ของแต่ละทีมก็คงจะแตกต่างกันออกไป บ้างก็ให้ Designer เป็นคน Export ทุกอย่างออกมาแล้วส่งให้ Dev เอาไปใช้ หรือบางทีมก็อาจจะส่งไฟล์ Sketch ไปให้ Dev แกะเอาเอง ซึ่งที่ Sellsuki เราก็ใช้ Workflow แบบหลังนี้อยู่พักใหญ่ๆเลยทีเดียว ซึ่งก็จะมีปัญหาเล็กๆน้อยๆ ตลอดเวลา เช่น ใช้ Licence ที่ Share กันอยู่(ก็งบมันน้อย 555) ก็เลยต้องมาค่อยใส่ Licence Key ใหม่กันอยู่เรื่อยๆ ตอนที่โดนจับได้ แต่พอมาช่วงหลังๆนี้ Sketch เริ่มฉลาดขึ้น เริ่มเอา Key มา Share กันไม่ได้แล้ว T_T.. ก็เกิดปัญหาขึ้นมานะสิ…

มาเรียนรู้การใช้ Array Function ต่างๆเช่น map, reduce, filter ด้วยการลองเล่นกันดีกว่าไหม ตัวเว็บ Playground ถูกออกแบบด้วย concept ง่ายๆ คือ [Input] → [Process] → [Output] ฝั่งซ้ายจะเป็น Input ในที่นี้คือตัวแปร Array ต่างๆที่เราจะเอามาใช้ในการลองเล่น ตรงกลางคือ Process หรือ Code ที่เราจะให้มันทำงาน ซึ่งเตรียมตัวอย่างการใช้งาน Function ต่างๆไว้ให้แล้ว แต่ที่สำคัญคือ เราแก้ Code ตรงนี้ได้ตามสบายเลย อยากลองเล่นอะไรก็ได้ อยากรู้อะไรก็ลองเลย

รวมเทคนิคที่ทำให้โปรแกรมเมอร์ดูเท่และหล่อขึ้น 10 เท่า ต้องใช้ Editor สีดำๆ เพราะว่าสายตาคือสิ่งสำคัญของโปรแกรมเมอร์ การใช้ Editor สีดำจะทำให้ถนอมสายตาได้ และยังดูเท่ขึ้นอีกด้วย โดย Editor ที่นิยมกันในช่วงนี้ก็มี Sublime, Atom, VS Code แต่ถ้าจะเป็นขั้นเทพของจริงก็ต้องใช้ vim เท่านั้น

วันนี้จะมาแนะนำเครื่องมือที่จะทำให้การเขียนเว็บด้วย Vue.js ง่ายและสนุกขึ้นกัน เริ่มกันเลยดีกว่า 1. vue-cli vue-cli เป็นเครื่องมือที่ทุกคนที่ใช้ Vue.js จะขาดแทบไม่ได้เลย เพราะมันจะช่วยให้เราขึ้นโปรเจค Vue.js ได้ในไม่กี่คำสั่ง ก็พร้อมที่จะทำงานได้เลย $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev ตอนที่เรา init โปรเจคใหม่ขึ้นมานั้นเราสามารถเลือก Template ได้ด้วยว่าจะใช้ Template ไหน ซึ่งหลักๆที่นิยมกันก็จะมี browserify กับ webpack ซึ่งการเลือก Template นั้นก็ง่ายมากๆ แค่ระบุต่อท้ายคำสั่ง vue init ไปแค่นั้นเอง