Trình soạn thảo văn bản tối giản chạy trong trình duyệt và lưu toàn bộ nội dung vào URL

• Trình soạn thảo văn bản nhẹ chạy ngay trong trình duyệt và lưu toàn bộ văn bản vào URL hash
• Nội dung nhập được nén bằng deflate để rút ngắn độ dài URL, và hoạt động hoàn toàn phía client không cần máy chủ backend
• Bao gồm các tính năng tiện dụng cơ bản như tự động lưu (trễ 500ms), chế độ tối, hỗ trợ di động
• Có thể đặt tiêu đề tài liệu bằng # Title hoặc thêm thuộc tính style vào thẻ <article> để lưu cùng trong URL
• Có thể truyền tài liệu chỉ bằng cách chia sẻ URL, hữu ích để chia sẻ ghi chú ngắn hoặc đoạn mã

---

Tổng quan

• textarea.my là một trình soạn thảo văn bản tối giản chạy hoàn toàn trong trình duyệt
  • Mọi dữ liệu được lưu trong URL hash, nên không cần máy chủ hay cơ sở dữ liệu riêng
  • Được tạo bằng JavaScript, có thể dùng ngay mà không cần cài đặt

Tính năng chính

• Nén văn bản (Compression magic)

  • Văn bản nhập vào được nén bằng thuật toán deflate để giảm tối đa độ dài URL
  • Có thể chia sẻ ghi chú dài bằng URL khoảng 500 ký tự

• Lưu và chia sẻ dựa trên URL

  • Nội dung đã viết được đưa vào URL hash, nên có thể sao chép liên kết đó để chia sẻ
  • Ngay cả khi không lưu trên máy chủ vẫn có thể khôi phục tài liệu chỉ bằng liên kết

• Tự động lưu và chế độ tối

  • Cung cấp tính năng tự động lưu với độ trễ 500ms sau khi nhập
  • Tự động áp dụng chế độ tối bằng cách nhận diện thiết lập chế độ màu của hệ thống

• Giao diện thân thiện với di động

  • Có thể soạn tài liệu trên smartphone với đầy đủ chức năng tương tự
  • Thiết kế responsive phù hợp để sử dụng khi đang di chuyển

• Kiến trúc không backend

  • Đúng như câu “Zero servers were harmed”, đây là ứng dụng hoàn toàn chạy phía client
  • Không có vấn đề về tải máy chủ hay lưu trữ dữ liệu cá nhân

Cách sử dụng

• Truy cập textarea.my và nhập nội dung ngay
• Có thể thấy URL dài ra dần khi nhập
• Có thể sao chép URL để chia sẻ với người khác

Mẹo nâng cao (Pro tips)

• Nếu nhập # Title ở dòng đầu tài liệu, nó sẽ được đặt làm tiêu đề trang
• Dữ liệu được lưu đồng thời ở localStorage và URL để bảo toàn kép
• Nếu thêm thuộc tính style vào thẻ <article> trong công cụ nhà phát triển, style đó cũng sẽ được lưu cùng trong URL

Liên kết ví dụ

• Cung cấp tài liệu ví dụ Crime and Punishment của Fyodor Dostoevsky
• Cung cấp tài liệu ví dụ An Ode to Comic Sans do ChatGPT viết

Đặc điểm kỹ thuật

• Được xây dựng trên JavaScript
• Quản lý dữ liệu chỉ bằng URL hash và localStorage, không cần request tới máy chủ
• Cấu trúc đơn giản giúp giảm thiểu rủi ro bảo mật và đảm bảo tốc độ tải nhanh

Kết luận

• textarea.my là trình soạn thảo văn bản siêu nhẹ chạy trong môi trường serverless,
  cung cấp cách tiếp cận độc đáo cho việc lưu và truyền tài liệu chỉ bằng chia sẻ URL
• Đây là công cụ phù hợp để developer hoặc designer ghi lại ý tưởng đơn giản, lưu ghi chú mã, viết tài liệu thử nghiệm

[GN⁺]

Ý kiến trên Hacker News

