Engineer Indy Blog

ใครที่เริ่มต้นเขียนเว็บคงจะเคยเห็น CSS Reset กันเป็นประจำ แต่เอาจริงๆผมก็เพิ่งมารู้เมื่อไม่นานมานี้เองว่า ไอ้ที่เราเขียนเนี่ย มันมีชื่อเรียกว่า CSS Reset โดยหน้าตามันก็ประมาณนี้ CSS Reset อย่างที่เราเข้าใจ CSS Reset มีหน้าที่ทำการเคลียร์ style sheet เบื้องต้น ที่ browser มีมาให้ ให้อยู่ในสถานะที่พร้อมเอาไปเขียนต่อได้ ภาพ Cover ไม่เกี่ยวกับเนื้อหา : Photo by Pankaj Patel on Unsplash ถ้าอย่างนั้น เราเขียน CSS Reset แบบไหนดีล่ะ เอาตรงๆก็คงแล้วแต่งาน แต่เบื้องต้นที่ผมลอง Research มา ท่านี้ก็ใช้ได้ สำหรับแต่ละตัวคืออะไรบ้าง ลองอ่านจาก ลิงค์นี้ โดยเราสามารถสร้างไฟล์ CSS Reset ไว้ก่อน แล้วค่อย Include มาเข้าใน CSS ตัวหลัก แบบนี้โค๊ดก็จะไม่รก สวยงามขึ้น

จะสิ้นเดือนมกราแล้ว รู้สึกเหมือนเพิ่งผ่านการดูพลุเมื่อเร็วๆนี้อยู่เลย พอแก่แล้ว เวลามันเร็วขึ้นหรือเปล่านะ ? งั้นบทความนี้ผมขอบันทึกสิ่งที่ควรทำในเดือนแรกของปี เก็บไว้หน่อย ปีหน้าจะได้มีอะไรทำมากขึ้น ท้ายๆปีอย่างธันวาคม น่าจะเป็นฤดูกาลแห่งการสรุปบทเรียนต่างๆ ไม่ว่าจะเป็นงาน การลงทุน เรื่องราวทั้งปี หนังหรือเพลงที่ชอบสุดประจำปี หรือแม้กระทั่งการซื้อของลดราคา และการหยุดยาวไปเที่ยว กิจกรรมของแต่ละคน มันคงต่างกันแหละนะ แต่ดูเป็นไอเดียได้ และนี่คือ 10 สิ่งที่ควรทำในเดือนแรกของปีของผมเอง จ่ายภาษี ขูดหินปูน ตรวจสุขภาพ ทำความสะอาดบ้าน ตั้งเป้าหมาย หาเพื่อนใหม่ วางแผนการเงิน ค้นหางานที่สนใจ ลางานไปเที่ยว ทักทายเพื่อนเก่า Photo by Ian Schneider on Unsplash จ่ายภาษี จริงๆแล้วมันสามารถจ่ายได้ถึงเดือนไหน ผมก็ไม่แน่ใจ แต่เพื่อให้เราได้เงินคืนแล้วนั้น ยิ่งไวยิ่งดี มันจะทำให้คุณหลุดพ้นจากพันธนาการ และมีเงินเอาไปใช้จ่ายนู่นนี่ ฮ่ะๆ ขูดหิ...

