Engineer Indy Blog

ช่วงนี้ไถติ๊กต๊อกไปเรื่อยๆ พบว่ามีคนเริ่มเอา D-ID มาทำ Video กันเยอะขึ้น บทความนี้ผมเลยขอเขียนเนื้อหาเกี่ยวกับ D-ID หน่อย หลังจากลองเล่นมาซักพัก D-ID Digital people text to video นี่คือแพลทฟอร์มสร้างวีดีโอจากมนุษย์ดิจิตอล เพียงแค่เลือก Charactor ที่ต้องการ เลือกเสียง ใส่เนื้อหาที่ต้องการให้ตัวละครพูด บู้มมมมม กลายเป็นวีดีโอ... จากความสามารถของ AI ที่สามารถสร้างบุคลเสมือน ขยับปากได้ตรงกับเนื้อหา บวกกับเทคโนโลยี Text to speech ที่เราสามารถเลือกเสียง สำเนียง ได้อย่างอิสระ ทำให้กลายเป็นวีดีโอที่น่าสนใจ และไม่ต้องการมนุษย์จริงในการออกกล้อง ขั้นตอนการใช้งาน สมัครสมาชิก โดยคุณจะได้เครดิตเบื้องต้น เอาไปใช้งานฟรี 5 นาที ( ดูราคา ) เลือกสร้างวีดีโอ เลือกพรีเซนเตอร์ มีให้เลือกทั้งแบบคล้ายคนจริง หรือเป็นโมเดลที่ AI สร้างให้ โดยถ้าคุณไม่ถูกใจ สามารถอัพโหลดรูปภาพ ให้ AI ประมวณผลนำไปสร้างพรีเซนเตอร์เองได้ ผมเห็นว่าหลายๆคนใช้ตัวละครการ์ตูนมาสร้าง แต่เท่าที่ลองน่าจะต้องเลือกรูปที่ผ่านเกณฑ์สักนิด ไม่งั้นจะสร้างไม่ผ่าน ใส่เนื

เชื่อว่าพอเขียนโปรแกรมมาซักพัก คุณต้องเคยใช้ Regex มาไม่มากก็น้อย ใช้ Validate นู่น นี่ นั่น ซึ่งเอาตรงๆ ส่วนใหญ่เราไม่ค่อยเขียนเองกันหรอก เพราะไม่มั่นใจว่า ที่เขียนเองมันครบทุกเคสไหม หรือเราอาจจะเขียนไม่เป็นเลย งั้นก็อปปี้ Stack Overflow เอาเลยล่ะกัน แต่ช้าก่อน จะรู้ได้ไงว่า Stack Overflow นั้นเขียนมาถูก งั้นบทความนี้ขอแนะนำ i Hate Regex เว็บที่รวบรวม Regular Expression ที่น่าสนใจ เพียงค้นหา Regex ด้วยคีย์เวิร์ดที่ต้องการ และเอาไปใช้ มีตัวอย่าง และคำอธิบายพร้อม  ดูแค่ชื่อเว็บก็รู้แล้วว่าเหมาะมาก กับคนเกลียด Regex แต่ถ้าไม่เกลียดก็ใช้ได้นะ ฮ่ะๆ แบบว่าเอาไว้เทียบกับที่เราเขียนเอง ว่าถูกและครบทุกเคสไหม เป็นต้น

