Show HN: Nash - โน้ตแบบสแตนด์อโลนที่สร้างเป็นไฟล์ HTML เดียว

• Nash คือ โน้ตแบบสแตนด์อโลนบน HTML ที่เปิดและแก้ไขได้ในเว็บเบราว์เซอร์ โดยไม่ต้องใช้บริการแยกต่างหาก
• โน้ตที่บันทึกไว้สามารถแก้ไขแบบออฟไลน์ได้ จึงมุ่งให้ใช้งานในลักษณะ เหมือนไฟล์เอกสาร แทน Notion หรือ Word
• สามารถใช้สร้าง คอนเทนต์รูปแบบเอกสาร HTML เช่น บล็อกแบบสแตติก คอนเทนต์หน้าเดียว หรือแนบรูปพิซซ่าจากแกลเลอรีได้
• เมื่อส่งผ่านเมสเซนเจอร์ จะดูได้จากพรีวิว ทำให้สามารถแชร์คอนเทนต์ยาว ๆ ในรูปแบบเหมือนไฟล์ได้
• Nash เผยแพร่เป็น โอเพนซอร์ส และสามารถแก้ไขหน้าโน้ตเปล่าเพื่อนำไปใช้งานได้อย่างอิสระ

---

โน้ต HTML ที่เขียนได้ด้วยเบราว์เซอร์เท่านั้น

• Nash คือโน้ตแบบสแตนด์อโลนที่มุ่งแนวคิด note as HTML
• ไม่ต้องใช้ซอฟต์แวร์หรือบริการแยกต่างหาก เพียงมี เว็บเบราว์เซอร์ ที่โดยทั่วไปติดตั้งอยู่แล้วก็ใช้งานได้
• โน้ตที่บันทึกไว้รองรับ การแก้ไขแบบออฟไลน์
• สามารถเปิดโน้ตเปล่าได้ที่ nash.html

คอนเทนต์ที่สร้างได้และวิธีแชร์

• ใช้สร้างบล็อกแบบสแตติกหรือ คอนเทนต์หน้าเดียว ได้
• สามารถเขียนคอนเทนต์ในลักษณะแนบรูปจากแกลเลอรีได้ด้วย
• เมื่อส่งผ่านเมสเซนเจอร์ จะดูได้เป็น พรีวิว จึงใช้แชร์คอนเทนต์ยาว ๆ ได้
• เริ่มต้นจากประสบการณ์การทำ POC ไอเดียง่าย ๆ ด้วย HTML ไฟล์เดียว และเป็นความพยายามแรกในการสร้างไฟล์เอกสารที่ทำงานได้โดยไม่ต้องพึ่งบริการหรือซอฟต์แวร์แยกต่างหาก
• Nash เผยแพร่เป็น โอเพนซอร์ส จึงสามารถแก้ไขและใช้งานได้อย่างอิสระ

[xguru]

Nash, โน้ตที่ทำงานด้วย HTML ไฟล์เดียว

เห็นว่าที่เคยโพสต์ใน Show GN ได้นำไปโพสต์บน Hacker News ด้วย และได้รับโหวตเยอะเลยนะครับ ขอแสดงความยินดีด้วย!

[GN⁺]

ความคิดเห็นจาก Hacker News

