Đoạn văn bản cho phép bạn chỉ định một đoạn văn bản trong mảnh URL. Khi điều hướng đến một URL có mảnh văn bản như vậy, trình duyệt có thể làm nổi bật và/hoặc thu hút sự chú ý của người dùng.
Giá trị nhận dạng mảnh
Chrome 80 là một bản phát hành lớn. Bản phát hành này chứa một số tính năng được mong đợi như Mô-đun ECMAScript trong Trình chạy web, hợp nhất giá trị rỗng, chuỗi tuỳ chọn và nhiều tính năng khác. Như thường lệ, bản phát hành này được công bố thông qua một bài đăng trên blog trên blog Chromium. Bạn có thể xem một đoạn trích của bài đăng trên blog trong ảnh chụp màn hình bên dưới.
Có thể bạn đang tự hỏi tất cả các hộp màu đỏ có ý nghĩa gì. Đây là kết quả của việc chạy đoạn mã sau trong DevTools. Thao tác này sẽ làm nổi bật tất cả các phần tử có thuộc tính id
.
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
Tôi có thể đặt đường liên kết sâu đến bất kỳ phần tử nào được đánh dấu bằng hộp màu đỏ nhờ mã nhận dạng mảnh mà sau đó tôi sử dụng trong bộ băm của URL trang. Giả sử tôi muốn liên kết sâu đến hộp Gửi ý kiến phản hồi cho chúng tôi trong Diễn đàn sản phẩm ở bên cạnh, tôi có thể thực hiện việc này bằng cách tạo URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1
theo cách thủ công.
Như bạn có thể thấy trong ngăn Elements (Thành phần) của Developer Tools (Công cụ cho nhà phát triển), phần tử có liên quan có thuộc tính id
với giá trị HTML1
.
Nếu tôi phân tích cú pháp URL này bằng hàm khởi tạo URL()
của JavaScript, thì các thành phần khác nhau sẽ được hiển thị.
Lưu ý thuộc tính hash
có giá trị #HTML1
.
new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
hash: "#HTML1"
host: "blog.chromium.org"
hostname: "blog.chromium.org"
href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
origin: "https://blog.chromium.org"
password: ""
pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
*/
Tuy nhiên, việc tôi phải mở Công cụ cho nhà phát triển để tìm id
của một phần tử cho thấy nhiều điều về khả năng tác giả bài đăng trên blog muốn liên kết đến phần cụ thể này của trang.
Nếu tôi muốn liên kết đến một nội dung không có id
thì sao? Giả sử tôi muốn liên kết đến tiêu đề ECMAScript Modules
in Web Workers (Mô-đun ECMAScript trong Web Worker). Như bạn có thể thấy trong ảnh chụp màn hình bên dưới, <h1>
có liên quan không có thuộc tính id
, nghĩa là tôi không thể liên kết đến tiêu đề này. Đây là vấn đề mà Text Fragment giải quyết.
Mảnh văn bản
Đề xuất Mảnh văn bản thêm tính năng hỗ trợ cho việc chỉ định một đoạn văn bản trong hàm băm URL. Khi điều hướng đến một URL có mảnh văn bản như vậy, tác nhân người dùng có thể làm nổi bật và/hoặc thu hút sự chú ý của người dùng.
Khả năng tương thích với trình duyệt
Vì lý do bảo mật, tính năng này yêu cầu các đường liên kết phải được mở trong bối cảnh noopener
.
Do đó, hãy nhớ đưa rel="noopener"
vào mã đánh dấu neo <a>
hoặc thêm noopener
vào danh sách Window.open()
các tính năng chức năng của cửa sổ.
start
Ở dạng đơn giản nhất, cú pháp của Mảnh văn bản như sau: Ký hiệu dấu thăng #
, theo sau là :~:text=
và cuối cùng là start
, đại diện cho văn bản được mã hoá theo tỷ lệ phần trăm mà tôi muốn liên kết.
#:~:text=start
Ví dụ: giả sử tôi muốn liên kết đến tiêu đề ECMAScript Modules in Web Workers (Mô-đun ECMAScript trong Web Worker) trong bài đăng trên blog thông báo về các tính năng trong Chrome 80, thì URL trong trường hợp này sẽ là:
Mảnh văn bản được làm nổi bật như thế này. Nếu bạn nhấp vào đường liên kết trong một trình duyệt hỗ trợ như Chrome, mảnh văn bản sẽ được đánh dấu và cuộn vào chế độ xem:
start
và end
Bây giờ, nếu tôi muốn liên kết đến toàn bộ phần có tiêu đề ECMAScript Modules in Web Workers (Mô-đun ECMAScript trong Web Worker), chứ không chỉ tiêu đề của phần đó thì sao? Việc mã hoá phần trăm toàn bộ văn bản của phần này sẽ khiến URL thu được quá dài.
May mắn là có một cách tốt hơn. Thay vì toàn bộ văn bản, tôi có thể tạo khung cho văn bản mong muốn bằng cách sử dụng cú pháp start,end
. Do đó, tôi chỉ định một vài từ được mã hoá theo tỷ lệ phần trăm ở đầu văn bản mong muốn và một vài từ được mã hoá theo tỷ lệ phần trăm ở cuối văn bản mong muốn, được phân tách bằng dấu phẩy ,
.
Mã sẽ có dạng như sau:
Đối với start
, tôi có ECMAScript%20Modules%20in%20Web%20Workers
, sau đó là dấu phẩy ,
, theo sau là ES%20Modules%20in%20Web%20Workers.
dưới dạng end
. Khi bạn nhấp vào một trình duyệt hỗ trợ như Chrome, toàn bộ phần này sẽ được làm nổi bật và cuộn vào chế độ xem:
Bây giờ, bạn có thể thắc mắc về lựa chọn start
và end
của tôi. Thực tế, URL ngắn hơn một chút https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.
chỉ có hai từ ở mỗi bên cũng sẽ hoạt động. So sánh start
và end
với các giá trị trước đó.
Nếu tôi tiến thêm một bước và hiện chỉ sử dụng một từ cho cả start
và end
, bạn có thể thấy rằng tôi đang gặp vấn đề. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.
giờ đây còn ngắn hơn nữa, nhưng mảnh văn bản được làm nổi bật không còn là mảnh văn bản ban đầu mong muốn. Việc làm nổi bật dừng lại ở lần xuất hiện đầu tiên của từ Workers.
, điều này là chính xác, nhưng không phải là nội dung tôi muốn làm nổi bật. Vấn đề là phần mong muốn không được xác định duy nhất bằng các giá trị start
và end
hiện tại gồm một từ:
prefix-
và -suffix
Sử dụng các giá trị đủ dài cho start
và end
là một giải pháp để lấy đường liên kết duy nhất.
Tuy nhiên, trong một số trường hợp, bạn không thể làm như vậy. Ngoài ra, tại sao tôi chọn bài đăng trên blog về bản phát hành Chrome 80 làm ví dụ? Câu trả lời là trong bản phát hành này, chúng tôi đã giới thiệu các Mảnh văn bản:
Hãy lưu ý cách từ "text" xuất hiện bốn lần trong ảnh chụp màn hình ở trên. Lần xuất hiện thứ tư được viết bằng phông chữ mã màu xanh lục. Nếu muốn liên kết đến từ cụ thể này, tôi sẽ đặt start
thành text
. Vì từ "text" (văn bản) chỉ có một từ nên không thể có end
. Chúng tôi nên làm gì? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text
khớp tại lần xuất hiện đầu tiên của từ "Văn bản" đã có trong tiêu đề:
May mắn là có một giải pháp. Trong trường hợp như vậy, tôi có thể chỉ định prefix-
và -suffix
. Từ trước phông chữ mã màu xanh lục "text" (văn bản) là "the" (cái) và từ sau là "parameter" (thông số). Không có trường hợp nào khác của từ "text" (văn bản) có cùng các từ xung quanh. Với kiến thức này, tôi có thể điều chỉnh URL trước đó và thêm prefix-
và -suffix
. Giống như các tham số khác, các tham số này cũng cần được mã hoá theo tỷ lệ phần trăm và có thể chứa nhiều từ.
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter
.
Để cho phép trình phân tích cú pháp xác định rõ ràng prefix-
và -suffix
, bạn cần phân tách các phần tử này với start
và end
(không bắt buộc) bằng dấu gạch ngang -
.
Cú pháp đầy đủ
Dưới đây là cú pháp đầy đủ của Mảnh văn bản. (Dấu ngoặc vuông biểu thị một tham số không bắt buộc.)
Giá trị của tất cả tham số cần được mã hoá theo phần trăm. Điều này đặc biệt quan trọng đối với các ký tự dấu gạch ngang -
, dấu và &
và dấu phẩy ,
, vì vậy, các ký tự này không được diễn giải là một phần của cú pháp lệnh văn bản.
#:~:text=[prefix-,]start[,end][,-suffix]
Mỗi prefix-
, start
, end
và -suffix
sẽ chỉ so khớp văn bản trong một phần tử cấp khối, nhưng phạm vi start,end
đầy đủ có thể trải dài trên nhiều khối. Ví dụ: :~:text=The quick,lazy dog
sẽ không khớp trong ví dụ sau, vì chuỗi bắt đầu "The quick" không xuất hiện trong một phần tử cấp khối không bị gián đoạn:
<div>
The
<div></div>
quick brown fox
</div>
<div>jumped over the lazy dog</div>
Tuy nhiên, trong ví dụ này, giá trị này khớp:
<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>
Tạo URL mảnh văn bản bằng tiện ích trình duyệt
Việc tạo URL cho Đoạn văn bản theo cách thủ công sẽ rất tẻ nhạt, đặc biệt là khi bạn muốn đảm bảo các URL đó là duy nhất. Nếu bạn thực sự muốn, quy cách này có một số mẹo và liệt kê chính xác các bước để tạo URL Mảnh văn bản. Chúng tôi cung cấp một tiện ích trình duyệt nguồn mở có tên là Đường liên kết đến Mảnh văn bản. Tiện ích này cho phép bạn liên kết đến bất kỳ văn bản nào bằng cách chọn văn bản đó, sau đó nhấp vào "Sao chép đường liên kết đến văn bản đã chọn" trong trình đơn theo bối cảnh. Tiện ích này có sẵn cho các trình duyệt sau:
- Liên kết đến Mảnh văn bản cho Google Chrome
- Liên kết đến Mảnh văn bản cho Microsoft Edge
- Đường liên kết đến Mảnh văn bản cho Mozilla Firefox
- Đường liên kết đến Mảnh văn bản cho Apple Safari
Nhiều mảnh văn bản trong một URL
Xin lưu ý rằng một URL có thể chứa nhiều mảnh văn bản. Các đoạn văn bản cụ thể cần được phân tách bằng ký tự dấu và &
. Sau đây là một đường liên kết mẫu có 3 mảnh văn bản:
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet
.
Kết hợp phần tử và mảnh văn bản
Bạn có thể kết hợp các mảnh phần tử truyền thống với các mảnh văn bản. Bạn hoàn toàn có thể đưa cả hai vào cùng một URL, chẳng hạn như để cung cấp một phương án dự phòng có ý nghĩa trong trường hợp văn bản gốc trên trang thay đổi, khiến mảnh văn bản không khớp nữa. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.
liên kết đến phần Gửi ý kiến phản hồi cho chúng tôi trong Diễn đàn sản phẩm chứa cả mảnh phần tử (HTML1
) và mảnh văn bản (text=Give%20us%20feedback%20in%20our%20Product%20Forums.
):
Lệnh mảnh
Có một phần tử cú pháp mà tôi chưa giải thích: lệnh phân mảnh :~:
. Để tránh các vấn đề về khả năng tương thích với các mảnh phần tử URL hiện có như minh hoạ ở trên, Thông số kỹ thuật về mảnh văn bản sẽ giới thiệu lệnh mảnh. Lệnh mảnh là một phần của mảnh URL được phân tách bằng trình tự mã :~:
. Thuộc tính này được dành riêng cho các hướng dẫn của tác nhân người dùng, chẳng hạn như text=
, và bị xoá khỏi URL trong quá trình tải để các tập lệnh của tác giả không thể trực tiếp tương tác với thuộc tính này. Hướng dẫn tác nhân người dùng cũng được gọi là lệnh. Trong trường hợp cụ thể, text=
được gọi là lệnh văn bản.
Phát hiện tính năng
Để phát hiện tính năng hỗ trợ, hãy kiểm thử thuộc tính fragmentDirective
chỉ có thể đọc trên document
. Chỉ thị mảnh là một cơ chế để các URL chỉ định hướng dẫn dành cho trình duyệt thay vì tài liệu. Mục đích của việc này là để tránh tương tác trực tiếp với tập lệnh của tác giả, nhờ đó, bạn có thể thêm các hướng dẫn về tác nhân người dùng trong tương lai mà không lo ngại việc đưa ra các thay đổi có thể gây lỗi cho nội dung hiện có. Một ví dụ tiềm năng về những nội dung bổ sung trong tương lai như vậy có thể là gợi ý bản dịch.
if ('fragmentDirective' in document) {
// Text Fragments is supported.
}
Tính năng phát hiện tính năng chủ yếu dành cho các trường hợp đường liên kết được tạo động (ví dụ: do công cụ tìm kiếm tạo) để tránh phân phát các đường liên kết mảnh văn bản đến những trình duyệt không hỗ trợ các đường liên kết đó.
Tạo kiểu cho các mảnh văn bản
Theo mặc định, trình duyệt tạo kiểu cho các mảnh văn bản giống như cách tạo kiểu cho mark
(thường là màu đen trên nền vàng, màu hệ thống CSS cho mark
). Tệp kiểu của tác nhân người dùng chứa CSS như sau:
:root::target-text {
color: MarkText;
background: Mark;
}
Như bạn có thể thấy, trình duyệt hiển thị một bộ chọn giả
::target-text
mà bạn có thể sử dụng để
tuỳ chỉnh hoạt động làm nổi bật đã áp dụng. Ví dụ: bạn có thể thiết kế các mảnh văn bản là văn bản màu đen trên nền đỏ. Như mọi khi, hãy nhớ kiểm tra độ tương phản màu để kiểu ghi đè không gây ra vấn đề về khả năng hỗ trợ tiếp cận và đảm bảo phần đánh dấu thực sự nổi bật so với phần nội dung còn lại.
:root::target-text {
color: black;
background-color: red;
}
Khả năng chèn nội dung
Tính năng Mảnh văn bản có thể được polyfill ở một mức độ nào đó. Chúng tôi cung cấp một polyfill (mã bổ trợ) do tiện ích sử dụng nội bộ cho những trình duyệt không tích hợp sẵn tính năng hỗ trợ cho Mảnh văn bản mà chức năng được triển khai trong JavaScript.
Tạo đường liên kết Mảnh văn bản có lập trình
Polyfill chứa một tệp fragment-generation-utils.js
mà bạn có thể nhập và sử dụng để tạo đường liên kết Mảnh văn bản. Điều này được nêu trong mã mẫu bên dưới:
const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
let url = `${location.origin}${location.pathname}${location.search}`;
const fragment = result.fragment;
const prefix = fragment.prefix ?
`${encodeURIComponent(fragment.prefix)}-,` :
'';
const suffix = fragment.suffix ?
`,-${encodeURIComponent(fragment.suffix)}` :
'';
const start = encodeURIComponent(fragment.textStart);
const end = fragment.textEnd ?
`,${encodeURIComponent(fragment.textEnd)}` :
'';
url += `#:~:text=${prefix}${start}${end}${suffix}`;
console.log(url);
}
Thu thập Mảnh văn bản cho mục đích phân tích
Nhiều trang web sử dụng mảnh để định tuyến, đó là lý do trình duyệt loại bỏ các Mảnh văn bản để không làm hỏng các trang đó. Chúng tôi nhận thấy cần thiết phải hiển thị các đường liên kết đến các trang của Mảnh văn bản, chẳng hạn như cho mục đích phân tích, nhưng giải pháp đề xuất chưa được triển khai. Hiện tại, để khắc phục vấn đề này, bạn có thể sử dụng mã bên dưới để trích xuất thông tin mong muốn.
new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
Bảo mật
Chỉ lệnh mảnh văn bản chỉ được gọi trên các thao tác điều hướng đầy đủ (không phải cùng trang) là kết quả của một lượt kích hoạt của người dùng.
Ngoài ra, các thao tác điều hướng bắt nguồn từ một nguồn gốc khác với đích đến sẽ yêu cầu thao tác điều hướng diễn ra trong ngữ cảnh noopener
, chẳng hạn như trang đích được biết là đủ tách biệt. Chỉ áp dụng lệnh mảnh văn bản cho khung chính. Điều này có nghĩa là văn bản sẽ không được tìm kiếm bên trong iframe và thao tác điều hướng trong iframe sẽ không gọi một mảnh văn bản.
Quyền riêng tư
Điều quan trọng là việc triển khai quy cách của Mảnh văn bản không làm rò rỉ thông tin về việc có tìm thấy mảnh văn bản trên trang hay không. Mặc dù tác giả trang ban đầu có toàn quyền kiểm soát các mảnh phần tử, nhưng bất kỳ ai cũng có thể tạo mảnh văn bản. Hãy nhớ trong ví dụ ở trên, không có cách nào để liên kết đến tiêu đề ECMAScript Modules in Web Workers (Mô-đun ECMAScript trong Web Worker), vì <h1>
không có id
, nhưng làm cách nào để mọi người, kể cả tôi, có thể liên kết đến bất cứ đâu bằng cách tạo cẩn thận mảnh văn bản?
Hãy tưởng tượng tôi điều hành một mạng quảng cáo độc hại evil-ads.example.com
. Hãy tưởng tượng thêm rằng trong một trong các iframe quảng cáo, tôi đã tạo một iframe đa nguồn gốc ẩn cho dating.example.com
bằng URL mảnh văn bản dating.example.com#:~:text=Log%20Out
sau khi người dùng tương tác với quảng cáo. Nếu tìm thấy văn bản "Đăng xuất", tôi biết rằng nạn nhân hiện đang đăng nhập vào dating.example.com
. Tôi có thể sử dụng thông tin này để lập hồ sơ người dùng. Vì việc triển khai Text Fragments một cách đơn giản có thể quyết định rằng một lần so khớp thành công sẽ gây ra sự chuyển đổi tiêu điểm, nên trên evil-ads.example.com
, tôi có thể nghe sự kiện blur
và do đó biết được thời điểm xảy ra sự khớp. Trong Chrome, chúng tôi đã triển khai Mảnh văn bản theo cách không thể xảy ra trường hợp trên.
Một cuộc tấn công khác có thể là khai thác lưu lượng truy cập mạng dựa trên vị trí cuộn. Giả sử tôi có quyền truy cập vào các nhật ký lưu lượng truy cập mạng của nạn nhân, chẳng hạn như quản trị viên của mạng nội bộ của công ty. Bây giờ, hãy tưởng tượng có một tài liệu nhân sự dài Những việc cần làm nếu bạn mắc phải…, sau đó là danh sách các tình trạng như mệt mỏi, lo lắng, v.v. Tôi có thể đặt một pixel theo dõi bên cạnh mỗi mục trong danh sách. Sau đó, nếu xác định được việc tải tài liệu trùng khớp với thời điểm tải pixel theo dõi bên cạnh mục burn out (quá tải), thì với tư cách là quản trị viên mạng nội bộ, tôi có thể xác định rằng một nhân viên đã nhấp vào đường liên kết mảnh văn bản có :~:text=burn%20out
mà nhân viên đó có thể cho rằng là thông tin bảo mật và không ai có thể nhìn thấy. Vì ví dụ này có phần được dàn dựng từ đầu và vì việc khai thác ví dụ này đòi hỏi phải đáp ứng các điều kiện tiên quyết rất cụ thể, nên nhóm bảo mật của Chrome đã đánh giá rủi ro khi triển khai tính năng cuộn khi điều hướng để có thể quản lý được.
Các tác nhân người dùng khác có thể quyết định hiển thị một phần tử giao diện người dùng cuộn thủ công.
Đối với những trang web muốn chọn không sử dụng, Chromium hỗ trợ giá trị tiêu đề Chính sách tài liệu mà các trang web này có thể gửi để các tác nhân người dùng không xử lý URL Mảnh văn bản.
Document-Policy: force-load-at-top
Tắt các mảnh văn bản
Cách dễ nhất để tắt tính năng này là sử dụng một tiện ích có thể chèn tiêu đề phản hồi HTTP, ví dụ: ModHeader (không phải sản phẩm của Google) để chèn tiêu đề phản hồi (không phải yêu cầu) như sau:
Document-Policy: force-load-at-top
Một cách khác để chọn không sử dụng, phức tạp hơn một chút là sử dụng chế độ cài đặt dành cho doanh nghiệp ScrollToTextFragmentEnabled
.
Để thực hiện việc này trên macOS, hãy dán lệnh bên dưới vào dòng lệnh.
defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
Trên Windows, hãy làm theo tài liệu trên trang hỗ trợ Trợ giúp Google Chrome Enterprise.
Mảnh văn bản trong kết quả tìm kiếm trên web
Đối với một số cụm từ tìm kiếm, công cụ tìm kiếm Google sẽ cung cấp một câu trả lời nhanh hoặc thông tin tóm tắt có kèm theo trích đoạn nội dung từ một trang web có liên quan. Những đoạn trích nổi bật này có nhiều khả năng xuất hiện khi một cụm từ tìm kiếm ở dạng câu hỏi. Khi nhấp vào một đoạn trích nổi bật, người dùng sẽ được đưa thẳng đến văn bản dùng để tạo đoạn trích nổi bật đó trên trang web nguồn. Điều này hoạt động nhờ các URL Mảnh văn bản được tạo tự động.
Kết luận
URL của đoạn văn bản là một tính năng mạnh mẽ để liên kết đến văn bản tuỳ ý trên trang web. Cộng đồng học thuật có thể sử dụng công cụ này để cung cấp các đường liên kết tham chiếu hoặc trích dẫn có độ chính xác cao. Các công cụ tìm kiếm có thể sử dụng thuộc tính này để liên kết sâu đến kết quả văn bản trên các trang. Các trang mạng xã hội có thể sử dụng tính năng này để cho phép người dùng chia sẻ các đoạn cụ thể trên trang web thay vì ảnh chụp màn hình không truy cập được. Tôi hy vọng bạn sẽ bắt đầu sử dụng URL Mảnh văn bản và thấy chúng hữu ích như tôi. Hãy nhớ cài đặt tiện ích trình duyệt Đường liên kết đến Mảnh văn bản.
Đường liên kết có liên quan
- Bản nháp thông số kỹ thuật
- Bài đánh giá TAG
- Mục Trạng thái của nền tảng Chrome
- Lỗi theo dõi trên Chrome
- Chuỗi ý định vận chuyển
- Luồng WebKit-Dev
- Diễn đàn về quan điểm của Mozilla về tiêu chuẩn
Lời cảm ơn
Nick Burris và David Bokan đã triển khai và chỉ định các Mảnh văn bản, với sự đóng góp của Grant Wang. Cảm ơn Joe Medley đã xem xét kỹ lưỡng bài viết này. Hình ảnh chính của Greg Rakozy trên Unsplash.