🎞️ Videos → Claude Code that works is simpler than you think

แนะนำตัวและโปรเจกต์ bizdocgen เครื่องมือออกเอกสาร0:00

เดี๋ยวพี่ไทแนะนำตัวแล้วกัน สักเล็กน้อย เผื่อมีคนแบบ อาจจะยังไม่เคยเห็นพี่ไท ก็ชื่อไทยครับ เป็น software developer ตอนนี้อยู่ Eventpop ครับผม โอเค วันนี้พี่ไทจะมา

โชว์โปรเจกต์อะไร เราจะมาคุยโปรเจกต์ไหนกันดีครับ วันนี้ก็น่าจะมีหลายโปรเจกต์เลย แต่ว่าตัวโปรเจกต์หลักก็ ล่าสุดที่ผมเพิ่งปล่อย เป็น open source นะครับ ก็จะชื่อว่า bizdocgen ครับ หรือ Business Document Generator เดี๋ยวขอคร่าว ๆ แล้วกันนะครับว่า มันคืออะไรยังไง ก็คือประมาณว่า เมื่อก่อนเวลาผมจัดอีเวนต์หรืออะไรพวกนี้ หรือว่าเวลาดูแลพวก community มันจะมีบางทีมีเรื่องเงิน ๆ ทอง ๆ เข้ามา บางทีเรารับสปอนเซอร์

แล้วเขาโอนเงินมา เราก็ต้องออกใบเสร็จให้ บางทีเขาก็จะหักภาษี ณ ที่จ่าย บางทีเขาขอให้เราออกใบเสร็จรับเงิน บางทีเขาขอให้เราออก quotation ออกอะไรแบบนี้ครับ ซึ่งเมื่อก่อน ไม่แน่ใจใครต้องทำเรื่องพวกนี้อยู่บ้างไหมครับ มีใช่ไหม ปกติใช้อะไรกันครับ ใช้เขียนโปรเจกต์ขึ้นมาอันหนึ่งเหมือนกันครับ โอ้ ทำ generator เอง ใช่ครับ แล้วก็ใช้ input เป็น PDF form อ๋อ

LibreOffice อ๋อ โอเคครับ เท่าที่ผมเคยรู้จักหลายคนมา หลายคนมักจะใช้ Excel ไม่ก็ Word เนาะ เวลาถ้าแบบง่ายๆ เพื่อนที่อยู่สายดีไซน์เนี่ย เขาออกใบเสร็จกันด้วย Figma เคยเห็นไหม โคตรดีไซเนอร์ แบบผมก็เห็นใบเสร็จอะไรเต็มไปหมดเลย แบบออกใบเสร็จยังไงเนี่ย นี่ Figma ก็เห็นบางคนทำทุกอย่างใน Figma กันจริงๆ บางคนก็ใช้เรียกว่าอะไร FlowAccount ใช่ไหม ผมก็ใช้อยู่ ผมเคยใช้เหมือนกัน แต่รู้สึกว่าบางทีกดปุ่มนู้นปุ่มนี้ มันยังไม่ค่อยโดน มันยากเกิน เลยรู้สึกว่าโอเค ผมลองทำตัวแค่เจนเอกสารง่ายๆ ผมไม่ได้ต้องการฟีเจอร์บัญชีทั้งหมด ก็เลยลองสร้างตัวนี้ครับ

สร้าง Custom Widget บน Grist สำหรับออกใบเสร็จ2:22

โปรแกรมตัวนี้ชื่อว่า Grist Grist มันเหมือนเป็นคล้ายๆ let's say Airtable หรือ spreadsheet แต่ว่ามันใช้ฟรี แล้วก็มัน customize ได้เยอะ หน้าตาสีดำๆ ทั้งหมดเนี้ย เป็นของโปรแกรม Grist ส่วนที่เป็นสีขาวๆ ที่ออกเอกสารเนี่ย อันนี้คือ ตัวโปรเจกต์ ตัวเค้าเรียกว่าเป็น custom widget ครับ custom widget ตัวนี้ก็จะดูด ข้อมูลจากตารางตรงนี้ แล้วเอามาสร้างเป็นใบเสร็จ แล้วก็ใบต่างๆ ครับผม

โอเค ก็คือเหมือนกับว่า Grist เป็นเครื่องมืออันหนึ่ง แล้วเราก็ไปเขียนแนวปลั๊กอินอะไรอย่างนี้เข้าไป ใช่ครับ ประมาณนั้นใช่ไหม ดังนั้นวิธีใช้มันก็จะค่อนข้างง่าย อย่างเช่น ถ้าเกิดผมอยากจะได้ใบเสร็จอันใหม่ ผมก็กดตัว r ก็คือ receipt กด tab

รอสักครู่ อันนี้เป็น hosted ครับ มันจะช้านิดหนึ่ง แต่ว่าถ้าเราเอา Grist ซึ่งเป็น open source เนี่ย มารันในเซิร์ฟเวอร์เราเอง มันก็จะเร็วมาก ผมก็กด tab เครดิตกี่วัน 0 วัน เอ๊ะ แต่ว่าใบเสร็จไม่ต้องใช้เครดิตนี่นา ก็เลือกได้ว่าจะใครเป็น provider ใครเป็น client ก็เลือกได้ว่าจะ tax กี่เปอร์เซ็นต์ อะไรแบบนี้ครับ payment method ก็เลือกได้ว่าจะให้ส่งมาที่อันไหน มันก็จะสร้างแบบ QR PromptPay ให้ อะไรแบบนี้ จริงๆ น่าจะต้องใช้ใน invoice

อะไรแบบนี้ครับ เสร็จแล้วก็คือเราก็สามารถเปลี่ยนข้อมูลตรงนี้ แล้วก็กด print ออกมา ก็จะได้เป็นไฟล์ PDF อือ แล้วเราก็สามารถส่งให้อีกคนได้เลย อันนี้คือโปรเจกต์คร่าวๆ ครับ โอเค

เดี๋ยวต้องเอาไปใช้ซะหน่อย ครับ โอเคครับ ทีนี้เดี๋ยวเรามา

สร้างโปรเจกต์ใหม่ตั้งแต่ศูนย์ร่วมกับ Claude Code4:11

ทุกคนน่าจะพอเห็นภาพของโปรเจกต์ เดี๋ยวลองมาลงว่า เออตอนที่พี่ไท

จะเริ่ม develop หรือตอนที่จะใช้ Claude Code อะไรอย่างนี้ เรียกว่าจุดเริ่มต้นละกัน ตอนนั้นคือช่วงไหน Claude Code ผมเห็น beta ผมเห็นเขาแบบ ปล่อย waitlist ปุ๊บเนี่ย ผมรีบกดตั้งแต่วันแรกเลย เพราะว่าแบบเมื่อก่อนผมก็ใช้ Copilot autocomplete อะไรต่างๆ ใช่ไหมฮะ แล้วแบบก็สำหรับโปรเจกต์นี้ก็คือ

จริงๆ ต้องเล่าก่อนว่า อันนี้ตัวเจนเอกสารอันเนี้ย ผมทำเป็นรอบที่ 3 และ คือรอบแรกผมก็เขียนแบบบ้านๆ อ่ะ ก็คือ เรามี Google Sheets อะไรแบบนี้ ใช่ แล้วก็มี script ไปดูดข้อมูลมา แล้วก็เอามาสร้างเป็น PDF ใช้ อะไรนะ ใช้ Puppeteer render ออกมา ตอนนั้นก็ใช้ท่านั้น แต่ก็รู้สึกว่าแบบ โอ ไม่ค่อยสะดวกอ่ะ เวลาเราจะทำอะไร เราก็ต้องรัน script ไปๆ มาๆ ก็รอบ มาถึงรอบที่ 3 เนี่ย ก็ ตอนนั้น Claude Code ออกมาแล้ว ผมก็ขึ้นโปรเจกต์นี้ตั้งแต่ต้นด้วย Claude Code เลยครับ ด้วย Claude Code

แล้ว โอเค ก็คือพี่ น่าจะคล้ายๆ ปั่น ก็คือเรา เรามี stack ที่เรารู้อยู่แล้วว่าจะใช้เครื่องมืออะไร ใช่ แล้วตอนที่พี่ไทเริ่มคุยกับ Claude นี่คือมัน

ส่วนใหญ่จะเป็นแนวแบบออกแบบ แล้วให้มัน implement เลย อะไรอย่างนี้ป่ะครับ

บรีฟเทคโนโลยีกับ AI ให้เห็นภาพตรงกันก่อนเริ่มสร้างจริง5:41

stage แรก

stage แรกนะครับ จะเป็นการคุยเพื่อให้เราเห็นภาพตรงกันก่อน ว่าแบบ นี่คือสิ่งที่ผมจะสร้างนะ เออ คุณสร้าง custom widget ใน Grist เป็นไหม อันนี้คำถามแรกที่ผมถามเลย คุณสร้าง custom widget ใน Grist เป็นไหม ถ้ามันรู้แล้ว ผมจะได้ไม่ต้อง brief เยอะ แต่ถ้ามันบอกว่า โอ้ ฉันไม่ค่อยมั่นใจ ผมก็ไปก๊อป doc มา มาแปะ แบบนี้ ซึ่งพี่ เออ โอเค แปลว่าตอนแรกพี่ไทก็ sense อยู่ว่า มันไม่น่าจะได้ ใช่ครับ ไม่รู้ว่ามันจะได้หรือเปล่า เพราะว่าโปรแกรม Grist มันก็ ถาม ปกติผมถาม ว่าใครรู้จักบ้าง ส่วนมากไม่เคยมีใครบอกว่ารู้จักเลย โอเค โอเค อันนี้เป็นอันหนึ่งที่ผมรู้สึกว่ามีประโยชน์ เพราะว่า ที่ผมรู้สึกว่า vibe coding มันจะไม่เวิร์กกับ production ก็เพราะอย่างเคสอันนี้ เพราะว่า engineering มันเป็นเหมือนกับ

ต้อง align กันก่อนว่าเออ สรุปแล้วเราจะทำอะไรกันแน่ อะไรพวกนี้ เออ เพราะฉะนั้นอย่างเคสพี่ไทเนี่ย โอเค มันจะมี sense ว่า เอ้ย มันไม่น่าจะรู้นะว่านี่คืออะไร ลองคุยกับมันก่อนดีกว่า เพื่อให้เรา align กัน

จะได้รู้ว่าสรุปจะทำอะไรกันแน่ ใช่ครับ ดังนั้น commit แรกก็คือผมก็ clone เรียกว่าก็ใช้สร้าง project Vue ขึ้นมา

ปูรากฐานโปรเจกต์ แจ้ง AI ว่าต้องการโค้ดสเกลใหญ่ ไม่ใช่เขียนทิ้ง7:07

แล้วก็คุยกับมันว่าแบบ เออ เราอยากจะได้ project ที่เราสามารถ maintain ได้ ฉะนั้นคุณต้องมี CI คุณต้องมี CD คุณต้องมี unit test คุณต้องมี end-to-end test ต้องวางรากฐานให้ครบก่อน ฉะนั้น commit แรกจะยังไม่มี feature อะไรเลยครับ มีแค่ฐานเฉยๆ ว่าแบบ โอเค formatting naming อะไรเป็นยังไง ควรจะทำยังไงเพื่อให้แบบ เราไม่ได้แค่จะทำให้มันจบแล้วก็โยนทิ้ง ไม่ใช่ อืม โอเค คือถ้าเราไม่บอก AI เนาะ มันก็ไม่รู้ว่าตกลงเราอยากได้ code ที่ใช้แล้วทิ้ง หรืออยากได้ code ที่เราดูแลไปนานๆ ก็เลยจะเป็นสิ่งแรกที่ผมบอก เพื่อให้มันมี context ไว้ ว่าเออ อันนี้เราเอาจริงนะ เราจะใช้ไปนานๆ โอเคครับ

ก็คือเรารู้แล้วว่าโปรเจกต์นี้เราจะ

เราต้องการเหมือนแนวแบบ production ใช่ครับ เพราะฉะนั้นเราจะวาง ปูก่อน ปูรากฐานก่อนไม่ใช่แบบ โจ้เลย ใช่ครับ โอเค อืม ซึ่ง แต่ว่า ต้องบอกก่อนว่า 2 version ก่อนหน้านี้ ผมโยนเข้าไปเลยนะ สคริปต์นี้ ก็แบบ ลองสร้างมาซิ มันก็ vibe มาให้ แล้วช่วงที่พี่ไท วางรากฐานตรงนี้

นานไหมครับ แบบใช้เวลาคุยกับมัน adjust นู่นนี่นั่น อะไรอย่างนี้ ตอนนั้นก็ประมาณ รู้สึกว่าจะประมาณ 20-30 นาที โอเค

ก็บอกว่าแบบ โอเค ผมอยากได้เทส ผมอยากจะใช้ Vue ผมอยากจะให้คนสามารถเขียน CSS เข้าไปได้ ฉะนั้น ห้ามใช้ Tailwind อะไรแบบนี้ โอเค ซึ่งค่อนข้างที่จะ

เหมือน point ไปเลยว่าเราจะเอาแบบนี้ๆ ไม่ในเชิงที่ว่าแบบ ไม่ค่อยเปิด ว่างั้น ไม่ค่อยเปิด option เท่าไหร่ ใช่ครับ แล้วก็เมื่อก่อน

การใช้โมเดลเล็กอย่าง Haiku ควรระบุเงื่อนไขให้ชัดเจน8:55

ผม เรียกว่าอะไรนะ งก ก็เลยใช้ โมเดล Haiku อ่า โอเค ก็เลยรู้ว่า มันอาจจะแบบ หลงๆ ลืมๆ หรือแบบ รู้ไม่เยอะ ผมก็เลยแบบ โอเค ผมฟัน ตามที่ผมใช้ถนัดเลยดีกว่า แต่ตอนนั้น Haiku นี่คือ Haiku แบบ 4 เปล่าครับ 4 ครับ โอเค อืม ซึ่งอันนี้ผมว่าเป็นอันหนึ่งที่ดี เพราะว่า

