เมื่อความต้องการในการใช้งาน images ใน website ของแต่ละ device นั้นแตกต่างกัน นอกจาก UX/UI ที่ต้องคำนึงถึงแล้ว perfomance ของ web นั้นก็เป็นสิ่งสำคัญ เพื่อให้ได้ทั้งการทำงานที่รวดเร็วและ UX/UI ที่ดี เราจึงต้องจัดการกับขนาดของภาพที่จะแสดงให้เหมาะสมกับหน้าจอต่างๆ ด้วยเช่นกัน

Responsive images คืออะไร

ปฎิเสธไม่ได้เลยว่าขนาดของภาพนั้นทำให้หน้า web นั้น load ช้าลง และยิ่งถ้าเราเขียน responsive web แน่นอนว่าภาพที่ใช้ก็จำเป็นจะต้อง support ทุก device โดยเราจำเป็นจะต้องใช้ภาพที่มีขนาดใหญ่ก่อนเพื่อความชัดเจน จึงทำให้ที่หน้าจอเล็กนั้นอาจจะต้องรับภาระไปด้วยresponsive imagesจึงน่าจะเป็นทางออกของปัญหานี้ ซึ่งจะทำโดยจะใช้ attribute srcset มาเป็นตัวกำหนดขนาดของภาพที่จะใช้ที่หน้าจอต่างๆ ทำให้แต่ละหน้าจอได้รับขนาดภาพที่เหมาะสม โดยจะมี attribute srcset ที่เพิ่มเข้ามาใน tag img ไว้สำหรับใส่ path image และ หน้าจอซึ่งจะมีสองแบบคือกำหนดโดยดูจาก Retina resolution และความกว้างของภาพค่ะ

ตัวอย่าง code แบบ Retina resolution

<img src="medium.jpg" 
srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
alt="…"
/>

จาก code รูปจะ support ภาพดังนี้ small.jpg จะแสดงที่ หน้าจอปกติ (หน้าจอ laptop) ภาพ medium.jpg แสดงที่หน้าจอมือถือ 2x และ large.jpg แสดงที่หน้าจอมือถือขนาด 3x นั่นเอง…


ในการทำ Responsive Web หรือการทำให้หน้า web ปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ คำสั่งหลักที่จะใช้ check การแสดงผลคือ CSS3 Media Query แต่คำสั่งนี้จะใช้ check ได้แค่ css เท่านั้น ซึ่งถ้าเรา check javascript ด้วยการซ่อนส่วนๆ นั้นด้วย css .. script ก็จะยังคงทำงานอยู่ ทำให้ที่บาง device จะต้องโหลดบางอย่างไปโดยไม่จำเป็น

ดังนั้นหากเราต้องการให้ script นั้นจะโหลดตาม device ที่ต้องการเราจะใช้matchMedia() เข้ามาช่วยในการ ในการตรวจสอบว่าหน้าจอที่แสดงผล
อยู่ในขณะนั้น เป็นขนาดของ device ตามที่กำหนดหรือไม่ (แบบ css Media Query)

มีวิธีการเขียนดังนี้ค่ะ


อย่างที่ทราบกันว่าการเขียน React Components นั้นมี 2 แบบคือ Class Component และ Function Component ( Stateless Component)
ซึ่งหากเราต้องการจะเขียน component โดยมีการเพิ่ม features หรือ action ต่างๆ จะต้องเขียนในรูปแบบของ Class Component ซึ่งเป็น component ที่มีการเก็บ state และสามารถเรียกใช้งาน lifecycle hooks ต่างๆ ได้

แต่โดยส่วนมากเราจะเริ่มเขียนจาก Function Component ก่อน และเมื่อมีการเพิ่ม features ทำให้เราต้องปรับการเขียนเป็นแบบ Class Component ซึ่งการทำแบบนี้ค่อนข้างยุ่งยากและเสี่ยงต่อความผิดพลาดได้ง่าย จึงมีการพัฒนา React Hooks เข้ามาช่วยให้เราสามารถเขียน function โดยไม่ต้อง implement Class นั่นเองค่ะ

