แผ่นจดบันทึกแบบเนทีฟบนเบราว์เซอร์ที่ทำงานได้โดยไม่ต้องติดตั้ง/ไม่ต้องมีเซิร์ฟเวอร์ (รองรับโหมด Vim)
(yupkidangju.github.io)ขอแนะนำ WebMemo Pro เว็บเอดิเตอร์แบบโลคัลล้วนที่พัฒนาขึ้นเอง สำหรับเวลาที่การเปิด IDE หนัก ๆ ที่สร้างบน Electron ดูเป็นภาระ และแอปจดโน้ตบนคลาวด์ก็น่ากังวลเรื่องความปลอดภัย
นี่คือโปรเจกต์ส่วนตัวที่ลองทดสอบขีดจำกัดของเบราว์เซอร์ด้วย Vanilla HTML/JS/CSS ล้วน โดยไม่ใช้เครื่องมือ build อย่าง React หรือ Webpack
[จุดเด่นทางเทคนิคหลัก]
การบันทึกไฟล์แบบเนทีฟ (File System Access API): เมื่อกด Ctrl+S ในเบราว์เซอร์ จะเขียนทับไฟล์ต้นฉบับบนดิสก์โลคัลได้โดยตรง โดยไม่ต้องมีหน้าต่าง "บันทึกเป็น" ปรากฏขึ้น
รองรับโหมด Vim อย่างสมบูรณ์: มาพร้อม Vim emulator ที่สร้างบน CodeMirror 6 จุดที่น่าสนใจคือ คำสั่ง :w ของ Vim ถูกเชื่อมกับการบันทึกลงระบบไฟล์โลคัลจริง และเมื่อพิมพ์ :wq จะบันทึกแล้วปิดแท็บเบราว์เซอร์ได้
ไทม์แมชชีนแบบโลคัล (IndexedDB): แทนที่จะใช้ localStorage ที่มีข้อจำกัดขนาด 5MB ระบบใช้ IndexedDB ทำให้สามารถบันทึกออฟไลน์ได้ในระดับ GB อีกทั้งยังเก็บ revision snapshot ล่าสุด 10 รายการของแต่ละแท็บไว้ให้อัตโนมัติในเบื้องหลัง เพื่อป้องกันข้อมูลสูญหาย
Zero-Dependency & ทำงานแบบออฟไลน์: ไม่มีแบ็กเอนด์เซิร์ฟเวอร์เลย สามารถดาวน์โหลด GitHub repository แล้วดับเบิลคลิกแค่ index.html ก็ใช้งานทุกฟีเจอร์ได้อย่างสมบูรณ์ในสถานะออฟไลน์
นอกจากนี้ยังมี UX ที่เป็นมิตรกับนักพัฒนา เช่น การเปิดไฟล์ด้วย drag and drop, การเรนเดอร์ Markdown แบบเรียลไทม์ (รวม Floating TOC), มินิแมป เป็นต้น
น่าจะมีประโยชน์เมื่ออยากแก้ไขข้อความเบา ๆ หรือเขียน Markdown ยินดีรับฟีดแบ็กหรือโค้ดรีวิวเสมอ!
เดโม: https://yupkidangju.github.io/webmemo/
ซอร์สโค้ด (GitHub): https://github.com/Yupkidangju/webmemo
20 ความคิดเห็น
เจ๋งมากเลย
ขอบคุณครับ!
แม้จะเป็นซอร์สโค้ดปิด แต่กำลังทำสแครตช์บอร์ดแบบออฟไลน์ 100% อยู่: https://zetopad.site/
ยอดเยี่ยมจริงๆ ครับ ดีไซน์สวยมาก เป็นโปรเจกต์ที่น่าจับตามองครับ!
เจ๋งมาก~
ขอบคุณครับ!
ดีครับ
บนมือถือ น่าจะดีถ้าป้องกันการเลื่อนแนวตั้งของส่วนหัวด้วย
ผมได้ลองเพิ่มโค้ดแล้วทดสอบดู เหมือนว่าจะไม่มีปัญหา แต่ถ้ามีปัญหาอะไร รบกวนส่งฟีดแบ็กมาได้เลยครับ เดี๋ยวผมจะนำไปปรับแก้
ถูกใจ
ขอบคุณครับ!
ดีครับ!
ลองใช้สั้น ๆ แล้วขอฝากฟีดแบ็กไว้สักเล็กน้อย
cmdมากกว่าctrlดังนั้นบน Mac น่าจะให้ใช้ได้ทั้งctrl/cmdหรือจะให้ใช้แค่cmdไปเลยก็ได้ครับ (เช่น บันทึกไฟล์ ->ctrl/cmd+s) - ลองเช็กดูแล้วพบว่าบางคำสั่งทำงานด้วยcmdเท่านั้น (เช่น เลิกทำ - ใช้ได้แค่cmd-z)ctrl/cmd+sให้รับctrl/cmd+ㄴเหมือนกัน)ผมได้ลองนำข้อเสนอแนะที่คุณบอกมาปรับใช้ดูแล้ว หากมีอะไรที่ยังใช้งานไม่ได้ โปรดบอกมาแล้วผมจะลองแก้ไขดูครับ ปัญหาการรองรับคำสั่งภาษาเกาหลีและการขึ้นบรรทัดใหม่เมื่อกด Enter เป็นปัญหาเดียวกันครับ..
https://github.com/Yupkidangju/AIHack
https://github.com/Yupkidangju/SheetPicker
โปรเจกต์อื่น ๆ ก็น่าสนใจมากเช่นกัน
ขอบคุณครับ! อันนั้นทุกคนยังอยู่ระหว่างพัฒนากันอยู่ครับ ต้องทำให้เสร็จสมบูรณ์ก่อน!
โอ้.. ดีมากเลย~~
ขอบคุณครับ!
ว้าววว!
ขอบคุณครับ!
สุดยอดมาก
ขอบคุณครับ ผมอัปเดตเพิ่มอีกนิดให้สามารถเรนเดอร์แผนผังหรือไดอะแกรมของ Mermaid ได้ด้วยแล้ว!