COOL IT IDEAS AND STUFF

See the original english version Click here!

Front-end Development เป็นสาขาที่น่าตื่นเต้นและมีการพัฒนาอย่างต่อเนื่อง แม้ว่ามันจะน่าตื่นเต้นแค่ไหน แต่หากเราไม่มี Tools ที่ช่วยในการทำงาน ก็คงทำให้ความน่าตื่นเต้นลดลง และบทความนี้ก็เป็น 5 Tools ที่จำเป็นต่อการทำงานของ Front-End Developer

1. GitHub Codespace

GitHub Codespace เป็น Development Tool ที่จัดเตรียม Environment แบบบูรณาการและไร้ขอบเขตเพื่อการ Write, Run, Debug และ Deploy Code โดยตรงใน Browser ของคุณ Codespace สามารถเชื่อมต่อกับ Repositories ของคุณ ทำให้สามารถ Clone และแก้ไข Codebase ได้ง่ายใน VS Code Editor ที่กำหนดค่าไว้ล่วงหน้า ด้วยเหตุนี้ มันจึงขจัดความจำเป็นในการตั้งค่า Environment ภายในเครื่อง Local และเพิ่มความสามารถในการเริ่มเขียน Code ได้ทันทีบน Repository ที่ Clone ขึ้นใหม่

เนื่องจากมันถูกสร้างขึ้นบน Visual Studio Code มันจึงมีความสามารถทั้งหมดของ VS Code เช่น IntelliSense, Live Share และ Extensions หลายพันรายการ เพื่อปรับปรุง Development Workflow ของคุณ นอกจากนี้ จากข้อเท็จจริงที่ว่ามันใช้ระบบ Cloud นั้น หมายความว่าคุณสามารถทำงานใน Projects ของคุณได้จากสถานที่หรือจากอุปกรณ์ใดก็ได้ ซึ่งเป็นเพิ่มความยืดหยุ่นและความคล่องตัวมากขึ้น

มันเป็น Tool ที่เหมาะอย่างยิ่งเมื่อต้องทำงานร่วมกับคนอื่น ๆ ภายในทีม เพื่อให้มั่นใจว่าทุกคนทำงานใน Development Environment เดียวกัน ดังนั้น จึงหลีกเลี่ยงปัญหาที่ว่า "มันใช้งานได้กับเครื่องเราเอง แต่ดันไปพังในระบบจริง"

2. Lighthouse

ตอนนี้ Code อยู่ใน VS Code Editor ของคุณ และคุณก็เริ่มทำการเปลี่ยนแปลงและสร้าง Web App ใน Version ของคุณเอง คำถามคือ แล้วคุณจะทดสอบประสิทธิภาพของ Application ก่อนที่จะ Push Code ไปยัง Server ได้อย่างไร? นั่นคือตอนที่ Lighthouse Chrome Extension ของ Google เริ่มเข้ามามีบทบาท

Lighthouse เป็น Tool ที่ยอดเยี่ยมสำหรับการตรวจสอบประสิทธิภาพของ Web Page โดยมันจะตรวจสอบทั้ง Performance, Accessibility, Progressive Web Apps, SEO รวมทั้งอื่น ๆ Front-end Developers มักต้องการ Lighthouse เพื่อให้แน่ใจว่า Application ของพวกเขาไม่เพียงแต่ดูดี แต่ยังทำงานได้อย่างมีประสิทธิภาพอีกด้วย

Tool ตัวนี้ช่วยให้ Front-end Developers สร้าง Web Page ที่มีคุณภาพสูงที่ Load ได้อย่างรวดเร็ว Users ทุกคนสามารถเข้าถึงได้ และปรากฏผลลัพธ์ในอันดับต้น ๆ จาก Search Engine Results ปัจจัยทั้งหมดเหล่านี้สามารถส่งผลกระทบอย่างมากต่อประสบการณ์ของ Users ที่ใช้งาน Website และความสำเร็จโดยรวม

3. CodePen

กรณีระบบขอให้คุณแสดง Prototype ของสิ่งที่คุณทำกับ Repo ของคุณ ซึ่งแทนที่คุณจะสร้างบางอย่างขึ้นมาเองทั้งหมดตั้งแต่เริ่มต้น แต่จะดีกว่าไหมหากมี Tool ที่สามารถช่วยให้คุณสามารถสร้าง Prototype ได้ในทันที และยังสามารถ Share ไปยัง Manager ของคุณได้อีกด้วย ซึ่งทั้งหมดนี้คือ สิ่งที่ CodePen สามารถทำให้คุณได้

CodePen เป็น Online Community สำหรับการทดสอบและแสดง Code Snippets ของ HTML, CSS และ JavaScript ที่ Users สร้างขึ้น มันเป็น Social Development Environment สำหรับ Front-end Developers ซึ่งจะช่วยให้พวกเขาสามารถ Create และ Share UI Elements ที่น่าสนใจได้ Developers สามารถใช้ CodePen เพื่อสร้าง Prototypes, ทดสอบ Ideas ใหม่ ๆ หรือแม้แต่เป็น Live Portfolio เพื่อแสดงทักษะของคุณต่อว่าที่นายจ้างหรือลูกค้าในอนาคต

