จากที่ได้เปลี่ยนจากการใช้ Font Icon มาใช้ SVG แทนในการแสดงไอคอนบนปุ่ม เมื่อเรา addEventListener ให้กับปุ่ม และตรวจสอบ target ของ event ที่พ่นออกมา ปรากฏว่าแทนที่จะได้ target เป็นปุ่มที่เรากด กลับกลายเป็น svg หรือไม่ก็ path ของรูปซะงั้น แต่ถ้าเรากดที่ขอบๆ หน่อยก็จะได้ target เป็นปุ่มที่ถูกต้อง เมื่อไปค้นหาดูก็พบบทความ Managing SVG Inter...

หลายครั้งที่พยายามจะลบฐานข้อมูลเก่าๆ ของ Postgresql ที่อยู่ในเครื่องแล้วลบไม่ได้ เนื่องจากมี error พ่นออกมาบอกว่ามี session กำลังใช้งานฐานข้อมูลนี้อยู่ ทั้งๆ ที่เราก็มั่นใจว่าไม่ได้เชื่อมต่อกับฐานข้อมูลดังกล่าวแล้ว และทุกครั้งก็ใช้วิธีง่ายๆ คือการรีสตาร์ท PosgreSQL แล้วกลับไปลบฐานข้อมูลใหม่ แต่วิธีการนี้ทำให้การเชื่อมต่อฐานข้อมูลอื่นๆ ...

เมื่อการติดตั้งโปรแกรมสำหรับ production ด้วย docker กลายเป็นสิ่งที่หลีกเลี่ยงไม่ได้ เนื่องด้วยแวดล้อมในการติดตั้งไม่ว่าจะต่อ internet ไม่ได้บ้าง ความต้องการของผู้ดูแลเรื่องระบบเครือข่ายบ้าง ทำให้ docker น่าจะเป็นทางออกที่ดี การสร้าง dockerfile ในช่วงแรกๆ เรียกได้ว่า copy จากคนอื่นมาล้วนๆ เพื่อให้โปรแกรมสามารถใช้งานก่อน จากนั้นจึงค่อยๆ ...

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

ช่วงนี้ได้ศึกษาเกี่ยว LINE Front-end Framework หรือ LIFF ก็มาเจอประเด็นการผูกบัญชีผู้ใช้งานหลังบ้านของ Rails กับผู้ใช้งานของ LINE จะทำอย่างไรได้บ้าง ในเมื่อในฝั่งหลังบ้านเกิดใช้ข้อมูล username และ email ไม่ตรงกับข้อมูล username และ email ที่เราใช้ใน LINE จากตัวอย่างสมมติว่าโปรแกรมที่ใช้ภายในองค์กร ซึ่งผู้ใช้งานได้ลงทะเบียนไว้โดยใช้ use...

ใน Rails จะมีความสามารถที่จะป้องกันไม่ให้เรากด submit ข้อมูลซ้ำไปยัง Server ได้โดยใช้ data-attribute ที่ชื่อว่า `data-disable-with` ดังแสดงในตัวอย่างโค้ดด้านล่าง หรือจะเข้าไปดูรายละเอียดได้ที่ automatic-disabling ตรงจุดนี้เองเราสามารถเปลี่ยนการแสดงข้อความให้เป็น Loading Spinner แทนได้โดยการใส่ tag ที่เป็นไอคอนหรือภาพเข้าไปแทนได้ # logi...

ติดตั้ง Stimulus บน Rails ก็แล้ว บน Sinatra ก็แล้ว ซึ่งทั้ง 2 ล้วนเป็นเว็บเฟรมเวิร์คในฝั่ง Ruby คราวนี้ถ้าต้องมาเจอโจทย์ที่จะต้องทำการกับเว็บเฟรมเวิร์คในฝั่ง Python อย่างเช่น Django กันบ้างหละ สำหรับ Django ไม่ได้มีเครื่องมือจำพวก transpiler หรือ bundler ไฟล์ JavaScript อย่างเช่น Webpack, Rollup หรือ Parcel มาด้วย ดังนั้นทำให้เรามีอิสร...

ปกติแล้วโปรเจค Rails ใหม่ๆ ที่ถูกสร้างขึ้นมาจะติดตั้ง minitest เป็นเฟรมเวิร์คในการทดสอบตั้งต้น และใช้ fixtures ในการสร้างข้อมูลตัวอย่างทดสอบ ติดตั้ง Factory Bot ให้กับโปรเจค • เพิ่ม `factory_bot_rails` เข้าไปใน Gemfile group :development, :test do gem 'factory_bot_rails' end • อย่าลืม bundle install ลงมือทดสอบ • ลองสร้างโมเดล User ขึ้น...

