CodingThailand's Blog

การดึงข้อมูลล่วงหน้า (Prefetching) ช่วยให้การนำทางระหว่างเส้นทาง (routes) ต่าง ๆ ภายในแอปพลิเคชันให้ความรู้สึกเหมือนเป็นแบบทันที . Next.js จะพยายามดึงข้อมูลล่วงหน้าอย่างชาญฉลาดโดยอัตโนมัติ โดยอิงจากลิงก์ที่ใช้ในโค้ดแอปพลิเคชันของเรา . การทำงานของ Prefetching คืออะไร? เมื่อมีการนำทางระหว่างเส้นทาง (routes) เบราว์เซอร์จะร้องขอ asset ที่จำเป็นสำหรับหน้า เช่น ไฟล์ HTML และ JavaScript การ prefetching คือกระบวนการร้องขอ resource เหล่านี้ล่วงหน้า ก่อน ที่จะมีการนำทางไปยัง route ใหม่ . Next.js จะแบ่งแอปพลิเคชันออกเป็น JavaScript chunks ขนาดเล็กตามเส้นทาง แทนที่จะโหลดโค้ดทั้งหมดตั้งแต่ต้นเหมือน SPA แบบเดิม ๆ จะโหลดเฉพาะโค้ดที่จำเป็นสำหรับ route ปัจจุบันเท่านั้น ซึ่งจะช่วยลดเวลาโหลดเริ่มต้น ในขณะที่ส่วนอื่นของแอปจะถูกโหลดแบบเบื้องหลัง เมื่อผู้ใช้คลิกลิงก์ resource สำหรับเส้นทางใหม่ก็ถูกโหลดไว้ในแคชของเบราว์เซอร์แล้ว . ดังนั้น เมื่อมีการนำทางไปยังหน้าใหม่…

ข้อคิด เพื่อการเป็น Developer ที่ดีขึ้น จาก “Lee Robinson” ผู้ช่วยให้ Next.js มีผู้ใช้ทั่วโลก 1.3 ล้านคน และช่วยให้ Vercel กลายเป็น Unicorn . 1. ความเร็วสำคัญกว่ากลยุทธ์ที่ดีที่สุด การลงมือส่งมอบงานอย่างรวดเร็ว (“Shipping fast”) ดีกว่าการมัวแต่หากลยุทธ์ที่สมบูรณ์แบบ ความเร็ว (Speed) คือจุดแข็งที่สร้างความได้เปรียบ . 2. สร้างนิสัยรักการส่งมอบงาน ต้องมี “bias toward shipping” คือเน้นการลงมือและนำของจริงออกมาใช้หรือให้คนใช้ ทีมขนาดเล็ก (Small teams) ส่งมอบงานได้เร็วกว่า ทีมที่ใช้ AI เต็มรูปแบบ (“AI-native”) จะขยับตัวเร็วกว่า 10 เท่าเมื่อเทียบกับทีมที่ไม่ปรับตัว . 3. การใช้งานจริงสำคัญกว่าการเปิดตัว Landings > Launches: การที่คนมาใช้งานจริงสำคัญกว่าการเปิดตัวโปรเจกต์เฉย ๆ ฟังลูกค้า สร้าง…

เปลี่ยนจากใช้ && แบบเดิมเป็น ?. (Optional Chaining) ดีกว่าไหม ทำให้โค้ดสะอาดและบำรุงรักษาง่ายกว่า . ปัญหาที่เจอบ่อย เวลาเข้าถึง property หลายชั้นใน Object ของ JavaScript มักเจอ TypeError: Cannot read property ‘x’ of undefined เราต้องเขียนโค้ดป้องกันซ้ำ ๆ เช่น if (user && user.profile && user.profile.avatar) { … } . วิธีนี้ใช้ได้ผลปกติ แต่ลองมาใช้ Optional Chaining (?.) จะดีกว่าไหม การใช้ user?.profile?.avatar จะหยุดทำงานทันทีหากค่าก่อนหน้าเป็น null หรือ undefined และคืนค่า undefined แทนการโยน Error วิธีนี้จะทำให้โค้ดสั้น อ่านง่าย…

1. โจทย์ คือ อยากได้เว็บใหม่ที่ผู้ใช้ต้องสามารถตรวจสอบคอร์สเรียนได้(คอร์สหลังๆ ผมส่งให้ทางเมล) และต้องทำให้เสร็จภายใน 2 สัปดาห์ เพราะผมติดสอน และต้องเปิดคอร์สใหม่ และต้องย้ายอีเมลของ user จากระบบเดิมกว่า 10,000 อีเมล มาฐานข้อมูลใหม่ และยังมีระบบ API เดิมที่ยังย้ายไม่ได้แต่ต้องใช้ต่อเนื่องด้วย คือย้ายบางส่วนก่อน บางส่วนจะทยอยย้าย 2. เว็บเดิมเขียนด้วย PHP (ใช้ Yii Framework 1.x) ใช้มามากกว่า 10 ปี เดิมใช้ฐานข้อมูล MySQL เวอร์ชัน 5.x เพิ่งอัปเกรดเป็น 8.x เมื่อต้นปี 2025 นี้ 3. ส่วนเวอร์ชันของ PHP เว็บเดิม เวอร์ชัน 5.x เพิ่งอัปเกรดมาเป็น 7.4 เมื่อต้นปี 2025 แต่ก็ end of life ไปแล้ว…