หากทำงานสายคอมพิวเตอร์ คงไม่มีใครไม่รู้จัก Font  ย้อนกลับไป ตอนคุณเริ่มจับคอมใหม่ๆ หากคุณใช้ Word Office คุณต้องรู้จักการเปลี่ยนฟ้อนแน่นอน Font บนโลกมีมากมาย หลากหลายสไตล์ มีภาษาให้เลือกทุกประเทศ แต่ละฟ้อนให้ความรู้สึก อารมณ์ที่ต่างกันไป แต่ทราบกันไหมว่าฟ้อนมีกี่ประเภท อะไรบ้าง และมีวิธีเลือกใช้อย่างไร Font แบ่งเป็น 5 ประเภท ผมแบ่งตามประเภทใน Google Font ซึ่งที่อื่น อาจแบ่งแตกต่างกันไป  Serif ลักษณะเฉพาะ : ในภาษาอังกฤษจะมีขีดเล็กๆที่ปลายตัวอักษร เหมาะสำหรับ : ใช้ในเนื้อความที่มีความยาว เช่นนิยาย เพราะอ่านง่าย ให้ความรู้สึกคลาสสิก Sand Serif ลักษณะเฉพาะ :  จุดเด่นคือความเรียบ เกลี้ยง เส้นมีขนาดใกล้เคียงกันตลอดทั้งตัวอักษร เหมาะสำหรับ :  ใช้ในหน้าเว็บหรือง่านดิจิตอล ให้ความรู้สึกทันสมัย Display ลักษณะเฉพาะ :  ฟ้อนประเภทนี้ จะมีการตกแต่งให้ดูโดดเด่น มีเอกลักษณ์เฉพาะตัว เหมาะสำหรับ :  มักใช้ในการพาดหัวเรื่อง ไม่เหมาะนำมาใช้พิมพ์เนื้อความ Handw...

บทความนี้ขอบันทึก Regular Expression (Javascript) ที่คิดว่าอาจจะมีโอกาสได้ใช้ เนื่องจากส่วนตัวคิดว่า มันมีประโยชน์มาก แต่พอไม่ได้ใช้มันก็ลืม ดังนั้นถ้าจดคอนเซปหลักๆไว้ น่าจะกลับมาดูได้ภายหลัง RegExp Regular Expression คือรูปแบบตัวอักษร ส่วนใหญ่ถูกใช้ในการค้นหา หรือการแทนที่ตัวอักษรในรูปแบบ Text  สรุปง่ายๆคือ ประโยชน์ของ RegExp ช่วยให้ประหยัดเวลาเมื่อต้องการเล่นกับ Text ตัวอย่างเช่น เราอยากรู้ว่าข้อความที่ได้มา มีคำต้องห้ามหรือไม่ ถ้าไม่ใช้ RegExp เราก็ต้องสร้าง Function มาวนลูปเพื่อเช็คทีละ Character ซึ่งค่อนข้างยุ่งยากและสิ้นเปลืองทรัพยากร ดังนั้นจากตัวอย่างเดียวกันเราสามารถใช้ RegExp เช็คได้เพียงบรรทัด ซึ่งก็จะประหยัดเวลาไปได้มาก ตัวอย่าง ที่พบบ่อยแต่จำไม่ค่อยได้หรอก ต้องพยายามกลับมาอ่านเอา

ใครที่นอนจมอยู่บ้าน แช่บนโซฟาทุกเสาร์อาทิตย์ เบื่อแล้ว อยากออกไปหากิจกรรมเปิดหูเปิดหน้า เชิญทางนี้ เพราะบทความนี้ ขอเอาแหล่งรวมกิจกรรมน่าสนใจ มาแบ่งปันครับ Thailand Exhibition เว็บไซต์รวมรวมงานสัมนา งานจัดแสดง งานกิจกรรม งานพบปะสังสรรค์ เยอะแยะตาแป๊ะไก่ รวบรวมมาแล้วให้ท่านเลือกชม งานดีๆมีเพียบ สามารถดูล่วงหน้าได้เป็นปี เพื่อจัดสรรเวลาให้พร้อม ก่อนออกไปลุย โดยงานต่างๆจะแบ่งออกเป็นหมวดหมู่ เหมาะสำหรับคนหลากหลายประเภท เช่น งานของกิน ช็อปปิ้ง สัตว์เลี้ยง แฟชั่น รถยนต์ และอื่นๆอีกมามากมาย โดยคุณสามารถค้นหาตามสถานที่ หรือตามหมวดหมู่ที่ชื่นชอบได้ สะดวกมาก ส่วนตัวผมชอบไปดูว่าปีนี้งานหนังสือจะจัดวันที่เท่าไหร่ จะได้แพลนเงินถูก ฮ่ะๆ นอกจากเว็บไซต์นี้จะช่วยคุณค้นหาสถานที่เที่ยวได้แล้ว เค้ายังเปิดโอกาสให้พ่อค้าแม่ค้าติดต่อผู้จัดงาน เพื่อจับจองพื้นที่ในงานจัดแสดงสินค้าได้อีกด้วย

