前端开发，音游狗

加速你的下载：发布 npm 命令行工具 qiget
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
Django

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

Django 信号 (Signals) 的功能类似于 WordPress 的动作 (action)，用于为项目全局增加事件的广播 (dispatch) 与接收 (receive) 机制。其中，灵活使用其内置的模型信号 (Model Signals) 的接收功能就可以监控大部分模型对象 (Model instances) 的变化。因为不需要修改模型本身的代码，在进行跨应用 (App) 监控时有低耦合的优势。 基本用法 信号的基本用法官方文档上的主题与参考上已经有详细描述。本文只提几个要点（本文环境：Django 1.8 & Python 3.4）： 代码组织 官方推荐在应用目录下新增一个 signals.py 文件，同时参考官方文档的应用配置节中自定义应用配置 (AppConfig) ，重载应用配置类的 run
HTTP

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

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

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

每当我在写 node 程序的时候，都会遇到需要使用某些已经成熟的功能包，但是并不知道该功能包在 npm 里面叫什么，或者哪个好的尴尬境地。 目前有一些网站在做这方面的索引，譬如 node-modules。但是这类网站基本上是以该包在 GitHub 上的 star 数决定排名。 我感觉这种排名方式并不客观： 首先并不一定每个包都在 GitHub 上托管仓库，有些包会在 Bitbucket 上甚至并不会托管源码在代码托管系统。 其次对于越小的功能包，star 数多并不能代表该包有多流行。譬如最简单的 mkdirp 或者 rimraf 这种包，只要牵涉到文件的 node 程序一般都会使用他们，然而它们的 GitHub 仓库的 star 数并不能如实反映这种情况。 我认为相对客观的方式是使用它们被依赖的次数进行择优，即参考 most depended-upon packages
Bootstrap 4 alpha 新特性介绍
CSS

Bootstrap 4 alpha 新特性介绍

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

jAjax: jQuery.ajax with ES6 Promise

起因 用 React、Vue.js 这些视图层高端武器的时候 他们不提供 Ajax 通信功能 还是 Angular.js 爽 直接用 XMLHttpRequest 觉得麻烦 于是 就用专门的 Ajax 库，比如说 fetch Polyfill reqwest SuperAgent 这些东西存在的问题有 兼容性问题 额外的学习成本 拼写看着难受 等 后来 大伙儿表示 去你大爷的 老子就是喜欢 jQuery 我就把 jQuery 的 ajax 模块拿出来单独编译 剔除 jQuery 的其他部分，还能缩减点源码的尺寸
Python

Cent OS 下使用 Nginx 部署 Python 3 编写的 Django 工程的 uwsgi

官方推荐在 systemd 中使用 emperor 的方式进行服务器自启动的部署。我觉得在 uwsgi 进程之上再加一个管理进程，显得有点重。于是就没用 emperor 的方式而是直接调用业务的 uwsgi 进行部署。 uwsgi.ini 内容如下 [uwsgi] chdir=/path/of/project module=project.wsgi:application master=True pidfile=/run/uwsgi.pid vacuum=True max-requests=5000 socket=/run/uwsgi.socket thunder-lock=True enable-threads=True
解读 webconponents.js 中对 ES6 WeakMap 的 shim （一）
JavaScript

解读 webconponents.js 中对 ES6 WeakMap 的 shim （一）

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

Django admin 界面显示不正常的可能原因 (Python 2)

检查定义中是不是有些包含中文的字符串没有使用 unicode 字符串语法 u'呵呵'。 已确认下面两个问题都是因为该原因而起 django-constance 中的 description 显示不正常：description 没有使用 unicode 字符串 modelAdmin 中 filter_horizontal (filter_vertical) 显示不正常：Model 的 verbose_name 没有使用 unicode 字符串。
Django

Django 1.7 中 migrate 无法执行而且表不存在的解决方案

现象 执行 python manage.py migrate 时，系统提示 No migrations to apply. 但是数据库中仍然没有迁移后的表格。 解决方案 执行 python manage.py dbshell 进入 dbshell 。执行 SELECT * FROM django_migrations 发现将要执行的迁移脚本的 id 已经添加在表中了，将其删除即可。 原因 发现是之前按照某个说明执行了一次 python manage.py migrate --fake 导致的。--fake 的含义是不执行该迁移脚本但是标记该脚本已经被执行过。导致之后无法正常进行迁移。
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%; } 效果如下： Fiddle: PS. Internet Explorer 浏览器从 6 开始就有了text-align-last CSS 属性，用于控制最后一行的对齐方式，

推荐一个 gulp 插件 gulp-filter

在针对多种类型的文件进行分别构建，再一同合并的时候，传统的方法是分别建立流进行构建，再使用 streamqueue 插件对流进行合并： gulp.task 'css', -> streamqueue objectMode: true, # source gulp.src 'src/css/**/*.css' # | css gulp.src 'src/css/**/*.less' # | | less .pipe less() # | | | gulp.src 'src/css/**/*.scss' # | | | scss .pipe scss() # | | | | gulp.src 'src/css/**/*.styl' # | | | | styl .pipe
杂谈

二维单域名要过期了