• Thú vị là tôi cũng đã làm gần như y hệt, chỉ khác là làm cho bản đồ
  Tôi cần một cách để vẽ lên bản đồ và chia sẻ liên kết để người khác có thể xem vị trí của họ
  Việc chú thích lên ảnh chụp màn hình giải quyết được vấn đề thứ nhất nhưng không giải quyết được vấn đề thứ hai
  Vì vậy tôi tự triển khai theo kiểu Vibe engineering
  Nó giống như một khái niệm “ứng dụng tức thời” cho một mục đích cụ thể
  Có thể host rẻ mà không cần backend nên có thể phát hành miễn phí
  Liên kết demo MapDraw

  • Quá tuyệt! Tôi đang dùng nó để lên kế hoạch du lịch
    Có thể thêm chú thích văn bản không? Và sẽ hay hơn nếu nút xóa không phải xóa toàn bộ mà chỉ xóa hình cuối cùng hoặc xóa theo lựa chọn
  • Cụm từ “Vibe engineered” buồn cười quá. vibe coding thì ổn, nhưng gọi nó là engineering thì thấy vui :D
  • Độ phản hồi của trang này tốt hơn rất nhiều so với bất kỳ ứng dụng bản đồ nào tôi từng dùng
  • Thật sự rất tuyệt! Một báo cáo lỗi nhỏ là khi di chuyển bản đồ thì hình vẽ đi theo mượt mà, nhưng khi phóng to/thu nhỏ thì hình chỉ di chuyển sau khi animation kết thúc
  • Dự án thật sự rất hay

• Sáng nay tôi cũng đang làm thứ gì đó tương tự
  Nếu dùng .toBase64({ alphabet: "base64url" }) và fromBase64({ alphabet: "base64url" }) thay vì replace trên chuỗi base64 thì sẽ gọn hơn
  Xem tài liệu MDN

• Theo spec thì URL có thể dài tối thiểu 8.000 ký tự
  Các trình duyệt lớn hỗ trợ hơn 64.000 ký tự, còn Chrome hỗ trợ tới 2MB
  RFC9110 mục 4.1-5, tham khảo StackOverflow, tài liệu Chromium

  • Chrome là 2MB, Firefox là 1MB, WebKit thì không có giới hạn
    Nhân tiện, cả liên kết toàn văn Crime and Punishment cũng có thể nhét vào URL
  • Có vẻ ngành công nghiệp giám sát đang làm URL ngày càng dài hơn để nhét thêm utm-tracker hay ID chiến dịch các kiểu
    Nhìn liên kết chia sẻ Instagram hay YouTube sẽ thấy có các tham số theo dõi dài hàng trăm ký tự
  • Xin lưu ý là character và octet không giống nhau. Nếu chưa được chuyển sang ASCII an toàn cho URI thì 1 ký tự không đồng nghĩa với 1 byte

• Tôi không hiểu vì sao lại lưu dữ liệu vào URL để làm nó phình ra. Lưu vào localStorage là đủ rồi mà?

• Trước đây tôi từng làm một thứ tương tự bằng bảng tính
  Nó chỉ hoạt động sau khi chuyển tab trong ô nhập liệu rồi làm mới trang
  Liên kết ví dụ
  Toàn bộ mã chỉ khoảng 130 dòng
  Thêm nhiều ví dụ

• Tôi đã làm một framework JS nhỏ để có thể triển khai kiểu chia sẻ dựa trên URL này dễ dàng
  Liên kết GitHub lost.js

• Tôi thích cách tiếp cận này từ góc độ quyền riêng tư
  Vì thế tôi đang nghĩ đến việc thêm tùy chọn lưu vào URL cho editor kraa.io của mình

  • Tuy nhiên về mặt privacy thì textarea.my có chứa script theo dõi
    Có chèn mã beacon của Cloudflare nên cần lưu ý
  • Vậy thì liệu nó có lợi thế gì hơn về quyền riêng tư so với việc dùng trình soạn thảo văn bản native cục bộ không?

• Trước đây tôi đã làm thứ tương tự cho tab guitar
  Xem tabviewer.app
  Tôi giải quyết vấn đề URL quá dài bằng cách dùng dịch vụ rút gọn URL

  • Tôi cũng làm một trình soạn thảo tab cho cùng mục đích
    Kho GitHub

• Dự án rất hay, nhưng khi tôi mở “Crime and Punishment” thì trình duyệt di động của tôi bị crash
  Có vẻ URL không được thiết kế để chịu loại ‘hình phạt’ đó

• Quảng bá một chút thì tôi cũng từng làm thứ tương tự, nhưng chẳng ai quan tâm
  Liên kết GitHub Buffertab

  • Tính năng nhập giọng nói khá thú vị. Không biết bạn đã từng nghĩ đến việc dùng Whisper wasm thay vì OpenAI API chưa?