<div class="key-takeaways"><ul><li>พื้นที่ 10 วินาทีแรกบนพอร์ทัลเกมไม่ได้อยู่ในกำมือของผู้พัฒนา</li><li>ขนาดและการจัดวางหน้าจอถูกกำหนดโดย CSS ของโฮสต์และวิวพอร์ต</li><li>ความล่าช้าสร้างหน้าจอสีดำว่างเปล่าก่อนที่เกมจะเริ่มโหลด</li><li>หน้าจอแรกต้องออกแบบให้ใช้งานได้จริงในพื้นที่จำกัดและโหลดไว</li></ul></div><p>เมื่อเกมของคุณถูกนำไปวางไว้บนพอร์ทัล หน้าเว็บอาจมียอดเข้าชมเกิดขึ้น แต่ยอดการเล่นกลับไม่ขยับเขยื้อน หลายคนมักมองว่านั่นคือคำตัดสินว่าตัวเกมไม่น่าสนใจ แต่ความจริงคือไม่มีใครที่กดปิดไปเคยได้เล่นเกมนั้นเลย สิ่งที่พวกเขาปฏิเสธเกิดขึ้นก่อนที่เกมจะทันได้เริ่มต้นขึ้นเสียอีก บทความนี้จึงทำการวัดผลหน้าต่างเวลานี้บนพอร์ทัลเกมจริงๆ ออกมาเป็นตัวเลขที่จับต้องได้</p><p>หากสรุปให้สั้นที่สุด บนพอร์ทัลเกม 10 วินาทีแรกนั้นไม่ใช่ของคุณ CSS ของโฮสต์จะเป็นตัวตัดสินว่าเกมของคุณจะแสดงผลใหญ่แค่ไหน หน้าเว็บของโฮสต์จะเป็นตัวกำหนดว่าเกมจะปรากฏบนหน้าจอมากน้อยเพียงใด และเฟรมแรกของคุณเองจะเป็นตัวตัดสินว่าสิ่งเหล่านั้นสำคัญหรือไม่ ข้อมูลทั้งหมดนี้ถูกวัดผลบนเว็บไซต์ SlowDen เมื่อวันที่ 3 สิงหาคม 2026 โดยใช้งานเบราว์เซอร์ Chrome บนระบบปฏิบัติการ Windows ซึ่งข้อมูลเหล่านี้เป็นข้อมูลที่นักพัฒนาทั่วไปเข้าถึงได้ยากเพราะเป็นสิทธิ์ของโฮสต์</p><div class="stat-row"><div class="stat-item"><span class="stat-number">330x205</span><span class="stat-label">ขนาดพิกเซลเกมบนมือถือ</span></div><div class="stat-item"><span class="stat-number">13,371</span><span class="stat-label">ขนาด HTML ของโฮสต์ (Bytes)</span></div><div class="stat-item"><span class="stat-number">98 KB</span><span class="stat-label">ขนาดฟอนต์เว็บ (5 คำขอ)</span></div></div><p>การวัดผลทำขึ้นจากเกมสามเกมที่ไม่ใช่ผลงานของ SlowDen โดยใช้การโหลดหน้าเว็บจริงลงในเฟรมขนาดเท่ากันและอ่านขอบเขตกล่องจริงๆ แทนที่จะกะเกณฑ์ด้วยสายตา ส่วนเรื่องเวลาอ้างอิงจาก Navigation Timing และ Resource Timing APIs บนหน้าเว็บสด และขนาดไบต์ถูกดึงใหม่ด้วยคำสั่ง cache: 'no-store' เพื่อให้ได้ตัวเลขที่แท้จริงไม่ถูกแคชไว้ กล่องคอนเทนเนอร์ใช้ CSS บรรทัดเดียวคือกล่องเต็มความกว้างที่มีสัดส่วนคงที่ 16:10 ซึ่งหมายความว่าความสูงของเกมจะถูกกำหนดโดยความกว้างของหน้าจอในขณะนั้น</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/msd4crgf_inline_1_4d12d7b1f7.jpg" alt="browser viewport layout debugging" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><div class="ai-insight"><p>การวิเคราะห์เพิ่มเติม: ปัญหาเรื่องขนาดและการจัดวางหน้าจอ (Layout & Viewport) ถือเป็นจุดบอดที่นักพัฒนาเกมมักมองข้าม เนื่องจากมักทดสอบเกมบนความละเอียดสูงหรือหน้าจอเดสก์ท็อปมาตรฐาน (เช่น 1280x720) แต่ในความเป็นจริง ผู้เล่นมักใช้งานผ่านหน้าจออุปกรณ์หลากหลายขนาด ทั้งสมาร์ทโฟนจอเล็กและหน้าจอแล็ปท็อปที่มีแถบเบราว์เซอร์บดบัง ทำให้องค์ประกอบสำคัญอย่างปุ่มเริ่มเกมถูกดันลงไปอยู่ส่วนล่างที่มองไม่เห็น ส่งผลให้อัตราการออกจากหน้าเว็บก่อนเล่นสูงขึ้นอย่างหลีกเลี่ยงไม่ได้</p></div><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/liza_18827c15bdd387c4cd9c/why-players-leave-before-your-game-starts-457o" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>The first 10 seconds of a game on a portal do not belong to you.</li><li>Host CSS and viewport constraints dictate game dimensions and positioning.</li><li>Network gaps result in black empty rectangles before games load.</li><li>Title screens must be compact, lightweight, and designed for tight spaces.</li></ul></div><p>When your game is listed on a portal, the page gets visits, but the play count stays still. It is tempting to read that as a verdict on the game itself, but nobody who left ever played it. Whatever they rejected, they rejected before the game started. This article measures that window on a live portal in hard numbers.</p><p>To put it shortly, the first ten seconds of your game on a portal are not yours. The host's CSS decides how large your game is, the host's page decides how much of it is on screen, and your own first frame decides whether either of those mattered. All measurements were recorded on August 3, 2026, using Chrome on Windows against live pages on slowden.com, offering rare developer insights into host-side metrics.</p><div class="stat-row"><div class="stat-item"><span class="stat-number">330x205</span><span class="stat-label">Game box pixels on mobile</span></div><div class="stat-item"><span class="stat-number">13,371</span><span class="stat-label">Host HTML size in bytes</span></div><div class="stat-item"><span class="stat-number">98 KB</span><span class="stat-label">Web fonts across 5 requests</span></div></div><p>Layouts were measured by loading live pages into same-origin frames set to exact viewport dimensions rather than eyeballing browser windows. Timings were pulled from Navigation Timing and Resource Timing APIs, while byte sizes were fetched with cache: 'no-store' to ensure accurate totals. The container relies on a single line of CSS: a full-width box with a fixed 16:10 aspect ratio, meaning game height depends entirely on page width.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/msd4crgf_inline_1_4d12d7b1f7.jpg" alt="browser viewport layout debugging" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><div class="ai-insight"><p>Additional Context & Analysis: Viewport fragmentation is a silent killer for web games. Developers often design title screens on expansive 1280x720 canvases, failing to account for how those screens shrink on mobile devices or get vertically clipped by laptop browser chromes. Ensuring critical UI elements like start buttons remain visible above the fold is essential to reducing pre-play drop-offs.</p></div><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/liza_18827c15bdd387c4cd9c/why-players-leave-before-your-game-starts-457o" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_article-1325.jpg

small_article-1325.jpg

thumbnail_article-1325.jpg

article-1325.jpg

ข้อมูลจริงจากพอร์ทัลเกม SlowDen เผยให้เห็นว่าหน้าจอแรก 10 วินาทีแรกของเกมไม่ได้อยู่ในมือผู้พัฒนา แต่ถูกกำหนดด้วย CSS ของโฮสต์ ขนาดหน้าจอ และความเร็วในการโหลดเฟรมแรก

Data from SlowDen reveals that the first 10 seconds of a portal game belong to the host's CSS, viewport sizes, and load sequences rather than the developer.

เจาะเบื้องหลังความจริง: ทำไมผู้เล่นถึงปิดเกมหนีตั้งแต่ยังไม่ทันได้เริ่มเล่น

Why Players Leave Before Your Game Starts: Real Data From a Live Portal

