tech

用 hexo 在 github page 搭建博客

这两天把博客新迁在 github page 上,这两天抽空注册了新域名,并且在 github pages 上搭建了新的博客,还用了逼格极高的 hexo 。

在 github pages 上搭建静态博客不只 hexo ,排名前 5 的系统有:

官方推荐的是 jekyll

我用 hexo 主要想借机多熟悉下 NodeJS ,另外也先看了简介使用,感觉 hexo 上手也相对容易, markdown 语言来写内容。
如果你想对这几种静态博客进行系统比较的话,可自行测试,或 参考这篇贴子

hexo 的配置及使用官方有比较详细的 文档 ,有一位热心同学写了较为详细的博文 《 hexo 你的博客 》 。

有一些问题他没有提及,我补充一下:

  • 这里 有详细的官方推荐皮肤。目前我使用的是 modernist ,如果你对皮肤要求比较高的话,恐怕 theme 上没有太满意的,只能自己设计。:(
  • 文档 。看上去挺全的,但很多地方『点到即止』,所以才看到有很多使用说明都是自己搭建过的同学写出来的经验之谈,不过这没关系,结合 google baidu 来使用就可以了。
  • 迁移 。 关键的功能从 rss 导入功能 "hexo migrate rss http://rank.im/atom.xml" 居然不能用。我哪天 fix 了放出来给大家。

android/ios 开发切图神器 cutandslice

在多端开发时切图是个很痛苦的事,如果有一个很好的工具必将解决掉很多很繁琐的工作。
最近试用了一款软件「 cutandslice 」,觉得不错,推荐给大家。
官网: http://www.cutandslice.me/
作者从简介上来看是一名 ue 设计师。

用了之后你会发现其实开发的原理不难:
用了很多 PS 里自己的「宏」来解决问题,程序只处理了规则( rule )。

这个思路很赞。

'cutandslice'

取得当前脚本元素的路径的一个特例

在正常情况下,无 defer 或 async 属性要准确取得当前脚本执行路径,在不同浏览器里有两种办法:

  1. MDC 里可查看到用 document.currentScript 拿到当前运用的 script 路径。除此属性外还可通过它的子属性 「 document.currentScript.async 」 来查看「异步」还是「同步」加载。
  2. 用 document.scripts 得到最后一个 script.src ,但需注意 readyState 是否为 「 interactive 」状态。

SWFUpload 2.5 bug 修改 (2)

在 github 上我放了一个 修改版 ,有兴趣的同学可以测试下性能。
需要注意的是,要在支持 PHP 的 Webserver 下运行。

再遇问题

经过上一轮的 SWFUpload 修改两周后有人反馈:

  • 上传速度非常慢,上传 8 张图片,有时甚至 8 分钟都没上传完;
  • 其次是上传图片数量到某个阈值就无法上传;

Debug 了一个下午,发现:

  • 问题 1 上传速度慢的问题,只存在 IE 里。
    • 我也觉得很奇怪,为什么 Flash 的性能还和浏览器有差别
  • 问题 2 不是 Flash 的问题,与脚本使用有关
    • 经查问题发现 Flash 用 css 隐藏之后,在 IE 下压缩和上传都无法 work (这比较好查);

SWFUpload 2.5 bug 修改 (1)

关于 SWFUpload

SWFUpload 是一个客户端文件上传工具,最初由 Vinterwebb.se 开发,它通过整合 Flash 与 JavaScript 技术为 WEB 开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。

主要特点:

  • 可以同时上传多个文件;
  • 类似 AJAX 的无刷新上传;
  • 可以显示上传进度;
  • 良好的浏览器兼容性;
  • 兼容其他 JavaScript 库 ( 例如: jQuery, Prototype 等 ) ;
  • 支持 Flash 8 和 Flash 9 ;

SWFUpload 不同于其他基于 Flash 构建的上传工具,它有着优雅的代码设计,开发者可以利用 XHTML 、 CSS 和 JavaScript 来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的 JavaScript 事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。

这么多说的就是一个意思, SWFUpload 使用灵活方便,不少人在用。
但是,它在我们项目实际应用中发现问题。

webkit 里会出现突然闪一下的问题

问题

有用户反馈在 chrome 下出现屏幕会闪,但不是每次都能复现。

解决办法

.no-flick{-webkit-backface-visibility: hidden; /*但不能用于 sprite 雪碧图*/}
/* 或 */
.no-flick{-webkit-transform:translate3d(0,0,0);}

用户行为系统 如何记录行为数据

最近准备把我主持并负责的前端用户行为系统开源了,这个系统我们内部命名为 marmot 。中文为「土拨鼠」,有挖掘之意。 除我之外,还有两位开发人员分别是: seven 和 cyhello 。

本篇文章简短的说明一下 marmot 的 log 重点问题:

  1. 解决不同分辩率的策略.
  2. 解决粒度过细的问题.
  3. 还原路径问题.
  4. 何时发回数据及数据量的问题

模拟里 firebug 的 DOM inspect 功能

常规思路

在 firefox 里如何实现 firebug 的 DOM inspect 选择功能?

  • 首先,我们会 document 里添加 mouseover 事件时在 HTMLElement 上飘一个 absolute 的容器,设置 border 。
  • 接着, mousedown ,这个 absolute 的元素隐藏;
  • 再着着, click 结束后从事件里的 event 得到 target ,从而再得到 inspect 。

可这样是不是真的能做到呢?

IE6 SP1+SSL+AJAX(XMLHttpRequest)=trouble

问题描述

在 IE 6 SP1 访问 https 站点, AJAX 会随机出现一个 winet 的状态码: 12152 。
网上 有不少人遇到了这困惑的状态码。

说明

  • Windows 下的 IE 里 new ActiveXObject(progId) 生成的 XMLHttpRequest 是 winet 的一部分。
  • IE 7 以下对 SSL ( 即 HTTPS) 的支持不够好。

HTML Form 里 radio list 的用户体验细节

HTML Form 里 radio list 的用户体验细节相当赞:

  • 可支持方向键
  • 当 radio 最后一个选中时,按小键盘后会自动跳回第一个
  • checked 可自动触发 onclick
  • 支持各种浏览器, cross-browser

用这个特性,可以做一个无障碍的 TabView :)

