docker

把 Ghost Blog 迁移到 Docker 驱动

好久没写 Blog 了,净搬家玩儿了。前一段时间,Linode 降价,就把 Blog 从 Vultr Tokyo 区搬到了 Linode Tokyo 2 区,速度并没有太大提升。这两天发现我的信用卡突然可以在 GCP 上注册了,果断试用了个一年份的 GCP 台北彰化机房的 VPS。从家里访问延迟从 200 降到了 90,traceroute 发现也不用过美国转一圈了,效果还是不错的。 新主机打算把包括前置的

  • George Cheng
    George Cheng
3 min read
JavaScript

理解 Promise (WIP)

一直想写篇文章帮助初学者理解 Promise。Promise 这个东西总是被人和异步回调这些东西联系在一起理解,而异步回调这些东西本身就已经很难理解了,再在上面叠上一个 Promise 理解起来更是难上加难。所以我考虑用另一种形式形式来表达 Promise 的特点,希望能对理解 Promise 有所帮助。 下面开始: 一、用 Promise 处理值 假如我们现在有一个数字: 4 假如我们又有一个操作叫 加五: function add_five(n) { return n + 5 } 假如我们还有一个操作叫 开平方: function

  • George Cheng
    George Cheng
6 min read
node

加速你的下载:发布 npm 命令行工具 qiget

qiget 主要用来解决某些情况下下载速度不足的问题。 其原理是调用七牛的 fetch 接口,将远程文件经过七牛云存储中转下载到本地的方式,在某些慢速下载的场景下会有很好的效果。 安装和配置 $ npm install --global qiget $ exports QIGET_ACCESS_KEY=accesskey $ exports QIGET_SECRET_KEY=secretkey $ exports QIGET_BUCKET=bucket $ exports QIGET_HOST=host 其中 accesskey 与

  • George Cheng
    George Cheng
1 min read
Django

使用信号监控 Django 模型对象字段值的变化

Django 信号 (Signals) 的功能类似于 WordPress 的动作 (action),用于为项目全局增加事件的广播 (dispatch) 与接收 (receive) 机制。其中,灵活使用其内置的模型信号 (Model Signals) 的接收功能就可以监控大部分模型对象 (Model instances) 的变化。因为不需要修改模型本身的代码,在进行跨应用 (App) 监控时有低耦合的优势。 基本用法 信号的基本用法官方文档上的主题与参考上已经有详细描述。本文只提几个要点(本文环境:Django 1.8 & Python

  • George Cheng
    George Cheng
2 min read
HTTP

从跨源 302 重定向到同源后会出现 Origin: null 的现象

在 Heroku 上用 node 写了个重现。 看整个请求的过程,请打开浏览器的调试工具,看网络请求的日志。 先看一下我的截图: 首先使用 Ajax 发送了一个跨域请求,该跨源请求重定向到同源请求。 此时浏览器自动请求重定向后的同源请求,该请求自动附加了 Origin: null 头。 在 StackOverflow 上有该现象的讨论,还没细看。现在基本可以确定该现象属于 HTTP 协议的正常规定。

  • George Cheng
    George Cheng
1 min read
node npm

wpkg - 选择适合你的最火的 node 包

每当我在写 node 程序的时候,都会遇到需要使用某些已经成熟的功能包,但是并不知道该功能包在 npm 里面叫什么,或者哪个好的尴尬境地。 目前有一些网站在做这方面的索引,譬如 node-modules。但是这类网站基本上是以该包在 GitHub 上的 star 数决定排名。 我感觉这种排名方式并不客观: 首先并不一定每个包都在 GitHub 上托管仓库,有些包会在 Bitbucket 上甚至并不会托管源码在代码托管系统。 其次对于越小的功能包,star 数多并不能代表该包有多流行。譬如最简单的 mkdirp 或者 rimraf 这种包,只要牵涉到文件的 node

  • George Cheng
    George Cheng
1 min read
CSS

Bootstrap 4 alpha 新特性介绍

昨日 Bootstrap 官方发布了 4-alpha 版本,该版本的主要变更如下: 从 Less 迁移到 Sass。 Bootstrap 依靠 Libsass 拥有了前所未有的编译速度,我们也加入了蒸蒸日上的 Sass 开发者委员会。 改进的网格系统。 我们添加了一个新的网格层用于更好的支持移动设备,并全面检查我们的语义 mixin。 可选的弹性盒子支持。 未来近在咫尺——将一个布尔变量设为 true 之后重新编译 CSS 就可以体验到弹性盒布局的网格和组件的强大。 well、thumbnail 和 panel 组件统一为

  • George Cheng
    George Cheng
2 min read
JavaScript

解读 webconponents.js 中对 ES6 WeakMap 的 shim (一)

ES6 中对 WeakMap 的要求主要是对 key(非 null 对象) 仅保留弱引用,且取值是 O(1) 复杂度,这导致了它的两个特性: 不能求大小,更不能枚举。 当 key 对象不被其他变量引用时,会被垃圾回收系统回收。 按说这种关乎内存管理的对象是没法 shim 的。但是webcomponents.js 对 WeakMap 有一个很奇妙的 shim。经过阅读后整理原理如图: 解说: WeakMap 内不提供存储

  • George Cheng
    George Cheng
2 min read
CSS

CSS 中 inline-block 两端对齐的解决方案

CSS 中实现两端对齐效果一般是采用 Flexbox 的方式解决,但是 Flexbox 的兼容性问题使得其在目前的前端领域应用性不高,但是实现两端对齐还有一个传统的 CSS 语法是text-align: justify。当我们对inline-block块所属的容器施加text-align: justify时,效果如下: 可见text-align: justify方法可以让第一行实现两端对齐,但是不能控制第二行(最后一行)的对齐方式。 解决这个问题要用一点小技巧,就是使用父块的::after伪元素强制作为父块的最后一行。这样就可以让第二行成为非最后一行,从而成功套用justify对齐方式。 具体实现方式如下: ul::after { content: ''; display: inline-block; width: 100%

  • George Cheng
    George Cheng
2 min read