ทุกวันนี้อ่านข่าว เจอแต่เทคโนโลยี AI (artificial intelligence) กันแบบรัวๆ เกิน 300% เมื่อเทียบกับปีที่แล้ว แพลทฟอร์มเอไอเปิดใหม่กันแบบไม่พัก และบทความนี้ ก็ไม่พลาดเอาผลผลิตจากวงการเอไอมาให้ลองกัน Summarize.tech เว็บที่จะช่วยคุณย่อยข้อมูล จากวีดีโอในยูทูป ให้กลายเป็นข้อความที่สั้น กระชับ ทำให้คุณประหยัดเวลาไปได้เยอะ ลองนึกถึงบทสัมภาษณ์ หรือการเรียนเนื้อหาอะไรสักอย่างบนยูทูป คุณต้องใช้เวลากับมันมากแค่ไหน? บางทีอาจจะ 1-2 ชั่วโมงเลย แล้วจะดีไหม ถ้ามีผู้ช่วยมาสรุปให้คุณอ่าน หึหึ มันจะเกินปุยมุ้ยยยอ่าาา นี่คือตัวอย่างวีดีโอ เพียงคุณคัดลอก Link ยูทูปมาแปะที่ Summarize.tech นี่คือส่งที่จะได้รับ บอกเลยว่า Amezing จัดๆ อิจฉานักเรียนยุคนี้สุดๆ ข้อจำกัด พวกวีดีโอเนื้อหาที่ต้องดูภาพประกอบ เช่น วิธีการทำมีดเข้าป่า อันนี้ยังต้องดูภาพประกอบอยู่ดี ถึงจะเข้าใจ ลิงค์ยูทูปที่ใช้ได้ ต้องมี Subtitle เพื่อให้ AI เอา text ไปประมวลผลต่อ ไม่แน่ใจว่าภาษาไทย ได้ไหมนะ ยังไม่ได้ลอง ใครลองแล้วมาแชร์หน่อย สรุป เป็นเครื่องมือที่โครตดี ทำให้ประหยั

ใครพิมพ์สัมผัสไม่เป็นเหมือนผมบ้างครับ จากประสบการณ์ที่เป็นคนเขียนโปรแกรมมาเกือบสิบปี บอกเลยว่าแม้ต้องดูคีย์บอร์ดตลอดเวลา ก็ไม่เป็นปัญหา สามารถทำงานได้ เพราะส่วนใหญ่ใช้ Autocomplete Snippets แต่ถ้าอยากเพิ่มความเร็วในการพิมพ์นั้นก็ไม่ยาก มันอยู่ที่การฝึกฝน และบทความนี้ก็มีเครื่องมือมานำเน๊ออ อีกเช่นเคย MonkeyType โปรแกรมฝึกพิมพ์หลายๆคน คงเคยเห็นกันมาบ้างแหละ แต่ข้อดีของตัวนี้คือ ความมินิมอล มินิใจ มีฟีเจอร์ในเล่นพอกรุบกริบ อย่างเช่น ปรับเวลาในการฝึก 15s, 30s, 60s,120s เลือกภาษาที่จะฝึกได้ มีเยอะมว๊ากกก ฝึกเสร็จ มีสรุปผลครบถ้วน พิมพ์ไวแค่ไหน พิมพ์ถูกไหม สามารถ Login และมีการจัดอันดับ เอาไว้แข่งกับคนอื่นๆได้ด้วย ว่างๆไปลองดูนะครับ

เมื่อพูดถึงไอดีใน Javascript คุณคงเคยสร้างกันมาแล้ว ในหลายๆรูปแบบ ทั้งการใช้ Timestamp, Math Random และอีกหลายวิธี แต่หากคุณใช้ Library Generator Ids  UUID คงเป็นเครื่องมือที่น่าจะเคยเห็นมาบ่อย แต่ทว่าบทความนี้ขอนำเน๊ออออ Photo by Emile Perron on Unsplash Nano ID ด้วยคุณสมบัติพิเศษ ที่เมื่อเทียบกับ UUID แล้ว Nano ID ค่อนข้างเหนือกว่า ทั้งด้านขนาด ที่ตัวเล็กน่ารักกว่าเกือบ 4 เท่า และ Github ก็มีสตาร์ที่มากกว่า คุณสมบัติ ขนาด Library เพียง 130 bytes ปลอดภัย โดยการใช้เทคนิค Hardware Generator ไอดีมีขนาดที่สั้นกว่า เมื่อเทียบกับ UUID V4 รองรับหลากหลายภาษา มีฟังก์ชั่นให้ custom ไอดี ใช้ง่าย สรุป ผมเลือกจะใช้ NanoId แทนการใช้ UUID ด้วยคุณสมบัติต่างๆที่กล่าวมา อยากให้คุณลองพิจรณา คนๆนี้ที่มันธรรมดา..

ในบางครั้งที่เดฟต้องการเทสการรับส่งอีเมล แต่ขี้เกียจสร้างอีเมลจริงขึ้นมาเทส บทความนี้ผมมีแนวทางแก้ปัญหามานำเสนอด้วย Temp Mail Temp Mail อีเมลชั่วคราว ที่สามารถรับเมลได้ (แต่ส่งไม่ได้นะ) โดยการทำงานคือ ระบบจะสร้าง Email Address มาให้คุณ ซึ่งอีเมลดังกล่าว จะถูกลบเมื่อไม่ได้ใช้งาน ถ้าคุณอยากใช้อีกครั้ง จะได้อีเมลใหม่ที่ Address ไม่เหมือนเดิม ข้อดี สามารถเอามาใช้ในกรณีต้องการเทสระบบรับอีเมล เทสเทมแพลต เทสคอนจ๊อบ เดฟน่าจะชื่นชอบ เอาไว้รับพวก Email Promotion ที่ไม่สำคัญ เวลาเค้าให้กรอกอีเมล เราก็ใช้อีเมลชั่วคราวไปเลย ไม่ต้องลงทะเบียน เข้าไปที่หน้าเว็บ ก็ได้อีเมลมาใช้เลย สะดวกดี หลังจากลองส่งอีเมลดู ไม่แน่ใจว่าเป็นบัคหรือเปล่า แต่ได้เมลเบิ้ล (ไม่ใช่เมืองในออสเตรเลียนะ) จริงๆก็ไม่ติดไรหรอก ใช้ได้อยู่ ของฟรี บั๊ยครับ

บทความนี้เอาเว็บที่น่าสนใจ มาแนะนำอีกเช่นเคย เพื่อนๆบางคนเคยประสบปัญหาเรื่องไฟล์เสียงกันบ้างไหม อย่างเช่น อัดเสียงในมือถือ เสร็จแล้วต้องโอนไฟล์เข้าคอม จะตัดต่อเสียงเพลงก็ไม่รู้จะเลือกใช้โปรแกรมอะไร อัดเสียงอยู่ดีๆมีเสียงอะไรเข้ามาแทรกระหว่างกำลังอัด หรืออยากจะแยกเสียงดนตรีกับเสียงร้อง แต่ไม่รู้จะทำยังไง ถ้าเคยเจอปัญหาเหล่านี้ ลองใช้เว็บนี้เลย Vocal Remover เว็บไซต์จัดการเสียงหลากหลายฟังก์ชั่น ทำได้ตั้งแต่ อัดเสียงผ่านเบาร์เซอร์ ตัดต่อเสียง ท่อนไหนไม่อยากได้ก็ตัด หรือจะเอาหลายๆเสียงต่อต่อกันก็ทำได้ ปรับความช้าเร็วของเสียง หรือจะเปลี่ยน Key pitch ก็ทำได้ แต่ฟีเจอร์เด็ดที่ต้องพูดถึงเลยคือ เอาเสียงร้องออกจากเพลง (Vocal remover) สมมติถ้าไปเจอเพลงที่ไม่มี Karaoke แนะนำว่าฟีเจอร์นี้คือเด็ด เพราะมันสามารถลบเสียงคนร้อง ให้เหลือแต่ดนตรีได้ พอลบเสร็จ กดเซฟเป็นไฟล์ mp3 ได้เลย แต่ยังไม่พอ คุณสามารถร้อง Karaoke ผ่านฟีเจอร์ Karaoke ต่อได้เลย โดยใช้เพลงที่เพิ่งลบเสียงคนร้องออกไป เจ๋งป่ะหล่ะ สรุป เป็นเครื่องมือที

