https://www.yunyoujun.cn/favicon.png All at sea. 2022-01-15T17:59:12.000Z https://www.yunyoujun.cn/ 云游君 Hexo https://www.yunyoujun.cn/posts/quaternion-and-spatial-rotation/ 2022-01-15T17:59:12.000Z 2022-01-15T17:59:12.000Z

<p>在使用 Babylon 写 <a href="https://vrm.advjs.org/">ADV.JS VRM 模型编辑器</a> 的人物骨骼旋转动画的时候，我发现几乎所有的骨骼旋转均使用四元数（Quaternion）实现。</p> <p>于是我便打算好好了解一下相关的内容，但是网上搜到的不少帖子比如 Unity 欧拉角的旋转顺序都是互相矛盾的，导致自己也不知道相信哪个为好，决定还是自己实验下。</p> <p>同时写了下自己对四元数和万向锁的直观理解，希望能对有兴趣了解这方面的后来者有所帮助。</p> <p>因为有不少随手的截图和公式，所以就先放在了语雀上。也欢迎随时勘误！</p>

https://www.yunyoujun.cn/posts/how-to-write-a-web-component/ 2021-09-25T10:27:37.000Z 2021-11-11T10:27:37.000Z

<h2 id="Web-Components"><a href="#Web-Components" class="headerlink" title="Web Components"></a>Web Components</h2><p>什么是 Web Components?</p> <blockquote> <p>Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。</p> </blockquote> <p>Web Components 实际上和现在 React&#x2F;Vue 等前端框架的组件概念十分相似，或者倒不如说 Vue 的 SFC（单文件组件）其实正是借鉴自 Web Components 的概念。<br>它本身 Shadow DOM 的方案做了 CSS 隔离，很好地解决了 CSS 命名污染等问题，但 Web Components 除了规范推进缓慢，也还有很多开发（效率、生态、兼容等）上的不足。</p> <p>简单来说 Web Components 其实就好比给予你一些浏览器的 API 权限，去定义一个 HTML 标签来自己使用。<br>更多的介绍其实看 MDN 的介绍即可，也无需在这听我这二手的长篇大论。</p> <blockquote> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">Web Components | MDN</a></p> </blockquote> <p>我自己本身也向来讨厌<strong>通篇</strong>理论，而热衷实践，所以我们不妨动手一试，写一个<strong>真正实用</strong>的 Web Component - <code>github-corners</code>。（成果请到文章末尾取用）</p>

https://www.yunyoujun.cn/posts/how-to-realize-badge-rotation/ 2021-09-05T13:46:11.000Z 2021-09-19T13:46:11.000Z

<p>如何实现一个徽章惯性旋转动画？</p> <blockquote> <p>标题我只能说：懂得都懂。<a href="https://www.zhihu.com/question/393670234">如何评价「懂的都懂」这句话？｜知乎</a></p> </blockquote> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>距离上一次写技术文章过去了多久呢？大概已经屈指不可数了。<br>与此前相比，无论心境还是境遇也都变化了许多，而我本打算记录的实习生涯还未动笔，便已接近尾声。但愿还有机会一叙。</p> <p>在家中慵懒地躺了数日，自觉不应继续如此，方翻了个身，决定将此文修整完，以略表奋发之意。<br>总之，也由衷地希望大家能从中学习到什么或是给我一些更好的改进建议。</p> <p>那么，……，先旋转起来吧？</p>

https://www.yunyoujun.cn/diary/try-to-become-a-teacher/ 2020-09-11T15:59:23.000Z 2021-07-16T15:59:23.000Z

