Quantcast
Channel: cc :: somkiat
Viewing all articles
Browse latest Browse all 1997

สิ่งที่น่าสนใจ สำหรับการ redesign หน้า web ของ NodeJS

$
0
0

เห็นว่า website ของ NodeJS นั้น ทำการ redesign ใหม่ออกมา
จึงตามไปดูว่ามีการคิด และ การพัฒนาอย่างไรบ้าง
โดยเริ่มต้นจากการพูดคุยและออกแบบใน figma ก่อน
เพื่อให้ได้เอกสารในการทำงานร่วมกัน ประกอบไปด้วย

  • UX flow
  • Dark/light mode
  • Page layout
  • การแสดงผลใน mobile device
  • การแบ่งส่วนต่าง ๆ ออกเป็น component-based

จากนั้นจึงทำการลงมือเขียน code ต่อไป
ช่วยทำให้การทำงานร่วมกัน ที่ส่วนใหญเป็นแบบ remote ทั้งโลกง่ายขึ้น

ช่วงเริ่มต้นของการพัฒนานั้น
จะทำการสร้าง component ต่าง ๆ ขึ้นมา
ซึ่งเป็น component หลัก ๆ ของระบบ เพื่อช่วยลดการทำงานซ้ำ ๆ ลงไป
โดยจะสร้างและเก็บไว้ใน Storybook และใช้งาน Chromatic
ช่วยให้ง่ายต่อการสร้าง prototype และทดสอบในแต่ละ component
และในส่วนของ CSS เลือกใช้งาน Tailwind

สำหรับการค้นหาในระบบงาน
ทั้ง API, content, blog, material ต่าง ๆ
จะใช้งาน Orama ซึ่งทำงานเร็วมาก ๆ

ระบบการ monitoring ส่วนการทำงานนั้น
จะใช้งาน Sentry เพื่อดูการทำงานของระบบ เช่น

  • error report
  • usage monitoring
  • diagnostic ส่วนต่าง ๆ

ในส่วนของ hosting ใช้งานผ่าน Vercel และ Cloudflare
และ CI/CD ใช้งาน GitHub Actions
ทำให้ contributor ต่าง ๆ ได้รับ feedback จากการเปลี่ยนแปลงส่วนต่าง ๆ ได้อย่างรวดเร็ว
โดยใน pipeline ของ CI/CD จะมีส่วนของการทดสอบต่าง ๆ ดังนี้

  • Visual testing ด้วย chromatic และ lighthouse
  • Lint tool
  • Testing

เป็นการทำ regression test ของระบบ

มีหลายอย่างที่น่าสนใจ
ลองศึกษาและนำไปใช้งานกันดูครับ


Viewing all articles
Browse latest Browse all 1997

Trending Articles