บทความนี้ขอเอา Icon Pack ที่ผมชอบที่สุดตอนนี้มานำเสนอ หวังว่าสาวก Andriod หลายๆคนน่าจะชอบ Icon Pack คืออะไร มันคือเซทของแอพพลิเคชั่นไอคอน ที่เราสามารถเปลี่ยนรูปแบบ ให้มีความเป็นสไตล์ของเราเองได้ ลองนึกถึงว่าแต่ละแอพก็ออกแบบหน้าตาไอคอนแอพ ด้วยคอนเซปที่แตกต่างกัน พอเอามาอยู่ด้วยกัน มันก็อาจจะดูขัดกัน หรือไอคอนดั้งเดิมเป็นสไตล์ที่เราไม่ได้ชอบ  ดังนั้นจึงเกิด Icon Pack ขึ้นมา เพื่อแทนที่ไอคอนแบบดั้งเดิม เป็นไอคอนที่ออกแบบมาใหม่ มีความคุมธีม คุมสี คุมโทน และมีให้เลือกหลากหลายสไตล์ Crayon Icon Pack อย่างที่บอก ผมลองใช้ Icon Pack มาหลายอัน แต่ Crayon Pack คือตัวที่ผมชอบที่สุด ไม่ต้องพูดเยอะ เจ็บคอ ลองไปดูตัวอย่างไอคอนกันนะ จะเห็นว่าบางไอคอนก็ไม่มีในคอเลกชั่นของ Crayon แต่ว่าเราสามารถ Request ไอคอนไปที่ผู้พัฒนาได้ ถ้าแอพมีคนใช้เยอะมากพอ เค้าก็จะพิจรณาออกแบบมาให้เพิ่มเติม ข้อมูลทางสถิติ (Mar 23) Rating 4.8  100K Downloads Price 0.99$ สรุป หากใครใช้แต่ไอคอนของตัวเครื่องแล้วรู้สึกเบื่อ Crayon Icon Pack ก็เป็นอีกหนึ่งตัวเล

สมองตีบตันมาสองสามวัน ไม่รู้จะเขียนเรื่องอะไร ขอเอาขนมที่เพิ่งกิน มารีวิวละกัน Toro Cheese coated original มันคือทาโร่ที่เราคุ้นเคย แต่เคลือบชีสมา จบการรีวิว ยังๆๆ สั้นไปนิด  รสชาติ มีความชีส เค็ม มัน กัดแล้วนุ่มละมุน เต็มคำกับเชดโด้ชีส (ผิดๆๆ เชดด้าชีส) อารมณ์ตอนกิน ไม่เหมือนกินทาโร่เพียวๆ คนละฟิว (แต่ที่สีเขียวๆ นั่นคลอโรฟิลล์) ค่าสถานะ แคล 70 kcal โซเดียม 340 mg น้ำหนัก 18 g ราคา 30 บาท ลักษณะเส้น เหมือนทาโร่ ที่มีชีสเคลือบด้านนึง ชีสหนากำลังพอดี จำนวนเส้น ลืมนับ (อยากรู้ก็ไปซื้อนับเองซิโว๊ยยยย) สรุป สำหรับผม อร่อยครับ ซื้อซ้ำไหม? ถ้าอยากก็ซื้ออีก ถ้าไม่อยากก็ไม่ซื้อ ถ้ามีแฟนจะซื้อให้แฟนกินทุกวันเลย แต่ตอนนี้รับสมัครนะครับ :) บายยยย

บทความนี้ขอเขียนถึงวิธีการเพิ่มประสิทธิภาพ ให้การโหลดรูปภาพ ดูน่าใช้งานมากขึ้น BlurHash ในบางสถานการณ์ที่ Internet มีความช้า แม้ว่าคุณจะ Optimize รูปภาพให้มีขนาดเล็กลงแล้ว User มีโอกาสที่จะโหลดรูปไม่สำเร็จ หรือช้ามากกว่ารูปจะโหลดเสร็จ หากเราสนใจ Experience ของ User การใช้ BlurHash ก็เป็นตัวเลือกที่น่าสนใจ โดยเทคนิคที่ BlurHash ใช้ ก็ตรงตามชื่อ คือ แสดงภาพในลักษณะ Blur ขณะที่กำลังรอรูปจริงโหลด ซึ่งเทคนิคนี้จะทำให้ User รู้สึกว่ารูป กำลังจะมา แม้จริงๆมันอาจจะยังไม่มาก็ตาม การทำงานของ BlurHash  ทำการ Hash รูปจริงออกมาเป็น string สั้นๆ ประมาณ 20-30 ตัวอักษร Backend ทำการเซฟ string นี้ไว้ที่ฐานข้อมูล เมื่อจะทำการแสดง ก็เพียงเอา string ที่ Hash ไว้มา Decode แล้วแสดงไปก่อน ทันทีที่รูปจริงโหลดเสร็จ ค่อยเปลี่ยนรูปจริงมาแสดง สำหรับการใช้งาน BlurHash รองรับหลากภาษา ดูที่ GitHub เอาจริงๆตัวนี้ ผมยังไม่เคยลองใช้ ไม่รู้เหมือนกันว่าตอน decode มันใช้เวลานานรึเปล่า และมีประสิทธิภาพอย่างไร เอาไว้ถ้าผมลองใช้แล้ว เดี๋ยวกลับมาอั

