อยากทำ joystick เหมือน rov อะ เขาทำยังไงกันนะ

Image for post
Image for post

สำหรับคนมีเวลาอ่านน้อย ⏱

บทความนี้จะพาทำ Virtual Joystick แบบเกม ROV โดยมีเครื่องมือดังนี้

กด 🔖 (Bookmark) ไว้อ่านทีหลังกันได้ถ้าไม่มีเวลา
ใครอยากเข้าใจมากขึ้นเริ่มอ่านบทความนี้ได้เลย 👇🏻

หลายคนที่หลงเข้ามาในบล็อกนี้คงจะเป็นคนที่สนใจเกี่ยวกับเกม การทำเกม หรือชอบเล่นเกมกัน เจ้าของบล็อกก็เป็นคนหนึ่งที่ชอบเล่นเกมเหมือนกันค่ะ ซึ่งเกมที่เจ้าของบล็อกกำลังติดและเลิกเล่นไม่ได้ในตอนนี้ก็คือ ROV เคยสงสัยกันไหมคะว่า JoyStick แบบ ROV เนี่ยเขาทำอย่างไรกันนะ วันนี้เราจะพาทุกคนไปดูกันค่ะ (อาจจะไม่ใช่เป๊ะ ๆ แต่ก็ไอเดียแนวเดียวกันน้าาาาา)

แนะนำเครื่องมือที่ใช้ 🛠


tailwind css ชื่อแปลกจังเลย 🎨💄

Image for post
Image for post

สวัสดีค่ะทุกคน ในช่วงนี้คงมีหลาย ๆ คนที่กำลังเบื่อ ๆ กับการที่ต้องอยู่ที่บ้านไปไหนไม่ได้ เราเลยอยากจะแนะนำ Utility First CSS framework ที่มีชื่อว่า Tailwind ให้รู้จัก เพราะเจ้าของบล็อกพึ่งเคยลองใช้งานเป็นครั้งแรกแล้วรู้สึกเลิฟมากกกกกกกกก (ไปอยู่ไหนมาพึ่งรู้จัก) สำหรับใครที่เคยใช้งาน Bootstrap มาก่อนอาจคุ้นตาเพราะการใช้งานของมันมีความคล้ายมาก เลิกร่ายยาวไปดูกันเลยค่ะ

Tailwind CSS คืออะไรกันนะ

เจ้า Tailwind CSS เนี่ยมันคือ css framework ตัวหนึ่งนี่แหละที่สามารถนำไปใช้งานกับ React, Vue.js หรือ Angularjs

CORE CONCEPT’s Tailwind CSS


ลองเปิดใจเขียน Test กันเถอะ ✌🏻

Image for post
Image for post

เมื่อไม่นานมานี้ได้ลองใช้ react-testing-library ในการเขียน test ดูเลยอยากมาแชร์การใช้งานโดยมีฟีเจอร์ง่าย ๆ มาให้เทสต์ไปด้วยกัน

react-testing-library คืออะไร 🤔

เป็น libray ที่ใช้ในการทำทดสอบในส่วนของ React Component โดยจะทำงานร่วมกับ Jest โดยเจ้า react-testing-library เนี่ยมันเตรียมพวกฟังก์ชันของ react-dom ต่าง ๆ ไว้ให้เราใช้หมดแล้ว ทำให้เราสามารถทดสอบพวกการ render ต่าง ๆ ได้เลยไม่ว่าจะเป็น label text เพื่อหา input field, การค้นหาข้อความเพื่อค้นหาปุ่ม รวมไปถึงการค้นหา element ด้วยการใช้ data-testid ก็สามารถทำได้

สิ่งที่จะทำ 👀

จะทดสอบส่วนการแสดงผลของการกรอกรหัสผ่าน ซึ่งเราจะทำการทดสอบการ render ว่า render ตรงตามเงื่อนไขที่เราต้องการหรือไม่

Requirement 💬


Image for post
Image for post

Optimize ให้เร็วขึ้น มันต้องทำไงนะ

วันนี้จะมาลองเล่าเรื่องการ optimize web ของเราให้หน้าเร็วยิ่งขึ้น จากประสบการณ์ของเราเอง อยากลองมาแชร์ให้ทุกคนได้ลองอ่านดู เผื่อจะได้ไอเดียอะไรดี ๆ กลับไป สืบเนื่องมากจากหนึ่งเดือนที่ผ่านมาได้รับมอบหมายให้ทำเว็บของบริษัท ซึ่งเราก็เดฟไปปกติของเรา แต่อยู่มาวันหนึ่ง พี่ CTO ของเราได้เดินมาบอกว่า

test web performance หรือยัง

พร้อมกับการกด test ให้เราดู และเราผู้กำลังทำหน้างง ๆ พร้อมกับการรอดูผลการทดสอบประสิทธิภาพของเว็บก็ได้พบว่า เว็บบริษัทมีคะแนนอยู่ที่ 34

พี่ ​CTO ผู้สุดแสนจะใจดีของบ.เราก็ได้หันมาบอกว่า

อาย พี่ขอ 80 นะ


Image for post
Image for post

ก่อนหน้านี้ได้มีโอกาสลองทำ Multi-Step Forms เป็นครั้งแรกเลยอยากมาลองแชร์วิธีการทำให้ให้เพื่อน ๆ ได้ดู จากบทความก่อนหน้าที่ได้ลองแชร์วิธีการทำ Form Validation ด้วย Formik และ Yup ไป (หากใครยังไม่ได้อ่านสามารถอ่านได้ที่ คลิก) วันนี้จึงอยากจะมาเสนอวิธีการทำ Multi-Step Forms ด้วยการใช้ react hooks, react hook form, yup, และ useContext

แนะนำสิ่งที่จะใช้

โจทย์สำหรับการทำ Form


Image for post
Image for post

📖 สำหรับคนขี้เกียจอ่าน

เราจะใช้ Formik Library ในการทำ validation from ซึ่งจะช่วยให้คุณ

โค้ดตัวอย่าง ↓

โดยทั่วไปสำหรับผู้เริ่มต้นใช้ react และต้องการทำฟอร์มสำหรับอะไรสักอย่างคงต้องค้นหาวิธีของการดึงข้อมูลของฟอร์มใน react เพื่อนำค่ามาใช้งาน ซึ่งคงหนีไม่พ้นการเปิดเว็บ React ซึ่งจะได้ผลการค้นหาดังนี้ ↓

About

Jidapa Pattanang

KKU52 | SC43 |CS30 | YWC16

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store