JerryQu的小站

自从买了Alfred2的Powerpack，马上就成为Alfred的重度用户，在网上搜个东西，再也不用先打开浏览器了，爽快度大幅提升。Alfred的Features tab下，有个Web Search功能，默认提供了很多搜索引擎。要添加新的搜索引擎也超简单，配置关键字和搜索url（搜索词用{query}表示）就好了。

有时候，我们还想要实时显示搜索建议信息，这就需要用到workflow了。根据搜索词抓取suggestion数据，格式化后输出，就可以在alfred里显示列表了。具体需要格式化成什么的数据，可以看下其它workflow怎么写的。几大流行的编程语言，都有别人写好的workflow辅助类，拷过来直接用就行了。

晚上写了一个可以显示sugesstion的workflow，支持baidu/so/dianping的搜索建议。

这个workflow看上去是这样的，要增加其它搜索也很容易。

有需要的同学可以点这个地址下载。

本文链接：http://www.imququ.com/post/web-search-workflow-for-alfred2.html

--EOF--

QWrap群有个同学问了个问题：为什么IE7中通过getAttribute获取input的placeholder，结果是null，正常情况下应该是有值的？实际上这是某些版本IE的bug，在IE10中，F12后把文档模式调成IE7标准，这个bug能复现。这里刚好有个JK之前写的placeholder无依赖版，有IE10的同学可以点开看下bug长什么样。

使用getAttributeNode得到属性节点，再通过nodeValue得到该属性节点的值，就能解决类似的bug。这个方法还可以用来解决我博客之前提到的form表单中有<input name="method">元素在IE低版本中通过getAttribute获取不到form.name的bug：

<form name="form1">
    <input name="name" />
</form>
<script>
var form = document.getElementsByTagName('form')[0];
 
alert(form.getAttribute('name')); /*IE6、7中会得到错误的值*/
alert(form.getAttributeNode('name').nodeValue);
</script>

getAttributeNode的效率比getAttribute要低一些。如果要获取元素的id，node.id是最快的方法，node.getAttribute('id')其次，getAttributeNode('id').nodeValue最慢。

实际上，浏览器中与节点Attribute有关的坑有很多，好在主流JS框架都写了大量代码使得各浏览器下都能得到合理的结果。随着低版本IE的逐渐淘汰，这些坑都会成为历史的。

本文链接：http://www.imququ.com/post/getattribute-and-getattributenode.html

--EOF--

又一次“天灾”降临，又一次无数工程师彻夜加班，又一次互联网产品集体变灰。有些产品换上灰色logo，有些产品增加了灰色banner，有些产品整个页面变灰。我想，不同的表现形式，表达的含义应该都是哀悼和祈福吧。这里，只想从技术实现上简单说说页面变灰这个话题。

大家都知道，利用IE古老的滤镜，以及webkit支持的css3滤镜，可以很方便的让IE和webkit内核浏览器下的元素变灰。如果滤镜作用于html元素，整个页面就变灰了。

html{
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter:grayscale(100%);
}

从体验上来看，用户很难看清全灰页面上的重点，很容易错过重要信息。从技术上，这样做也带来两个问题：1、消耗更多CPU资源，让网站变卡（手机上更为明显）；2、-webkit-filter会导致retina设备上的页面变模糊。第1个问题很好理解不用多说。第2个问题，应该出是-webkit-filter的实现上：首先拷贝元素渲染后的图像，再针对图像进行转换。我猜测在拷贝时获取的是小尺寸图片，导致在retina设备（如rmbp、iPad 3+、iPhone 4+）上，对元素使用任何-webkit-filter都会让元素的渲染变模糊（见下图）。这个问题已经有人给webkit报bug了，官方已确认。

继续阅读 »

之前说过，给元素的id或者class取一个看上去就是广告的名字，很容易被adblock干掉（当然如果你的网站足够有名，怎么取名都没用，不出三天，立马就有针对你的专属规则）。所以在写html属性值的时候，我们除了要遵守html编码规范，还要看下adblock常用的ChinaList+EasyList过滤列表中的默认规则，不要被匹配到。还要避免踩到陈旧浏览器带来的坑。

继续阅读 »

这两天一直在研究Alfred2，发现了一些好用的workflow，记录下来分享给同学们，其中大部分都是来自于官方论坛的Share Your Workflows板块。后续有新的发现我也会随时补充。

系统增强：

