离上次写博客整整两月了。
工作,忙,累,懒散,分裂。理由,也是借口。

我还活着。从明天起,要做一个勤劳的人。抽时间学习,抽时间分享文章。
HTML5,架构,用研,JS。碎碎的。

不进,即退。

写在农历2011年初…

农历卯兔年, 第八天, 回归了平稳的日常工作生活学习.
混混噩噩, 新年期间把HTML5画布与HTML5离线弄明白的计划被搁置, 博客也有半月之久没有更新.
每年都为自己写一个简单的年终总结. 2011, 也不会例外.
2010悄然远去. 有得有失,有悲有喜.没有感慨.生活的本质亦是如此,谁也不能预示未来的样子.但,可以好好的把握现在. 我不信鬼神.
2010, 家人身体健康顺心如意;
2010, 感情稳定,身体欠佳,工作努力中;
2010, 付出有所回报, 自己的专业技能有质的飞跃;
2010, 存够了2010年初的预定数额,但在物价飞涨的和谐国度里此钱已非彼钱.
生活要继续,工作要继续,学习永不停歇.新的一年,不给自己太多压力.努力就好.在心里给自己画个小圈圈,记下几个小小的目标.
年轮流转.少年与青年之间刹那而已.站在80后的尾巴上,与90后00后渐行渐远.想起5年前青涩的自己(有文末不成文的小诗为证). 为事处人, 思而后行.
努力健康,多喝水少熬夜. 另外, 还要做一个艰难的决定:少吃肉!
新的一年,没有豪言壮语,没有旦旦誓言.好好工作,好好学习,健康生活,多读史书,爱生活,爱老婆.

附: 写于2006农历年初的《又一年》:

烟花飞扬的夜晚
寂寞的时钟静静地流转
一段往事如烟散尽
轮回的歌里开始了又一年

频频回首
眼眸流落无尽的怀念
昨日的梦想渐行渐远
如爱阑珊

双手紧捂呆滞的双眼
指缝间浪迹着仓皇的着恋
多少美丽的故事
发黄成古旧的照片

刻画着苍凉的脸上
命轮依然默默的延碾
又一年的又一个春天
是否会温暖

前端学习书籍推荐

