Posts

Showing posts from 2023

ทดลองสร้างวีดีโอจาก AI ด้วย D-ID

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

สูตรโกง Regex ใครไม่เก่ง Regular Expression มาทางนี้จ้า

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

สรุปเนื้อหายูทูปยาวๆ ให้เป็นข้อความอ่านง่าย ภายในไม่กี่นาทีด้วย AI จาก Summarize.tech

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

แนะนำ เว็บทดสอบความสามารถในการพิมพ์ Monkey Type

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

NanoId ตัวช่วยสร้างไอดี สำหรับ Javascript

Image
เมื่อพูดถึงไอดีใน 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 เครื่องมือสร้างอีเมลชั่วคราว

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

แนะนำเว็บจัดการเสียง มีฟังก์ชั่นเด็ดๆโดนๆเพียบ จะแยกเสียงดนตรีกับเสียงร้องก็ทำได้

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

รีวิว Android Icon Pack สไตล์มินิมอล

Image
บทความนี้ขอเอา 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 ก็เป็นอีกหนึ่งตัวเล

รีวิว Taro Cheese coated original ปลาเส้นทาโร่เคลือบชีสสสส

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

แนะนำ Blurha.sh เปลี่ยนการโหลดรูปธรรมดา ให้น่าใช้ยิ่งขึ้น

Image
บทความนี้ขอเขียนถึงวิธีการเพิ่มประสิทธิภาพ ให้การโหลดรูปภาพ ดูน่าใช้งานมากขึ้น 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 Feature Overview

Image
เมื่อวานมีโอกาสดู คลิปสอนสร้างโปรเจคจาก 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 ชีวิตคนหลังบ้านมันก็ง่ายดายแบบนี้ ด้วย Pocketbase

Image
หากพูดถึง 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 ซะก่อน

Pomofocus คืออะไร ใช้งานอย่างไร มาทำงานแบบ Productive กันเถอะ

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

วิธีลบ DotNet SDK & Runtime Old Version สำหรับ Mac OS

Image
บทความนี้เป็นทิปสั้นๆ ในการลบ 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

DeepSource แพลทฟอร์มที่จะช่วยเยียวยาโค๊ดของคุณ

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

คำถามจิตวิทยา และจริยธรรม เมื่อผมสามารถสับสวิตซ์รถไฟ และต้องเลือกชนใครสักคน

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

React hook form ทำเรื่องฟอร์มให้เป็นเรื่องง่าย

Image
บทความนี้ขอสรุป 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 ได้ ไม่ยากเกินไป แต่มันมีรายละเอียดยุบยับ ซึ่งต้องลองเอาไปใช้ดู ถึงจะรู้ว่ามันดีจย์ และทำอะไรได้หลากหลายจริง เท่านี้แหละครับ เอามาสรุปสั้นๆให้เห็น

สร้าง Book Read List จัดตารางการอ่านด้วย Notion

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

สรุป tRPC คืออะไร ใช้งานอย่างไร ฉบับสั้นกระชับ

Image
หลังจากอ่านคร่าวๆ ยังไม่ได้ลองใช้จริง ต้องบอกว่าน่าสนใจ โดยเฉพาะใครสาย 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 คืออะไร น่าสนใจอย่างไร

Image
เกริ่นก่อนว่าทำไมผมจึงมาศึกษาเรื่อง 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 กล้อง

แนะนำ Library ประหยัดแรงสำหรับคนขี้เกียจ Beautiful React Hook

