Tự động thêm tiền tố cho URL - chi tiết nhỏ giúp tiết kiệm thời gian

Trong biểu mẫu rút gọn liên kết, bạn sẽ nhập allegro.pl. Hầu hết các công cụ rút gọn sẽ báo rằng đó không phải là URL hợp lệ và yêu cầu bạn nhập lại với https:// ở đầu. cutty.dev tự động thêm https:// và tiếp tục xử lý.

Điều này nghe như một tính năng chỉ vừa đủ để được nhắc đến. Trong thực tế, đó là sự khác biệt giữa:

• "dán vào, có liên kết ngắn, đóng cửa sổ" (2 giây)
• "dán vào, lỗi, đọc thông báo, thêm https, thử lại, có liên kết" (15-20 giây)

Nhân với số lần trong tháng bạn dán URL, cộng thêm sự bực bội khi đọc lỗi, cộng thêm khoảnh khắc “à không, đúng rồi, giao thức”. Một chi tiết nhỏ được đo bằng phút mỗi người mỗi tháng.

Cutty.dev chính xác làm gì

Bạn đã dán văn bản vào biểu mẫu. Trước khi gửi đến máy chủ, JavaScript kiểm tra xem nó có bắt đầu bằng một giao thức nào đó (http://, https://, ftp://, mailto: v.v.) hay không. Nếu không bắt đầu — hệ thống giả định rằng đó chỉ là tên miền không có giao thức và thêm https:// vào phía trước.

Cụ thể:

• allegro.pl → https://allegro.pl
• github.com/twoj-profil/projekt → https://github.com/twoj-profil/projekt
• www.gazeta.pl → https://www.gazeta.pl

Và nếu đã có giao thức (dù không đúng), hệ thống giữ nguyên và tiếp tục kiểm tra:

• http://example.com → giữ nguyên http://example.com (được phép)
• ftp://example.com → bị từ chối (chỉ http/https)
• javascript:alert(1) → bị từ chối (bảo vệ XSS)

Tại sao tôi có cái này, còn người khác thì không

Hầu hết các trình rút gọn URL đều thực hiện xác thực URL tiêu chuẩn thông qua new URL(string). Hàm tạo URL trong trình duyệt/JavaScript là strict — nếu không có giao thức, nó sẽ ném ra lỗi. Kết quả mặc định cho new URL("allegro.pl") là TypeError.

Đây là hành vi đúng đắn đối với hầu hết các ứng dụng. Tuy nhiên, đối với một biểu mẫu rút gọn liên kết, nơi người dùng dán URL sao chép từ thanh địa chỉ hoặc từ một ứng dụng khác, tính nghiêm ngặt này lại là trở ngại thay vì sự hỗ trợ.

Giải pháp chỉ gồm năm dòng mã JavaScript:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalsza walidacja przez new URL(normalized)
}

Năm dòng mã, vài chục giây ít sự thất vọng hơn trên mỗi người dùng mỗi ngày. Tôi không hiểu tại sao phần lớn thị trường lại không làm điều này. Có lẽ vì “tiêu chuẩn” nghĩa là “trình xây dựng URL hoạt động như vậy”.

Những chi tiết nhỏ trong UX có tầm quan trọng không tương xứng

cutty.dev có một vài thứ như vậy mà không nằm trong bất kỳ danh sách tính năng nào, vì mỗi thứ riêng lẻ nghe có vẻ tầm thường:

• Xóa khoảng trắng trước khi xác thực — URL dán vào có khoảng trắng ở cuối không gây ra lỗi
• Hash được giữ nguyên — https://example.com/page#section giữ lại #section sau khi rút gọn
• Chuỗi truy vấn được giữ nguyên — ?utm_source=test đi qua mà không bị cắt ngắn
• Nâng cấp giao thức tự động — http:// thành https:// khi URL nguồn hỗ trợ TLS (đã lên kế hoạch, chưa LIVE)
• Tên miền IDN — źdźbło.pl được chuyển đổi sang punycode tự động
• Dấu tiếng Ba Lan trong slug — tự động chuyển thành ASCII khi tạo phần đuôi tùy chỉnh (różowy-link → rozowy-link)
• Phát hiện giao thức nguy hiểm — javascript:, data:, file:, mailto: bị từ chối với thông báo cụ thể

Mỗi chi tiết này giúp tiết kiệm cho ai đó từ 5 đến 30 giây và một khoảnh khắc bực bội. Cùng nhau, đó là sự khác biệt giữa “tôi thích ứng dụng này” và “nó hoạt động ổn”.

Tiếp theo với chi tiết UX

Danh sách những việc tôi muốn làm trong tương lai:

• Dán thông minh — phát hiện khi người dùng dán văn bản chứa URL nằm giữa các từ khác, trích xuất riêng URL
• Dán hàng loạt — danh sách URL được dán (mỗi URL trên một dòng) tạo ra nhiều liên kết ngắn cùng lúc
• Gợi ý slug — dựa trên tiêu đề của trang đích, đề xuất 3 phần đuôi thương hiệu để người dùng lựa chọn
• Xem trước OG tự động — hiển thị xem trước thẻ Open Graph ngay sau khi dán URL, trước khi nhấn vào liên kết

Mỗi cái trong số đó cũng là một “hàm năm dòng trông như chẳng có gì”. Tất cả cộng lại tạo nên sự khác biệt giữa một công cụ chỉ ở mức ổn và một công cụ bạn muốn sử dụng mỗi ngày.

Hãy thử tự làm

Dán nội dung — allegro.pl hoặc github.com hoặc news.ycombinator.com. Hệ thống sẽ tự động thêm giao thức và tiếp tục xử lý. Không cần chờ đợi, không có lỗi, không có thông báo "thử lại".

Nếu loại chi tiết UX này thu hút bạn — hãy cho tôi biết nên đi theo hướng nào tiếp theo. hello@cutty.dev.