走走停停看看

不少人都已经在用CSS3中的动画了，
但很多仅仅用在 某个元素的 hover上
其实，配合脚本的话，可以做到更多的动画效果，
并且可以在很大程度上抛弃各种动画库。

先前一博客《用HTML5代替PPT》中，
我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。
点击查看展示

我在最开始设置了CSS

也就是设置了所有动画效果的持续时间为150毫秒，以及动画效果的样式为ease-out。

关于时间

根据我自己亲身实践，我能接受的动画效果时间是在150毫秒附近，
再短觉得一闪而过，再长我就觉得拖沓冗余。
这个150毫秒仅仅是经验参数，没有任何科学依据
仅供各位参考。

但是这个也有例外，比如例子中幻灯片的翻页过程，
由于幻灯片比较大，翻页过程如果时间太短，效果也不好
所以对于这种几乎整个页面变化的情况，我设置了动画时长为300毫秒
比通常的翻了一倍。甚至到400毫秒也没觉得冗长。

所以一般对于面积较小的元素，动画效果维持在150毫秒左右
面积较大的动画，适当延长时间。

关于效果

动画效果我个人最喜欢ease-out，最不拖沓，有动感。
其他效果看着总觉得恶心。
比如linear看起来就很死板，而ease-in又感觉不伦不类。

关于是否使用*选择器

这个我已经另写博客阐述观点 真的还需要reset.css么？

关于动画

这是针对所有元素的任何的CSS变动都会产生动画，
包括背景色，边框色，宽度高度，内外边距的变化等等等等。
实际上光颜色的动画改变就已经比jQuery默认效果强了，
jQuery如果要实现颜色动画需要附加一个插件 jQuery Color

脚本产生动画

不仅仅是hover伪类其效果，
任何通过脚本改变元素的CSS参数都会产生动画。

为此，我在页面脚本一开始就加入

这段代码的作用就是通过地址栏的hash，来改变幻灯片的页数。
你可以尝试访问这个页面，注意地址最后的hash部分：
http://shawphy.github.com/share/2010/presentation.html#slide-2
这个地址会直接把你带到第2页。

可以看到，代码中仅仅是设置了元素CSS的margin-top值，本身并没有动画
而由于先前的CSS设置，通过js改变margin-top值也会有动画效果
这种原生动画效果我不确定是不是会比js产生的效率高
我个人感觉在Firefox 4下动画效果很不流畅，但Chrome 下很流畅。

因此一定程度上，未来可以放弃脚本库中的动画了。
或者，甚至脚本库中也会运动CSS动画来实现功能。

参考文献

你需要知道的CSS3 动画技术

我博客浏览量靠前的一直是《打造自己的reset.css》，
然而，我对此的观点也已经有所改变，
所以，我觉得是时候写一篇博客阐述一下目前我的理解了。
注意，这是篇激进的博文，其观点并不客观中立，仅仅表示出我目前的想法。

是否使用*{margin:0;padding:0}

实际上，我现在根本不避讳*{margin:0;padding:0}这种写法了。
我从未看到过真正有关于这个对性能有影响的报告
也不觉得下面Eric的重置样式比起这玩意有多高明之处

上面的代码波及面一样很大，难道就不造成性能问题了？
到写具体元素样式代码的时候就不会因此受到reset.css的影响了？
扯淡！
现在回过头来看去年3月写的那篇博客《打造自己的reset.css》，
觉得有些想法是人云亦云，有些想法过于幼稚了。
另外找到了一篇博文支持我这种看法，可以看看
关于CSS RESET，关于*{margin:0;padding:0}

其他表现不同的元素

除此padding和margin之外，如果一个元素在不同浏览器内表现显著不同，
那何不直接在用到的那个页面写css呢？
何必为了少数元素的表现，写到全局的reset中呢？
实际上随着IE6的逐渐老去，这种差异已经越来越小了
而我们关心的依然是主流浏览器，IE6，IE7和IE8，这3个是绝对主流，
以及我们自己会用的Firefox和Chrome或者其他
那么只要这几个主流浏览器测试下来没问题，就没问题了，
有必要花成本关心其他更小众的浏览器么？

另外，我们实际中也很少对页面设计需要对任何元素精确到像素级的还原，
只要整体表现得当，个别元素的出格（更多的是跟操作系统有关）无伤大雅。
实际上我就没看到有人非得把表单按钮重置到让mac系统下的样子跟win下一样。

原汁原味的元素