差不多是一年前，朋友跟我说了个项目，大意就是写一个微信上扫个二维码就能看菜单的 HTML5 应用。我花一天时间给做了，后台 WordPress Multi-site，前端 jQuery Mobile ，还申请了域名 2vdan.com。 后来这事儿就搁浅了，东西就摆在实验室服务器上，服务器还老坏，也没宣传。一年过去了，这个东西都被其他人做烂了。域名也过期了，不打算续费了。现在挂在二级域名 2vdan.gerhut.net 上。 放两张截图：
JavaScript

在浏览器中解析任意 URL 的组成部分

浏览器的location对象拥有很多方便的属性用于获取当前URL的组成部分： location.protocol：协议名 location.username：用户名 location.password：密码 location.hostname：主机名 location.port：端口号 location.host：主机名和端口号 location.pathname：路径 location.search：查询串 location.hash：书签名 在较新（未测试，估计是支持跨域XHR之后的）浏览器中，还有 location.origin：协议名、主机名和端口号 可以使用。 可以看出location的属性是非常方便的URL解析器。但是其局限是只能解析当前URL的组成部分。如果我们要解析任意URL的组成部分，使用location是无法完成的。location的构造器Location是无法在JavaScript中手动创建的。所以如果我们要解析任意URL还需要找别的办法。
印象笔记

网页上增加“一键剪贴到印象笔记”功能

印象笔记官网上没给这个方式，Google出的答案如下： Evernote国际版地址是http://www.evernote.com/clip.action?title={{title}}&url={{url}} 印象笔记中国版地址是http://app.yinxiang.com/clip.action?title={{title}}&url={{url}} 其中两个版本的子域名不一样：前者是www后者是app。 不像分享到微博/人人，不提供弹窗自动调整大小、位置的功能。 剪贴完之后提供返回到之前页面的按钮，可以继续浏览页面内容。所以不一定非要在新窗口打开链接。
杂谈

终于调通了Ghost博客

自从前一个自己写的基于nodejs的blog因为服务器被没收而消失以来，一直希望能有一个Ghost博客可以用。找了几个免费的云服务，国内的因为全都要求域名备案全部淘汰。nodejitsu一直装不上。N2O总是自己停掉而且不支持自定义域名，打算用之前自己的虚拟主机写一个完全镜像的PHP脚本，坑都开了，虽然最后没用N2O但是坑还是要填的，AWS之类的一年期限有点蛋疼。最后选用了TooBug巨巨推荐的Heroku。（突然感觉好多云服务的名字都有和风范。） Heroku有个限制，就是不给存静态文件。第一次提交的时候它把Ghost的webfont都过滤掉了。第二次提交提交上去了，估计过不了多久就会自动删掉。正好Ghost中文网提供了一个Ghost七牛云版。于是，上传的图片就全都转存到七牛云存储了。 下一步要做的事儿： 旧blog文章都转移过来，正好之前数据库里存的都是Markdown格式的。 如果后台的Webfont还是会被干掉的话，把Webfont转到七牛 主题改一改，把转贴到Facebook和Twitter改成从网和微博。 加个大Banner 端午节内做完前三步吧。
前端

CodeStar之《前端特工》糙解

第一章 提交中缺一个timestamp的值，补上即可。 document.getElementsByName('timestamp')[0].value = new Date().getTime(); 之后输入用户名邮箱即可进入。 第二章 左边的考察border-radius的椭圆写法 border-radius: 20px / 30px; 右边的考察三角形的CSS画法。四个边框的某一个边染色即可。 旋转中心其实是右上角。 border-color: transparent black; -webkit-transform: rotate(-60deg); -webkit-transform-origin: right top; 第三章 因为敌人AI开源，所以最简单的办法就是把敌人的AI复制一份到我方AI，多打几次就赢了。。 第四章 Array.prototype.slice是很好用的类数组拷贝函数。 Q1. Array.prototype.slice.call(arr); Q2.
算法

试用 Prolog 语言解算法题

现有一列随机的正整数，算他有2^n个吧，然后两两结合生成一个二叉树，节点是上一级两个数的和，合成的cost是上一级两个数的乘积。 而整个树的cost由总cost最高的那个branch决定，求用什么方法排列这一列数使生成的树cost最低。 例如，1，2，3，4这四个数 C=21+12=33 % 将一个树分成等长的左子树和右子树 bisect(List, Left, Right) :- append(Left, Right, List), length(Left, LeftLength), length(Right, RightLength), LeftLength = RightLength. % 计算节点Cost = 左子树数字和 * 右子树数字和 element_cost(List, Cost) :- bisect(
Io

Io 语言运算符重载 bug

Io语言的addAssignOperator在使用文件执行的时候会出现添加不进去的bug， 同时addOperator添加进来的运算符全都是单目运算符。（也许也是添加不进去的表现，待研究。） 在七天七语言的Io章Day3练习3中，为了绕过这两个bug，我的代码如下： Builder := Object clone Builder indent := 0 Builder forward := method( write(" " repeated(self indent * 2)) write("<", call message name) arguments := call message arguments if (arguments first name == "curlyBrackets", doMessage(arguments removeFirst)