Image
หลังจากที่ชาว React เดินทางมาพบกับ Hooks ตั้งแต่ React 16.8 ชีวิตของหลายๆท่านก็เปลี่ยนไป ความสะดวกสบายบังเกิดขึ้น ทุกหย่อมหญ้า npm เติมไปด้วย Library use นั่น use นี่ มีให้เลือกไม่หวาดไหว แม้ว่าการจะเขียน Hooks ขึ้นมาใช้เอง คงไม่เกินกำลังของเราเกินไป แต่เชื่อเถือ ถ้าเลือกใช้ Library ถูกตัว มันจะช่วยลดภาระ ลดบัค ประหยัดเวลาไปได้เยอะ Beautiful React Hook หนึ่งใน Library Hooks collections ที่มี Hooks function ให้ท่านเลือกใช้มากมาย และเป็นที่นิยมพอสมควร มีตัวอื่นที่ดีกว่านี้ไหม ไม่แน่ใจ เพราะยังไม่ได้ Research ถ้าใครมีตัวไหนดีๆ ก็แนะนำมาได้ด้านล่าง แต่จากที่ผมดูยอด Weekly Download ก็มีคนใช้งานอยู่พอสมควร ซึ่งเท่าที่อ่านดู มีหลายตัวที่น่าสนใจ และน่านำมาใช้ เช่น useCookie, useDrag, useMouse และอื่นๆอีกเยอะเลย ต้องลองไปเล่นดูถึงจะรู้ว่ามีอะไรบ้าง บางอย่างมันก็แบบ คืออิหยั่งวะ  อย่างที่บอก แต่ละ Hooks เราอาจเขียนเองได้ แต่ถ้าใช้อะไรพวกนี้เป็น มันก็ประหยัดเวลา แต่อย่าลืมว่าเราต้องไปจำว่า Library ตัวนี้มีอะไรให้ใช้บ้าง เพราะมันเยอะจริงๆ เ

พัฒนา Desktop App ด้วย Electron Js

Image
บทความนี้ขอเขียนสั้นๆ เป็นเรื่อง Electron JS ซึ่งเป็นเครื่องมือช่วยในการสร้าง Cross platform desktop apps โดย Electron JS เกิดขึ้นมานาน และเป็นที่นิยมในหมู่คนเขียน Desktop Application เนื่องจากเราสามารถใช้ความรู้จากการเขียนเว็บ มาเขียนแอพได้ด้วย จากที่เมื่อก่อนการเขียนแอพนั้น คุณอาจจะต้องใช้ภาษาจาก Java เพื่อให้ทำงานข้าม OS ได้ Electron JS จุดเด่นหลักๆของ Framework ตัวนี้คือ Open source Cross platform Web technology ฟีเจอร์น่าใช้งาน User Interface เช่น เมนูเนวิเกเตอร์ การแจ้งเตือน Dialog หรือพวกหน้าต่างการแสดงผล พวกนี้จะปรับเปลี่ยนไปตาม OS ที่ใช้งาน มีความน่าเชื่อถือ โดย Store ต่างๆยอมรับ คุณสามารถเอาแอพที่สร้างจาก Electron ไปวางขายได้ มีระบบ Crash Report คอยรายงานถ้าโปรแกรมพัง สามารถใช้ Javascript framework ที่เป็นที่นิยมในปัจจุบัน มาเขียนร่วมด้วยได้ เช่น React, Vue, Next JS, Angular เป็นต้น ประมาณนี้ละกัน ถ้ามีโอกาสลองเขียนโปรเจคจริงจัง ไว้จะมาอัพเดทอีกที

สรุป CSS Reset คืออะไร ใช้งานแบบไหนดี

Image
ใครที่เริ่มต้นเขียนเว็บคงจะเคยเห็น 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 สิ่งที่ควรทำในเดือนแรกของปี

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

ความแตกต่างของ font แต่ละประเภทในงานเว็บไซต์

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

บันทึก Regular Expression (Javascript) ที่น่าสนใจ

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

แนะนำ Website รวบรวมกิจกรรมน่าสนใจ เดือนไหนมีจัดงานอะไร แพลนล่วงหน้าได้เลย

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

React Icon ครบ จบ ที่ตัวเดียว

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

Movie Watched List : ผ่านต้นปี 2023 มา 23 วัน ผมดูหนังไป 18 เรื่อง

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

React-Beautiful-DND : วิธีใช้งาน Library ลากวาง สำหรับ React Developer

Image
บทความนี้ขอเสนอ 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 จึงไม่ได้มีการอัพเดทเป็นเวลานาน ทำให้มีความเสี่ยงหากมีบัค แต่ผู

เมื่อผมอยากวาดมังงะ ด้วย Giga Manga ของโครตดี

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

Popular posts from this blog

คำถามจิตวิทยา และจริยธรรม เมื่อผมสามารถสับสวิตซ์รถไฟ และต้องเลือกชนใครสักคน

วิธีตรวจสอบข้อมูลภาษีของตัวเอง รายได้ทั้งปี และค่าลดหย่อน จบครบที่เดียว

วิธีสร้างแรงบันดาลใจ TED Talks คืออะไร ? และทำไมคุณควรต้องดู ?

"yes" "yeah" "yep" เหมือนและต่างกันอย่างไร ?

ฝากโค๊ด Online ด้วย Pastebin กันเถอะครับ !!