หนึ่งในดวงใจ Icon Library สำหรับชาว React แล้วคงหนี้ไม่พ้น react-icons  ด้วยความหลากหลายของไอคอน รวมไอคอนไลบรารี่ ที่ชาวเดฟรู้จักเป็นอย่างดี ไว้ในที่เดียว มีทั้ง Ant Design, Bootstrap, Font Awesome และอื่นๆอีกหลายสไตล์ React-Icons อย่างที่บอก เมื่อสามารถเลือก Icon ที่ต้องการ ได้หลากหลาย  Library ตัวนี้จึงเป็นตัวจบ การใช้ Icon ใน React เลยทีเดียว ข้อแนะนำ ถึงแม้จะใช้ได้หลายสไตล์ก็ตาม แต่ถ้าเอาสไตล์ที่แตกต่างกันมาใช้ด้วยกัน มันก็ไม่เข้ากันอยู่ดี ดังนั้นข้อแนะนำสำหรับผมคือ ถ้าเราใช้ Font Awesome แล้วมันเพียงพอ ก็ใช้ Original ของมันไปดีกว่าครับ อาจจะลองเลือกดูสักสไตล์ที่เข้ากับแอพของเรา แล้วใช้อันนั้นไปเลย แต่ถ้ามันไม่เพียงพอค่อยมาใช้ React-Icon ก็ได้

ตามหัวเรื่องเลย วันนี้วันที่ 23 มกราคม 2023 ผมดูหนังกับซีรีส์ไป 18 เรื่อง  ถามว่าทำยังไง? เลิกงานปุ๊บ ออกไปวิ่งแปปนึง หลังจากนั้น กลับมาอาบน้ำ และนอนแช่บนโซฟาแบบไม่เกรงใจใคร ยิ่งวันหยุดนี่ไม่ต้องสืบ เปิด Netflix ตั้งแต่เช้ายันค่ำ ถามว่าทำทำไม? จริงๆบทความนี้ แค่อยากจะมาแชร์ทริคการจดบันทึกหนังที่ดูบนแอพ  Notion   ใครเคยเป็นไหม เวลาที่ดูหนังเยอะๆ แล้วจำไม่ได้ว่าดูเรื่องอะไรไปบ้าง อย่างปีที่แล้วดูหนังไปกี่เรื่อง ดูแนวไหนมากที่สุด ชอบหนังเรื่องอะไรมากที่สุด จำกันได้ไหม บอกเลยว่า ผมจำไม่ค่อยได้ ดังนั้นเราจะมา Track หนังที่ดูกัน โดยผมจะแชร์หนังที่ผมดูผ่าน ลิงค์นี้ คนที่ใช้งาน Notion กันอยู่แล้ว สามารถเอาไปสร้าง Template ของตัวเองได้เลย แต่ถ้าใครยังไม่รู้จัก ก็ไปกูเกิ้ลเอานะครับ ไม่ยาก มาดูกันว่าปีนี้ผมจะดูหนังไปกี่เรื่อง และมีเรื่องไหนที่ได้ 10/10 คะแนน จากผมบ้าง เดี๋ยวท้ายปีจะมาสรุปอีกที

