บทความ IT เจ๋งๆ
6 Tools ที่แนะนำให้ใช้สำหรับการพัฒนา Front-End
25-ก.ย.-20
คัมภีร์เทพ IT
ใน Internet มี Tools มากมายที่ถูกพัฒนาขึ้นโดย Community ต่าง ๆ เพื่อช่วยให้ชีวิตของ Front-End Developers ง่ายขึ้น และนี่ก็คือ 6 Tools ที่แนะนำให้ใช้สำหรับการพัฒนา Front-End
1. EnjoyCSS
อาจจะมี Front-End Developer บางคนที่ไม่ค่อยถนัดการใช้งาน CSS แต่ใครจะรู้ว่าบางที Tool ที่เรียบง่ายอย่าง EnjoyCSS จะเป็นผู้ช่วยชีวิตของคุณในช่วงเวลาที่ยากลำบากได้ มันช่วยให้คุณสามารถออกแบบ Elements ของคุณด้วย UI ที่เรียบง่ายและให้ CSS output ที่คุณต้องการ
Prettier คือ ตัวจัด Format Code ที่รองรับ JavaScript รวมถึง ES2017, JSX, Angular, Vue, Flow, TypeScript และอื่น ๆ มันจะทำการลบ Original Styling ของคุณ แล้วแทนที่ด้วย Style ที่สอดคล้องกับมาตรฐานซึ่งเป็นไปตาม Best Practice สำหรับ Tool ที่มีประโยชน์ตัวนี้ ถือว่าได้รับความนิยมอย่างมากใน IDEs ของเรา แต่ก็ยังมี Online Version ซึ่งเป็นอีก Platform ที่คุณสามารถใช้จัด Format Code ของคุณได้
3. Postman
เชื่อว่า Postman น่าจะเป็นหนึ่งใน Tool ที่อยู่ใน Developer Toolset ของใครหลาย ๆ คน มันมีประโยชน์อย่างมากในการตรวจสอบ Endpoints ใน Back End ด้วยเหตุนี้ Postman จึงได้มาอยู่ใน List นี้ โดยที่ Endpoints อย่าง GET, POST, DELETE, OPTIONS และ PUT ก็ถูกรวมอยู่ในนี้ด้วย จึงขอแนะนำให้คุณใช้ Tool นี้ในการทำงานของคุณ
4. StackBlitz
นี่คือ Online IDE Tool ยอดนิยมที่หลาย ๆ คนชื่นชอบและใช้งาน โดย Stackblitz จะช่วยทำให้คุณสามารถใช้งาน IDE ที่ได้รับความนิยมและถูกใช้งานมากที่สุดในโลก ซึ่งก็คือ Visual Studio Code ได้บน Web
Stackblitz จะช่วยให้คุณสามารถ Set up Angular, React, Ionic, TypeScript, RxJS, Svelte รวมทั้ง JavaScript Frameworks ต่าง ๆ ได้อย่างรวดเร็วด้วยการคลิกเพียงครั้งเดียว คุณสามารถเริ่มเขียน Code ได้ภายในเวลาไม่ถึง 5 วินาที เนื่องจาก Feature ที่มีประโยชน์เหล่านี้
Tool ตัวนี้มีประโยชน์อย่างมากโดยเฉพาะเมื่อลองใช้ตัวอย่าง Code Snippets หรือ Libraries Online คุณอาจจะไม่มีเวลาที่มากพอในการสร้าง Project ใหม่ตั้งแต่เริ่มต้น เพียงแค่เพื่อจะทดลองใช้ Feature ใหม่ แต่ด้วย StackBlitz คุณสามารถทดลองใช้ NPM Package ใหม่ได้ภายในเวลาไม่กี่นาที โดยไม่ต้องสร้าง Project ใน Computer ของคุณตั้งแต่ต้น
5. Bit.dev
หลักการพื้นฐานประการหนึ่งของ Software Development ก็คือ การนำ Code กลับมาใช้งานซ้ำ (Code Reusability) สิ่งนี้จะช่วยให้คุณสามารถลดเวลาการ Develop ได้อย่างมาก เนื่องจากคุณไม่จำเป็นต้องสร้าง Components ต่าง ๆ ใหม่ตั้งแต่ต้น
นี่คือสิ่งที่ Bit.dev สามารถทำได้ มันช่วยให้คุณสามารถ Share Code Components และ Snippets ที่สามารถใช้งานซ้ำได้ ซึ่งจะช่วยให้คุณประหยัดเวลาในการทำงาน และช่วยเร่ง Development Process ของคุณ
นอกจากนี้ มันยังอนุญาตให้ Share Components ระหว่างทีม ซึ่งช่วยให้ทีมของคุณทำงานร่วมกับคนอื่น ๆ ได้
"Components are your design system. Build better together." - Bit.dev
จากคำกล่าวของ Bit.dev ด้านบน, Component Hub นี้ยังเหมาะที่จะใช้เป็น Design System Builder จากการอนุญาตให้ทีมของ Developers และ Designers ของคุณสามารถทำงานร่วมกันได้ Bit.dev จึงเป็น Tool ที่สมบูรณ์แบบสำหรับการสร้าง Design System ตั้งแต่เริ่มต้น
ตอนนี้ Bit.dev รองรับทั้ง React, Vue, Angular, Node และ JavaScript Framework อื่น ๆ
6. CanIUse
Online Tool นี้มีประโยชน์อย่างมาก เนื่องจากจะช่วยให้คุณทราบว่า Features ที่คุณกำลัง Implement อยู่นั้นเข้ากันได้กับBrowsers ที่คุณคาดว่าจะใช้งานหรือไม่
คุณอาจเคยมีประสบการณ์ที่ Function การใช้งานบางอย่างที่ใช้ใน Application ของคุณไม่รองรับบน Browsers อื่น ๆ มันเป็นเรื่องจำเป็นที่คุณควรเรียนรู้ว่า คุณต้องตรวจสอบความเข้ากันได้ของ Browsers อย่างเช่น Features บางอย่างของคุณอาจไม่รองรับใน Portfolio Project บน Safari Devices ซึ่งคุณอาจตรวจมันไม่กี่เดือนหลังจากการ Deploy
หากต้องการดูการใช้งานจริง ให้ตรวจสอบว่า Browsers ใดบ้างที่รองรับ WebP Image Format
อย่างที่คุณได้เห็น ในปัจจุบัน Safari และ IE นั้นยังไม่รองรับ ซึ่งหมายความว่า คุณควรมีตัวเลือกสำรองสำหรับ Browsers ที่เข้ากันไม่ได้ Code Snippet ด้านล่างเป็นการ Implement ที่ใช้บ่อยที่สุดของ WebP Images เพื่อให้มันรองรับ Browsers ทั้งหมด
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด