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

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

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

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

CORE CONCEPT’s Tailwind CSS

1. Utility-First — ข้อเนี้ยเขาเคลมว่าเราสามารถใช้งาน custom css ได้โดยที่เราไม่ต้องเขียน css เลย เช่น การใส่พื้นหลังของ card ให้เป็นสีขาวสามารถทำได้โดยการเพิ่ม bg-white ที่ class

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

เมื่อไม่นานมานี้ได้ลองใช้ 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 💬

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

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

test web performance หรือยัง

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

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

อาย พี่ขอ 80 นะ

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

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

• React Hooks คือ ฟีเจอร์ของ react ที่ช่วยเข้ามาจัดการกับ state และ lifecycle ของ function components

• React Hook Form คือ library ที่ช่วยในการจัดการฟอร์ม ซึ่งเจ้าตัวนี้เป็นตัวที่ขึ้นชื่อในเรื่องของ Performance, ลดการ code ที่ใช้การจัดการกับฟอร์ม, ลดจำนวนการ render ซ้ำ ๆ และ mount ได้เร็วขึ้น

• Yup คือ Schema ของข้อมูลที่อยู่ในรูป Object ซึ่งใช้สำหรับการทำ validation

• useContext คือ Hook API ที่ช่วยในการจัดการกับ global state คล้าย ๆ กับ redux

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

1. อยากทำ Form เป็น Step ๆ
2. อยาก validation Form ถ้ากด Next ต้อง validate…

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

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

• สามารถนำค่าจากฟอร์มมาใช้งานได้อย่างรวดเร็ว
• สามารถ validate และจัดการ error message ได้
• สามารถจัดการการ submit form ได้

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

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