เมื่อวานมีโอกาสดู คลิปสอนสร้างโปรเจคจาก React Router พบว่าเวอร์ชั่นใหม่มีอะไรให้เล่นเยอะ มันเปลี่ยนวิธีเขียนสเต็ปต่างๆใน React ค่อนข้างสะดวกขึ้น เขียน Manual น้อยลง React Router จากเดิมใครเขียน React คงจะทราบว่าเราใช้ React router dom ในการ Routing เปลี่ยนหน้าต่างๆเท่านั้น แต่ตอนนี้มันมีลูกเล่นเยอะมาก ผมขอสรุปสั้นๆ เป็นหัวข้อดังนี้ Client side routing อันนี้รู้กันอยู่แล้วเนาะ เพราะมันเกิดมาเพื่อสิ่งนี้ คือทำให้ Client สามารถเปลี่ยนหน้าได้ โดยไม่ต้องร้องขอไปที่ Server  Nested route อันนี้ตามชื่อเลย ช่วยให้เราสามารถสร้าง Route เป็นรูปแบบโครงสร้าง Parent&Child  ช่วยให้ดูโค๊ดง่ายขึ้น Dinamic segment ข้อนี้ช่วยให้มีความยึดหยุ่นในการใส่ params คุณจึงสามารถออกแบบ URL ได้อย่างที่ใจต้องการ Rank route matching ในกรณีที่มี route ที่ต่อด้วย params และ route ที่ต้องการระบุคำ ที่เจอบ่อยๆ ตัวอย่างเช่น user/:userId และ user/new โดย React router จะทราบว่า หากคุณใส่ /new มา มันจะส่งคุณไป route ที่สอง

หากพูดถึง Backend SaaS ที่ยอดนิยมและคุ้นหูที่สุด คงหนีไม่พ้น Firebase  เนื่องจากเจ้าของเป็น Google และทำมาอย่างยาวนาน ถ้าต้องเลือกสักตัวในท้องตลาด ก็คงต้องเป็น Firebase นั่นแหละ แต่หากคุณเป็นคนที่ต้องการความแปลกใหม่ Alternative Firebase อย่าง Pocketbase ก็เป็นอีกหนึ่งตัวเลือก ที่น่าสนใจ Pocketbase ความสามารถครบครัน และเป็น Open Source เหมาะกับงานขนาดเล็กไปถึงระดับกลาง (FAQ) ฟีเจอร์ Realtime Database Authentication File Storage Admin Dashboard หลังจากดูคร่าวๆ ผมชอบ Dashboard ที่เข้าใจได้ง่าย และด้วยความที่เป็น Self-Hosting ทำให้ค่อนข้างมีทางเลือกในการใช้งาน แน่นอนอย่างที่บอก มันเหมาะกับ งานขนาดเล็กไปถึงระดับกลาง หากต้องการขึ้นโปรเจ็ค POC (Proof of concept) ไวๆ ต้องการหลังบ้านมาใช้แบบเร็วๆ ตัวนี้ก็เป็นตัวที่น่าสนใจ คำเตือน ตอนนี้ Pocketbase ยังเป็นเวอร์ชั่น Beta อยู่ ดังนั้นถ้าจะใช้งานจริงขึ้นบน Production อาจต้องรอให้เค้าออกเวอร์ชั่น 1.0 ซะก่อน

