事情起因：单个页面请求了二三十个接口，数据多时展示得很慢 前置知识：事件循环 Vue 不能像 React 一样通过 `setState` 触发页面重新渲染，每当你对被页面监听的值赋值，Vue 都会把修改的值记下来，运行完**宏任务（task）**后渲染页面。 正常来说，同一个宏任务内不管赋值多少遍，最后都会归作一次渲染。 但是请求接口时，写在回调函数里的，都是将要运行在另一个宏任务的代码... ...继续阅读 (40)

阅读本文前，请先熟悉各进制间的转换，否则看起来会有点懵 😂 相关：UCS（Universal Character Set）原本标准不同，但现在已经与 Unicode 统一 Unicode 就是一种世界统一的字符编码集合，在这个集合里，世界上每一个字符——任何语言的文字、符号甚至 emoji，都有自己的编号，称为 **code point（码点）**。这样的编号从 0000 开始，到 1... ...继续阅读 (36)

最近莓更新博客，真的真的不是因为懒，只是把时间拿来写小说了。 其实从高中开始，被当时轻小说盛世的影响下，我一直想创作一个故事，但是高中嘛，没有太多时间，当时只留下零零碎碎的设定。 而如今看回这些设定... 一个是高中生活的故事，现在看来太稚嫩了（emmm，谁知道我现在写的再过几年会不会被自己说稚嫩呢），也缺乏真正想表达的东西，不捡起来了； 另一个是幻想战斗故事，这个故事的设定还挺完整，甚... ...继续阅读 (35)

mdn 虽然叫 **client** **Top**，拿到的却是**顶边宽度**，叫人十分迷惑 相当于 `.getComputedStyle()` 的 "border-top-width" 同理可得 clientLeft mdn 还是不懂所谓 **client** 是什么意思，死记硬背吧 clientHeight = 本身高度 + padding - 滚动条宽度（如果有） ... ...继续阅读 (43)

页面结构变化不大，主要是实现黑暗模式和樱花开关，当然黑暗模式的样式还有不少需要调整的地方，往后再慢慢微调吧。（黑暗模式的实现方法可看这里） !日 !夜 事实上黑暗模式就是 UI 1.0 的夜樱样式，她又回来啦！有点怀念，这么就一年多了... 另外最近的更新也是超麻烦的，一切原因归根于 node 版本更新了，Gatsby 的依赖里有需要重新 build 的地方，于是就把 node_modu... ...继续阅读 (37)