<blockquote> <p>「关于加个引号就能变成轻小说标题这件事」</p> </blockquote> <p>嘛，正如 <a href="https://www.yunyoujun.cn/essay/i-and-town-and-home/">前文</a> 所言，我确实准备报考教师证。</p> <p>并立此文章为证，（<del>那没考上岂不是贻笑大方</del>），记录一些过程（<del>破事水</del>）。</p> <p>因为标题拟的很像轻小说，并且这件事本身其实并不是什么有趣的事（<del>但我希望它能有趣些</del>），所以我决定用我的死宅文风以轻小说的方式来记录一下。（<del>欢迎吐槽，但别太伤人。</del>）</p> <p><img src="https://upyun.yunyoujun.cn/images/dont-scold-me.jpg" alt="别骂了别骂了再骂人要傻了"></p> <h2 id="内容简介"><a href="#内容简介" class="headerlink" title="内容简介"></a>内容简介</h2><p>成长的苦涩，日常的迷惘。<br>唯有长大方能看见的真相，让「死宅少年」偏移人生轨迹的事件……</p> <blockquote> <p>家里蹲死宅少年 —— 云游君，本作的男主角。<br>可爱女主角 —— 暂无（<del>欢迎参演</del>）</p> </blockquote> <p>云游君与并不存在的朋友们开始转动命运的齿轮。<br>未来又是否将就此改变。</p> <p>……</p> <p>成年人的青春物语开幕。</p>

https://www.yunyoujun.cn/share/how-to-build-your-site/ 2020-03-04T17:31:08.000Z 2021-07-14T08:31:00.000Z

<blockquote> <p>写给想要拥有一个自己的网站但没有资金成本的小白与曾经的自己。</p> </blockquote> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>虽说是网站，对于个人来说，或许一般叫作博客。<br>但我不希望它仅仅是一个博客，而是能够成为一个处于自己现实生活之外、自由、实验、不用畏惧他人眼光甚至可以独断专行的地方。</p>

https://www.yunyoujun.cn/share/third-party-comment-system/ 2020-05-17T05:30:40.000Z 2021-07-08T05:30:40.000Z

<p>静态博客纵有万般好，但不得不承认其常常需要很多奇技淫巧，方能实现<del>甚至无法实现</del>动态网站仅需数行代码便可实现的功能。</p> <p>评论系统便是其代表之一。</p> <p>我尝试过数种第三方评论系统（Disqus&#x2F;Gitalk&#x2F;Valine&#x2F;LiveRe(来必力)&#x2F;畅言&#x2F;utterance&#x2F;giscus），并在其中反复横跳，丢失了不少可爱的评论，也很遗憾未能找到一款真正百无挑剔的评论系统。</p> <blockquote> <p>一个事物的发展往往是一个波浪式前进、循环往复式上升的过程。</p> </blockquote> <p>我将简单对我使用过的评论系统之利弊进行对比分析（可能包含许多个人色彩），以便各位看官参考。</p>

https://www.yunyoujun.cn/posts/why-i-use-upyun-cdn/ 2021-05-27T13:29:35.000Z 2021-06-27T17:29:35.000Z

<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>距离上一次更新似乎又过去了很久，而我也成为了无聊的大人，被实习的工作压的喘不过气来。（此中又有不少波折，待尘埃落定，我再找机会记录它吧。）</p> <p>我的青春更是早在不知何时已经结束了。</p> <blockquote> <p>看，简单吧，谁也没有受伤的世界，达成了。</p> </blockquote> <a href="https://console.upyun.com/register/?invite=SyeQw09Bz" title="又拍云" target="_blank"> <img src="https://cdn.yunyoujun.cn/img/logo/upyun-logo.png" style="box-shadow: none;" alt="upyun"> </a> <p>故<a href="https://www.upyun.com/">又拍云</a>并非我的第一个 CDN，但它的确是我截至今日使用最久的 CDN。</p> <p>而我相信它也是新站长值得一试的服务。</p> <p>此中玄机，我们不妨先从 CDN 说起。</p>

https://www.yunyoujun.cn/posts/air-conditioner/ 2021-04-17T09:18:47.000Z 2021-04-21T09:18:47.000Z

