强化你的git

2016-09-29 · 528 chars · 3 min read

git 是目前最流行的版本管理工具之一,日常开发中时时刻刻都在于 git 打交道,git 原本已经足够强大,但是在命令行模式下,并不美观,这次介绍几个我积累的配置,强化你的 git。

pull 模式使用 rebase

在你执行git pull 的时候,如果远程仓库已经有人提交了新的代码,那么 git 默认会进行 merge,结果就是:

告别 Postman、ARC、DHC,拥抱 curl

2016-09-17 · 992 chars · 5 min read

今年一直在公司折腾 nodejs,实实在在的体会了一把“随便玩玩”和“真正投产”的区别。在各种环境,各种防火墙,各种权限中对程序做验证,少不了 curl 这个神器,只要掌握几个简单的命令,完全可以抛弃 Postman、ARC、DHC、REST Console 等“好用”的 chrome 扩展。

在介绍前,我需要先做两点说明:

  1. 下面的例子中会使用 httpbin.org,httpbin 提供客户端测试 http 请求的服务,非常好用,具体可以查看他的网站。
  2. 大部分没有使用缩写形式的参数,例如我使用--request 而不是-X ,这是为了好记忆。

下面开始简单介绍几个命令:

npm script与glob

2016-07-24 · 586 chars · 3 min read

好久好久好久没有写文章了,因为最近的闲暇时间全部贡献给了nfm

现在是广告时间,nfm 是一个基于 nodejs 的文件管理系统,目的是解决前端 cdn 静态资源的管理,前端使用 react+redux 实现,后端为 nodejs,目前还没完成(努力中),欢迎大家 star,https://github.com/keenwon/nfm

在写 nfm 单元测试的时候,遇到个诡异的问题…

使用rel=noopener

2016-03-18 · 319 chars · 2 min read

最近看到一篇文章,又涨知识了,以前还真没想到 opener 能这么玩。简单介绍下:

解决什么问题

假设你当前在浏览一个页面,上面有个链接(可能是用户输入的):

<a target="_blank" href="">点击</a>

在新打开的标签页通过 window.oponer ,可以获得当前页面的 window 。这样的话,http://keenwon.com (被打开的页面)将获得当前页面的部分控制权,即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。

大家试试这个 demo,demo 只是跳到了百度首页,但是如果跳到了钓鱼网站呢?直接提示用户登录,而此时用户注意力集中在新开标签页里,很可能不会注意到原页面在后台的变化。

ES5 和 ES6 中的继承

2016-01-16 · 305 chars · 2 min read

Javascript 中的继承一直是个比较麻烦的问题,prototype、constructor、__proto__在构造函数,实例和原型之间有的复杂的关系,不仔细捋下很难记得牢固。ES6 中又新增了 class 和 extends,和 ES5 搅在一起,加上平时很少自己写继承,简直乱成一锅粥。不过还好,画个图一下就清晰了,下面不说话了,直接上图,上代码。

浏览器在opacity继承问题上的差异

2015-12-21 · 282 chars · 2 min read

这次说的不是什么大问题,但是出现问题后很难排查。最近一个项目用了大量的 CSS3 动画,使用 PostCSS 的 autoprefixer 自动加前缀,兼容 IE10 以上的所有浏览器,但是在 chrome 开发完毕,做兼容测试的时候,却发现 IE10、IE11 的 opacity 失效了。百思不得其解……

万幸的是并不是所有的 opacity 都失效了,对比生效和失效的代码,终于发现,IE10、11 和 chrome 等浏览器,在处理 opacity 的继承性问题上,存在差异。简单来说就是,父元素没有定位,子元素使用了定位属性 position(脱离文档流**),IE 下子元素不继承父元素的 opacity,而其他浏览器会继承**。

shadowsocks:通过ip判断来动态代理

2015-11-13 · 405 chars · 3 min read

在公司办公用两台笔记本,一台“标机”可以访问各种内网环境和内部邮箱,一台 mac“非标机”主要用来开发,但是还是有大量网站被禁止访问了,例如印象笔记,网盘,各种免费邮箱。这当然不能忍,严重影响“工作效率”,刚好部署了 shadowsocks来科学上网,就直接把所有被禁的站点加入 PAC 里,但是常常又会在家里用 mac,通过 shadowscoks 访问国内网站实在是慢,前几天的时候频繁的修改 PAC 文件,google 各种自动修改 PAC 的方法,始终没有找到好的方法,本身对“网络”也不太熟悉,所以这种低效的方式持续了好一段时间。直到……

其实 PAC 文件里就是 js 的语法,有一个myIpAddress() 方法可以取到当前的 ip 地址,那么通过 ip 就可以判断出网络环境,是在公司还是在家,从而动态修改代理设置。好了直接上代码:

基于 Webpack 使用 ES6 新特性

2015-11-07 · 610 chars · 4 min read

原文地址:http://www.2ality.com/2015/04/webpack-es6.html

webpack 是一个在客户端构建和加载模块的工具,本文介绍如何基于 webpack 写 ES6 代码。文中相关代码请查看 github 项目:webpack-es6-demo

1、webpack 的特点

webpack 最显而易见的优点是:

  • 支持 AMD,CommonJS 模块,通过 loader 还可以支持 ES6
  • 支持 npm 和 bower 等包管理工具
  • 可以加载非 js 代码:CSS,templates……
  • 模块按需加载
  • 内嵌在开发服务中