<div class="key-takeaways"><ul><li>ผลงานส่งเข้าประกวดใน Frontend Challenge: Comfort Food Edition</li><li>จำลองขนมปังชีส Khachapuri แบบดั้งเดิมจากแคว้น Imereti</li><li>ใช้เพียง HTML และ CSS ล้วนโดยไม่มีรูปภาพ SVG แคนวาส หรือจาวาสคริปต์</li><li>แบ่งขนมปังออกเป็น 13 ชิ้นด้วย clip-path เพื่อสร้างแอนิเมชันการตัด</li></ul></div><p>นักพัฒนาซอฟต์แวร์ได้ส่งผลงานเข้าร่วมการแข่งขัน Frontend Challenge ในหัวข้อ Comfort Food Edition โดยเลือกเมนูที่สะท้อนถึงความอบอุ่นในวัยเด็กอย่าง Imeretian Khachapuri หรือขนมปังชีสทรงกลมสอดไส้ชีสละลายสูตรดั้งเดิมจากแคว้น Imereti ทางตะวันตกของประเทศจอร์เจีย ซึ่งจุดเด่นคือแป้งนุ่มฟูอบจนเป็นสีทองและทาน้ำเนยหลังอบเสร็จ โดยตัวชีสจะอยู่ภายในเนื้อแป้งทั้งหมดแตกต่างจากพิซซ่าทั่วไป</p><p>ความท้าทายของโปรเจกต์นี้คือการสร้างสรรค์ทุกองค์ประกอบที่มองเห็น ไม่ว่าจะเป็นพื้นผิวของขนมปัง ไอร้อนที่ลอยขึ้นมา หรือแอนิเมชันการตัดแบ่ง ให้เกิดขึ้นด้วยภาษา HTML และ CSS เท่านั้น โดยไม่มีการใช้รูปภาพไฟล์กราฟิก SVG แคนวาส หรือโค้ดจาวาสคริปต์เข้ามาช่วยแต่อย่างใด</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/khachapuri_css_msd4bxtm_inline_1_628ddaa59f.jpg" alt="css art code digital food illustration" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><div class="ai-insight"><p>การทำ CSS Art โดยไม่มีการใช้ JavaScript หรือภาพกราฟิกช่วยเลยถือเป็นโจทย์ที่ทดสอบทักษะขั้นสูงของนักพัฒนา frontend การใช้เทคนิคอย่าง radial gradients ซ้อนทับกันและการตัดรูปทรงด้วย clip-path ช่วยให้สามารถจำลองพื้นผิวและมิติของอาหารได้อย่างสมจริงบนเบราว์เซอร์</p></div><p>ในด้านเทคนิคการเขียนโค้ด ผู้สร้างสรรค์ได้เลือกใช้วิธีแบ่งขนมปังออกเป็น 13 ชิ้นย่อยแทนที่จะสร้างก้อนขนมปังเต็มชิ้นแล้วใช้เลเยอร์มาบัง โดยอาศัยคุณสมบัติ clip-path: polygon() ซึ่งจำนวน 13 ชิ้นนี้เพียงพอที่จะทำให้ชิ้นขนมปังค่อยๆ หายไปได้อย่างแนบเนียนโดยไม่ต้องเพิ่มจำนวนองค์ประกอบ HTML มากจนเกินไป นอกจากนี้ยังมีการใช้การซ้อนทับของ radial gradients หลายชั้นเพื่อจำลองผิวสัมผัสของขนมปังที่เพิ่งอบเสร็จใหม่ๆ และใช้ CSS shapes เพื่อจัดวางข้อความให้โอบล้อมจานอาหารคล้ายกับบล็อกรีวิวอาหารจริงๆ อีกด้วย</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/highflyer910/khachapuri-georgian-cheese-bread-in-pure-css-47o7" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>A submission for the Frontend Challenge: Comfort Food Edition</li><li>Recreates traditional Imeretian Khachapuri cheese bread from Western Georgia</li><li>Built entirely with HTML and CSS with no images, SVG, canvas, or JavaScript</li><li>Divided into 13 slices using clip-path for smooth slicing animation</li></ul></div><p>A developer has submitted a creative entry for the Frontend Challenge under the Comfort Food Edition category, choosing to model Imeretian Khachapuri—a traditional cheese bread stuffed with melted cheese originating from the Imereti region in western Georgia. Unlike pizza, the soft yeast dough completely encases the cheese inside, baked until golden brown and brushed with butter.</p><p>The entire visual composition, ranging from the bread texture and rising steam to the slicing animation, has been constructed solely using HTML and CSS. The project strictly avoids any external image files, SVG graphics, canvas elements, or JavaScript execution.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/khachapuri_css_msd4bxtm_inline_1_628ddaa59f.jpg" alt="css art code digital food illustration" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><div class="ai-insight"><p>Creating complex artwork using only CSS without JavaScript or image assets is a profound test of a frontend developer's layout and styling skills. Utilizing overlapping radial gradients and clip-path polygons allows developers to simulate realistic food textures and lighting entirely through browser rendering engines.</p><p>To achieve the look of freshly baked bread without unnecessary complexity, the creator divided the loaf into 13 distinct slices using clip-path: polygon() instead of rendering a whole loaf and hiding parts with overlays. This exact number of slices proved sufficient to make the bread disappear smoothly without bloating the DOM. Furthermore, layered radial gradients were applied to mimic baked textures, alongside CSS shapes to wrap text naturally around the plate like a food blog layout.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/highflyer910/khachapuri-georgian-cheese-bread-in-pure-css-47o7" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_khachapuri-css-msd4bxtm.jpg

small_khachapuri-css-msd4bxtm.jpg

thumbnail_khachapuri-css-msd4bxtm.jpg

khachapuri-css-msd4bxtm.jpg

โปรเจกต์ CSS Art สุดสร้างสรรค์ที่จำลองเมนูคอมฟอร์ทฟู้ดจอร์เจียด้วย HTML และ CSS เท่านั้นโดยไม่พึ่ง JavaScript หรือภาพกราฟิก

A creative CSS Art project recreating traditional Georgian comfort food using only HTML and CSS without JavaScript or image assets.

สร้างสรรค์ขนมปังชีสจอร์เจีย Khachapuri ด้วย CSS ล้วน

Crafting Georgian Khachapuri Cheese Bread in Pure CSS