ผมว่าหลายคนน่าจะมีคำถามว่า อ้าว อย่างนี้ก็ไม่ควรต้องใช้ Haiku หรือเปล่า ใช่ไหม อืม เพราะว่า งั้นเราก็ควรใช้ Opus หมดเลยหรือเปล่า

Opus ช้าและแพงด้วยครับ อ่า โอเค คือ มันจะมีตรงนี้ด้วยนิดหนึ่งนะทุกคน คือ โมเดลมันก็ มันก็แพงขึ้นเนาะ แล้วมันก็จะช้าลง

Haiku ที่ผมเห็นว่าเขาเอาไปใช้แล้วเวิร์ก คือ ตอนที่ให้ agent มันไปค้นหาข้อมูล

ตอนนั้น มันจะมีสกิลหนึ่งของ Claude code เลย คือ เขาจะเขียนไว้เลยว่า สกิลนี้ใช้ Haiku ซึ่งสมมติว่าเป็น use case ที่ดีมาก ที่ไปปรับใช้ได้ เอาไว้ใส่ใน sub-agent อะไรอย่างนี้ ประมาณนี้ จริงๆ ไม่ต้องใช้สกิลก็จะได้เหมือนกัน เช่น ผมบอกว่า launch a Haiku agent อ่า Claude มันจะรู้เองว่า โอเค เดี๋ยวมันจะต้อง ฝาก Haiku ไปทำงาน

เริ่มขึ้นฟีเจอร์ด้วย Vibe Coding บนรากฐานโปรเจกต์ที่ตั้งไว้10:14

โอเคครับ ถ้าอย่างนั้นก็ ต่อเลยครับ ก็ ตอนนี้พอเราได้ baseline แล้วใช่ไหมครับ ได้ foundation แล้ว step ต่อไปของพี่ไทคือ ก็ ลองขึ้น ลองขึ้น ลองขึ้น feature เลย อ่า อันนี้ก็ อะไรก็ไม่รู้เหมือนกัน ก็ ก็ vibe กับมันนะครับ ก็คือค่อนข้าง ค่อนข้าง vibe ระดับหนึ่งละกัน แต่ว่า vibe บนรากฐานที่เราเซ็ตมาแล้ว อืม ไม่ใช่ว่าแบบให้ สร้างๆๆ แต่ว่า โอเค ทุก step ที่คุณ vibe คุณจะต้อง test ให้ผ่าน อะไรแบบนี้ ครับผม ฉะนั้น ตรงนี้ก็จะเริ่มมาและ เริ่มมี Readme เริ่มมี เริ่มมี ตัว feature จริงๆ แล้ว แต่ว่า code ที่ออกมาก็มีหลายส่วน ที่ผมยังไม่ชอบ แต่ก็ แต่ก็โอเค แบบพอใช้งานได้ แต่ แต่ต้อง แป๊บนึงนะ เพราะว่าตอนนั้น ยังไม่มีพวกสกิลอะไรพวกนี้ออกมาใช่ไหมครับ เพราะตอนนั้นพี่ไทเขาทำโปรเจกต์นี้คือ ตอน ตอน ตุลาคมปีที่แล้ว

โอเค มันก็ยังไม่ค่อยมี MCP อะไรพวกนี้ มีหรือยังครับ อ๋อ MCP มีแล้วครับ แต่ผมแทบไม่ได้ใช้เลย อ๋อ โอเค ก็คือ ณ ตอนนั้นมันจะเป็นแบบ vibe ของจริง ก็คือ prompt แบบ prompt เอาอย่างเดียว แล้วก็ back and forth กับมัน ใช่ แล้วก็ นั่งกด accept ทีละ ทีละ edit อ่ะ คือเพราะตอนนั้นผมยังไม่ได้มั่นใจในตัว agent มาก อ๋อ ผมคิดว่าถ้าเป็นโปรเจกต์ที่ผม maintain ผมจะต้องแก้ได้ทุกบรรทัด ผมจะต้องรู้ว่า อะไรอยู่ที่ไหน อ่า ซึ่ง ณ ตอนนี้เปลี่ยนไปแล้วใช่ไหมครับ เปลี่ยน ไปเยอะเลยครับ

โอเคครับ โอเค แปลว่า ณ ตอนนั้นก็

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

แล้วก็ พอเห็น code ปุ๊บ

ถ้าเราไม่ชอบตรงไหนเราก็สั่งให้มันแก้ ใช่ครับ ปรับ เหมือนปรับ structure ปรับอะไรพวกนี้ ระดับหนึ่ง ใช่ไหมครับ อืม ครับ แปลว่าส่วน แล้วส่วนใหญ่พี่ไท review, test หรือ implementation มากกว่ากัน ณ ตอนนั้น

AI นิยมเขียนเทสด้วยแพทเทิร์นล้าสมัย โปรแกรมเมอร์ต้องคอยจับมือทำ12:24

ช่วงนั้นประมาณ ช่วงนั้น ช่วงนั้นผมจะ รู้สึกว่า test อ่ะ ผมจะเขียนมือซะเยอะ เพราะว่าสมัยนั้น รู้สึกว่า Claude มันยังเขียน end-to-end test ด้วย Playwright ไม่ค่อยเก่ง อ่า คือถ้าเราใช้โมเดลมาเยอะพอ เราจะเริ่มรู้นิสัยมัน ละกันครับ เช่น บางที มันจะ แบบเราสั่งให้มันทำอะไรมันก็ทำ ถึงแม้ว่าผลออกมาคือ technical debt มันจะเยอะขึ้น อะไรแบบเนี้ยครับ โอเค ฉะนั้น ตอนช่วงที่ผมใช้เนี่ย ผมสังเกตว่า Playwright เนี่ย ตอนนี้มัน 1.40 เท่าไหร่แล้ว ก็ไม่รู้ แต่เมื่อก่อน API หน้าตามันไม่เหมือนกัน เมื่อก่อนจะใช้แบบ page.locator หรือไม่แบบ page.click แต่เดี๋ยวเนี้ย เขาจะแนะนำให้ใช้ เขาเรียกว่า semantic selector เป็น best practice ในการเขียน test แต่เหมือน Claude มันถูก train มาแบบ pattern เก่าๆ ซึ่งทำให้ test มันอ่านยาก อะไรอย่างงี้ครับ

โอเค โอเคครับ งั้นตรงนั้นก็คือผมก็จะ เขียน test ด้วยตัวเอง ตอนนั้น ตอนนั้นคือผมเขียน test เอง แล้วก็บางทีผมแบบ อธิบายว่า เออ test ที่เราต้องการจะ เป็นแบบนี้ เสร็จแล้ว you ไป implement มา ก็คือมี test ให้แล้วก็ implement ให้ผ่าน ก็คือตอนนั้นอาจจะแนวๆ ต้องแบบ จับมือทำนิดหนึ่ง จับมือทำเยอะนิดหนึ่ง ใช่ครับ โอเค ถ้างั้น

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

รัน Agent บน Remote VPS ช่วยให้ AI ลุยงานเดี่ยวได้ปลอดภัยขึ้น13:54

สิ่งที่ผม เรียกว่า

ต้องบอกก่อนว่าแบบผมจะ บางทีผมจะ security conscious ผมจะไม่ค่อยปล่อยให้ agent ทำอะไรเอง ถ้า agent จะทำอะไรเองได้ มันจะต้องอยู่ใน sandbox ดังนั้นก็เป็นจุดหนึ่งที่ผมเริ่ม invest ในเรื่องเกี่ยวกับพวก remote development environment ก็คือ ลงพวก ก็คือแบบเช่า VPS มา แล้วก็ลง Linux ในเครื่องนั้น แล้วก็ให้มันมี desktop environment เลย ครับ

คราวนี้ ผมก็ run Claude แบบ yolo mode ได้ละ ไม่ต้องกลัวว่ามันจะไปทำอะไรพัง พวก access token ผมก็สร้างแบบ fine-grained ให้มัน แก้ไขได้แค่เฉพาะ repo นั้น ครับ หลังจากนั้น พอผมมีตรงนั้นแล้ว ผมเริ่มสบายใจในการปล่อยให้ agent มัน วิ่งเล่นละ อ่า หลังจากนั้นมันก็ค่อนข้างเปิดโลกผม ว่า โอเค พอเราปล่อยให้มันวิ่งเองได้ มันทำอะไรได้เยอะนะ เมื่อก่อนเราเห็นมัน หลงทาง เห็นมันแอบเลี้ยวซ้ายนิดหนึ่ง ผมก็เบรกมันละ บอกว่าไม่เอา เขียนแบบนี้ แต่ปรากฏว่า พอปล่อยให้มันวิ่งเองได้ มันวิ่งไปทางอื่นแล้วมันกลับมาได้ เออ นึกออก นึกออก ก็เป็น เป็นเรื่องที่เปิดโลกอย่างหนึ่ง ของผมละกัน โอเค

ซึ่ง อันนี้ก็

ก็แนะนำเหมือนกัน ถึงแม้ว่าส่วนตัวจะยังไม่ทำ ก็ควรจะทำ ควรจะ เป็นแบบพี่ไท เพราะว่า อันนี้ผมเห็น ก็คนที่สร้าง Claude Code เขาก็บอกเหมือนกันว่าเขาก็ host บน secure environment

แล้วก็ปล่อยให้มันทำ มันจะ เรียกว่า safe กว่า เพราะว่าเราไม่รู้ว่าวันหนึ่งที่ มันจะ เหมือนกับ backfire เราเมื่อไหร่ แบบ ลบนู่นนี่นั่นอะไรอย่างนี้ เออ ก็จะเศร้าๆ หน่อย ตอน ครับ ตอน

ดึง shell ใช่ครับ เดี๋ยวขอหาแป๊บนึงนะ อันนี้ อันนี้เป็นอีก project นึงละกัน แต่ว่าเป็น documentation generator อันนี้คือเป็นคล้ายๆ คล้ายๆ remote desktop ฉะนั้นตรงนี้ผมก็สามารถ inspect อะไรต่างๆ ได้หมดเลย แต่ว่า ผมใช้ iPad แล้วมัน jank นิดนึง ครับ

ตัวนี้ผมก็ inspect element ทำอะไรได้ ทุกอย่างเหมือนคอมทั่วไปครับ ส่วนด้านซ้ายผมก็จะมี shell เอาไว้ run Claude หรือ open code ครับ อย่างอันนี้ครับ ผมแก้บั๊กอยู่ละกัน บั๊กเนี่ย บั๊กที่ว่าก็คือ เวลาผมกด สมมุติว่า เดี๋ยวหาแป๊บนึง

การรัน Claude Code เพื่อหาบั๊ก CSS และเปิด PR บน iPad16:35

โอเค คือของเล่นพี่ไทเขาเยอะนะ อย่างแรกเลยคือใช้ Claude บน iPad ยังไงครับ ครับ สมมุติผมเปิด กดลิงก์ตรงนี้ แล้วมันวิ่งเข้ามาเนี่ย จะเห็นว่า heading ตัวนี้

มันโดน header ตรงนี้บัง อันนี้คือบั๊ก ครับ คราวนี้เนื่องจาก

ทั้งหมดนี้มันอยู่ใน sandbox แล้ว ผมก็เลยบอกว่า นี่ช่วย launch agent browser ไปที่ localhost 8080 หน่อย ซึ่งผมเปิด server ไว้แล้ว

มันก็วิ่งมาที่นี่ โอเค เน็ตผมไม่ค่อยไอ้นี่ โอเค แบบนี้ครับ มันก็ launch เข้ามาแล้ว เสร็จแล้วผมก็บอกว่า นี่ เวลาที่ผมไปที่ subsection เนี่ย ตัว header มันถูก heading overlap

หมายถึงตัว header มันไป overlap มันไปทับ heading มันก็ไปค้นหา ทำอะไรก็ไม่รู้เต็มไปหมดเลย ประมาณว่ามันก็ launch browser ขึ้นมา แล้วก็ลองดูว่าในหน้าเว็บนี้มีอะไร แล้วถึงขั้นไป getBoundingClientRect() ออกมา ก็คือไป get ออกมาว่า heading กับ header มันซ้อนกันยังไง แล้วก็ทำไมมันถึงซ้อนกัน อะไรแบบนี้ แล้วมันก็ อุ๊ย เจอแล้ว Sphinx ตัว documentation generator ที่ผมใช้เนี่ย มันเอา ID ไปใส่ไว้ผิดที่ วิธีแก้ก็คือ ไม่ได้ต้องแก้ JavaScript ด้วยนะ แก้ CSS ให้ถูกที่

เสร็จแล้วพอแก้เสร็จ ผมก็บอก โอเค draft a PR มันก็บอก โอเค เปิด PR ให้แล้ว ฉะนั้นสไตล์ตอนนี้สไตล์ที่ผมทำ

ผมก็จะประมาณนี้ สั่ง แล้วก็ลองดู output ให้มัน draft PR มา แล้วผมก็ดูแบบ โค้ดที่แก้มาโอเคไหม ซึ่งตอนนี้มันก็ยังเป็น agent browser อยู่ อย่างเช่นผมบอกว่า okay let's go to kitchen sink

มันก็จะคุยกับ agent browser ได้ ครับ

เมื่อพร้อมต์เร็วกว่าแก้โค้ดเอง: จุดเปลี่ยนที่เน้นสั่ง AI มากกว่าพิมพ์18:40

อันนี้เป็นตัวอย่างที่ดีเพราะว่าผมเคยเจอแบบนี้เคสหนึ่ง ต้องบอกว่าผมเป็นมาจาก front-end ใช่ไหม คือผมรู้ว่าอันนี้ปัญหานี้คือมันต้องแก้ยังไง ก็คือมัน scroll-margin-top มันมีหลายครั้งที่ผมรู้สึกว่า ทำไมกูไม่แก้โค้ดเองเลยวะ ก็แค่บรรทัดเดียว กับกูต้องมานั่งพิมพ์ เพื่อที่จะอธิบายมันว่า เฮ้ย อันนี้มันอยู่ข้างหลังอันนี้ นู่นนี่ ลองไปแก้ดิ แล้วก็ไม่รู้ว่ามันจะแก้ได้หรือเปล่า พี่ไทเคยมี feeling ไหม คือผมอ่ะมีหลายครั้งแล้วผม หลายครั้งผมตีกับตัวเองว่า กูจะแก้โค้ดดี หรือกูจะแก้ หรือกูจะ prompt กับมันดี หลังๆ ผมจะเริ่ม prompt ซะเยอะแล้ว