很多元素浏览器默认样式就都一样（至少大致差不离），并且都很不错
比如 ins 和 del 这种，还有 strong 以及 em 这类。
默认样式不好么？如果到头来也不过就是让strong变成粗体，em变成斜体
那还不如不要重置呢。
如果有自己的想法呢，希望全局都一样呢？不如写 global.css 吧！

reset.css VS global.css

是的，很多网站都要追求全局的一些样式的统一，
为此要用reset.css重置一下，然后再用global.css来定义全局样式。
那我说，为何不直接用global.css取代reset.css的功能？
一样要定义，何不一步到位？
先重置，再定义，难道是带宽富余的没处用了？

举例来说，上面提到的 strong 和 em 元素。
如果希望全局都是加粗的斜体的，个别地方有其他样式，那自然无需重置样式
而如果全局都不要加粗斜体，有统一特殊的强调样式，那简单，直接在global.css里写就好了。
如果全局都不要加粗斜体，但不同地方有不同样式，那也简单，
在global.css写入重置样式，都变成正常字体即可，这就是取代了reset.css的功能了。

于是乎，目前我的观点是：reset.css这种先重置再定义的模式可以放弃了，一步到位，根据不同网站的特点编写不同的global.css，效果会更好。
所以，我很支持 No CSS Reset

如果你是前端，如果你要分享。
是不是觉得PPT很难用？
是不是觉得用PPT很不能体现你的身份价值？

本人虽然不是全职前端，但也算半个前端，
也有这样的想法，最近就自己弄了一个。

实现了如下功能：
空格翻页（展示的时候空格是最容易按，也最不容易按错、多按，虚按的。）
滚轮翻页（分享给网上朋友的时候，滚轮才是最方便的）
目录（因为我课件展示的屏幕是宽屏，太长，所以边上留有目录）
点击目录可以跳转（同样是给网上看网页的朋友准备的）
页数（展示时候用）
点开带hash的url可以直接跳转到某一页（便于分享特定页）

尚未实现的功能和bug：
自适应用户分辨率
一页之内逐步显示内容
当前页在目录上高亮
目录暂时有点顺序问题，待解决。

由于我的这个展示屏幕比较大，1920×1080的，所以一般访问请用 ctrl + – 来缩小网页。
Chrome下缩小后有bug，Chrome的问题，Firefox下一切正常。
而Chrome下动画效果比较好，Firefox下有点卡。
推荐用这两个浏览器查看： 展示页面

制作的时候正巧玉伯分享了他的分享，
这个是源自于 google 推广的 HTML5Rocks(需翻墙，项目地址不需要翻墙)
我也借势参考了一些想法，比如url的hash定位，以及部分CSS写法。
当然，我自认为应该比那个好看一点吧，呵呵。
(后来我想想，这个风格应该是潜意识中受到了Flex的影响吧)

今天晚上没事，花了两三个小时时间写了一个基于 SQLite 的短网址工具。
有这个想法很久了，之前网上找的一堆短网址工具基本都要求mysql，
而我又很不喜欢mysql，动用mysql很麻烦，总是要建账号之类的。
所以就自己写了一个基于SQLite的，想必会有一些朋友更我一样喜欢的东西吧。。

完成了核心内容，美化什么的懒得弄了。自己用用不管漂亮与否了。
这一刻我完全不是做前端~
SQL防注入什么的也懒得弄，大家随意就好。
可以缩短网址，可以列出缩短的网址有哪些，还可以通过书签栏缩短网址。
简单的统计访问人数等。

项目我放在bitbucket上，点击查看SQLito
可以直接下载最新镜像 SQLito

这个需要服务器支持sqlite3，第一使用的时候会提示创建数据库。
所有文件扔到服务器上后，可以先修改config.php文件，不改也没关系
可以改动的是路径，如果自动获得的路径不对的话，就自己填一个，要以/结尾。
还有就是数据库名，也可以自己改。

然后修改.htaccess文件，增加下面的规则。
或者直接用附带的.htacess即可。

RewriteEngine On
RewriteRule ^([0-9a-z]+\-?)$ ?q=$1 [L]

之后就可以通过 add.php 来缩短地址
add.php 里边还有一个可以拖到书签栏的小工具，平时我就用他啦。

如果你不想让人使用缩短功能，那就自己改一下add.php文件好了。

通过 list.php 来查看有哪些被缩短过（现在我翻页都还没做呢~）
点击时间可以查看详细信息。

另外，在短地址后面加上一个减号可以预览地址。