<p><a href="https://github.com/YunYouJun/air-conditioner/"><img src="https://img.shields.io/github/stars/YunYouJun/air-conditioner?style=social" alt="GitHub Repo stars"></a></p> <h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><blockquote> <p>❄️ 云空调，便携小空调，为你的夏日带去清凉！</p> </blockquote> <p>这又是一个差不多两年前的坑。</p> <p>那么它能做什么呢？没错，<strong>随时随地</strong>打开空调。唯一的缺憾是，没有<strong>风</strong>。但我们也许可以「望空调止热」。</p> <ul> <li>GitHub: <a href="https://github.com/YunYouJun/air-conditioner/">air-conditioner</a></li> <li>裸机: <a href="https://ac.yunyoujun.cn/">云空调</a></li> <li>样板房: <a href="https://www.yunyoujun.cn/air-conditioner-room/">空调间</a></li> </ul> <p>遵从最宽松的 MIT 协议，你可以自行 <code>clone</code> 本项目，并自定义地构建它。当然也可以通过 <code>iframe</code> 的方式直接嵌入你的网站。</p> <pre class="language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>700<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://ac.yunyoujun.cn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">></span></span></code></pre> <blockquote> <p>对了，最近因为小空调又火了起来。浮现出了许多去除页脚、售卖源码和冒名顶替的情况。</p> </blockquote> <p>MIT 协议虽然允许你以任何方式使用，但仍然规定署名作者，且原作者不承担代码使用后的风险。</p> <p>当然，国内并无法律承认开源协议，所以这更像是君子协定，各自问心无愧即可。</p>

https://www.yunyoujun.cn/posts/why-make-char-dust/ 2021-03-12T17:08:46.000Z 2021-03-13T18:51:46.000Z

<p><img src="https://upyun.yunyoujun.cn/images/char-dust-jashin.jpg" alt="夹心酱"></p> <p>如题，它的全部作用就是将图片变成字符画（又称 <a href="https://zh.wikipedia.org/wiki/ASCII%E8%89%BA%E6%9C%AF">ASCII 艺术</a>）。</p> <ul> <li>GitHub: <a href="https://github.com/YunYouJun/char-dust/">https://github.com/YunYouJun/char-dust/</a></li> <li>示例站点: <a href="https://www.yunyoujun.cn/char-dust/">https://www.yunyoujun.cn/char-dust/</a></li> </ul> <p>似乎有些老生常谈，那么为什么会有它的诞生呢？</p>

https://www.yunyoujun.cn/posts/nnrm-new-nrm/ 2021-03-05T09:57:17.000Z 2021-03-05T09:57:17.000Z

<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>nnrm 即 new nrm。</p> <p>GitHub: <a href="https://github.com/YunYouJun/nnrm/">https://github.com/YunYouJun/nnrm/</a></p> <p><a href="https://www.v2ex.com/t/758624">nnrm - 一个极简的 npm&#x2F;yarn registry 切换管理器 | V2EX</a></p> <p>一个简单的 npm&#x2F;yarn registry （镜像源）切换工具</p> <blockquote> <p><a href="https://github.com/YunYouJun/nnrm/blob/main/README.zh-CN.md">中文使用文档</a></p> </blockquote> <h2 id="Why-new-nrm-nnrm"><a href="#Why-new-nrm-nnrm" class="headerlink" title="Why new nrm - nnrm?"></a>Why new nrm - nnrm?</h2><p>首先，我赞成重复造轮子是不好的行为。</p> <p>nrm 的确使得切换更加方便，譬如我们可以简单地使用 <code>nrm use taobao</code> 的方式切换镜像。<br>但是在切换镜像前，安装 nrm 本身也是一件很慢的事情，nrm 依赖了已 deprecated 的且包体较大的 <code>request</code>，<code>npm</code> 包，以及一些其他依赖。</p> <p>而我自身至今使用过的实际只有 <code>nrm ls</code> 与 <code>nrm use</code> 命令而已。（偶尔可能尝试一下 nrm test 进行测速）。当然它现在也支持了自定义源的操作。</p> <p>此外因为经常需要在不同的机器上操作，所以我希望它足够简洁，安装迅速，并且我不想总是看到依赖的包已 deprecated 的提示（强迫症？）。这便是它诞生的原因。</p> <p>好！就是这样！更多就请见 <a href="https://github.com/YunYouJun/nnrm/">项目 README</a> 吧！</p>