บทความนี้ขอเสนอ Library น่าใช้ สำหรับนักพัฒนาที่ต้องการใช้งาน Drag and Drop ฟังก์ชั่น แต่ก่อนอื่น ไปทำความรู้จัก Drag and Drop (DND) ก่อนว่ามันคืออะไร? Drag and Drop ฟีเจอร์นี้เป็นคุณสมบัติของ HTML's APIs ที่อนุญาติให้คุณสามารถลากวาง HTML Element ได้ ส่วนใหญ่มักนำไปใช้ในโปรดักส์ เช่น Todo List หรืองานที่ต้องการให้ User เข้าใจการทำงานง่ายๆอย่าง การลากไฟล์ไป-มา ระหว่าง Folder ทีนี้เมื่อต้องการใช้งานกับ React มี Library หลายตัว ที่เป็นที่นิยม ผมขอเสนอหนึ่งตัวเด็ดๆ นั่นคือ.. React-Beautiful-DND ผู้พัฒนา Library เราน่าจะรู้จักกันเป็นอย่างดี คือ Atlassian หรือเราอาจคุ้นหูกับโปรดักส์ JIRA มากกว่า ข้อดี มี Documant ให้อ่านเยอะ เข้าใจง่าย มีฟีเจอร์สำคัญๆให้ใช้งาน และปรับแต่งได้เยอะ CSS พื้นฐานที่มีมาให้ค่อนข้างดูดี รองรับการใช้งานบนหลากหลายอุปกรณ์ ใช้งานได้ฟรี เป็น Apache Licence V2 ข้อสังเกตุ เนื่องจากไม่ใช่ผู้พัฒนาอิสระ ต้อง Focus กับงานอื่นๆก่อน Library จึงไม่ได้มีการอัพเดทเป็นเวลานาน ทำให้มีความเสี่ยงหากมีบัค แต่ผู...

"นักวาดรูปที่เก่งไม่ใช่คนที่มีเทคนิคขั้นสูง แต่เป็นคนที่ใช้ AI เป็น"   ปัจจุบันคงปฏิเสธไม่ได้ว่า AI เข้ามามีส่วนในการพัฒนาวงการศิลปะ ผู้คนไม่จำเป็นต้องวาดรูปได้ ก็สามารถสร้างงานศิลปะล้ำๆได้ ทำให้จินตนาการเป็นสิ่งที่สำคัญ และถูกพัฒนาต่อยอดกันได้ง่าย จากที่ศิลปะเคยจำกัดอยู่ในกลุ่มคนที่เป็นศิลปินเท่านั้น ตอนนี้ถูกขยายวงกว้างไปยังวงการใดก็ได้.. บทความนี้ผมเอาเครื่องมือดีๆมานำเสนออีกเช่นเคย เป็นเครื่องมือวาดรูป ที่ทำให้ใครๆ ก็สามารถวาดมังงะได้  Giga Manga เครื่องมือตัวนี้เป็นแอพพลิเคชั่นที่อยู่ภายใต้โครงการ Google Arts & Culture ซึ่งเป็นที่รวบรวมเทคโนโลยีเกี่ยวกับศิลปะ วัฒนธรรมมากมาย โดย Giga Manga เป็นเครื่องมือช่วยวาดตัวละครมังงะ (การ์ตูนญี่ปุ่น) โดยใช้ Machine Learning เก็บข้อมูลสไตล์ของการ์ตูนญี่ปุ่น แล้ว Generate รูปภาพออกมา ขั้นตอนการวาดก็ไม่ยาก เริ่มจากวาดโครงสร้าง และลงสี จากสร้างก็ Generate รูปที่ต้องการได้เลอะ และนี้คือสิ่งที่ผมได้จากการวาดสามนาที โดยใช้ Trackpad See Ya.