Create New File in Finder，新建文件工具。刚开始使用Mac那会儿总觉得右键没有“新建XX文件”什么的特别不爽，这个workflow正好能弥补这个遗憾。通过热键或者"new xxx"命令，可以在当前激活的Finder目录创建一个新文件。同时还支持模版，例如在插件目录放一个"html.html"的html文件，那么"new test.html"新建出来的文件内容就和"html.html"一样了。点击下载。

Flush DNS Cache，刷新DNS工具。Mac系统不同版本刷新DNS的方式不一样，这个workflow处理了各种情况，简单好用。点击下载。

继续阅读 »

最近用上了Alfred2这个神器，在昨天花了15￡购买了PowerPack之后，就开始折腾它的workflow功能。于是就有了这么个东东：QWrap文档快速搜索。

先来看张截图：

通过"qw+关键字"命令，可以快速搜索QWrap文档里对应的词条。使用回车键或者cmd+对应数字，可以在默认浏览器打开对应条目在线文档。

继续阅读 »

Google Chrome浏览器应该早就是大家的默认了，就连我这个Firefox的忠实用户（至少7年），前不久也换到Chrome了。Chrome本身非常安全，但是很早就有网站报道Chrome扩展很容易在用户浏览的任意网站注入js，收集用户行为；替换链接进行盈利；甚至盗取用户账户信息。

今天从Chrome Web Store官方下载安装了几个扩展后，亲身体验到这一恶意行为。经过是这样的：

我装好Google出品的Page Speed之后，分析了一下我的个人博客。在它给出的建议里：“压缩 JavaScript”这一项居然有以下提示：

压缩以下 JavaScript 资源可腾出的空间大小为 274B（即缩减 100%）。

压缩 http://xxx.xxx.com/js/xxx/extension.js 可腾出的空间大小为 274B（即缩减 100%）。

显然，这个js不是我主动加入的。排除了服务器代码被篡改、传输过程中被篡改（我这种小流量个人博客，再黑心的运营商也不屑于篡改吧）两种可能之后，很快将目标锁定在新安装的几个Chrome扩展上。

继续阅读 »

Google宣布将于7月1日关闭Google Reader！几天前看到这个消息的时候，心里还想，哦，Google又关掉了一个，没觉得是个很大的事情。就在刚才，不小心看到Chrome启动页那个大大的Google Reader图标，又不小心点了进来，首先看到一个关闭服务的浮层，然后满屏都是关于GR的博客，心里有种说不出来的感觉。

Since October 11, 2006 you have read a total of 78,070 items.

06年开始使用的GR，应该是大三上学期。大二暑假第一次走出家乡，来北京一家创业公司实习了一个月，参与到完整web项目开发中：参加需求讨论；进行源代码管理（一开始用的VSS，后面换成SVN）；用Jira跟踪bug；Confluence管理文档；ftp上线代码（这个比较囧）等等。虽然当时那家公司早已转型，但现在回想起来，当时完整而规范的项目开发流程，对我后面的编码人生还是有很大帮助。

继续阅读 »

订阅用户请跳转后查看~

继续阅读 »

动画现在基本是web站点必备项，各大JS框架都封装了相应的代码。QWrap也内置了一个实现，支持常见的动画效果和算子及队列播放，这里有示例。JS动画的实现有多种方式，各自有哪些区别，QWrap使用的哪一种？本文闲聊这个话题。

一、使用浏览器的定时器（setInterval/setTimeout）。这种动画实现方式很早就被大家广泛使用，原理简单，兼容性好。最核心的原理就是利用定时器，在一定时间内（duration），以一定的间隔（frameTime）执行动画函数（callback）。在动画函数里可以改变元素大小、位置（css属性值）；可以改变元素滚动条位置（scrollTop/scrollLeft）；甚至用来改变文本内容（倒计时）。

动画间隔决定了动画的每秒帧数（FPS），一般的，FPS越高，动画就表现得越流畅，FPS偏低，动画就会不流畅、卡顿。JQuery中，动画间隔默认为13ms，也就是说理想状态下，动画的每秒帧数是70多。实际上，由于JS定时器精度问题，间隔不可能太小；在计算机资源占用比较大时，这个间隔也没办法得到保证；更为严重的是，新一点的浏览器在页面不可见时（例如切换到其他tab，浏览器被最小化），会自动提高定时器执行间隔，firefox5开始，setInterval的间隔在浏览器最小化之后至少被提高到1000ms。

继续阅读 »