ทำงานยังไง?

เว็บนี้คืออะไร

หน้าเว็บนี้เป็น พิพิธภัณฑ์อินเทอร์เน็ตไทยยุค hi5/GeoCities แบบ interactive — จำลองหน้า "โฮมเพจส่วนตัว" แบบที่วัยรุ่นไทยทำเล่นกันช่วงต้นถึงกลางยุค 2000 ครบทุก artifact เท่าที่จะรวมได้ในหน้าเดียว ตั้งใจให้คนอายุ 30 ปีขึ้นไปเห็นแล้วคิดถึง และให้คนรุ่นหลังได้เห็นว่าอินเทอร์เน็ตไทยยุคก่อนโซเชียลมีเดียหน้าตาเป็นแบบไหน

เมย์คือใคร (fictional persona disclosure)

"น้องเมย์ ม.4" เป็นตัวละครสมมติ 100% สร้างขึ้นเพื่อเป็นเจ้าของโฮมเพจจำลองในเว็บนี้เท่านั้น ไม่ได้อิงชื่อ รูป ข้อมูล หรือเรื่องราวของบุคคลจริงคนใดคนหนึ่ง Guestbook, Shoutbox, และผลแบบทดสอบทั้งหมดที่ปรากฏบนเว็บก็เป็นข้อมูลตัวอย่างที่สร้างไว้ล่วงหน้าหรือเก็บไว้เฉพาะในเบราว์เซอร์ของผู้ใช้แต่ละคนเอง (localStorage) ไม่มีการส่งข้อมูลจริงของใครไปเก็บที่เซิร์ฟเวอร์ไหนทั้งสิ้น

แรงบันดาลใจ

อ้างอิงจากความทรงจำร่วมของยุคเว็บส่วนตัว/hi5/GeoCities/Exteen ในไทยช่วงปี 2003-2008: sparkle cursor, พื้นหลังลายดาว, ตัวหนังสือกากเพชร, ข้อความวิ่ง, ป้าย Under Construction กะพริบ, เพลงประจำเว็บที่เล่นเอง, Guestbook/Shoutbox, แบบทดสอบเพื่อนแท้, ลิงก์ MSN/Ragnarok/Pantip, มุมดูดวง และ badge "Best viewed 800×600" — ทุกอย่างคือของที่เคยมีจริงในเว็บยุคนั้น แต่ไม่มีชิ้นไหนก็อปมาจากเว็บจริงเว็บใดเว็บหนึ่งโดยตรง

ทุกอย่างสร้างใหม่ทั้งหมด

ตามกติกาของโปรเจกต์ในชุด project-365: ห้ามใช้ asset จากภายนอก ไม่ว่าจะเป็นรูปภาพ, GIF, หรือไฟล์เพลง ทุกเอฟเฟกต์ในเว็บนี้จึงสร้างขึ้นใหม่ทั้งหมดด้วย CSS/SVG/canvas/Web Audio ล้วนๆ:

• Sparkle cursor — DOM particle เกิดตามตำแหน่งเมาส์ วาดด้วยตัวอักษร Unicode (✦✧★☆) แล้วจางหายด้วย CSS animation ไม่ใช้ GIF
• พื้นหลังลายดาว — ซ้อน radial-gradient หลายชั้นแล้ว tile ซ้ำด้วย background-size จำลองลาย GIF tile ของยุคนั้นโดยไม่ใช้ไฟล์ภาพจริง
• ข้อความวิ่ง — ทำด้วย CSS @keyframes เลื่อน transform: translateX (ไม่ใช้แท็ก <marquee> ของจริง เพราะเบราว์เซอร์สมัยใหม่เลิกรองรับแล้ว) แต่หน้าตาวิ่งเหมือนต้นฉบับ
• ตัวหนังสือกากเพชร — ไล่สีรุ้งด้วย background-clip: text แล้ววนลูปตำแหน่ง gradient
• เพลงประจำเว็บ — ทำนอง 8-bit แต่งเองสดๆ (ไม่ใช่เพลงลิขสิทธิ์ใดๆ) เก็บเป็นข้อมูลโน้ต/จังหวะใน lib/chiptune.ts แล้วสังเคราะห์เสียงด้วย Web Audio API (oscillator คลื่นสี่เหลี่ยม) สดๆ ในเบราว์เซอร์ ต้องกดปุ่มเล่นเองเสมอ (เบราว์เซอร์ยุคนี้บล็อก autoplay เสียงเป็นค่าเริ่มต้น — เว็บนี้เลยแซวธรรมเนียม autoplay ของยุค 2004 ผ่านปุ่มที่ต้อง "กดเอง")
• Badge "Best viewed 800×600" — วาดเป็น SVG เอง ไม่ใช้ภาพ badge จากเว็บไหน

โหมดพิพิธภัณฑ์ (🏛)

กดปุ่ม 🏛 มุมขวาบนเพื่อเปิดโหมดพิพิธภัณฑ์ — ทุก artifact บนหน้าเว็บจะมีปุ่มเล็กๆ 🏛 ให้กดเปิดการ์ดอธิบาย "สิ่งนี้คืออะไร / ทำไมยุคนั้นทำแบบนี้ / ทำไมมันตาย" ข้อมูลทั้งหมดมาจากทะเบียน annotation ใน lib/annotations.ts (16 รายการ ผ่านการ validate ว่า id ไม่ซ้ำและข้อความครบทุกฟิลด์ด้วย Vitest) นี่คือชั้นการเรียนรู้ที่ซ่อนอยู่ใต้มุกตลกของหน้าเว็บ

Guestbook/Shoutbox ไม่มี backend จริง

ข้อความที่ฝากไว้ในสมุดเยี่ยมและ Shoutbox ของเว็บนี้ถูกเก็บไว้ เฉพาะในเบราว์เซอร์ของคุณ ผ่าน localStorage เท่านั้น ไม่มีเซิร์ฟเวอร์เก็บข้อมูลจริง และคนอื่นจะไม่เห็นข้อความที่คุณฝากไว้ (ของจริงในยุค 2004 อย่าง Bravenet/Dreambook จะมีเซิร์ฟเวอร์กลางเก็บให้ทุกคนเห็นข้อความเดียวกัน)

สแต็กเทคนิค

Next.js 15 (static export, output: "export"), TypeScript, Vitest สำหรับทดสอบ logic layer (lib/annotations.ts, lib/counter.ts, lib/quiz.ts, lib/chiptune.ts) ไม่มี runtime dependency นอกจาก React/Next เอง ไม่มี service worker เพจ parody นี้จงใจใช้ <table> layout ในบางส่วน (ดูมุม "ลิงก์เพื่อนๆ ของเมย์" พร้อมการ์ด museum อธิบายว่าทำไม) แต่ปุ่มที่กดได้ทุกปุ่มยังเป็น <button> ที่ styled แบบ 2004 เพื่อให้ยังใช้งานได้จริงและเข้าถึงได้