<div class="key-takeaways"><ul><li>มาตรา 50 ของ EU AI Act กำหนดให้ต้องมีการแสดงความโปร่งใสในการใช้งาน AI รูปแบบต่างๆ</li><li>มีผลบังคับใช้อย่างเป็นทางการในวันที่ 2 สิงหาคม 2026 พร้อมช่วงผ่อนผันถึง 2 ธันวาคม 2026 สำหรับระบบเดิม</li><li>แยกความรับผิดชอบระหว่างผู้ให้บริการ (Provider) และผู้ใช้งานระบบ (Deployer) อย่างชัดเจน</li><li>มีข้อยกเว้นสำหรับงานศิลปะ ความคิดสร้างสรรค์ งานเสียสี และการสืบสวนสอบสวนทางอาญา</li></ul></div><p>กฎระเบียบด้านปัญญาประดิษฐ์ของสหภาพยุโรปหรือ EU AI Act เตรียมบังคับใช้ข้อกำหนดด้านความโปร่งใสชุดใหม่ในวันที่ 2 สิงหาคม 2026 ภายใต้มาตรา 50 ซึ่งระบุให้ต้องมีการเปิดเผยข้อมูลอย่างชัดเจนในสถานการณ์การใช้งาน AI ทั่วไป เช่น การสนทนากับแชทบอท การพบเจอกลุ่มเนื้อหาที่สร้างหรือดัดแปลงโดย AI รวมถึงระบบการจดจำทางอารมณ์และการจัดหมวดหมู่ข้อมูลชีวภาพ</p><p>สำหรับนักพัฒนา แพลตฟอร์ม และองค์กรที่นำเครื่องมือเหล่านี้มาใช้ในสหภาพยุโรป ความท้าทายเร่งด่วนคือการแปลงหลักการความโปร่งใสในภาพกว้างให้กลายเป็นกลไกควบคุมผลิตภัณฑ์และกระบวนการกำกับดูแลที่เชื่อถือได้ ข้อกำหนดเหล่านี้ถูกระบุไว้ในตัวบทกฎหมายอย่างเป็นทางการ Regulation (EU) 2024/1689 โดยมีการจำแนกหน้าที่ระหว่างผู้ให้บริการที่พัฒนาหรือนำระบบออกสู่ตลาด กับผู้ใช้งานระบบในบริบทที่เกี่ยวข้อง</p><div class="ai-insight"><p>การที่กฎระเบียบไม่บังคับใช้รูปแบบป้ายกำกับสากลแบบเดียวกันกับทุกระบบ สะท้อนให้เห็นถึงความพยายามของสหภาพยุโรปในการยืดหยุ่นให้เข้ากับหน้างานจริง แต่ในขณะเดียวกันก็สร้างความซับซ้อนให้ทีมพัฒนาต้องออกแบบโซลูชันให้เหมาะสมกับบริบทเฉพาะตัวของผู้ใช้งานแต่ละกลุ่ม</p></div><p>แก่นสำคัญของมาตรา 50 คือการทำให้ผู้ใช้งานสามารถตระหนักรู้ได้ทันทีเมื่อมีปัญญาประดิษฐ์เข้ามาเกี่ยวข้อง พร้อมทั้งเข้าใจการใช้งาน AI ในกรณีที่มีผลกระทบสำคัญ โดยกฎหมายไม่ได้กำหนดป้ายกำกับที่เป็นมาตรฐานเดียวกันทั้งหมด แต่ภาระหน้าที่ขึ้นอยู่กับตัวระบบ ผลลัพธ์ และบริบทที่เผยแพร่เนื้อหานั้นสู่สาธารณะ</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/eu_ai_act_50_ai_2026_mscrhn0t_inline_1_f372833823.jpg" alt="artificial intelligence software interface compliance" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>ข้อกำหนดเหล่านี้คือภาระผูกพันด้านความโปร่งใส ไม่ใช่การสั่งแบนเทคโนโลยีดังกล่าวแต่อย่างใด ผลลัพธ์ในทางปฏิบัติคือการทำให้การเปิดเผยข้อมูลกลายเป็นข้อกำหนดในการพัฒนาผลิตภัณฑ์และการเผยแพร่เนื้อหาในสถานการณ์ที่มาตรา 50 ได้ระบุเอาไว้ โดยจะมีช่วงเวลาผ่อนผันจนถึงวันที่ 2 ธันวาคม 2026 สำหรับผู้ให้บริการระบบ AI ที่วางตลาดก่อนวันที่ 2 สิงหาคม 2026 เพื่อให้จัดการเรื่องการทำเครื่องหมายและการตรวจสอบได้ทัน</p><p>การประเมินความพร้อมในทางปฏิบัติสามารถทำได้ดังนี้:</p><ul><li>จับคู่ความสามารถของ AI แต่ละตัวเข้ากับบทบาท ผลลัพธ์ และกลุ่มเป้าหมาย</li><li>ตรวจสอบว่าป้ายกำกับหรือการแจ้งเตือนไม่หลุดหายไประหว่างการเชื่อมต่อ API หรือกระบวนการเผยแพร่</li><li>ทบทวนกระบวนการจัดซื้อจัดจ้างเพื่อประเมินว่าซัพพลายเออร์สามารถรองรับข้อกำหนดตามกฎหมายได้หรือไม่</li></ul><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/alifar/eu-ai-act-article-50-what-the-2026-transparency-rules-mean-for-ai-teams-3i7g" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>EU AI Act Article 50 mandates clear disclosures for several common AI interaction scenarios.</li><li>Rules become enforceable on August 2, 2026, with a grace period until December 2, 2026, for legacy systems.</li><li>Distinctions are clearly drawn between AI providers and system deployers.</li><li>Important exemptions apply to artistic, creative, satirical works, and criminal investigations.</li></ul></div><p>The European Union's AI Act will make a new set of transparency obligations enforceable from August 2, 2026. Article 50 requires clear disclosures in several common AI scenarios, such as when individuals interact with chatbots, encounter AI-generated or manipulated content, or are exposed to emotion recognition and biometric categorization systems.</p><p>For developers, platforms, and organizations deploying these tools within the EU, the immediate challenge lies in transforming broad transparency principles into reliable product controls and governance processes. These requirements originate from Regulation (EU) 2024/1689, drawing a distinct line between obligations for providers who develop systems and deployers who utilize them in relevant settings.</p><div class="ai-insight"><p>Allowing flexibility in how transparency is implemented rather than enforcing a universal label highlights the EU's pragmatic approach, though it places the burden on product teams to design context-aware notification mechanisms.</p><p>At its core, Article 50 ensures people can easily identify AI involvement and understand consequential uses, depending heavily on the specific output and publishing context rather than a blanket technology ban.</p></div><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/eu_ai_act_50_ai_2026_mscrhn0t_inline_1_f372833823.jpg" alt="artificial intelligence software interface compliance" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>The transparency rules become enforceable on August 2, 2026, alongside initial enforcement powers, backed by a transitional grace period until December 2, 2026, for pre-existing AI systems to comply with marking and detection duties. Organizations must carefully map out exceptions, which include criminal investigations, artistic, creative, satirical, or fictional works, alongside qualified public-interest texts.</p><p>A practical readiness review can include:</p><ul><li>Mapping every AI capability to its specific role, output, and audience.</li><li>Ensuring disclosure labels do not disappear across API integrations or downstream publishing workflows.</li><li>Reviewing procurement standards to verify whether AI vendors support necessary chatbot notices and output detectability.</li></ul><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/alifar/eu-ai-act-article-50-what-the-2026-transparency-rules-mean-for-ai-teams-3i7g" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_eu-ai-act-50-ai-2026-mscrhn0t.jpg

small_eu-ai-act-50-ai-2026-mscrhn0t.jpg

thumbnail_eu-ai-act-50-ai-2026-mscrhn0t.jpg

eu-ai-act-50-ai-2026-mscrhn0t.jpg

สรุปข้อกำหนดสำคัญภายใต้กฎหมาย AI ของสหภาพยุโรปที่จะเริ่มบังคับใช้ในวันที่ 2 สิงหาคม 2026 พร้อมช่วงผ่อนผันและข้อยกเว้นสำหรับทีมนักพัฒนา

An in-depth look at the upcoming transparency obligations under the EU AI Act taking effect on August 2, 2026, including grace periods and exemptions.

เจาะลึก EU AI Act มาตรา 50 กฎความโปร่งใส AI ที่จะมีผลบังคับใช้ ส.ค. 2026

EU AI Act Article 50: What the 2026 Transparency Rules Mean for AI Teams

medium_context-engineering-ai-agent-mscrgu61.jpg

small_context-engineering-ai-agent-mscrgu61.jpg

thumbnail_context-engineering-ai-agent-mscrgu61.jpg

context-engineering-ai-agent-mscrgu61.jpg

เจาะลึกโครงสร้างการทำงานของ AI Agent จากแนวคิดการจัดเตรียมบริบทแทนการพึ่งพาพร้อมท์ที่ซับซ้อน พร้อมตัวอย่างการใช้งานจริง

A practical breakdown of how AI agents actually work by focusing on rich context, persistent memory, and standardized tools instead of complex prompts.

เลิกแต่งพร้อมท์แล้วหันมาทำ Context Engineering สำหรับ AI Agent

Stop Prompt Engineering, Start Context Engineering