• งานหนักส่วนใหญ่ถูกจัดการได้ด้วย แอตทริบิวต์ HTML ที่เรียบง่ายแต่ทรงพลัง เพียงตัวเดียว แต่น่าแปลกที่ดูเหมือนนักพัฒนาจำนวนมากไม่รู้จักสิ่งนี้
  เป็นฟีเจอร์ที่มีมานานมากแล้ว

  • บรรทัดเดียวนี้แทบจะเป็น 90% ของการทำงานใน implementation รุ่นแรกของ Writely
    Writely คือสตาร์ทอัพที่ต่อมากลายเป็น Google Docs และผมพูดในฐานะหนึ่งในผู้ก่อตั้ง
    ส่วนอีก 90% ที่เหลือคือโค้ดแบ็กเอนด์ที่ต้องเขียนเพื่อซิงก์เนื้อหาที่แก้ไขให้ถูกต้อง เพราะแต่ละเบราว์เซอร์มี บั๊ก implementation ของ contenteditable แปลก ๆ ต่างกันไป :-)
  • ยอดเยี่ยมจริง ๆ ราวปี 2016 ผมยังทำเว็บแบบสั่งทำสำหรับธุรกิจขนาดเล็กและกลางอยู่เยอะ และตระหนักว่าส่วนใหญ่ทำด้วยของอย่าง WP ได้
    แต่ (1) การแต่งสไตล์ WP น่ารำคาญมากและไม่อยากดูแลต่อ, (2) ไม่อยากพึ่งฟีเจอร์ของปลั๊กอินกับการอัปเกรด WP, และ (3) อยากให้คนที่มีสิทธิ์เข้าถึงต่างกันสามารถแก้ไขคนละส่วนในหน้าเดียวกันได้ ซึ่งใน CMS ส่วนใหญ่แทบเป็นไปไม่ได้
    เลยสร้าง CMS แทบจะตั้งแต่ศูนย์ โดยอิงแค่ contenteditable กับ TinyMCE แล้วติดแท็กนั้นให้กับพื้นที่ที่แก้ไขได้ แน่นอนว่าก่อนบันทึก แบ็กเอนด์จะตรวจว่าใครแก้อะไรได้บ้าง
    เมื่อลูกค้าหรือพนักงานล็อกอิน ก็แก้ไขได้ทันทีเฉพาะส่วนของหน้าที่ตนมีสิทธิ์ และ CMS จะแสดงเส้นขอบประรอบส่วนที่แก้ไขได้ ฟอนต์และสีเก็บไว้ในการตั้งค่า TinyMCE จึงไม่ต้องไปค้นหรือแตะ HTML ถ้าต้องการจะแก้เองก็ทำได้
    สำหรับลูกค้าแล้วมันให้ความรู้สึกค่อนข้างเหมือนเวทมนตร์ เพราะไม่ต้องไปหน้าแก้ไขแยกต่างหากเพื่อดูว่าหลังเปลี่ยนแล้วเป็นอย่างไร แค่ แก้ไขตรงตำแหน่งเดิม บนหน้าแล้วบันทึก ก็เผยแพร่ทันที
    เว็บไซต์เหล่านี้ส่วนใหญ่ผ่านไป 5–10 ปีแล้วก็ยังใช้งานอยู่ และแทบไม่ต้องให้ผมดูแลฝั่งของผมเลย
  • เมื่อไม่กี่สัปดาห์ก่อนผมทำเดโมสดของแนวคิดนี้ไว้ ในฐานะ ฟีเจอร์ที่ซ่อนอยู่ ของ HTML มันเรียบง่ายแต่ทรงพลังจริง ๆ
    https://news.ycombinator.com/item?id=43179649
  • อันนี้ดี เคยทำ ตัวแก้ไข PDF โดยแปลงเอกสารเป็น HTML แล้วใส่ contenteditable="true" ใน div ระดับบนสุด
  • อ่านแล้วเหมือน “โอ้ มีของสุดยอดอยู่นี่ ชื่อว่าล้อ และมันมีมานานมากแล้ว”
    ผมว่าผมเคยทำงานกับสิ่งนี้เมื่อ 20 ปีก่อนด้วยซ้ำ
    ContentEditable ถูกนำเข้ามาครั้งแรกใน IE 5.5 เมื่อปี 2000 และภายในปี 2007 ก็ใช้ได้ในเบราว์เซอร์หลักทั้งหมดแล้ว

