《CSSCheckStyle——CSS的解析、检查、修复与压缩》完整PDF下载
目录
前言
《人人FED CSS编码规范》中，对CSS的编写方式进行了严格的约束和说明，但是如何在实际开发过程中，确保代码能够严格遵循规范的要求，是规范制定者必须要考虑的问题。
人为遵守规范，是规范制定的初衷，也是最终目标，但是在规范没有变成习惯之前，人为遵守终归是“不靠谱”的。因此：“无工具，不规范”，有了规范，必定需要配套的工具来确保规范的执行。
说起来也比较奇怪，同样是前端开发的三大语言之一，CSS的检查工具备受冷落，而JS的代码规范检查工具则层出不穷。JSLint/JSHint/gjslint等神器不断涌现，且检查的严格程度令人瞠目结舌，但是CSS的检查工具却寥寥无几，仅有的一些检查工具，也只对CSS的取值、是否符合W3C规范进行了检查，对于代码风格只字不提，而各大互联网公司的开发规范中，对于代码风格是有严格约束的。因此：
一个严格按照规范检查CSS代码风格问题的工具是必不可少的
另外，CSS的检查、修复、排序、合并、压缩等功能，是相互关联的，并不是相互孤立的。比如：只有进行了完整的CSS代码修复与合并，才能最大限度的实现压缩。而目前已有的CSS检查、属性排序、压缩等工具，实现方式五花八门，实现语言也是多种多样，不利于把CSS相关的功能有机的整合在一起，也不利于工具的集成和功能的扩展。因此：
依据完善的开发规范，实现一个自动修复CSS代码（为开发者）、并在修复的基础上压缩代码（为浏览器）的工具，也是很有必要的。
因此，CSSCheckStyle（简称ckstyle）就应运而生了。它自主实现了CSS的解析、检查、修复与压缩，不仅能够检查出CSS的代码风格和取值问题，还能够对CSS代码进行自动修复和压缩，给出符合规范的“开发者视图”代码和高效率的“浏览器视图”代码。此外，它充分利用插件的特性，可以方便灵活的实现功能扩展。
目前此工具已经在github上开源，欢迎大家围观，并加入我们：
完整PDF下载链接：《人人FED CSS编码规范》
浏览器特效支持规范
为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示：
| 圆角 | 阴影 | 动画 | 文字阴影 | 透明 | 背景渐变 | 空间变换 | |
| Chrome5+ | Y | Y | Y | Y | Y | Y | Y |
| Firefox 4+ | Y | Y | Y | Y | Y | Y | Y |
| Safari 5+ | Y | Y | Y | Y | Y | Y | Y |
| Opera | Y | Y | Y | Y | Y | N | Y |
| IE9+ | Y | Y | N | N | Y | N | Y |
| Chrome5- | N | N | Y | Y | Y | Y | Y |
| Firefox 4- | N | N | N | Y | Y | N | N |
| Safari5- | N | Y | Y | Y | Y | N | Y |
| IE8 | N | N | N | N | N | N | N |
| IE7 | N | N | N | N | N | N | N |
| IE6 | N | N | N | N | N | N | N |
[说明] Y为支持，N为不支持。
俗话说，磨刀不误砍柴工。
作为前端开发工程师，每天接触最多的就是HTML/CSS/JavaScript，而做的最多的事情就是：
1、修改代码
2、保存文件
3、编译合并文件
4、刷新浏览器
修改代码和保存文件等过程的优化，涉及到编辑器的选择和定制、代码的自动生成等内容，不是本文讨论的重点。
编译合并文件这个步骤，人人前端架构组给出的静态项目管理工具（OPM），已经非常好的实现了文件的自动编译合并，只需要修改原子文件，刷新浏览器，即可看到原子文件合并以后的最终效果。
因此还剩下最后一步：刷新浏览器。如何在OPM自动合并的基础上，实现改动内容的自动刷新，是目前最迫切需要解决的问题。
试想一下，如果能有修改代码“自动合并”并且同时“自动刷新浏览器”的工具，攻城师们就只需要看着显示器A修改代码，然后瞄一眼显示器B上的不同浏览器的显示效果是否正确就可以了，对于前端开发来说，这是多么惬意的事情！
人人前端自动刷新工具的要求
理想虽然很丰满，但是现实还是很骨感的。要实现自动刷新的功能，还要付出很多的努力。
结合人人前端目前开发的实际情形来看，如果需要在人人前端开发过程实现自动刷新，则自动刷新工具必须满足以下几个方面的要求：
1、能够实现原子文件修改的自动刷新，如果页面访问的ab.js是由a.js和b.js合并而成，则修改a.js也能触发页面的自动刷新。
2、能够良好的实现跨域，不论是www.renren.com、photo.renren.com，还是zhan.renren.com、apps.renren.com，都要能够实现自动刷新。
3、HTML可能不在本地，有可能在内部测试服务器上，或者直接用线上代码，这种情况是经常出现的，需要支持。
4、由于页面的脚本、样式请求数目较多，期望尽量减少页面请求的发送数量和频率。
5、需要对页面的脚本、样式请求进行过滤，只检测开发时用到的脚本或样式的改动，对于广告脚本、JSONP请求脚本、统计脚本等特殊请求则不进行检测。
6、减少自动刷新相关脚本对开发和部署过程的影响，最好能做到对产品开发脚本和样式的零污染，彻底避免将自动刷新相关的脚本带到线上。
css3已经逐步应用到网站之中，大家对border-shadow、border-radius、text-shadow等，早已熟悉（为了兼容小站部分在使用）。使用IE浏览器的用户很多效果无法体验到！很遗憾虽然IE9支持大部分css3，但transform和transition都无法支持。 亲！检查一下你的浏览器，看是否需要升级或更换吧？
最近我很荣幸的组织了今年（2012年）的Beercamp网站。如果你还不是很熟悉，那我给你介绍一下：Beercamp是设计师和开发者们的一次聚会，同时它也是进行前端技术实验的游乐园。每一年的Beercamp，我们都会把浏览器兼容性抛诸脑后，并且向“语义学”说一句“去你的”，没有那些“羁绊”，我们就能够更好地利用高级浏览器的新特性，开发出一些有趣的东西。
今年的实验是：苏斯博士（Dr. Seuss，美国著名的儿童文学作家）的3D弹出式书籍。如果你还没有看到过，那你应该去Beercamp网站看一下。这个网站展示了我们能够利用SVG和CSS的3D转换做出什么样的效果。在这个过程中我学到了很多东西，并且愿意与大家分享在3D空间内开展工作时一些非常有用的技术。
Beercamp2012： 淘气鬼的故事（A Tale of International Mischief）
在进入主题之前，首先要声明的是，如果我把网站涉及到的所有内容全都讲一遍，而没有把你烦死，这基本上是不可能的。为你着想，当然，也为了我自己，我只会给出一些要点。另外需要注意的是，我们使用了jQuery，而且为了简单，很多代码进行了删减（包括浏览器前缀），这也是你快速扫描代码片段时需要注意的。
最后，请记住，这只是一个实验，它并不能在所有浏览器上良好的运作，也不能出色的向后兼容，并且语言标记的使用可能也并不优雅。
好了，暂时先把你的定罪问责放在一边吧，我们要做一些有意思的事情了。
[插播一条广告：你有没有预定一本《Printed Smashing Book #3》呢？这本书由专业人士为你倾力打造，它给出了一种“革命性的网页设计”的全新思维模式，是重构网站的专业指导书籍，值得一看哟~]
要点1：畅游3D，乐趣多多
在我开始创建这个Beercamp网站之前，我进行了一些关于如何让弹出式书籍更加有趣的调研。当我翻看纸质版的《那些你想去的地方》（Oh, the Places You’ll Go. 作者：苏斯博士）时，我发现自己会从不同的角度去观察书的每一页。“横看成岭侧成峰，远近高低各不同”，从不同的角度观察事物得到不同的效果，这件事情本身是非常有趣的，如果能再加上与环境的交互，那就更加迷人了。
Beercamp的灵感来源：苏斯博士的《那些你想去的地方》一书
我希望在我的数字版图书中，通过直观可见而且细致入微的控制，也能创建出那样吸引人的效果。为了实现此效果，场景需要根据鼠标的坐标位置来旋转，使得用户能够简单的移动和翻看书籍。
实现这一效果实际上是非常简单的：
1. 设置一个事件监听函数
为mousemove事件添加一个事件监听函数：
$document.mousemove(rotateScene);
2. 计算旋转的角度
我希望书本能够以鼠标的x轴位置为基准，在Y轴方向进行-15°到15°的旋转：
rotationY = -15 + (30 * e.pageX / $body.width());
3. 执行旋转
$scene.css(‘transform’: ‘rotateY(‘ + rotationY + ‘deg)’);
非常简单，对吧？但是有一个问题，iPhone和iPad的用户并没有鼠标坐标。嗯，对！他们有陀螺仪。旋转手持设备就类似于旋转一本书，因此根据移动设备的方向来调整场景，将会是直观而且令人愉悦的交互效果。实现这个效果的步骤与上面的步骤大致相同，稍有差异。
阅读这个条目剩下部分 »
4月7日下午，由人人网FED部门举办的“人人前端技术沙龙”在人人网总部举办，会议已圆满结束，感谢各位讲师、嘉宾以及没有到场的各位朋友的关注与支持，感谢现场工作人员的辛勤工作。
本次技术沙龙是人人前端首次面向外界举办技术交流活动，作为一个新生的前端技术活动，我们热烈的期盼各位前端技术同仁的关注与支持，若您对人人前端技术沙龙有任何的意见或建议，都可以发送邮件至 jingwei.li[at]renren-inc.com。我们也欢迎各界的朋友能够选题报名，我们将为您提供一个展示的舞台。
所有主题视频、ppt都已发到沙龙专题页，请移步观看。
现场照片：
讲师团队
工作人员及朋友们
人人网FED的美女工作人员
标签: 评论: 11条
对于用javascript开发的HTML5游戏来说，垃圾回收暂停会严重阻碍游戏的流畅体验。Javascript并没有提供显式的内存管理机制，这就意味着你能创建对象但是并不能释放他们。浏览器迟早需要清理这些对象，一旦开始清理，就意味着当前执行的任务必须暂停，浏览器必须计算出哪一部分内存正在使用中，从而释放其他没有使用的内容所占用的内存空间。
这篇博客将会深入研究避免过度垃圾回收的技术细节，而这也正是用Construct 2提供的Javascript SDK开发插件或特性的开发人员正需要了解的。
浏览器开发者在实现浏览器的过程中，就使用了许多技术来减少垃圾回收暂停，但是如果你的代码创建了非常多的内存垃圾，浏览器仍然不得不暂停当前执行的任务，并且陷入内存清理的工作中。
随着内存对象的不断创建，浏览器将会间歇性的执行内存清理，清理过程如下“锯齿形内存使用统计图”所示。下图就是在游戏Space Blaster运行过程中Chrome的内存使用情况图。
图1 进行javascript游戏时的锯齿形内存使用统计图，这真实的反映了大多数情况下javascript的内存使用情况（除了内存泄露的情况）
另外，一个以60帧每秒的速度运行的游戏，每一帧的渲染之间只有16毫秒，但是一次垃圾回收过程则经常需要占用100毫秒或者更长的时间。这就导致了一个非常容易察觉的暂停，或者更坏的情况，那就是非常卡的游戏体验。
因此，对于游戏引擎这种实时性要求很高的javascript代码，在每一帧中尽量减少创建的对象是减少垃圾回收的一个重要解决方案。
由于大多数看上去没有问题的javascript代码，很可能会产生内存垃圾，而这些代码必须从每一帧都需要运行的代码中移除掉。由于问题代码的隐蔽性，导致通过改善代码质量来减少垃圾回收变得异常困难。
在Construct2引擎的per-tick引擎中，为避免过多的垃圾回收，我们进行了大量的工作，并且取得了可喜的进展。虽然就像图1所示的那样，仍然有一小部分对象创建，迫使Chrome必须每隔几秒钟就进行一次垃圾清理。
虽然每次垃圾清理过程中，都只清理了少数内存，比起大量内存清理引起的大锯齿，这或许并不能引起足够的重视。但是这也是可以接受的，因为小规模的垃圾回收速度更快，并且收集的时间是随机的，用户也不容易觉察到。再说了，避免新的内存分配，确实是一件异常困难的事情哪！
话虽这样说，但是对于第三方插件和特性开发者来说，遵循下面介绍的这些规则和技术，也是非常必要的。因为一个创建了大量垃圾的写的很烂的插件，会使得游戏变得很卡，即使Construct 2主引擎产生的垃圾很少，也经不起这么折腾啊！ 阅读这个条目剩下部分 »
人人网将在4月7日在人人网总部举办《人人前端技术沙龙》活动，届时会有来自谷歌的工程师为大家带来HTML5游戏开发的相关内容和JS相关的讲座和分享，还会有神秘抽奖哦～欢迎大家前来参加。
标签: 评论: 8条
在开发新版音乐盒时，需要用JS实现歌词滚动。我在一期开发的基础上进行了迭代式的开发，又有点类似于敏捷开发。以下根据逐渐完善功能的过程来讲述我是如何开发完成了歌词滚动效果。其中每一步遇到的难点以及错误也会逐一列出。
1.解析歌词
这一步其实很简单，但由于我没有很认真的去分析以及预测，导致在测试时发现了一些Bug，甚至是后果很严重的Bug。比如：
正则表达式不够完善
一开始我只是简单地看了几首歌曲，没有做大量的数据分析，虽然快速地将歌词进行了解析，正则表达式如下：
/\[\d*:\d*\]/g
这样只能匹配格式为“[00:00]”这样的时间戳，后来发现还有格式为“[00:00.00]”或“[00:00:00]”。我们罗列出LRC的所有普遍格式：
[00:00]
[00:00.00]
[00:00:00]
然后就能够写出全面匹配出时间戳的正则表达式了，如下：
/\[\d*:\d*((\.|\:)\d*)*\]/g 阅读这个条目剩下部分 »
