เปิดประวัติ React | Dev History
React คือ JavaScript library ที่ได้รับความนิยมมากที่สุดในตอนนี้ และยินดีต้อนรับทุกคนเข้าสู่ Dev History React
React ถูกสร้างขึ้นเมื่อปี 2011 โดยคุณ Jordan Walke วิศวกรของ Facebook และได้เปิดเป็น Open-source ในปี 2013 จากนั้น React ก็ได้รับการพัฒนาเรื่อยมาจนถึงปัจจุบัน และมันก็ฮิตถล่มทลายไปเป็นที่เรียบร้อย
จากที่สมัยก่อนเราต้องจัดการ DOMด้วยตัวเอง แต่ต่อไปเราจะโยนหน้าที่นี้ให้กับ react เป็นคนจัดการ โดยreactจะให้เราป้อนlogicและuiของแอปพล ิเคชั่นในแบบที่เราต้องการผ่านสิ่งที่เรียกว่า JSX ไปให้กับ react หลังจากนั้น react จะเป็นคนจัดการงานในส่วนของการอัพเดตUIบนหน้าจอให้กับเรา และเมื่อมีการเปลี่ยนแปลงUIบนหน้าเว็บตัวreactก็จะอัพเดตให้เราทันที และด้วยข้อดีหลายอย่างจึงทำให้reactเหมาะสำหรับการพัฒนาแอปพลิเคชั่นในยุคสมัยนี้ ไม่ว่าจะเป็น
✅Fast to Learn เริ่มต้นศึกษาและใช้งานได้อย่างรวดเร็ว
✅Reusability แยกส่วนประกอบ และนำกลับมาใช้ใหม่ได้ง่ายขึ้น
✅เป็น library ที่ได้รับความนิยมมากที่สุด
✅จึงมี communitry ที่ค่อยซัพพอร์ตอย่างมากมาย
✅ต่อยอดในการทำ Mobile App ได้ง่าย ด้วย react native
ขอถามเพื่อนๆหน่อยครับว่า อยากให้ทำ Dev History เรื่องอะไร
คอมเมนต์บอกกันได้เลยนะครับ
#programmer #โปรแกรมเมอร์ #developer #ประสบการณ์ทำงาน #ประวัติ #การพัฒนาตน #เครื่องมือ #ติดเทรนด์ #react #reactjs
หลายคนงงกับคำว่า “skin” ในบริบท UX/UI เพราะมันไม่ได้เป็นคำที่ใช้กันทุกทีม แต่แนวคิดมันชัดมาก: skin คือ “ชั้นเปลือก/หน้าตา” ขององค์ประกอบ (UI element) ที่ผู้ใช้มองเห็นและรับรู้ได้ทันที เช่น สี ฟอนต์ ระยะห่าง เงา เส้นขอบ ไอคอน สไตล์ปุ่ม และภาพประกอบต่างๆ ถ้าถามว่า skin เปรียบเทียบได้กับอะไรของมนุษย์ คำตอบที่ตรงสุดคือ “ผิวหนัง” จริงๆ เพราะผิวหนังเป็นส่วนที่คนอื่นเห็นก่อน บอกความรู้สึกแรก (first impression) ได้ และยังช่วยสื่อสารสถานะบางอย่าง เช่น ซีด/แดง แห้ง/ชุ่มชื้น คล้ายๆ กับ UI ที่ดูน่าเชื่อถือ/ไม่น่าเชื่อถือ ดูทันสมัย/ล้าสมัย หรืออ่านง่าย/อ่านยาก แต่เพื่อให้ใช้งานได้จริง ผมชอบอธิบายเป็น 3 ชั้นแบบจำง่าย: 1) โครงกระดูก (Structure) = โครงร่างและเลย์เอาต์ เช่น วางปุ่มตรงไหน ฟอร์มมีกี่ช่อง 2) กล้ามเนื้อ/การทำงาน (Behavior) = การโต้ตอบ เช่น กดแล้วเกิดอะไร hover/focus ทำงานยังไง 3) ผิวหนัง (Skin/Visual layer) = ความสวยงามและการรับรู้ เช่น สี primary, radius ของปุ่ม, typography ตัวอย่าง skin ใน UX element ที่เห็นชัด: - ปุ่ม (Button): สีพื้น ปุ่มมุมโค้ง เงา ความหนาตัวอักษร สถานะ disabled เป็นสีเทา - อินพุต (Input): สีเส้นขอบตอนปกติ/ตอน error, สีข้อความ placeholder, icon ด้านในช่อง - การ์ด (Card): ระยะ padding, ความโค้ง, shadow, เส้นแบ่ง - นาฬิกา/ตัวบอกเวลา (อย่างไอคอนนาฬิกาบนภาพปก): เป็น skin ที่ช่วยสื่อธีม “ประวัติ/ไทม์ไลน์” ให้คนเข้าใจทันทีแม้ยังไม่อ่าน แล้วทำไมคำถามนี้ถึงสำคัญ? เพราะหลายครั้งทีมเข้าใจผิด คิดว่า “ทำ skin ให้สวย” = UX ดี ทั้งที่ UX ต้องดีตั้งแต่โครงสร้างและพฤติกรรมด้วย เช่น ปุ่มสวยมากแต่กดแล้วยังไม่บอกสถานะโหลด ผู้ใช้ก็หงุดหงิดอยู่ดี ทิปส่วนตัวเวลาออกแบบ skin ให้ไม่พัง UX: - เน้นอ่านง่ายก่อนสวย: contrast ตัวอักษรกับพื้นหลังต้องพอ - สถานะต้องชัด: hover, active, focus, error ควรต่างกันจริงๆ - สม่ำเสมอทั้งระบบ: ทำเป็น design system (เช่น กำหนดสีหลัก ฟอนต์ spacing) จะลดงานแก้ซ้ำ - ระวัง “สกินหนาเกิน”: ใส่เงา/กรอบ/สีเยอะจนรก ทำให้ผู้ใช้หาเป้าหมายไม่เจอ สรุปสั้นๆ: skin ในส่วนประกอบของ UX element เปรียบเทียบได้กับ “ผิวหนังของมนุษย์” เพราะเป็นชั้นที่ผู้ใช้เห็นก่อนและสร้างความรู้สึกแรก แต่ UX ที่ดีต้องครบทั้งโครงสร้าง การทำงาน และ skin ไปพร้อมกัน