• ชอบมาก และยิ่งดีขึ้นเมื่อดูซอร์สแล้วเห็นว่ากำลังเขียนด้วย JavaScript ล้วน
  ทุกวันนี้ความจริงที่ว่าเราสามารถสร้างเว็บแอปที่มีการโต้ตอบค่อนข้างมากได้โดยไม่ต้องใช้ไลบรารีหรือเฟรมเวิร์กยังถูกประเมินค่าต่ำไป
  ไอเดียการทำเว็บแอปโลคัลแบบง่าย ๆ เป็น หน้า HTML ไฟล์เดียว ก็ดีมากเช่นกัน ก่อนหน้านี้เคยไปพิพิธภัณฑ์วิทยาศาสตร์กับลูกแล้วได้ลองใช้แอนิเมเตอร์ stop-motion ง่าย ๆ จากนั้นผมทำเว็บแอปคล้าย ๆ กันแล้วคัดลอกเป็นไฟล์ HTML ไฟล์เดียวลงแล็ปท็อปของลูก ทำให้ใช้ได้แม้ไม่มีอินเทอร์เน็ต
  แต่ผมขี้เกียจเขียน JavaScript ล้วนเอง เลยทำด้วย React กับ bundler และผลลัพธ์ถูกรวมเป็นไฟล์ HTML ไฟล์เดียว สักวันอาจเอาไปลง Show HN

  • เมื่อก่อนมี “ไม่จำเป็นต้องใช้ jQuery เพื่อทำสิ่งนั้น” ตอนนี้เราต้องมี “ไม่จำเป็นต้องใช้ React หรือ Vue, Svelte อะไรพวกนั้นเพื่อทำสิ่งนั้น”
    ด้วย JavaScript ล้วนธรรมดา ๆ และฝีมือที่ดี คุณทำแทบทุกอย่างให้สะอาดกว่าและดูแลรักษาง่ายกว่าได้
    หลังจากดูแลของที่คนอื่นทำมาหลายสิบปี ผมพบว่า การออกแบบที่เรียบง่ายจนเหมือนโง่ จากคนฉลาดเอาชนะชุดผสมแบบอื่น ๆ ได้
  • ชอบ Quarto ตรงนี้ มันสร้าง ไฟล์ HTML แบบสแตนด์อโลน เพื่อแชร์ให้คนอื่นได้

• ทำได้ดี
  น่าลองพิจารณาเปลี่ยนพฤติกรรมให้เมื่อเปิดหน้าจากดิสก์ในเครื่องด้วยเบราว์เซอร์ ก็เข้าสู่โหมดแก้ไขโดยอัตโนมัติ แต่เมื่อถูกโพสต์บนเว็บไซต์ของใครบางคนและเข้าถึงจากเว็บสาธารณะ ก็เป็น มุมมองอ่านอย่างเดียว ตามปกติ แค่ตรวจว่าที่อยู่เป็น http/https หรือไม่ก็พอ
  แน่นอนว่าควรมีวิธีเลี่ยงอย่างพารามิเตอร์ query string หรือ magic URL fragment เพื่อให้ยังดูในโหมดแก้ไขได้
  และควรตั้งข้อยกเว้นให้โดเมนหรือ prefix URL บางรายการได้ ค่าเริ่มต้นอาจเป็น keepworking.github.io หรือ <https://keepworking.github.io/nash/> เพื่อให้โหมดแก้ไขเปิดบนไซต์นั้นด้วย จะได้ไม่ต้องทำอะไรเพิ่มเพื่อเดโม
  ถ้าผู้ใช้แก้ไขข้อยกเว้นนี้ได้จะยิ่งดี เช่น คนอื่นก็จะได้พฤติกรรมเดียวกันโดยไม่ต้องใช้ทริกข้อ 1

  • ชอบไอเดียเว็บไซต์ที่แก้ไขเนื้อหาและ บันทึกลงเครื่อง ได้มาก
    ส่วนตัวคิดว่ามันยอดเยี่ยม จึงอยากให้คงวิธีปัจจุบันไว้

• ใช้ https://rpdillon.net/redbean-tiddlywiki-saver.html จะทำให้มันเป็น แอปพกพาแบบพึ่งพาตัวเอง ที่บันทึกได้ “จริง ๆ”

  • เคยทำของคล้าย ๆ กันมาก่อน ดูได้ที่ https://original.littr.me
  • อยากให้ทำให้มันเสนอให้บันทึกไฟล์ได้
    แบบนั้นจะเข้าใกล้ฟีเจอร์ที่มี บุ๊กมาร์กส่วนตัว ได้ตามต้องการมากขึ้น