*ก่อนที่เราจะใช้ React Hooks อยากให้ลองอ่าน React Lifecycle
(สามารถอ่านสรุปการเลือกใช้งานได้ที่บทความ
อธิบาย React Lifecycle แต่ละอันมีหน้าที่อย่างไร หรือ
สรุปการเลือกใช้งาน React 16.4+ component life-cycle methods )

แนะนำการใช้ State Hook หรือ useState


วันนี้เราจะขอมาพูดถึง tag <datalist /> ที่ frontend อย่างเราๆ อาจจะเคยเห็นผ่านตาจาก doc แต่อาจจะไม่ค่อยได้ใช้กันเท่าไรค่ะ

ก่อนจะไปที่ datalist เรากลับไปที่ tag input กับ select ก่อนนะคะ จะเห็นได้ว่าสองตัวนี้เป็น tag ที่ใช้กับ form การกรอกข้อมูลแทบจะทุกอันเลยทีเดียว

“ อยากกรอกข้อมูลอยู่นะ.. แต่ขี้เกียจพิมพ์จนจบอะ ” — เมื่อใช้ input

“ ข้อมูลแบบเลือกนี่ก็ดีนะ.. แต่พอต้องไถเลือกเยอะๆ แล้วก็ตาลายเหมือนกัน ”
— เมื่อใช้ select

ถึงอย่างนั้น user ก็จะพยายามกรอกข้อมูลให้จบอยู่ดีนั่นแหละ ส่วนนี้ถือว่ามีผลน้อยมากเลย แต่เมื่อมันมีคำว่า “ พยายาม ” นั่นอาจจะทำให้ user ล้มเลิกการใช้งานไปกลางคันได้นั่นเอง

เพื่อให้การกรอก form เป็นไปได้อย่างมีประสิทธิภาพมากที่สุด ตัวที่จะมาช่วยให้ง่ายขึ้นก็คือ datalist นั่นเองค่ะ

<Datalist />

รูปแบบการใช้งานจะประกาศ <input /> ที่ใส่ Attribute list เชื่อมกับ id ของ <datalist /> ค่ะ


สำหรับ Frontend แล้ว คำสั่งตัดบรรทัดแล้วต่อท้ายด้วย … หรือคำสั่ง ellipsis ใน property ของ text-overflow นั้นน่าจะเป็นคำสั่งที่ต้องเคยผ่านมือกันมาบ้างเพราะเป็นการตัดคำที่มีมาตั้งแต่สมัยแรกๆ ที่เขียน css


เมื่อการเขียน react component ทำให้เรา reuse component ได้อย่างไม่รู้จบ ความท้าทายต่อมาก็คือ การปรับแต่งโครงสร้างของ component นั้นๆ ให้รองรับการใช้งานอย่างยืดหยุ่น และหนึ่งประเด็นที่น่าสนใจนั่นก็คือ การเปลี่ยน tag html ให้กับ component ที่มี design เหมือนกัน

ทำอย่างไรให้มันสามารถมี tag ตามที่ควรจะเป็น..

Q: ทำไมถึงต้องใช้ tag ต่างกัน ทำไมไม่ใช้ tag กลางๆ อย่าง <div> หรือ <span> ไปเลยหละ ?

A: เราใส่ tag ที่เหมาะสมกับเนื้อหา เพื่อให้ Search Engine เข้าใจเนื้อหาในเว็บไซต์ของเรามากขึ้น ตามหลักมาตรฐานของ html5 นั่นเองค่ะ