– Error Handling เป็นเรื่องใหญ่ เพราะในซอฟต์แวร์จริง ทุกอย่างมีโอกาสผิดพลาด เช่น network ล่ม, ข้อมูลไม่ครบ ฯลฯ . – การจัดการ error ที่ดีจะช่วยให้แอปไม่ crash เฉย ๆ แต่แจ้ง error ที่เข้าใจง่ายกับผู้ใช้ และ log ข้อมูลที่เป็นประโยชน์กับ dev . – พื้นฐานของ Error Handling ใน JavaScript เครื่องมือหลักคือ try…catch, throw และ Error object . – Error ที่ไม่ถูก catch จะ “bubble” (ลอยขึ้นบน) ไปถึง global scope แล้วทำให้แอปหยุดหรือแสดง warning . – ถ้าเป็น…

1. Signals, effect, linkedSignal, toSignal เป็นมีสถานะเป็น stable แล้ว! 2. Zoneless mode เข้าสู่สถานะ developer preview (ไม่ต้องใช้ zone.js อีกต่อไป) 3. แนะนำใช้ control flow แบบใหม่ @if, @for, @switch แทน *ngIf, *ngFor, *ngSwitch แบบเดิมเพราะจะเอาออกแล้วใน v22 ครับ คำสั่งในการอัปเกรดอัตโนมัติ ng generate @angular/core:control-flow 4. รองรับ hot module replacement (HMR) ใน templates โดย เปิดใช้งานแบบ default 5. เพิ่ม type checking และ editor support สำหรับ…

คนที่เรียนหลักสูตร AI API กับผมไปแล้วคงได้เขียนโค้ดในหัวข้อของ function calling กันมาบ้าง วันนี้เลยเอา best practices เกี่ยวกับการออกแบบ Function Calling หรือ Tool Calling มาให้อ่านกันครับ . 1. Function Description ให้ระบุคำอธิบายของฟังก์ชันและพารามิเตอร์ให้ “ชัดเจนและเฉพาะเจาะจง” มากที่สุด เพราะ LLM จะอาศัยคำอธิบายเหล่านี้ในการเลือกฟังก์ชันที่ถูกต้องและป้อน argument ที่เหมาะสม (สำคัญมาก) ลองใช้ค่า temperature ต่ำ (เช่น 0) เพื่อให้โมเดลเลือกฟังก์ชันได้อย่างแน่นอนและสม่ำเสมอ . 2. Naming การตั้งชื่อ ใช้ชื่อฟังก์ชันที่บ่งบอกถึงหน้าที่ชัดเจน หลีกเลี่ยงการใช้ space (เว้นวรรค), จุด (.) หรือขีด (-) ในชื่อ . 3. Strong Typing ควรกำหนดชนิดข้อมูลของพารามิเตอร์ให้เจาะจง เช่น…

1. อัปเกรด เป็น V8 Engine เป็นเวอร์ชัน 13.6 มีฟีเจอร์สำคัญ ดังนี้ – RegExp.escape: ช่วยให้การ escape regular expression ง่ายและปลอดภัยขึ้น ไม่ต้องเขียนฟังก์ชันเองอีกต่อไป – Float16Array: Typed array สำหรับจัดการตัวเลขแบบ 16-bit float มีประโยชน์สำหรับงานที่ต้องการประสิทธิภาพ เช่น กราฟิก หรือ ML – Atomics.pause: หยุด thread ใน Atomics ได้ มีประโยชน์สำหรับงานที่เกี่ยวกับ concurrency ระดับต่ำใน Workers – WebAssembly Memory64: รองรับหน่วยความจำ 64 บิตใน WebAssembly ทำให้ประมวลผลงานหนักได้มากขึ้น – await using: ใช้จัดการ resource เช่น ไฟล์…

เบราว์เซอร์จะเปลี่ยนสไตล์เริ่มต้นของ <h1> โดยจะไม่ลดขนาดตัวอักษรอัตโนมัติแล้ว และอาจถูก Lighthouse เตือนเรื่อง Best Practices 1. อย่าพึ่งพาสไตล์เริ่มต้นของเบราว์เซอร์ในการจัดลำดับหัวข้อ เนื่องจากเบราว์เซอร์กำลังยกเลิกการปรับขนาดอัตโนมัติของ <h1> ตามระดับการซ้อนของ sectioning elements เช่น <section>, <article>, <nav>, และ <aside> ควรกำหนดลำดับหัวข้ออย่างชัดเจนโดยใช้ <h2> สำหรับหัวข้อระดับสอง, <h3> สำหรับระดับสาม เป็นต้น . 2. กำหนด font-size และ margin สำหรับ <h1> ด้วยตนเอง เพื่อหลีกเลี่ยงปัญหาการแสดงผลที่ไม่สอดคล้องกัน ควรกำหนดขนาดตัวอักษรและระยะห่างของ <h1> อย่างชัดเจน เช่น: h1 { font-size: 2em; margin-block: 0.67em; } . 3. พิจารณาอัปเดต CSS reset หากใช้ CSS reset…

สรุป 5 ขั้นตอน Best Practices ช่วยป้องกัน app lag ใน React Native และ Expo . 1. ใช้ TypeScript เพื่อป้องกัน bug หลีกเลี่ยงการใช้ any ให้มากที่สุด ถ้าต้องการข้ามการตรวจ type ให้ใช้ // @ts-expect-error แทน // @ts-ignore . 2. หลีกเลี่ยง var และใช้ const / let ให้มากที่สุด ใช้ ESM แทน CommonJS เพื่อให้ Expo CLI ทำ tree-shaking ได้ แต่ถ้า require ใช้กับ assets ได้ เพราะไม่จำเป็นต้องทำ…