เพราะว่ารู้สึกว่าเวลาแก้โค้ดเนี่ย

มันอาจจะต้องคลิกหลายคลิก แต่ว่าบางทีถ้าผมรู้ว่าผมจะทำอะไร ผมจะบอกเลยให้ทำแบบนี้ เช่น selector นี้ เปลี่ยน border-radius ให้ด้านบนเป็น 20 pixel ด้านล่าง 0

อ๋อ ก็คือตอนนี้คือจะไม่โค้ดละ จะเน้น prompt มากกว่า ใช่ครับ โอเค แล้วก็วิธีฉะนั้นเนี่ย ถ้าตอนไหนที่แบบผมไม่รู้ว่ามันต้องทำอะไร ผมจะ prompt แบบ high-level แต่ถ้าผมรู้อยู่แล้วว่าอันนี้แก้นิดเดียว ผมก็จะ low-level เลย แต่ก็คือ รู้สึกว่าพิมพ์ในเนี้ย มันไม่ต้องไปคลิกเมาส์ โอเค โดยเฉพาะเวลา commit เมื่อก่อนผมแบบชอบ commit เอง เดี๋ยวนี้ผมก็แบบ commit enter อ๋อ โอเค อันนี้เห็นด้วยเหมือนกัน

อุปสรรคการสั่งโค้ดด้วยเสียง และการเลือกใช้โมเดลผสมภาษา20:20

แล้วก็หลังๆ ที่ผมใช้เยอะก็คือพวก voice typing

แต่ปัญหาของพวก voice typing ทั่วไปคือ มันฟังศัพท์เทคนิคไม่ค่อยได้ หรือว่าฟังภาษาไทยไม่ค่อยได้ อันนี้ผมก็ต้องไป research ว่ามี model อะไรดี แล้วก็สร้าง personal software มาใช้เอง พี่ไทเคยใช้ของ Claude ไหม เขามี voice mode มันมาปุ๊บผมลองใช้เลยแล้วก็แบบ เศร้าเลย ฟังภาษาไทยไม่ได้อะไรแบบนี้ ผมก็ว่าแล้วว่ามันไม่ค่อยเวิร์ก ไอ้สิ่งที่ผมติดเรื่อง voice คือส่วนตัวผมก็อยากจะ voice mode เหมือนกัน เพราะว่าตอนนั้นอยู่ในช่วง vibe ก็คือนั่งดู Netflix แล้วก็มีอีกจอนึงแล้วก็ ขี้เกียจพิมพ์แล้ว ก็อยากจะ voice mode อะไรแบบนี้ใช่ไหม แต่ว่าไอ้สิ่งที่ผมติดคือ เวลาเราพิมพ์ เรารู้ว่าเราจะต้องใส่ tag อะไรนู่นนี่นั่นใช่ไหม แต่ว่าเวลา voice มันไม่ได้อ่ะ

เหมือนกับว่าสิ่งที่มันออกมาบน terminal มันไม่ได้เป็นแบบที่เราคิดหรือเราพิมพ์

มีเจอแบบนั้นบ้างไหมครับ อย่างเช่น สมมุติบอกมาว่า ใน source code คือเราจะใส่ @ ใช่ปะ เราก็ใส่ path เพื่อ reference file ใช่ไหมครับ แต่พอผมบอกมัน at มันก็กลายเป็น AT อะไรพวกเนี้ย ผมเลยยังไม่รู้ว่า

วิธีใช้ที่ถูกต้องของมันคืออะไร ปกติผมจะพูดเป็นคำพูดเลย เช่น แบบ please look at the CSS file แล้วก็เชื่อว่าโมเดลมันจะ figure out ให้ อย่างตอนเนี้ย เมื่อกี้ผมสั่งให้มันไป kitchen sink แต่หน้าจอผมมันยังไม่เปลี่ยน แปลว่า การเชื่อมต่อมันน่าจะหลุด คราวนี้ผมก็สร้างตัวนี้ขึ้นมา อันนี้ อ๋อ โอเค เน็ตมาละ ก็คือ

ผมมีโปรแกรมนี้ run อยู่บนมือถือแล้วก็ run อยู่บน iPad

It seems that the agent browser is not working well. I do not see it on my screen, so maybe you can close the current session and then reopen the browser in headed mode.

มาแบบนี้ครับ ผมก็เอาไป

ของเล่นพี่ไทเยอะจริง แล้วก็ปล่อยมันวิ่งต่อไป ประมาณนี้ครับ มาแล้ว นี่ kitchen sink มาแล้ว

และก็แบบปัญหาที่ผมมักจะเจอก็คือ พวก voice typing ทั่วไปมัน ไม่สามารถ handle พวกศัพท์เทคนิคได้ เช่นแบบ ให้ไปดูที่ editor controller หน่อย ให้เปลี่ยนไปใช้ ให้เปลี่ยนจาก useState กับ useEffect ให้เปลี่ยนไปใช้ useStore

อันนี้ผมใช้โมเดลของ Qwen ครับ ซึ่ง ซึ่งสามารถ handle ศัพท์เทคนิค และก็ภาษาไทยปนอังกฤษได้ อืม อันนี้ก็ ผมมองว่าพวกเนี้ย vibe ได้ เพราะว่าเราใช้เองคนเดียว ใช่ ๆ เข้าใจ ก็อันนี้ผมก็แบบไม่ค่อยได้อ่านโค้ดเท่าไร แต่ว่า แต่ว่าให้มันเวิร์กก็พอ ให้มันค่อนข้างเวิร์กก็พอ อันนี้เห็นด้วยเลยว่า vibe มันจะเวิร์กตรงนี้แหละ อืม เพราะฉะนั้น personal software แนะนำมากๆ ลอง ลองสร้างของ เห็นอะไรตรงไหนที่แบบเรา หงุดหงิดอ่ะ ก็ลอง vibe ดู ครับ โอเค เดี๋ยวเรามา อันนี้มีคำถามอีกนิดหนึ่งคือ

เจาะลึก Setup การเขียนโค้ดบน iPad ด้วย Blink Shell23:47

อันนี้คือพี่ไทรัน terminal บน

iPad ใช่ อันนี้แอปชื่อ Blink Shell ครับ หน้าที่ของมันคือเป็น secure shell ก็คือ ssh เข้าไปที่ server ปลายทาง ส่วน ครึ่งจอซ้ายเนี่ยจะเป็น terminal ส่วนครึ่งจอขวาตรงนี้จะเป็น จะเหมือนเป็น remote desktop อืม

แต่จริงๆ ผมเปิด terminal ในนี้ก็ได้ แต่แบบเวลาพิมพ์มันจะหน่วงๆ หน่อย อืม โอเคครับ เผื่อคนน่าจะได้ไอเดียนะ อันนี้ terminal จริงของ desktop มันจะหน่วงๆ นิดหนึ่ง แต่ พิมพ์ในนี้สะดวกกว่า ครับ โอเค อ้าว

Tailscale ครับ ใช่ครับ นี่ครับ .ts.net ตรงนี้

Blink Shell ผมก็ใช้อยู่ครับ ตอนนี้ผมกำลังลอง evaluate สองตัวนี้อยู่ แค่ Blink Shell ช่วงหลังๆ ผมรู้สึกว่า บางทีมัน มี เรียกว่าอะไรอ่ะ บางทีผมใช้แล้วมัน มันบน iPad มัน รู้สึกว่า experience ยัง คือมันออกแบบมาสำหรับ iPad แต่แบบผมก็ยังไม่รู้ทำไมบางทีแบบ เวลาเปิด Spotlight แล้วมันพิมพ์ไม่ได้ หรืออะไรอย่างนี้ครับ มันจะ มีปัญหาหยุมหยิม ผมก็เลยลองหลายๆ ตัว ครับ

โอเคครับ ตอนนี้ของเล่นเยอะมาก ไม่รู้จะถามอะไร มี มีก่อนก่อนไป มีใครมีคำถามอะไรตรงนี้ไหมครับ เผื่ออยากรู้ตรงนี้ มีใครสนใจจะใช้ iPad แทนคอมบ้าง

เหตุผลส่วนตัวที่เปลี่ยนจากแล็ปท็อปพังมาเป็น iPad25:23

จริงๆ ต้องบอกว่าที่ใช้ iPad เพราะว่า คือ MacBook เก่าของผมมัน ประมาณ 6 ปีแล้ว แล้วจอมันเริ่ม จอมันเริ่มกระพริบ ผมก็เอาไปที่ Apple Apple ก็บอกว่า AppleCare คุณหมดแล้ว ตอนนี้ Apple ไม่แคร์แล้ว ก็ ถ้าจะเปลี่ยนจอก็ 30,000 ผมก็เลย แล้วเมื่อก่อนผมก็เคยพยายาม พยายามโค้ดบน iPad มา แต่ว่า ใช้ IDE มัน มัน ไม่ถนัด ไม่ถนัดต่อให้มี remote desktop อะไรพวกนี้ก็ยังรู้สึกไม่ถนัด จนกระทั่งมาถึงยุค agent เมื่อเนี้ย พอผมมาลอง มาลองใช้ใหม่ นี่ผมเพิ่งเริ่ม setup นี้เมื่อประมาณ 2 สัปดาห์ที่แล้วเอง แต่ตอนนี้ก็ค่อยๆ ผันตัวเป็น iPad kid ละ เออ แต่ผมว่าผมเริ่ม get พี่ไทละ ที่พี่ไทหันมา

คุยกับ agent แทนที่จะไปแก้โค้ด เออ เพราะว่ามัน มันสะดวกกว่า

โอเคครับ เดี๋ยวกลับไปที่ตัว Claude Code นิดหนึ่ง อันนี้พี่ไทพอจะเปิดโปรเจกต์ได้ไหม มีขอแบบ fast forward

มาช่วงยุคตอนนี้เลยแล้วกันนะครับว่า workflow อะไรมีเป็นยังไงบ้าง สมมติว่ามีจะแก้บั๊ก จะเพิ่มฟีเจอร์นู่นนี่นั่น

มี setup พวก workflow เกี่ยวกับ Claude Code ยังไงบ้าง อะไรอย่างนี้ เปิดให้ดูอะไรพวกนี้มีไหมครับ เดี๋ยวขอคิดแป๊บหนึ่งนะ หลักๆ ที่ใช้หนักๆ ก็จะเป็นของที่ทำงาน อันนี้ผมอาจจะยังเปิดโค้ดให้ไม่ได้ แต่ถ้าตรงไหนที่เปิดได้ เดี๋ยวผมจะโชว์ให้ดูแล้วกัน

ให้ AI อ่าน Jira Issue แล้วถกปัญหากันก่อนเริ่มแก้27:02

แต่หลักๆ Claude Code ผมก็จะเชื่อมกับ Claude AI subscription เนาะ แล้วใน Claude app เนี่ย ผมก็จะเชื่อมกับ Jira

เพราะนั้นเวลามี issue อะไรเข้ามา

ผมก็บอกไปดู issue นี้ให้หน่อย เสร็จแล้วก็มา discuss กัน ผมจะชอบ เดี๋ยวนี้ผมจะชอบใช้มากเลย let's discuss อะไรแบบนี้ เมื่อก่อนผมจะใช้ let's discuss แปลว่า อย่าเพิ่งรีบแก้นะ มาคุยกันก่อนให้เห็นภาพตรงกันก่อน แล้วค่อยแก้ มันก็จะถามๆ จนเราเริ่มมั่นใจแล้วว่า โอเค

ถ้าเราปล่อยให้ยู cook ก็จะ มันน่าจะมีโอกาส

ซึ่ง แต่อันนี้คือในเคสที่เป็นบั๊กแบบที่ดูจะ complex

ใช่ครับ ถ้า let's discuss ก็จะ complex ถ้าอันไหนมันแบบง่าย ง่ายมาก ก็

ก็บอกว่า ไปสืบมาให้หน่อยว่าเกิดอะไรขึ้น อะไรแบบนี้ บางทีผมจะใช้แบบ ไปสืบมาให้หน่อย แล้วของพี่ไทมีเหมือนกับมี agent ที่แบบ triage issue

ให้ไหม หรือว่า ปัจจุบันยังไม่ได้ใช้ครับ ก็คือ เป็น issue เปิดมาจากคนหรือใครก็ตาม ใช่ครับ เป็นคนหมดครับ ก็คือ issue เข้ามาในบอร์ด แล้วเราก็ จะดูว่าจะแก้อะไร ก็ค่อยเอามา เปิดเป็น session คุยกับ agent เป็น flow นั้น ส่วนมาก issue จะวิ่งมาทาง Slack แล้วก็อยู่ใน Jira บ้างด้วย อะไรประมาณนี้ครับ แต่ช่วงหลังๆ ผมไม่ค่อยได้ไปช่วย triage ขนาดนั้น แบบ ไปทำฝั่ง engineering ซะเยอะ โอเคครับ โอเค พอ discuss เสร็จปุ๊บ

สมมติว่าจบแล้ว ใช้เวลานานไหมครับ สักแบบ เวลา discuss กับมัน แบบ ชั่วโมง บางที บางทีเป็นวัน เป็นวันเลยเหรอครับ บางทีก็ประมาณชั่วโมงหนึ่ง บางทีก็ครึ่งชั่วโมง ถ้ามันไม่ได้ซับซ้อนมาก แต่ส่วนมากไม่ค่อยถึงวัน เพราะว่า context window หมดก่อน

แนะนำสกิล /grill-me ให้ AI ถามจี้จนกว่าเราจะตกผลึกไอเดีย29:12

ตอนนี้ เมื่อก่อนผมแบบใช้ let's discuss แต่เดี๋ยวนี้ผมใช้ /grill-me ต่อมาผมก็ใช้ /grill-with-docs

เคยได้ยินไหมครับ /grill-me ใช้ ใช้อยู่ ใช้อยู่ทุกวันนะ พี่ไทเปิด repo ให้หน่อย