<div class="key-takeaways"><ul><li>เว็บไซต์เครื่องมือ 6 ภาษาเผชิญปัญหาหน้าภาษาจีนถูก Google รวมเข้ากับเวอร์ชันภาษาอังกฤษ</li><li>สาเหตุจาก Canonical URL มี trailing slash แต่ sitemap ไม่มี ทำให้ Cloudflare และ Google สับสน</li><li>ใช้เวลาแก้นานถึง 4 ชั่วโมงเต็มจนกว่า URL ทั้งหมดจะตรงกัน</li><li>วางแผนทำ build-time check เพื่อป้องกันปัญหานี้ในอนาคต</li></ul></div><p>การพัฒนาเว็บไซต์เครื่องมือบนเบราว์เซอร์ที่มีหลายภาษาฟังดูเหมือนเป็นงานที่ใช้เวลาไม่นานนัก แต่สำหรับนักพัฒนาที่ดูแลโปรเจกต์เดี่ยว การจัดการเรื่อง SEO ในหลายภาษากลับซ่อนความน่าปวดหัวเอาไว้มากกว่าที่คิด โดยเฉพาะเมื่อรายละเอียดเล็กๆ น้อยๆ อย่างเครื่องหมายสแลชท้าย URL ไม่ตรงกัน</p><p>สัญญาณแรกที่บ่งบอกว่ามีบางอย่างผิดปกติเกิดขึ้นคือ หน้าเว็บภาษาจีนไม่ได้แสดงผลแยกเป็น URL ของตัวเองบน Google Search Console แต่กลับถูกยุบรวมเข้ากับเวอร์ชันภาษาอังกฤษ ส่งผลให้อันดับภาษาอังกฤษยังคงอยู่ แต่หน้าภาษาจีนกลับหายไปอย่างไร้ร่องรอย</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/multilingual_seo_trailing_slash_4_mscrg58e_inline_1_851dd9df27.jpg" alt="developer debugging code laptop screen" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>เมื่อตรวจสอบซอร์ซโค้ดของหน้าเครื่องมือภาษาจีนพบว่า Canonical URL ชี้ไปยังหน้าภาษาจีนที่ถูกต้อง ซึ่งลงท้ายด้วยเครื่องหมายสแลช (trailing slash) ตามค่าเริ่มต้นของ Next.js ทว่ารายการใน sitemap ที่ส่งไปก่อนหน้านี้กลับไม่มีเครื่องหมายสแลช ส่งผลให้ระบบของ Cloudflare ทำการแปลง URL อย่างเงียบๆ และทำให้ Google มองว่าหน้าตาม sitemap ไม่มีตัวตนจริง จึงตัดสินใจเลือกเวอร์ชันภาษาอังกฤษเป็นหน้าหลักแทน</p><div class="stat-row"><div class="stat-item"><span class="stat-number">4</span><span class="stat-label">ชั่วโมงที่เสียไปกับการแก้ปัญหา URL</span></div><div class="stat-item"><span class="stat-number">6</span><span class="stat-label">ภาษาที่รองรับบนเว็บไซต์ korelyy.com</span></div><div class="stat-item"><span class="stat-number">3</span><span class="stat-label">วันที่ Search Console error ลดเหลือศูนย์</span></div></div><p>หลังจากปรับแก้ให้ข้อมูลทั้งสามส่วนตรงกัน ไม่ว่าจะเป็นหน้าเว็บจริง Canonical URL และ sitemap ปริมาณข้อผิดพลาดบน Search Console ก็ลดลงจนเหลือศูนย์ภายในเวลาประมาณสามวัน</p><div class="ai-insight"><p>ในเชิงเทคนิคแล้ว การทำ Multilingual SEO มักสะดุดกับปัญหาความไม่สอดคล้องกันของ URL Structure บ่อยครั้ง การที่เครื่องมือค้นหาอย่าง Google มองว่า URL ที่มีและไม่มี trailing slash เป็นคนละหน้ากัน แม้เนื้อหาจะเหมือนกันเป๊ะ ทำให้เกิดปัญหา Duplicate Content ได้ง่าย การตั้งค่าระบบแคชหรือพร็อกซีอย่าง Cloudflare จึงต้องระมัดระวังเรื่องการทำ URL rewriting เป็นพิเศษเพื่อไม่ให้ทับซ้อนกับค่าที่ประกาศใน Canonical tag</p></div><p>ปัจจุบันผู้พัฒนาเว็บไซต์ดังกล่าวยังคงทยอยเคลียร์หน้าเว็บส่วนน้อยที่ยังมีคำเตือนเรื่องเนื้อหาซ้ำซ้อน โดยมีแผนจะสร้างสคริปต์ตรวจสอบในช่วง build-time ที่จะสั่งยกเลิกกระบวนการ build ทันทีหากพบว่า Canonical URL ไม่ตรงกับรายการใน sitemap และหากสคริปต์นี้ใช้งานได้ดี ก็มีโครงการจะเปิดซอร์สโค้ดให้ผู้อื่นนำไปใช้ต่อได้ด้วย</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/korelyy/4-hours-lost-to-a-trailing-slash-what-shipping-multilingual-seo-actually-looks-like-4jni" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>A 6-language tool site faced an issue where Chinese pages merged into the English version on Google.</li><li>The root cause was a mismatch between canonical URLs with trailing slashes and sitemap entries without them.</li><li>It took a full 4 hours of staring at rendered HTML to track down and fix the bug.</li><li>The developer plans to implement a build-time check to prevent future canonical discrepancies.</li></ul></div><p>Building a multi-language browser-based tool site sounds straightforward on paper, but for solo developers handling everything manually, managing multilingual SEO often comes with unexpected hurdles. Small syntax details like a trailing slash can unexpectedly break search engine indexing.</p><p>The first warning sign appeared when Chinese pages failed to show up as independent URLs in Google Search Console, getting merged with their English counterparts instead. While the English version ranked normally, the Chinese version vanished completely.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/multilingual_seo_trailing_slash_4_mscrg58e_inline_1_851dd9df27.jpg" alt="developer debugging code laptop screen" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>Inspecting the source of a Chinese tool page showed that the canonical URL correctly pointed to the Chinese version featuring a trailing slash, matching Next.js's default behavior. However, the submitted sitemap entry lacked the trailing slash. Cloudflare silently rewrote URLs in the background, leading Google to conclude that the sitemap version did not exist and default to indexing the English page.</p><div class="stat-row"><div class="stat-item"><span class="stat-number">4</span><span class="stat-label">Hours spent debugging URL mismatches</span></div><div class="stat-item"><span class="stat-number">6</span><span class="stat-label">Languages supported on korelyy.com</span></div><div class="stat-item"><span class="stat-number">3</span><span class="stat-label">Days for Search Console errors to hit zero</span></div></div><p>Once the rendered page, canonical tag, and sitemap entries were fully aligned, the Search Console error count dropped to zero within approximately three days.</p><div class="ai-insight"><p>From a technical standpoint, multilingual SEO frequently trips up over strict URL normalization rules. Search engines treat URLs with and without trailing slashes as distinct pages, which can easily trigger duplicate content penalties if not handled uniformly. Edge proxies like Cloudflare must be configured carefully to avoid rewriting URLs in a way that contradicts declared canonical tags.</p></div><p>The site runner is currently cleaning up remaining pages flagged for duplicate content warnings, aiming to introduce a build-time check that fails deployment if any canonical URL disagrees with the sitemap. If successful, the script will be open-sourced for the community.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/korelyy/4-hours-lost-to-a-trailing-slash-what-shipping-multilingual-seo-actually-looks-like-4jni" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_multilingual-seo-trailing-slash-4-mscrg58e.jpg

small_multilingual-seo-trailing-slash-4-mscrg58e.jpg

thumbnail_multilingual-seo-trailing-slash-4-mscrg58e.jpg

multilingual-seo-trailing-slash-4-mscrg58e.jpg

แชร์ประสบการณ์ปรับแต่ง SEO หลายภาษาสำหรับเว็บไซต์เครื่องมือขนาดเล็ก ที่เกือบพังเพราะ URL มีหรือไม่มีเครื่องหมายทับท้ายไม่ตรงกัน

A developer shares how a tiny mismatch in URL trailing slashes derailed multilingual SEO for a 6-language tool site.

เจาะลึกปัญหาสนุกๆ ของ Multilingual SEO เมื่อ Trailing Slash พาหลงทาง 4 ชั่วโมง

4 hours lost to a trailing slash: what shipping multilingual SEO actually looks like

