Open React History | Dev History
React is the most popular JavaScript library right now, and everyone is welcome to Dev History React.
React was created in 2011 by Jordan Walke, a Facebook engineer, and opened as an open-source in 2013. React was then developed to the present day. And it hit a landslide.
In the old days, we had to manage the DOM ourselves. But then we will throw this function to react as a manager. The reaction will let us enter the logic and ui of the application in the way we want to pass the so-called JSX to react. After that, the reaction will handle the task of updating the on-screen UI. And when the UI is changed on the web page, the reaction will update us immediately. And with many advantages, it will make the reaction suitable for the development of applications in this era, be it.
Fast to Learn Start study and use quickly
Reusability separates components and reuses them more easily
✅ the most popular library.
✅ have communitry that is gradually supplying abundantly.
✅ to make Mobile App easy with native reaction
Let me ask my friends what they want to do about Dev History.
Comments can tell each other.
# programmer # Programmer # Developer # Work experience # History # Self development # Tool # Trending # 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 ไปพร้อมกัน
