เจาะลึกเบื้องหลัง ResumeMD: เครื่องมือสร้างเรซูเม่ด้วย Markdown ที่สู้รบกับบั๊กและข้อจำกัดสุดหิน
ถอดบทเรียนการพัฒนาโปรแกรมสร้างเรซูเม่จาก Markdown สำหรับผู้ใช้งาน AI เผยปัญหาความท้าทายตั้งแต่ Tailwind v4, ฟอนต์ขนาดใหญ่ ไปจนถึงระบบ Sync แบบ Offline-first
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- นักพัฒนาเปิดตัว ResumeMD เครื่องมือสร้างเรซูเม่จาก Markdown สำหรับผู้ใช้งาน AI-paste workflow
- โครงสร้างสถาปัตยกรรมเน้นแบบ offline-first และใช้ localStorage เป็นหลักเพื่อความรวดเร็ว
- ต้องเผชิญความท้าทายทางเทคนิคทั้งเรื่อง CSS optimization, ฟอนต์ภาษาต่างๆ และการจัดการ PDF
- เปิดให้ใช้งานฟรีโดยไม่มีลายน้ำ พร้อมแพ็กเกจพรีเมียมราคา 9 ดอลลาร์ต่อเดือนสำหรับฟีเจอร์ขั้นสูง
สามปีที่ผ่านมา ขั้นตอนการสมัครงานเปลี่ยนไปอย่างสิ้นเชิง หลายคนหันไปพึ่งพา ChatGPT, Claude หรือ Gemini เพื่อร่างข้อความเรซูเม่ แล้วจึงนำข้อความที่จัดรูปทรงสวยงามนั้นไปเสียเวลาตกแต่งต่อในโปรแกรมประมวลผลคำหรือเครื่องมือลากวางอื่นๆ เพื่อปรับขนาดตัวอักษรและย่อหน้าด้วยตนเอง
โมเดลภาษาขนาดใหญ่ (LLMs) สามารถสื่อสารด้วย Markdown ได้เป็นปกติอยู่แล้ว เมื่อขอให้แชทบอทเขียนเรซูเม่ สิ่งที่ได้กลับมาคือข้อความ Markdown ที่สะอาดและมีโครงสร้างชัดเจน แต่เครื่องมือสร้างเรซูเม่ส่วนใหญ่กลับบังคับให้ผู้ใช้งานต้องทิ้งโครงสร้างเหล่านั้นแล้วกรอกข้อมูลลงในฟอร์มทีละช่อง
นี่จึงเป็นที่มาของการพัฒนา ResumeMD โปรแกรมแก้ไขแบบสองบานหน้าต่าง (split-pane editor) โดยให้ผู้ใช้พิมพ์หรือวางข้อความ Markdown ทางฝั่งซ้าย และแสดงผลเรซูเม่ที่จัดหน้าเรียบร้อยแล้วทางฝั่งขวา พร้อมเลือกเทมเพลตและดาวน์โหลดเป็นไฟล์ PDF ได้ทันทีโดยไม่ต้องลงทะเบียนบัญชี และจัดเก็บข้อมูลทั้งหมดไว้ใน localStorage เป็นค่าเริ่มต้น
การตัดสินใจเลือกใช้สถาปัตยกรรมแบบ offline-first และบันทึกข้อมูลลงในเบราว์เซอร์ของผู้ใช้โดยตรง ไม่เพียงแต่ช่วยลดต้นทุนค่าเซิร์ฟเวอร์ของผู้พัฒนาเกือบเป็นศูนย์ แต่ยังตอบโจทย์เรื่องความเป็นส่วนตัวของผู้ใช้งานในยุคที่ข้อมูลส่วนบุคคลมีความสำคัญอย่างยิ่ง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในส่วนของการจัดการสถานะ (Sync layer) ผู้พัฒนาต้องเจอกับบั๊กที่น่าสนใจ เมื่อฟังก์ชัน Supabase real-time subscription ดึงค่าตัวแปรปิด (stale closure) ของ Markdown และการตั้งค่าเดิมมาใช้งาน ทำให้เกิดการตรวจจับความขัดแย้งปลอมๆ ระหว่างการอัปเดตของตัวผู้ใช้เองจนทับข้อมูลปัจจุบัน วิธีแก้คือการใช้ React refs ร่วมกับตัวแปรควบคุม isSyncingRef เพื่อหลีกเลี่ยงการรีซับสไบรบ์ทุกครั้งที่ผู้ใช้พิมพ์ข้อความ นอกจากนี้ยังพบปัญหาการสร้างแถวข้อมูลซ้ำซ้อน (duplicate rows) เมื่อผู้ใช้เข้าสู่ระบบครั้งแรก ซึ่งแก้ไขด้วยการตรวจสอบซ้ำก่อนทำการบันทึกข้อมูลลงฐานข้อมูล
ความท้าทายถัดมาคือเรื่องของ Tailwind v4 ผ่าน Lightning CSS ซึ่งปรับแต่งตัวเลือก CSS อย่างก้าวร้าว จนส่งผลให้กฎของ CSS แยกตัวและสร้างโค้ดจำลองขึ้นมาเอง ส่งผลให้ชุดตัวอักษรและสไตล์หน้าตาผิดเพี้ยนไปจากเดิม ขณะเดียวกัน ระบบสร้าง PDF ผ่าน @react-pdf/renderer ยังต้องเผชิญกับปัญหาการฝังฟอนต์ภาษาอื่นๆ เช่น ภาษาจีน (Noto Sans SC) ที่มีขนาดไฟล์สูงถึง 17 เมกะไบต์ ภาษาอาหรับ และภาษาฮินดี ทำให้ต้องพัฒนาระบบตรวจสอบชุดตัวอักษร (script-detection module) เพื่อรองรับการส่งออกไฟล์ในหลากหลายภาษา
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น