Feb 15, 2024

เว็บนี้เกิดขึ้นมาได้ยังไง

เรายังจำตอนที่ฝึกงานปีที่แล้วได้ชัดเจน ความรู้ของเราเป็นศูนย์ พอคิดไปคิดมาก็ไม่ซะทีเดียว เราเคยเขียนเว็บเพจโดยใช้ HTML กับ CSS มาก่อนจะไปฝึกงาน แม้ตอนนั้นจะยังใช้ทำงานจริงๆ ไม่ได้ก็เถอะ

หนึ่งปีสองสามเดือนผ่านไปไวเหมือนโกหก ข้ามมาที่วันธรรมดาๆ วันนึงในออฟฟิศ เราเปิดแล็ปท็อปที่ทำงานหายูทูปดูเพื่อ ‘เปลี่ยนบริบท’ มีวิดีโอนึงของ ThePrimeagen ที่แกอ่านบทความเกี่ยวกับคนที่เปลี่ยนจาก Neovim ไปใช้ VSCode คอนเทนต์ดีนะครับ และเราก็ดันชอบธีมที่เจ้าของเว็บใช้ด้วย มากจนต้องอีเมลไปถามว่าใช้ธีมอะไร แล้วก็แง้มๆ บอกไปด้วยว่าเรากำลังทำบล็อก และเว็บของเขาเป็นหนี่งในแรงบันดาลใจด้านดีไซน์ของบล็อกเราอีกต่างหาก

🧠 แนวคิดของเรา

เราอยากได้บล็อกหน้าตาง่ายๆ ใช้สีสองสามสี เป็นเว็บหน้าตาสะอาดสะอ้าน มีพื้นที่หายใจเยอะๆ ฟีเจอร์ก็เอาที่สำคัญๆ อย่าง section รวมบล็อก (แหงล่ะครับ) ช่องทางติดต่อ หน้าเพจแนะนำตัว นอกจากนี้เรายังอยากสร้างเว็บโดยเน้นประสิทธิภาพเป็นสำคัญ มันเป็นเรื่องที่เราไม่ได้เรียนและใช้ตอนฝึกงานมากเท่าไหร่ ก็เลยเลือกใช้ CSS ปกติไม่ปรุงแต่งกับ JavaScript นิดหน่อย

เราได้ inspirations มาหลายที่ ซึ่งมี Tiny Projects, Guy Torbet, nexxel.dev (คนที่เราอีเมลไปถามชื่อธีม VSCode), Shu Ding (แรงบันดาลใจหลัก), แม้กระทั่ง Even Better Mother Fucking Website และ bearblog.dev.

พูดถึง bearblog.dev แล้ว แม้ว่าตัวแพลตฟอร์มจะค่อนข้างครบตามที่เราต้องการแล้ว เราก็ยังอยากควบคุมบล็อกของตัวเองมากกว่า หากวันนึงเราจะหาทำอะไรเล่นๆ กับมัน เราอยากเรียนรู้ทุกขั้นตอนตั้งแต่เริ่มเขียนไปจนถึง deploy เว็บไซต์เอง

💻 ลงมือโค้ด

เราก็เริ่มเลย! ตอนแรกเราคิดว่าจะใช้ Astro ควบคู่ไปกับ Svelte แต่พอเห็นอัปเดต Astro เวอร์ชั่น 3 ที่ออฟฟิศ เราก็ทิ้ง Svelte ใช้แต่ Astro อย่างเดียว ตามเทรนด์ล่ะมั้ง

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

เรามีแค่แล็ปท็อปเครื่องเดียว แต่กระนั้นก็ไม่มีอะไรห้ามไม่ให้เราทำเว็บไซต์ได้

🚧 อุปสรรค

