Web

เปลี่ยนชื่อไฟล์รูป 1,707 ไฟล์เป็นภาษาไทยเพื่อ SEO โดยไม่ทำลิงก์พัง
รูปแกลเลอรีทั้งเว็บชื่อเป็นรหัสสุ่มไม่มีความหมาย เครื่องมือค้นหาอ่านไม่ออกสักไฟล์ บทความนี้เล่าการเปลี่ยนชื่อไฟล์ 1,707 ไฟล์เป็นภาษาไทยพร้อมอัปเดตทุกที่ที่อ้างถึงในทรานแซกชันเดียว และกับดักที่กินเวลาหนึ่งวันเต็มคือ curl ยิงพาธไทยดิบได้ 400 ทั้งที่เบราว์เซอร์เปิดได้ปกติ

ต่อ Open API ธนาคารออก QR รับเงิน — จาก sandbox ถึงวงจรสถานะ
QR พร้อมเพย์แบบ static ที่ประกอบเองได้ ติดตรงไม่มีใครบอกเราว่าลูกค้าจ่ายหรือยัง บทความนี้ไล่การต่อ Open API ของธนาคารใน sandbox ตั้งแต่ขอ token ออก QR แบบ dynamic อ่านวงจรสถานะ REQUESTED/PAID/CANCELLED/VOIDED ไปจนถึงกับดัก requestDt ที่ทำให้ยิงไม่ผ่านทั้งที่ payload ถูกหมด

ย้ายเว็บ .aspx เก่าทั้งเว็บ ทำเป็น catalog JSON แล้วคัดรูปขยะออกเอง
เจ้าของเว็บ .aspx เก่าขอให้ทำเว็บใหม่ แต่เนื้อหาสิบกว่าปีอยู่ในฐานข้อมูลที่เข้าไม่ถึงแล้ว ผมเลยไล่เก็บหน้าเว็บของเขาเองมาทำเป็น catalog JSON ที่คง legacy_id ไว้ทั้งหมด แล้วเขียนตัวคัดรูปสามชั้นกันไม่ให้ QR ของแถมกลายเป็นรูปปกบทความ

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

Build APM บน Windows: สารบัญ ทำ Apache + PHP 8.4 + MariaDB เอง
ซีรีส์ 7 ตอนพาคอมไพล์ Apache 2.4.69, PHP 8.4.27 และ MariaDB 11.8.9 บน Windows 11 จาก source เอง ให้เวลาที่ PHP ออกแพตช์ความปลอดภัย แก้เลขเวอร์ชันในไฟล์เดียวแล้ว build ใหม่ได้ภายในวัน หน้านี้คือสารบัญ ภาพรวม เวลา ดิสก์ และทางลัดสามคำสั่ง

Build APM บน Windows ตอนที่ 7: Deploy รัน และอัปเดต security patch
ตอนจบของซีรีส์ build Apache + PHP + MariaDB บน Windows ติดตั้งลง C:\APM สตาร์ตครั้งแรกและทดสอบ เปิดให้เครื่องใน LAN เข้าแบบปลอดภัย เล่าบั๊กจริงหกตัว (PidFile, plugin MariaDB, พอร์ต DB, ASLR 500, พาธมีช่องว่างและวงเล็บ) และขั้นตอนอัปเดตเวลามี security release ใหม่

Build APM บน Windows ตอนที่ 6: build PHP 8.4 พร้อม redis imagick
ตอนที่ 6 ของซีรีส์ build Apache + PHP + MariaDB บน Windows จาก source พาไล่ 30-php.ps1 ทีละขั้น ตั้งแต่ php-sdk คำสั่ง configure ทั้งเส้น การคัดลอก DLL จนถึงทดสอบ JIT, redis และ imagick ว่าใช้ได้จริง

Build APM บน Windows ตอนที่ 5: คอมไพล์ ImageMagick 7 ให้ PHP imagick
ตอนที่ 5 ของซีรีส์ Build APM บน Windows พาคอมไพล์ ImageMagick 7.1.2-34 กับ delegate library ราว 40 ตัวจาก source ด้วย toolchain ทางการ พร้อมแพตช์ channel mask 64 เป็น 32 ที่ทำให้ imagick build ผ่าน และเหตุผลที่ HEIC เขียนไม่ได้

Build APM บน Windows ตอนที่ 4: คอมไพล์ MariaDB 11.8 LTS เอง
ตอนที่ 4 ของซีรีส์ Build APM บน Windows พาคอมไพล์ MariaDB 11.8.9 จาก source ด้วย CMake และ Ninja ทีละขั้น ตั้งแต่เตรียมเครื่องมือ รันสคริปต์ ทดสอบบนพอร์ต 3399 ไปจนถึงเหตุผลที่ต้องล็อก collation เป็น utf8mb4_unicode_ci

Build APM บน Windows ตอนที่ 3: build Apache httpd 2.4.69 ด้วย CMake
build APR, APR-util, httpd 2.4.69 และ mod_fcgid ด้วย CMake กับ Ninja บน Windows อธิบายทุก option ว่าใส่ทำไม ไล่ DLL ที่ต้องวางข้าง httpd.exe ด้วย dumpbin ดักไม่ให้ลิงก์ DLL ตัว debug แล้วทดสอบ config ด้วย httpd -t