测试地址： http://g.shawphy.com/
这个地址有效期至 2010-8-31
仅供测试，由于测试阶段，所以数据库会时不时的清空掉的，请勿用于正式的缩短网址工具之用。

P.S. PHP的函数太TM丰富了，base_convert函数非常好用。我用它实现10进制到36进制转换。

修复编码问题，如果最开头不是以http|https|ftp开头则自动加上http。

新增了查看详细详细统计信息，新增附加减号可以预览地址的功能。

我使用的是PuTTY客户端，所以这里介绍PuTTY的设置。

首先下载工具，访问PuTTY的下载页面，下载PuTTY和PuTTYgen这两个工具。
如果你使用TortoiseGit的话，其bin目录中已经有这个工具了，可以直接使用。

打开后会出现如图所示:

点击其中的Generate，然后按照文字提示，
在空白处随机移动鼠标以生成随机数（真是天才的想法）。

生成后如图所示：

随后的Key comment一栏爱改不改，我简单改了一下。
然后点 Save private key 按钮保存密钥，他会问你是否不设置密码短语保护私钥，
点yes，就可以了。我保存到了D:\id_rsa.ppk

接下来需要通过普通的SSH方法登陆你的服务器，
把 Public key for pasting into OpenSSH authorized_keys file 栏中的内容
放到 ~/.ssh/authorized_keys 文件中
据说设置权限比较好： chmod 600 authorized_keys

接下来是设置PuTTY。先填好Host Name，我这里设置了shawphy.com

然后到Connection -> Data 里的 Auto-login username 填好你的用户名，我的是shawphyc

接着到Connection->SSH->Auth 中的 Private key file for authentication ，选择你刚才保存的那个ppk文件。

最后回到最上面的Session在下面的Saved Sessions里输入名字后，点Save就可以了。

以后每次双击这个就能登陆了。

最后，附加一个小功能，Connection->SSH->Tunnels中，填个端口号，比如7070，下面选择Dynamic，然后Add之后，就可以那啥了。

今天收到读者来信，询问如何选择如下的元素
<div class=”good list Card”></div>
这里有个特征，就是需要选择同时带有这几个class的元素。
或者也被误认为选择一个带有空格的class。

经过测试，使用选择特殊的转义符号来做

$(“.good\\ list\\ Card”)

这个只有IE6下能成功。(我仅测试了IE6，Firefox 3.6.8和Chrome 6 dev)
推测原因是因为先进的浏览器中jQuery是直接调用getElementsByClassName，
而这个浏览器方法是不支持带空格的class的，他会认为是多个class。
而IE6之所以成功，是因为本身就不支持getElementsByClassName，
所以jQuery内部是遍历了所有元素，
得到class属性值是“good list Card”的元素。

解决方案有两种：
逐个过滤，先找到带有good的元素，
然后从中筛选出带有list的元素，最后筛选出带有Card的元素：

$(“.good”).filter(“.list”).filter(“.Card”)

或者让先进的浏览器也跟IE6一样，直接通过属性选择器：

$(“[class='good list Card']“)

测试了一下性能，根据多class测试显示，后者的性能显著的好于前者。
因此推荐使用后者，不论从易读性还是性能上都高于前者。但Cloudream在评论中指出，后者的问题是class的顺序不能变。
附：
要选择其他带有特殊字符元素，参考用jQuery 选择器选取包含特殊字符的元素

经Cloudream提醒，直接用 $(“.good.list.Card”) 即可。
测试下来，除了IE6中，其余两个浏览器中这种方法都小胜第二种方法。

略据有规模的网站都会有合并js/css文件的需求。
这里推荐PPTV同学做的一个合并js和css文件的方案：Merpressor。
项目代码托管在google code。

Merpressor的作用很简单，如果你本地开发的时候有一堆js文件，比如
yui.js
selector.js
dom.js
user.js
my.js
….

然后最终自动合并成一个你想要的文件，比如test.js

页面中只需要引入这个test.js就可以了。
本地为了方便调试，test.js里通过document.write来引入其他js文件，
而远端服务器上则直接就是合并压缩后的单个文件了。

我看下来感觉还不错。只是觉得服务器端必须部署java服务器有点要求比较高。
对于有分布式版本控制工具，如hg/git等，在本地测试完成后push到服务器端，
并让服务器端执行一个hook程序，pull 并 update 后执行压缩，这样对系统的部署要求可以低一些。
不过对本身版本控制工具的要求就会高一点了。所谓各有优势。