ตอนนี้เขาย้ายไปอยู่ที่ aihero.dev ละ แล้วก็ AI Hero /grill-me /grill-with-docs ละกัน เพราะว่า ไหนหว่า

อันนี้ไม่ได้ขายคอร์สนะครับ แต่ว่า ผมแนะนำเพราะอะไรรู้ไหม คือแนะนำ อย่างแรกคือเข้าไปอ่านว่าเขาเขียนอะไร คือ พออ่านปุ๊บเนี่ย เราจะรู้ทันทีเลยว่า คนนี้เก่งภาษาอังกฤษ คือเขาเป็น native แหละ แต่ว่าภาษาที่เขาใช้ คือผมลองมาเทียบกับสิ่งที่ผม คือผมก็มี skill แบบเขานี่แหละ แต่ว่าของผมสร้างมาจาก skill creator ใช่ไหม แล้วผมรู้สึกว่า มันเป็นข้อจำกัดในทางภาษานิดหนึ่ง คือเราอธิบาย AI ใช่ไหม AI มันสร้างขึ้นมาใช่ไหม prompt ผมแม่งโคตรยาว เอ้ย skill แม่งโคตรยาวเลย แต่ว่าพอไปดู skill เขา skill เขาแบบสั้นๆ แต่เขามี adjective มี adverb ที่แบบ work มาก

อย่างเช่น relentless อย่างนี้ สมองคิดไม่ได้ ใช่ เดี๋ยว ชอบบทความนี้มาก เดี๋ยวขอหาแป๊บหนึ่ง นี่

อันนี้เขาบอกว่า อันนี้คือ คือตัว prompt ของ /grill-me เนาะ ของอันนี้บทความของคุณ Nutchanon.org นะครับ

เขาก็พูดว่า ให้สัมภาษณ์ ให้สัมภาษณ์เรา relentlessly ใช่ไหม relentlessly แบบอย่ายั้งมือ เกี่ยวกับทุกอย่าง ทุก detail จนกว่าเราจะเข้าใจตรงกัน แล้วก็แต่ละ branch ก็ให้ ให้คุยกันอ่ะ อันนี้ ผมชอบ comment เขา ผมชอบ comment ของแบบเจ้าของ blog มากเลย เขาบอกว่า จนกว่าเราจะเข้าใจตรงกัน มันแบบเรียบง่าย โรแมนติก สะกิดใจ ของพังๆ ที่เคย ship ส่วนใหญ่ไม่ใช่ bug แต่มันคือความเข้าใจไม่ตรงกัน อะไรแบบนี้

ระหว่างสองจิตสองใจ ประมาณนั้น โอเค แต่ครับ ผมชอบเพราะว่า

ของ Matt เนี่ย แนะนำให้ลองเข้าไปอ่าน skill เผื่อเราจะเขียนได้ดีขึ้น คือเขาเขียนแค่ไม่เยอะมาก แต่ว่า ศัพท์ต่างๆ ที่เขาใช้ ภาษาที่เขาใช้ อะไรอย่างนี้ มัน มันได้ผลลัพธ์ที่ดีจริงๆ ใช่ เมื่อก่อนเขาบอก skill ควร 200 บรรทัด กี่ token อะไรแบบนี้ใช่ไหม 4 ประโยค ผมแบบช็อกมาก

อะไรวะเนี่ย magic ชัดๆ ใช่ครับ อันนี้ skill /grill-me นี่ ผมได้รับการป้ายยามาจากงาน BKK.js รอบที่แล้ว จากคุณมายด์ ThaiType ที่พูดถึงเรื่องแบบ write code ยังไงไม่ให้พัง เขาก็พูดถึง skill นี้ ผมก็แบบ โอ้ ถ้าทั้ง talk เขาแชร์ skill นี้เป็นหลัก แบบเขา name drop มาหนึ่งชื่อ มันก็เลยแบบ มันน่าจะต้องมีอะไรแน่เลย ก็เลยเข้าไปลองหาดู แล้วก็เอามาลองใช้ ก็แบบ อืม ใช่ ก็คืออันนี้แนะนำจริงว่ามันเปลี่ยน /grill-me เนี่ย แนะนำว่า ที่เขา design มานะ ก็คือใช้กับอะไรก็ได้เลย ที่เหมือนไอเดียเรายังไม่เคลียร์ เออ เพราะว่า

สมมติว่าเรามีไอเดียอะไรสักอย่างหนึ่งเนี่ย ก็คือ /grill-me แล้วก็ไอเดียที่เรา ที่เรา ที่เรามี มันก็จะช่วย list คำถาม เพื่อที่จะ point out ไอ้ สิ่งที่มันอยู่ในหัวเราอ่ะ เพื่อให้ตอบ ตอบออกไป ให้ AI มันได้ context เพิ่มขึ้น สุดท้ายจะได้เอาไปทำเป็นเหมือนกับ แนวๆ PRD หรืออะไรอะไรไม่รู้แหละ ที่มัน clear มากขึ้น กับ product เรา

ประยุกต์ใช้ /grill-me ปรึกษาปัญหาช่วยเลือกของในชีวิตประจำวัน33:12

ใช่ครับ แล้วมันไม่ใช่แค่กับ code นะ ตอนนี้แบบผมก็โหลด skill ตัวนี้ แล้วก็ import เข้าไปใน Claude chat ด้วย เพราะว่าแบบ work สุดๆ เลย แบบล่าสุด น้ำยาล้างจานหมดครับ ผมไป Big C ผมเห็นชั้นน้ำยาล้างจานมีซันไลต์ 4 สี ผมไม่รู้จะใช้สีไหนดี เมื่อก่อนปกติซื้อสีเหลืองใช่ไหม แต่เห็นสีหลายๆ สี ผมก็แบบ เปิด Claude chat แล้วก็ถ่ายรูปไป เมื่อก่อนจะถามว่าแบบ ซื้ออันไหนดี มันก็จะแบบ list list list มายาวใช่ไหม ตอนนี้ผมถามแล้ว ซื้ออันไหนดี /grill-me

ขอผลลัพธ์ครับว่ามัน มันถามประมาณไหนบ้าง ว่าใช้ยังไง จะเอาไปใช้ทำอะไร อะไรประมาณนี้ใช่ไหม ใช่ๆ แบบแบบ คล้ายๆ ว่า

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

มันหลายๆ อันมันดู marketing speak อ่ะ คุณช่วย cut through พวกนี้แล้วก็ช่วยหา แนะนำได้ไหม อะไรแบบนี้ แล้วสรุปได้สีอะไรครับ ได้สีเขียวเข้มมาครับ สีเขียวเข้ม แถมได้ความรู้ด้วยว่า เขาบอกว่า ฟองน้ำอ่ะ เออ เวลาวางเขาบอกว่าให้ตั้งไว้ ไม่ใช่แบบเอาสีเขียวคว่ำหรือสีเหลืองคว่ำ เหรอ เออ ผมก็แบบ เออ มันก็ช่วย life skill เรา ได้ระดับหนึ่งนะ โอเค ลองลองลองเอาไปปรับดูนะครับ โอเค อันนี้อันนี้คืออันหนึ่งที่พี่ไทแชร์มา เดี๋ยวนะ เมื่อกี้ถึงไหนแล้ว ลืม

อืม

ก่อนหน้านี้เราอยู่ตรงไหน ก่อนหน้านี้ เหมือน day-to-day work ละกัน ก็ปกติก็จะ /grill-me แล้วก็เดี๋ยวผม ยกตัวอย่างชัดๆ ให้ดูละกัน เอ่อ

อย่าสั่ง AI ลอยๆ ว่า 'ทำให้เร็วขึ้น' แต่ควรสร้างเครื่องมือวัดผลให้ AI ตรวจสอบ35:13

อันนี้มี project ที่ผมทำเล่นๆ อยู่ เป็นคล้ายๆ ว่า ตัว editor สำหรับแบบ rhythm game ซึ่งแบบเราก็สามารถแบบ ย้ายของ อะไรต่างๆ ได้ หรือว่าแบบ ปรับความเร็วเพลง อะไรอย่างนี้ เอาความเร็วเพลงไปใส่ อ๊ะ ผิด ผิดช่อง เอ่อ ต้องไปใส่ตรงนี้

แบบนี้ฮะ 128 พอเพลงเร็วขึ้น waveform ตรงนี้มันก็จะต้องห่างขึ้นใช่ไหม แบบหมายถึงว่า ทุกอย่างมันก็จะต้องยืดขึ้น คือแบบ พวกนี้ทำให้ performance ดีอ่ะ vibe ไม่ได้แน่ๆ อืม ซึ่งในรอบนี้ อันนี้ผมไม่ได้ใช้ Claude code ผมใช้ Open code แต่ว่าก็คุยเกี่ยวกับเรื่อง performance ก็บอกว่าแบบ นี่ ตอนนี้ปัญหาเรื่อง performance เนี่ย

เอ่อ ผมอยากจะทำตัวสิ่งทีเรียกว่าเป็น debugger ละกัน เอ่อ เดี๋ยวขอหาแป๊บหนึ่งนะ

ผมอยากจะทำ profiler เพื่อดูว่า timeline มัน render ช้าขนาดไหน เพราะตอนนี้ผมรู้สึกว่ามันกระตุกแล้ว อันนี้ก็ อันนี้ผมใช้ skill ที่ชื่อว่า Grill with docs ผมบอกว่า เนี่ย ผมอยากได้ tab debug เอาไว้ข้างๆ ไฟล์เสียง แล้วก็อยากจะให้มันโชว์ว่า มันใช้เวลา re-render กี่ millisecond มา Grill with docs กัน มันก็จะถาม คำถามแรกจะเก็บ state ไว้ที่ไหน คำถามที่สอง package ตัวนี้จะ

expose อะไรออกมา อะไรแบบนี้ฮะ ซึ่งผมก็ชอบที่แบบมันให้ choice มา แล้วมัน suggest ด้วยว่าแนะนำอะไร แต่ถ้าอันไหนที่ผมแบบเอ๊ะๆ ผมก็ถามมันกลับ

บางทีผมยังไม่ได้ให้คำตอบ แต่ผมถามมันกลับด้วยว่าแบบ เออ แบบไหนมีข้อดีข้อเสียยังไง อะไรแบบนี้ฮะ ฉะนั้นผมก็จะ /grill-me มันหนักๆ เลย

เสร็จแล้วผมก็ปล่อยมัน cook ล่าสุดก็คือปล่อยมันทำงานไปประมาณ 50 นาที

แล้วกลับมาก็โอเค โอเค บั๊กกระจายครับ ก็ต้องแก้อีกนิดหนึ่ง เกือบดีละ โอเค มี point หนึ่งที่ผมรู้สึกว่า ที่พี่ไทกขึ้นมาดีคือเรื่อง performance เพราะผมก็เจอมาเหมือนกันว่า ถ้าจะให้ Claude code มันช่วย improve performance อ่ะ prompt ธรรมดาไม่เวิร์ก

โดยเฉพาะการที่ไปบอกมันว่า ไอ้เนี่ยช้า ทำให้มันเร็วหน่อย อันนี้ตาย คือมันจะ shift code ที่แบบ

แย่ ค่อนข้างแย่เลยอ่ะ แล้วก็แบบพยายามจะจบงานของมันเอง เพราะฉะนั้น อันนี้แนะนำว่าอย่าไปทำนะครับ เวลาเจอ performance อันนี้พี่ไทแนะนำยังไง เวลาถ้าเราต้องเจอ สมมติว่า อย่าง use case ของผมนะ

เอาแบบง่ายๆ คือ vibe ตอนนั้นก็ vibe เหมือนกัน แล้วปรากฏว่า data ที่ render บน table มันเยอะมาก

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

AI ขาด 'ต่อมเอ๊ะ' โปรแกรมเมอร์ต้องคอยสังเกตและสั่งลด Technical Debt เอง38:30

สำหรับผมคือ ผมเชื่อว่า พวกปัญหายากๆ พวกเนี้ย เรียกว่าอะไรนะ ผมคิดว่า AI มันไปได้อาจจะสัก ตอนนี้มันอาจจะสัก 80 หรือ 90% 10% ที่เหลือนี่เป็นจุดที่เราต้อง

เออ ยังต้อง ยังต้องใช้ engineer อยู่ ผมไม่แน่ใจว่ามันจะเป็นแบบนี้ไปนานไหมนะ แต่ว่าตอนนี้มันก็ มันก็ยังรู้สึกว่าแบบ เออ มันยังต้องใช้ engineering judgment เยอะมาก ตัวอย่างเช่น ก่อนที่ผมจะให้แก้

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

คือถ้าจะให้มันเวิร์กนะครับทุกคน ต้องมีอะไรสักอย่างให้ AI มัน verify ได้ ว่าผลลัพธ์อ่ะ มันดีขึ้นหรือเปล่า ใช่ อย่างเช่นถ้าเกิดผมไปบอกมันว่า ทำให้ไอ้นี่มันเร็วหน่อย ทำให้มันเร็วขึ้นหน่อยดิ อย่างงี้อ่ะ ด้วย context ตรงนั้นอ่ะ มันไม่รู้หรอกว่า เร็วของมึงคืออะไรวะ เดี๋ยวจัดให้ ใส่มา useState แม่ง จะสโต้งสโต้อะไรไม่รู้ มาเต็ม แต่ว่ามันไม่ได้ get ว่าความเร็วของเราคืออะไร เพราะฉะนั้นมันอาจจะต้องมี อันนี้เป็นจุดที่เราต้องคิดเองว่า ทำยังไงให้ AI มัน verify ได้ว่าผลลัพธ์อ่ะ เออ มันเร็วขึ้น

แล้วก็ปล่อยให้มันรันไปเรื่อยๆ ใช่ไหม ประมาณนี้ป่ะครับ ใช่ครับ แล้วก็อีก judgment หนึ่งก็คือ

เรียกว่าอะไรอ่ะ ผมรู้สึกว่า อันนี้ผมยืมคำศัพท์