จาก [อ่านมาเล่า] Makoto Marketing การตลาดแบบจริงใจสไตล์ญี่ปุ่น #1 มาต่อบทที่ 6 กันเลย ไม่อ้างว่า อุตสาหกรรมนี้ตายแล้ว ในยุคที่ธุรกิจสามารถ disrupt ได้ตลอดเวลา การคงอยู่ของธุรกิจหนึ่งเริ่มเกิดความไม่มั่นคง ทำให้ต้องมองหาหนทางเพื่อเปลี่ยนแปลงธุรกิจไปเป็นอย่างอื่น นั้นอาจเป็นทางออกก็จริงแต่อย่าลืมว่าธุรกิจของเราได้หายไป หากเราอยากรักษาธุร...

ว่ากันด้วยเรื่องการตลาดแล้ว โดยส่วนตัวนั้นเรียกว่าไม่รู้อะไรเลย และถ้าเกิดเรามีผลิตภัณฑ์สักชิ้น หรือบริการใหม่ๆ สักอย่างเราจะทำการตลาดได้อย่างไร ทั้งนี้ได้มีโอกาสได้ซื้อหนังสือ Makoto Marketing (หลักสูตรการตลาดแบบจริงใจสไตล์ญี่ปุ่น) โดย ดร. กฤตินี พงษ์ธนเลิศ (เกตุวดี Marumura) มาอ่านเพื่อศึกษาเกี่ยวกับเรื่องการตลาดสักหน่อย จากหน้าปกหนั...

“Programmer A: โอ๊ย! เว็บมี Error และพังไปอีกแล้ว Programmer B: อ้าว แล้วมันพังเพราะอะไรหละ Programmer A: งั้นเดี่ยวขอไปตรวจดู log ก่อนนะ ... ผ่านไป 5 นาที Programmer A: รู้แล้วว่าเกิดจากอะไร ...” จากบทสนทนาข้างต้น การตรวจสอบดู Error ที่เกิดขึ้นจากอะไรดูยุ่งยากพอสมควร ยิ่งถ้าเราปล่อยออก production การรับรู้ Error ที่เกิดขึ้นก็ต้องรวดเร...

สำหรับบางครั้งที่เราอยากทดลองสร้างเว็บและหัดใช้ CSS framework ทดลองเขียน Stimulus Controller ใหม่ๆ หรือจะอะไรก็แล้วแต่อย่างง่ายๆ โดยไม่ต้องต่อกับฐานข้อมูล การใช้ Rails ก็ดูเหมือนจะ Overweight เกินไป ครั้งนี้ก็เลยจะทดลองใช้ Sinatra ดูว่ามันตอบโจทย์ของเราหรือไม่ โดยสิ่งที่จะใช้ในบทความนี้จะประกอบด้วย 1. Sinatra ในการทำเว็บ 2. Stimulus ซึ...

การสร้าง Real-time Web Application คงหลีกเลี่ยงไม่ได้กับการใช้ WebSocket เพื่อให้เกิดการสื่อสารแบบสองทาง (Bi-direction Communication) เพื่อให้ฝั่ง Backend สามารถอัพเดตข้อมูลให้กับ Frontend ได้ สำหรับ Rails ก็มี ActionCable เพื่อจัดการในส่วนของ WebSocket ให้กับเรา ที่นี้โจทย์เรามีอยู่ว่าในกรณีที่เรามีการใช้ turbo_stream_from จาก Turbo ซ...

ต้องยอมรับว่าการเรียนรู้ในยุค New Normal ทำให้เด็กๆ ต้องหันมาเพิ่งการเรียนรู้แบบออนไลน์มากขึ้น ซึ่งนั้นหมายความว่าเด็กๆ จะต้องใช้เวลาอยู่กับหน้าจอเพิ่มขึ้นด้วย ซึ่งก็จะมีหลากหลาย guidelines ที่เราสามารถนำมาใช้กับเด็กๆ ได้ โดยขึ้นอยู่กับพิจารณาของผู้ปกครอง และความเหมาะสม สำหรับการเขียนโค้ดเป็นอีกกิจกรรมที่จะช่วยส่งเสริมทักษะการคิดเชิงคำ...

ถ้าจะพูดถึงโซลูชั่นในการบริหารจัดการระบบเครือข่ายที่ยอดเยี่ยมก็คงหนีไม่พ้นจาก Cisco Meraki เป็นแน่ สำหรับรายละเอียดความสามารถของเจ้า Cisco Meraki นั้นขอยกผ่านไปแล้วกันนะครับ เพราะความสามารถเค้าเยอะจริงๆ สามารถลองไปศึกษาที่เว็บไซต์ของ Cisco หรือไม่ก็สอบถามกับเซลล์เพิ่มเติมได้ เริ่มต้นให้เราเข้าไปศึกษาที่ https://developer.cisco.com/mera...

Web Scraping เป็นอีกวิธีหนึ่งที่เราจะใช้ดูดและสกัดข้อมูลที่กระจายอยู่ในเว็บออกมาได้ ซึ่งถ้าลองค้นหาเครื่องมือใน Search Engine ก็จะพบว่าเครื่องมือหลายๆ ตัวที่มีอยู่นั้นพัฒนาด้วย Python ซะเป็นส่วนใหญ่ แต่ด้วยที่เราเป็น Rubyist ถ้าเราจะทำ Web Scraping ด้วย Ruby จะมีแนวทางอย่างไรบ้าง เรามาลองดูกัน สำหรับตัวอย่างในครั้งนี้ ก็จะยกตัวอย่างที่...

