มินิมัลลิสต์เท็กซ์เอดิเตอร์ที่รันในเบราว์เซอร์และเก็บทุกอย่างไว้ใน URL

 (github.com/antonmedv)
3 คะแนน โดย GN⁺ 2025-12-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เท็กซ์เอดิเตอร์ขนาดเล็กที่ทำงานในเบราว์เซอร์และ เก็บข้อความทั้งหมดไว้ใน URL hash
  • เนื้อหาที่ป้อนจะถูก บีบอัดด้วย deflate เพื่อลดความยาวของ URL และทำงานฝั่งไคลเอนต์ทั้งหมดแบบ ไม่มีแบ็กเอนด์เซิร์ฟเวอร์
  • มีฟีเจอร์อำนวยความสะดวกพื้นฐาน เช่น บันทึกอัตโนมัติ (หน่วง 500ms), โหมดมืด, และ รองรับมือถือ
  • สามารถกำหนดชื่อเอกสารด้วย # Title หรือเพิ่ม style attribute ให้แท็ก <article> เพื่อเก็บไว้ใน URL ได้เช่นกัน
  • ส่งต่อเอกสารได้เพียงแค่แชร์ URL จึงเหมาะสำหรับการแชร์โน้ตสั้น ๆ หรือโค้ดสไนเป็ต

ภาพรวม

  • textarea.my คือ มินิมัลลิสต์เท็กซ์เอดิเตอร์ ที่ทำงานได้ครบถ้วนภายในเบราว์เซอร์
    • ข้อมูลทั้งหมดถูกเก็บไว้ใน URL hash จึงไม่ต้องมีเซิร์ฟเวอร์หรือฐานข้อมูลแยกต่างหาก
    • สร้างด้วย JavaScript และพร้อมใช้งานได้ทันทีโดยไม่ต้องติดตั้ง

ฟีเจอร์หลัก

  • การบีบอัดข้อความ (Compression magic)

    • บีบอัดข้อความที่ป้อนด้วยอัลกอริทึม deflate เพื่อลดความยาวของ URL ให้สั้นที่สุด
    • แชร์โน้ตยาว ๆ ได้ด้วย URL ที่มีความยาวราว 500 ตัวอักษร

  • การบันทึกและแชร์ผ่าน URL

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

  • บันทึกอัตโนมัติและโหมดมืด

    • มีฟังก์ชัน บันทึกอัตโนมัติ หลังพิมพ์โดยหน่วงเวลา 500ms
    • ตรวจจับ การตั้งค่าโหมดสีของระบบ และเปิดใช้โหมดมืดโดยอัตโนมัติ

  • อินเทอร์เฟซที่เป็นมิตรกับมือถือ

    • สามารถเขียนเอกสารบนสมาร์ตโฟนได้ด้วยฟังก์ชันเดียวกันทั้งหมด
    • ดีไซน์แบบ responsive เหมาะกับการใช้งานระหว่างเดินทาง

  • โครงสร้างแบบไม่มีแบ็กเอนด์

    • ตามข้อความ “Zero servers were harmed” เป็น แอปที่ทำงานบนไคลเอนต์ทั้งหมด
    • ไม่มีภาระฝั่งเซิร์ฟเวอร์หรือปัญหาเรื่องการเก็บข้อมูลส่วนบุคคล

วิธีใช้งาน

  • เข้า textarea.my แล้วเริ่มพิมพ์ได้ทันที
  • สามารถสังเกตได้ว่า URL จะยาวขึ้นตามปริมาณข้อความที่ป้อน
  • คัดลอก URL เพื่อแชร์ให้ผู้อื่นได้

เคล็ดลับขั้นสูง (Pro tips)

  • หากใส่ # Title ในบรรทัดแรกของเอกสาร จะถูกตั้งเป็น ชื่อหน้า
  • ข้อมูลจะถูกเก็บไว้ทั้งใน localStorage และ URL เพื่อสำรองไว้สองทาง
  • หากเพิ่ม style attribute ให้แท็ก <article> ในเครื่องมือนักพัฒนา style นั้นก็จะถูกเก็บไว้ใน URL ด้วย

ลิงก์ตัวอย่าง

  • มีเอกสารตัวอย่าง Crime and Punishment ของ Fyodor Dostoevsky
  • มีเอกสารตัวอย่าง An Ode to Comic Sans ที่เขียนโดย ChatGPT

คุณลักษณะทางเทคนิค

  • พัฒนาด้วย JavaScript
  • จัดการข้อมูลด้วย URL hash และ localStorage เท่านั้น โดยไม่ต้องร้องขอไปยังเซิร์ฟเวอร์
  • โครงสร้างเรียบง่ายช่วย ลดความเสี่ยงด้านความปลอดภัยและทำให้โหลดได้รวดเร็ว

บทสรุป

  • textarea.my คือ เท็กซ์เอดิเตอร์น้ำหนักเบามากที่ทำงานในสภาพแวดล้อมแบบ serverless โดย
    มอบแนวทางที่แปลกใหม่ในการ บันทึกและส่งต่อเอกสารได้เพียงผ่านการแชร์ URL
  • เป็นเครื่องมือที่เหมาะสำหรับนักพัฒนาหรือนักออกแบบในการ จดไอเดียสั้น ๆ, บันทึกโค้ด, และเขียนเอกสารทดสอบ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-12-25