https://www.yunyoujun.cn/posts/2020-summary/ 2021-02-12T13:42:43.000Z 2021-03-02T13:42:43.000Z

<p><img src="https://upyun.yunyoujun.cn/images/how-to-raise-pigs.jpg" alt="如何养猪"></p> <blockquote> <p><a href="https://zh.wikihow.com/%E5%85%BB%E7%8C%AA">如何养猪 | wikiHow</a></p> </blockquote> <p>养猪指南？不对，是猪的成长日志。</p>

https://www.yunyoujun.cn/posts/find-npy-social-account/ 2020-11-12T03:46:38.000Z 2020-12-11T16:03:00.000Z

<blockquote> <p><a href="https://zh.wikipedia.org/wiki/A%E9%9D%A2%E8%88%87B%E9%9D%A2">A 面与 B 面</a>（英语：A-side 和 B-side）是流行音乐业界术语，于 1950 年代开始常用，原本指出版的 7 英寸黑胶唱片（必须是单曲）的两面。现在 A 面和 B 面通常用来辨别歌曲的重要度——放在 A 面的歌曲为主打歌，歌手会期望这些歌经常在电台等传媒渠道曝光；放在 B 面的歌曲则属于次要或附加歌目。</p> </blockquote> <h2 id="前奏"><a href="#前奏" class="headerlink" title="前奏"></a>前奏</h2><p>前些日子，其实就是咱考完教师证（10.31）的第二天，便要前往出差。</p> <blockquote> <p><a href="https://www.yunyoujun.cn/diary/try-to-become-a-teacher/">关于我打算当老师并报考教师资格证这件事</a></p> </blockquote> <p>晚间也成功地错过了万圣节。但想来这种现充的节日，也本就与我无缘。故也无从惋惜。</p> <p>尽管是流水账，但勉强作为日记记录下来，以作为引入正题的前言。</p> <blockquote> <p>「<a href="https://movie.douban.com/subject/26935251/">春宵苦短，少女前进吧！</a>」</p> </blockquote>

https://www.yunyoujun.cn/posts/vue-d3-demo/ 2020-11-21T11:56:09.000Z 2020-11-21T11:56:09.000Z

<p>这是一个极其简单的并尽可能面向未来的新手教程，它将指导你简单地使用 Vite 启动 Vue 的脚手架，并开始 D3 数据可视化的相关开发。而你无需 Vue 相关的前置使用知识，你只需跟随教程简单地使用它。<br>在课后如果你仍有兴趣，那么你可以继续地深入了解它。</p> <p><del>「简单」是不是用的太多了</del></p>

https://www.yunyoujun.cn/posts/gaussian-blur-for-image/ 2020-10-18T14:04:45.000Z 2020-10-22T14:04:45.000Z

<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>通常我们可以很容易地使用 PhotoShop 中的「高斯模糊」来模糊图片。</p> <p>这也是一种很好的艺术效果，苹果惯用的毛玻璃效果本质便是高斯模糊，而我们将图片模糊后作为网站背景，既减小了图片的体积，也能别有一番风味。（譬如咱站点的背景也是高斯模糊后的产物。）</p> <p><img src="https://upyun.yunyoujun.cn/images/photoshop-gaussian-blur.jpg" alt="Gaussian Blur | Photoshop"></p> <p>而 CSS3 提供了滤镜 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter">filter</a>&#x2F;<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter">backdrop-filter</a>，其中的模糊功能同样也是高斯模糊。（Canvas 中的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/filter">filter</a> 亦是如此。）</p> <p>只是当我们为图片背景添加 CSS 滤镜时，便会出现不和谐的白边。</p> <p>虽然有一些奇技淫巧（比如放大图片再截去模糊的边）去解决，但皆治标不治本，我们不妨借此机会探究一下高斯模糊，并尝试自己实现它。</p> <p>正文<strong>多图预警</strong></p>