ของอาจารย์ท่านหนึ่ง ผมจำไม่ได้ว่า อาจารย์นัททีหรือเปล่า แต่เขาจะบอกว่า engineer จะต้องมี "ต่อมเอ๊ะ" ว่าแบบ เอ๊ะ นี่มันเริ่มไม่ใช่แล้วนะ ซึ่งตอนนี้ผมรู้สึกว่า AI มันไม่ค่อย มันยังมี แต่ว่ามีไม่เยอะพอ ตัวอย่างเช่นนะ สมมติผมอยากให้ เพิ่มปุ่มเข้าไปใน toolbar แล้วเราไปเปิดไฟล์ toolbar AI เปิดไฟล์ toolbar นะ เห็นโค้ด 900 บรรทัด คิดว่ามันเอ๊ะไหม ว่าทำไมไฟล์มันยาวขนาดนี้ ก็ส่วนมากก็จะ ไม่เอ๊ะ ใช่ไหม มันก็เพิ่มโค้ดไป อ่ะ อีก 50 บรรทัดละกัน กลายเป็น 950 บรรทัด แล้วถ้าเราทำแบบนี้ไป 10 รอบ จู่ๆ เรารู้ตัวอีกที โอ้ว ไฟล์เรา 3,000 บรรทัดแล้ว

งั้นผมเลยมองว่าแบบ เออ ก็เป็นหน้าที่อีกอันหนึ่งของเรา ที่จะต้องเอ๊ะว่าแบบ เฮ้ย ไฟล์นี้มันยาวไปแล้วนะ หรือแบบ เฮ้ย อันนี้มันทำไมมัน debug ยากจัง ทำให้มัน debug ง่ายขึ้นได้ไหม อะไรแบบนี้ ก็ ซึ่งบางทีผมก็ยังไม่ค่อยกล้าฝากไว้กับ AI คือผมรู้สึกว่า ถ้าเราบอกว่า เฮ้ย ลด technical debt ตรงนี้ด้วยวิธีนี้ ผมค่อนข้างมั่นใจว่า มันจะ มันทำเป็น แต่ว่า จุดที่เรา trigger ให้มันทำอ่ะ แบบ เรียกว่าอะไรอ่ะ ถ้ามันรู้มันก็คงทำไปแล้ว อันนี้ตัวอย่างครับ

ตัวอย่างโค้ดที่ AI เขียนจนไฟล์บวม เพราะขาดการพิจารณาใช้ Library41:40

โค้ด React เนาะ คือ เนี่ย ผมเอ๊ะใส่โค้ดโปรแกรมนี้มากเลย มี controller กับ view ใช่ไหม ผมมองว่า controller เป็น logic หลัก ฉะนั้นตรงนี้มันจะต้อง test ดีมาก เวลาแก้ อะไรต่างๆ ต้องมี run test อะไรต่างๆ ดี แล้วแบบผม keep file size แต่ตอนเชื่อมกับ UI ผมก็ปล่อยมันเชื่อมไป ฉะนั้นโค้ดฝั่ง controller ผม clean แต่พอไปดูฝั่ง UI ผมรู้ตัวอีกที นี่

ไฟล์ UI ผม 1,200 บรรทัด แล้วผมก็แบบไปดู เฮ้ย ทำไมอะไรมันต้อง ทำไมมันต้อง 1,200 บรรทัดด้วยเนี่ย นี่ครับ อันนี้เป็น nanostore เนาะ nanostore nanostore เนี่ย ปกติมันมี React binding อยู่แล้ว ก็แค่สั่ง useStore แต่ไม่รู้ทำไมมันไม่ใช้ มัน useState แล้วมันก็ไป useEffect เพื่อ subscribe แล้วมันทำแบบเนี้ย แบบ มันเห็นอันแรกแล้ว มันก็แค่ทำอันที่สอง มันเห็นสองอันแล้ว อ่ะ มันก็แค่ทำอันที่สาม ทำไปเรื่อยๆ ผมก็แบบ เฮ้ย ทำไมไม่ใช้ useStore จ๊ะ คำถามผมคือ ไฟล์เนี้ย มัน gen ทีเดียว หรือว่า หลายๆ เกิด เกิดขึ้นหลาย หลายๆ iteration ครับ ตอนแรก ตอนแรก UI ผมเป็นหน้าเปล่าๆ ต่อมามี toolbar มีด้านซ้าย มีด้านขวา มี tab มีอะไรพวกนี้ แล้วมันก็ค่อยๆ งอกขึ้นมา แต่ตอนแรก กระดุมเม็ดแรกมันดันใช้ useState กับ useEffect กระดุมเม็ดที่เหลือมันก็เลยพังหมดเลย อันนี้เป็นอีกอันหนึ่งที่ผมกล้ารับประกันว่า

AI เก่งเรื่องก๊อปปี้แพทเทิร์น ถ้ากระดุมเม็ดแรกผิด มันจะเขียนผิดตามไปเรื่อยๆ43:14

AI จะเก่งมากในการลอก pattern ที่มีอยู่แล้ว มันจะไม่พยายามทำอะไรใหม่ ถ้าเราไม่ได้มี

แบบ intention ให้มันทำใหม่ มันจะเก่งมาก อย่างเช่น การเขียน test มันจะดู pattern test เรา แล้วก็ กูก็จะ gen แบบเนี้ย ให้มึงไปเรื่อยๆ หรือเขียนแบบเนี้ย คือ รู้เลยว่ามัน อันนี้เวิร์ก มันมาสไตล์นี้แน่นอน เพราะฉะนั้น คือ มันจะมีคนที่บอกว่า เฮ้ย ไม่ต้องดูโค้ดแล้ว ปล่อยมัน gen ไป อย่างเงี้ย ผมว่า มันจะเจอแบบนี้ ยิ่ง มันจะกลายเป็นว่า ยิ่ง โค้ดยิ่งแย่ กลายเป็น AI มันจะยิ่งแย่กับ codebase เราด้วย ใช่

ตั้ง Routine ใน Claude Code ให้รัน Linter เก็บกวาดโค้ดอัตโนมัติ44:00

ผมว่า อันนี้จริง หมายถึงแบบ มัน มันต้องมี ผมแนะนำว่า เราจะต้องมี เหมือนเป็น schedule ที่รัน codebase improvement ตลอดเวลา ไว้ ไว้ด้วย ใช่ครับ ซึ่ง Claude Code ตอนเนี้ย ทำ routine ได้ ครับ ก็ มีใครใช้กันบ้าง Claude Code routine อันนี้ผมสามารถกำหนด routine ไว้ได้ว่าแบบ ทุกๆ วัน ให้ โอเค install dependency รัน linter ถ้ามี warning อะไรก็ช่วยแก้ให้ด้วย แล้วก็ถ้าไม่มีอะไรก็งานเสร็จแล้ว แต่ถ้าคุณแก้อะไรก็เปิด PR มาหน่อยนะ ได้ PR หน้าตาแบบนี้ แก้ ฉะนั้นบางทีเวลาเรา vibe เราอาจจะเผลอใส่ warning เข้าไป โดยไม่รู้ตัว ผมก็เลยแบบเหมือน เหมือน เรียกว่าอะไรอ่ะ มี routine อันหนึ่ง เหมือนเป็น พนักงานเก็บกวาด ครับ ครับ อ่า โอเค ใช่ อันนี้ผมเห็นด้วยเลย คือถ้าเป็น codebase ที่เป็น production ก็แนะนำว่าควรจะต้องมี clean up อะไรพวกเนี้ย แปะไว้ เป็น routine

แล้วก็ หรือว่าเป็น ถ้า manage หลายๆ project ก็ ยังไงก็จะต้องมีอยู่แล้ว อื้อ ครับ โอเค เอ่อ

นี่ครับ เพราะตอนนี้มันออกนอกสคริปต์ไป

หาไม่เจอ แต่ว่าได้เห็นอะไรเยอะมากเลยครับแล้วก็ ผม สาเหตุที่อยากมาคุยกับพี่ไทเพราะอย่างนี้แหละ เพราะตอนแรกผมใช้เองผมก็รู้สึกว่ามันใช่ป่าวๆ อะไรอย่างนี้ แต่พอมาได้เห็น เออ เจอเหมือนกันนี่หว่าอะไรอย่างนี้ ก็รู้สึกว่าอ๋อ โอเค คนอื่นก็เป็นแบบนี้เหมือนกัน ในนี้ใครใช้ Claude Code บ้างครับ ขอโยกมือหน่อยครับ

ลดการใช้ IDE หันไปใช้ Terminal และรีวิวโค้ดผ่าน PR แทน46:02

ตอนนี้ใครใช้ IDE อยู่บ้างครับ เหลือเหลือกี่เปอร์เซ็นต์ละ IDE อะไรนะครับ Cursor นับครับ แบบ มีใครแบบต้อง VS Code อย่างนี้ ใช่ๆ VS Code หรือแบบใครไม่ได้ใช้ IDE แล้วแบบสัปดาห์นี้ ไม่ได้เปิดเลย VS Code คำว่าไม่ได้ใช้ IDE หมายถึงว่าพี่ไทอาจจะหมายถึงว่า ใช้แค่ terminal อย่างเดียว อะสมมติ ใช่ไหม terminal กับ prompt อะไรอย่างนี้ คือไม่ดูโค้ดเลยเอาอย่างนี้ ประมาณนั้นไหมครับ ไม่ดูโค้ดเลย อันนี้แค่ซาวด์เสียงเฉยๆ ดูโค้ดครับ ดูโค้ด คือ รีวิวโค้ด รีวิวโค้ด ใช่ๆ เพราะบางทีผมก็แบบ ก็แบบสั่ง Claude ในโทรศัพท์ เสร็จแล้วแบบ ไม่ได้ไม่ได้ดูโค้ดใน IDE อะ บอกว่าเสร็จแล้วเปิด PR มา โอเคก็รีวิวในนั้น โอเค โอเค

มี ของผมมีบ้าง มีบ้าง มีบ้างที่แบบ ถ้าอะไรที่ผมรู้อยู่แล้วว่า ไอ้นี่ Claude มันทำเสร็จ ทำได้แน่นอน ถ้าเป็น bug fix ที่ไม่ได้ยากมาก หรือว่าเป็น feature ที่กลางๆ อะไรอย่างนี้ครับ คือผมจะมี skill แบบ one shot ของผม ที่แบบ ก็คืออ่าน GitHub อะไรพวกนี้ อ่านรูปใน GitHub แล้วก็ ก็คือเขียนโค้ดเลย แล้วก็จะมี step ที่ให้มัน verify ตัวมันเองได้ อย่างเช่นการทำเป็นเหมือนกับ user testing อะไรอย่างนี้ครับ แล้วก็รัน test make sure ว่ามันมี test ผ่านนู่นนี่ อะไรพวกนี้ คือจะอยู่ใน one shot แล้วก็ รู้สึกว่าอันนี้เวิร์ก คือแบบชีวิตง่ายขึ้นเยอะมาก แล้วก็

เท่าที่รีวิวที่มันเปิดมา ส่วนใหญ่มันจะไม่ได้แก้อะไรเยอะมากหรอก แต่ว่ามันจะมี test มาให้เราอ่าน แล้วก็ เรา set up CI ไว้ระดับหนึ่งที่ดี มีพวกแบบ regression testing พวกนี้ ที่เออทุกอย่างมันเขียวหมด ก็โอเคก็ merge เลย โอเค ประมาณนั้น ผมว่าประมาณนี้โอเค

เออ พูดถึงอันนี้ ผมนึกถึงอันนี้ครับ

สร้าง CLI Tool เฉพาะทาง (Feed Forward) ให้ AI ใช้แก้ปัญหาแทนการแก้ไฟล์ตรงๆ48:07

บทความนี้ เพิ่งเห็นมาเมื่อวันสองวัน แต่ว่าเป็นไอเดียที่ดีมาก อันนี้ของ Martin Fowler ครับ Harnessing Engineering for Coding Agent Users คือเขาบอกว่า ถ้าเรา harness เราไม่ดีเนี่ย เราก็จะสร้าง technical debt ไปเรื่อยๆ ใช่ไหม คราวนี้ มีเครื่องมืออะไรที่เราทำได้บ้าง เขาให้มาเท่านี้ครับ แบ่งเป็น 2 ส่วนใหญ่ๆ คือ feed forward กับ feedback feed forward คือ เป็นสิ่งที่เราบอก แล้วทำให้มันสร้างสิ่งที่ถูกต้องมาตั้งแต่แรก เช่นแบบพวกไฟล์ CLAUDE.md เนาะ principle อะไรต่างๆ language server อะไรพวกนี้ก็ พวก CLI script ต่างๆ ก็เป็น feed forward เหมือนกัน อย่างเช่น อย่างที่ Eventpop ละกัน เรามีไฟล์ localization ใช่ไหม เป็นไฟล์ YAML ที่บอกว่า ข้อความนี้ภาษาไทยเป็นแบบนี้ ภาษาอังกฤษเป็นแบบนี้ มันจะเป็นไฟล์ยาวประมาณ 3-4 พันบรรทัด

คราวนี้ เวลา Claude มาแก้ ผมรู้สึกว่ามัน struggle กับการแก้ไฟล์นี้เยอะมากเลย ก็เลยบอกว่า ยูทำ CLI ไว้ใช้เองซิ

ถ้าอยากจะเพิ่มคีย์นี้ ก็ให้เรียก CLI ตัวนี้ ถ้าอยากจะ query หาคำทุกคำ หาคีย์ทุกคีย์ที่มันมีข้อความนี้อยู่ ก็มีคำสั่ง search ผมก็จะสั่งให้มันสร้าง CLI ใช้เอง ก็เหมือนทำ skill คล้ายๆ กันครับ ดังนั้น feed forward เนี่ย เป็นสิ่งที่ทำให้มัน ทำงานได้ถูกต้องตั้งแต่แรก ส่วน feedback คือ ถ้ามันหลงทาง ก็วิ่งกลับได้

เขาก็บอกว่า เนี่ยแหละ มันสำคัญมาก ถ้าเรามีแค่อย่างเดียว มันไม่พอ "You either get an agent that keeps repeating the same mistake," ก็คือ มีแค่ feedback อย่างเดียว หรือ "an agent that encodes rules but never finds out whether they work." ก็คือ ถ้ามีแค่ feed forward เลยชอบภาพนี้มาก

