บทความ IT เจ๋งๆ
11 Online Tools ที่มีประโยชน์สำหรับ Frontend Developers
20-พ.ค.-20
คัมภีร์เทพ IT
บน Internet นั้นเต็มไปด้วย Tools ที่ยอดเยี่ยมและน่าสนใจมากมาย ที่จะช่วยทำให้การทำงานของ Frontend Developers ง่ายขึ้นอย่างมาก ดังนั้นในบทความนี้จะมาแนะนำ 11 Online Tools ที่มีประโยชน์สำหรับ Frontend Developers ให้ได้ลองนำไปใช้งานกัน
1. CanIUse
คุณเคยสงสัยว่า Web API ของคุณสามารถใช้งานได้อย่างดีบน Browsers บางตัวหรือแม้กระทั่งบน Mobile Browsers บ้างหรือไม่ Online Tools ตัวนี้จะช่วยให้คุณสามารถทดสอบความเข้ากันได้ (Compatible) ระหว่าง Web API ของคุณกับ Browsers
สมมติว่า เราต้องการทราบว่า Browsers ใดและ Version ไหนบ้าง ที่จะรองรับ Web Share API: navigator.share (...)
จากด้านบน จะเห็นว่า Browsers และ Versions ที่รองรับ navigator.share (...) จะแสดงอยู่ใน List ทั้งหมด
2. Minify
เพื่อลดขนาด (Bundle Size) ของ App Code ที่เรา Push ไปยัง Production เราจำเป็นต้องย่อมันให้เล็กลง การลดขนาดจะช่วยลบพวก Whitespaces, Dead Code เป็นต้น ทำให้ Bundle Size ของ App ลดลงได้เป็นอย่างมาก ซึ่งจะทำให้เวลาที่ใช้ในการ Load Browsers เร็วขึ้นอีกด้วย
3. Bit.dev
Bit.dev เป็น Component Hub ที่ยอดเยี่ยม คุณสามารถใช้มันเป็น Host, จัดทำ Document และจัดการกับ Reusable Components จาก Projects ต่าง ๆ ของคุณ มันเป็นวิธีที่ยอดเยี่ยมในการเพิ่ม Code Reuse, เร่งการ Develop ให้เร็วขึ้น และเพิ่มประสิทธิภาพการทำงานร่วมกันภายในทีมของคุณ
นอกจากนี้ มันยังเป็นทางเลือกที่ดีสำหรับการสร้าง Design System ตั้งแต่เริ่มต้น (เนื่องจากมันมีทุกอย่างที่ Design System ต้องการ) Bit.dev ทำงานได้อย่างสมบูรณ์แบบร่วมกับ Bit ซึ่งเป็น Open-Source Tool ที่จัดการเกี่ยวกับ Component Isolation และ Publishing ที่สำคัญคือ Bit.dev ยังรองรับ React, Angular, Vue และอื่น ๆ อีกมากมาย
4. Unminify
จากชื่อก็บ่งบอกอยู่แล้วว่า Tool นี้ จะทำในสิ่งที่ตรงกันข้ามกับสิ่งที่ Minify ทำ โดย Tool นี้จะช่วยให้คุณสามารถสร้าง JS Code ที่ถูก Minified แล้ว ให้สามารถเป็น Code ที่ดูสวยงาม อ่านง่าย และเข้าใจได้ง่ายขึ้นอีกครั้ง
5. Stackblitz
นี่คือ Tool ยอดนิยมที่หลาย ๆ คนใช้ โดย Stackblitz จะช่วยทำให้คุณสามารถใช้งาน IDE ที่ได้รับความนิยมและถูกใช้งานมากที่สุดในโลกซึ่งก็คือ Visual Studio Code ได้บน Web
Stackblitz จะช่วยให้คุณสามารถสร้างโครงร่างพื้นฐานของ Projects ทั้งของ Angular, React, Vue, Vanilla, RxJS รวมทั้ง TypeScript ได้อย่างรวดเร็วด้วยการคลิกเพียงครั้งเดียว
Stackblitz มีประโยชน์อย่างยิ่งเมื่อคุณต้องการลองใช้ Code บางส่วนหรือ Features บางอย่างใน JS Frameworks ล่าสุดจาก Browser ของคุณ ลองนึกภาพดูว่า คุณกำลังอ่านบทความเกี่ยวกับ Angular อยู่แล้วคุณก็เจอ Code ที่คุณต้องการลองใช้มัน คุณสามารถย่อ Browser ของคุณ แล้วสร้าง Angular Project ใหม่ขึ้นมาเพียงแค่ใช้ Code ไม่กี่บรรทัด ซึ่งมันทั้งง่ายและเร็ว
6. JWT.io
กรณีที่คุณกำลังใช้ JSON Web Tokens (JWT) เพื่อให้ App ของคุณปลอดภัยยิ่งขึ้น หรือใช้ JWT เพื่อให้ Users ของคุณเข้าถึงResources ที่มีการป้องกันอย่างดี บน Backends ของคุณ
วิธีหนึ่งในการตัดสินใจไม่ว่าจะเกี่ยวกับ Route หรือ Resource ที่ควรเข้าถึง ก็คือการตรวจสอบ Expiration Time ของ Token อาจมีหลายครั้งที่เราต้องการ Decode JWT เพื่อดู Payload ของมัน ซึ่ง JWT.IO จะให้ข้อมูลเหล่านั้นกับคุณ
Online Tool ตัวนี้จะช่วยให้เราสามารถเห็นข้อมูลใน Token เพื่อดู Payload ของพวกมัน เมื่อเราวาง Token แล้ว JWT.IO จะทำการ Decode Token แล้วแสดง Payload ออกมา
7. BundlePhobia
คุณเคยรู้สึกไม่แน่ใจเกี่ยวกับขนาดของ node_modules ของคุณ หรือคุณแค่ต้องการทราบขนาดของ pakckage.json ที่จะถูก Install ในเครื่องของคุณหรือไม่ ถ้าคำตอบคือ “ใช่” BundlePhobia ตัวนี้จะช่วยให้คำตอบแก่คุณ โดย Tool นี้จะช่วยให้เราสามารถ Upload package.json File และจะแสดงขนาดของ Dependencies ที่จะถูก Install จาก package.json
8. Babel REPL
Babel เป็น Open-Source JS Transcompiler ที่ใช้ในการ Convert ES Code รุ่นใหม่ ๆ ให้เป็น ES5 JavaScript
Tool นี้เป็น Online Web App ที่ตั้งขึ้นโดยทีมงาน Babeljs ซึ่งเราสามารถ Transpile ES6+ Code ไปเป็น ES5 (Transpile คือการแปลง Source Code ของ Typescript ให้เป็น JavaScript ซึ่งไม่ใช่การ Compile Code)
มันช่วยให้เราสามารถทดลองใช้ สิ่งที่เราเพิ่มเข้าไปล่าสุดยัง ES หรือบาง Features ที่อยู่ในขั้นตอนของการเพิ่มเข้าไปยัง ECMA มันสามารถจัด Format ของ Code ให้ดูสวยงามอ่านง่าย, จำกัดขนาด File และช่วยให้เราสามารถเห็นผลลัพธ์ได้อย่างรวดเร็ว
Prettier เป็น JS Code Formatter ที่จะช่วยจัด Code ให้อยู่ใน Style ที่สอดคล้องกันด้วยการวิเคราะห์ Code ของคุณ แล้วทำการ Re-print มันออกมาให้ใหม่ด้วยรูปแบบของ Best Coding Practices ของ JS
Tool นี้ถูกใช้อย่างแพร่หลายใน Dev Environment ของเรา แต่คุณก็สามารถใช้งานมันในรูปแบบ Online ได้เช่นกัน
10. Postman
Tool นี้ จะช่วยในการทดสอบ API Endpoints ของคุณอย่างรวดเร็ว: GET, POST, DELETE, OPTIONS, PUT
11. JSLint
ในกลุ่มของ JS Linters ทั้งหมด JSLint ถือเป็น Tool ที่ได้รับความนิยมมากที่สุด Online Tool Version ของ JSLint นี้ ทำให้เราสามารถ Lint JS Code หรือ JS File ใน Browser ของเราได้
ที่มา: https://blog.bitsrc.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด