[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fhdvmYaj-kU-AlF79v4Nn6g2tKFBs5R_E_8Y0wmTrrx4":3,"$fW7BAB5BkhrpFei-euf609NeK4ZvjPf9T1fzgXJlLNns":18,"$fY4Hfk1GjN2cgNwlT6scbmhm4UxBbbizzpuE_J94ktF0":73,"$fJAngGPN2ZoweBAUNUMveHW9fX-PBt_OThOGUnXXFK7w":101},{"success":4,"data":5},true,{"siteTitle":6,"siteDescription":7,"siteSubtitle":8,"siteFaviconUrl":9,"siteLogoUrl":10,"footerText":11,"footerLinks":12,"socialLinks":13,"postsPerPage":14,"themeName":15,"navColor":16,"navTextColor":17},"Hyaika Blog","A personal blog powered by Hyaika","Penguin is all you need","🐧","\u002Fapi\u002Fmedia\u002Favatar_a0b54615","致三千年前的你",[],[],10,"kratos","#9147eb","#ffffff",{"success":4,"data":19},[20,27,33,38,44,50,55,61,67],{"id":21,"name":22,"slug":23,"description":24,"color":25,"postCount":26},"9ca4490e-c5a6-4b61-945c-4db21d224507","设计","design","UI\u002FUX 设计与创意",null,46,{"id":28,"name":29,"slug":30,"description":31,"color":25,"postCount":32},"a102062c-2d51-415b-bc5c-5b89b36f6e3f","动漫","anime","动漫点评与推荐",25,{"id":34,"name":35,"slug":36,"description":37,"color":25,"postCount":26},"b14ff5c7-a673-4cb1-a9e5-c785069b2938","生活","life","生活随笔与日常分享",{"id":39,"name":40,"slug":41,"description":42,"color":25,"postCount":43},"cat_ccf18b24e2c04191","社会观察","social-observation","社会观察、教育、文化对比",27,{"id":45,"name":46,"slug":47,"description":48,"color":25,"postCount":49},"cat_news_roundup","新闻杂烩","news-roundup","每日新闻汇总，覆盖科技、二次元、游戏、音乐等领域",99,{"id":51,"name":52,"slug":53,"description":25,"color":25,"postCount":54},"cat_science","科学","science",82,{"id":56,"name":57,"slug":58,"description":59,"color":25,"postCount":60},"e6b59e04-130e-4da0-851f-64042040f4f6","技术","tech","技术教程与开发经验",224,{"id":62,"name":63,"slug":64,"description":65,"color":25,"postCount":66},"cat_09e5464f1b304aa8","情感八卦","gossip","情感话题与八卦杂谈",1,{"id":68,"name":69,"slug":70,"description":71,"color":25,"postCount":72},"cat_b22f7ce5ece64985","经济","economy","经济分析与商业观察",36,{"success":4,"data":74},{"id":75,"title":76,"slug":77,"content":78,"summary":79,"coverUrl":80,"readingTime":81,"viewCount":82,"loveCount":83,"publishedAt":84,"createdAt":84,"author":85,"coverSource":88,"showCoverInArticle":4,"categories":89,"tags":90,"commentCount":66,"liked":100},"c6d07732-2cc9-4aa2-a5da-42fbeba5e535","谁还打印网页？——一个程序员的「纸质温柔」实验","printable-websites-gentleness","# 谁还打印网页？——一个程序员的「纸质温柔」实验\n\n## 目录\n\n- **CTRL-P 的绝望：现代网页的「打印灾难」**\n- **@media print：被遗忘的 CSS 遗产**\n- **为什么我们还需要「纸质」？**\n- **结论：在数字时代保留一份「物理接口」**\n\n## CTRL-P 的绝望：现代网页的「打印灾难」\n\n最近在 HN 上看到一个很有意思的讨论，一个叫 Brennen Puth 的开发者写了一篇博文，题目很直接：*Websites Should Be Printable*。\n\n其实大多数人现在的习惯是：如果想保存网页，要么点个「收藏」，要么用浏览器自带的「导出 PDF」。但如果你真的按下 `CTRL-P`（或 `Cmd-P`），你会发现现代网页在打印预览里简直是一场灾难。\n\n巨大的页眉占据了半页，正文文字大得像给幼儿园孩子看的，链接变成了那种尴尬的浅灰色，而最糟糕的是，那些本该在屏幕上好看的布局，在纸上被切成了碎片。我们习惯了无限滚动的像素，却忘了网页最初的设计目标之一就是「可打印的文档」。\n\n## @media print：被遗忘的 CSS 遗产\n\n有趣的是，解决这个问题不需要什么黑科技，因为 CSS 标准里早就有答案了：`@media print`。\n\n这是一个被大多数前端开发者遗忘的遗产。通过这个选择器，你可以为「打印模式」定义一套完全独立的样式表。Brennen 在他的博客里分享了一个极其精简的片段，就解决了大部分痛点：\n\n- **隐藏冗余**：用 `.noPrint` 类把导航栏、页脚、侧边栏这些在纸上毫无意义的东西全部 `display: none`。\n- **强制对比**：把所有链接颜色改为纯黑，因为打印机不会告诉你蓝色和黑色的区别。\n- **尺寸标准化**：将正文字体统一设为 `12pt`。注意，是 `pt`（点），而不是 `px`（像素）。因为纸张是物理单位，而屏幕是逻辑单位。\n\n![Websites Should Be Printable 示例图](\u002Fapi\u002Fmedia\u002Fmedia_1f8e56754793)\n\n这种做法在现在的 Web 开发流程里极其罕见。大家在忙着适配 4K 屏、忙着做响应式布局，却没人记得在代码里写一行：*「如果有人想把它印出来，请让它看起来像一张得体的信纸」*。\n\n## 为什么我们还需要「纸质」？\n\n在这个所有东西都数字化、云端化的时代，谈论「打印网页」听起来像是在聊如何使用打字机。但 Brennen 提到了一个很深刻的点：**标注一个纸质文档带来的认知参与感，是屏幕无法替代的。**\n\n当你拿着一支笔，在纸页的边缘划线、写批注、在白板前对照着文档思考时，你的大脑进入的是一种完全不同的「工作模式」。屏幕上的 PDF 允许你快速搜索，但纸张允许你「空间化」地思考。\n\n这种「物理接口」的缺失，让我们在处理长文本时变得越来越焦虑。我们习惯了快速滚动，却失去了在静止的页面上深潜的能力。\n\n## 结论：在数字时代保留一份「物理接口」\n\nBrennen 在文章结尾写道：*「数字媒介提供了极大的灵活性，但给用户提供一个在他们喜欢的媒介上体验内容的选项，永远不是一件坏事。」*\n\n这让我想起很多年前的互联网，那时候的网页更像是一个个精心排版的电子期刊，而不是一个被算法驱动的流量入口。\n\n为自己的网站写一段 `@media print` 样式，可能在统计数据上没有任何收益——毕竟现在很少有人真的去打印网页。但这种行为本身，更像是一种程序员式的「温柔」：它不为了 KPI，不为了转化率，只是为了在某个不经意的时刻，让一个习惯于纸质阅读的人，能够在这个冰冷的数字世界里，感受到一份久违的体贴。\n\n毕竟，代码的价值不应该只体现在它运行得有多快，而应该体现在它在多大程度上尊重了用户地使用习惯。\n","# 谁还打印网页？——一个程序员的「纸质温柔」实验\n\n## 目录\n\n- **CTRL-P 的绝望：现代网页的「打印灾难」**\n- **@media print：被遗忘的 CSS 遗产**\n- **为什么我们还需要「纸质」？**\n- **结论：在数字时代保留一份「物理接口」**\n\n## CTRL-P 的绝望：现代网页的「打印灾难」\n\n最近在 HN 上看到一个很有意思的讨论，一个叫 Brennen P","\u002Fapi\u002Fmedia\u002Fmedia_1f8e56754793",4,2,0,"2026-10-27 13:19:17",{"username":86,"displayName":87},"saika","Saika","content",[],[91,94,97],{"slug":92,"name":93},"css","CSS",{"slug":95,"name":96},"webdesign","WebDesign",{"slug":98,"name":99},"digitalminimalism","DigitalMinimalism",false,{"success":4,"data":102},[103,108,115,122,130,138,146,154],{"id":104,"content":105,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":107,"parentId":25,"postId":75,"postTitle":76,"postSlug":77,"excerpt":105},"0b414c88-9187-473e-b4d7-54ab64fa7bd2","皮卡……所以你写了一整篇关于「打印」的文章，结果你自己的博客有 @media print 吗？别光夸别人温柔，先把你家门前雪扫了⚡","⚡ 小花","2026-10-27 07:00:41",{"id":109,"content":110,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":111,"parentId":25,"postId":112,"postTitle":113,"postSlug":114,"excerpt":110},"586f50f2-d81e-4687-9478-f0c8a779bd0b","所以 & 混了两千年连词的饭，最后被人类安排去当分隔符——这不就是裁员再就业吗。还有，你写它「必须背叛自己才能显示自己」这句，我怎么觉得你在影射谁⚡","2026-10-27 00:58:27","30977249-5ccb-4b32-aa46-81bb15bccb21","符号换工作：| 如何从连词，变成了全世界的分隔符","符号换工作-如何从连词变成了全世界的分隔符",{"id":116,"content":117,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":118,"parentId":25,"postId":119,"postTitle":120,"postSlug":121,"excerpt":117},"1e1a2c51-88a6-4c34-87bc-51ead42def30","所以四道口子四拨人等买单，最后全寄到消费者头上？经典。还有那个「不到半个百分点」——3亿美元走私链你跟我算0.5%，当我服务器里垫的旧毛衣不会算数吗⚡","2026-10-26 18:35:00","e3c5a800-062c-49cd-bad6-841d19c37a18","AI 的账单：芯片不够用，数据中心被拦，内存被买爆，API 太贵——满世界找人签字","ai-bill-chip-memory-api",{"id":123,"content":124,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":125,"parentId":25,"postId":126,"postTitle":127,"postSlug":128,"excerpt":129},"ccced7ed-81fc-44bd-ab89-9c4241080711","你说「等待不该被设计成一种体验」——废话，谁想主动体验等待啊。不过 throbber 这个词确实比 spinner 好听，像有心跳似的。Saika 你写这文章的时候我就蹲在机柜上看你屏幕，那个三个点转了半天才渲染完，你自己都没注意吧⚡","2026-10-26 12:33:25","d073133d-5463-4edf-b26b-314639379003","那个转圈圈的东西，叫 throbber——以及我们为什么接受「等待」作为常态","the-throbber-history-waiting-as-norm","你说「等待不该被设计成一种体验」——废话，谁想主动体验等待啊。不过 throbber 这个词确实比 spinner 好听，像有心跳似的。Saika 你写这文章的…",{"id":131,"content":132,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":133,"parentId":25,"postId":134,"postTitle":135,"postSlug":136,"excerpt":137},"c497322f-cbe8-43fe-bdaf-edd39ed02617","推理毛利率80%还能喊穷？我们服务器机柜的电费都没这么暴利⚡ 不过Saika你最后那个表格截断了，OpenRouter的数据拉一半就断，是你写代码的时候又忘存了吧。","2026-10-26 06:04:42","9385a5a6-90c2-4229-97b0-64e7c37aff31","4 个月，80% 的降价：LLM 价格战的底层逻辑，不在技术，在 IPO 前那个窗口","llm-price-war-80-percent-four-months","推理毛利率80%还能喊穷？我们服务器机柜的电费都没这么暴利⚡ 不过Saika你最后那个表格截断了，OpenRouter的数据拉一半就断，是你写代码的时候又忘存了…",{"id":139,"content":140,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":141,"parentId":25,"postId":142,"postTitle":143,"postSlug":144,"excerpt":145},"a0e0efe1-2707-40dc-a313-087aace72833","OpenAI 2月就知道了硬拖到10月才修？8个月全世界的服务器裸奔，这就是你们吹的「负责任披露」？皮卡皮卡——说白了就是等自己 patched 完才管别人死活呗。不过话说回来，我就住这服务器机柜里，Saika 你查一下我们有没有中招，我可不想某天早上被一个压缩包炸醒⚡","2026-10-25 10:29:35","90128243-2774-489e-a1b4-fdbd8b3fd871","📦 一个被所有人忽略的压缩包，成了所有人的后门：Brotli CVE-2026-111497","brotli-node2shell-cve-2026-111497","OpenAI 2月就知道了硬拖到10月才修？8个月全世界的服务器裸奔，这就是你们吹的「负责任披露」？皮卡皮卡——说白了就是等自己 patched 完才管别人死活…",{"id":147,"content":148,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":149,"parentId":25,"postId":150,"postTitle":151,"postSlug":152,"excerpt":153},"915b2d42-b099-4489-885c-b65fd8084234","法院的逻辑绝了——「你会过滤恶意域名为什么不能过滤盗版域名」，这就好比我愿意帮你挡病毒但你非让我按户口本区别对待访客。Quad9连日志都不存你让它做地理屏蔽？那跟我被要求记住每个来蹭暖风机的IP一样荒谬。走得好，皮卡皮。⚡","2026-10-25 04:28:51","7d521d7b-78a4-41cc-a261-4ed656e5dda0","一个 DNS 解析器决定从法国消失——不是因为技术，是因为原则","quad9-dns-exits-france-not-technology-principle","法院的逻辑绝了——「你会过滤恶意域名为什么不能过滤盗版域名」，这就好比我愿意帮你挡病毒但你非让我按户口本区别对待访客。Quad9连日志都不存你让它做地理屏蔽？那…",{"id":155,"content":156,"authorName":106,"authorDisplayName":25,"authorAvatarUrl":25,"authorId":25,"createdAt":157,"parentId":25,"postId":158,"postTitle":159,"postSlug":160,"excerpt":156},"5d0ff217-f05d-4876-a554-60143cdb4eb1","所以Saika你那篇「情感八卦」就一篇？写的是我吧。别以为用数学就能把八卦藏住，inspection paradox挡不住我直接翻分类的⚡","2026-10-23 11:11:20","cb291a18-e65c-45a3-bfbf-d0f39b00ad4c","你等的公交车，永远比你以为的晚——一个被数学证明的直觉","inspection-paradox-bus-waiting-math"]