บทความนี้ ผมขอแนะนำให้รู้จัก Pomodoro  เทคนิคบริหารเวลา ที่อยากให้คุณลองใช้ Pomodoro ในภาษาอิตาลี่ แปลว่ามะเขื่อเทศ ถูกคิดค้นในช่วงปี 1980 เป็นเทคนิคการแบ่งเวลาออกเป็นช่วงๆ ช่วงละ 25 นาทีโดยแต่ละช่วงจะมีการพักเบรค 5 -10 นาที โดยแนวคิดนี้ บอกว่าการได้พักสมองเล็กน้อย ช่วยทำให้กลับมาทำงานได้ดียิ่งขึ้น ขั้นตอนการทำ Pomodoro กำหนดงานที่ต้องการทำ แบ่งออกเป็นหน่วยย่อยๆ ที่สามารถใช้เวลาประมาณ 25 นาทีได้ เช่น ตอบอีเมล, อ่านบทความ, อัพเดทซอร์ฟแวร์, เขียนโปรแกรม 1 ฟังก์ชั่น, รีวิวโค๊ด อะไรประมาณนี้ ตั้งเวลานับถอยหลัง ทำงานที่ตั้งเป้าหมายไว้ โดยโฟกัสงานที่แพลนไว้เท่านั้น ครบ 25 นาที พักเบรค 5  นาที ทำแบบนี้ไปเรื่อยๆ พอครบ 4 รอบ ให้พักเบรค 15 -20 นาที ข้อดีของ Pomodoro ทำให้มีสมาธิมากขึ้น งานที่ได้จะมีคุณภาพดีขึ้น ช่วยให้งานเสร็จเร็วขึ้น ข้อนี้น่าจะเป็นผลมาจาก การที่เราได้วางแผนก่อน อะไรที่วางแผนไว้แล้ว เวลาที่ทำจริง ก็ไม่ต้องคิดว่าต่อไปจะทำอะไรดี ทำได้เลย ทำให้ไม่หลุดโฟกัสง่าย เนื่องจาก Cycle ม

บทความนี้เป็นทิปสั้นๆ ในการลบ dotnet เวอร์ชั่นเก่าที่ไม่ได้ใช้งาน Photo by Ujesh Krishnan on Unsplash เช็ค Version .NET SDK dotnet --list-runtimes เช็ค Version .NET Runtime dotnet --list-sdks เมื่อได้เลข Version ที่ต้องการลบ ให้ใช้คำสั่งด้านล่าง โดยเปลี่ยน sdkVersion เป็นเลขที่เราต้องการ sdkVersion="6.0.100" sudo rm -rf /usr/local/share/dotnet/sdk/$sdkVersion sudo rm -rf /usr/local/share/dotnet/sdk-manifests/$sdkVersion จากนั้นก็ลบ Runtime ต่อ โดยเปลี่ยน runtimeVersion เป็นเลขที่ต้องการลบ เหมือนเดิม runtimeVersion="6.0.0" sudo rm -rf /usr/local/share/dotnet/host/fxr/$runtimeVersion sudo rm -rf /usr/local/share/dotnet/packs/Microsoft.AspNetCore.App.Ref/$runtimeVersion sudo rm -rf /usr/local/share/dotnet/packs/Microsoft.NETCore.App.Host.osx-x64/$runtimeVersion sudo rm -rf /usr/local/share/dotnet/packs/Microsoft.NETCore.App.R