เพราะว่ามันบอกว่า ถ้าเราอยากให้ agent เราทำงานดีขึ้น เราเพิ่มอะไรได้บ้าง อันที่พี่ไทพูดเมื่อกี้ ผมนึกออกเลย เพราะว่า อันนี้จะแนะนำว่า ถ้าเรามี task อะไรบางอย่าง ที่เรารู้อยู่แล้วว่า อนาคตมันจะต้องทำซ้ำๆ อย่างเช่น การรัน

browser testing ยกตัวอย่างนะ สมมติว่าเรามี user journey อยู่ใช่ไหม เราต้องทำ QA เราต้องทำ user journey แล้วก็ ต้อง test flow นั้นค่อนข้างบ่อย

เท่าที่ผมลอง ไม่ควรที่จะบอกให้ AI test ไปเลย

เพราะว่า AI มันจะค่อนข้าง blank จัดๆ อย่างเช่น agent browser หรือ Playwright CLI อะไรเงี้ย คือมันจะนั่ง หนึ่ง ช้ามาก สอง เดี๋ยวถูก เดี๋ยวผิด

เขียนเทส E2E ด้วย AI: สอน AI ควบคุมเบราว์เซอร์ทีละสเต็ปก่อน50:51

สิ่งที่ดีกว่าแบบที่พี่ไทบอกเมื่อกี้คือ เราอาจจะไปสร้าง CLI ให้มัน หรือ บอกมันว่า เฮ้ย ฉันจะ test user journey นี้ เขียน Playwright test ให้หน่อย

แล้วค่อยให้มันรัน Playwright test อีกทีหนึ่ง แบบเนี้ย เราจะได้ผลลัพธ์ที่เร็วกว่า

แล้วก็ consistent กว่า

พี่ไทเคยเจอเคสแบบนี้ไหม เคยครับ จริงๆ ผม pain กับการเขียน Playwright test ค่อนข้างมาก เพราะอย่างที่บอกว่า Claude training data เรื่อง Playwright คุณภาพมันยังไม่ค่อยได้ สิ่งที่ผมมักจะทำคือ ผมจะจับมือมันทำ

บอกว่า โอเค you launch agent browser มาก่อน แล้วก็ไปด้วยกันนะ คลิกอันนี้ คลิกอันนี้ คลิกอันนี้ ให้มันรู้ว่า ปุ่มอะไรอยู่ที่ไหน ต้องใช้ selector อะไรบ้าง พอ พอมัน automate flow ทั้ง flow หนึ่งรอบ ผมบอก โอเค เขียน test ได้เลย ก็คือสุดท้ายก็คือให้เขียนออกมาเป็น test ใช่ครับ เป็น Playwright test ใช่ไหม เป็น Playwright test ก็คือ อ๋อ โอเค

แล้วก็ ครับผม หาแป๊บหนึ่ง project ไหนนะ

ขอหาแป๊บหนึ่งครับ ระหว่างนี้มีใครมีคำถามอะไรไหมครับ

Q&A: วิธีหาสาเหตุเวลารู้สึกว่า AI ทำผิดพลาดหรือไม่ทำตามคำสั่ง52:15

สวัสดีครับ สวัสดีครับ มีคำถามคือหลังจากที่ใช้ Cursor มานานๆ หรือว่า AI coding agent ตัวอื่น เริ่มมี skill เยอะในหลายที่ เช่น ใน .claude

ของ root ใน project level แล้วก็ใน user scope เราจะมีวิธีการแบบ ถ้าสมมติว่า วันหนึ่งเราตื่นขึ้นมาแล้ว Claude มันไม่ทำงานเหมือนกับที่เรา มันไม่ได้ผลเหมือนเมื่อก่อน อะไรอย่างนี้ เรามี มีวิธีการยังไงที่แบบว่า troubleshoot ว่า มันผิดพลาดตรงไหน skill อะไรเข้ามา to MCP ตัวไหนหรือเปล่า ที่มีปัญหา อะไรอย่างนี้ไหมครับ ถ้ามันทำงานไม่ได้ตามต้องการ ใช่ไหมครับ ส่วนมากผมจะถาม ส่วนมากถ้าผม ก่อนอื่นเราจะต้องเอ๊ะได้ก่อน ว่ามันออกนอกลู่นอกทางตรงไหน แล้วเราก็ถามว่า เฮ้ย ทำไมยูทำแบบนั้นล่ะ ข้อความ prompt เราตรงไหนมันไม่เคลียร์ ครับ แล้วผมก็แบบเหมือนจับมือมันทำ

เหมือนเดิม ว่าแบบ โอเค วิธีที่ถูกต้องเป็นแบบนี้ เราจะต้องแก้ instruction ยังไง ให้รอบถัดไปคุณทำถูก อะไรอย่างนี้ครับ

อันนี้ผมก็เข้าใจจากใจเหมือนกัน เพราะผมก็ มันจะมี 2 จุด จุดแรกคือเรื่อง เรื่องไฟล์ที่เราเอาไปใส่ครับ

อย่างเช่นเรามี ถ้าเราอยู่ใน เรามี user เราใช่ไหมครับ แล้วเราก็เอา skill ไปใส่ใน .claude ใช่ไหม ปัญหาของผมก็คือ เอ๊ะ ถ้าเอาไปใส่ตรงนั้น อ้าว แล้วถ้าเกิดฉันรันบน cloud มันก็ไม่มี skill พวกนั้นดิ อันนี้ก็เป็นปัญหาหนึ่ง ซึ่งผมก็แนะนำว่า ก็ลองเขียน project

ของผมมันจะมี project เล็กๆ ที่ ทำหน้าที่ distribute skill ไปใน project ย่อยๆ ต่างๆ ของมันเอง ซึ่งอันนั้นนะ เท่าที่ผมลองนะ โอเค หมายถึงว่า ตอนนี้ผมเซฟอย่างหนึ่งคือ ผมจะรันบน local จะรันบน cloud อะไรอย่างนี้ อย่างน้อยคือมันมี set skill ที่มันเหมือนกัน แต่มีอีกจุดหนึ่งก็คือ

วิธีป้องกัน AI ข้ามคำสั่ง ด้วยการสั่งให้สร้าง To-do list54:19

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

อย่างเช่น ถ้าต้องการ invoke สกิลหลายๆ สกิล พร้อมกันเป็น chain อะไรอย่างเงี้ย บาง... ยังไม่ค่อย success มันจะ บางทีมัน skip เออ อะไรพวกนี้ก็ มีบ้าง แต่ว่าหาวิธีแก้ไม่เจอเหมือนกัน โอ้

ครับ ที่ อันนี้ อันนี้ที่ผมเจอนะ แต่ไม่รู้ว่าอย่างของพี่ไทมีไหม แบบว่า เหมือนอยากจะให้มันรัน workflow ไปเลย แล้วใน workflow มี อยากให้มันรันสกิลนู่นนี่นั่นอีก อะไรอย่างเงี้ย เออ ยาก ผมจะใช้ keyword นึงว่า "make a to-do list to track your task and do it to completion" อืม เพราะงั้นผมก็บอกว่า โอเค ผมต้องการ 1 2 3 4 5 อยากจะให้คุณทำ 1 2 3 4 5 ยัดใส่ to-do ของตัวเองไว้เลย แล้วทำจนมันเสร็จหมด

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

ช่วย ช่วยได้ครับ ช่วยได้ เอ่อ บาง บางจุดผมว่า to-do อ่ะ work เอิ่ม สาเหตุที่มัน work เพราะว่าเหมือนเดิมเลยครับ ถ้าทุกคนกลับไปดู CC changelog ที่ผม เคยบอกไป ในนั้นมันจะมีเครื่องมืออันนึง ที่เขียนว่า to-do write แปลว่าถ้าเราพิมพ์ to-do ให้ Claude อ่ะ มันจะ ส่วนใหญ่ มันจะ invoke เครื่องมือ to-do write แล้วก็เขียนเป็น checkbox ให้เราเสมอ อันนี้คือข้อดีของการที่เราเข้าไปอ่าน changelog ของมัน เออ ช่วย ช่วยได้เยอะเหมือนกัน เอิ่ม

ถ้า AI เขียนเทสอ่านยาก ให้พิมพ์รูปแบบโค้ดที่ต้องการแล้วบังคับเขียนตาม56:17

โอเค อันนี้ตัวอย่างเทสละกัน

อันเนี้ย ผม เวลาผมขอให้ Claude เขียนเทสให้

ส่วนมากมันเขียนเทสแบบนี้ครับ ซึ่งเทสมันถูกนะ แต่ผมรู้สึกว่ามันอ่านยากมากเลย อันนี้คือเป็น static site generator ตัวนึงละกันครับ ที่จะเอาแบบ project TypeScript เข้าไป แล้ว generate เป็นแบบ API documentation ให้ เอ่อ หน้าตาเว็บ

จะประมาณนี้

มันจะได้หน้าตาเว็บประมาณนี้ ก็คือด้านซ้ายก็จะมี class มีอะไรต่างๆ แล้วก็จะมีพวก แต่ละอันมันก็จะโชว์ว่า แบบมี method อะไรบ้าง มีอะไรแบบนี้ครับ มี constructor มีอะไรพวกนี้ ซึ่งอันนี้ผมอยากจะทำแล้วให้มัน maintain ได้ใช่ไหมครับ ผมก็เลยแบบ "โอเค ยูเขียน test ให้ด้วย" แล้วนี่คือ test ที่มันให้มาคือแบบ โอเค ก็หา file page ทั้งหมด แล้วก็ find เฉพาะอันที่ URL ตรง แล้วก็ดูว่ามี section อะไร แล้วก็แบบ search มีการแบบ see if extract section block คือแบบ นี่มัน code test จริงๆ เหรอ อะไรแบบนี้ ซึ่งผมก็บอกว่า เฮ้ย code test ยูไม่สวยเลย

ขอ test หน้าตาแบบนี้ได้ไหม อันนี้คือผมเขียนแบบนี้ ผมบอกว่า เฮ้ย test ที่คุณเขียนมาไม่สวยเลย ผมอยากได้ test หน้าตาแบบนี้ คือแบบ ผมก็ต้องพยายามอ่านน่ะ ว่ามันพยายามสื่ออะไร แล้วก็กลั่นให้กลายเป็น syntax JavaScript ที่สื่อความหมายได้ตรงมากขึ้น ผมก็บอกว่า เออ ขอ test หน้าตาแบบนี้ได้ไหม Claude มันก็แบบ "อุ๊ย อ๋อ" "ยูอยากได้ method tester ที่ดูแลทุกอย่างให้" "แล้วเราเขียน test แบบ high level ได้ เดี๋ยวทำมาให้" ซึ่งหลังจากนั้นก็ หลังจากนั้นมา test มันก็จะสวยขึ้นครับ แต่ว่าเราต้องเริ่มจากการเอ๊ะ และไม่พอใจกับ test หน้าตานี้ก่อน โอเค อะ

อันนี้น่าจะต้องประสบการณ์แหละ ไอ้เอ๊ะเนี่ย โอเค แต่ว่าดีเลยครับ ก็เป็นเป็นตัวอย่างอันนึงที่ดี มีคำถามอะไรเพิ่มเติมอีกไหมครับ ครับ

CLAUDE.md

ข้อควรระวังในการใช้ไฟล์ CLAUDE.md: อย่าให้ยาวเกินไปและคอยดูแลรักษาให้ดี58:37

ครับ

อ๋อ อันนี้

เรื่อง CLAUDE.md ผมพูดอะไรได้ไม่ค่อยเยอะละกัน เพราะว่าอะไร เพราะว่าเค้าเถียงกันไม่หยุดอะ บางคนเค้าก็บอกว่า โอเค สร้าง CLAUDE.md ใส่ rule ใช่ไหม แต่เมื่อก่อนผมก็ลองแบบนั้น ก็ที่ Eventpop นี่แหละ เพราะ project มันใหญ่มาก มันก็เลยสอน Claude ว่า เฮ้ย เวลา u ทำอะไร แล้ว u เผลอทำผิด เวลา I break นั่นคือโอกาสเรียนรู้ของคุณ คุณต้องเขียนใส่ CLAUDE.md ผมทำแบบนั้นไปเรื่อยๆ สักพักนึง จน Claude มันเริ่มด่า เฮ้ย ไฟล์ CLAUDE.md คุณ 50,000 ตัวอักษรแล้วนะ

ทำสั้นๆ หน่อยไหม อะไรแบบนี้ ตอนนี้ก็ต้อง refactor อันนี้เป็นยุคที่ผมให้ Claude เขียนเรียนรู้ด้วยตัวเอง

ต่อมาก็จะมีวิดีโอนึงที่คุณ Theo บอกว่า เฮ้ย ลบ CLAUDE.md ทิ้งไปเลย เคยเห็นใช่ไหม เค้าบอกว่ายิ่ง CLAUDE.md มันยาว โมเดลยิ่งสับสน เพราะ context มัน rot

เค้าก็บอกว่า ว่างๆ ก็ลองเอา CLAUDE.md ออก

แล้วลองเทียบดูว่า agent มันยัง work อยู่รึเปล่า เพราะปัญหาคือ ยิ่ง agent มันเก่งขึ้นเรื่อยๆ ความจำเป็นของ CLAUDE.md มันน้อยลง ครับ แต่วิธีนึงที่ผมรู้สึกว่า work ก็คือ ผมพยายาม fix format ของ CLAUDE.md ไว้ว่า ให้เพิ่มทีละ bullet point และ bullet point ขอจบในบรรทัดเดียวพอ ครับ แล้วทีนี้ถ้าจะเอาของจากอีก project นึงมา ผมคิดว่าลากไฟล์ CLAUDE.md ของอีก project นึงมาใส่ แล้วบอกว่าช่วยเอาของที่เป็น proprietary ออกได้ไหม อาจจะช่วย เพราะผมก็ใช้เทคนิคนี้เหมือนกัน ก็คือไปเรียนรู้ pattern จาก project นั้น

แต่เอามาเขียนเป็น CLAUDE.md สำหรับ project นี้ แล้วทำให้มัน generic