Build APM บน Windows ตอนที่ 2: ดึง source และ lib ด้วย vcpkg
ขั้นที่ 1 และ 2 ของการ build Apache เองบน Windows อ่านสคริปต์ 00-fetch.ps1 กับ 10-deps-vcpkg.ps1 ทีละบรรทัด ตรวจ sha256 ของ source ทุกตัว แล้วให้ vcpkg build OpenSSL 3.5 LTS กับ lib อีก 8 ตัวจาก source พร้อมคำสั่งตรวจผลทุกขั้น

Build APM บน Windows ตอนที่ 1: เตรียมเครื่องมือและแตก build kit
ตอนแรกของซีรีส์ build Apache + PHP 8.4 + MariaDB เองบน Windows ติดตั้ง Visual Studio 2022 Build Tools พร้อม component ที่จำเป็น Git CMake Ninja PowerShell 7 ตั้ง Defender แตก build kit ลง C:\apm-build แล้วไล่ดูโฟลเดอร์ versions.json และสคริปต์ lib.ps1 กับ build-all.ps1 ทีละบรรทัด

ทำแอปคุมเพจผ่าน Graph API สามปลายทางที่ลืมแล้วไม่ผ่านรีวิว
งานที่ต้องให้ระบบหลังบ้านอ่านและตอบข้อความของเพจได้เอง ทางที่ถูกต้องมีทางเดียวคือทำแอปแล้วผ่านรีวิวของแพลตฟอร์ม บทความนี้คือสามปลายทางที่แพลตฟอร์มบังคับให้มีแต่คนลืมกันจนตกรีวิว การตรวจลายเซ็นคำขอที่ส่งมาให้ถูกวิธี และขั้นตอนแลกโทเคนสั้นเป็นโทเคนเพจที่เก็บนอกรากเว็บ

ฟอร์มแจ้งปัญหาบนเว็บ static ที่ไม่มีแบ็กเอนด์สักตัว
เว็บคำนวณที่เป็นไฟล์นิ่งล้วน ไม่มีเซิร์ฟเวอร์ให้รับฟอร์ม แต่ยังต้องมีช่องให้คนใช้แจ้งว่าสูตรผิดตรงไหน บทความนี้คือเส้นทางเดียวที่ผมเลือกใช้ คือ worker ไฟล์เดียวที่รับ POST เส้นทางเดียว ตรวจ Turnstile ฝั่งเซิร์ฟเวอร์ด้วยไอพีจริง รับรูปที่ผู้ใช้กดวางจากคลิปบอร์ด แล้วยิงเมลออกจากขอบเครือข่าย พร้อมกับดักสามอย่างที่กินเวลาผมไปทั้งคืน

เว็บสองภาษา 26 หน้า ทำไมต้องกลายเป็น .php แล้วลิงก์พังทั้งเว็บ
หน้าโปรดักชันโชว์แท็ก PHP เป็นตัวหนังสือดิบ เพราะเว็บเซิร์ฟเวอร์เสิร์ฟ .html เป็นไฟล์ static พอเปลี่ยนทั้ง 26 หน้าเป็น .php ลิงก์ก็พังทั้งเว็บ แล้วพอทำ clean URL ต่อหน้าย่อยก็เด้งกลับเป็น .php เพราะ rewrite กับ 301 ทำครึ่งเดียว บทความนี้คือ .htaccess เต็ม กติกา $base แปดกรณี และสคริปต์ที่ทำทีเดียวทั้งเว็บ

แบนเนอร์คุกกี้ที่กั้นได้จริง โหลด GTM กับ GA4 หลังกดยอมรับเท่านั้น
แบนเนอร์คุกกี้ส่วนใหญ่ขึ้นมาสวยแต่ไม่ได้กั้นอะไร เพราะ GTM กับ GA4 ถูกโหลดไปตั้งแต่บรรทัดแรกของหน้าแล้ว บทความนี้คือโครงที่โหลด container เมื่อกดยอมรับเท่านั้น วาง GA4 เป็นแท็กข้างใน GTM กันนับซ้ำ ซ่อนช่อง AdSense ไว้ก่อน และตัวตรวจที่นับ request ปลายทางให้เป็นศูนย์

หน้าเว็บว่างเปล่า ไม่มี error สักบรรทัด เพราะตั้งชื่อฟังก์ชันว่า top
deploy ขึ้นไปแล้วหน้าว่าง ไม่มี error ในล็อก ไม่มีอะไรผิดใน node --check แต่เบราว์เซอร์ฆ่าทั้งสคริปต์ตั้งแต่บรรทัดแรกเพราะมีฟังก์ชันชื่อ top ไปชนกับ window.top พร้อมรายชื่อที่ต้องเลี่ยง กับดักลำดับการโหลดสคริปต์ และด่านตรวจด้วย Playwright ที่ควรมีทุกโปรเจกต์

รูปไม่โหลดในหน้าที่ซ่อนด้วย display:none เฉพาะบนมือถือ
หน้าเว็บแบบสลับหน้าด้วย display:none พอกดเปิดหน้าใหม่บนมือถือแล้วรูปดำเปล่า ทั้งที่ไฟล์คืน 200 และ fetch กับ new Image สำเร็จทั้งคู่ ตัวจริงคือ IntersectionObserver ของ loading=lazy ที่ไม่ยิงตอนหน้าเปลี่ยนจาก none เป็น block และการตั้ง loading=eager เฉย ๆ ก็ยังไม่พอ