จากประสบการณ์ที่ได้ลองใช้กราฟมาแสดงรายงานอยู่สักพัก ก็พบว่าการจะสร้างกราฟตัวหนึ่งๆ ขึ้นมาได้เราจะต้องกำหนดพื้นที่ในการแสดงผลใน HTML บ้างก็ div บ้างก็ canvas จากนั้นก็ส่งชุดข้อมูลเข้าไปในฟังก์ชันหรือคลาสของ JavaScript สุดท้ายเราก็จะได้กราฟที่ต้องการออกมา สำหรับในบทความนี้ก็จะใช้ Chart.js มาทำเป็นตัวอย่างให้ดูกัน <canvas id="myChart" wid...

ต่อจากบทความ Pagination with Pagy ก็พยายามจะนำ Pagy มาใช้ในโปรแกรมใบลา โดยส่วนหนึ่งของโปรแกรมจะมีการแสดงข้อมูลประวัติการลาซึ่งทำเป็น pagination แบบ infinite scroll เริ่มแรกนั้นเราพยายามจะใช้ Turbo เข้ามาใช้ในการแสดงผล และใช้ Stimulus ร่วมกับ IntersectionObserver ตามไอเดียจากบทความ Adventure in infinite scrolling ผลลัพท์ที่ได้ก็ได้อย่าง...

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

ไม่ว่าเราจะพัฒนาเว็บแอพพลิเคชันด้วยเฟรมเวิร์คอะไรก็ตาม เมื่อนำไป deploy ในสภาวะแวดล้อมจริง เราควรจะมั่นใจว่าเราได้ optimize ขนาดของ JavaScript และ CSS ให้เหมาะกับการใช้งาน ซึ่งโดยบ่อยครั้งที่ผมเจอก็จะเป็นปัญหาขนาดของ JavaScript ที่มีขนาดใหญ่ ทำให้เวลาที่เสียเวลาตอนโหลด และอาจจะสร้างประสบการณ์ที่ไม่ดีแก่ผู้ใช้งาน สำหรับ Rails ซึ่งที่ใช้...

หลังจากที่ได้ทดสอบโปรแกรมให้รันบน Docker และมีการเรียกใช้ scheduler ให้ทำงานเมื่อถึงเวลาที่กำหนดไว้ สิ่งที่พบก็คือ scheduler ที่ตั้งไว้ก็ทำงานจริง แต่เวลาที่โปรแกรมทำงานกับไม่ตรงกับเวลาที่เราต้องการ สาเหตุนั้นก็มาจาก localtime และ timezone บน Docker Container นั้นไม่ตรงกับเวลาของเรา ดังนั้นสิ่งที่เราทำเพื่อแก้ปัญหา ก็คือการกำหนด localt...

ผ่านการเปิดตัวบริการอีเมลจาก hey.com มาได้สักระยะ ตอนนี้ HEY ก็ได้ปล่อยบริการบล็อกส่วนตัว และจดหมายข่าวออกมาให้ผู้ใช้งานได้ใช้กัน วิธีการใช้งานนั้นก็แสนจะง่ายได้ เพียงเขียนสิ่งที่อยากพรรณนาลงไปเนื้อหา และส่งอีเมลไปยัง world@hey.com ทันทีที่ส่งอีเมลออกไป ก็คือการโพสบทความของเราออกไป และเข้าถึงได้ผ่าน world.hey.com/you/your-post-title เม...

Active Storage เป็นฟีเจอร์ที่ทำให้เราสามารถอัพโหลดภาพ หรือไฟล์ต่างๆ เข้าไปใน Rails Application ได้ง่ายๆ ซึ่งทางผมและทีมก็ได้นำไปใช้อยู่ในโปรเจ็คหลายตัว โดย Active Storage จะรองรับการอัพโหลดภาพไปฝากไว้บน cloud ไม่ว่าจะเป็นแบบ Amazon S3, Azure Storage และ Google Cloud Storage ซึ่งถ้าเราใช้ cloud service ก็จะมีการ caching ให้เราอยู่แล้ว แ...

เริ่มต้นจากปัญหาของตัวเองที่เวลาจะลางานในช่วงปลายปี จะมีคำถามเกิดขึ้นมาว่า "เอ๊ะ ตอนนี้ยังเหลือวันลาพักร้อนอยู่กี่วันแล้วเนี่ย" ทำให้ต้องไปสอบถามทาง HR บ้าง หรือนับรวมวันที่ลาจาก email ที่ส่ง ทำให้เกิดไอเดียที่จะพัฒนาโปรแกรมใบลาขึ้นมา นอกจากนี้ก็อยากให้น้องๆ ในทีมได้ทดลองใช้ Hotwire จริงๆ ในโปรแกรมด้วย ทำให้เริ่มต้นออกแบบการไหลของโปรแก...