บทความนี้พูดถึง Redux Alternative กัน  สำหรับคนที่ใช้ State Management มาสักพัก น่าจะเคยใช้ Redux เป็นตัวเริ่มต้นกันมาแล้ว คงไม่ต้องต้องบรรยายถึงสรรพคุณ เพราะมันคือเรือดำน้ำที่ติดอาวุธครบทั้งพิสัยใกล้ พิสัยไกล แต่ถ้าคุณไม่ได้อยากใช้ความสามารถ ที่มากมายขนาดนั้น ผมขอเสนอ.. Zustand State Management ที่ตัวเล็ก เบา ใช้งานง่าย โลโก้ก็น่ารัก เอ๊ะเกี่ยวไหม เอาเป็นว่าเล็กแต่การใช้งานก็ครบถ้วนกระบวนความ มีทั้ง Javascript และ Typescript ให้ใช้ สามารถใช้ Redux Devtool ได้ ใครใช้บ่อยก็จัดไป มี Middleware ให้เล่นหลากหลาย ต้องไปลองดู สรุป ถือเป็นอีกหนึ่งตัวเลือกในหลายๆตัว ผมคิดว่าใช้ง่าย และ Document อ่านได้ ไม่ยากเกินไป อยากให้ลองเล่นกันดูครับ

บทความนี้ขอบันทึกการใช้งาน Grid CSS เนื่องจากผมใช้ Flex จนเคยชิน บางสถานการณ์ควรใช้ Grid ก็ใช้ Flex หน้าตาเฉย ดังนั้นบทความนี้ ผมรวบรวม Grid CSS property น่าใช้เอาไว้เตือนความจำ ตัวอย่าง

เกร็ดเล็กน้อยวันนี้คือ เทคนิคทำเซลล์ให้เป็นค่าคงที่ ส่วนใหญ่ใช้ในกรณีที่ ต้องการนำค่าคงที่มา บวก ลบ คูณ หาร กับค่าเปลี่ยนแปลง ตัวอย่างเช่นคำนวณดอกเบี๊ยคงที่ เป็นต้น ซึ่ง Google Sheets เราสามารถกดที่ลูกศรด้านหน้า Fx ตามรูปด้านล่าง จากนั้นเลือก Manage named rages  เมื่อเลือกแล้ว สามารถเปลี่ยนชื่อตามรูปด้านล่าง เป็นอันเสร็จพิธี ส่วนวิธีการใช้นั้นแสนง่าย โดยเราสามารถเขียนสูตรโดยระบุชื่อของค่าคงที่ได้เลย ตามรูปด้านล่าง

บทความนี้เอา Library ของดีมาแนะนำ เป็น Lib ที่เกี่ยวกับการสร้าง Avatar หรือชาวนาวีที่เรารู้จัก ถุ๊ย หมายถึงรูปโปรไฟล์ที่เอาไว้แสดงอัตลักษณ์เฉพาะตัวของแต่ละบุคคล ในบางงานที่ระบบไม่อยากให้ผู้ใช้งาน ใช้รูปของตัวเองจากการอัพโหลด เช่น โปรไฟล์ของ Netflix หรืออื่นๆ ด้วยเหตุผลใดก็ตาม เราสามารถใช้ Library นี้ ในการสร้างรูปโปรไฟล์เริ่มต้นให้กับ user ได้เลย DiceBear หลักการทำงานของ DiceBear ก็คือ เราสามารถเลือก Style ของ Avatar หรือเซตรูปแบบ โดยมีให้เลือกค่อนข้างเยอะ มีทั้งแบบแนวตลก น่ารัก มินิมอล สามารถเลือกตามความเหมาะสมกับแอพ หรือเว็บของเราเลย หลังจากเลือก Style แล้ว เราก็เลือก Options เพื่อเปลี่ยนหน้าตาของ Avatar โดยสามารถปรับเปลี่ยนได้หลากหลาย เช่น เปลี่ยนเพศ เปลี่ยนหน้า สีผิว เส้นผม ตา ขนาด บลาๆๆ ซึ่งแต่ละ Style ก็มี Options การปรับแต่งที่ไม่เหมือนกัน ดูเพิ่มเติม สามารถเลือกใช้งาน DiceBear ได้ 3 รูปแบบคือ JS Library ด้วยการใช้ npm install HTTP API วิธีนี้ง่ายมาก เราสามารถเรียกใช้งานรูป Avatar จาก link...

