COOL IT IDEAS AND STUFF

การที่คุณเก่งในการเขียน Code ได้ก็ต้องใช้ความทุ่มเทและความพยายาม มีคำกล่าวว่า หากคุณใช้เวลาทำสิ่งใดได้ 10,000 ชั่วโมง คุณก็จะกลายเป็นคนที่เชี่ยวชาญในทักษะนั้น การเขียน Code ไม่แตกต่างจากทักษะอื่น ๆ แม้เหล่า Coder จะมีความต้องการเขียน Code มากแค่ไหน แต่หลายคนก็มักจะขาด Idea ว่าจะทำอะไรดี วันนี้เรามาดู 5 Apps ที่ช่วยกระตุ้นความคิดและทักษะการเขียน Code ของคุณกัน

1. Squoosh

Squoosh เป็น Image Compression Web App ที่มี Advanced Options ในการบีบอัดภาพต่าง ๆ มากมายให้คุณใช้

Example Squoosh app

ด้วยการสร้าง Squoosh App คุณจะได้เรียนรู้สิ่งต่อไปนี้:

• วิธี Resize และได้ทำงานกับรูปภาพ

• พื้นฐานของ Drag & Drop API

• Event listeners และวิธีการทำงานของ API

• การ Upload และ Export File

หมายเหตุ: การบีบอัดภาพจะถูกจัดการภายในเครื่อง ไม่มีการส่ง Data ใด ๆ ไปยัง Server คุณสามารถจัดการกับการบีบอัดภาพได้ทั้งบน Client- Side หรือ Server-Side ตามแต่คุณจะต้องการ

2. Calculator

คุณอาจจะแปลกใจว่าทำไมถึงเป็นเครื่องคิดเลข การทำความเข้าใจกับพื้นฐานของตัวดำเนินการทางคณิตศาสตร์ (Math Operators) และวิธีการที่พวกมันทำงานร่วมกัน ถือเป็นสิ่งที่สำคัญเมื่อคุณต้องทำงานกับ Application ที่มีความซับซ้อน ไม่ช้าก็เร็วคุณจะต้องรับมือกับตัวเลข แล้วทำไมคุณไม่เริ่มฝึกฝนมันก่อนล่ะ?

Calculator app — https://jarodburchill.github.io/CalculatorReactApp/

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

• ได้ทำงานกับตัวเลขและตัวดำเนินการทางคณิตศาสตร์

• Event listeners API

• วิธีจัดวาง Elements และ Style ให้กับ Application

3. Layer

Layer เป็น Community ที่ทุกคนสามารถระบายสีบน Art Board ที่ Share กันได้ แนวคิดตั้งต้นมาจาก Reddit Community ส่วน r/Layer Community เป็น Canvas สำหรับการสำรวจความคิดสร้างสรรค์ที่เปิดให้ทุกคนสร้างและมีส่วนร่วมได้

Layer canvas — https://www.reddit.com/r/layer/

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

• วิธีทำงานของ JavaScript Canvas - ได้รู้ว่าวิธีจัดการ Canvas เป็นสิ่งสำคัญใน Application

• วิธีทำงานประสานกับ User Permissions, User แต่ละคนสามารถระบายสีได้ทุก ๆ 15 นาที โดยไม่ต้องมีการ Log in

• การจัดการกับ Cookie Sessions

Reddit Layer

4. Website Crawler (Search Engine)

ทุกวันนี้ ทุกคนล้วนมี Website Crawler ดังนั้น ทำไมเราถึงไม่สร้างมันขึ้นมาล่ะ Website Crawler มีประโยชน์อย่างมากเมื่อต้องการค้นหาข้อมูล เราพึ่งพา Search Engine ทุกวัน และความต้องการนั้นจะเติบโตไปพร้อมกับข้อมูลที่มีเพิ่มมากขึ้น

Google Website Crawler (Search Engine)

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

• วิธีการทำงานของ Website Crawler

• วิธีการจัดทำ Index Websites และแสดง Websites เหล่านั้นตามอันดับและชื่อเสียงของมัน

• การจัดเก็บ Websites ที่จัดทำ Index ไว้ใน Database และวิธีการทำงานกับ Database

5. Music Player (Spotify, Apple Music)

เราทุกคนใกล้ชิดกับเสียงเพลง เพราะมันเป็นส่วนหนึ่งที่เกี่ยวข้องกับชีวิตของเรา ดังนั้น เรามาสร้าง Music Player เพื่อที่เราจะได้เข้าใจได้ดีขึ้นว่า กลไกพื้นฐานของ Music-Streaming Platform ในสมัยใหม่นี้ ทำงานอย่างไรบ้าง

Spotify Web example

สิ่งที่คุณจะได้เรียนรู้จากการสร้าง Music-Streaming Platform:

• วิธีทำงานกับ API ใช้ Spotify หรือ Apple Music API

• วิธีใช้การ Play, Stop หรือ Fetch เพลงที่อยู่ก่อนหน้าหรือถัดไป

• วิธีจัดการกับระดับเสียง

• วิธีจัดการกับ User Routing และ Browser-History API

สรุป

หวังว่าบทความนี้ จะเป็นแนวทางและสร้างแรงบันดาลใจให้คุณได้ทดลองสร้าง Application ใหม่ ๆ ที่น่าสนใจขึ้นมา เพราะนอกจากจะได้ผลงานออกมาเป็นรูปธรรมแล้ว คุณยังได้ความรู้และได้ฝึกฝนฝีมือการเขียน Code อีกด้วย

ที่มา:  https://medium.com/

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

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

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

• 8 VSCode Add-Ons ที่ Front-end Developers ควรลองนำไปใช้งาน 
• Component-Oriented Programming (COP) คืออะไร 
• 15 เคล็ดลับ เพื่อปรับปรุง Swift Code ให้ดีขึ้น