<div class="key-takeaways"><ul><li>LLM ทำงานด้วยการคาดเดาจากบริบท ทำให้คำตอบอาจเปลี่ยนไปหรือผิดเพี้ยนได้แม้ใช้พรอมต์เดิม</li><li>เหตุการณ์ใน staging แสดงให้เห็นว่าโมเดลที่เคยใช้งานได้ปกติกลับส่งออกข้อมูลจำลองอย่าง Vendor A และ Vendor B ออกมาดื้อๆ</li><li>การตรวจสอบแบ่งออกเป็นโครงสร้าง (Schema) และความหมาย (Semantic) ซึ่งอย่างหลังต้องใช้โมเดลช่วยตรวจสอบอีกชั้น</li><li>การทำ validation ตั้งแต่วันแรกช่วยป้องกันปัญหาผลลัพธ์พังและคุ้มค่ากว่าการรอใส่ทีหลัง</li></ul></div><p>ในวงจรการพัฒนาซอฟต์แวร์แบบดั้งเดิมหรือ SDLC งานตรวจสอบคุณภาพหรือ QA มักเป็นหน้าที่ของทีมอื่นและเกิดขึ้นในช่วงท้ายของโปรเจกต์ ทีม QA จะคอยตรวจว่าซอฟต์แวร์ทำงานได้ตามที่ออกแบบไว้หรือไม่ พฤติกรรมของระบบมีความสม่ำเสมอจนสามารถเขียนสคริปต์อัตโนมัติเพื่อทดสอบซ้ำๆ ได้ก่อนจะส่งมอบงานต่อไป แต่วิธีการเหล่านี้พังทลายลงทันทีเมื่อระบบเริ่มมีโมเดลภาษาขนาดใหญ่หรือ LLM เข้ามาเกี่ยวข้อง</p><p>ระหว่างการพัฒนาแอปพลิเคชัน Slooster ผู้พัฒนาเลือกที่จะทำส่วนยากๆ ก่อน และคิดว่าชั้นตรวจสอบข้อมูลหรือ validation layer สามารถรอไว้ก่อนได้เนื่องจากระบบทดสอบในเครื่องทำงานได้เป็นอย่างดี แต่ความจริงก็คือ LLM สร้างผลลัพธ์จากการคาดเดาตามบริบท แม้เทคโนโลยีจะเก่งขึ้นเรื่อยๆ แต่มันก็ยังเป็นการคาดเดาอยู่ดี พรอมต์เดิมในเวลาที่ต่างออกไปอาจให้คำตอบที่เพี้ยนหรือผิดพลาดได้โดยที่ไม่มีอะไรเปลี่ยนแปลงเลย การตรวจสอบจึงต้องฝังอยู่ในตัวซอฟต์แวร์ตั้งแต่วันแรกที่สร้างระบบเพื่อรองรับความไม่แน่นอนนี้</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/ai_msceqr1i_inline_1_3058ef8c38.jpg" alt="software staging dashboard developer interface" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>เหตุการณ์ช็อกในสภาพแวดล้อม staging เกิดขึ้นเมื่อนำ Slooster Guide ไปทดสอบก่อนสาธิตให้ผู้ร่วมก่อตั้งดู พรอมต์และโมเดลชุดเดิมที่เคยให้ข้อมูลผู้ขายตรงตามเกณฑ์มานานนับสัปดาห์ กลับส่งข้อมูลจำลองอย่างคำว่า Vendor A, Vendor B และ Vendor C ออกมาแทน และเมื่อสั่งให้ระบบสร้างคำตอบใหม่ ก็ได้ Vendor D หลุดเข้ามาผสมด้วย เหตุการณ์นี้พิสูจน์ให้เห็นว่าโมเดลที่ทำงานได้สะอาดเรียบร้อยในเครื่องนานหลายสัปดาห์ยังคงพ่นขยะออกมาได้จริงเมื่อใช้งานจริง และการทดสอบก่อนส่งมอบล่วงหน้าไม่สามารถป้องกันปัญหานี้ได้เลย นี่คือเหตุผลหลักที่ต้องตรวจสอบแบบ inline บนทุกผลลัพธ์จริง ไม่ใช่แค่ตรวจครั้งเดียวก่อนปล่อยของ</p><div class="ai-insight"><p>การนำ LLM มาใช้งานจริงบนระบบโปรดักชันมักเผชิญกับความท้าทายเรื่อง Non-determinism หรือความไม่แน่นอนของผลลัพธ์ ซึ่งแตกต่างจากโค้ดทั่วไปที่ใส่ค่าเท่าเดิมต้องได้ผลลัพธ์เดิมเสมอ การที่นักพัฒนาต้องสร้างระบบตรวจสอบซ้อนระบบอีกชั้น (Model-grading-model) จึงกลายเป็นแนวปฏิบัติใหม่ที่สำคัญในการันตีความถูกต้องของข้อมูลก่อนแสดงผลสู่ผู้ใช้งานจริง</p></div><p>ผู้พัฒนาได้เพิ่มชั้นตรวจสอบข้อมูลพร้อมระบบลองใหม่ (retries) เมื่อเจอผลลัพธ์ที่ไม่ผ่านเกณฑ์ ระบบจะเรียกใช้งานซ้ำทันที แต่การทำ retry มีต้นทุนด้านเวลาและแอปพลิเคชันยังต้องตอบสนองได้รวดเร็วขณะที่ผู้ใช้งานรอดำเนินการ การตรวจสอบจึงไม่ใช่เรื่องฟรีและไม่มีสูตรสำเร็จตายตัว ตำแหน่งที่รัน จำนวนครั้งที่ลองซ้ำ และการให้มนุษย์เข้ามาตรวจสอบ (Human-in-the-loop) ล้วนขึ้นอยู่กับลักษณะการใช้งานของแต่ละระบบ</p><p>กระบวนการตรวจสอบแบ่งออกเป็นสองระดับหลัก:</p><ul><li>การตรวจสอบเชิงโครงสร้าง (Deterministic checks): ใช้ตัวตรวจสอบ Schema เพื่อปฏิเสธข้อมูลที่โครงสร้างผิดเพี้ยน</li><li>การตรวจสอบเชิงความหมาย (Semantic checks): ใช้โมเดลตรวจทานโมเดลอีกทีเพื่อจับข้อมูลจำลองหรือข้อความฟิลเลอร์ทั่วไปที่ผ่านเกณฑ์โครงสร้างแต่ใช้การไม่ได้</li></ul><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/smukker/lesson-4-validation-a-must-have-cornerstone-3bd2" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>LLMs generate outputs by guessing based on context, meaning the exact same prompt can yield different or incorrect answers.</li><li>A staging deployment revealed that a stable model suddenly started spitting out raw placeholders like Vendor A and Vendor B.</li><li>Validation requires both structural schema checks and semantic model-graded evaluations to catch dummy data.</li><li>Building a validation layer from day one prevents broken outputs and is far more cost-effective than adding it later.</li></ul></div><p>In a traditional software development life cycle, validation was handled by someone else later in the process. QA teams verified that the software behaved as expected, and because behaviors were repeatable, teams eventually automated those checks and moved on. However, that traditional model breaks down the exact moment an LLM enters the picture.</p><p>While building Slooster, the developer tackled the hard parts first and assumed the validation layer could wait because everything worked locally. Unfortunately, LLMs produce outputs by guessing based on context. While they are improving, they are still guessing, meaning the same prompt can produce a different or incorrect response next time with zero changes made. As a result, validation must be embedded directly into the software.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/ai_msceqr1i_inline_1_3058ef8c38.jpg" alt="software staging dashboard developer interface" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>The reality check struck after deploying Slooster Guide to staging right before a demo with co-founders. The exact same prompts, models, and configurations that had successfully returned real, criteria-matched vendors for weeks suddenly outputted placeholder data literally reading Vendor A, Vendor B, and Vendor C. Regenerating simply brought Vendor D into the mix. A model providing clean local outputs for weeks can still hand over garbage during a real call, proving why inline validation on every actual output is essential instead of a one-time check before shipping.</p><div class="ai-insight"><p>Deploying LLMs to production often exposes developers to non-determinism, a stark contrast to standard code where identical inputs guarantee identical outputs. Implementing a secondary validation gate where a model evaluates another model's output has quickly become an essential industry pattern for safeguarding AI-driven applications before end-users ever see the response.</p><p>Adding a validation layer with built-in retries catches bad outputs, but retries consume time while users wait, meaning validation incurs costs and lacks a one-stop solution. Where it runs and how aggressively it retries depend heavily on the specific use case.</p><p>The validation pipeline splits into distinct gates:</p><ul><li>Deterministic checks: Schema validators immediately reject structurally off-spec data.</li><li>Semantic checks: A secondary model reviews the response against the original criteria to flag placeholders, generic filler, or example data that passed schema checks.</li></ul><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/smukker/lesson-4-validation-a-must-have-cornerstone-3bd2" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

large_article-1286.jpg

medium_article-1286.jpg

small_article-1286.jpg

thumbnail_article-1286.jpg

article-1286.jpg

บทเรียนจากการพัฒนาโปรเจกต์ Slooster เมื่อ LLM ให้ผลลัพธ์ไม่แน่นอนและเต็มไปด้วยข้อมูลจำลอง ส่งผลให้การตรวจทานแบบเดิมใช้ไม่ได้ผลอีกต่อไป

Lessons from building Slooster show that because LLMs output unpredictable and placeholder data, traditional testing methods fall short.

ทำไมการตรวจสอบข้อมูลในยุค AI จึงต้องเป็นรากฐานสำคัญตั้งแต่วันแรก

Why AI Validation Must Be Your Core Foundation From Day One