时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.
HTML与CSS阶段书藉选择
对初学都来说,这一阶段应该是XHTML与CSS2的学习. 学习前期, 建议至多看两本书: 《CSS权威指南》《CSS那些事儿》, 有一定CSS基础后, 可以看《精通CSS:高级Web标准解决方案》. 或许你会问,为什么没有HTML学习的书籍, 就我个人立场而言, 在你还没入门前, W3C在线教程或者HTML手册都是你最好的入门书. 前期你需要掌握的HTML知识并不要很多. 简单一点, 你能知道何处该用哪个HTML标签即可. 如果还想简单一点, 可以找一份HTML标签汇总表记下对应的标签(可参考HTML技巧: 语义化你的代码一文的附表) .
对于CSS, 入门的话, 一本CSS2.0手册以及3C在线教程也是你入门首选方法. 入门之后,我非常推荐买一本《CSS权威指南》, 这本书最新版已到第三版. 可以当成参考书, 亦可以是系统学习CSS2.0的书. 这本书该什么时候读呢? 会与不会之间, 阅读这本书你需要对CSS最基础的东西有个了解. 这本书最大的优点便是讲的透彻易懂(对于初学都,这是多么重要), 知识系统全面, 章节也分布的合理. 只要你用心读完这本书之后, 你的CSS水平一定有一个不小的提升. 在此期间, 还可以买一本《CSS那些事儿》, 作为实践用书. 我一直坚信, 任何一门技术, 自己写代码实践永远都是第一要务. CSS基础基本掌握,并有一定的项目经验后, 可以开始读《精通CSS:高级Web标准解决方案》一书, 此书描述比较简洁(我看的是第一版, 据说第二版翻译的比较差劲), 里面有许多实用的项目技巧, 对常用BUG的查找及修复有整章的描述, 书最后还有两个实例介绍, 是本很不错的进阶书籍.
JavaScript与JS库学习
原生JavaScript入门首选, 当然是《JavaScript DOM编程艺术》, 毋庸置疑的经典之作. 前前后后我至少完整的读过三篇, 每次都有不同的收获. 透彻易懂, 表述流畅, 作者一直在用一种极简的文字描述对于初学者来说非常晦涩的理论, 并有完整且并不复杂的样例相辅. 只要你用心读完它, 你就会大概的知识JavaScript是怎么回事. 读过《JavaScript DOM编程艺术 》之后, 很多人推荐看《JavaScript权威指南》, 我个人觉得不妥, 或许对于有程序基础的人来说, 这本书可以相对轻松的读下去, 但对于初学者, 读它无疑是一种挫败感很强的打击, 这本书很全面涵盖的很广, 的确是一本不错的书, 但前期仅是一本工具书而已. 如比让你学英文就直接给你一本牛津词典, 学起来谈何容易. 我个人的推荐是, 学透《JavaScript DOM编程艺术》后(起码对里面的实例自己能独立完成,并且知道所以然), 用一到两个月时间实践JS, 积累一定的知识基础后, 可以开始看《精通JavaScript》, 这是一本进阶的书籍, 也是一本很实用的书, 作者是jQuery之父John Resig, 书中介绍并演示了很多轻量级的功能函数, 并对实现原理有很详细的讲解(书中样例的源码注释也翻译成中文了, 这一点翻译做的很周到). 在这本书之前,《ppk 谈 JavaScript》一书也值得一读, 但我个人而言, 此书让我读起来很不舒服. 全书基本是在9个样例基础上讲的, 里面对JS的可用性与可访问性有很到位的讲解, 但作者将样例都拆散了讲的, 感觉很散乱, 有时看到后面, 还得去前面找与之相应的内容. 所以, 这本书是否去读, 读者可根据实际情况选择. 前面的书看完了, 可以回过头来看《JavaScript权威指南》, 将是不错的选择.
上面的书都看完并读懂之后, 原生JavaScript算是入门且有一定的功力了, 接下来可能需要你实践与领悟了, 后面的该读什么样的书相信自己也有一个大概的方向了.
学完原生JavaScript, 顺便再提下库的学习. 库的目的是让我们更便捷的使用JS, 但原生JS才是根本, 若过于倚重库, 而忽略原生JS, 你永远也只是知其然, 而不知其所以然. 原生JS与库应该是相辅相成的,所以, 学习库之前, 一定要对原生JS有一定了解, 并且花在学习原生JS上的时间永远要多于库的学习. 因本人仅熟悉jQuery库, 本文只推荐一本jQuery库学习书藉: 《锋利的jQuery》. 这是一本讲jQuery再简单化的讲述给读者的书, 书中的内容都可以通过jQuery API找到, 但作者用更直白的语言描述出来, 并辅以样例, 清晰易懂. 只要稍稍用心, 看完此书, 写完书中样例, jQuery基本算是会了.
HTML5与CSS3
HTML5与CSS3的学习, 目前除了API还没有更多可以选择的书. 本人最近在阅读《HTML 5用户指南》, 此书对HTML5的新标签与新功能讲的还清晰, 虽然还没读完, 但就目前我读过的前七章(共十章),感觉此书还是值得一读的. 至于CSS3, 除了API还没找到对应的书.
Web前端其他知识学习
前端是精一多专的职业, 前端不仅仅要会HTML/CSS/JS, 还需要你对综合知识, 比如用户体验, 搜索优化, 后台语言等都要有一定的了解. 其实这方面的书, 我自己读的也比较少, 更多的是在网络上关注相关的知识并加之自己领悟消化.
这里我只推荐两本书《用户体验的要素》《Web前端开发修炼之道》, 并且这两本书都是可选的.
《用户体验的要素》是一本没有代码的理论书, 但它并不枯燥. 全书都在告诉你用户体验的思想, 所以这不是一本有答案的书. 可以说, 此书对我本人对用户体验的认知有一个深层次的理解.
《Web前端开发修炼之道》一书是前端经验进阶的书, 喜忧参半, 文中有部分让人受益知识, 但也有不少地方我认为是糟粕. 比如, 书中对CSS过于模块化的思想, 比如讲第五章讲JavaScript的样例竟然没有一条注释. 所以, 这本书读者选择前请慎重. 阅读过程中也要有自己的主见, 取其精华, 弃其糟粕.

最后, 希望本文对初学者选择学习书籍有帮助, 也希望高手们对本文书藉选择提出指正.

