任平生

Zen Coding 让 Notepad++ 代码书写健步如飞

任平生 — Fri, 16 Jul 2010 22:18:46 +0800

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。

但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。

先看一段演示视频吧（建议反复观摩，其中演示了 Zen Coding 的各种典型用法）

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. （网速慢的，可以观看优酷版或者下载该视频。）

为Notepad++安装 Zen Coding 插件

下载 Zen.Coding-Notepad++.v0.6.1.zip 解压

将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。

重启Notepad++，即可开始使用 Zen Coding。

Zen Coding 用法

首先，我们先学习一下 Zen Coding 的缩写规则（其实就是CSS选择器）

E
元素名 (div, p);
E#id
带id的元素 (div#content, p#intro, span#error);
E.class
带class的元素 (div.header, p.error.critial). id 和 class 可以连写，如： div#content.column.width;
E>N
子元素 (div>p, div#footer>p>span);
E+N
兄弟元素 (h1+p, div#header+div#content+div#footer);
E*N
多项元素 (ul#nav>li*5>a);
E$*N
带序号的元素 (ul#nav>li.item-$*5);

接下来，我们来熟悉 Zen Coding for Notepad++ 的快捷键，也是 Zen Coding 的精髓

【Ctrl+E】展开缩写（Expand Abbreviation）

比如写下 div#page>div.logo+ul>li*3>a ，按一下 Ctrl+E，立马就可以转化成：

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
	</ul>
</div>

【Ctrl+Shift+A】嵌套代码（Wrap with Abbreviation）

比如，我们想让写好的 <p>hello world</p> ，想在外层再套一个div，只需按下【Ctrl+Shift+A】，在弹出的对话框中输入： div.wrap，回车。此标签就能自动被嵌套。

甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入 ul>li* ，回车。这三行内容就能自动被ul li 嵌套起来。（不仅限于 li 列表哦）

【Ctrl+Shift+D】选中代码块（Balance Tag Inward/Outward）

选中当前光标所在的代码块，长按可依次选中父块

【Ctrl+Alt+[ , Ctrl+Alt+]】转到上一个/下一个编辑点（Go to Next/Previous Edit Point）

按下可以依次跳到可输入内容的编辑点，省去了不停按方向键或鼠标来定位编辑点的麻烦。

【Ctrl+Alt+M 】合并行（Merge Lines）

将选中的多行代码合并为一行。压缩css、js代码为一行时，这个很方便。Ctrl+A，然后Ctrl+Alt+M，两下即可搞定，免去了动用压缩工具的麻烦。（当然这个只是简单地将代码合并为一行，并不能做更深入的代码压缩）

【Alt+/ 】添加、移除注释（Toggle Comment）

注释掉光标所在的代码块（Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码）

【Ctrl+’ 】空标签转化（Split/Join Tag）

比如将 <div class="test"></div> 转化为 <div class="test"/>，反向亦可。

【Ctrl+Shift+’ 】移除标签（Remove Tag）

比如将 <div class="test">hello world</div> 移除div标签，留下hello world。
好了，目前 Notepad++ 的 Zen Coding 只有这几个快捷键，下面介绍一些常用到的缩写

不知道大家新建一个html 页面时，是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding，只需输入几个字母就能立马生成相应文档声明的 html 结构框架

html:4t (HTML 4.01 Transitional)
html:4s (HTML 4.01)
html:xt (XHTML 1.0)
html:xs (XHTML 1.0 Strict)
html:xxs (XHTML 1.1)
html:5 (HTML5)

head 中常用到的一些缩写

meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src

body 中会常用到的缩写

诸如 div, p, a, ul, ol, input:t, input:r 等等

其中，类似 ul+ 的形式可展开为（+号可自动生产默认的子元素）

<ul>
    <li></li>
</ul>

类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+ 等

IE 条件注释：

cc:ie6, cc:ie, cc:noie

下边是一些典型用法示例：

div#name.one.two =>
		<div id="name" class="one two"></div>

[title="Hello world" rel]  =>
		<a href="" title="hello world" rel=""></a>

td[colspan=2] =>
		<td colspan="2"></td>

li.item$*3  =>
		<li class="item1"></li><li class="item2"></li><li class="item3"></li>

li.item$$$ =>
	<li class="item001"></li>


li.item-$-content*3 =>
	<li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li>

#content>.section =>
	<div id="content"><div class="section"></div></div>

如果你写了这么一串出来，那么一个页面的基本结构就出来了：

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

此外【|e】可以输出转义字符

&lt;div id="wrap"&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

div#wrap>div.content>p|e|e 可转化为：

&amp;lt;div id=&quot;wrap&quot;&amp;gt;
    &amp;lt;div class=&quot;content&quot;&amp;gt;
        &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;

以上介绍的仅仅是有关HTML的缩写，CSS的缩写就更多了，建议查看 Zen Coding 小抄，学习CSS 的 Zen Coding 方式

自己编写缩写规则

plugins\NppScripting\includes\Zen Coding.js

在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。

即使你不编写自己的缩写规则，也强烈建议你阅读此文件，熟悉 Zen Coding 自带的一些缩写规则，让代码书写更加事半功倍~

最后，Zen Coding 不仅有Notepad++版，Aptana、UltraEdit、Dreamweaver也有相应版本，速速前往官方下载页查找是否有你常用的编辑器的Zen Coding插件吧～

文中部分示例及图片来自 Zen Coding Wiki

如何下载网页上的视频

任平生 — Wed, 07 Apr 2010 18:00:43 +0800

这是一篇基础教程贴，会的同学可以飘过~

如何下载网页上的视频，这个问题由来已久，而且方法众多，这里介绍一个我用过的，认为最方便的方法：

下载安装 Firefox 浏览器 http://www.mozilla.com/firefox/
安装 Video DownloadHelper 扩展 https://addons.mozilla.org/en-US/firefox/addon/3006
当你访问有视频的网页时， Video DownloadHelper 侦测到视频后就会开始工作，点击转动的 Video DownloadHelper 图标[]后的小下拉箭头即可选择下载视频。

本方法适用于各类网站，Youtube、Vimeo、优酷、土豆等的视频自然不在话下，HTML5、Silverlight 形式的视频也能一网打尽。而且不仅视频，音频也能轻松下载。所以，今后只要你打开的网页上有流媒体文件播放， Video DownloadHelper 图标转动起来了，点击就能下载你看到／听到的视频／音频啦~

以下是几个示例：

在 Youtube 上，Video DownloadHelper 可以列出各种清晰度的视频下载， HQ35 就是 720P 的，很高清~

优酷

豆瓣电台上的歌曲也能下哦

Video DownloadHelper 还可以转换flv视频为其他格式，不过鉴于 Firefox 本身就是吃内存的大户，视频转换这种恐怖活动还是留给其它软件做吧

Chrome 上尚未发现如此先进的视频下载插件，甚为遗憾。

还在迷茫什么是 Firefox 、怎么安装扩展的同学，请移步瞻仰可能吧的扫盲贴为什么与如何开始使用Firefox浏览器？

sp2wp:导出Live Spaces数据到WordPress

任平生 — Thu, 25 Mar 2010 10:00:18 +0800

sp2wp 提供 Live Spaces 的日志、评论、留言及个人资料的导出服务，它可以帮助你轻松完成从 Live Spaces 到 WordPress 的数据迁移工作。

导出 Live Spaces 数据

访问 sp2wp
填入你要导出数据的 Live Spaces 地址及登录它的 Windows Live ID
确认提交

当数据抓取处理完毕就会打包发送到你的邮箱里（你所填写的 Windows Live ID）。

* 从你提交导出数据的请求到收到邮件一般需要较长的时间。如果一周后你依然没收到邮件，那么可以邮件我： myrpsh[at]gmail.com

导入 WordPress

解压缩你收到的邮件的附件，其中有个 xxxx.xml 文件，这个就是你的 Live Spaces 的数据导出文件 —— 它被优化的十分适宜于导入 WordPress 。具体导入操作如下：

登陆 WordPress 后台
在左侧的导航菜单中，点击“工具” – “导入”
导入源选择 WordPress
选择 xxxx.xml 文件，上传导入

sp2wp 目前的问题：

不能导出日志的分类
~~无法获取2009/02 后添加的评论的评论者名字~~已解决

访问 sp2wp: http://liveto.me/sp2wp

23岁了

任平生 — Sat, 21 Nov 2009 10:48:54 +0800

23岁了！

获取 Live SkyDrive 外链地址的 Bookmarklet 更新+Greasemonkey 脚本

任平生 — Mon, 14 Sep 2009 19:38:32 +0800

Live SkyDrive 前几日做了次升级，导致之前介绍的用于获取 SkyDrive 唯一外链地址的 Bookmarklet 失效了。（感谢 cooku 提醒）

于是，更新了下 Bookmarklet 的代码，需要的同学，请删除你书签里的旧 Bookmarklet ，到这里添加新的用于获取 Live SkyDrive 文件唯一外链地址的 Bookmarklet 。

如果你第一次接触这个脚本，请阅读之前的介绍，这里不再叙述其原理及使用方法

使用 IE6 或以IE6为内核的浏览器（比如傲游，世界之窗）的同学请注意：新的 Bookmarklet 在 IE6 上无法执行，请升级你的 IE 浏览器到 IE8（下载），或者换用 Firefox、Chrome 等其他浏览器。

再提供一个 Greasemonkey 脚本，添加后，可以自动在右侧的文件预览导航下边显示“外链信息”（替换原来的广告部分），不用每次去书签栏点书签了

Friefox 用户请点这里安装这个脚本。

Chrome 也可以使用这个脚本，不过首次打开页面不能自动添加“外链信息”，需要再点一下右侧文件导航中的此文件图标才行（囧，这下跟点 Bookmarklet 没区别了）。我没找到这个问题的解决办法，请路过的各位高手不吝赐教。

Greasemonkey 脚本下载： get skydrive direct link

过滤 Windows Live 在线服务广告的 Greasemokey 脚本

任平生 — Sat, 05 Sep 2009 13:01:39 +0800

Chrome 上迟迟没有好用的广告过滤插件，Windows Live 在线服务上的广告又实在是难看的离谱（能把广告画成那种恶心的样子也真不容易）。于是就想，有没有可以移除 Windows Live 在线服务广告的 Greasemonkey 脚本用，搜了下找到一个 Windows Live no Ads，使用后发现并不能完全移除 Windows Live 在线服务上的广告，于是我自己动手修改了下，经测试已经完全可以移除 Windows Live Home, Profile, People,Hotmail,Calendar,Spaces 等页面的广告。

过滤的广告包括：

过滤 Hotmail 收件箱右侧的广告，并使收件箱部分向右扩展充满右侧屏幕；
过滤发送邮件成功后转向页面中的广告；
过滤 Live Calendar “天” 视图右侧的广告；
过滤所有 Windows Live 在线服务的“提示型”、“方块型”、“长条形”广告；
过滤所有 Windows Live 服务中来自 MSN 中文网(cn.msn.com) 的布满挑逗的新闻标题；
过滤 MyPhone 页面中的广告。

脚本下载：Windows Live no Ads (请右击链接选择另存为)

使用 Chrome 的同学，添加【–enable-user-scripts 】参数启用脚本后，将这个文件放在 User Scripts 即可。当然，Firefox 也可以使用这个脚本。

Live Writer 独立程序安装文件及绿色便携版下载

任平生 — Tue, 11 Aug 2009 16:55:43 +0800

有同学不喜欢在线安装 live writer，这里提供下单独安装文件下载，顺带提供绿色便携版（制作方法参考老N的文章）。

Windows Live Writer 独立程序安装文件

下载： go.rpsh.net/writer （5.24M）

下载解压即是最新版的 Live Writer 独立程序安装文件。

Windows Live Writer 绿色便携版

下载： go.rpsh.net/wlw （7.14M）

解压后，双击 WindowsLiveWriterPortable.exe 即可启动绿色版版的 Live Writer。

使用此绿色便携版的 Live Writer 撰写、发布的日志存储在：WindowsLiveWriterPortable – Data – Settings – Dir1.dat

注意：xp 用户如果没有安装 .Net Framework 的话，程序会无法启动。点这里下载 .Net Framework 安装包 go.rpsh.net/dotnet 。（Vista 和 Windows 7 都已经自带 .net 环境了）

另外，不得不赞一下江东大哥的 Homezz.com，超级负责任，如果你还在考虑哪里的主机好，不要犹豫了， Homezz.com 绝对是不错的选择

毕业了

任平生 — Sun, 14 Jun 2009 11:42:02 +0800

毕业纪念册。我们设计的厚重的暗红被印成了炫耀轻浮的大红。。。

照片墙。谁能从中找出我，有奖哈～

学校的学位授予仪式。（找不到清晰的近景照片…）

王立群讲话时刚好被辅导员拉壮丁派去主席台后边的大礼堂领导师服，没听到讲些什么（主席台后边太吵了），听说很“雅俗共赏”。

于是就有同学照相时拉上导师服摆出一副道貌岸然的样子，哈哈。

情系母校。

路遇建民（下右二）和他父母，便合了个影，纪念册就是我们两个共同负责设计的。见他媳妇给他妈打着伞，估计他们会是我们班第一个结婚的吧

穿上学士服。

霍格沃茨的魔法师。

继续合影。

散伙饭。

毕业晚会。

杨书记为我们带来的《菊花台》！虽有跟歌词但能唱下来真的是送我们最好最好的礼物 —— 理解、参与！

我爱记歌词。老周唱的好喜庆。

动感炫舞。一个字，炫！

本来只有我们几个醒目地站在台子上做最后一排，但显然其他人也意识到这个上风宝地，于是拍摄位置后移，我（们）被淹没。。。

所有的活动都结束了，真正的毕业了。。。

更多照片在这里，这里。

再唱一次校歌，再游一次校园，道一声： Farewell , My University！

Google 在线表单技巧分享

任平生 — Mon, 08 Jun 2009 10:00:44 +0800

一天，接到狂人老兄的短信，问一些 Google 在线表单的用法。随后经过我们的讨论、探索，发掘出不少技巧来，这里做一总结，希望对也在使用 Google 在线表单进行问卷调查、信息收集的人有所帮助。

Google 在线表单（Google Form）是 Google Docs 旗下用来制作调查问卷、数据收集一项子服务。基本的使用方法可以参考林杰同学的使用Google Docs制作调查问卷。

下边开始分享我与狂人老兄共同发掘出的技巧：

修改表单

即使表单已经发布，你也能够对调查问题进行修改和补充。

方法：在 Google Docs 后台打开要修改的表单，在“表单”菜单下选择“编辑表单”即可对这个表单的调查问题进行修改、添加。

复制表单

有时候我们需要制作一系列调查内容基本相同只在细节上有少许差别的表单。此时我们只需制作好一个表单，然后通过创建表单副本的方法来快速创建多个调查问卷。

方法：在 Google Docs 后台打开你创建的在线表单，在“文件”菜单下选择“创建副本”即可创建一个副本。副本文件打开后，在“表单”菜单下选择“编辑表单”即可对这个表单的调查问题进行细节的变化调整（此处同上“修改表单”）。

使用主题

虽然默认的表单页面美观大方，但谁也不会拒绝更多的主题选择，这里 Google 为我们准备了 70 余款主题。

方法：在“编辑表单”页面，选择“主题”即可进行选择。

发布表单

问卷制作好后，就要发布表单了。唯一要说的就是 Google 在线表单支持 https ！

监控表单

如果你需要及时了解调查进展情况，除了到后台查看结果外，还可以设置当有人提交表单时，Email 通知你。（如果你的问卷很受欢迎不建议使用此项 -.-）

方法：打开“工具” – “通知规则”，勾选“用户提交表单”，然后选择通知方法，最后保存。

停止调查

当调查结束后，你可以停止接受新的调查数据。

方法：在“表单”菜单下点一下“接受响应”取消此项前边的勾即可。

统计图生成

Google 在线表单可以自动为结果生成统计图。

方法：“表单”- “显示摘要”。

导出结果

导出为 .xls 文件，你可以在 Excel 里做更多的数据处理工作。

方法：“文件” - “导出”，选择你需要的导出格式。

你在 Google 在线表格使用中都发现了哪些技巧？欢迎分享～

流水帐0523

任平生 — Sat, 23 May 2009 01:16:34 +0800

经过几番折腾，现在将 rpsh.net 搬到 Homezz.com 上了，速度很让我满意。如果如你也在寻觅个靠谱的主机，可以去看看 Homezz.com 提供的。最低 50 元起。

rpsh.net 的域名也成功转移到了国外 Name.com 。

无聊的抽风，于是建了一个 QQ好友群： 31550891 ，有兴趣的可以加入。

帮年级做毕业纪念册，收集资料各班都是互相推诿扯皮。

现在作息完全颠倒，睡眠时间不停被压榨。

马上就要吃散伙饭，要毕业了。。。

未完无续

任平生

Zen Coding 让 Notepad++ 代码书写健步如飞

为Notepad++安装 Zen Coding 插件

Zen Coding 用法

自己编写缩写规则

如何下载网页上的视频

sp2wp:导出Live Spaces数据到WordPress

导出 Live Spaces 数据

导入 WordPress

23岁了

获取 Live SkyDrive 外链地址的 Bookmarklet 更新+Greasemonkey 脚本

过滤 Windows Live 在线服务广告的 Greasemokey 脚本

Live Writer 独立程序安装文件及绿色便携版下载

Windows Live Writer 独立程序安装文件

Windows Live Writer 绿色便携版

毕业了

Google 在线表单 技巧分享

修改表单

复制表单

使用主题

发布表单

监控表单

停止调查

统计图生成

导出结果

流水帐0523

Google 在线表单技巧分享