( สามารถดูการใช้ tag html ที่เหมาะสม ได้ที่ https://www.designil.com/which-html5-tag-to-use.html )

วิธีการ duplicate component ซ้ำแล้วเปลี่ยน tag อาจจะเป็นวิธีที่ง่ายที่สุด แต่อาจจะทำให้เกิดความสับสนในการ maintenance ในอนาคต เพราะฉะนั้นจากประสบการณ์ตรงเราก็ไม่ขอแนะนำวิธีนี้ (เวลา search ก็งง ตกหล่นง่ายอีกด้วย)

เราจึงขอเสนอวิธีที่เราเคยลองใช้มานะคะ ตามแต่สถานการณ์

หากเป็นการสลับ tag แค่ 2 tag ให้ใช้ if

ข้อเสียของวิธีการเขียนแบบนี้คือ เราจะต้องใส่ style ไว้สองจุด ซึ่งก็ทำให้เวลาเราแก้ css เราก็ต้องแก้ 2 จุด ดังนั้นเราอาจจะเขียน if เป็นอีกแบบค่ะ…


พูดถึงการทำ tab เป็นของที่ frontend ที่เขียน code มาซักระยะจะต้องได้พบเจอกันทุกคน ไม่ว่าจะจะใช้ script สำเร็จรูปมาช่วย (เช่น https://jqueryui.com/tabs/ ) หรืออาจจะใช้ attr check ของ radio ใน css เข้ามาช่วยในการทำ (แบบนี้ https://codepen.io/llgruff/pen/ZGBxOa) แล้วแต่ case ที่จะต้องเจอและเลือกใช้

แล้วถ้าเป็น react หละ เราจะใช้ท่าไหน ?

ลืมการเขียนโดยใช้ jquery หรือ css ไปได้เลยค่ะ เพราะ react มีวิธีการเขียน tab ที่ง่ายกว่านั้น เพียงแค่ก่อนอื่นเราจะต้องเข้าใจระบบการทำงานของมันซะก่อน

props กับ state สิ่งสำคัญที่ต้องเข้าใจก่อนไปต่อ

ใช่แล้วค่ะ เนื่องจากว่าเราจะใช้หนึ่งในนี้เป็นตัวเช็ค tab กัน แต่เราต้องเข้าใจก่อนว่าพวกมันต่างกันยังไงดังนี้ค่ะ

props เป็น data ที่สามารถส่งจาก component แม่สู่ component ลูกได้ สามารถใช้ได้กับทั้ง stateless component และ pure component เลยค่ะ

state เป็น data ที่ใช้ใน component นั้นๆ เท่านั้น ถ้าเราจะใช้ state จะต้องเขียน component แบบ pure component เท่านั้นค่ะ

(อ่านต่อได้ที่ สวัสดีครับ ผมมีชื่อว่า “React” )

stateless component และ pure component คืออะไร ?

การเขียน component นั้นจะมีอยู่สองแบบคือ

Stateless Component หรือ component ที่รับข้อมูลเข้ามาแล้วแสดงผลเพียงอย่างเดียว ไม่มีการใช้ state…


การเรียนพื้นฐาน css นั้น ใช้เวลาแค่ 15 นาทีก็สามารถเขียนได้
แต่มันอาจจะใช้เวลาเป็นปีๆ กว่าที่เราจะหาวิธีดีๆ จัดการกับ style

credit: https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55

front-end developer ที่เขียน css มา จะทราบดีว่า css เป็นภาษาที่มีคำสั่งค่อนข้างจำกัด ไม่มีตัวแปร loop หรือ function ใดๆ เป็นภาษาที่เราแค่เขียน style ไปที่ element ที่เรากำหนดเท่านั้น

แม้ว่าหลายปีผ่านมานี้มีตัวช่วยที่เข้ามาทำให้การเขียนและจัดการ css ง่ายขึ้นอย่าง sass หรือ less กระทั่งการเขียน class แบบ BEM แต่ก็ไม่ได้แก้ปัญหาได้เต็ม 100% จนกระทั่งเร็วๆ นี้ JavaScript-based tools ก็ได้เริ่มเข้ามาช่วยแก้ปัญหาการจัดการกับ css ด้วยการปรับวิธีเขียน css นั่นเองค่ะ

styled-components เป็นหนึ่งใน js library ที่ช่วยให้เราสร้าง component จาก html element ต่างๆ เช่น div, span, a, p หรืออื่นๆ และใส่ styleให้กับเรา และเอาผลลัพธ์ที่ได้ไปใช้เสมือนเป็น component

แนวคิดของ styled-components คือการใส่ style ให้กับ component เล็กๆ ที่สามารถ reuse เพื่อนำไปใช้และแก้ไขได้อย่างมีประสิทธิภาพ อีกทั้งยังเอา css มาเขียนในรูปแบบของ programming ทำให้เพิ่มวิธีการจัดการคำสั่ง css ได้มากขึ้นอีกด้วยค่ะ แต่ถ้ายังไม่เห็นภาพ เรามาลองดูตัวอย่าง code กันดีกว่าค่ะ…


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

ทุกอย่างเริ่มได้แค่ตั้งใจ
แค่คิดว่าจะพูดและเริ่มที่จะฝึก ก็เท่ากับคุณเปิดโอกาสที่จะแสดงตัวตนของคุณให้โลกรู้แล้วนะ

คุณจะพูดอะไร
สำหรับมือใหม่ก่อนอื่นก็ต้องมีหัวข้อที่ชัดเจน และก็ต้องทำความเข้าใจกับเนื้อหาให้ดีเสียก่อน ถ้าอยากจะลองพูดแต่ยังไม่มีหัวข้อที่สนใจก็ลองเริ่มจากอะไรที่เราถนัดดูสิรับรองไหลลื่น

เตรียมพร้อมร่างกาย
ร่างกายดีก็มีชัยไปกว่าครึ่ง เพราะถ้ามีอาการป่วยเช่น ไอ น้ำมูกไหล พูดไปหยุดไปนี่ก็ไม่ต้องไปต่อแล้วหละ อย่าคิดว่าอุปสรรคเล็กน้อยเหล่านี้ไม่สำคัญนะ มันอาจทำให้การพูดของคุณล่มได้เลยหละ

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

ร่างบทพูด
เดี๋ยวก่อนๆ อันนี้ไม่ได้จะให้เขียนหรอกนะว่าจะพูดว่า “สวัสดีครับ วันนี้ผมจะมาพูดถึง … ” แต่ว่าจะให้ร่างรายการหัวข้อของเรื่องที่จะพูด เราอาจจะเขียนในกระดาษ หรือทำ powerpoint ประกอบ เพื่อช่วยให้เรากำหนดช่วงเวลาที่พูดเนื้อหาต่างๆ และทำให้เราจัดสโคปเนื้อหาได้ง่ายขึ้นอีกด้วยค่ะ

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

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


เมื่อการนั่งทำงานกับกางเกงตัวเก่ง ไม่ได้ราบรื่นเหมือนเดิม เพราะบวกเพิ่มเติมคือ “ความแน่น” ก็ได้เวลาที่เราควรจะหาทางออกให้กับตัวเอง ว่าควรจะไป​หากางเกงตัวใหม่ หรือ ควรจะใส่มันต่อ..

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

แค่วันละ 30 นาทีก็ยังดีวะ…

ช่วง 30 นาทีตอนเย็นหลังเลิกงานเนี่ยแหละกำลังได้ แต่แค่คิดก็เริ่มติดเพราะเวลาเลิกงานในแต่ละวันมันเท่ากันซะที่ไหน โชคดีที่ออฟฟิศเรามี option ออกกำลังกายมาให้ ส่วนจะมีอะไรบ้างนั้นไปดูกัน!

วันที่เคลียร์งานเสร็จไว พวกเราก็ไปฟิตเนสกัน

ฟิตเนสที่ Tencent เตรียมไว้ให้พนักงานอยู่ที่โรงแรม Swissôtel Le Concorde Bangkok ชั้น 5 การเดินทางก็แสนสะดวกเพราะห่างออฟฟิศของเราไปแค่ 2 ป้ายรถเมล์เท่านั้นเอง จะนั่งรถเมล์ วินมอไซค์ หรือรถส่วนตัวไปก็ได้ หรือถ้าวันไหนรถติด ก็นั่งรถใต้ดินไปแค่ป้ายเดียวเท่านั้นเอง และที่สำคัญก็คือ เค้าให้พวกเราใช้บริการได้สูงสุด 20 คนต่อวันแน่ะ

ว่าแต่ที่นี่มีอะไรให้ทำมั่ง… ขอบอกเลยว่าเยอะมากกก ทั้งลู่วิ่ง ปั่นจักรยาน เล่นเวท เค้ามีให้ครบ ส่วน class ออกกำลังกายของที่นี่ก็มีเพียบ จะ dance มวย โยคะ สลับกันไปทุกวัน แล้วที่พีคก็คือสระว่ายน้ำที่รับรองว่าไม่ใช่อ่างปลาทองแน่นอนจ้า…

NeeMeOn

Lead Front End Developer @Tencent (Thailand)

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