บทความ IT เจ๋งๆ
6 Front-End Projects ที่ท้าทายความสามารถการ Coding ของคุณ
13-ธ.ค.-19
คัมภีร์เทพ IT
การพัฒนา Front-end นั้นเป็นเรื่องทำได้ไม่ง่ายนัก แต่ด้วยการฝึกฝน และการทุ่มเทความพยายามอย่างเต็มที่ คุณก็จะเชี่ยวชาญในการแก้ปัญหาในแนวการพัฒนา Front-end วิธีหนึ่งที่มีประสิทธิภาพในการเป็น Front-end Developer ที่ยอดเยี่ยม ก็คือ การสร้างและแก้ไขปัญหาที่ท้าทายให้มากที่สุดเท่าที่จะทำได้ แต่ต่อไปนี้ ก็เป็น 6 Front-End Projects ที่ท้าทายความสามารถการ Coding ของคุณ เรามาดูกันว่ามีอะไรบ้าง
1. Credit Card Form
Credit Card Form ที่ยอดเยี่ยมสวยงาม พร้อมมี Interaction ที่น่าสนใจ รวมทั้งการมี Number Formatting, Validation และ Automatic Card-Type Detection มันถูกสร้างขึ้นด้วย Vue.js และมีรูปแบบ Responsive ได้อย่างเต็มรูปแบบ
คุณสามารถดู Credit Card Form ได้ที่นี่
สิ่งที่คุณจะได้เรียนรู้ จากการแก้ปัญหา Challenge นี้:
- การจัดการกับ Form และการ Validate ข้อมูล
- การจัดการ Event Listeners (เช่น เมื่อ Fields เปลี่ยน มันจะ Print ค่าใน Credit Card)
- ทำความเข้าใจเกี่ยวกับวิธีการแสดงและวางตำแหน่งของ Elements บน Pages โดยเฉพาะอย่างยิ่ง Credit Card Overlapping the Form
2. Bar Chart From Scratch
Bar Chart หรือ Bar Graph คือ Chart หรือ Graph ที่แสดงข้อมูลเป็นหมวดหมู่ด้วยแท่งสี่เหลี่ยมที่มีความสูง หรือความยาว ตามสัดส่วนของค่าที่แสดง
Bar สามารถถูก Plot ในแนวตั้งหรือแนวนอนก็ได้ Bar Chart ในแนวตั้ง บางครั้งก็ถูกเรียกว่า Line Graph
สิ่งที่คุณจะได้เรียนรู้ จากการแก้ปัญหา Challenge นี้:
- แสดงข้อมูลด้วยวิธีที่มี Structure และสามารถเข้าใจได้ง่าย
- Optional : เรียนรู้วิธีใช้ <canvas> Element รวมทั้งวิธีการวาด Element ด้วย
คุณสามารถค้นหาข้อมูลของประชากรโลกในแต่ละปีได้ที่นี่
3. Twitter Heart Animation
ย้อนกลับไปในปี 2016 คุณจะพบว่า Twitter เปิดตัว Animation ที่น่าสนใจสำหรับ Tweet Likes ของพวกเขา จนตอนนี้ปี 2019 แล้ว มันก็ยังคงดูดีอยู่ แล้วทำไมคุณถึงไม่ลองสร้างมันด้วยตัวเองบ้างล่ะ
สิ่งที่คุณจะได้เรียนรู้ จากการแก้ปัญหา Challenge นี้:
- วิธีการทำงานของ Keyframes CSS Attribute
- วิธีการจัดการและการทำให้ HTML Elements สามารถเคลื่อนไหวได้
- วิธีการรวม JavaScript, HTML และ CSS ให้ทำงานร่วมกันได้
4. GitHub Repositories With Search Functionality
ไม่มีอะไรน่าตื่นเต้นไปมากกว่านี้อีกแล้ว GitHub Repositories นั้นถือเป็นรายการที่น่ายกย่อง
ภารกิจ ก็คือ การแสดง Repositories และอนุญาตให้ User สามารถ Filter ผ่าน Repositories ใช้ Official GitHub API เพื่อ Fetch Repositories ของแต่ละ User
สิ่งที่คุณจะได้เรียนรู้ จากการแก้ปัญหา Challenge นี้:
- วิธี Fetch ข้อมูลจาก API
- วิธีแสดงข้อมูลจาก API
- วิธี Filter และแสดงข้อมูลที่เกี่ยวข้อง สำหรับการ Search แต่ละครั้ง
- Optional : หากคุณต้องการความท้าทาย ให้ใช้ v4 API ซึ่งถูกสร้างขึ้นโดยใช้ GraphQL หากคุณต้องการเรียนรู้ GraphQL ลองไปอ่านในบทความนี้ดู
5. Reddit-Style Chat Rooms
Chat Rooms ถือเป็นวิธีการสื่อสารยอดนิยมอย่างมาก เนื่องจากมันทั้งใช้งานง่ายและสนุก แต่อะไรที่ทำให้ Chat Rooms ในยุคปัจจุบันถึงได้รับความนิยมและใช้งานอย่างแพร่หลายอย่างมาก คำตอบคือ WebSockets นั่นเอง
สิ่งที่คุณจะได้เรียนรู้ จากการแก้ปัญหา Challenge นี้:
- วิธีใช้ WebSockets รวมทั้งการสื่อสารแบบ Real Time และการ Update ข้อมูล
- วิธีการทำงานของ User Permissions ใน Level ต่าง ๆ (เช่น Owner ของ Chat Channel มีบทบาทเป็น Admin ในขณะที่คนอื่น ๆ ใน Room จะมีบทบาทเป็น User)
- การจัดการกับ Form และการ Validate ข้อมูล - จำไว้ว่า Chat Box สำหรับส่ง Message เป็น Input Element
- วิธีการ Create และ Join Chat Rooms ต่าง ๆ
- Direct Messages และวิธีการทำงานของมัน Users สามารถสื่อสารกับ Users อื่น ๆ แบบ Private โดยพื้นฐานแล้วคุณจะต้องทำการเชื่อมต่อ WebSocket ระหว่าง 2 Users
6. Stripe-Style Navigation
สิ่งที่ทำให้ Navigation นี้มีความแตกต่างและไม่เหมือนใคร ก็คือ Popover Container ที่ปรับเปลี่ยนให้เหมาะสมกับ Content มันมีความสวยงามใน Transition นี้ เมื่อเทียบกับ พฤติกรรมแบบดั้งเดิมของการเปิดและปิด Popover ใหม่ทั้งหมด
สิ่งที่คุณจะได้เรียนรู้ จากการแก้ปัญหา Challenge นี้:
- วิธีการรวม CSS Animations กับ Transitions
- Cross-Fading Content และใช้ Active Class สำหรับ Element ที่ถูก Hover
ลองทำมันด้วยตัวคุณเองก่อน แต่ถ้าคุณต้องการความช่วยเหลือลองอ่านบทความนี้ เพื่อดูคำแนะนำทีละขั้นตอน
สรุป
โปรดรู้ไว้ว่า ไม่มีทางลัดใดที่ช่วยให้การ Coding ของคุณดีขึ้นในเวลาอันสั้น เริ่มทำมันและเพิ่มทักษะการเขียน Code ของคุณโดยการสร้างสิ่งต่าง ๆ ให้มากที่สุด
ที่มา: https://medium.com/
ดูตำแหน่งงานที่ใช้ทักษะ JavaScript ได้ที่นี่
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด