使用 docker 构造前端构建环境

托管在公司 gitlab 上的一个前端项目,最近在尝试 docker 化。 准备阶段 Gitlab 上的一些问题 如果项目不是公开的,从 docker 环境中拉取代码会有些许权限问题,可一一解决。 clone with deploy token 到 Gitlab 中对应项目的 settings/repositor...

CSS 中的两种模糊半径

比较一下 text-shadow 和 filter: drop-shadow 的模糊半径差异

浏览器中的字体信息测量

用简单的工具函数获取字符的宽高

SVG 元素的自定义 transform origin

不要使用 transform-origin 属性 SVG 支持 transform,而且写法似乎与 CSS 中相同,但是它的标准里并不支持 transform-origin 属性。虽然在部分浏览器中,给 SVG 元素指定 transform-origin 似乎是有效果的(写法和结果也与 CSS 一样),但是无法指...

Goodbye My Santa Monica Dream 🎵

从《Life is strange》的原声带中发现的瑰宝,来自澳大利亚的兄妹组合 Angus & Julia Stone 的一首略显忧伤的曲子,他俩前几年的曲风,小清新中带着些许迷幻。妹妹声音空灵慵懒,像加州的海风,棕榈叶间斑驳的阳光,和歌词特别配。 原曲使用 Open D 调弦,变调夹 3 品,感谢...

Vuex 模块动态注册的一些实践经验

前言 构建大型 SPA 应用时,代码分割和懒加载是比较常用的优化手段,在 Vue 生态下,使用 vue-router 很容易实现组件的懒加载。 但应用里除了组件,还有庞大的业务逻辑,这部分如何分割和懒加载比较合适呢? 使用 Vuex 管理状态的话,其提供了方法 registerModule 用于动态注册 Modu...

Try Rust WebAssembly

在公司项目里的一个小角落,尝试使用 Rust + WebAssembly 加速应用里部分计算 选择 首先要分清项目里 WebAssembly 的定位 应用主体:完成绝大多数逻辑,JS 只作为加载入口和少部分事件绑定桥梁 工具库:分担一些复杂和耗时的计算,由 JS 决定什么时候调用 wasm 模块函数,通常情况下...

用 Jest 单元测试基于 Vue 的项目

为一个基于 Vue 的项目搭建测试框架,有两个比较成熟的选择,Mocha + Webpack + Karma,或是 Jest。 前者也是 vue-cli 默认脚手架里的测试方案,我们之前的项目也用了它,实际使用起来,感觉成也 Karma,败也 Karma,配置起来不是很顺手,导致测试必须在完整打包后才能进行,测试...

在 Typescript 中继承 Error 对象

通过 Typescript class 继承 Error 实现自定义错误类型并编译到 ES5 时,遇到了一个坑。 class MyError extends Error {} compilerOptions.target 设为 "es5"。 但是运行起来: const er...

在 Typescript 中使用可被复用的 Vue Mixin

转到用 Typescript 写 Vue 应用以后,经过一轮工具链和依赖的洗礼,总算蹒跚地能走起来了,不过有一个很常用的功能 mixin,似乎还没有官方的解决方案。 既想享受 mixin 的灵活和方便,又想收获 ts 的类型系统带来的安全保障和开发时使用 IntelliSense 的顺滑体验。 vuejs 官方组...