😁 เกริ่น
ได้ฤกษ์งามยามดีเอาโปรเจคที่ดองไว้มาทำต่อ ก่อนอื่นขอแนะนำตัวก่อนเลย ผมชื่อก๊อง เป็น Jr. Backend Developer ที่มีความสนใจใน Frontend จุดเริ่มต้นของไอเดียของโปรเจคนี้คือ ผมมีปัญหาในการทำ Presentation มาก ๆ เนื่องจากมีความย้ำคิดย้ำทำหน่อย ๆ ทำให้เวลาทำสไลด์ไปประมาณ 2-3 หน้าก็จะเกิดอาการแบบว่า หน้าก่อนเราใช้ font เดิมไหมนะ ขนาดเท่าเดิมไหมนะ ตำแหน่งตรงหรือเปล่า ก็จะย้อนกลับไปเช็ค จะมีนิสัยแบบนี้ไปทุก ๆ 2-3 หน้า (คุยกับเพื่อนเพื่อนบอกว่าย้ำคิดย้ำทำหรือสมาธิสั้น 555+) จนเกิดไอเดียว่าถ้าเราทำสไลด์ด้วย Web Framework ล่ะ แต่ตอนนั้นก็แค่คิด แล้วพับเก็บไว้ จนได้มาเรียนคอร์ส Go กับพี่ยอด สักเกตุว่าสไลด์ของพี่ยอดเป็น Web และลงท้าย Path ด้วย .md จากสอบถามทำให้รู้ว่าพี่ยอดใช้ Tool ที่ชื่อว่า Marp ในการทำสไลด์
⚒️ Markdown To Presentation Tools
https://marp.app/ เป็น Tools ที่ทำให้เราสามารถเขียน Presentation ด้วยไฟล์ Markdown ได้ หรือก็คือไฟล์ที่เราเขียน readme.md ใน Git Repo ซึ่งตัว Marp มีหลายตัวให้เลือกใช้เช่น Marp Cli ที่เราสามารถเรียกใช้ผ่าน Command line ได้เลย Marp Core ที่สามารถนำไปใส่ใน Website ของเราได้เลย หรือ Marp For VS Code ที่เป็น VS Code Extension ทำให้สามารถแสดง slide ใน VS Code ได้เลย ซึ่งผมได้ใช้ Marp มาประมาณหนึ่ง ผมเพิ่ม Plugin ตัว Marp ไปพอสมควร ให้สามารถใช้ Mermaid JS ได้ ใช่ ShikiJS ในการแสดง Code Block สวย ๆ รวมถึงใช้ tailwind แบบ CND (ตัว Tailwind บอกมาเลยว่าไม่เหมาะกับ Prod เพราะไม่ได้ Optimize) ถ้าสนใจตัวที่ผมทำ ก็ไปดูได้ที่ https://github.com/kongsakchai/my-marp
แต่หลังจากใช้ไปก็พบว่ามันมี limt ในการเพิ่ม Plugin (อาจจะด้วยสกิลผมตอนนี้ยังไม่พอ) ทำให้ต้องหา Tool อื่น ๆ ซึ่งก็เจออีกหลายตัวเลย แต่ที่ชอบที่สุดคงจะเป็น https://sli.dev/ เป็น web-based slides ที่เขียนด้วย Vue ซึ่งมีฟีเจอร์หลาย ๆ อย่างที่ผมชอบมาก
เช่น Presentation View ที่ฝั่งคน Present จะเป็นอีกหน้าจอหนึ่ง พร้อมแทรก Note ใส่หน้าฝั่งคน Present ได้อีกด้วย ฟีเจอร์การวาดบน Slide เหมาะสำหรับการสอน มี Build-in Monaco Editor สำหรับแก้ไข Markdown บนเว็บได้เลย และยังสามารถเรียกใช้ Vue Component ได้อีกด้วย ซึ่งผมจะจบที่ตัวนี้ติดตรงที่ ผมไม่เคยเขียน Vue !!! และตัว Slidev จะรันได้ทีละไฟล์ แต่ Marp จะสามารถรันได้ทั้งโฟเดอร์ จากปัญหาทำให้ผมเกิดไอเดียทำ Tool เองโดยรวมฟีเจอร์ที่ชอบจาก Marp และ Slidev โดยปัจจุบันผมสนใจ Frontend Framework ที่ชื่อว่า Svelte เลยเลือกมาเป็น Stack หลักของ Tool ตัวนี้
♥️ Tech Stack
โดย Stack หลัก ๆ ที่ผมเลือกจะเป็น
- SvelteKit – สำหรับทำในส่วนของ Frontend
- Markdown-it สำหรับในการแปลง markdown เป็น HTML
- Shiki JS – Highlighter สำหรับ Code Block
- Mermaid JS – สำหรับวาด Diagramm หรือ Chart
ซึ่งจริง ๆ แล้วตัว SlideMD ผมเริ่มเขียนไว้ตั้งแต่ปี 2024 จนสามารถใช้งานได้แล้ว แต่การมาของยุค Gen AI ที่สามารถ Gen Presentation ได้อย่างง่าย ๆ ทำให้ผมไม่ได้ทำต่อ เพราะคิดว่าทำไปก็อาจจะไม่ได้มีคนใช้ เพราะ Gen AI มันง่ายกว่า แต่พอนึกย้อนไปตอนเริ่มไอเดียนี้ คือผมต้องการ Tool มาใช้เอง ถึงคนอื่นจะไม่ใช้อย่างน้อยคนทำนี่แหละจะใช้เอง 555 ซึ่งพอกลับไปดูแล้วก็มีโค้ดในหลาย ๆ ส่วนยังไม่ค่อยดีเท่าไหร่เนื่องด้วยสกิลในตอนนั้นยังเป็น Noob อยู่ 55555 บวกกับขี้เกียจไล่โค้ดเลยอยากเขียนใหม่ เริ่มวาง Structure ใหม่ไปเลยดีกว่า เลยถึงโอกาศนี้มาเขียน Devlog ไปด้วยเลย และหวังว่านี่จะไม่ใช่ Devlog เดียวและ Devlog สุดท้ายนะครับ 5555 โพสต์อาจจะยังไม่มีอะไรมากไว้ติดตามต่อในโพสต์ต่อไป (ในสักวันหนึ่ง) นะครับผม หากโพสต์นี้ผิดพลาดสามารถแนะนำติชมได้เลยครับผม