https://www.yunyoujun.cn/posts/migrate-from-valine-to-disqus/ 2020-10-03T07:09:13.000Z 2020-10-06T07:09:13.000Z

<p>此前我在 <a href="https://www.yunyoujun.cn/share/third-party-comment-system/">第三方评论系统之我见</a> 中简要对比了使用过的一些评论系统，但仍旧没有得出一个尽善尽美的方案。</p> <p>我很长一段时间评论系统都是使用的 Valine，但因为后来博客第一次收到了一些<a href="https://twitter.com/YunYouJun/status/1310547458997415936">不友好的评论</a>，以至于我有一瞬间地冲动想要从 Valine 彻底迁移到 Disqus。</p> <p>但是 Valine 本身加载速度确实很快，用着也挺好，且文章的访问量统计也依赖于此。又实在没有办法下定决心切换至 Disqus。</p> <blockquote> <p>「任何可以用 JavaScript 编写的应用程序最终都将用 JavaScript 编写。」<br>In 2007, Jeff Atwood made the quote that was popularly referred to as Atwood’s Law: “Any application that can be written in JavaScript, will eventually be written in JavaScript.”</p> </blockquote> <p>看到许多小伙伴们最终都选择了 Disqus。</p> <blockquote> <p>任何带有评论系统的独立博客最终都将使用 Disqus 评论。<br>——我瞎说的</p> </blockquote> <p>也许终有一天，我确实会彻底从 Valine 切换至 Disqus，那么过去大家留下的评论便就此抛弃吗？又着实有些不忍心。</p> <p>若能将 Valine 中的评论导出并很方便地将其导入 Disqus，那么在决定切换至 Disqus 之前，我都可以放心地使用 Valine。</p> <p><img src="https://upyun.yunyoujun.cn/images/make-one-for-me-too.jpg" alt="给我也整一个！"></p>

https://www.yunyoujun.cn/posts/make-an-avg-engine/ 2020-09-28T11:33:17.000Z 2020-09-28T11:33:17.000Z

<p>ADV.JS 又一个遥遥无期的大坑。</p> <blockquote> <p>GitHub: <a href="https://github.com/YunYouJun/advjs">https://github.com/YunYouJun/advjs</a><br>Demo: <a href="https://advjs.elpsy.cn/">https://advjs.elpsy.cn</a></p> </blockquote> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>按照惯例，开坑前先来三问。是什么？为什么？怎么做？</p>

https://www.yunyoujun.cn/essay/i-and-town-and-home/ 2020-08-14T22:00:00.000Z 2020-09-05T21:00:00.000Z

<blockquote> <p>2013-05-14<br>今日一位同学过生日，收到了很多礼物。想一想，要是我的话，也没有同学会知道我的生日吧。就像我也不知道他们的生日。<br>—— 我的一位朋友的青春<del>疼痛（中二）</del>日记</p> </blockquote> <p>正如标题，我决定在鄙人生日这天（<del>实为早便想写，却拖到现今，甚至于鸽了自己</del>），写一写自己与我生活的小镇与我的家，并试图回首 23 年与之相伴的人生，揣度未来。</p> <p>但到真强逼着自己去写时，反倒无感而发，一停下来，便又浮想联翩。所以最终估摸也只是毫无章法的碎碎念。</p>

https://www.yunyoujun.cn/note/make-hexo-theme-yun/ 2019-04-27T04:00:00.000Z 2020-09-01T12:00:00.000Z