没想到久违的 Gatsby 系列还能继续写，最近为博客更新了黑暗模式和手动切换功能，顺便记录下来。当然下面的实现方案不限于 Gatsby 使用，对于其他框架，思路都大同小异。 最初实现的方案是直接使用**媒体查询**和 **CSS 变量**。关键是把区分两个模式的变量抽离出来，分别配置两组变量，核心代码如下： ```css @media screen and (prefers-color... ...继续阅读 (36)

Previously, we talked about the official launcher tyranorider, which essentially opens the game by using NW.js to open index.html. TyranoScript framework is quite straightforward. This framework **b... ...继续阅读 (31)

之前有说过官方启动器 tyranorider，从这里打开游戏本质上是使用 NW.js 打开 index.html。 TyranoScript 这个框架其实是很耿直的，这个框架**基本上**没有依赖启动器的功能（有极少量使用到 NW.js 的 API），全部功能基本都包含在 js 文件里，这意味着你是可以摆脱官方启动器的，事实上这个工程可以在任意基于现代浏览器内核的程序上运行（即使直接用 chr... ...继续阅读 (40)

This article mainly involves three key terms: First, let's explain what "same-origin" means: if the protocol, domain, and port are the same, it is considered the same origin. | url ... ...继续阅读 (35)

Este texto se refiere principalmente a tres conceptos clave: Primero, vamos a explicar qué significa mismo origen: si el protocolo, el nombre de dominio y el puerto son iguales, entonces es ... ...继续阅读 (35)

本文では、3つのキーワードについて説明します： まず、同一オリジンとは何かを説明します：プロトコル、ドメイン、ポートがすべて同じであれば、同一オリジンです。 | url | 同一オリジン | | -------------------------------- | ------------ | | https://ni... ...继续阅读 (31)

本文主要涉及三个关键词： 先解释何为同源：协议、域名、端口都一样，就是同源。 | url | 同源 | | -------------------------------- | ---- | | https://niconico.com | 基准 | | https://niconico.com... ...继续阅读 (39)

So, how does one integrate Steam with TyranoScript? I'm sure you're all familiar with TyranoScript, but integrating it with Steam may seem like a mystery. Let me take you through it. Integrating Tyra... ...继续阅读 (39)

TyranoScript 接入 Steam 是怎么回事呢？TyranoScript 相信大家都很熟悉，但是 TyranoScript 接入 Steam 是怎么回事呢，下面就让小编带大家一起了解吧。TyranoScript 接入 Steam，其实就是用 greenworks 接入，大家可能会很惊讶 TyranoScript 怎么会接入 Steam 呢？但事实就是这样，小编也感到非常惊讶。这就是关于... ...继续阅读 (35)

原文地址：Iterating Over JavaScript Object Entries and their Performance - 5 Techniques 返回对象所有**可枚举**的键值对，**不会**追寻原型链上的 key ```javascript let obj = { key1: "value1", key2: "value2", key3: "value3",... ...继续阅读 (41)

**剧透注意** **The following review contains spoilers!** **ネタバレ注意** **剧透注意** **The following review contains spoilers!** **ネタバレ注意** 最近广州暴雨连连，大多时间都是乌云密布的，但有时候上班又能享受到珍贵的阳光。正好在今天看完了「天气之子」，和最近广州的天气真有点像... ...继续阅读 (46)

读完就能解决这些疑问啦！ 先说是什么：ESLint，他就能检查出你代码中不符合规则的地方，部分问题支持自动修复。 使用这么一套规则有什么用呢？如果单人开发的话倒是没什么了，但是一个团队若是存在两种风格，那格式化之后处理代码冲突就真的要命了，统一的代码风格真的很重要！ （其实以前自己做一个项目的时候，公司电脑和家庭电脑的代码风格配置不一样，在家加班的时候也经常顺手格式化了，这么循... ...继续阅读 (41)

This should be the real first explanation for customizing the TyranoScript kernel. TyranoScript is a domain-specific language, but it runs in the browser, so its functionality is definitely implem... ...继续阅读 (39)

这算是真正魔改内核的第一次讲解。 TyranoScript 是一种领域专用语言，但是运行在浏览器，功能肯定还是 JavaScript 实现的。要把脚本运行起来需要先把脚本“分词”，然后按规则把词组合成一组。（这个功能的代码在 `kag.parser.js` 文件里） 完事之后得到的就是默认在控制台打印的信息： ! 在读取这样的对象之后，框架就会根据不同的 tag 运行不同的函数，而这... ...继续阅读 (35)

在最初听说断舍离的时候确实以为是宗教相关的东西，不过实际上，断行、舍行、离行是瑜伽修行哲学（大概也跟宗教沾点边吧）。而我个人理解的断舍离是实用的极简主义。 第一次读断舍离是在几年前，看完不久，我就经历了两次搬家，而这两次搬家切实让我明白断舍离的重要。以前我会买很多漫画书、杂志（这其中甚至还有不少盗版）。以前总觉得收藏这么一堆东西很有意思，但是现在看来觉得毫无意义，这些东西还会在搬家的时候拖... ...继续阅读 (40)

今天我本来只是想把本网站的评论系统 docker 化，结果引出一个大问题（主题就是标题的内容了），从头开始讲讲吧... 本网站的评论系统（使用 eggjs）一直很不稳定，服务开启之后会无端关闭，导致经常一两天要重启一次，非常影响使用。本来以为是免费数据库的问题，但是我现在也有一台小小的虚拟机了，总有办法解决的，所以直到昨晚，终于下定决心了结这个问题。 开始，首先要查出为什么会莫名关闭，翻看日... ...继续阅读 (39)

虽然看起来没什么区别，但是本站已经从 netlify 迁移到 zeit。至于原因是感觉 zeit 的 cdn 在这边会快点，也不知道是不是错觉了，顺便，迁移到 zeit 之后 rss 比以前好使了，netlify 的时候好像会经常探测不到 rss 更新。 最近越来越懒了，加把劲骑士！ ... ...继续阅读 (32)

!登岛 自从 NS 动森发售，这个游戏都高频出现在身边各种群，直到现在各种系列新玩家蜂拥登岛，甚至微博上各种官方号都发布动森相关内容，毫无疑问这个游戏可以算是现象级游戏了。 而我就是众多动森系列新玩家之一，旧作完全没有接触过，买的原因自然是身边玩的人多，而且风评不错。 于是在 20 年 3 月 23 日，在多灾多难的 2020 年，我逃到了一个无人岛上。 然后我终于认识到了大家口中的奸商... ...继续阅读 (37)

第一次看到 volumes 这个参数是在一个维基镜像的 `docker-compose.yml` 文件： ```yaml version: "2" services: dokuwiki: image: "bitnami/dokuwiki:0" ports: volumes: volumes: dokuwiki_data: driver:... ...继续阅读 (34)

回顾上一篇：前端网络安全必修 1 SOP、CSRF 和 CORS 本文主要涉及内容为： 因为 CSP 诞生的主要目的就是防御 XSS 攻击，就把 XSS 放在前面讲吧~ ```html ...继续阅读 (38)

简单来说，docker 可以给你的应用创造一个**镜像**，之后你带着这个镜像就可以在其他主机、甚至其他系统轻松以原来的配置运行你的应用，这样的一个应用后面成为**容器**。使用 docker 会比直接使用虚拟机所需的性能需求要少很多，因此你可以在主机运行多个容器并保证性能。而且因为容器的相互分离，可以减少环境间的相互影响，避免一些难以 debug 的错误。 在学习 docker 之前必须知道... ...继续阅读 (41)

整个过程不难，只是对 linux 系统很陌生的我，在编译安装的时候有点云里雾里。不过装完之后觉得如果不深究其中原理的话其实还是不难的，就是很普通地用编译器把配置好的源码编译好，然后运行程序而已，实际上自己也不需要做什么高难度操作。 事实上，吃瘪的 centOS 7.5 用户根本没有直接安装 vim 8 这个选项，虽然可以百度到一个换仓库然后 yum 的方案，但是很遗憾，那个仓库已经 404... ...继续阅读 (38)

自己搭了个自用的维基记录各种零碎的不成文章的东西，另外 wiki 系统可以在线编辑页面和新增内容，就不用像这个静态博客一样每次写完还要 push 还要打包，希望自己不要沉迷于 wiki 的方便而冷落了博客啦 😄 之所以选择 dokuwiki 是因为够轻量化，不需要数据库，迁移可以打包带走（这是考虑到主机一年后就过期，不知道优惠价还有没有）。而且即便是这么简单的一个程序我懒起来依然是上了 do... ...继续阅读 (42)

今年元旦只放一天假，时间紧迫让我产生了一种错觉，我上年的年终总结是春节写的。 结果今天翻一下上年的记录，哦豁，竟然是元旦前。这种仪式性的大事一定不能鸽，反正内容不多，立即敲起了键盘。 回顾上年，唯一完成了的感觉只有超巴前三。其他习惯上的约束，会有遵守，但也有松懈的时候，不好评估，只希望明年继续坚持。 特别的是，在写下关于学习这段文字之后，我对各大编程文章站的上线率都下降不少，代替直接看文章... ...继续阅读 (37)

周末来了，终于有时间一气呵成地连写到第 6 天：上午逛街，下午大阪海游馆+天保山摩天轮。全天也是大阪活动，不过因为去海游馆所以买大阪海游票 2600 日元，正常海游馆票价是 2300，就等于 300 日元买了地铁一日票。 早上得逛街目的地是日本桥，先逛的电器店。本想在日本买个加湿器，但是做功课发现超声波雾化会增加室内 pm2.5，瞬间拔草了。 之后到死宅天堂走一趟，然而依然没有购买欲。 ... ...继续阅读 (41)