[{"data":1,"prerenderedAt":211},["ShallowReactive",2],{"blog:page:\u002Fvi\u002Fblog\u002Freading-first-design":3,"blog:articles:vi":152,"blog:translations:\u002Fvi\u002Fblog\u002Freading-first-design":208},{"id":4,"title":5,"author":6,"body":7,"cover":137,"coverAlt":138,"date":139,"description":140,"extension":141,"featured":142,"meta":143,"navigation":144,"path":145,"seo":146,"stem":147,"tags":148,"__hash__":151},"blog\u002Fvi\u002Fblog\u002F5.reading-first-design\u002Findex.md","Trang đọc bài không phải trang tài liệu","John Martin",{"type":8,"value":9,"toc":128},"minimark",[10,14,18,23,26,33,37,40,44,88,99,108,114,117],[11,12,5],"h1",{"id":13},"trang-đọc-bài-không-phải-trang-tài-liệu",[15,16,17],"p",{},"Nền tảng có một bề mặt tài liệu với layout ba cột: cây điều hướng, nội dung,\ntable of contents. Layout đó đúng cho tài liệu tra cứu và sai cho article.\nBài này nói về những khác biệt quan trọng.",[19,20,22],"h2",{"id":21},"phân-cấp-theo-sự-chú-ý","Phân cấp theo sự chú ý",[15,24,25],{},"Reader tài liệu scan để tìm một mục. Reader article dấn thân vào một dòng.\nNên trang article chỉ giữ một cột hẹp, đẩy điều hướng ra hai đầu đường đọc -\ntrước, sau, bài liên quan - và đứng sang một bên ở giữa chừng.",[15,27,28],{},[29,30],"img",{"alt":31,"src":32},"Sơ đồ một website public gồm ba tầng xếp chồng, từ trang xuống phân phối tĩnh","\u002Fassets\u002Fpublic-web-layers.svg",[19,34,36],{"id":35},"bề-rộng-là-một-quyết-định-đọc","Bề rộng là một quyết định đọc",[15,38,39],{},"Một dòng văn chạy quá rộng làm mắt lạc ở mỗi lần quét về đầu dòng. Cột article\nbị chặn ở một bề rộng chọn cho văn xuôi, không phải cho terminal. Code block\ncó scroll ngang riêng thay vì kéo giãn cột cho mọi reader chỉ vì một dòng dài.",[19,41,43],{"id":42},"tiết-chế-ở-phần-đầu","Tiết chế ở phần đầu",[45,46,47,60],"table",{},[48,49,50],"thead",{},[51,52,53,57],"tr",{},[54,55,56],"th",{},"Trang docs",[54,58,59],{},"Trang article",[61,62,63,72,80],"tbody",{},[51,64,65,69],{},[66,67,68],"td",{},"Table of contents",[66,70,71],{},"không có",[51,73,74,77],{},[66,75,76],{},"Breadcrumb",[66,78,79],{},"link về trang blog",[51,81,82,85],{},[66,83,84],{},"Cây tham chiếu chéo",[66,86,87],{},"các bài liên quan",[15,89,90,91,95,96],{},"Không danh sách nào tốt hơn. Chúng trả lời hai câu hỏi khác nhau: ",[92,93,94],"em",{},"tôi đang ở\nđâu trong tài liệu?"," và ",[92,97,98],{},"nên đọc gì tiếp theo?",[19,100,102,103,107],{"id":101},"một-main-navigation-có-tên","Một ",[104,105,106],"code",{},"\u003Cmain>",", navigation có tên",[15,109,110,111,113],{},"Cả hai bề mặt dùng chung public shell, nên cả hai cùng thừa hưởng cùng một\nsàn accessibility: một landmark ",[104,112,106],{}," duy nhất, skip link, và mọi vùng\nnavigation mang một tên truy cập được phân biệt. Dùng chung shell là thứ làm\nsàn đó trở nên miễn phí.",[115,116],"hr",{},[15,118,119],{},[92,120,121,122,127],{},"Cơ chế đằng sau shared shell cũng chính là những cơ chế đằng sau ",[123,124,126],"a",{"href":125},"\u002Fen\u002Fblog\u002Flocale-switching","locale\nswitching",".",{"title":129,"searchDepth":130,"depth":130,"links":131},"",2,[132,133,134,135],{"id":21,"depth":130,"text":22},{"id":35,"depth":130,"text":36},{"id":42,"depth":130,"text":43},{"id":101,"depth":130,"text":136},"Một \u003Cmain>, navigation có tên","\u002Fassets\u002Fcover-reading-first.svg","Minh họa bìa: bố cục một cột hẹp được chọn thay vì bố cục nhiều cột rối rắm","2026-09-30","Vì sao layout article của blog cố tình khác layout docs - phân cấp thông tin, bề rộng cột, và sự tiết chế.","md",false,{},true,"\u002Fvi\u002Fblog\u002Freading-first-design",{"title":5,"description":140},"vi\u002Fblog\u002F5.reading-first-design\u002Findex",[149,150],"design","typography","LdX7BhRdpnlqfasBtV7kldiYEy2n_1XtYgA41Qqpox4",[153,161,164,176,188,197],{"path":154,"stem":155,"title":156,"description":157,"date":158,"author":6,"tags":159,"featured":142},"\u002Fvi\u002Fblog\u002Fdemo-content-note","vi\u002Fblog\u002F6.demo-content-note\u002Findex","Blog này là gì (và không phải gì)","Đây là một vertical slice demo - layout thật, pipeline thật, content editorial một cách có chủ ý.","2026-10-07",[160],"meta",{"path":145,"stem":147,"title":5,"description":140,"date":139,"author":6,"tags":162,"featured":142,"cover":163},[149,150],{"src":137,"alt":138},{"path":165,"stem":166,"title":167,"description":168,"date":169,"author":6,"tags":170,"featured":142,"cover":173},"\u002Fvi\u002Fblog\u002Fstatic-deployment","vi\u002Fblog\u002F4.static-deployment\u002Findex","Deploy một blog như static assets","Không Worker script, không database binding - toàn bộ deployment là một thư mục file và một trang 404.","2026-09-23",[171,172],"deployment","cloudflare",{"src":174,"alt":175},"\u002Fassets\u002Fcover-static-deployment.svg","Minh họa bìa: thư mục các tệp HTML và SVG chảy ra mạng lưới edge CDN",{"path":177,"stem":178,"title":179,"description":180,"date":181,"author":6,"tags":182,"featured":142,"cover":185},"\u002Fvi\u002Fblog\u002Flocale-switching","vi\u002Fblog\u002F3.locale-switching\u002Findex","Locale switching không bao giờ nói dối","Language switcher chỉ được offer thứ tồn tại. Đây là cách danh sách link được suy ra từ content thật.","2026-09-16",[183,184],"i18n","ux",{"src":186,"alt":187},"\u002Fassets\u002Ftwo-locales-one-page.svg","Minh họa bìa: hai đường dẫn ngôn ngữ hội tụ về cùng một bố cục trang",{"path":189,"stem":190,"title":191,"description":192,"date":193,"author":6,"tags":194,"featured":142},"\u002Fvi\u002Fblog\u002Fbuild-time-content","vi\u002Fblog\u002F2.build-time-content\u002Findex","Content được resolve ở build time","Vì sao blog này ship dưới dạng file prerender thay vì một content API - và điều đó mua được gì.","2026-09-09",[195,196],"architecture","static-sites",{"path":198,"stem":199,"title":200,"description":201,"date":202,"author":6,"tags":203,"featured":144,"cover":205},"\u002Fvi\u002Fblog\u002Furl-model","vi\u002Fblog\u002F1.url-model\u002Findex","Một mô hình URL cho mọi trang public","\u002Flocale\u002Fmount\u002Fpath giữ cho mọi trang public đoán được - và vì sao ta ràng buộc nó thay vì hy vọng nó được tuân thủ.","2026-09-02",[195,204],"urls",{"src":206,"alt":207},"\u002Fassets\u002Fcover-url-model.svg","Minh họa bìa: một thanh địa chỉ tách thành ba segment locale, mount và path",[209,210],"en","vi",1791809694179]