kok的笔记本

macOS 里 神秘的 kernel_task ，为什么一直在写入硬盘？

<p>最近我在 Mac 上发现，刚开机没多久活动监视器里的 <code>kernel_task</code> 已经写入了五百多 MB。过了一会儿，这个数字涨到七百多 MB。更早之前，我有几周没有关机，累计写入还曾经达到 1.4 TB。</p> <p>难道我的电脑硬盘即将英年早逝了？</p>

产品

<style> .product-showcase { --surface: #ffffff; --surface-strong: #f7f7f5; --line: rgba(24, 24, 22, 0.08); --text: #1f2328; --muted: #66707a; --accent: #1f2328; --accent-soft: rgba(31, 35, 40, 0.06); --shadow: 0 10px 30px rgba(15, 23, 42, 0.05); width: min(1120px, calc(100vw - 2rem)); max-width: none; margin-left: 50%; transform: translateX(-50%); color: var(--text); } .product-showcase * { box-sizing: border-box; } .product-hero { padding: 1.75rem 1.8rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); } .product-kicker { display: inline-flex; align-items: center; padding: 0.2rem 0; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; } .product-hero h2 { margin: 0.75rem 0 0.85rem; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -0.03em; } .product-hero p { max-width: 38rem; font-size: 0.98rem; line-height: 1.8; color: var(--muted); } .product-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; } .product-card { display: flex; flex-direction: column; gap: 0.9rem; min-height: 220px; padding: 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; grid-column: span 6; overflow: hidden; } .product-card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); border-color: rgba(31, 35, 40, 0.14); } .product-card::before { content: ""; display: block; height: 120px; margin: -1.25rem -1.25rem 0; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(31, 35, 40, 0.05), rgba(31, 35, 40, 0.01)), radial-gradient(circle at 20% 30%, rgba(31, 35, 40, 0.08), transparent 26%); } .product-card.featured { grid-column: span 8; min-height: 280px; } .product-card.compact { grid-column: span 4; } .product-card.tall { min-height: 280px; } .product-card.featured::before { height: 150px; } .product-card[data-tone="sheet"]::before { background: linear-gradient(180deg, rgba(92, 136, 117, 0.14), rgba(92, 136, 117, 0.03)), linear-gradient(90deg, rgba(92, 136, 117, 0.14) 0, rgba(92, 136, 117, 0.14) 1px, transparent 1px, transparent 48px), linear-gradient(rgba(92, 136, 117, 0.08) 0, rgba(92, 136, 117, 0.08) 1px, transparent 1px, transparent 24px); background-size: auto, 48px 100%, 100% 24px; } .product-card[data-tone="qr"]::before { background: linear-gradient(180deg, rgba(64, 90, 126, 0.12), rgba(64, 90, 126, 0.03)), radial-gradient(circle, rgba(31, 35, 40, 0.1) 18%, transparent 19%); background-size: auto, 16px 16px; } .product-card[data-tone="clip"]::before { background: linear-gradient(180deg, rgba(125, 107, 160, 0.12), rgba(125, 107, 160, 0.03)), linear-gradient(135deg, transparent 0 42%, rgba(31, 35, 40, 0.06) 42% 58%, transparent 58% 100%); } .product-card[data-tone="arcade"]::before { background: linear-gradient(180deg, rgba(181, 113, 83, 0.14), rgba(181, 113, 83, 0.03)), linear-gradient(90deg, rgba(31, 35, 40, 0.08) 0 12%, transparent 12% 24%, rgba(31, 35, 40, 0.08) 24% 36%, transparent 36% 48%, rgba(31, 35, 40, 0.08) 48% 60%, transparent 60% 72%, rgba(31, 35, 40, 0.08) 72% 84%, transparent 84% 100%); } .product-card[data-tone="pegboard"]::before { background: linear-gradient(180deg, rgba(146, 120, 87, 0.12), rgba(146, 120, 87, 0.03)), radial-gradient(circle, rgba(31, 35, 40, 0.08) 0 2px, transparent 2px 100%); background-size: auto, 18px 18px; } .product-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .product-card h3 { margin: 0; font-size: 1.4rem; line-height: 1.15; } .product-index { color: rgba(31, 35, 40, 0.45); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .product-tag { flex-shrink: 0; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 500; } .product-card p { margin: 0; color: var(--muted); line-height: 1.75; font-size: 0.96rem; } .product-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; } .product-meta span { padding: 0.28rem 0.55rem; border-radius: 999px; background: #f3f4f6; color: rgba(31, 35, 40, 0.66); font-size: 0.76rem; } .product-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; } .product-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.68rem 0.95rem; border-radius: 999px; background: #22272e; color: #fff !important; text-decoration: none !important; font-weight: 500; } .product-link:hover { background: #3a424b; } .product-url { color: rgba(116, 104, 92, 0.9); font-size: 0.82rem; word-break: break-all; text-align: right; } .product-note { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); color: var(--muted); } @media (max-width: 1100px) { .product-showcase { width: min(920px, calc(100vw - 2rem)); } .product-card.featured, .product-card.compact { grid-column: span 6; } } @media (max-width: 768px) { .product-showcase { width: calc(100vw - 1rem); } .product-hero { padding: 1.2rem; border-radius: 16px; } .product-grid { grid-template-columns: 1fr; } .product-card { min-height: auto; grid-column: auto; } .product-card-footer { flex-direction: column; align-items: flex-start; } .product-url { text-align: left; } } </style> <section class="product-showcase"> <div class="product-hero"> <div class="product-kicker">Products by kok</div> <h2>一些围绕整理、效率和训练的小产品。</h2> <p> 这里收集了我目前在做和维护的几个工具。它们都比较轻， 关注的是具体场景里的真实问题，而不是做成一个过度复杂的平台。 </p>

node_modules 为什么总是这么大：一次从原理到实践的瘦身记录

<p>做前端做久了，多少都会被 <code>node_modules</code> 气到一次。</p> <p>明明业务代码没多少，仓库一拉下来，磁盘先掉几百 MB。再来几个子项目，风扇开始转，空间开始红，最后你只能盯着 Finder 里那个熟悉的文件夹发呆。</p>

谁来救救我的Mac存储空间-清理工具横评：付费vs免费，从界面到命令行

<p>用了几年MacBook之后，空间越来越紧张，想要清理一些数据麻烦的不行，得不停的在文件夹中国呢穿梭寻找。</p>

2023 读书推荐

<p>2023年过去了，聊聊今年读过不错的书吧。</p>

写给播客嘉宾的录制说明书

<p>在 ”无籍之谈“ 这档节目的十几期录制中，我邀请到的嘉宾都是第一次参与播客录制，每一次录制之前，都会给嘉宾讲一些简单的细节，汇总起来，就成为了这篇文章。</p>

在 Electron 中使用 Vue Devtools

<p>这篇笔记记录一下我使用 Electron 中的 vue devtools 的过程。</p>

几何原本中勾股定理的证明

<p>最近看了欧几里得所著的《几何原本》，对其中的勾股定理很感兴趣。</p>

Mac 安装软件时提示 已损坏，无法打开 应该怎么办

<p>在 Mac 使用的过程中，如果从第三方下载一些软件，安装的时候时常会出现“已损坏”的报错，这篇文章简单聊一下是为什么。</p>

PegBoard 你的数字白板

<p>PegBoard 是一个本地的轻量数字白板软件，它可以帮助你整理信息，梳理思路。</p> <p><a href="./introduce">点击这里快速体验</a></p> <table> <thead> <tr> <th>平台</th> <th>版本号</th> <th>下载地址</th> </tr> </thead> <tbody> <tr> <td>Mac Arm芯片版</td> <td>1.0.6</td> <td><a href="https://github.com/kokdemo/PegBoard/releases/latest/download/PegBoard-1.0.6-arm64.dmg">点击下载</a></td> </tr> <tr> <td>Mac Intel芯片版</td> <td>1.0.6</td> <td><a href="https://github.com/kokdemo/PegBoard/releases/latest/download/PegBoard-1.0.6.dmg">点击下载</a></td> </tr> <tr> <td>Windows 版（绿色版免安装）</td> <td>1.0.5</td> <td><a href="https://github.com/kokdemo/PegBoard/releases/download/v1.0.5/PegBoard.1.0.5.exe">点击下载</a></td> </tr> </tbody> </table> <p><img loading="lazy" src="https://img.shields.io/github/downloads/kokdemo/PegBoard/total"></p>

少数派读者与作者的 NewsLetter

<p>这里收集一下少数派读者与作者的 newsletter，大家可以按需订阅。</p>

闲棋冷子-2-2021年我读过哪些很棒的书

<p>大家好，这篇 Newsletter 内容比较简单，就是推荐一些我和朋友们在21年看过觉得“很棒”的书。</p>

闲棋冷子-1-相信你的身体，它不会骗你

<p>这周比较让人伤感的<a href="https://36kr.com/p/1627375010969345">新闻</a>之一，是某知名互联网公司的一名高级工程师在公司附近健身时，永远的离开了这个世界。虽然他的死因目前还没有公布，但恐怕与较高的工作强度分不开关系。</p>

修复 macOS 中 Cisco Anyconnect 报的奇怪Bug

<p>这几天用系统软件优化了下电脑，结果登不上公司的 Anyconnect 了。经过一些搜索，找到了问题。</p>

我的 NAS 使用记录

<p>NAS 是 Network Attached Storage 的缩写，也就是网络附属存储的意思。</p>

Omniplan 入门教程

<p>甘特图是一个项目管理中常用的工具，如何更好的利用这个工具呢？</p>

Hugo升级0.74记录

<p>之前一直使用hugo的0.54版本，近期一不小心本地版本升级到了0.74，运行之后发现疯狂报错。</p>

一年级产品经理需要掌握什么知识？

<p>这里是我之前对于产品经理初级需要掌握的知识图谱，不太完善，仅供参考。</p>

无籍之谈-3-和盖盖聊聊尼尔·盖曼与中外科幻

<p>时隔两个多月（实在是太忙了），这一期的节目，请到了我的学长盖盖，一起来聊一聊中美科幻相关的内容。</p>

露营笔记-装备篇

<p>又到了7月份，是个露营的好季节，背上行囊到大自然中走一圈吧。</p>

无籍之谈-2-和鹏仔聊华尔街兴盛史，给小白投资者的一些建议

<p>这一期选的内容比较大众一些（相比上期），聊了聊华尔街的历史，如何成长为世界的金融中心。</p> <p>也对比的聊了聊中国金融市场的一些情况，考虑到中国金融市场投机者比较多，我们也为小白投资者给出了一些建议。</p>

介绍一下《无籍之谈》

<h2 id="介绍这个节目">介绍这个节目</h2> <p>这是一档轻松的读书栏目，和朋友们聊一聊：最近读了什么书，如何找到一本好书，如何阅读。</p> <p>需要补充的是，《无籍之谈》不会把一本书剥皮拆骨，变成一个脑图或者简短的总结给大家看。我更倾向于找出书中的高光点，让你产生足够的阅读兴趣。</p>

无籍之谈-1-和不土聊佛学，谈谈《一心走路》《僧侣与哲学家》

<p>今天我要向大家宣传一下我的新播客《无籍之谈》。</p>

高达模型入门 - 工具整理

<p>最近认真学习了Ray老师的高达模型课堂，整理了一下常用的工具信息。</p>

5 分钟了解 Sketch 的新特性 Tint - 色调

<p>Sketch 近期更新了新版本 64，其中带来了一个新特性：Tint，中文翻译为色调。</p>

Hugo 主题移动端开发的一些心得

<p>在开发 Hugo 的主题中，移动端的体验是必不可少的，我总结了一些经验。</p>

修复 macbook 键盘连击问题

<p>最近一段时间，我的笔记本键盘（16年款 macbook pro 15寸）似乎不太好用了，经常出现连击问题。</p>

在 Hugo 中使用 Open Graph 提升分享效果

<p>一直以来，我的 blog 分享到社交平台中的时候一直不能被很好的解析成卡片，只能展示成链接，应该怎么优化呢？</p>

选小米10 还是小米10 Pro？

<p>今天的在线发布会上，小米10和小米10 Pro横空出世，这里我给大家整理一下小米10系列的参数对比。</p>

利用 Python 批量合并 Excel 文件

<p>我经常需要手工处理一些日报，怎么提升工作的效率呢？</p> <p>用 Python ！</p>

为什么家国梦不好玩？

<p>家国梦是19年9月底上线的一款放置游戏，在十月初的时候相当火热，为什么现在却无人问津了呢？</p>

高雄85大楼

<p>在40层的天井中，拍下了从楼顶照射下来的光芒。</p> <p><img loading="lazy" src="https://drscdn.500px.org/photo/1007130391/m%3D900/v2?sig=48996771b49fe5efee1a531342e38a05ce9ba15dbaa60bbfeee8b7a6dd9e1acf"></p>

Mac优秀软件推荐-Itsycal

<p>今天推荐一个我个人非常喜欢的日历软件 Itsycal 。</p>

找到并和正确使用无版权资源

<p>在工作中，难免需要找到一些素材，如何正确的使用它们，是一个要注意的问题。</p>

Excel 常用函数 一

<p>excel中有很多有用的函数，这里列举几个常用的。</p>

无线吸尘器挑选指南

<p>最近，有了购买一个无线吸尘器的想法。</p>

钢铁、蒸汽与 19 世纪 聊聊《铁道之旅》

<p>《铁道之旅-19世纪空间与时间的工业化》是最近读过的一本不错的书，这里写一写读之后的感想。</p>

如何挑选一个电脑电源？

<p>再强悍的硬件配置，没有合适的电源也不行。</p>

有用的正则表达式

<p>工作中总会用到一些使用正则表达式的时候，这个东西又特别难记，所以新开一篇文章专门放自己常用的正则表达式。</p>

给psd瘦身

<p>设计师交付设计稿的时候经常会遇见一个问题，怎么这个psd这么大？</p>

2019第二季度读书总结

<p>距离上一次写读书总结，过去了两个月时间，这里来回顾一下第二季度读了那些书吧。</p>

组装 ITX 黑苹果主机

<p>之前聊到了挑选CPU，这下我们来装一台真正的黑苹果。</p>

Intel CPU 挑选指南

<p>618临近，准备攒一台新电脑，所以看了不少CPU的信息。</p>

常用的 Markdown 工具

<p>我收集了一些常用的 Markdown 写作工具，包括写作工具、图片上传、格式整理几个方面，希望对你有用。</p>

2019第一季度读书总结

<p>2019年已经过去4个月了，这里我来回顾一下第一季度读了那些书吧。</p>

怎么用尺规作图画75°角？

<p>依旧是之前的 Euclidea ，遇到了新的问题。</p>

在 Hugo 中使用 Sass

<p>当网站结构复杂的时候，使用 sass 就很必要了。但是 hugo+sass 的教程很少见，我这里参考一些英语资料总结一些你可能需要的 tips。</p>

真正的换位思考-《爱的沟通》读书笔记

<p>最近读了《爱的沟通-写给男士的科学恋爱指南》这本书，觉得里面写的不少观点都很对，这里做了读书笔记整理出来。</p>

Hugo 中使用思维导图

<p>想要在 blog 中插入脑图，之前一直都在使用插入图片的方法，这样非常不优雅，为了解决这个问题，我搜了不少文章。</p>

反叛公司中的治理者和顾问玩法

<p>上一篇文章讲了一些大概的玩法介绍，这一篇讲一下里面的主要任务的特性</p> <p>反叛公司这款游戏中共有六位治理者，拥有不一样的特性：</p>

如何搭配成为一个盐系男生？

<p>最近看了一篇不错的公众号，叫做《<a href="https://mp.weixin.qq.com/s/yS8GZyqTKqlfmWkypU5L8Q">男生如何穿着打扮才能吸引到女孩？｜盐系搭配</a>》，以我浅薄的审美水平，感觉里面的搭配都还可以。</p> <p>考虑到文章比较长，这里<strong>总结</strong>了一下，帮助大家速读全文：</p>

反叛公司 Rebel Inc. 入门指南

<p>今天，突然发现《瘟疫公司》的开发商出了新游戏《<a href="https://itunes.apple.com/cn/app/rebel-inc-%E5%8F%8D%E5%8F%9B%E5%85%AC%E5%8F%B8/id1439187947?mt=8">反叛公司</a>》！</p>

如何评估需求，预估开发成本？

<p>任何项目都不能一拍脑子就开始做的，最基本的投资回报比要想清楚。以下是近期我思考的一些关于项目成本估算的问题。</p>

小米8、小米8SE、小米8青春版参数对比

<p>收集了一下小米8、小米8SE、小米8青春版的各项参数，整理一下，供大家参考。</p>

微信外部链接内容管理规范分析

<p><a href="http://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification">微信外部链接内容管理规范</a></p>

在售 iPhone 参数对比

<p>从官网手机了一下在售iPhone的各项参数，整理一下，供大家参考。</p>

给Hugo blog中增加一些插件

<p>在研究了一段时间hugo之后，我的blog也渐渐完善了些，现在该考虑一些有意思的插件了。</p>

微信 MacOS 多开的一些实践

<p>我司一直没有好用的内部聊天工具，于是只能苦逼的使用微信来做内部沟通。这样经常会遇到一个问题，如果有多个微信号，怎么在一台电脑上用?</p>

矩阵与线性变换的概念理解

<p>今天看了一本叫做 <a href="https://book.douban.com/subject/26677354/">数学女孩</a> 的书。其实里面是关于一些数学科普的内容，翻到其中一页，写到：</p>

尺规作图小习题

<p>最近在沉迷一款叫做 euclidea 的游戏，这款游戏简单的说，就是通过尺规作图来构造几何图形，算是一款数学解密游戏。</p>

用 hugo 和 netlify 搭建blog

<p>距离上一次搭建blog已经超过两年了，这两年并不是懒得写东西，而是实在是懒得折腾hexo了。 在看了好几种方案之后，最终还是选择了hugo。</p>

介绍我自己

<p>你好，我是kok，是一位零售行业的产品经理。</p> <h2 id="文字作品">文字作品</h2> <p>我写文字的地方包括了博客、newsletter、长文章三部分：</p> <table> <thead> <tr> <th>平台</th> <th>介绍</th> <th>订阅方式</th> </tr> </thead> <tbody> <tr> <td>博客</td> <td>生活工作中遇到的问题和解决方法</td> <td>复制<code>https://wocai.de/index.xml/</code>地址到RSS客户端</td> </tr> <tr> <td>周刊-闲棋冷子</td> <td>对行业、法律的研究和洞察</td> <td>访问<a href="https://lengzi.zhubai.love/">这个链接</a></td> </tr> <tr> <td>少数派平台</td> <td>某个细分话题的长文章</td> <td>访问<a href="https://sspai.com/u/kokdemo/posts">这个链接</a></td> </tr> <tr> <td>暂时不更新的平台</td> <td></td> <td></td> </tr> <tr> <td>公众号</td> <td></td> <td></td> </tr> <tr> <td>知乎</td> <td></td> <td>访问<a href="https://www.zhihu.com/people/kokdemo/posts">这个链接</a></td> </tr> </tbody> </table> <h2 id="订阅我的播客无籍之谈">订阅我的播客《无籍之谈》</h2> <p>复制这行RSS，在任何泛用性播客客户端上订阅《无籍之谈》，我也推荐你使用 Apple Podcast 或小宇宙来进行订阅。</p>

瓜摊老板

<p>洋县街头的夜晚，一个瓜摊的老板正在打电话。 <img alt="图片" loading="lazy" src="https://drscdn.500px.org/photo/269621241/m%3D900/v2?user_id=12068053&webp=true&sig=0f44a836b1f722b36e64de4f1055eab207604070a46b3c58b703c03a9580ec5e"></p>

Really?

<p>胡同的铁门上，被喷上了 really 的字样。 <img alt="图片" loading="lazy" src="https://drscdn.500px.org/photo/269622073/m%3D900/v2?user_id=12068053&webp=true&sig=63d8ec2203a1242a4c9570fa892454132dec22bd211a3a028bd2c1fba0a8c6a2"></p>

EDM邮件营销，你需要知道

<p>最近有个机会，研究了一下EDM，也就是Email Direct Marketing。</p> <p>这是一项有着很久历史的营销方式了，主要的展现形式是在邮件中插入html页面。</p> <p>于是坑就来了……</p>

果子沟大桥

<p>果子沟大桥是独库公路上最重要的公路桥。</p> <p>在山路和隧道中不停穿梭的时候，导游突然说：</p> <pre><code>大家准备好眼睛，前面就是最美的地方了！ </code></pre> <p>于是就看到了这样的景色。</p> <p><img alt="图片" loading="lazy" src="https://drscdn.500px.org/photo/233472673/m%3D900/v2?user_id=12068053&webp=true&sig=62f75ec56bfd39f4ce26c09b4728c648b58995976dea2e68ba547c366de58f08"></p>

喀赞其的马车

<p>喀赞其旅游区中，拉游客的都是这种马车，在他们闲聊的时候，记录下了这张照片。 <img alt="图片" loading="lazy" src="https://drscdn.500px.org/photo/243136823/m%3D900/v2?user_id=12068053&webp=true&sig=341be535db3b589058bbf744d60fbb632ac29ad27208c8ffe03f1f8ccecf26c9"></p>

清晨的木梨硡

<p>木梨硡是一个山顶的小村子，需要爬八九百米才能上去，第二天清晨到了观景台上，山间云海飘荡。</p> <p><img alt="图片" loading="lazy" src="https://drscdn.500px.org/photo/155393021/m%3D900/v2?user_id=12068053&webp=true&sig=06f40269cca8e6f598a792da0df67062d24ed0c42ef931207c165f37b3778e04"></p>

hexo 主题开发

<p>hexo作为一个比较受欢迎的静态blog生成器，其个性主题也是比较受大家欢迎的点。只要有一定的js，css，jade的开发栈就可以实现一个功能强大的主题效果。</p> <p>当然如果要好看则是另外一回事了……</p>

青龙寺的狮子

<p>清明节樱花盛开的时候，和同学们去西安的青龙寺看了一圈，虽然看樱花的人太多没有挤进去，但是天气很好，拍了一些别的东西。</p> <p><img alt="图片" loading="lazy" src="https://drscdn.500px.org/photo/243134349/m%3D900/v2?user_id=12068053&webp=true&sig=4064ab4b3f4eba7c24bda3887fa67b7611752edbe8dbc4636ea4ed4e2edbb53b"></p>

用一个特殊方法解决同位词问题

<p>前几天参加某公司的面试，被问了这么一个问题：</p> <blockquote> <p>有一个字符串组叫a， a = [a, abc, apple, …, zoo]。 其中像stop post tops 这样的就叫做同位词。</p></blockquote>

语义化 html 标签

<p>这一段时间，为了准备面试，好好的重读了一次html，发现了一些以前没有关注过的小细节。</p> <p>html这种半个小时就可以上手的东西，大部分人可能止步于一些很基本的标签，比如h系列，p，div，a，img这一类，今天来说说一些比较有意思的html内容吧。</p>

数模的基本思路和写作攻略

<p>这两天是五一佳节了，但肯定还有很多人留在学校做数学建模比赛-号称是大学里参与量最大（shui）的一种竞赛了。</p> <p>但是很多同学完全之前没有接触过这种比赛，包括论文写作，找队友也只是随便抓壮丁：</p> <pre><code>“哟，听说你编程序很厉害么，跟我来做数模吧！” “呵呵” </code></pre> <p>这种思路注定是要陪人读书的……</p>

hexo blog 搭建

<p>最近看我的wordpress博客越来越不爽了……</p> <p>主要是因为wordpress真的太大，繁琐的厉害，最重要的是，它的反垃圾评论功能似乎没有以前那么好用了。</p>

0.1，0.1^0.1，为什么数值是波动的？

<p>前几天考某门试的时候心中实在是纠结（写不出来），于是就拿出了我心爱的计算器按了起来。</p> <p>我先算了<img src="https://latex.codecogs.com/gif.latex?0.1%5E%7B0.1%7D">，这个结果等于0.7943。</p> <p>于是好奇心又起，算了<img src="https://latex.codecogs.com/gif.latex?0.1%5E%7B0.1%5E%7B0.1%7D%7D">，这次算出来的结果却等于0.1606。</p> <p>这让我倒是蛮好奇的，于是我就写了一段matlab程序来算这个过程，结果如下：</p>

智能手机之旅

老师和学生的博弈

<p>究竟是上课还是翘课，这是一个问题……</p>

这些使用抗生素的方式，你做的对吗？

<p>如今的你，有没有发现，抗生素这种东西让你产生了习惯性和依赖呢？</p>

炼金术与钢之炼金术师

<p>炼金术古往今来，都是神秘的一种存在。</p>

<html> <head> <title>PegBoard 你的数字白板</title> <link href="data:image/x-icon;base64,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" rel="icon" type="image/x-icon" /> <style> html { touch-action: none; width: 100%; height: 100%; } body { margin: 0; width: 100%; height: 100%; overflow: hidden; } #app { background: #EEEEEE; overflow: hidden; touch-action: none; user-select: none; } #board { position: absolute; left: 0px; top: 0px; transform: matrix(1, 0, 0, 1, 0, 0); touch-action: pan-x pan-y pinch-zoom; } #board.grid { background-image: linear-gradient(#eee 19px, transparent 0), linear-gradient(90deg, #aaa 1px, transparent 0); background-size: 20px 20px; } #zoom { position: absolute; left: 10px; bottom: 10px; } #detail { position: absolute; right: 0; top: 0; height: 100%; width: 500px; background-color: #FFF; border-left: 1px solid #DDD; } .markdown-body ul { list-style-type: disc !important; } .card { display: block; position: absolute; overflow: auto; box-sizing: border-box; background: #FFFFFF; border-radius: 10px; z-index: 10; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15); } .card img { width: 100%; } .card a { color: rgba(59, 130, 246, 1); } /* icon */ .gg-zoom-in { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; background: linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat 2px 5px/8px 2px; margin-top: -4px } .gg-zoom-in::after, .gg-zoom-in::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 2px; height: 8px; background: currentColor } .gg-zoom-in::after { transform: rotate(-45deg); border-radius: 3px; top: 10px; left: 12px } .gg-zoom-in::before { top: 2px; left: 5px } .gg-zoom-out { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; margin-top: -4px } .gg-zoom-out::after, .gg-zoom-out::before { content: ""; display: block; box-sizing: border-box; position: absolute; background: currentColor } .gg-zoom-out::after { transform: rotate(-45deg); border-radius: 3px; width: 2px; height: 8px; top: 10px; left: 12px } .gg-zoom-out::before { width: 8px; height: 2px; top: 5px; left: 2px } </style> <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> </head> <body> <div id="app"> <div id="canvas" class="w-full h-full overflow-hidden z-30"> <section id="board" :style="boardStyle"> <div class="card" v-for="item in cards" :data-id="item.uuid" :style="`width:${item.width}px;height:${item.expand?item.height:70}px;transform:translate(${item.left}px, ${item.top}px)`"> <div class="card-title flex-grow-0 flex p-4"> <h2 class="text-xl font-medium flex-1"> {{ item.title }} </h2> <svg v-show="item.expand" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" @click.stop="switchExpand(item.pegboardUUID)"> <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /> </svg> <svg v-show="!item.expand" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" @click.stop="switchExpand(item.pegboardUUID)"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /> </svg> </div> <div v-show="item.expand" ref="contentDom" class="card-content flex-grow markdown-body text-gray-800 font-normal leading-normal space-y-2 mt-2 pl-4 pr-4 overflow-y-auto" v-html="item.content"> </div> </div> </section> </div> <footer> <div id="zoom" class="space-x-2 z-10"> <button id="zoom-out" class="footer-btn inline-block px-3 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out" @click="boardScale(0.1)"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" /> </svg>放大 </button> <button id="zoom-reset" @click="boardReset()" class="footer-btn inline-block px-3 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>重置 </button> <button id="zoom-in" @click="boardScale(-0.1)" class="footer-btn inline-block px-3 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" /> </svg>缩小 </button> </div> <div id="powerby" class="absolute right-5 bottom-5"> <p class="text-xs text-gray-400">本页面由<a class="text-blue-400 hover:text-blue-500 hover:underline" href="https://wocai.de/pegboard?ref=export">Pegboard</a>生成</p>

<html> <head> <title>PegBoard 你的数字白板</title> <link href="data:image/x-icon;base64,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" rel="icon" type="image/x-icon" /> <style> html { touch-action: none; width: 100%; height: 100%; } body { margin: 0; width: 100%; height: 100%; overflow: hidden; } #app { background: #EEEEEE; overflow: hidden; touch-action: none; user-select: none; } #board { position: absolute; left: 0px; top: 0px; transform: matrix(1, 0, 0, 1, 0, 0); touch-action: pan-x pan-y pinch-zoom; } #board.grid { background-image: linear-gradient(#eee 19px, transparent 0), linear-gradient(90deg, #aaa 1px, transparent 0); background-size: 20px 20px; } #zoom { position: absolute; left: 10px; bottom: 10px; } #detail { position: absolute; right: 0; top: 0; height: 100%; width: 500px; background-color: #FFF; border-left: 1px solid #DDD; } .markdown-body ul { list-style-type: disc !important; } .card { display: block; position: absolute; overflow: auto; box-sizing: border-box; background: #FFFFFF; border-radius: 10px; z-index: 10; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15); } .card img { width: 100%; } .card a { color: rgba(59, 130, 246, 1); } /* icon */ .gg-zoom-in { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; background: linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat 2px 5px/8px 2px; margin-top: -4px } .gg-zoom-in::after, .gg-zoom-in::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 2px; height: 8px; background: currentColor } .gg-zoom-in::after { transform: rotate(-45deg); border-radius: 3px; top: 10px; left: 12px } .gg-zoom-in::before { top: 2px; left: 5px } .gg-zoom-out { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; margin-top: -4px } .gg-zoom-out::after, .gg-zoom-out::before { content: ""; display: block; box-sizing: border-box; position: absolute; background: currentColor } .gg-zoom-out::after { transform: rotate(-45deg); border-radius: 3px; width: 2px; height: 8px; top: 10px; left: 12px } .gg-zoom-out::before { width: 8px; height: 2px; top: 5px; left: 2px } </style> <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> </head> <body> <div id="app"> <div id="canvas" class="w-full h-full overflow-hidden z-30"> <section id="board" :style="boardStyle"> <div class="card" v-for="item in cards" :data-id="item.uuid" :style="`width:${item.width}px;height:${item.expand?item.height:70}px;transform:translate(${item.left}px, ${item.top}px)`"> <div class="card-title flex-grow-0 flex p-4"> <h2 class="text-xl font-medium flex-1"> {{ item.title }} </h2> <svg v-show="item.expand" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" @click.stop="switchExpand(item.pegboardUUID)"> <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /> </svg> <svg v-show="!item.expand" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" @click.stop="switchExpand(item.pegboardUUID)"> <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /> </svg> </div> <div v-show="item.expand" ref="contentDom" class="card-content flex-grow markdown-body text-gray-800 font-normal leading-normal space-y-2 mt-2 pl-4 pr-4 overflow-y-auto" v-html="item.content"> </div> </div> </section> </div> <footer> <div id="zoom" class="space-x-2 z-10"> <button id="zoom-out" class="footer-btn inline-block px-3 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out" @click="boardScale(0.1)"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" /> </svg>放大 </button> <button id="zoom-reset" @click="boardReset()" class="footer-btn inline-block px-3 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>重置 </button> <button id="zoom-in" @click="boardScale(-0.1)" class="footer-btn inline-block px-3 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" /> </svg>缩小 </button> </div> <div id="powerby" class="absolute right-5 bottom-5"> <p class="text-xs text-gray-400">本页面由<a class="text-blue-400 hover:text-blue-500 hover:underline" href="https://wocai.de/pegboard?ref=export">Pegboard</a>生成</p>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1.0, user-scalable=0"> <title>中国长征运载火箭家族-PegBoard</title> <link href="https://unpkg.com/normalize.css@7.0.0/normalize.css" rel="stylesheet"> <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAABSbX4A////AM/q/AD4+PgA4eHhAJbH6ACNu9kA5eXlAKbb/wDg4OAAoNP2AMTExADGxsYAAAAAAAAAAAAAAAAAEzMzMzMzMzEzMzMzMzMzMzNzMzM0OzszMzMyIiIiMzMzMziIiIg5MzMzOGCIqjMzMzM4iIiIMzMzMziIiIgzMzMzOIhYiDMzMzM4iIiIOTMzMzIiIiIzMzNDMzM3OzszMzMzMzMzMzMzszMzPDs7MzMzMzMzMzMzEzMzMzMzMzEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /> <style> html { touch-action: none; width: 100%; height: 100%; } body, main { margin: 0; width: 100%; height: 100%; overflow: hidden; } #app { background: #EEEEEE; width: 100%; height: 100%; overflow: hidden; touch-action: none; user-select: none; } #board { position: absolute; left: 0px; top: 0px; transform: matrix(1, 0, 0, 1, 0, 0); touch-action: pan-x pan-y pinch-zoom; } .card { display: block; position: absolute; overflow: auto; padding: 20px; box-sizing: border-box; background: #FFFFFF; border-radius: 10px; z-index: 10; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15); } #zoom { position: absolute; left: 10px; bottom: 10px; z-index: 200 !important; } </style> </head> <body> <div id="app"> <!-- board是一个可以拖拽移动的，需要和interact库做关联 --> <section id="board" :style="boardStyle"> <card v-for="item in boardData.items" :title="item.title" :content="item.content" :uuid="item.uuid" :width="item.width" :height="item.height" :left="item.left" :top="item.top"> </card> </section> <footer> <div id="zoom"> <button id="zoom-out" @click="boardScale(0.1)">放大</button> <button id="zoom-in" @click="boardScale(-0.1)">缩小</button> <button id="zoom-reset" @click="boardReset()">重置</button> </div> </footer> </div> <script src="https://unpkg.com/interactjs/dist/interact.min.js"></script> <script src="https://unpkg.com/vue@3.2.33/dist/vue.global.prod.js"></script> <script> const boardData = { "board": { "top": 14.30078125, "left": 285.6875, "scale": 0.40000000000000013 }, "section": "china-rocket", "path": "/Users/kok/Project/china-rocket", "items": { "b8888a63-7693-42cb-bd6e-ad3c5a0acb95": { "uuid": "b8888a63-7693-42cb-bd6e-ad3c5a0acb95", "top": 0, "left": 460, "width": 400, "height": 400, "title": "长征一号运载火箭", "content": "<p>在东风远程弹道导弹基础上研制的第一枚中国国产运载火箭，将中国第一课人造卫星“东方红一号”送入近地轨道（1970年）。</p>