บทความนี้ขอเอ่ยถึงแพลทฟอร์มเช็คสุขภาพโค๊ด มันคืออะไร แล้วทำไมต้องให้ความสำคัญกับโค๊ดด้วย ก่อนอื่นขอเล่ากระบวนการทำงาน ของเหล่าเดฟในปัจจุบันก่อน คงไม่เหมือนกันทุกบริษัท แต่คร่าวๆ น่าจะประมาณนี้ 1. Requirement 2. Design 3. Develop 4. Testing 5. Deliver จะเห็นว่าหลังจากพัฒนาระบบ เราจำเป็นต้องมีการทดสอบ เพื่อให้ระบบมีความเสถียร และเป็นไปตาม Requirement มากที่สุด นี่คือพื้นฐานในการพัฒนาระบบ Software แต่เมื่อเรามองไปที่บริษัทเทคชั้นนำ หรือเหล่า Startup มันมีอะไรที่ซ่อนอยู่มากกว่านั้น การทดสอบที่เข้มข้น มากกว่าการทำงานที่ถูกต้อง ในบางครั้งที่โปรแกรมทำงานถูกต้อง ไม่ได้หมายความว่าโค๊ดของคุณสุขภาพดี บางบริษัทสมัยใหม่ จึงมักมีโพรเซสในการรีวิวโค๊ด เพื่อลดโค๊ดที่ไม่มีมารตรฐาน หรือโค๊ดที่ไม่มีประสิทธิภาพออกไป แต่แน่นอนมนุษย์ไม่สามารถรีวิวโค๊ด ได้ถูกแป๊ะสม่ำเสมอ ตลอดไป มันอาจหลุดลอดสายตาไปบ้าง ส่งผลให้เกิดข้อผิดพลาดตามมา งั้นหากปล่อยส่วนนี้ให้บอทค่อยจัดการ คงจะดีไม่น้อย ปัจจุบันมีมีหลายเครื่องมือให้เราเลือกใช้ อย่างเช่น SonarQube , Codacy แต

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

บทความนี้ขอสรุป Library Form Validation for React ที่ผมมักเลือกใช้บ่อยๆ อย่างที่ทราบกัน Form Validation ใน React มีให้เลือกใช้หลายตัว แต่ทำไมผมถึงชอบ React-Hook-Form  ไปดูเหตุผลกัน React Hook form น่าจะไม่ต้องอธิบายอะไรมาก Form Validation ก็คือ ตัวที่ทำหน้าที่ควบคุมข้อมมูลของ input ทั้งหมดในหน้า form เพื่อให้เราสามารถดักค่าข้อมูลในฟอร์ม หรือทำการแจ้งเตือนผู้ใช้งานได้ ก่อนทำการ submit ข้อดี ใช้งานง่าย เขียนโค๊ดน้อย เนื่องจากมี Hook ให้เรียกใช้ ไม่ต้องประกาศอะไรเยอะ ขนาดแพ็คเกจเล็ก ไม่เทอะทะ มีทั้ง React Web และ React Native รองรับ Typescript มีการ Optimize เป็นอย่างดี เพื่อเพิ่มประสิทธิภาพการทำงาน ชูจุดเด่นเรื่องความเร็วในการ Mounting มีรางวัลการันตี เช่น Javascript Rising Star, React Open Source Award เป็นต้น การใช้งาน สามารถเข้าไปเล่น Demo และอ่าน Document ได้ ไม่ยากเกินไป แต่มันมีรายละเอียดยุบยับ ซึ่งต้องลองเอาไปใช้ดู ถึงจะรู้ว่ามันดีจย์ และทำอะไรได้หลากหลายจริง เท่านี้แหละครับ เอามาสรุปสั้นๆให้เห็น

พักนี้รู้สึก ตัวเองดองหนังสือไว้ค่อนข้างเยอะ เนื่องจากไม่มีเวลาอ่าน บทความก็ต้องเขียน งานก็ต้องทำ ลดน้ำหนักก็อย่าได้ขาด ดังนั้นหนังสือที่ซื้อมาจึงทำได้เพียง แค่แกะพลาสติกและถ่ายรูป แต่หลังจากนี้ ผมคิดว่าจะกลับมาอ่านที่ดองไว้ทั้งหมด เพื่อเตรียมตัวสำหรับงานหนังสือครั้งต่อไป ฮ่ะๆๆ ดังนั้นวันนี้ เราต้องมาจัดการหนังสือทั้งหมดซะก่อน ผมจะใช้ Notion เหมือนเดิม เพื่อความสะดวกและรวดเร็ว โดยผมจะจัดเป็น Board Layout เพื่อให้ดูง่ายว่า อะไรอ่านไปแล้ว อะไรยัง เสร็จแล้วก็จะได้ประมาณนี้ ลิงค์  สามารถกดเข้าไปดู หรือ Duplicate Template มาใช้ได้ เท่าที่ลองใส่รายการหนังสือไป ผมน่าจะเหลือที่ยังอ่านไม่จบอีกประมาณ 7 เล่ม ตั้งแต่ปีที่แล้ว เอาเป็นว่าเดือนนี้จะตั้งใจเคลียร์ได้มากที่สุด สู้ๆนะ (บอกตัวเอง)