แน่นอนว่ามันจะต้องเป็นทั้งงานและการเรียน เพราะสถานการณ์ของเรายากที่จะหาใครปรึกษา เราไม่ได้ทำงานพาร์ทไทม์ที่เซเว่น แต่เราเอาตัวเองเข้าไปอยู่ในสภาพแวดล้อมการทำงานเป็น developer จริงๆ ในฐานะเด็กฝึกงานคนเดียวของแผนก ณ ตอนนั้น พร้อมค่าตอบแทนเกือบๆ ครึ่งของเงินเดือน Software Developer โดยเฉลี่ย (เอาเข้าจริง ประเทศนี้ถือว่าโชคดีมากถ้าฝึกงานแล้วได้ค่าตอบแทน เราขอไม่บ่นมาก)

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

คราวนี้ มาดูเรื่องอุปสรรคของตัวเว็บกันดีกว่าครับ

การแปลภาษา (Internationalization หรือ i18n) คือปัญหาหลักเลย เรามี skill issue กับฟีเจอร์นี้สุดๆ ถึงจะหาใช้ไลบรารี่ก็ตามเถอะ ตอนแรกเราโล่งใจมากที่จะได้ไม่ต้องใช้ไลบรารี่ภายนอกตอนที่ Astro ออกเวอร์ชั่น 4 แต่อัปเดตใหม่ย่อมตามมาด้วยบัค เราเจอบัคนี้ระหว่างทำ เราเลยต้องโละฟีเจอร์นี้ทิ้งก่อน รู้สึกเซ็งหน่อยๆ ที่เขียนคอนเทนต์สองภาษาไม่ได้

สวัสดีครับ นี่ nerometa จากอนาคต ถ้าอ่านบทความนี้ได้สองภาษาแล้ว แปลว่าเราก้าวข้ามความขัดแย้งทางทักษะได้ละน้าา 🎊 Astro เวอร์ชั่นล่าสุดตอนนี้เขียน documentation เกี่ยวกับ i18n ไว้ค่อนข้างเคลียร์แล้ว ทำตามได้ง่ายขึ้นทีเดียว แล้วก็ทำฟีเจอร์เปลี่ยนภาษาได้ในหน้าเดิมแล้ว แค่ยังไม่ใช่กับตัวบทความ

— อัปเดตเมื่อ 3 ตุลาคม 2024

ต่อมา เป็นโหมดมืด/สว่างครับ ถ้าใช้ framework อื่นอย่าง Tailwind CSS จะง่ายขึ้นแน่นอน แต่กับ CSS ปกติและ JavaScript เราก็คืนสู่สามัญกันในครั้งนี้ เราจำไม่ได้ว่าไปได้โค้ดมาจากไหนเลยต้องเขียนคอมเมนต์อธิบายตัวเอง แล้วตอนที่ Astro เปิดตัว View Transition API ก็ถึงเวลาที่เราจะต้องเปลี่ยนอะไรในฟีเจอร์นี้แล้ว โดยการให้สคริปต์ดักฟังอีเวนต์ astro-swap เพื่อเซ็ตโหมดใหม่

// use after-swap listener to persist theme change
document.addEventListener("astro:after-swap", () => {
  const theme = getColorPreference();
  setPreference(theme);
});

🏁 บทสรุป

เราแฮปปี้กับผลลัพธ์ที่ออกมาครับ มันมีความรู้สึกบางอย่างที่เราอธิบายเป็นคำพูดไม่ได้ตอนที่ใช้เวลามากไปกับการเขียนเว็บไซต์หรือเว็บแอพลิเคชั่น ทำให้มันสวยมากพอเพื่อให้ลูกค้าประทับใจ แล้วกลับมาโค้ดอะไรง่ายๆ ที่บ้านแต่ก็ยังใช้งานได้ดีไม่แพ้กัน เราว่าความวิเศษมันอยู่ตรงที่: คุณจะรู้ตัวว่าคุณเริ่มเจอแนวของตัวเองตอนที่คุณคิดวิธีแก้ปัญหาที่มันง่ายจนงง แทนที่จะกลับกัน แล้วเราคิดว่ามันก็คงเหมือนกับอาจารย์ในมหาลัยน่ะครับ คุณจะรู้ได้เลยว่าอาจารย์คนนี้แม่งของจริงเวลาที่เขาสอนเรื่องซับซ้อนด้วยคำอธิบายง่ายๆ