<div class="key-takeaways"><ul><li>นักพัฒนาที่ใช้ภาษาอื่นนอกเหนือจาก Node ต้องเผชิญความท้าทายในการจัดการแอปฝังตัวใน iframe</li><li>แอป Shopify ฝังตัวไม่สามารถใช้ PHP session ได้ จึงต้องพึ่งพา Session Token แบบ JWT ที่มีอายุเพียง 1 นาที</li><li>การแลก Token ใช้มาตรฐาน OAuth 2.0 token exchange (RFC 8693) แทนการทำ authorization-code แบบเดิม</li><li>บทความนี้นำเสนอโค้ดจริงจากการใช้งานจริงในแอป StockPilot บน Symfony 7.4 และ PHP 8.5</li></ul></div><p>เอกสารทางการของ Shopify มักจะเน้นเส้นทางหลักด้วย Node, Official CLI และเทมเพลต Remix เป็นหลัก ทำให้นักพัฒนาที่เลือกใช้ภาษาอื่นต้องเผชิญกับความท้าทายตั้งแต่ก้าวแรก เนื่องจากแอปพลิเคชันของคุณจะรันอยู่ใน iframe ภายในหน้าผู้ดูแลระบบของ Shopify ซึ่งเบราว์เซอร์จะไม่ยอมส่งคุกกี้ข้ามเว็บไซต์ให้ และ Token ที่จำเป็นต่อการเรียกใช้งาน Admin API ก็จะต้องถูกนำมาแลกเปลี่ยนกันแบบสด ๆ</p><p>เรื่องเหล่านี้ไม่ได้ยากเกินความสามารถ แต่มันแค่ขาดเอกสารอธิบายสำหรับนอกเหนือจากฝั่ง JavaScript เท่านั้น บทความนี้จึงรวบรวมเส้นทางด้านความปลอดภัยและการยืนยันตัวตนฉบับสมบูรณ์สำหรับการพัฒนาแอปพลิเคชัน Shopify แบบฝังตัวด้วย Symfony 7.4 และ PHP 8.5 ซึ่งนำมาจาก StockPilot แอปพลิเคชันจริงที่ผ่านการตรวจสอบบน Shopify App Store และเปิดให้บริการอยู่ในปัจจุบัน โดยทุกชุดโค้ดด้านล่างนี้คือโค้ดสำหรับใช้งานจริง ไม่ใช่เพียงโค้ดจำลอง</p><p>แอปพลิเคชันแบบฝังตัว (Embedded app) คือหน้าเว็บที่แสดงผลอยู่ภายใน admin.shopify.com ผ่าน iframe แบบ cross-origin ในบริบทนี้ Third-party cookies ไม่สามารถใช้งานได้อีกต่อไป ส่งผลให้ PHP session ไม่สามารถใช้งานได้และไม่มีวันใช้งานได้ คำตอบของ Shopify คือ JWT ระยะสั้นที่เรียกว่า Session Token ซึ่งสร้างโดย App Bridge (ไลบรารี JavaScript ของ Shopify ที่โหลดจาก CDN) ในทุก ๆ คำขอ โดยโทเค็นนี้จะมีอายุการใช้งานเพียง 1 นาทีและถูกแนบไปกับทุกคำขอ fetch() ภายในเว็บไซต์</p><p>สถาปัตยกรรมนี้บังคับให้เกิดการแบ่งส่วนที่นักพัฒนา PHP มักจะไม่ค่อยทำโดยปริยาย:</p><ul><li>ส่วนเชลล์ (Shell) และหน้าต่างผู้ดูแลระบบ: ต้องให้บริการอย่างรวดเร็ว, มีการแคชได้ง่าย และไม่ต้องใช้การยืนยันตัวตนในฝั่งเซิร์ฟเวอร์</li><li>ส่วนคำขอ API ของแอป: เป็นส่วนที่ stateless ทั้งหมด และต้องทำการตรวจสอบความถูกต้องของ Session Token ในทุก ๆ คำขอที่เข้ามา</li></ul><p>การแบ่งส่วนนี้ช่วยพลิกสัญชาตญาณดั้งเดิมของ Symfony ที่มักจะป้องกันตัวคอนโทรลเลอร์และเรนเดอร์ข้อมูลจากฝั่งเซิร์ฟเวอร์ โดยในกรณีนี้ การเรนเดอร์ข้อมูลลงในเชลล์จะหมายถึงการยืนยันตัวตนในขณะโหลดหน้าที่ไม่มีข้อมูลประจำตัวใด ๆ ส่งผลให้เชลล์สามารถแคชได้อย่างง่ายดายและมีขอบเขตความปลอดภัยที่ชัดเจนผ่านไฟร์วอลล์เพียงชุดเดียว</p><p>การกำหนดค่าใน config/packages/security.yaml จะมีรูปแบบดังนี้:</p><ul><li>webhooks: ตรวจสอบความถูกต้องผ่านลายเซ็น HMAC ภายในตัวคอนโทรลเลอร์ แทนที่จะใช้ไฟร์วอลล์</li><li>api: สำหรับแอปพลิเคชัน Admin API ที่ฝังตัว ใช้ App Bridge session token บนทุกคำขอแบบ stateless</li><li>main: ตั้งค่าเป็น lazy และใช้ผู้ให้บริการข้อมูลผู้ใช้งานในหน่วยความจำ</li></ul><p>Session Token คือ JWT ที่ลงนามด้วยอัลกอริทึม HS256 โดยใช้ Client Secret ของแอปพลิเคชัน การตรวจสอบลายเซ็นเป็นขั้นตอนที่ทุกคนทำกัน แต่การตรวจสอบ Claim 4 ส่วนหลังจากนั้นมักจะถูกละเลย ซึ่งแต่ละส่วนช่วยปิดช่องโหว่สำคัญ ได้แก่ การตรวจสอบ aud เพื่อป้องกันการยอมรับโทเค็นจากแอปอื่น และการตรวจสอบ iss กับ dest เพื่อป้องกันโทเค็นที่ระบุร้านค้าไม่ตรงกัน</p><div class="ai-insight"><p>การทำความเข้าใจสถาปัตยกรรมความปลอดภัยของ Shopify บนเฟรมเวิร์กอย่าง Symfony ถือเป็นกุญแจสำคัญในการสร้างแอปพลิเคชันที่ผ่านมาตรฐานความปลอดภัยระดับสูงของ App Store การที่ Shopify บังคับใช้ stateless API และการตรวจสอบ JWT อย่างเข้มงวดช่วยป้องกันช่องโหว่ประเภท CSRF และการโจมตีแบบ cross-origin ได้อย่างมีประสิทธิภาพ ซึ่งนักพัฒนา PHP จำเป็นต้องปรับเปลี่ยนแนวคิดจากการใช้เซสชันแบบเดิมมาเป็นการจัดการโทเค็นระยะสั้นแทน</p></div><p>Session Token เป็นเพียงเครื่องยืนยันตัวตนว่าใครกำลังร้องขอข้อมูล แต่ยังไม่เพียงพอต่อการเรียกใช้งาน Admin API โดยคุณจะต้องนำมันไปแลกเปลี่ยนเป็น Access Token ผ่านมาตรฐาน OAuth 2.0 token exchange (RFC 8693) แทนการใช้งาน authorization-code แบบเดิมที่มีการเปลี่ยนเส้นทาง (Redirect) ด้วยระบบติดตั้งแบบจัดการเองนี้ จะทำให้ขั้นตอนการติดตั้งทั้งหมดไม่มีเส้นทาง /auth, ไม่มีหน้าเปลี่ยนเส้นทาง และไม่มี callback โดยคำขอแรกที่ผ่านการยืนยันตัวตนจากร้านค้าใหม่จะทำการแลกเปลี่ยนโทเค็นทันที</p><p>ในส่วนของ Webhooks จะไม่มีการแนบ Session Token มาด้วย แต่จะใช้การลงนามแบบ HMAC-SHA256 บนเนื้อหาคำขอแบบดิบ (Raw request body) และเข้ารหัส base64 ไว้ในเฮดเดอร์ X-Shopify-Hmac-Sha256 โดยคำว่าดิบหมายถึงข้อมูลก่อนผ่านการแปลงเป็น JSON หรือมิดเดิลแวร์ใด ๆ ทั้งสิ้น ซึ่งการตรวจสอบในส่วนนี้สำคัญมากเพราะการตรวจสอบอัตโนมัติของ Shopify App Store จะส่งเว็บฮุกที่จงใจใส่ลายเซ็นผิดมาทดสอบและต้องการผลลัพธ์เป็นรหัส 401</p><p>นอกจากนี้ยังมีข้อกำหนดด้าน Content Security Policy (CSP) ในส่วนของ frame-ancestors ที่ต้องถูกคำนวณแบบรายคำขอจากพารามิเตอร์ของร้านค้า และข้อกำหนดที่สำคัญอีกข้อที่มักมองข้ามในเลย์アウトแบบ Twig คือ App Bridge จะต้องเป็นสคริปต์แรกในแท็ก &lt;head&gt; ที่โหลดแบบ synchronous จาก CDN ของ Shopify โดยห้ามทำการมัดรวม (bundle) หรือเลื่อนการโหลด (defer) เด็ดขาด</p><p>บทความต้นฉบับยังได้ยกตัวอย่างปัญหาชวนปวดหัวในระบบแปลภาษาของ Symfony เมื่อข้อความหัวอีเมลอย่างเช่น digest.attachment : ' Attached: your restock list (%count% items).' ถูกตัดคำสองคำแรกออกอย่างไร้ร่องรอยในระบบจริง เนื่องจาก %count% เป็นตัวเลข ทำให้ข้อความถูกส่งผ่านลอจิกการทำพหูพจน์ของ Symfony และตรงกับเงื่อนไขการตรวจจับข้อความที่มีเครื่องหมายโคลอน ทำให้คำนำหน้าถูกกลืนหายไปโดยไม่มีการบันทึก Log หรือแจ้งข้อผิดพลาดใด ๆ บทเรียนสำคัญจากเหตุการณ์นี้คือ อย่าให้ข้อความที่มีตัวแปร %count% ขึ้นต้นด้วยคำที่มีเครื่องหมายโคลอนตามหลัง และควรเขียนชุดทดสอบที่ตรวจสอบสตริงตั้งแต่ตัวอักษรแรกเสมอ</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/mollenthiel/building-an-embedded-shopify-app-in-symfony-session-tokens-token-exchange-and-the-parts-nobody-438g" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>Developers using languages other than Node face unique challenges handling embedded apps inside iframes.</li><li>Embedded Shopify apps cannot use PHP sessions, relying instead on short-lived JWT session tokens valid for one minute.</li><li>Token exchange utilizes the OAuth 2.0 token exchange standard (RFC 8693) instead of traditional authorization-code flows.</li><li>This guide features production-grade code from StockPilot, a live app running on Symfony 7.4 and PHP 8.5.</li></ul></div><p>Shopify's official application documentation notoriously provides one primary, first-class path utilizing Node, the official CLI, and a Remix template that handles authentication automatically. Choosing any alternative programming language means stepping off the paved path immediately, primarily because all critical interactions occur before your framework's router ever processes the incoming request. The application operates inside an iframe within the Shopify admin dashboard, preventing browsers from issuing cookies in that context, while required Admin API tokens must be acquired dynamically on the fly.</p><p>None of these implementation steps are inherently difficult; rather, comprehensive documentation simply does not exist outside the JavaScript ecosystem. This publication outlines the complete authentication and security workflow for an embedded Shopify application built on Symfony 7.4 and PHP 8.5, extracted directly from StockPilot—a live application that successfully cleared Shopify's App Store review process. Every code snippet provided below represents actual production code rather than conceptual sketches.</p><p>An embedded application resides directly within admin.shopify.com inside a cross-origin iframe architecture. Because third-party cookies are entirely deprecated in this environment, traditional PHP sessions are unavailable and will remain permanently inaccessible. Shopify addresses this constraint through a short-lived JSON Web Token known as a session token. App Bridge, Shopify's JavaScript library served via their CDN, generates one token per request with a one-minute expiration window, automatically appending it to every same-origin fetch() request executed by the page.</p><p>This mechanism necessitates a structural separation that most PHP developers do not implement by default:</p><ul><li>The application shell and admin UI: Designed for high-speed delivery, simple caching, and zero server-side authentication overhead.</li><li>The application API requests: Fully stateless endpoints requiring session token verification on every single incoming request.</li></ul><p>This architectural split intentionally inverts standard Symfony instincts, which typically dictate securing controllers and rendering data on the server side. In this environment, server-side data rendering inside the shell would require authenticating a page load completely devoid of valid credentials. The resulting advantage is a trivially cacheable shell backed by a clean security surface consisting of a single firewall managing one path prefix.</p><p>Security configurations within config/packages/security.yaml follow this precise structure:</p><ul><li>webhooks: Authenticators verify HMAC signatures directly within controllers rather than utilizing firewall rules.</li><li>api: Handles embedded admin API requests by validating App Bridge session tokens as stateless connections.</li><li>main: Configured as lazy with user providers stored directly in memory.</li></ul><p>The session token operates as an HS256-signed JWT utilizing the application's client secret. While verifying cryptographic signatures represents standard practice, subsequent claim validation steps are frequently omitted despite closing critical security vulnerabilities. Omitting audience (aud) validation accepts tokens minted for unrelated applications sharing the same algorithm, whereas ignoring issuer and destination (iss / dest) validation permits mismatched shop credentials.</p><div class="ai-insight"><p>Mastering Shopify's security architecture within an enterprise framework like Symfony is crucial for maintaining compliance with strict App Store guidelines. By enforcing stateless APIs and rigorous JWT validation, developers effectively eliminate common vulnerabilities such as Cross-Site Request Forgery (CSRF) and cross-origin attacks, bridging the gap between traditional PHP session management and modern token-based architectures.</p><p>Furthermore, understanding edge cases like translation engine parsing rules prevents silent failures in production environments, highlighting the importance of thorough end-to-end testing.</p></div><p>A session token merely establishes the identity of the requester but does not grant direct access to the Admin API. To acquire API access, the session token must be traded for an access token via OAuth 2.0 token exchange (RFC 8693), bypassing legacy authorization-code redirect flows entirely. With managed installations, this approach streamlines the installation sequence completely, eliminating dedicated /auth routes, redirection loops, and callback endpoints. The initial authenticated request from a newly installed shop triggers the exchange immediately.</p><p>Webhooks operate independently of session tokens, relying instead on cryptographic signatures. Specifically, Shopify calculates an HMAC-SHA256 signature over the raw request body, base64-encoded within the X-Shopify-Hmac-Sha256 header. Raw data processing must occur prior to any JSON decoding or middleware interaction. Automated Shopify App Store reviews explicitly test this requirement by dispatching intentionally corrupted signatures, expecting a strict HTTP 401 response.</p><p>Additional production requirements include scoped frame-ancestors Content Security Policies calculated per request using shop parameters, alongside critical App Bridge placement rules. App Bridge must load synchronously as the absolute first script inside the &lt;head&gt; tag directly from Shopify's CDN, prohibiting bundling, deferral, or asynchronous loading on embedded pages.</p><p>Production environments can also reveal subtle framework quirks, such as Symfony translation issues where subject lines like digest.attachment : ' Attached: your restock list (%count% items).' unexpectedly truncated their initial words. Because %count% evaluates as a numeric value, Symfony routes the string through pluralization logic containing regular expressions matching explicit-interval syntax, treating introductory words followed by colons as rule definitions without throwing errors or generating logs. The primary takeaway involves avoiding colon-prefixed phrasing directly adjacent to count variables and ensuring test suites assert strings starting from their exact initial character.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/mollenthiel/building-an-embedded-shopify-app-in-symfony-session-tokens-token-exchange-and-the-parts-nobody-438g" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_shopify-symfony-token-exchange-php-mscepz7l.jpg