ความคิดเห็นจาก Hacker News

  • น่าขำดีที่ผมก็เคยทำอะไรแทบจะเหมือนกันเป๊ะเหมือนกัน แต่ทำไว้ สำหรับแผนที่
    ผมต้องการวิธีวาดรูปบนแผนที่แล้วแชร์ลิงก์เพื่อให้อีกฝ่ายเห็นตำแหน่งของตัวเองได้
    การใส่คำอธิบายประกอบบนสกรีนช็อตแก้ปัญหาแรกได้ แต่ไม่ช่วยเรื่องที่สอง
    เลยลงมือทำเองแบบให้อารมณ์ Vibe engineering
    เป็นแนวคิดคล้าย ‘แอปเฉพาะกิจ’ สำหรับจุดประสงค์บางอย่าง
    เพราะโฮสต์ได้ถูกโดยไม่ต้องมีแบ็กเอนด์ จึงแจกฟรีได้
    ลิงก์เดโม MapDraw

    • เจ๋งมาก! ตอนนี้ผมกำลังใช้วางแผนทริปอยู่
      เพิ่มคำอธิบายแบบข้อความได้ไหม? แล้วก็คงดีถ้าปุ่มลบไม่ใช่ล้างทั้งหมด แต่ลบเฉพาะรูปล่าสุดหรือเลือกลบได้
    • คำว่า “Vibe engineered” นี่ตลกมาก vibe coding น่ะโอเค แต่พอเรียกสิ่งนั้นว่า engineering แล้วมันขำดี :D
    • ความลื่นไหลในการตอบสนอง ของหน้านี้ดีกว่าแอปแผนที่ไหน ๆ ที่ผมเคยใช้มา
    • เจ๋งจริง ๆ! ขอรายงานบั๊กหนึ่งอย่าง ตอนเลื่อนแผนที่ รูปวาดจะตามไปอย่างลื่น แต่ตอนซูมเข้า/ออก รูปวาดจะขยับหลังแอนิเมชันจบแล้วเท่านั้น
    • โปรเจกต์เจ๋งมากจริง ๆ

  • เช้านี้ผมก็กำลังทำอะไรคล้าย ๆ กันอยู่
    ถ้าใช้ .toBase64({ alphabet: "base64url" }) กับ fromBase64({ alphabet: "base64url" }) แทนการ replace บนสตริง base64 จะดูสะอาดกว่า
    ดูเอกสาร MDN

  • ตามสเปกแล้ว URL รองรับได้อย่างน้อย 8,000 ตัวอักษร
    เบราว์เซอร์หลัก ๆ รองรับเกิน 64,000 ตัวอักษร และ Chrome รองรับได้ถึง 2MB
    RFC9110 ส่วน 4.1-5, อ้างอิงจาก StackOverflow, เอกสาร Chromium

    • Chrome 2MB, Firefox 1MB, WebKit ไม่จำกัด
      และเพื่อเป็นข้อมูล ลิงก์ข้อความเต็มของ Crime and Punishment ก็ทำเป็น URL ได้
    • ดูเหมือนอุตสาหกรรมสอดส่องติดตามจะค่อย ๆ ทำให้ URL ยาวขึ้นเพื่อยัดพวก utm-tracker หรือ campaign ID เข้าไปเพิ่ม
      ลิงก์แชร์จาก Instagram หรือ YouTube มักมีพารามิเตอร์ติดตามยาวหลายร้อยตัวอักษรแนบมาด้วย
    • อนึ่ง character กับ octet ไม่เหมือนกัน ถ้ายังไม่ได้แปลงเป็น URI-safe ASCII ก็อย่าคิดว่า 1 ตัวอักษร = 1 ไบต์

  • ไม่เข้าใจว่าทำไมต้องเก็บข้อมูลไว้ใน URL แล้วทำให้มันพองขึ้นด้วย แค่เก็บใน localStorage ก็พอไม่ใช่หรือ?

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

  • ผมเคยทำ JS framework เล็ก ๆ ที่ช่วยให้ทำแนว การแชร์ผ่าน URL แบบนี้ได้ง่าย
    ลิงก์ GitHub ของ lost.js

  • ผมชอบแนวทางนี้ในแง่ ความเป็นส่วนตัว
    เลยกำลังคิดว่าจะเพิ่มตัวเลือกบันทึกลง URL ในเอดิเตอร์ kraa.io ของผมด้วยดีไหม

    • แต่ในมุม privacy นั้น textarea.my มีสคริปต์ติดตามรวมอยู่ด้วย
      มีการฝังโค้ด Cloudflare beacon ไว้ จึงควรระวัง
    • ถ้าอย่างนั้น ในแง่ความเป็นส่วนตัวมันมีข้อดีกว่าการใช้ text editor แบบเนทีฟบนเครื่องหรือเปล่า?

  • เมื่อก่อนผมเคยทำอะไรคล้าย ๆ กันไว้ สำหรับแท็บกีตาร์
    ดูได้ที่ tabviewer.app
    ปัญหา URL ยาวเกินไปผมแก้ด้วยบริการย่อ URL

    • ผมก็เคยทำตัวแก้ไขแท็บเพื่อจุดประสงค์เดียวกันเหมือนกัน
      GitHub repository

  • เป็นโปรเจกต์ที่เจ๋ง แต่พอลองโหลด “Crime and Punishment” แล้วเบราว์เซอร์มือถือผม แครช เลย
    ดูเหมือน URL ไม่ได้ถูกออกแบบมาให้รับ ‘โทษทัณฑ์’ ขนาดนั้น

  • ขอโฆษณาหน่อยนะ ผมก็ทำอะไรคล้าย ๆ กันแต่ไม่มีใครสนใจเลย
    ลิงก์ GitHub ของ Buffertab

    • ฟีเจอร์ ป้อนข้อมูลด้วยเสียง น่าสนใจดี อยากรู้ว่าเคยคิดจะใช้ Whisper wasm แทน OpenAI API ไหม