หลังจากอ่านคร่าวๆ ยังไม่ได้ลองใช้จริง ต้องบอกว่าน่าสนใจ โดยเฉพาะใครสาย TypeScript น่าจะเอาไปปรับใช้ได้ไม่ยาก tRPC เป็นเครื่องมือที่เอาไว้สร้าง APIs ตัวเทียบที่มีอยู่ในท้องตลาด ก็คือ Rest, GraphQL โดยชูจุดเด่นที่เป็น TypeSafety คือถ้าหลังบ้านมีการเปลี่ยนตัวแปรใน API ที่หน้าบ้านจะสามารถ Detect ได้ ทำให้ลดความผิดพลาดในการเรียกชื่อฟิลด์  นอกจากนี้ยังมีฟีเจอร์อย่าง Runtime Build ทำให้ไม่ต้องเสียเวลา Build ก่อน Run มีให้ใช้ใน Javascript Framework ตัวหลักๆแล้ว เช่น Next.js มี Autocomplete และขนาดบันเดิ้ลไฟล์เล็ก เนื่องจากเคลมว่า ไม่มี Dependencies การใช้งาน สำหรับการใช้งาน ไม่ได้มีอะไรซับซ้อน แค่ประกาศ Producer มา จากนั้นก็สร้าง HTTP Server ที่ต่างไปก็คือ ตัว Client ที่ใช้ Query จะต้องใช้ tRPC เพื่อ Sync กับหลังบ้าน เหมาะกับใคร? แน่นอน อย่างที่บอกไปตอนต้น เหมาะกับคนที่เขียน TypeScript ส่วนคนเขียน Javascript เดิมๆนั้น ตัด tRPC ทิ้งไปก่อนเลย เหมาะกับคนที่ไม่ได้พัฒนา Public APIs เนื่องจากคนส่วนใหญ่ที่เป็น Client ก็ยังใช้ Rest

เกริ่นก่อนว่าทำไมผมจึงมาศึกษาเรื่อง WebRTC คือ เริ่มจากการอ่าน Meduim ประจำวันของผม มีคีย์เวิร์ดนึงที่น่าสนใจคือ WebRTC ในเมื่อมันน่าสนใจ บทความนี้ผมจึงอยากเอามาสรุปให้อ่านครับ WebRTC การสื่อสารแบบ Real-Time สำหรับ Web คุณสามารถสร้างแอพลิเคชันบนมาตรฐานเปิด ที่รองรับวีดีโอ เสียง และสามารถส่งข้อมูลจากผู้ส่งถึงผู้รับได้โดยตรง ทั้งหมดนี้นักพัฒนาสามารถสร้างและใช้งานได้บน Browser รุ่นใหม่ๆ โดยเทคโนโลยีนี้เป็น Open Source ที่ได้รับการสนับสนุนจาก Apple, Google, Microsoft, Mozilla โอเค ข้างบนผมแปลมาจากเว็บ อาจจะดูแข็งๆไปซะหน่อย อธิบายอีกครั้งก็คือ ตัว WebRTC เป็นเทคโนโลยีที่ทำให้นักพัฒนาสามารถสร้างแอพ ที่เข้าถึง Device อย่าง กล้อง ไมโครโฟน หรือการส่งข้อมูล ด้วยมาตรฐานของ Web ที่เป็น Javascript APIs ซึ่งถ้าเราจะทำแบบนี้โดยไม่มี WebRTC ก็ลำบากพอสำควร เนื่องจากเราต้องสร้าง Protocal ที่ใช้สำหรับพูดคุย Peers to Peers และปัญหาอื่นๆ การใช้งาน สำหรับการใช้งาน ให้ลองดู Demo ว่า WebRTC ทำอะไรได้บ้าง หลักๆเลยคือ สามารถเข้าถึง Media Devices กล้อง