为WordPress更换SynTaxHighlighter注意事项

一直琢磨着讲博客原来的coolcode高亮插件换成SyntaxHighlighter高亮, 心动不如行动, 终于花了几小时时间完成了这项琐碎的工作.
SyntaxHighlighter的实用与强大, 就不用我说了. 其实coolcode也是款很不错的高亮插件, 但书写时相对繁琐一些.
关于安装这个插件, Google一下, 会有文章介绍, 我所尝试并有效的方法只有直接引入JS及CSS文件. 一开始我也是直接下了个zip包, 直接添加新插件, 失败. 打开包一看, 里面根本没有相关的Pph配置文件. 还以为下错了文件. 然后在ZH CEXO童鞋的提醒下, 看了下其中的test页面, 原来它是纯JS+CSS实现的. 好吧, 麻烦一点, 直接加载文件吧. 不要为test文档中大片的JS调用吓倒, 除了一个核心shCore.js, 其他的全根据自己实际使用情况调用.有一点, 千万别忘了在外链文件后, 执行一下SyntaxHighlighter.all(). 文章最后我会贴上我所使用的CSS及JS.
本地测试, 新的语法高亮成功. 接下来就是将以前的高亮方式替换成新的. 一篇篇文章修改? 当然可以, 但是会死人的. 最好的方法当然是直接批量替换数据库. 安全起见, 先用phpMyAdmin导出(我的是虚拟主机, SQL Front连不上, 很郁闷~)文章表(我的是i_posts), 然后在本地用SQL Front执行批量更新替换(也可以直接在phpMyAdmin中执行). 下面是我使用的SQL方法:

update i_posts set post_content=REPLACE(post_content,'coolcode lang="javascript" linenum="off"','pre class="brush: js;"');

注意,上面的语句一定要根据实际仔细写完整, 否则替换错了是不能撤消的..
但数据库也不是万能的, 批量替换只能替换相同的部分, 有些地方写的时候难免会换个顺序, 多个空格之类的, 所以, 还是得一页页的翻翻, 把不正确的更正过来.
所有数据更新完毕, 本地测试无误, 导入. 一个新的语法高亮就完成了.
使用方法, 暂不详述, 请参考插件包中的演示文档或前往SyntaxHighlighter高亮查看.
最后, 如果你在本站浏览时发现比较奇怪的代码错位或者其他bug, 那极有可能是数据替换时出的岔子, 请及时转告我, 先谢过~
下面是我的调用的CSS及JS文件(PHP的gzip压缩方法,请参考: http://mrthink.net/ue-php-gzip-function/):
CSS.php

  include('syntax_css/shCore.css');//核心CSS
  include('syntax_css/shThemeDefault.css');//模板CSS

JS.php

  include('syntax_js/shCore.js');//核心文件
  include('syntax_js/shBrushJScript.js');//JS高亮
  include('syntax_js/shBrushCSS.js');//CSS高亮
  include('syntax_js/shBrushPHP.js');//PHP高亮
  include('syntax_js/shBrushXml.js');//HTML类(含xml)高亮

最后的JS

SyntaxHighlighter.config.clipboardSwf = 'syntax_js/clipboard.swf';//这个是鼠标划过复制小图标的flash
SyntaxHighlighter.all();

Web前端开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改.
以下为[WEB前端开发规范文档]正文点此查看WEB版本

规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;

2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;

4. JS文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范

1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”gbk” />, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

<link rel=”stylesheet” href=”…” />

<style>…</style>

<script src=”…”></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;

7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

9. 书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在URL地址后面加上“/”;

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & »(») 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a, 通过从属写法规避, 示例见d;

b, 取父级元素id/class命名部分命名, 示例见d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,

按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,

样式写法:  #mainnav  .firstnav{…….}

按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,

样式写法:  .main_firstnav{…….}

7. css属性书写顺序, 建议遵循:  布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position(相应的 top,right,bottom,left) & float & clear & visibility & overflow; 自身属性主要包括: width & height & margin & padding & border & background; 文本属性主要包括:color & font & text-decoration & text-align & vertical-align & white-space & 其他 & content; 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

定义

ul.list li{position:relative}  ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)

13. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范

1. html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式’画’代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;

建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;

2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.


渔夫科技