4. ngrok

ในการ Develop ส่วนใหญ่ของเรามักเกิดขึ้นใน Local Environment และการแสดง Demo ของสิ่งที่คุณสร้างขึ้นจะทำให้คุณต้องทำสิ่งต่าง ๆ ที่คุณทำบน Local Machine ซ้ำบน Server อีกครั้ง ซึ่งแน่นอนว่ามันทำให้คุณต้องใช้เวลามากขึ้นและรู้สึกว่ามันเกินความจำเป็นหากคุณต้องการ Demo Code ของคุณ แต่เจ้า ngrok จะช่วยแก้ปัญหาเดียวกันนั้นด้วยการสร้าง Tunnels ที่ปลอดภัยไปยัง Localhost และทำให้ App หรือ Website ที่เก็บอยู่ในเครื่องของคุณสามารถเข้าถึงได้ผ่านทาง Internet ในฐานะของ Front-end Developers คุณจะพบว่า ngrok มีค่าอย่างยิ่งในกรณีที่คุณต้องการ Share งานของคุณกับลูกค้าหรือเพื่อนร่วมงานที่ไม่ได้อยู่ใน Local Network ของคุณ

Tool ตัวนี้มีประโยชน์อย่างมากเมื่อต้องทำงานกันเป็นทีมหรือติดต่อกับลูกค้า มันจะช่วยให้คุณสามารถ Share งานของคุณโดยไม่จำเป็นต้อง Deploy ก่อน รวมทั้งช่วยเร่งความเร็วของ Feedback Cycles อีกด้วย นอกจากนี้ ngrok ยังให้ข้อมูลเชิงลึกโดยละเอียดเกี่ยวกับ HTTP Traffic สำหรับ Tunnels ของคุณ และยังทำให้การ Debug ทำได้ง่ายขึ้นอีกด้วย

5. Sentry

ตอนนี้คุณได้ Clone Repository, สร้าง Applications, ทดสอบ และ Deploy พวกมันบน Server ของคุณเองแล้ว คำถามคือ แล้วคุณจะตรวจสอบ Errors ที่ปรากฏขึ้นเมื่อ Users ใช้ App ของคุณได้อย่างไร และคำตอบคือ Sentry จะสามารถช่วยคุณได้ 

Sentry เป็น Open-Source Error-Tracking Tool ที่ช่วยให้ Developers สามารถตรวจสอบและแก้ไขปัญหาหรือสิ่งที่ขัดช้องได้แบบ Real Time มันช่วยลดความยุ่งยากในการ Debug ด้วยการให้ข้อมูลโดยละเอียดเกี่ยวกับปัญหาที่เกิดขึ้น จะว่าไปแล้ว Sentry ถือเป็นตัวช่วยชีวิตสำหรับ Front-end Developers เลยก็ว่าได้ เพราะมันสามารถชี้ให้เห็นได้เลยว่า ปัญหาเกิดขึ้นที่ตรงไหนใน Code ซึ่งจะช่วยประหยัดเวลาในการ Debug ได้อย่างมาก

Sentry จำเป็นต่อการรักษาคุณภาพของ Applications ของคุณด้วยการตรวจจับปัญหาอย่างรวดเร็วและช่วยทำให้ประสบการณ์การใช้งานของ Users มีความราบรื่น

Bonus: Requestly

Requestly เป็น Open-Source Tool ที่ช่วยให้ Web Development Process ของคุณเร็วขึ้นกว่าเดิมหลายเท่า ในฐานะ Front-end Developers แล้ว มันมีประโยชน์อย่างยิ่งในการทดสอบ Server Responses, Rewrite URLs สำหรับ Local Development หรือแม้แต่การ Modify Headers นอกจากนี้คุณยังสามารถใช้ Requestly เพื่อเลียนแบบ Server Responses กรณีที่คุณต้องการทดสอบว่า Applications ของคุณทำงานอย่างไรภายใต้ Data Conditions ที่แตกต่างกัน ซึ่งทำให้ง่ายต่อการตรวจจับปัญหาก่อนที่จะส่งถึงมือ Users ของคุณ

สรุป

คุณจะเห็นว่า Tools เหล่านี้ ช่วยให้ Front-end Developers มีชุด Functionalities ที่ครอบคลุมซึ่งแทบจะเรียกว่า ขาดไม่ได้ในทุกขั้นตอนของ Development Process ด้วยการใช้งาน Tools เหล่านี้ผสมผสานเข้ากับ Workflows ก็จะช่วยให้ Front-end Developers สามารถประหยัดเวลา, เพิ่ม Productivity และการทำงานร่วมกัน และในท้ายที่สุดมันจะช่วยมอบ Experiences ที่ดียิ่งขึ้นให้กับ Users ของคุณ

ที่มา: https://requestly.io/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 5 Python Modules ที่นำไปประยุกต์ใช้ใน Project ของคุณได้
• 5 Open Source Fonts ที่คุณสามารถนำไปใช้ Coding ได้
• 25 JavaScript One-Liners ที่ช่วยให้คุณทำงานสะดวกขึ้น