• ดี มีการพูดคุยก่อนหน้านี้ที่กล่าวถึงไอเดียนี้กับ TiddlyWiki
  https://news.ycombinator.com/item?id=43179649

  • หนึ่งในของที่ผมชอบที่สุดในด้านนี้คือ Feather Wiki: https://feather.wiki/

• อยากให้เบราว์เซอร์รองรับ เว็บแอปโลคัล ได้ดีกว่านี้
  ถ้าไฟล์โลคัลเข้าถึงพื้นที่จัดเก็บถาวรได้ง่าย ๆ ก็จะเปิดโอกาสมากมายสำหรับแอป GUI ที่เร็วและทำง่าย โดยพื้นฐานแล้วเป็นทิศทางตรงข้ามกับ Electron

  • ไฟล์จะเข้าถึงอะไรบางอย่างได้อย่างไร? ไฟล์เป็นแค่ข้อมูล จึงทำอะไรไม่ได้

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

  • HTML ถูกประเมินค่าต่ำเกินไป
    หน้าจอส่วนใหญ่ที่เราเห็นทุกวัน แม้แต่ตัวแก้ไขโค้ด ก็เป็น หน้า HTML
  • ถ้าต้องการความสามารถในการแยกส่วนหรือการจัดการเวอร์ชัน นี่ไม่ใช่วิธีที่จำเป็นต้องทำ แต่เป็นวิธีที่ทำได้แน่นอน
    ที่น่าประหลาดใจกว่านั้นคือ ผู้คนใช้เฟรมเวิร์กแล้วใส่สิ่งที่ไม่ใช่ JavaScript ลงไปใน HTML และใช้โครงสร้างที่ JavaScript ภายนอกค่อยมาต่อเข้าทีหลังหรือต้องทำ hydration ให้ความรู้สึกเหมือนเอาข้อเสียของทั้งสองฝั่งมารวมกัน
    ผมค่อนข้างอยู่ฝั่งตรงข้าม คือให้ JavaScript เป็นศูนย์กลาง และนอกจาก index.html แล้วก็ไม่มีไฟล์นามสกุล .html เลย ใน JavaScript ก็ไม่ได้ใส่ HTML ไว้ด้วย เทมเพลตย่อยทั้งหมดเป็น .htm และทำ hydration ก่อนเพิ่มเข้าไปใน DOM

• ถ้ามีคำเตือนตอนพยายามปิดหน้าโดยยังไม่ได้บันทึกหลังแก้ไขก็น่าจะดี
  น่าพิจารณาเพิ่มตัวจัดการ onbeforeunload

  • เว็บเพจนี้ตอนนี้ก็มีคำเตือนตอนปิดอยู่แล้ว แต่โดยทั่วไปถือเป็นข้อเสนอแนะที่ดี

• ชอบ เครื่องมือเรียบง่าย แบบนี้ ไม่นานมานี้ผมทำ “โฮมเพจ”/แดชบอร์ดแบบปรับแต่งเองง่าย ๆ ไว้: https://github.com/rcarmo/onepage-by-spec

  • เมื่อกี้เพิ่งอัปเดตให้ “บันทึก” ได้ด้วย

• ดีมากจริง ๆ ผมหงุดหงิดกับซอฟต์แวร์จำนวนมากขึ้นเรื่อย ๆ ที่เอาฟีเจอร์ซึ่งทำในเครื่องได้ง่าย ๆ และก็เคยทำกันอยู่แล้วไป ซ่อนไว้หลังการสมัครสมาชิก พร้อมใส่ข้อจำกัดเทียม ๆ
  ผมกำลังทำตัวแก้ไข Markdown ฟรีที่ทำงานได้ในเบราว์เซอร์เท่านั้น และสามารถแก้ไขไฟล์ในเครื่องผ่าน File System Access API ใหม่ได้ API นี้ใช้ได้เฉพาะบนเบราว์เซอร์ตระกูล Chromium
  https://zareith.github.io/chillmd/