The new beginning

2012年12月21日过去了,大家都安然无恙,世界末日并没有来,所有人都重生了。我个人的工作也迎来了全新的开始。12月24号,我正式开始到支付宝上班了。

毕业两年半以来,一直在阿里B2B工作,在这里收获了很多,无论是在技术上还是其他方面都成长了不少。但是今年越来越感觉自己成长变慢了。是的,不论是谁,都不可能一直快速的成长,总会慢慢变缓。但是我还是觉得我应该去换个环境挑战一下,去尝试新的东西,或许可以唤醒差不多沉睡的激情。恰好这个时候有个机会去支付宝,那就去试试吧。

现在已经在新工作岗位一周了,很多东西对我来说都是新的。虽然还是干前端,前端的知识没有怎么变,但是各种工作环境、开发环境都是大不一样的。虽然都属于阿里集团,还是有很多东西不一样。很久没有过这种感觉了,很久没有过这种什么都要问,什么都不清楚的感觉了。我不知道是害怕,还是兴奋,或许这两种感觉都有吧。

总觉得不能让自己太舒适,在太舒适的环境下,很容易就失去战斗力,我不知道如果我在一家公司呆上十年,还能不能去换工作,能不能去适应其他公司。我觉得自己还是年轻的,所以有机会,就要换换环境,多看看不同的世界,增加自己的人生阅历。人活在这个世界上,不就去体验各种不同的事情吗?总干一种事情有啥意思,很快就是失去激情。

在B2B的这么多时间,从身边的同事身上学到了不少,在这里也感谢他们,在这里就不一一列举了,在这里列举姓名也不太好。这中间有前端、有后端开发、有设计师,有产品经理。最让我感动的,是 21 号这天,同事给我准备的礼物。同事很用心的准备了一个留言册,让熟知我的人都给我留言,还贴上我的照片。看到大家送我的话,倍感亲切,这些都是这两年多来,和我在一起共事的兄弟姐们们。我想当我不开心的时候,就拿出来翻翻,有你们的鼓励,我会走的更好。另外这个同事还准备了一个很特别的大号淘公仔,这个淘公仔是一个牛B的设计师根据我的样貌特意绘出来的。这两个礼物实在是太棒了,我已经无法用语言来表达我的感激之情。总之,感谢这位为我准备礼物的同事,为我绘淘公仔的设计师,以及在留言册上给我写祝福的同事们,你们这些朋友是我这两年来最大的收获,我会永远记住你们。

临走B2B的时候,还发生了一些不开心的事情,这里就说下吧,以后就不再提了。在运营产品的思路上,我和运营和产品人员发生了一些争执,我坚决不同意采用一些不那么阳光的手段去运营,我坚定相信,不使用这些手段也照样能把产品做起来。但是他们并不同意我,他们就开始举例微信啊、早期的淘宝啊,等等。或许是我有点理想主义吧,我一直的看法都是,并不能因为别人这样做,我们就要这样做,哪怕明知这个事情不那么阳光,违反价值观、违反道德。也并不是别人那样做成功了,我们不那样做就成功不了。不过争执归争执,我还是衷心祝福这个产品能做起来,能发展的好,这个是我最近半年来一直在为之付出的产品,多少含有我的心血,希望它好。

这应该是 2012 年的最后一篇博客了,2013 年的第一篇博客,应该是对 2012 年的总结吧,这一年我变化了很多,我收获了很多,也失去了很多,等过段时间在慢慢写吧。

未来怎么样?换个环境后,我会怎么样?我都不清楚,我只知道我会努力去把事情做好,去继续提高自己的能力。这一切不是才刚刚开始吗?

通过网络共享 hosts 配置的工具

Web dev 们经常需要绑定 hosts 来切换到开发环境吧。如果你是一名前端开发,还需要去调试不同浏览器下的表现吧,经常还要开几个虚拟机。一个项目组的成员也经常需要共享一套 hosts 。那么如何方便在多台电脑之间共享和管理 hosts 呢?

自从我发现 @oldj 写的一个 hosts 管理工具 SwitchHosts 支持从 URL 获取 hosts 后,我就想为这个功能写个小工具。这几天空余时间比较多,现在这个工具的第一版已经上线了: hosts.allenm.me

屏幕快照 2012-12-20 下午3.55.39

在这里输入的每组 hosts 都会给一个供 SwitchHosts 这个本地软件访问的 URL ,在这个软件中填入url即可:

屏幕快照 2012-12-20 下午3.57.28

如果 web 端的 hosts 有更新,在 SwitchHosts 这个软件上点下更新按钮即可。

是不是该抛弃不停的复制粘贴 hosts 的方式了?