从 trim 原型函数看 JS 正则表达式的性能

问题

一般情况下用正则写法为:

<script type="text/javascript">//<![CDATA[
  String.prototype.trim = function () {
    return this.replace(/^[\s\t ]+|[\s\t ]+$/g, '');
  }
  s = ' rank\'s weblog, www.rank.im ';
  alert(s.trim().length);
//]]></script>

如果遇到大数据的变长字符串的话就会发现这个是很耗资源的。
效率并不高,有的时候甚至无法忍受。

Firefox 2 正则表达式全半角问题

问题

先问一个问题, 在 firefox 2 里,正则表达式字符"\d"全等于"[0-9]"吗?

有可能你会答「是,他们相等」,也有可能你去查了查手册, 看到以下的解释:

\d Matches a nondigit character. Equivalent to [^0-9]. 匹配一个数字字符。等价于 [0-9] 。

那我们测试一下以下代码:

 //http://rank.im
 alert(/^\d{2}$/.test("12"));
 alert('请注意,12是全角');

IE 在 DOM 操作有表单控件时的 bug

bug 描述

  • 影响的范围: IE 的所有版本
  • 在表单的 radio/checkbox 控件中,一旦他们的 DOM 结构被更改过就会出现这个 bug 。
  • 操作了表单 radio/checkbox 的 DOM 结构时(或者直接影响了他们的结构时)选中的 checkbox/radio 将会自动恢复到默认状态,
  • 有如点了 reset 按钮一样。

Javascript 标准 DOM Range 操作 (2)

复杂 DOM Range

建立复杂的 DOM range 需要使用 setStart() 和 setEnd() 两个方法。 这两个方法有两个参数:

  • 一个参数是一个节点 (node) 引用;
  • 另一个参数是偏移量 (offset) 。

这两个方法的功能:

  • setStart(node, offset) 节点的引用是 startContainer ,偏移则是 startOffset ;
  • setEnd(node, offset) 节点引用为 endContainer ,偏移就是 endOffset 。

Javascript 标准 DOM Range 操作 (1)

createRange 方法

2 级 DOM 定义了一个 createRange() 方法,如果是按照 DOM 此标准的浏览器( IE 并不是支持此标准的,但是 IE 里的属性或方法却远比标准中的功能多得多),它属于 document 对象,所以创建一个 range 对象:

var oRange = document.createRange();

如果你要检测你的浏览器是否支持此标准 Range 对象,可以用 hasFeature() 方法来检测:

var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
	var oRange = document.createRange();
	//range code here
}