แล้วบางทีผมก็/grill-me ซ้ำด้วยนะ เพราะบางทีผมบอกแบบนี้ มันไม่รู้ว่าส่วนไหนจะเอา ส่วนไหนจะไม่เอา ก็กริลเพิ่ม ครับ เข้าใจ ผมว่าก็ยากจริง หมายถึงว่าเราไม่รู้ว่าเราลบอันนี้แล้ว มันจะ effect อะไรยังไง เพราะฉะนั้นก็เข้าใจ ยากจริง

อันนี้ personal สุดๆ เลย ผมว่า โอเค

อยากให้ AI เขียนโค้ดสไตล์เรา ต้องสกัดแพทเทิร์นแย่ๆ ออกจากโปรเจกต์ให้หมด1:01:24

พอดีเมื่อกี้เห็นที่เปิดโค้ดให้ดูแล้วแบบ มันเริ่ม gen โค้ดที่มันแบบซ้ำๆ ซ้ำๆ ซ้ำๆ กันหลายรอบแล้ว ครับ ไอ้ตอนเจอปัญหาเนี้ยครับ แบบแก้ยังไงล่ะครับ แล้วก็มีวิธี prevent ไม่ให้มันเกิดขึ้นอีกรอบยังไง อาจจะเล่า context ผมนิดนึงคือ เวลาเราเข้าไปใน codebase ที่เราไม่เคยแตะนะ มันจะมี pattern ที่เรารู้สึกว่า เออ มันไม่ถูกต้องแล้ว และเรารู้สึกว่าเออ ถ้าเราเขียนเอง เราจะไม่เขียนแบบนี้ คำถามผมคือ เราจะสั่ง Claude Code ยังไงล่ะครับให้มันแบบ ได้ลายมือคล้ายๆ ตัวเราที่สุด หรือสิ่งที่เราคิดว่าเออ แบบนี้มันน่าจะถูก สิ่งที่จะช่วยเยอะที่สุดคือ

ให้ codebase เรามีลายมือที่เราอยากได้เยอะอยู่แล้ว เพราะว่า เมื่อก่อนเนี้ย มันจะมี เคยได้ยินคำว่า transitional architecture ใช่ไหม ถ้าสาย Thoughtworks น่าจะ น่าจะได้ยินว่าแบบ อ้อ เรามี codebase แบบนึง แล้วเราค่อยๆ migrate ไปอีกแบบ ปัญหาคือ พอโมเดลมันเห็น 2 แบบ มันไม่ได้รู้ว่าเรากำลัง migrate อยู่ มันก็เลยเลือกแบบใดแบบหนึ่งมา ฉะนั้นเขาบอกว่า เมื่อก่อนเนี้ย transitional architecture มันเป็นสิ่งที่แบบ standard เค้าทำกัน แค่ต้องสื่อสารให้ทุกคนเข้าใจอะไรอย่างงี้ แต่ปัจจุบันคือ AI มันแค่ลอก pattern เรา

ฉะนั้นเราแค่ต้องทำให้ codebase ของเรา ซึ่งเป็น pattern ที่มันลอก มันอยู่ในสภาพที่ดี ครับ

ถามว่า prevent ยังไง ผมก็ คำตอบที่ดีที่สุดของผมก็คือ พยายามทำให้โค้ดมันดี ตรงนั้น แล้วก็ "เอ๊ะ" เยอะๆ ถ้าเห็น pattern ตรงไหนที่มันไม่ดี เราแก้ตรงนี้ แล้วถามว่า มีจุดไหนอีกไหมที่มันยังเป็น pattern ที่เราไม่ชอบอยู่ แล้วก็แก้ให้หมดเลย ครับ พอโค้ดเราเหลือแต่ pattern ที่เราชอบ มันก็จะ dup pattern นั้นไปใช้เรื่อยๆ

อันนี้ผมจะมีอีกมุมนึงเหมือนกัน มุมของ reviewer สมมติว่าเราเป็นคนเปิด PR มาใช่ไหม แล้วเป็นมุมของ reviewer

ต้องเข้าใจว่าในสถานการณ์จริง มันไม่ใช่ตลอดเวลาที่เราจะต้อง improve โค้ด มันจะมีมุมนี้ด้วยที่ ถ้าผมเป็น reviewer แล้วแบบ เดี๋ยวนะ title มึงบอกว่า แก้บั๊กนิดๆ หน่อยๆ แต่ทำไม change เป็นพันเลยวะ อย่างเงี้ย ถ้าผมเป็น reviewer คือ ไป เปลี่ยน ไปรีวิวอย่างอื่น มันจะมีตรงนี้เหมือนกันที่อาจจะต้องแบบ มันไม่ใช่แค่เรื่องของการโค้ด มันเป็นเรื่องของการสื่อสารด้วย ที่อันนี้ผมก็

มีใครเคยดู Prime อะไรนะ ชื่ออะไรนะ Primeagen Primeagen เหรอครับ เออนั่นแหละ เค้ามีพูดถึงเรื่องนี้ทีนึงเหมือนกันว่าแบบ เกี่ยวกับโค้ดใน Netflix ที่แบบ เปิดมาแล้วก็แบบ ใครมันจะมารีวิวอะไรอย่างเงี้ย ก็เป็นเรื่อง ผมว่าเป็นเรื่อง global เลย ไม่ใช่แค่แบบบางทีม แต่ว่า ก็ต้องสื่อสารด้วย

คือบางทีมันอาจจะแบบ เฮ้ย งั้น split PR PR นี้กู fix ก่อน fix บั๊ก ใส่ test เข้าไปตาม pattern เดิม ไม่สวยมาก ยอมไปก่อน ใช่ไหม แล้วอาจจะต้องแบบ ของผมมันจะเป็นเปิดไอ้ อะไรวะ เหมือนเปิด proposal ขึ้นมา เพราะว่าของผม codebase มันค่อนข้างจะ ใหญ่แล้วคนมันก็เยอะอะไรอย่างเงี้ย เราต้องเปิดว่าจะ improve ตรงนี้

นู่นนี่นั่น แต่สุดท้ายก็ไม่เคยสำเร็จ เพราะว่าสุดท้ายมันจะไปติดที่แบบ เดี๋ยวมึงจะ improve ทำไมวะ performance มันขึ้นมานิดเดียวอะไรประมาณเนี้ย แต่ว่าก็ เป็นสิ่งที่ human มนุษย์มันจะต้องเจอเนาะ ถ้าเป็น agent มันคงทำไปแล้ว อันนึงที่ผมรู้สึกว่าช่วยได้พอสมควรด้วยก็คือ grill-with-docs

ใช้ ADR (Architecture Decision Record) บันทึกประวัติการตัดสินใจให้ AI ทำความเข้าใจ1:05:11

คือ แนะนำให้ลองไปอ่าน prompt ของมันดูเพราะว่า prompt มันไม่ได้ยาวมาก แต่หลักๆ grill-with-docs เนี่ย สิ่งที่มันทำคือ มัน /grill-me แต่ว่าเวลามัน /grill-me ไปอ่ะ มันจะเขียนไฟล์ context เพิ่มเข้าไปด้วย เช่น มันจะบอกว่า คือตัว grill-with-docs เนี่ย มันจะพยายามอ่าน context แล้วมันจะพยายามสร้าง glossary แล้วถ้าเราใช้คำไหนที่ไม่ตรงกับ glossary มันจะมาติงเราเลย เฮ้ย คุณใช้คำไม่ตรง glossary นะ คุณหมายถึงอันนี้หรือเปล่า เพื่อให้เราเข้าใจตรงกัน คือแบบมันจะเป็น /grill-me ขั้นเลเวลกว่า แล้วถ้าเราบอกว่า อ้อ ใช่ๆๆ แล้วเราอธิบายเพิ่มเติม อุ้ย คุณเพิ่งอธิบายเพิ่มเติมแต่อันนี้มันยังไม่ได้ record ไว้ใน context ของ project มันแก้เลย อะไรประมาณเนี้ยฮะ ซึ่ง แล้วพอเรา grill เสร็จ มันบอก โอ้ ที่เรา grill มานี่มันดูแบบ เป็นอะไรที่อาจจะ long term นะ เขียน ADR มั้ย รู้จักมั้ย ADR Architecture Decision Record

ก็เขียน ADR มันจะบอกเลยว่า โอเค นี่คือ

pattern โค้ดที่ นี่คือ architecture decision ที่เรากำลัง make อย่างเช่น เดี๋ยวหาก่อน ขอหาแป๊บนึงนะฮะ

อย่างเช่น Architecture Decision Record เนี่ย มันจะเป็นเอกสารแบบ แบบนี้

ขอหาแป๊บนึง

เนี่ย ยิ่งเราทำโปรเจกต์ไปเรื่อยๆ เนี่ย เราจะ make decision ที่เกี่ยวกับ architecture เยอะขึ้นเรื่อยๆ ซึ่ง ADR เนี่ย มันก็จะ record decision ไว้ ที่เราบอกว่ามันเป็น record เพราะว่า มันทำความเข้าใจตรงกันว่า ข้อมูลนี้อาจจะไม่ up to date แค่มันแค่ record ไว้ว่า ณ วันนี้ เราตัดสินใจเกี่ยวกับ architecture เรื่องนี้ เช่น waveform preview อะไรแบบเนี้ย มันก็จะบอกเลยว่านี่ ทำไมเราถึงต้องมา make decision และ decision ที่เรา make มีอะไรบ้าง มี alternative ไหนที่เราเคย consider ไปแล้วบ้าง แล้วไม่เอา ไม่เอาเพราะอะไร อะไรแบบเนี้ยฮะ มันก็จะ record พวกนี้ไว้ให้ มันอาจจะยาวหน่อยแต่ก็คิดว่า เวลา implement ผมจะบอกว่า เออ ไปดู ADR ซะ

อันนี้ก็ช่วยลด ช่วยลด ความหลอนของมันได้

ครับ โอเค ครับ

อันนี้ผมก็เห็นด้วย มันเคยมีเคสที่แบบ คือถ้ามันมีอันนี้ อย่างน้อยถ้าในอนาคตเรา implement อะไรสักอย่างนึงแล้วเรารู้สึกว่า ทำไม AI มันถึง suggest อย่างนี้มา มันจะหา log เจอว่าแบบ ตอนนั้นเราเคย discuss อะไรประมาณนี้ไว้ ครับ อันนี้ก็ มี ผมก็คิดว่า แต่ว่า โอเค มันก็อาจจะมี trade-off ด้วย เรื่องของการ maintain แต่ว่า โดย

ถ้าฟังแล้วก็คือเหมือนเป็น record ของ history ก็โอเค ไม่ต้อง ADR ไม่ได้เอาไว้ maintain แล้วกัน ถ้าของที่ต้อง maintain ก็จะเป็นพวก CLAUDE.md พวกอะไรต่างๆ ตอนนี้ผมก็มีปัญหาเรื่องการ maintain skill, maintain documentation เหมือนกัน ก็ยังหา ยังหาท่าที่ลงตัวไม่ได้ แล้วจริงๆ ผมชอบของ ADR เพราะว่า มันอยู่บน Tech Radar มาตั้งแต่ปี 2016 แล้ว มันอยู่มา 11 ปีแล้วฮะ แปลว่า เราคุยกับ Claude เราบอกว่า สร้าง ADR ให้หน่อย 3 ตัวอักษรเนี้ย มันรู้เลย ADR คืออะไร หน้าตา format เป็นยังไง เพราะว่ามันเป็น practice ที่ practice ที่ Thoughtworks บอกให้ adopt ไปประมาณ 9 ปีแล้ว โอเค ครับ แค่รู้สึกว่าพอมาช่วง vibe code

พวก software engineering knowledge ยุคนั้นมันแบบ เหมือนหายไป แล้วเพิ่งมา rediscover กันช่วงนี้ อืม โอเค มีคำถาม อีกมั้ยครับ ถ้ามีก็ 1 คำถาม

อย่าเพิ่งเชื่อโค้ดที่ AI แก้ได้ แต่ให้ถาม 'Why' และเรียนรู้รากของปัญหาไปพร้อมกับมัน1:09:12

ครับ เข้าใจว่า... ครับ ดูครับ ดูเยอะด้วย

low level มากขึ้น

ผมคิดว่า ผมคิดว่า สุดท้ายอ่ะ มนุษย์ยังเป็นคนที่ต้องรับผิดชอบ สิ่งที่เราสร้าง ไม่ว่าจะให้ AI สร้าง ฉะนั้น ผมก็คิด ผมก็มองว่า อยู่ที่ เรียกว่าอะไรอ่ะ สำนึกของแต่ละคนละกัน ผมรู้สึกว่า ผมไม่กล้าละกัน ไม่กล้า push code ที่ผมไม่เข้าใจ

ผมมองว่า เรียกว่าอะไรอ่ะ AI อ่ะ เราใช้ ผมมองว่าใช้ได้ แต่ใช้แล้วเรา รู้เยอะกว่ามันมั้ย ถ้าตรงไหนผมไม่รู้ ผมจะถามมันเลย why อย่างแบบ

มีอยู่รอบนึง ผมเคยแบบ รับงาน WordPress มานิดนึง แล้ว WordPress plugin กับ theme ที่ผมทำอยู่ มันตีกัน แล้วผมไม่รู้ว่าแบบ มันเกิดอะไรขึ้น แล้วแบบ พอให้ AI มันช่วยแก้ ปรากฏว่า มันหลงทาง มันบอกว่า เฮ้ย อ๋อ ตรงนี้มันตีกันแบบนี้ ใส่ code นี้เข้าไป ปรากฏว่าไม่ได้ มันก็บอก อ๋อ ที่มันไม่ได้เพราะอย่างนี้ เอา code นี้ไปใส่ ไม่ได้ ผมลองแบบนี้อยู่ 4-5 รอบ ปรากฏว่า เออ มันชัดแล้วว่าเราไม่รู้ เขาก็ไม่รู้เหมือนกันว่ะ ผมก็เลยแบบ download git clone source code ของ WordPress แล้วก็ไป download plugin จาก hosting อ่ะ

แล้วก็ นี่ เอา source code ไปดู แล้วก็ลองไป figure out ลองขุด code ดูหน่อย ปรากฏว่า มันขุดมาเสร็จ มันบอกว่า เฮ้ย วิธีแก้ ง่ายนิดเดียว ใส่ 3 บรรทัดนี้ เอาไปใส่ปรากฏว่า เฮ้ย ที่มันตีกันมันหายวับเลยอ่ะ แบบที่มันตีกันมันหายเลย ผมก็แบบ amazing

