Toc Bar Userscript - 一个显示页面大纲的油猴脚本

Toc Bar 一个自用的油猴脚本,在页面中插入一个显示当前内容大纲的浮动组件,可去 greasyfork 下载。 目前适配了一些个人经常访问的网站,主要面向技术阅读,知乎/Medium/devto/github 之类。 ✨Features 使用 tocbot 生成 Table of Content 对一些页面...

工作和个人项目使用不同 gitconfig

首先在 ~/.gitconfig 中设定如下,注意 gitdir 后面的 ~/work/ 末尾的 / 不能少。 [includeIf "gitdir:~/work/"] path = ~/.gitconfig-company [includeIf "gitdir:~/projects/"] path =...

初识 Web Audio API - 术语扫盲

Web Audio 提供了一个基于图的音频处理构建体系,这个系统里的单元为各种音频节点(AudioNode),可模块化连接(modular routing)。这个体系被业界广泛认同多年,有很多成熟的应用和系统,例如 Apple CoreAudio,而这个设计理念再往上还能追溯到 1964 年的 Moog 合成器。...

一次 Webpack 下的 Vuex HMR 尝试

使用 Webpack 构建 Vue 项目时,借助 vue-loader 和 vue-hot-reload-api,我们在开发的时候可以获得很好的组件热加载(Hot Module Replacement)体验。然而 vue-loader 中却没有关于 vuex 的配置(当然这也的确不是它应该插手的地方)。 官方 v...

我的常用正则表达式清单

转换 medium 的一篇文章有列出几种常见命名方式转换的 JS 函数 CamelCase -> kebab-case javascript 使用示例 string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() 其中使用了正向前...

Awesome UltiSnips

UltiSnips 不愧为 vim (或乃至所有编辑器)生态下的最佳代码片段解决方案。支持多种常见语法、snippet 添加和管理符合直觉(此处应 cue 一下隔壁对多行文本支持令人垂泪的 vscode)、还有眼花缭乱的 python 脚本插值供 高级玩家 使用。 UltiSnips 项目已有十年的历史,功能为其...

浏览器 IndexedDB 存储限制

以下列出在 夺目 产品的开发中,对 WebStorage 和 IndexedDB 使用的一些经验。 WebStorage 存储空间限制 首先,存储分为两种: 临时存储 (Temporary Storage),默认类型,之后可能会被浏览器删除。 持久存储 (Persistent Storage),不会被浏览器自动...

编译 Skia canvaskit.wasm

Skia 是 Google 一个开源的跨平台图形库,用于 Android, Chromium, Flutter 等项目。目前项目内有在开发的一个 Skia + WebAssembly 版的 CanvasKit, 可以使用 JS 调用预先编译好的 c++ -> wasm 模块,为一些跨平台的图形项目(例如 l...

在浏览器端检测电脑是否刚从休眠中醒来

当电脑进入休眠状态,浏览器的一些持久功能会受到影响(例如 WebSocket 连接中断),有时需要在从休眠状态中恢复过来的时候做一些检查和恢复工作。

解决方案

利用计时器

let lastTime = (new Date()).getTime()

// 可能由于脚本计算量大,或是使用了 alert/confirm 等阻塞线程的函数,的确会有些小误差,可以忽略掉
const THRESHOLD = 15000

setInterval(function() {
  const currentTime = Date.now()
  if (currentTime > (lastTime + THRESHOLD)) {
    // 刚醒来,做点什么呢
  }
  lastTime = currentTime
}, 30000); // 30s 比较保守,可以根据业务需求来调整

参考

命令行下的图片压缩工具

推荐几个命令行下的图片压缩工具 ImageOptim-CLI/imagemin-cli