PIZn

“开源 Alice 样式库解决方案、

PIZn — Fri, 23 Dec 2011 17:24:18 +0800

Alice 是支付宝前端样式解决方案小组的项目代称。她包括构建样式库的 样式库解决方案，帮助团队理解新技术的 W3C标准文档库 和正在进行中 实验项目 等; 也是团队的代称。目前 Alice 的主要职责是提供 CSS 和 HTML 方面的技术支持和解决方案开发。

作为 Alice 小组的成员之一，从去年实习的时候就接触到了 Alice V3 规范，受益匪浅。今天 Alice 终于对外开放了，在这里作下简单的介绍。

关于 Alice 的一些话：

我们基于 “分享·贡献·学习” 的理念建立了 Alice UI，用来开源部分团队成果。发布的所有开源源代码采用 MIT License 许可。非常欢迎大家参与 Alice 的开发，嘻嘻，不要忘记提出您的宝贵意见哦。

Alice 在 GitHub 仓库的目录结构：

---
|---- plugins/ 浏览器兼容解决方案对应的编辑器插件
|---- solutions/ 浏览器兼容解决方案
|---- tpl/ 参考的模板文件
|---- w3c/ HTML5/CSS3 标准文档
|---- base.css Alice 的基础，所有样式均基于它
|---- readme.md

更多详情：
      1, 成为作者/贡献者
      如何快速开始，了解和使用 Alice 提升团队合作的效率。
      2,成为作者/贡献者
      成为一个代码贡献者、插件作者，或者 fork 一个自己的分支吧，让你的简历多一份可写的内容。
      3. Alice 样式库解决方案
      如果我们风格统一，那么代码将是有规可循的。我们可以根据命名了解结构，根据结构理解构建的代码原理。对于跨产品合作，将是无缝的；对于多人 debug 也将是无碍的。样式解决方案正在为这样的目标努力。现在她已经应用于支付宝的各条产品线。
      4. 阅读 HTML5/CSS3 标准文档
      标准化文档项（Standard Specs），目前主要是对 HTML5/CSS3 这些较新的标准技术进行的标准文档研究。使用于标准布道。让更多不熟悉相关技术的人可以阅读更易懂的文档、了解需要注意的点和知悉相关的解决方案。后续计划是产出网站应用新技术的渐进增强方案和实践解决方案。

意见和反馈

任何批评、问题和意见等，都欢迎与我们联系：admin@aliceui.com

欢迎关注我们

Twitter：http://twitter.com/#!/ialiceui 腾讯微博：http://t.qq.com/aliceui 新浪微博：http://weibo.com/aliceui

“.Get GitHub Code、

PIZn — Fri, 09 Dec 2011 19:42:16 +0800

因为经常把一些代码放到 GitHub 上面，当有一些 wordpress 文章需要使用到那些代码的时候，又懒得写。因而触发了这样一个想法：把 GitHub 上面的代码传到 wordpress 来，方便快速，直接明确。于是，这个星期就开始折腾着怎么来实现这样的一个功能。

而今天发布到 wordpress 插件库的一个新的插件：Get GitHub Code ，很好地帮我解决了这个问题。在这里简单介绍下这个插件的使用方法和效果。

适用版本：

wordpress 3.0 或者 3.0 以上。

php 环境 5.2.7 或者更高版本。

插件下载：

Get GitHub Code

使用方法：

首先，我要说，这个插件比较 213，安装起来相对麻烦。但最终效果不错，如果经常 git 的话，你会喜欢的。

1, 下载 Get GitHub Code，在后台激活。

2, 到后台设置页面，菜单->设置->Get GitHub Code，开始按照设置页面的内容一步一步来设置。设置的页面如下：

3, 在服务器端新建个文件夹，用来存放 cache，注意，该文件夹应该具有可读可写权限。

4, cache 文件夹设置成功之后，设置 cache 存活时间，还有是否显示出 repo 的信息。

5, 在你的 wordpress 主题中的 single.php 或者 page.php 文件中，输出内容的下面加上:

      <?php igit_getcode(); ?>

6, 完成文章的编辑之后，在右侧有个设置表单，分别用来填写你的 GitHub 项目信息。根据这些信息，就可以获得你在 GitHub 上相应的代码了。设置表单如下图：

报错信息解决

如果在完成上面的一些操作之后，文章页面显示出这样一条信息：“Here is the code get form GitHub, but it have some problem. Please wait 1 hours later.”，解决的方法很简单，就是将你的 cache time 设置为 1 分钟，刷新之后看看有没有返回正确的信息。连续几次刷新都无显示，那么可能要删除 cache 了。

如果显示的是这样的信息：“Oh, the code form github can’t not get! Please contact the site master..”，这是因为你的 cache 文件没有填写正确或者不存在。

Bug 反馈和交流

这是个小众性插件，所以用的人比较少。我想成功用的人也应该很少。如果你在使用过程中遇到什么问题，请及时反馈，多多交流哈。
Demo
下面获取的代码是 Get Github Code 获取我的 pizn.me 博客在 github 项目的 changeLog，具体效果如下：

“.ColorCode for WordPress Plugins、

PIZn — Tue, 06 Dec 2011 15:50:50 +0800

之前想过为 ColorCode 写个 wordpress 插件，今天简单地完成了 1.0 版本。

ColorCode 可以帮助您为 HTML， XML， Javascript 和 CSS 代码提供代码高亮方案。

适用版本：

wordpress 3.0 或以上版本。

插件源码：

GitHub ColorCode Project

插件下载：

ColorCode Plugin

使用方法：

1, 下载或者git clone ”wp-colorcode” ，解压到 wp-content/plugins/ 目录下。

2, 进入 wordpress 后台，菜单－》插件－》激活 colorcode。

3, 编辑文章，切换到 html 编辑，为你想要显示成代码的地方加上如下标签：

<pre name="colorcode" class="html" >
...//Your code here
</pre>

注：class 可以是 html, xml, js, css 。

4, 这样就完成了。但还提供了 2 项设置。进入后台，菜单－》设置－》colorcode ，在这里可以选择你喜欢的配色方案（暂时提供 4 套），还能选择是否显示行号。

设置页面如下图：

插件演示：

下面的代码是通过 ColorCode 插件显示出来的效果。默认的配色方案为 Knight。

<pre class="js" name="colorcode">
window.onload = function() {
          alert(" Hello World!");
}
</pre>

可能遇到的问题：

如果您正确使用了 ColorCode 插件，仍然无法高亮代码，请确定您的 wordpress 主题的底部提供了 wp_footer() 函数。

联系作者：

如果您觉得这个插件还不错，有建议的话可以联系我哈！或者有 Bug 什么的，快快联系我。

Email: pizner@gmail.com

或者给我留言！

“.ColorCode 代码高亮、

PIZn — Wed, 30 Nov 2011 20:31:22 +0800

一直在寻在寻找一款代码高亮的插件，希望是找到轻量级的，可调控的，配色方案舒服的。

这两天抽了点时间折腾了一下，终于搞定自己喜欢的几套配色方案。简单命名曰：ColorCode，主要是基于 JS 代码高亮的一些配色方案和辅助功能。

这里介绍下。

实现原理：

ColorCode 的核心渲染功能是采用了 DlHighlight ，通过页面 DOM 结构加载完毕，获取 pre 标签，正则匹配出需要高亮的代码，在浏览器端重新替换掉。并且通过获取到的定义好的 pre 标签中的 class 类来判断是需要高亮的哪种语言（xml，html，javscript，css），来高亮代码。

目前提供的语言有：xml， html， javascript， css。（个人只需要这 4 类，可以说比较轻量么？）

配色方案：

其实，我的主要工作是配色方案和 DlHighlight 的一些 bug 的修复。

个人提供的 4 套配色方案如下：

1, knight

这是我现在 vim 所采用的一套配色方案，比较喜欢。主要是黑色背景，各种鲜艳的高亮色彩。

2, moonfang

这也是一套黑色背景的配色方案，但色彩相对 knight 来说灰度大了些，比较宁静，就像月光的痕迹一样，淡淡的舒服。

3, nortrom

这款采用白色背景，比较传统的编辑器都可能会有的一套配色方案。

4, yurnero

恩，这是最简单的一套配色，很清晰舒服。大部分人会喜欢这一套。

如何呢？你喜欢这 4 宽配色方案么？请给我建议吧。

我还会继续完善 ColorCode 这个项目的，会提供更多舒服的配色方案供大家使用。因为我发现现在不只一个项目需要用到这些代码高亮了。

在哪里能看到 ColorCode 的实例和地址？

哈哈，请移步 PIZn‘s github blog，在这里我已经用上了。具体的 ColorCode 源代码在我的 Github 项目 ColorCode 中。

不足和后续支持：

1, 将会提供代码复制功能。

2, 要不要兼容 IE 9 以下？

3, wordpress 插件。

4, 更多配色方案。

“.盲校朋友手工作品展、

PIZn — Fri, 25 Nov 2011 14:28:22 +0800

在 10 月底的西湖国际音乐节，我和萤火虫小分队的其他队员一起，陪伴着浙江盲校的一班朋友度过了美好的两天。在和他们接触的过程中，感触很深。我的这班朋友们，在一些方面很有天赋，也很认真地学习和生活着。

用心地微笑着，即使是在一个看不见色彩的世界里面，你也能很生动地感受到。今天，在这里晒一晒这班盲校朋友的手艺吧，他们很不容易。

纸花

//这是我们遗忘的年代，你还记得小时候你也曾经折过么？

泥塑－猪

//这，不知道花了多少时间来塑造。

画

//这些色彩，都是真实的。

纸艺系列

//数不尽有多少张纸了。

纸艺系列－船

//令人遐想，船的帆上密密麻麻凹凹凸凸的，是另外一种语言。

纸艺作品－蜻蜓

//生动。

纸艺作品

泥塑－恐龙

陶艺－龟兔赛跑

陶艺－克隆公鸡

纸艺－椅子

纸艺－劳动

陶艺－对鹅

陶艺－狮子和牛

纸画

//我特别喜欢这幅。

纸艺

感悟：

现在看朋友的这些作品，和在这里贴出来的感觉实在不同。那天，就我一个人在一个展厅里面，静静地欣赏着这些优秀的作品。想象着他们是如何完成的，感觉到不可思议。
用手触摸，用心感受，另外一种心灵之间的语言。盲校的朋友们，好样的！^^

后话：

我对自己说，要让你们能够成功通过屏幕阅读器成功读到这片文章。恩。

“.做一只小小萤火虫、

PIZn — Thu, 20 Oct 2011 23:43:53 +0800

我，是一个伪程序猿，假设计湿，刚从象牙塔出来不久的普通毕业生。为什么要做一只小小萤火虫呢？很庆幸，因为我高度近视的双眼还能看到这个多彩的世界，蓝的天，白的云，紫色的罗兰……

来到杭州已经有 3 个多月了，这里比我想象的好。很多人曾经问我，为什么从广州跑到杭州来。我觉得大可不必问了，这是一个追梦的年代。我怀揣着梦想。

假如你对我特别感兴趣，还想寻问着我的梦想是什么。其实我是矛盾的，漫无目的的，可以随便忽悠你。但今天看到阮一峰的最新文章《活着的三个理由》，至少就是我的梦想中的一部分了：

1，追求爱情

2，追求知识

3，同情心

更重要的，是活着的价值。

生命是很短暂的，人总是那么的痛苦。在活着的时候，创造出有益于别人的价值，即便死去，精神也同样的存在（不想用形容词了，看看乔布斯吧）。

还在学校的时候，我很单纯地想着一些事情，但没有动手去做（应该是环境的问题，假如你在学校宿舍里高喊：“我要改造世界”，马上被人当作神经病；即使你只是想做些特别有公益性的，也会变质）。

现在好了，能在公司遇到这样一群志同道合的人——他们是富有爱心，肯为他人默默付出，关注着这个社会的微小角落里的美丽心灵的人。这，在开始的时候就一直让我激动不已。

曾经还有人问我：当你跟某个人第一次见面的时候，你会注意他／她哪里？

也许你也会回答：眼睛。

但你真的去关注过么？眼睛是心灵的窗口，同时也是这个花花世界的窗口。

在这个社会，还有这样一群要被忽视的人群——他们看不到蓝天白云，看不到绿草红花，他们生活在黑暗的世界里……

好吧，不敷述了。

我对自己说：要尽自己能力，做一只小小的萤火虫，传递更多的美好，希望和爱。

最后宣传：

萤火虫小分队：着力关注视觉障障人群，传递美好、希望和爱。让我们一起努力，让这个世界有微小而美好的改变。

假如你看得到这个多彩的世界，加入我们吧！

趁今晚杭城下着大雨，静下心来思考工作以外的事情。值！晒一下给自己定的小计划：

1，学习3种语言（日语，盲文，摩尔斯基码）；

2，关注和学习无障碍体验；

3，做友爱的前端攻城湿。

“.使用 GitHub Pages 建立博客、

PIZn — Sat, 24 Sep 2011 16:12:15 +0800

一直在寻求能够快速发表文章的工具，于是不停地尝试。这星期折腾了下 GitHub Pages，并尝试在上面建立起我的博客副本，感觉挺不错的，可以通过 vim 编辑文章，然后快速地发布出来。

Github Pages 除了支持常规的 HTML 内容，还支持 Jekyll——简单的静态网站发生器。Jekyll 使得我们很容易地创建站点范围内通用的模板，而无需复制。当我们做好了页面页脚之后，每次就只需提交文章就好了。

之前已经在自己搭好的 GitHub Pages 上简单记录了这个过程，趁今天天气不错，阳光灿烂，心情大好，就把这个过程发表出来吧。

在阅读这篇文章之前，你也许需要：

1，拥有一个 GitHub 的帐号；

2，懂得 GitHub 命令；

3，在自己终端建立了 GitHub 连接。

建立 GitHub Pages 的过程导读

其实很简单。首先需要建立起自己的项目，然后到项目控制中心建立 Pages，最后进行一些 Jekyll 模板的设置和美化。尔后，假如你的 GitHub 用户名是 pizn ，项目名是 test，你就访问这个路径就可以了 http://pizn.github.com/test

建立自己的项目

填写完名字和描述之后，点击 Create Repository 之后，就会刷新到一个页面，该页面会教你如何在自己本地建立相应的库，并建立连接。正常情况下你可以看到下面的代码：

mkdir test //创建 test 文件夹
cd test //切换到 test 文件夹
git init //初始化
//接着会在这里输出 Initialized empty Git repository in yourUrl/test/.git/
touch README //新文件
git add README //添加
git commit -m 'first commit' /commit 信息
//接着会在这里输出 [master (root-commit) 4f8d7e8] first commit
// 0 files changed, 0 insertions(+), 0 deletions(-)
// create mode 100644 README
git remote add origin git@github.com:pizn/test.git
git push -u origin master //上传到 Master 目录
//接着会在这里输出 00% (3/3), 203 bytes, done.
// Total 3 (delta 0), reused 0 (delta 0)
// To git@github.com:yourUserName/test.git
// * [new branch] master -> master
//Branch master set up to track remote branch master from origin.

然后回到 GitHub 的 test 目录下，你就可以发现很神奇的时期发生了，如下图：

创建 GitHub Pages

在相应的项目，例如 test ，通过 Admin 进入项目的控制面板。

然后建立点击 GitHub 建立自己的页面。

点击弹出窗口的链接，自动创建一个 Pages，当然，这还需要填写一个表单，关于这个页面的。你也可以直接点击继续跳过。当页面建立好之后，你就可以通过这样的一个路径访问到了：http://yourUserName.github.com/test

建立本地与页面分支的连接

在终端下切换到刚刚的 test 文件夹

git fetch origin
//输出内容：remote: Counting objects: 3, done.
//remote: Compressing objects: 100% (2/2), done.
//remote: Total 3 (delta 0), reused 0 (delta 0)
//Unpacking objects: 100% (3/3), done.
//From github.com:pizn/test
//* [new branch] gh-pages -> origin/gh-pages
git checkout -b gh-pages origin/gh-pages//切换分支
//输出内容Branch gh-pages set up to track remote branch gh-pages from origin.
//Switched to a new branch 'gh-pages'

使用 Jekyll 配置 Pages 模板
一般的 pages 所需要具备的目录结构：

.
|-- _config.yml
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2011-09-23-markdown.md
| `-- 2011-09-23-helloworld.md
|-- _site
`-- index.html

_layouts 目录是用来存放模板的，在这里你可以定义页面中不同的头部和底部。

_posts 目录是用来存放你的文章的，一般以日期的形式书写标题。

index.html是你的页面首页。

_config.yml 是配置文件。

明确了这个文件目录之后，应该如何动手来写自己的页面呢？简单的方法就是查看别人是怎么写的，这里有很多。具体的就不说了，当你在本地建立起这些目录和文件之后，你还需要将他们上传到你的 gh-pages 分支下。这样的话访问你的主页才能看到。

一般使用到的命令有：

git add .
git commit -m 'commit messages'
git push origin gh-pages

因为你可能要修改很多次，需要重复提交才能看到修改过的地方。这频繁的修改并不利于你的效率，所以最好能在本地搭建好 Jekyll 环境，直接运行 jekyll –server 你就可以通过 localhost:4000 进行本地访问。如何搭建本地 jekyll 环境，请查看这里。

使用一些函数来获取你的数据

站点的

site.time//时间
site.posts//文章
site.related_posts
site.categories.CATEGORY //分类
site.tages.TAG//标签

页面

page.url //页面路径
page.content//页面内容

文章

post.title //标题
post.url//路径
post.date //数据
post.id
post.categories//分类
post.tags
post.content

分页

paginator.per_page
paginator.posts
paginator.total_posts
paginator.total_pages
paginator.page
paginator.previous_page
paginator.next_page

关于文章页面
Github Pages 上的文章支持 MarkDown 语法，只需要将文件保存为 .md 的格式，就可以了。

后续补充