ยูทำได้ยังไงอ่ะ คือแบบ หลายๆ คนมันจะ amazing แล้วก็จบ แก้ได้ จบ ไม่สนละ แต่แบบ เฮ้ย ยูทำได้ยังไงอ่ะ ช่วย brief หน่อย มันก็บอกเลย อ๋อ WordPress เนี่ย มันมี plugin system เวลามันทำ JavaScript module มันมี 2 โหมด โหมดเก่ากับโหมดใหม่ ส่วน plugin ตัวนี้ มันทำแบบนี้แบบนี้แบบนี้ แล้วมันก็แบบ สาธยายมาให้ดู จนเรารู้ว่าแบบ WordPress มันมี จุดลึกๆ ตรงเนี้ย ที่มันมาตีกับจุดลึกๆ ตรงนี้ของ plugin ก็คือเหมือนเรียน เรียนไปพร้อมมัน ใช่ครับ ก็เรียนรู้ไปพร้อมมัน ล่าสุดก็ ล่าสุดก็มีอีกปัญหานึง คือ

มี test อันนี้ของที่ Eventpop นะ มี test end-to-end อันนึง ที่รันในเครื่องผ่าน แต่รันบน CI มันพัง ผมก็บอกว่า เออ test ตรงเนี้ย บน CI มันพัง แต่บอกไปด้วยนะว่ามันพังท่าไหน ว่าแบบ นี่ พอกด back มาแล้ว กล่องตรงเนี้ย มัน enable แต่ไม่ได้เช็ก จริงๆ มันควรจะเช็ก ปรากฏว่า Claude หายไป 40 นาทีเลย แล้วก็กลับมา เฮ้ย เจอแล้ว มาจาก มาจาก BF cache คือ back-forward cache ของ browser ถ้ารัน Playwright ใน headed mode มันจะมี BF cache แต่ถ้ารันใน headless มันจะไม่มี วิธีแก้คือ ต้องใส่ header ตรงนี้เข้าไป ในไฟล์ HTML อะไรแบบนี้ รู้ได้ไงเนี่ย อะไรแบบนี้ แบบใครมันจะไปรู้วะ อะไรแบบนี้ แต่ว่า เออ ผมก็แบบ appreciate มาก ว่าแบบมันทำให้เราเรียนรู้อะไรได้เยอะ ผมเลยรู้สึกว่า ถ้าใช้ AI แล้วเราเรียนรู้ได้เยอะขึ้น ไม่น่ามีอะไรห่วง แต่ถ้าใช้ AI แล้วแบบ กลายเป็นว่าเรารู้น้อยลง อันนี้ แอบน่าห่วง

AI เพิ่มและลดหนี้ได้เก่งกว่ามนุษย์ ขึ้นอยู่กับเราว่าจะใช้มันแบบไหน1:12:47

อืม ครับ โอเค

ถูกต้องครับ ถ้า เพราะถ้าเราไม่เข้าใจมัน เราจะแก้ รู้สึกว่ามันจะยากมาก ที่เราจะแก้ให้มันตรงใจเราอ่ะ อีกเรื่องนึงก็คือ AI หลายๆ คนจะเห็นว่า ถ้าเราบอกให้มัน refactor มันก็ refactor ได้ใช่ไหม แต่ทำไม code มันแบบ slop มันเยอะขึ้น

ฉะนั้น AI เนี่ย มัน

มันจะเพิ่ม technical debt มันก็ทำได้ มันจะลด technical debt มันก็ทำได้ แถมทำเก่งกว่าเราด้วย เราแค่ต้องเลือกใช้มันมาลด technical debt เรื่อยๆ ครับ ซึ่งผมก็ไม่รู้ ว่าแบบทำไม AI มันไม่เลือกที่จะลด technical debt เอง เออ ผมว่าอันเนี้ยมันมันอยู่ที่ position ของคนที่จะไปอยู่แต่ละ role ด้วยครับ ยกตัวอย่างเช่น ถ้าคุณต้องเป็น คนที่ต้องเหมือนเป็น เป็น เรียกว่าอะไร สมมุติแอปเนี่ยคือหน้าตาของคุณ คุณจะ คุณกล้าปล่อยให้ AI มันไหล แล้ว merge เองหรือเปล่า

กับอีกคนนึงที่แบบเป็น junior เข้ามา ฉันต้องการทำให้เห็นว่า ฉันสามารถ merge code ได้เยอะขนาดไหน มัน มันคนละ เรียกว่าคนละ คนละมุม

เพราะฉะนั้น ผมเข้าใจมุมพี่ไท เพราะว่าผมก็มีบาง product ที่ต้องดูแลเหมือนกัน เพราะฉะนั้นก็ยังไม่กล้าที่จะแบบ อยากมั้ยอ่ะ อยากอยู่แล้วล่ะ แต่ไม่กล้า เพราะว่าถ้าเกิดว่าเราเร็วขึ้น 10 เท่า แล้วมันมีปัญหาเพิ่มขึ้นแบบ 2 เท่า ไม่เอา

ขอ ขอ stable ที่คงที่ดีกว่า อะไรประมาณนี้ มันมันอยู่ที่ role ที่เราไปอยู่ด้วย แต่ถ้าเป็น side project จัดเต็ม ครับ มี มีอีกเดโมนึง

ใช้ Claude Code คุยเรื่องการเงินส่วนตัว เพราะข้อมูลไม่ค้างบนระบบ Cloud1:14:46

ไม่แน่ใจว่าในนี้ใครใช้ Claude Code ในเรื่องที่ไม่เกี่ยวกับ code เยอะมั้ย ทำอะไรกันครับ เขียน แบบเขียน blog เขียนอะไรแบบนี้ อ๋อ ครับ ของผมเนี่ย บางทีผมใช้ Claude Code ปรึกษาชีวิต

ถามว่าทำไมไม่ไปใช้ Claude.ai เพราะบางเรื่องมัน sensitive แล้วเวลาเราใช้ Claude Cloud อ่ะ conversation เราอยู่บน cloud แต่ถ้าใช้ Claude Code conversation เราอยู่ในเครื่อง เรา purge ทิ้งได้ ตัวอย่างเช่น เรื่อง

เรื่องเกี่ยวกับเรื่องการบริหารเงินละกัน สมมุติว่า บางทีผมรู้สึกว่าเราจ่าย

Claude เดือนละ 700 ใช่ไหม ก็ถามว่าแบบ "เออ คุณช่วยสัมภาษณ์ผมหน่อย" ก็ /grill-me อ่ะ ว่าเรามีสินทรัพย์ มีอะไรตรงไหนบ้าง แล้วเราควรจะทำยังไง ให้มัน cover ค่า subscription Claude ได้ ผมจะได้ใช้ Claude ฟรี

มันก็ถามใหญ่เลย "นี่คุณมีบ้านไหม คุณมีนู่นไหม คุณมีนี่ไหม คุณลงทุนอะไรหรือยัง คุณมีประกันไหม คุณมีอะไรแบบนี้" ถามใหญ่เลย เสร็จแล้วมันก็แบบ "อ้อ นี่ คุณย้ายอันนี้ไปไว้ตรงนี้ แล้วดอกเบี้ยที่ได้ มันจะเยอะขึ้น ย้ายตรงนี้ไปไว้ตรงนี้ มันจะได้ลดหย่อนภาษี" อะไรแบบนี้ฮะ พอทำไปทำมา ก็โอเค ก็ cover ได้

อันนี้ก็เป็นท่านึงที่ใช้ Claude Code เป็น ใช้หาเงิน เหมือนได้รายได้เพิ่ม

ประมาณนั้น เรียกว่าอะไรอ่ะ เราทำเงินรั่วน้อยลงละกัน

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

สร้าง Agent ส่วนตัวบันทึกรายจ่ายจากใบเสร็จ โยนเข้า Grist อัตโนมัติ1:16:45

แล้วก็ตอนนี้ ผมใช้ Claude ทำ agent ส่วนตัวเหมือนกัน เมื่อก่อนแบบใช้ LINE bot ใช้ไรพวกนี้ใช่ไหม ตอนนี้ผมใช้ Claude Code on the cloud เพราะมัน push notification ได้ใช่ไหมครับ ด้วยครับ แล้วก็เราสามารถให้มันเขียน script ให้

ครับ เมื่อก่อนคือผมเริ่มมาอินเรื่องพวกนี้ ตั้งแต่ OpenClaw มันดังใช่ไหม ก็แบบ "เออ แต่ถ้าเราใช้ Claude ธรรมดาละ ทำได้ไหม" อันนี้เดี๋ยว demo ให้ดู อันนี้คือ

อันนี้คือเป็น เดี๋ยวนะ ขอหาก่อน personal

ถูกไหม โอเค อ่ะ อันนี้ครับ ก็คือผมมี

อันนี้มันเหมือนเป็น spreadsheet คิดซะว่า Google Sheet มันก็คือ Grist นี่แหละ ทีนี้ผมมีการ list ว่า ผม setup project นี้ไว้ แล้วก็ใส่ CLAUDE.md ว่า ถ้าผม เขียนใส่จำนวนเงิน ให้มัน save ใส่ไฟล์ JSON ไว้ แล้วถ้ากด confirm ให้มัน import เข้า Grist อย่างเช่น วันนี้ผม นั่ง Muvmi มา ผมก็ เดี๋ยวขอเช็กราคาก่อน

history Muvmi to MRT 53 บาท

ก็ผมก็พิมพ์ 53 Muvmi to MRT

มันก็จะ launch อันนี้ ซึ่งจริงๆ ผม deploy OpenClaw ก็ได้ แต่ว่าพอใช้ Claude Code on the cloud อ่ะ ผมไม่ต้องดูแล infrastructure เอง ก็จะสะดวกครับ ตัว OpenClaw มันต้องเป็น Anthropic API

ใช่ครับ แต่อันนี้คือพี่ใช้ subscription ใช่ครับ อันนี้มันก็จะบันทึกให้ว่า มันก็จะใส่ pending ไว้ว่า "นี่ วันนี้ใช้ไป 53 บาท" มันรู้ว่า Muvmi เป็น transportation อันนี้เราไม่ต้องสอนมันเลย มันก็แบบ "โอเค note ไว้ให้" อันนี้เดี๋ยวลอง test ดู ก็คือจริงๆ ผมทำในมือถือก็ได้ เดี๋ยวผมลอง camera ดู

Paypers หรือเปล่า อุ้ย ไม่ใช่ ฟีเจอร์ไม่ถึง ฟีเจอร์ไม่ถึง อันนี้ อันนี้แบบ simple simple แต่อันนี้ผมก็อัปโหลดใบเสร็จ ใบเสร็จ Mr.Shake ไป ครับ มันก็เนี่ย อ่านรูป

เป๊ะ ขนลุกเลย อยู่ไหนเนี่ย อ้อ Mr.Shake ที่เซ็นทรัลพระราม 9

70 บาท มี brown sugar jelly โอเค คอนเฟิร์มจ้า อ่ะ พอคอนเฟิร์ม เออ เดี๋ยวตรงนี้มันก็จะมาโผล่ ครับ

ตึ้ก เนี่ย อันนี้ก็จะเห็นว่า คำสั่งผมก็ บอกให้มันเขียน CLI ไว้ ส่งข้อมูลเข้า Grist ด้วยตัวเอง อะไรแบบนี้ครับ นี่ มาและ Muvmi to MRT แล้วก็ Mr.Shake milk tea วงเล็บให้ เพราะฉะนั้น ก็คือ Claude Code ผมรู้สึกว่าแบบ เออ ไม่ได้ใช้แค่ code อืม ครับ ครับ โอเค ครับ

อ่ะ โอเคครับ มีคำถามไหม ครับ ครับผม

ใช่ครับ ผมเปิด repo ที่จะเก็บพวก script CLI ต่างๆ แล้วก็เก็บ CLAUDE.md ที่บอกว่าถ้าผมพิมพ์แบบนี้ ให้ยูเรียกใช้ CLI นี้ อะไรอย่างนี้ครับ แล้วเวลาผมอยากจะเพิ่มฟีเจอร์ ผมก็ "เนี่ย ยูสร้าง ยูสร้างฟีเจอร์ให้หน่อย" มันก็แก้ไข code CLI

มันรู้สึกคล้ายๆ มี OpenClaw ส่วนตัว แต่ไม่ต้องดูแลเอง ครับ

Claude มี manage infrastructure ให้ครับ Claude Code on the cloud อะ มันจะ มันจะมี มันจะเหมือนมี VM ให้ ทุกครั้งที่เรา create session ใหม่ มันเหมือนจะเป็น VM ใหม่เลย ครับ

session นี้ คือพอ Claude มันทำงานเสร็จ เนี่ย มันจะ pause VM นั้นทิ้งไว้ ค้างไว้ แล้วพอเราคุยกับมัน มันก็จะเอา VM มา restore ฉะนั้นก็จะเห็นว่า ตอนที่ผมคุยครั้งแรก เนี่ย ผมต้องรอประมาณครึ่งนาที แต่พอผมคุยอัปโหลดอะไรต่อ หลังจากนั้น เร็วละ ครับ

แชตเดิม ใช่ไหม แชตเดิม อ้อ ใช่ครับ เป็นแชตเดิมครับ ผมก็ reuse แชตเดิมมาเรื่อยๆ อืม บางทีก็เยอะหน่อย ไม่ได้ ไม่ได้แบบ record ทุกแบบ ตลอดเวลา บางทีก็แบบมามาเก็บทีหลัง แต่แบบ ก็ค่อยๆ คุยว่าแบบ เออ workflow เราจะเป็นยังไง ครับ ผมเลยชอบตรงที่ว่า พอเรามี agent แบบนี้ อะ เวลามันทำอะไรขัดใจเรา เราก็บอก "เออ ต่อไปนี้ยูทำแบบนี้ได้ไหม" อ่า

ก็ ทางนั้นก็ประมาณนี้ค่ะ ขอบคุณพี่ไทมากๆ เลยค่ะ