Productivity Tools 🚀 ที่เรา Developer 20Scoops CNX ใช้กัน
บทความนี้จะเป็นการรวบรวมของ Tools สำหรับ Developer บริษัท 20Scoops CNX ที่จำเป็นต้องมีติดไว้ในเครื่อง macOS X เพื่อเพิ่ม Productivity ของพวกเรา เพราะถ้าเราเราสามารถลดเวลาการทำงานได้เพียง 1 วินาที นอกจากจะเพิ่มกำไรให้บริษัทได้ ยังทำให้เหลือเวลามากพอสำหรับส่วนอื่น หรืออะไรก็ได้ที่เราอยากทำ เราเลยอยากมาแชร์ Tools ที่เราใช้งานจริงและรู้สึกว่ามันช่วยเราได้จริง ๆ และหวังว่าจะเป็นประโยชน์กับ Developer ผู้ต้องการความไวในสายงานเหมือนกัน 🤝
Utilities 🔧
สำหรับเครื่องมือที่เอาไว้ใช้ทั่วไปของพวกเราชาว Scooper ใน macOS X เพื่อช่วยให้เราสามารถ Reduce Time ในการทำงานได้ มีดังนี้
1. FlagTimes: เอาไว้สำหรับดูเวลาของเพื่อนร่วมงานของเราที่อยู่ Germany 🇩🇪 เพื่อให้ง่ายต่อการนัดหมาย
2. Rectangle: สำหรับ Window Management เพราะ Developer ที่นี่ชอบการทำงานแบบ Multi Tasking เป็นชีวิตจิตใจ (ทักษะนี้ไม่ได้มาง่าย ๆ นะ 😁)
3. Tunnelblick: แน่นอนล่ะ เราเอาไว้มุด เห้ยไม่ใช่ เรามีการทำ Local Server เพื่อเอาให้เราพัฒนาของเราได้ลองเล่นอะไรใหม่อยู่ตลอดเวลา ไม่ว่าจะเป็นการตั้ง Server, Proxy Location หรือ Tools ใหม่ ๆ ก็จัดไป “เจ็บแต่จบ” หมายถึงราคา Server นะครับ แต่จะเปิด Public เลยก็คงไม่ดี Security ต้องมาก่อน VPN มาเล่นดีกว่าเนอะ
4. Paste: เคยกันไหม Copy + Paste แล้วสลับไปมาจนเวียนหัวและทำให้เกิดผลเสียมากกว่าผลลัพธ์ที่ดี ฉะนั้นสาย Reference อย่างพวกเราไม่พลาดแน่นอน มันช่วยให้เราจัดการ Clipboard ได้ง่ายมาก Copied หลาย ๆ อันไว้ใช้ทีเดียวไปเลย
5. Contexts: สายเปิด Applications ทิ้งไว้อุ่นใจกว่า อย่าพลาดเพราะเราการันตีเลยว่าคุณจะไม่หงุดหงิดในการหา Recent App อีกต่อไป และอีกอย่างมันดูสะอาดตาดีด้วยนะ
6. Notion: สำหรับเครื่องมือที่เอาไว้ Note งานของตัวเองเพื่อที่จะสามารถกลับมาดูย้อนหลังได้ ก็มีเยอะแยะมากมายแต่ Requirements ของเราต้องสามารถรองรับกับทั้งสาวก Android และ iOS บน macOS X ก็ต้องสามารถทำงานได้ด้วยแถมยัง Sync ข้อมูลได้อีกต่างหาก Tool นี้ตอบโจทย์เราครับ มี Template ให้เลือกใช้หลายหลาย และ สามารถแชร์ Note ของเราให้เพื่อนได้อีก เอ้าทำ Present ได้อีกด้วย แถมฟรีนะไม่ชอบหรอ 😆
แต่หากใครใช้ iPhone + macOS X ผมขอแนะนำ Bear App นะ (ชอบเป็นการส่วนตัว) เพราะเจ้าตัว Notion เนี่ยเราอาจจะต้องมี Skill ในการเขียนไฟล์ Markdown นิดหน่อยเพื่อความไว แต่นั่นก็ไม่ใช่ปัญหาเท่าไรเพราะ Editor เขาก็สามารถช่วยให้เราจัด Format ได้ดีอยู่แล้ว
7. Proxyman: ด้วยงานของเรามีการทดสอบ Application แบบ Realtime ค่อนข้างบ่อยทำให้การทดสอบด้วยการ Capture Response เพื่อทำการเปลี่ยนแปลงนั้นเป็นเรื่องที่ง่ายขึ้นด้วยเครื่องมือนี้
8. 1Password: เคยกันไหม? ลืม Password หรือไม่ก็หาทั้งวันสุดท้ายก็หาไม่เจอ ว่าตัวเองหรือทีมงานเอาไปเก็บไว้ที่ไหน เราสามารถลดความเสี่ยงลงได้เพราะเจ้า Tool นี้ช่วยเราได้ สมมุตินะ ว่าเราลืม Password ของ Account AWS ล่ะ ชีวิตแทบพังทลายเลยนะ ฮ่า ฮ่า ฮ่า “เสียน้อยเสียยาก เสียมากเสียง่าย” ✌️
9. Octotree: เป็น Tool ที่ผมค่อนข้างเชียร์เป็นการส่วนตัว เพราะการที่เราต้อง Review, Verify หรือ Explore Code กลายเป็นเรื่องที่ทำน่าทำขึ้นมาทันทีเพราะเราสามารถเข้าถึง Code ได้สะดวกขึ้นนั่นเอง ลองมาใช้กันเถอะ
10. Spotify: เสียงดนตรีสามารถปรับอารมณ์ในการทำงาน เสริมสร้างบรรยากาศ สามารถทำให้เราผ่อนคลาย สนุกสนาน หรือฮึกเหิมได้ตามท่วงทำนองที่เลือก ดังนั้นพวกเรา Scooper จึงไม่พลาดในการใช้ Spotify ในการฟังเพลงคุณภาพสูงระหว่างทำงาน แถมบางครั้งมีแอบแซวหูฟังเพื่อนข้าง ๆ ด้วย แหม! ยี่ห้อไหนดีก็ต้องแบ่งปันกันเนอะ 🎧
เอ๊ะแล้ว Tools ที่ใช้ในการ Communicate และเอาไว้จัดการงานต่าง ๆ ล่ะ พวกเราใช้ อะไร คำตอบ พวกเราใช้ Slack, Asana และ Zoom ในการดำรงชีวิตในทุก ๆ วัน 💪
Command Line Tools 🥷
ในหัวข้อนี้เป็นหัวข้อที่สนุกเอามาก ๆ เพราะทีมของเรามี Attitude ที่จะพยายามใช้ Command Line ในการทำงานเป็นหลัก จึงมีการแชร์ข้อมูลกันอยู่ตลอดเวลา
1. iterm2: กรณี Terminal ที่ Out of Box มากับ macOS X นั้นยังไม่ตอบโจทย์ของเราได้เพราะเจ้าตัว iterm2 สามารถปรับแต่งได้มากกว่า เช่น การแบ่ง Arguments ของ Window, Theme, Front และ อื่น ๆ ไม่เชื่อก็ลองใช้ดูแล้วจะติดใจ
2. Oh My Zsh: เป็นส่วนเสริมที่จะช่วยปลดล็อคขีดความสามาารถของ iterm2 หรือ Terminal ไปอีกเพราะมี Plugins และ Theme แยกออกมาอีกมากมาย เพราะเป็น Open Source จึงมี Community ที่คอยสร้าง Plugins ดี ๆ ออกมาให้เราได้ใช้อยู่ตลอดเวลา และที่สำคัญแต่ละ Plugin ช่วยลดระยะเวลาการทำงานแน่นอน
Recommended Plugins 🎉
4. FiraCode Font: สาย Coding เรามีการใช้สัญลักษณ์ในการเขียน Code และการเลือก Font ที่สามารถทำให้เราแสกนหาและทำความเข้าใจกับเครื่องหมายต่าง ๆ ได้อย่างรวดเร็ว เช่น ->, >=, <=,:= หรือ === ให้กลายมาเป็นอักขระเดียว ก็จะทำให้เราสามารถมองและทำความเข้าใจได้ง่ายขึ้น
NOTE: หากใครลงแล้วไม่เห็นมีการเปลี่ยนแปลงเลยอย่าลืมไปเปลี่ยน Font และเปิดใช้งานโหมด
ligaturesของ Text Editor หรือ IDE ที่ใช้อยู่ด้วยนะครับ
หากใครยังไม่ถูกยังกับ FiraCode Font ผมก็มีอีกตัวนึงมาแนะนำก็คือ cascadia-code สำหรับ Fanboy ของ Microsoft ไม่ควรอย่าพลาด Font นี้เด็ดขาดไม่งั้นบาป 🤦🏼♂️
3. GitHub CLI: ปัญหาที่ Programmer คงเจออยู่ไม่น้อยคือเมื่อทำงานเสร็จต้อง Commit และ Push สิ่งเราทำไปขึ้นบน Repository และทำการ Pull Request (PR) ขั้นตอนนี้ทำให้ต้องละมือออกจาก Keyboard แต่เครื่องมันติดแล้ว … พิมพ์กำลังมันส์ เรามาแก้ปัญหานี้ด้วยการใช้ Command-Line ให้หมดไม่ว่าจะ Commit และ Push และทำการ PR ผ่านเจ้า Tool ตัวนี้เลย
Example Command:gh pr create --base development // PR into branch development
gh repo view --web // open repository on browser via CLI
gh pr view --web // open PR of current branch on browser via CLI
4. The Fuck: หากใครที่ใช้ Command-Line ในการทำงานเป็นหลักและหลายครั้งเราจะต้องเจอปัญหาเดียวกันคือ พิมพ์ผิด เพราะอาจจะด้วยเร่งรีบ และบางที่ก็ลืมบ้างแหละใครจะไปจำได้หมด Tool ตัวนี้จะช่วย Correct ด้วยการ Suggest คำสั่งที่ใกล้เคียสำหรับคำสั่งก่อนหน้าให้เรา เช่น docker exce -it mongo bash ในกรณีที่เราพิมพ์เราไม่ต้องเริ่มใหม่แค่พิมพ์คำว่า “fuck” เจ้าตัวนี้ก็จะ Suggest คำสั่งที่ถูกต้องให้เราเป็น docker exec -it mongo bash 👏
5. Scrcpy: หากใครกำลังหา Tool สำหรับการเอาหน้าจอมือถือ Android ขึ้นมาบน Laptop ละก็เราขอนำเสนอเลยจากค่าย Genymotion เจ้าตัวนี้ทำให้เราสามารถทดสอบงานกับ Device จริงได้ผ่าน Laptop เลย หรือจะเอาไว้นำเสนองานกับลูกค้าก็ได้ ทำงานการทำงานของเรา Smooth ขึ้นมาทันที
6. VI Syntax Highlighting: สำหรับสาย VI คงไม่พลาดอยู่แล้วสำหรับการตั้งค่า ให้นี้แต่ถ้าหากใครยังไม่ได้ทำก็สามารถตั้งค่าด้วยคำสั่งนี้ผ่าน Command-Line ได้เลย มันจะทำให้เราอ่าน Syntax ได้ง่ายขึ้นในการใช้ VI Editor เพื่อลดข้อผิดพลาดในการพิมพ์ได้
echo "syntax on" >> ~/.vimrc7. Mac Cleanup: สำหรับคนที่ใช้ macOS X และต้องการที่จะ Clear ข้อมูล Cache ต่าง ๆ ก็สามารถใช้ Tool ตัวนี้ผ่าน Command-Line ได้เลย เพราะบางที่เราก็ไม่รู้ ว่าจะต้องไปลบไหนบ้าง ลบไปแล้วพังทำไง ผลก็คือทำให้พื้นที่การใช้งานเครื่องของเราอาจจะเหลือน้อย จนทำอะไรไม่ได้เลย สุดท้ายลบมันให้หมดแล้วลงใหม่ ลองหันมาใช้เจ้าตัวนี้ดู อาจจะช่วยคุณได้ 🙌
VS Code Extensions 👑
พวกเราชาว Scooper จะใช้ VS Code ที่เป็น Text Editor ในการ Coding และการที่เรามีเครื่องมือที่ช่วยให้เราสามารถทำงานกับ VS Code ได้ไว และมีประสิทธิภาพมากเท่าไรก็ย่อมดีมากเท่านั้น เราจึงจะมาแบ่งปัน Extension ที่เราใช้งานจริงว่ามีอะไรมั้ง
1. Auto Import: ใครที่ใช้ Typescript ก็คงจะต้องมีไว้ติดเครื่องเอาไว้ เพราะจะช่วยให้เราไม่ต้องมาใส่ Import File เอง แต่ต้องดูกันดี ๆ หน่อยไม่งั้นผิด
2. Auto Rename Tag: สำหรับ Frontend ต้องมีไว้ไม่งั้นบาป เพราะสมมุติถ้าเรามี Component ที่มีขนาดหน่อย (ดง div) แล้วจำเป็นต้องเปลี่ยน Wrapper อาจจะต้อง Scroll ลงมายาวกันหน่อย ไม่ทันใจวัยรุ่นเท่าไร ตัวนี้จะช่วยแก้ปัญหาได้
3. Bracket Pair Colorizer 2: ปัญหา Classic เลยกับ Bracket ไม่ครบแล้ว Error แต่ Error อะไรไม่รู้หาทั้งวัน ก็หาไม่เจอ ก็เลยลบให้หมดแล้วทำใหม่ดีกว่า เพราะปัญหานี้มันคาดไม่ถึงจริง ๆ กว่าจะรู้ตัวอีกทีก็เผลอใจไปไกลพอสมควร เรามาแก้ปัญหานี้ไปด้วยกันกับเจ้า Exstensions นี้เลย
4. EditorConfig for VS Code: ถ้าหากการทำงานเป็นทีมนั้นสำคัญอย่างไร เราก็ควรจะมี Code Format หรือที่เหมือนกันใช่ไหมไม่งั้นคนหนึ่งจัด Indent ที่ 4 แต่อีกคนกลับไม่ชอบ ทำให้การ Commit แต่ละที ติด “fixed indent” ตลอด แต่การพูดคุยเพื่อทำการตกลงกัน ก็อาจจะลืมกันได้ งั้น หันมาใช้เจ้าตัวนี้ดีกว่า ทำไฟล์ Config ติดไปกับ Project ไปเลยจะได้ไม่ต้องมานั่งเถียงกัน
5. i18N Ally: สำหรับใครที่ทำ Web Application ให้ Support ได้หลายภาษาก็คงเคยใช้ package i18N กันอยู่แล้ว แต่พอจะดูว่าคำนี้ในภาษาอื่นล่ะ เราก็ต้องจำ key เอาไว้แล้วไปหาในไฟล์นั้น ๆ ใช่ไหม นั่นอาจจะทำให้การทำงานของเราไม่ Smooth เท่าที่ใจต้องการ แต่เจ้าตัวนี้จะเข้ามาให้การทำงานของเรา Smooth ขึ้น เพียงแค่เอาเมาส์ไป Hover ก็จะขึ้น Popover มาให้เราดูง่าย ๆ ว่าแต่ละภาษาเป็นคำว่าอะไร 😎
6. IntelliSense for CSS class names in HTML: เราก็เป็นคนนึงนะ ที่ไม่สามารถจำ Property ของ CSS ได้ทั้งหมด หรืออะไรที่ใช้บ่อย ๆ ก็มีลืมก็มี แต่บริษัทเราก็มีคนที่จำได้แม่น ๆ ก็มีนะ เพราะถ้าจำได้ก็จะสามารถพิมพ์ได้ไวขึ้น แสดงว่างานของเราก็จะไวตาม แต่ก็อย่างว่าแหละมันมีเยอะเหลือเกิน เราเลยจำเป็นจะต้องมีตัวช่วยหน่อย และเจ้าตัวนี้แหละที่ช่วยเรา เพราะมันทำการแนะนำ Class CSS ให้เรา
7. Prettier — Code formatter: เหตุผลก็คงจะเหมือนกับข้อที่ 4 (EditorConfig for VS Code) แต่เจ้า Prettier จะสามารถกำหนด Ruleset ได้และมีระบบ Plugins ที่เอา Integrate กับ Lint ของแต่ละภาษาได้อีกด้วยทำให้ Code ของเราเป็นระบบระเบียบมากขึ้น ดังนั้นเราจึงพลาดไม่ได้ที่จะมีติดเครื่องไว้ แถมยังไปตรวจสอบก่อน Commit ได้อีกด้วยลดปัญหา Code format ที่ไม่ตรงกันสักทีลงไปได้
8. Tailwind CSS IntelliSense: สำหรับ Extension นี้จะช่วย Suggest Class ของ Tailwind CSS ให้เราสามารถทำงานได้ไวขึ้น เพราะไม่ว่าจะเป็น Bootstrap, Antd หรือ CSS Framwork ตัวอื่น ๆ ก็จะมี Class System เป็นของตัวเอง เราจึงจำเป็นที่จะต้องจำ เพื่อที่จะนำมาใช้ได้อย่างรวดเร็ว แต่ถ้ามีตัวช่วยก็น่าจะดีกว่า
9. vscode-styled-components: ถ้าหากใครใช้ Style Components ใน Project อยู่ เจ้าตัว Extenstion นี้ก็จะช่วยให้เราสามารถลดข้อผิดพลาดที่เกี่ยวกับ Syntax ในการเขียน Style Components ได้ เพราะมันจะช่วย Highlight ไว้ถ้ามีคำสั่งไหนที่ไม่ถูกเราก็จะสามารถรู้ได้เลย
10. Thunder Client: หากใครที่ใช้ Postman หรือตัวอื่น ๆ ในการทดสอบ APIs อยู่เราแนะนำให้ลองลง Extension นี้ดู เพราะมันจะทำให้เราไม่เสียเวลาในการสลับไปมาระหว่าง Application ทำให้เราสามารถ Focus อยู่ที่เดียว การใช้งานแรก ๆ ก็อาจจะมี งง นิดหน่อย เพราะต้องมีการปรับตัวกับ UI ใหม่แต่พอใช้ไปสักพักอาการน่าจะดีถึงขั้นติดใจ 😀
11. Code Spell Checker: เราเป็นคนนึงที่พยายามฝึกและใช้ภาษาอังกฤษในทุก ๆ วัน แต่ก็อาจจะไม่ดีพอ และในการ Coding เราก็ไม่อยากจะให้คนในทีมไม่เข้าใจในสิ่งที่เราจะสื่อสารออกไป การที่มีตัวช่วยสำหรับการตรวจสอบ Spelling ของตัวแปร หรือ Function name ก็เป็นตัวช่วยที่เราเลือกใช้ เพราะเราจะได้ฝึกภาษาในทุก ๆ ทีของการทำงานของเราไปในตัวไปเลย
12. Better Comments: เราเป็นคนที่เชื่อว่าการเขียน Code ให้เป็น Self Document นั้นทำได้ เพื่อให้สามารถลดเอกสารบางอย่างที่ไม่จำเป็นลง และทำให้คนที่มาต่อ Code หรือ Reviewer ทำความเข้าใจได้ง่ายที่สุด แต่ในบางครั้ง Logic ที่เขียนลงไปบวกกับเวลาที่มีอยู่ ณ เวลานั้น อาจจะทำให้เขาเข้าใจยาก ถึงขั้นต้องกุมขมับหรือไม่ก็โชว์นิ้วกลางหน้าคอม วิธีแก้ เรามาเขียนคำอธิบายลงไปไปเลยดีกว่าว่า Function นี้ทำอะไรบางรับ Parameter อะไร เอาให้พอสังเขปนะไม่งั้นไม่ท้าทาย ซึ่งเจ้าตัว Extension นี้ ก็จะช่วยให้การเขียนและอ่าน Comment ได้ง่ายขึ้น
13. Material Icon Theme: เจ้าตัวนี้ก็เป็น Extension ที่ช่วยเพิ่มสีสันของ VS Code ให้มีความน่าสนใจมากขึ้น แต่ก็มีข้อดีอื่น ๆ ที่ทุกคนอาจจะมองข้ามไปก็คือ มันทำให้เรากวาดสายตาในการหาไฟล์ได้เร็วขึ้นทำให้ไวต่อการเข้าถึง นั้นก็แปลว่าช่วยลดเวลาของการทำงานไปได้เช่นกัน 👍
IDE Plugins 🎨
สำหรับใครที่ชอบใช้งาน IDE มากกว่า Text Editor ก็คงนี้ไม่พ้นค่าย IntelliJ IDEA เราคิดว่าอย่างนั้นนะ ส่วนตัวเรามองว่า IDE ครบเครื่องจาก Out of Box อยู่แล้ว เลยไม่จำเป็นต้องลงอะไรเพิ่มเติมแต่ก็มีอยู่สองตัวที่อยากมาแชร์ให้ทุกคน
1. Toolbox: เป็น Application สำหรับเอาไว้จัดการ IDEs ของเรา เพราะบางเราอาจจะจำเป็นที่ต้องลง IDE หลายตัวเช่น IntelliJ IDEA, WebStorm และ Android Studio สำหรับสายโหด ต้องมีเจ้าตัวนี้ไว้ เพราะเขาจะจัดการรวบรวมไว้ที่เดียว และเรื่อง Versioning ของ IDE ได้อย่างเป็นระเบียบและง่ายต่อการเรียกใช้
2. Nyan Progress Bar: ไม่ต้องคิดมากเลย ต้องลง นี้คือคำตอบ เพราะมันจะช่วย ให้การ Coding เป็นไปอย่างรวดเร็วและไม่มี Bug ล้อเล่นนะ มันจะทำให้ IDE ของเรามีสีสันอาจจะช่วยในเรื่องของ Mood and Tone ในการทำงานของเรา เอาใจสำหรับสายรักแมว 😻 🌈
In Summary
เป็นยังไงกันบ้างกับ Productivity Tools ที่เรานำมาแชร์ให้กับทุกคน บางตัวอาจจะยังไม่ตอบโจทย์อยู่ก็ได้ แน่นอน เพราะเราอาจจะมีบริบทที่แตกต่างกันออกไป และที่เรานำเอามาเสนอก็ยังไม่หมด เนื่องจากเรายังไม่ได้หยิบ Extensions หรือ Tools บางตัวที่นำมาใช้ในทางเฉพาะกับ Programming Language หรือ Framwork นั้น ๆ ถ้าหยิบมานำเสนอมันจะเจาะจงเกินไป และบทความมันอาจจะยาวไปหน่อย
แต่แน่นอน Tools เหล่านี้เราได้พิสูจน์จากประสบการณ์ในการใช้งานจริงของพวกเรามาแล้ว มันช่วยทำให้ Productivity ดีขึ้น หากใครมี Tools หรือ Extensions อะไรดี ๆ ก็สามารถแชร์กันได้ นะ เรายินดีมาก โดยสามารถโพสต์ใต้บทความนี้ได้เลย เพราะเราอยากจะให้คนได้เห็นบทความนี้ได้นำไปใช้งาน และถ้ามันสามารถช่วยเขาได้ก็คงเป็นประโยชน์ไม่น้อยเลย Get and Give 🙏