折腾 GitHub Pages 不是很久，相信在以后会不断地学到新的知识，到时候再更新下。如果你有什么不懂的地方，欢迎一起研究和探讨。我在 GitHub 上的博客副本——PIZn.Me，建立这样的一个博客，是为了在工作中将总结的东西快速发布出来，当作是自己记录的一个地方吧。只要一有时间，我会整理文章放到这边来的。:D

“.使用 Trello 进行团队任务分配和跟踪、

PIZn — Tue, 20 Sep 2011 21:59:55 +0800

Trello 是一个协作工具，帮助组织您的项目任务分配。它给予我们一目了然的设觉风格，直接地告诉你有什么工作，谁正在做什么，并将做好的，正在做到，将要做的整合到一起。

今天下午尝试了在 Trello 下进行团队项目的分配和跟踪，感觉特别的爽。原因有 3 个，一个是确实一目了然，简单明了；一个是不用刷新，ajax 加载；还有一个是团队性质的 To Do List 。

究竟有多好呢？今天就一步一步通过图片的形式来说明吧。怎样？

开始之前

当然是注册一个 Trello 帐号啦，虽然是全站是英文的，但看起来就是那么的舒服。你会很容易就找到注册的地方的。

注册完之后，你就会进入你的个人中心，该网站的布局相当好。最顶部的深蓝色条框的主要功能依次是 logo ，搜索框，帮助文档，通告，板和个人账户（头像等）。中间部分是我的板块，最右边则是相应的菜单。从第一感觉来说，整个界面清晰明了，没有让我需要去思考的地方（除了思考某个单词究竟是什么意思，哈哈）。

除了注册一个帐号之外，你应该了解的有 3 点。

1，你建立一个项目，在这里称作一个“板”，即 Board；

2，“板”里面有项目“条”，即 List；

3，“条”里面是“卡片”，即 Card；

入手入手

好了，我们来建立一个新的板，入口就在你的所有“板”里面（顶部）。

创建一个 Board 的时候，需要填的是 Title（标题），Add to Organization（选择是否添加到团队），Visibility（可访问性）。第一次的时候，如有不懂，里面有详细的提示哈。赞，考虑周到的设计。而绿色的 Create New Board 按钮，更是很有让你创建一个 Board 的冲动吧！

创建完 Board 之后，系统默认会生成 3 个 list ，分别是 To Do，Doing，Done。你可以直接将鼠标移到任何一个 list 上面，点击一下就可以添加新的 card。嗯，编辑和保存都在这里，支持键盘快捷键哦。爽!

我们在 list 简单添加的 cards 只是为每一个 card 添加了标题。接着我们可以点击 card 进行下一步详细的编辑。这个 card 里面可是充满着你所期待的功能，例如项目描述，人员分配（通过不同 Labels 颜色），增加项目进度条（这需要自己添加小项目的），相关评论，投票功能，上传文件，还有当前操作的操作历史功能等。

当我们很细心地为每一个 card 进行编辑了（其实我觉得是对一个项目的计划进一步细化）之后，你回到该项目的 Board 的时候，你会发现为什么是“简单明了”的了。看，灰色小图标＋数字；看七彩的小标签；看，你的头像；看，还有人投票了呢。

当你想增加新的同学进来一起做项目的时候，很简单。假如对方已经是 Trello 用户，那你可以添加他的名字；不是的话，就输入个邮箱去邀请吧。

其实在建好一个 Board 之后，我们还可以通过首选项来进一步设置的。下面的 Labels 可以修改掉默认设置的名字哈～

Ok，每一个 Board 只是你一个项目的一部分。我们每个人都有可能同时进入不同的团队，拥有不同的项目，于是有了这个 Board 集合。嗯，相当明了。上面就是我暂时的 Trello Boards。

还有要介绍的么？

还有的，Trello 的小图表设计的很不错，还支持键盘快捷键功能呢，更多详细文档请查看 Trello 里面的 Help。

还有的，Trello 除了提供网页版本之外，目前还有 ios 的哦。只不过我还没装上噢⋯⋯

这么多好的，不足的呢？

嗯，有滴。一个 card 的时间需要自己来写，也就是说自己控制，相信在以后会更加方便的。

另外，Labels 好像只有 6 个，如果多于 6 个人怎么办？不过这样也好，适合小型团队。太多的话，看起来就眼花缭乱了。假如真的是大团队要使用，那么最好能分级了，一级一级地分配人员，从大到小去细化，你懂的。

最后，由于都是异步的，所以有时候数据传输的时候有点慢，最好不要操作太快哈。

嗯，今天就介绍到这里，好东西大家一起使用，并一起让它变得更好。