PS ,SwitchHosts 支持 Windows, Mac, Linux , 需要跨平台的同学也不必担心

PS2 ,不要用低版本的 IE 访问 http://hosts.allenm.me , 从没测试过 IE 。

欢迎反馈意见和建议,说说你工作中遇到的 hosts 的相关需求,如果现在的工具满足不了你,说不定你说出来接下来就满足你了。

使用 SourceMap 来进行前端代码调试

今天在方凳会上做了一次 SourceMap 的分享。现在在博客上分享出来。

简介

什么是 SourceMap 呢?

在这个年代,对于前端开发来说,很少有用户浏览器执行的代码和我们写的 code 完全相同的情况。因为我们的代码一般要经过压缩、合并。另外现在还有 sass, less, stylus, coffscript, typescript 等等预编译语言。那么在这些情况下我们如何调试呢?SourceMap 就是为了解决这个问题而生的,虽然它还不够成熟,支持它的工具还不够多,但是我们能从它身上看到未来。

欲了解详情,请观看下面的 slide 吧。(有疑问或者建议可以在下面评论交流,或者微博 @allenm 进行交流)

sourcemap.001

sourcemap.003

sourcemap.004

sourcemap.005

Continue reading

BASE64 VLQ 编码规则

首先我们先来了解下 VLQ 是什么,VLQ 是 Variable-length quantity 的缩写,是一种通用的,使用任意位数的二进制来表示一个任意大的数字的一种编码方式。这个编码方式是在 MIDI 文件格式中定义的,用来节省空间。在其他地方也有很多类似这样的编码格式,比如在 Google’s protocol buffers 中,还有我们马上要讨论到的 BASE64 VLQ 中。想了解的更多,请参考wikipedia

我们先来看看 MIDI 中的 VLQ 编码是如何编码 137 这个数字的吧:(摘抄自 wikipedia)

  • 先把 137 转换成二进制:10001001
  • 7 bit 一组,把二进制分开,不足的补 0 ,变成 0000001 0001001
  • 把最低的7位拿出来,在最高位补0表示最后一位,变成 0000 1001,这个作为最低位,放在最后边。
  • 在其他组的最高位补 1 ,表示没有结束,后面跟着还有数据。在这里就是 1000 0001
  • 拼在一起,就变成了 1000 0001 0000 1001 .

这就是 VLQ 的变化过程。

那么什么是 Base64 VLQ 呢?和上面的变换过程有什么区别呢?

我们可以先来参考我博客的另外一篇文章,先来回顾下 Base64 编码:BASE64 编码规则

我们可以看到 Base64 是一种可以把二进制数据编码成用 ASCII 表示的一种编码规则,但是受限于 Base64 采用的字符集,一个 Base64 字符只能表示 6bit 的数据。所以上面的 VLQ 中 7 bit 一组的分组方式,在这里就要变成 5 bit 一组的分组了。

另外,Base64 VLQ 需要能够表示负数,于是规定了需要先把数字变成无符号数,用最后一位来作为符号标志位。我们直接来做一个变换吧,这样理解的最快。在例子中可以看到和上面的 VLQ 编码还是有一定差别的。

不妨还拿 137 来做示例吧。

  • 先把 137 转换成二进制:10001001
  • 由于 137 是正数,所以在最低位补0 变成 100010010
  • 按照 5bit 一组的方式分组,变成 01000 10010
  • 按照从低位到高位的顺序,以 5bit 一组为单位,依次拿出数据做转换。
  • 先拿出第一组 10010 , 因为后面还有数据,所以需要在高位补 1,变成 110010 ,编码成 Base64: y
  • 再拿出第二组,也是我们这里的最后一组,01000 , 由于是最后一组,所以在高位补 0 变成 001000,编码成 Base64: I
  • 按照从低位到高位的顺序把这些 ASCII 字符拼接起来,变成 yI

可以看到在 VLQ 中,编码顺序是从高位到低位,在 Base64 VLQ 中,编码顺序是从低位到高位。

那么如何解码呢?相信了解了编码过程后,解码过程就不必再讲解了。平时也基本不会去手工去算这些东西。这里推荐一个在线编码解码的网站:http://murzwin.com/base64vlq.html , 同时如果你想在代码中使用,Mozilla 的一个开源库里有相关实现:https://github.com/mozilla/source-map/blob/master/lib/source-map/base64-vlq.js,这个是 javascript 的实现,其他语言的实现,如果你需要,请自己找找,或者根据编码规则自己写一个。

说了这么多,好像还没讲 Base64 VLQ 运用在什么地方,这次我不打算说了,准备下一篇博客再来解释这个问题。