บทความ IT เจ๋งๆ

5 Projects ที่ช่วยให้คุณพัฒนา Frontend ได้ดีขึ้นกว่าเดิม

23-มิ.ย.-21

คัมภีร์เทพ IT

มี Developers หลายคนเชื่อว่า วิธีเดียวที่จะเพิ่ม Development Skill ให้ดีขึ้นได้ ก็คือ การสร้าง Projects ต่าง ๆ ขึ้นมา ซึ่งในบทความนี้ เราจะมาดู 5 Projects ที่ช่วยให้คุณพัฒนา Frontend ได้ดีขึ้นกว่าเดิม รวมทั้งเราจะพิจารณาทักษะที่เกี่ยวข้องที่คุณจะได้เรียนรู้จากการสร้าง Projects เหล่านี้

1. Search Application (Image, Joke, Movie)

Project ประเภทนี้ อาจเป็น Application ที่ใช้ประโยชน์จาก Application Programming Interface (API) และแสดงข้อมูลแก่ User

Project นี้ จะช่วยให้ User สามารถป้อน Data และ Return Data ที่เกี่ยวข้องกับสิ่งที่ลูกค้าค้นหา

Project ประเภทนี้ สามารถเป็นได้ทั้ง รูปภาพ ภาพยนตร์ หรือ เรื่องตลก และทำงานกับ APIs ต่าง ๆ เพื่อให้ User สามารถค้นหา และได้รับ Data ที่เกี่ยวข้องกับการค้นหาของพวกเขา

สิ่งที่คุณจะได้เรียนรู้:

  • Handling User Inputs
  • Data & Input Sanitization
  • Making HTTP Calls
  • Working with APIs
  • Styling Data

2. Chat/Messaging Application

Project ประเภทนี้ อาจคล้ายกับ Twitter, WhatsApp หรือ Slack ที่ทำให้ User สามารถส่ง Message ไปยังผู้อื่นแบบ Real-Time ได้

Project นี้ สามารถใช้ประโยชน์จาก Web Sockets เพื่ออนุญาตให้คุณใช้ในการส่ง Message แบบ Real-Time

สิ่งที่คุณจะได้เรียนรู้:

  • Sockets (one-on-one communication in real time)
  • Working with Input Data

สิ่งนี้จะช่วยให้คุณได้ทราบว่า ระบบการส่ง Message แบบ Online ทำงานอย่างไร ในทำนองเดียวกัน มันถือเป็น Project ที่ดีที่คุณสามารถเพิ่มลงไปใน Resume ของคุณ และจะดียิ่งขึ้นถ้าคุณมี Project ในลักษณะนี้อยู่ใน Skillset ของคุณ

3. Portfolio Blog Website

Project ประเภทนี้ จะมีลักษณะคล้าย ๆ กับ Website ที่มี Feature ในรูปแบบของ Blog คุณสามารถท้าทายตัวเองด้วยการเลือกแรงบันดาลใจในการออกแบบและพัฒนา Website ได้

นอกจากนี้ยังมีเทคโนโลยีที่ยอดเยี่ยม ที่คุณสามารถใช้ประโยชน์ในการสร้าง Blog ได้รวดเร็วขึ้นด้วย Features ที่น่าทึ่ง เทคโนโลยีที่จะสามารถช่วยให้คุณ Set up Blog ได้อย่างรวดเร็ว อย่างเช่น Nuxt-content, Sanityio และอื่น ๆ

สิ่งที่สำคัญอีกเรื่องก็คือ ยังมีความจำเป็นอย่างยิ่งที่จะต้องตรวจสอบให้แน่ใจว่า Blog-Website ของคุณ มี SEO และประสิทธิภาพที่ดีที่สุดอีกด้วย

สิ่งที่คุณจะได้เรียนรู้:

  • Setting up a Blog
  • Social media integration
  • Handling Markdown, CSV, YAML, JSON & XML
  • SEO Optimization
  • Performance Optimization

4. Social Media Clone

นี่เป็น Project ที่มีรูปแบบการจำลองของ Social Media (อย่างเช่น Instagram, Twitter, Facebook, YouTube) ท่ามกลาง Platforms ยอดนิยมอื่น ๆ

การสร้างบางสิ่งจาก Social Medias เหล่านี้ จะเป็นการท้าทายความคิดสร้างสรรค์ของคุณ ในขณะเดียวกัน ยังเป็นการนำเสนอ Features ที่น่าทึ่งให้คุณได้รู้ด้วย

เนื่องจาก Platforms ส่วนใหญ่ มักใช้เทคโนโลยี การออกแบบ และ Features ที่ทันสมัยที่สุด ดังนั้น พวกมันจะช่วยสร้างแรงบันดาลใจและ Features ของการออกแบบที่ทันสมัยที่สุดให้กับคุณ

คุณยังสามารถเลือก CSS Frameworks อย่างเช่น Bootstrap, Tailwind, Bulma เพื่อสร้าง Projects ประเภทนี้

สิ่งที่คุณจะได้เรียนรู้:

  • HTML, CSS & JavaScript
  • Implementing designs
  • Page Structure
  • Colors & Fonts

5. Project with Login, Logout & Authentication

การสร้าง Project ที่มีการใช้งานเกี่ยวกับ Login, Signup และ Authentication จะสามารถช่วยสร้างความแตกต่างให้กับทักษะของคุณเป็นอย่างมาก คุณจะได้เรียนรู้ทักษะอื่น ๆ ที่จำเป็น รวมถึงการทำความรู้จักกับ Data ของคุณ 

ที่สำคัญคือ คุณจะได้เรียนรู้เกี่ยวกับวิธีการทำงานของ Backend Services

สิ่งที่คุณจะได้เรียนรู้:

  • How authentication works
  • Handling user inputs
  • Data and input storage
  • Data & Input Sanitization

ที่มา:  https://javascript.plainenglish.io/

 

 

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

 

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

เพิ่มเพื่อน

 

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

ประเภทบทความ