<p>Hexo-Theme-Yun 绝赞开发中~</p> <!--  --> <ul> <li>GitHub: <a href="https://github.com/YunYouJun/hexo-theme-yun">https://github.com/YunYouJun/hexo-theme-yun</a></li> <li>Docs: <a href="https://yun.yunyoujun.cn/">https://yun.yunyoujun.cn</a></li> <li>Example: <a href="https://www.yunyoujun.cn/">https://www.yunyoujun.cn</a></li> <li>PV: <a href="https://www.bilibili.com/video/BV17t4y1S7tz">Strato - Hexo 主题「Yun」版本宣传 PV</a></li> </ul> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>还在用 <code>WordPress</code> 的时候，总是喜新厌旧，经常换主题。且装了一堆插件，速度慢还容易崩。<br>而迁移到 <code>Hexo</code> 之后（小水管服务器太慢，拿去挂 MC 了。<del>根本原因是没钱</del>），光是 <code>hexo-theme-next</code> 的配置项，便让我花了好一番功夫。<br>导致觉得自己不一直用下去，感到十分对不起仔细一个一个配置过来的自己。</p> <p>当然，还是改不了喜新厌旧的毛病。加之 next 主题过于广泛，显得自己泯然众人。心中颇有愤懑。（<del>虽然本就如此</del>）</p> <p>而如今，诸事已毕，终于腾出空来。<br>便决定开发一款属于自己的主题。</p>

https://www.yunyoujun.cn/share/hexo-theme-yun-strato/ 2020-08-28T14:00:00.000Z 2020-08-28T14:00:00.000Z

<p>为主题 <a href="https://github.com/YunYouJun/hexo-theme-yun">hexo-theme-yun</a> v1.0 Strato 做的宣传 PV ～（<del>也许是第一个有 PV 的 Hexo 主题？</del>）</p> <blockquote> <p>谢谢你喜欢我的主题！</p> </blockquote> <p>当我第一次听说要做主题的宣传 PV 我是拒绝的，因为，不能你让我发 1.0，我就马上去发，第一我要试一下，因为我不愿意做完了以后再加一些特技上去，主题 Duang 一下，很亮、很柔，这样用户一定会骂我，根本没有这样的主题，就证明上面那个是假的。</p> <p>后来我也不断在修 BUG，我自己用了大概一年左右，感觉还不错，后来我在做 PV 的时候也尽量不加特技，因为我要让用户看到，我用完之后是这个样子，你们用完之后也会是这个样子！</p>

https://www.yunyoujun.cn/note/make-el-bot/ 2020-06-21T18:16:53.000Z 2020-08-20T12:16:53.000Z

<p><a href="https://github.com/YunYouJun/mirai-ts">mirai-ts</a> 是 <a href="https://github.com/mamoe/mirai-api-http">mirai-api-http</a> 的 TypeScript&#x2F;JavaScript SDK。<br><a href="https://github.com/ElpsyCN/el-bot">el-bot</a> 是一个基于 <a href="https://github.com/YunYouJun/mirai-ts">mirai-ts</a> 使用 TypeScript&#x2F;JavaScript 编写，可配置、可自定义插件的 QQ 机器人。</p> <ul> <li>GitHub: <a href="https://github.com/YunYouJun/mirai-ts">mirai-ts</a></li> <li>GitHub: <a href="https://github.com/ElpsyCN/el-bot">el-bot</a></li> <li>Docs: <a href="https://yunyoujun.cn/mirai-ts/">mirai-ts API 文档</a></li> <li>Docs: <a href="https://docs.bot.elpsy.cn/">el-bot 文档</a></li> </ul> <p>el-bot 展示了整个 mirai-ts 的使用流程，并内置了一些如自动应答、转发、命令行、RSS 等常用功能（默认插件），开箱即用。<br>你只需要一些自定义的配置，而不再需要编写繁琐的脚本内容。<br>但这并不是束缚，在插件系统中你仍然可以调用机器人所有的上下文，并通过编写插件的形式快速实现你想要的功能。</p> <p>照例只是非正经开发日志的历程记录。</p>