small_shopify-symfony-token-exchange-php-mscepz7l.jpg

thumbnail_shopify-symfony-token-exchange-php-mscepz7l.jpg

shopify-symfony-token-exchange-php-mscepz7l.jpg

เจาะลึกวิธีการพัฒนาแอปพลิเคชัน Shopify แบบ Embedded บน Symfony 7.4 และ PHP 8.5 ตั้งแต่การจัดการ Session Token, Token Exchange ไปจนถึงส่วนที่เอกสารทางการไม่ค่อยพูดถึง

A deep dive into developing embedded Shopify applications using Symfony 7.4 and PHP 8.5, covering session tokens, token exchange, and undocumented PHP challenges.

สร้างแอป Shopify ฝังตัวด้วย Symfony: คู่มือเจาะลึกความปลอดภัยและ Token Exchange ใน PHP

Building an Embedded Shopify App in Symfony: Token Exchange and PHP Security

<div class="key-takeaways"><ul><li>การย้ายจาก Ingress สู่ Gateway API เปลี่ยนแปลงวิธีจัดการทราฟฟิกใน Kubernetes</li><li>Gateway API ใช้สถาปัตยกรรมแยกส่วนช่วยลดข้อจำกัดแบบเดิม</li><li>ความท้าทายหลักคือช่องว่างทางความรู้และเครื่องมือที่ยังอยู่ในช่วงเริ่มต้น</li><li>การร่วมมือกันในคอมมูนิตี้และ Open-source เป็นกุญแจสำคัญสู่ความสำเร็จ</li></ul></div><p>ระบบนิเวศของ Kubernetes กำลังเผชิญกับการเปลี่ยนแปลงครั้งสำคัญ โดยมี API เครือข่ายเป็นตัวขับเคลื่อน หัวใจหลักของการเปลี่ยนแปลงนี้คือการย้ายจาก Ingress ไปยัง Gateway API ซึ่งสะท้อนถึงการปรับเปลี่ยนวิธีจัดการทราฟฟิก การกระจายโหลด และการเปิดให้บริการ สำหรับวิศวกรแพลตฟอร์ม การทำความเข้าใจการย้ายระบบนี้มีความสำคัญอย่างยิ่งต่อการรักษาประสิทธิภาพและความเกี่ยวข้องในสภาพแวดล้อมที่ซับซ้อนขึ้น</p><p>แม้ Ingress API จะเป็นรากฐานสำคัญ แต่ก็มีข้อจำกัดในด้านความยืดหยุ่น การออกแบบแบบโมโนลิทิกทำให้ยากต่อการรองรับสภาพแวดล้อมแบบไดนามิกหรือหลายคลัสเตอร์ ในทางตรงกันข้าม Gateway API นำสถาปัตยกรรมแบบแยกส่วนมาใช้ โดยแบ่งทรัพยากร Ingress ออกเป็นคอมโพเนนต์ย่อย เช่น Gateways, HTTPRoutes และ TCPRoutes ช่วยลดข้อขัดแย้งในการกำหนดค่าและทำให้การปรับขนาดเป็นอิสระต่อกัน</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/kubernetes_ingress_gateway_api_mscep23b_inline_1_0abda171f8.jpg" alt="kubernetes network topology diagram" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><div class="ai-insight"><p>การเปลี่ยนผ่านนี้ไม่ใช่แค่การอัปเดตไฟล์คอนฟิกูเรชัน แต่เป็นการย้ายจากแนวคิดแบบรวมศูนย์ (Monolithic) ไปสู่ระบบกระจายตัว (Distributed System) คล้ายกับการเปลี่ยนจากระบบทางหลวงที่มีจุดควบคุมเดียว ไปสู่ทางด่วนที่มีแยกเฉพาะทาง ทำให้การซ่อมแซมหรือทดสอบฟีเจอร์ใหม่ๆ ทำได้โดยไม่กระทบระบบส่วนรวม</p></div><p>อย่างไรก็ตาม การย้ายระบบย่อมมาพร้อมความท้าทาย เนื่องจาก Gateway API ยังอยู่ในช่วงเริ่มต้น เอกสารและเครื่องมือต่างๆ ยังคงพัฒนา ทำให้เกิดช่องว่างทางความรู้ นอกจากนี้ การละเลยไม่ยอมอัปเดตอาจทำให้องค์กรพลาดโอกาสในการใช้งานความสามารถขั้นสูง เช่น การทำ traffic mirroring หรือ canary deployments ซึ่งอาศัยการควบคุมทราฟฟิกแบบละเอียดจาก Gateway API</p><p>การร่วมมือกันในคอมมูนิตี้โอเพนซอร์สจึงเป็นสิ่งจำเป็น การมีส่วนร่วมในฟอรัมและการแบ่งปันกรณีศึกษาช่วยเร่งการเรียนรู้และแก้ไขปัญหาเรื่องระบบเดิมที่ไม่รองรับได้อย่างมีประสิทธิภาพ สรุปแล้ว การย้ายระบบครั้งนี้ถือเป็นทั้งภารกิจทางเทคนิคและวัฒนธรรมองค์กรที่คุ้มค่าแก่การลงทุนเพื่อโครงสร้างพื้นฐานที่พร้อมสำหรับอนาคต</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/alitron/kubernetes-migration-seeking-guidance-and-collaboration-for-ingress-to-gateway-api-transition-5bo4" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>Kubernetes networking is shifting from Ingress to Gateway API</li><li>Gateway API introduces a modular architecture to replace monolithic pipelines</li><li>Early-stage tooling and knowledge gaps present adoption challenges</li><li>Open-source community collaboration is essential for smooth migration</li></ul></div><p>The Kubernetes ecosystem is undergoing a pivotal transformation, with networking APIs driving this evolution. Central to this shift is the migration from Ingress to the Gateway API, representing a fundamental change in how Kubernetes manages traffic routing, load balancing, and service exposure. For platform engineers, mastering this migration is essential to maintaining relevance in an increasingly complex landscape.</p><p>The Ingress API, while foundational, exhibits inherent limitations in flexibility. Its monolithic design struggles to support dynamic or multi-tenant environments due to tightly coupled routing rules. In contrast, the Gateway API introduces a modular architecture that decouples these elements into discrete components such as Gateways, HTTPRoutes, and TCPRoutes, enabling finer-grained control and independent scaling.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/kubernetes_ingress_gateway_api_mscep23b_inline_1_0abda171f8.jpg" alt="kubernetes network topology diagram" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><div class="ai-insight"><p>This transition transcends a mere technical upgrade; it mirrors the shift from a single-control-panel highway to a distributed network of specialized lanes. Understanding this architectural divergence helps engineers grasp why advanced testing methods like traffic mirroring require a decoupled framework rather than hacking into a monolithic Ingress resource.</p></div><p>Despite its advantages, the migration presents significant challenges. The Gateway API remains in its early stages with evolving documentation, creating knowledge gaps for engineers. Delaying adoption risks organizational obsolescence, as failure to migrate can lead to suboptimal traffic routing, limited scalability, and missed opportunities for modern innovations like canary deployments.</p><p>Community collaboration is indispensable for overcoming these hurdles. Open-source projects and active participation serve as critical repositories of knowledge, helping engineers tackle legacy integration challenges. Ultimately, this migration demands a cultural shift toward modularity, rewarding organizations with a flexible, future-proof Kubernetes infrastructure.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/alitron/kubernetes-migration-seeking-guidance-and-collaboration-for-ingress-to-gateway-api-transition-5bo4" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_kubernetes-ingress-gateway-api-mscep23b.jpg