ใครเป็นเหมือนผมบ้าง เวลาที่ Frontend dev ทำงานไปก่อนฝั่ง Backend แล้วไม่รู้ว่าจะใช้ Api จากไหนมาเทส Fetching function เวลาขึ้นโปรเจคใหม่ หากอยากได้ Mock Api แบบเร็วๆโดยไม่ต้องลงมือเขียนเอง ผมมีตัวนึงมาแนะนำ JSONPlaceholder เป็น Mock Api ที่เราสามารถใช้ทดสอบ CRUD ได้ ค่อนข้างครบถ้วนเลย มีชุดข้อมูลหลากหลาย ลิงค์รูปภาพก็มีนะ เหมาะสำหรับการใช้เทสดึงข้อมูลอะไรแบบไวๆ ตอนนึกอะไรไม่ออก บทความนี้สั้นๆ เขียนไว้เตือนความจำตัวเอง เจอกันครับ

เริ่มต้นปีด้วยการค้นคว้าเครื่องมือใหม่น่าใช้ ยอมรับว่าโปรแกรมประเภทนี้ ผมไม่รู้จะเรียกมันว่าอะไร คือมันสามารถเขียนหรือวาดอะไรก็ได้ เหมาะสำหรับการเขียน Diagram เพื่อให้ง่ายต่อการเข้าใจ ผมขอเรียกมันว่า Whiteboard Drawer ละกัน โดยโปรแกรมประเภทนี้ส่วนใหญ่ ข้อดีของมันคือสามารถให้คนเข้ามาแก้ไข Whiteboad พร้อมกันได้ เหมาะมากๆ สำหรับการประชุมที่ต้องการความคิดสร้างสรรค์ แต่ทำงานจากคนละสถานที่ ถามว่าโปรแกรมแนวนี้ก็มีเยอะไม่ใช่หรอ ทั้ง  Drow.io Miro หรือตัวอื่นๆอีกมากมาย แต่หลังจากที่ผมทดลองใช้ Excalidraw  บอกเลยว่าใช้ง่ายจริงๆครับ นอกจากนี้ฟีเจอร์ก็ครบถ้วนแม้จะเป็นตัวฟรี Excalidraw โปรแกรมมีทั้งแบบ Open source ใช้งานฟรี และ Excalidraw+ แบบเสียเงิน โดยแบบเสียเงิน คุณสามารถเก็บข้อมูลเก่าๆเอาไว้ดูได้ แต่สำหรับคนที่ไม่ซีเรียส สามารถใช้แบบฟรี แล้วบันทึกเป็นไฟล์ .excalidraw ไว้บนเครื่องก็ทำได้ครับ ข้อดี มีความ Minimal เครื่องมือมีให้ใช้ไม่เยอะ แต่ก็เพียงพอต่อการใช้งาน สามารถใช้งานได้โดยไม่ต้อง Login ตัวเลือก Pro...

ช่วงนี้กำลังศึกษา Web Scraping เพื่อดึงข้อมูลจากเว็บมาทำ Api เลยขอเขียนบันทึกเพื่อกันลืมสักหน่อย Cheerio ใครที่คุ้นเคยกับ jQuery น่าจะใช้งาน Cheerio ได้ไม่ยาก เพราะมันคือเครื่องมือจัดการ Dom ที่เป็นที่นิยมมากสมัยก่อน React, Angular เราสามารถโหลด html มา แล้วเอามายำได้ทุกอย่าง วิธีการ Scraping ก็คือใช้ Axios เก็ท html มา แล้วโยนใส่ Cheerio หลังจากนั้นอยากได้ข้อมูลอะไรก็ไป Selecting เอา สามารถ Selection ได้ทั้ง id, class และอีกมากมาย ดูต่อได้ใน Guild book