small_kubernetes-ingress-gateway-api-mscep23b.jpg

thumbnail_kubernetes-ingress-gateway-api-mscep23b.jpg

kubernetes-ingress-gateway-api-mscep23b.jpg

ก้าวสำคัญของวิศวกรแพลตฟอร์มในการเปลี่ยนผ่านสถาปัตยกรรมเครือข่าย Kubernetes ไปสู่ระบบแบบแยกส่วน

A crucial shift for platform engineers moving from monolithic Ingress to a modular Gateway API architecture in Kubernetes.

เจาะลึกการย้ายระบบ Kubernetes จาก Ingress สู่ Gateway API

Kubernetes Migration: Navigating the Ingress to Gateway API Transition

<p>ข่าวสารสำหรับนักพัฒนา เทคนิคการเขียนโปรแกรม และเทรนด์ในวงการซอฟต์แวร์</p>

Inewgen

Inewgen

Developer

Why Players Leave Before Your Game Starts: Real Data From a Live Portal

Inewgen

Crafting Georgian Khachapuri Cheese Bread in Pure CSS

Inewgen

EU AI Act Article 50: What the 2026 Transparency Rules Mean for AI Teams

Inewgen

Stop Prompt Engineering, Start Context Engineering

Inewgen

4 hours lost to a trailing slash: what shipping multilingual SEO actually looks like

Inewgen

Why AI Validation Must Be Your Core Foundation From Day One

Inewgen

Building an Embedded Shopify App in Symfony: Token Exchange and PHP Security

Inewgen

Kubernetes Migration: Navigating the Ingress to Gateway API Transition

Inewgen

Popular Category