Tilt 是一个将页面按照文档树的结构3D化的Firefox插件。它基于WebGL,看起来非常的酷,今年七月当 tilt发布第一个alpha版 的时候,我就被它惊艳的效果吸引了。时隔3月之后,这个插件发布了新的更新,同时Mozilla也发了篇新文章 Debugging and editing webpages in 3D。
PNG的压缩和优化
有关PNG的压缩和优化的主题其实也算是前端相当常见的部分,只是当前端把大把大把的时间和精力放在代码上面的时候,往往总是忽视对于图片的很多效果立竿见影的优化,而之所以这里主要说的是PNG,是因为相比JPG和GIF,PNG有更多压缩的空间。
写此文的契机是前端时间正好回顾了一篇 sitepoint 上的老文,《PNG8 – The Clear Winner》,主要讲述如何使用fireworks创建和利用PNG8的半透明,并兼容老浏览器如IE6-。虽然这篇文章和本文并没有任何关系,却让我回想起一些渐渐被遗忘的知识,作为一个coder的不断coding中渐渐忽视的问题——PNG压缩。
压缩过程毫无技术性,使用诸如 PngOptimizer 或者 PNGOUT 等工具可以轻而易举地将Photoshop、Fireworks生成的PNG图像继续缩小。我几乎总是使用 PNGOUT,原因是使用过各种工具比较得出的结论——PNGOUT生成的文件几乎总是最小的。所以之后的讨论也是以PNGOUT作为基准的。
字符当先: HTML Entity
相信每个对性能有追求的前端,都潜在是一个字符控。对于形形色色的指示性图样总琢磨着以字符解决,诸如常见的左右箭头,引导阅读的双向指针,或者还可能是下拉菜单的一个向下的三角箭头…这些做法可能看起来有些极端和没有必要,但即使如此,这里面多少也透着极客的味道。
我是一个非常彻底的字符爱好者,能用字符、样式的,坚决不使用图片。很多时候,对内容的图片尺寸往往大手大脚,压缩的时候总是一再放宽,但是对于装饰性、引导性的图标等却异常吝啬。即使是自己的博客,主题也是纯CSS没有半张图片——RSS是CSS3绘制,IE7以下根本就不会出现;tab导航时box-shadow绘制,IE8以下全部都显示纯色;搜索按钮也是CSS定义,想必IE下会是相当丑陋…没有图片这一点其实并不能带来什么性能上的提升,这恐怕只是一种折腾的精神:-)
我们在哪里找到我们想要的字符?或者说,我们应该在哪里参考我们想要的字符?我给出我一般会去的地方:
流行的JavaScript绘图库
这里聚合了我了解的JS绘图库——特别是图表库,在很多应用方面已经显得非常成熟。现代浏览器都能很好的支持,对于IE9以下它们多半都是用ExCanvas模拟实现。尽管对于绘图和图表,Flash仍然是当前最为理想和流行的方案,不过相信未来,canvas会成为主流。
CSS3代码生成器
CSS代码工具界从来没有像现在这么繁荣——随着CSS3的渐渐流行,复杂样式的编写迫切需要有代码的生成工具简化编写的难度和节约时间。于是各种各样的工具在一年间到处开花,现在多到需要自己挑选的地步。本文虽然写的是我自己常用的生成器,但在文中链接里还能找到更多。这些工具不仅帮助我们节省无意义时间的小号,而且对于CSS3新手来说,通过生成器有针对性的学习新属性也不失为一种捷径。
My Software List
前段时间,论坛一个投票帖子,问一个前端,如果给出一台新的电脑,你能用多久准备好各种环境?结果现在是选择半天的人占了大多数。需要多少时间和环境的复杂度有很大关系,我自己的环境估计没有一天是不行的,这还没算上各种虚拟机的情况。如果不算各种软件的下载时间,我也至少需要大半天时间。帖子的楼主列举了一些列他常用的前端软件,后来想了一想,自己也应该准备一份清单,在系统重装或者崩溃的时候迅速恢复到正常的工作和日常…对,日常需要的也应该列入在内。
网站分析工具woorank
陶笛曲谱制作工具
这几天吹陶笛越来越有感觉了,不只仅仅是《故乡的原风景》,《天空之城》现在也已经有模有样。然后依着这种势头,曲谱就成了大问题。作为一个前端能做点什么呢?我相信如果有一个工具,把容易找到的歌曲简谱转换成对应的陶笛曲谱,会很大程度上方便初学者的吹奏。毕竟像我这样的完全不通音律的陶笛爱好者应该不在少数。有了这么个想法,就开始动手了~
先从简单的做起,虽然我真的不通音律,但是有好好看了一下基础的东西:) 一开始打算是用php干的,不过后来觉得js干起来更麻利些。首先实现的是AC调十二孔陶笛的基本指法,也就是全按作do的指法,也就是从低音6到高音4的音域范围。第一个版本也没考虑升降调。掐指一算,一共13个音。然后就是漫长的绘制过程了T_T~因为画的很仔细,相对花时间。
Image Lazy Loading
延迟加载 Lazy Loading 是一种设计模式,和预加载 Preloading 相反,最简单的说法就是“按需加载”。如果用在网页里,最多的就是图片的延迟加载。对于一张自上而下的充满图片的页面,尤其是图片列表形式,Lazy Loading的效果会非常的明显,能大幅提高加载速度和体验。大概是近期发觉自己博客里的图片日益变多,所以就打算赶下流行(似乎很大一部分博客都有使用),也简单做一下图片延迟加载。
虽然大部分的框架和插件都提供类似功能,但是代码原理也大都是类似——获取视点即viewpoint的高宽、图片的位置以及当前浏览页面部分的位置,由此判断图片是否在我们的浏览范围之内,如果是则加载它。但在具体做的时候也有很多差异,保存原来图片的src、移除src、判断是否加载、移除已经加载的事件或者数组元素等等,这些通常都有。以JQuery插件LAZY LOAD为例,它就是用增加的original属性保存原来图片的src,然后再按需加载它们。
新的wordpress主题
自从尝试做了swordis主题之后,对wordpress的主题也有所认识。于是决定做一个自己的主题。并且这次和上次不同,是很认真地要做完的。名字还没有想好,但是目标很明确:
- 没有图片的纯CSS主题。意味着线条和空间是首要设计元素。
- 必须过XHTML1.1以及CSS3验证。CSS3阴影和变换等,由于有前缀,所以即使使用也会暂时注释掉。
- 通过主题单元测试( Theme Unit Test )。这是一组严酷的内容兼容性检测。
- 流体布局。右边栏,因为我调查下来,比起侧边栏在左面,似乎更多人习惯在右面。
- 弹性em值。
- 兼容所有主流浏览器,包括IE6在内。
- 以及良好的可访问性和自适应性。
这些天从睁开眼睛开始我就在思考怎么把这个新的主题写好。主要考虑的是线条和颜色的虚实,实际上和篆刻类似,如何把自己其他方面的知识应用进去,就是这次的主要问题。
最大的挑战应该还是来自IE6的,因为这次不能写违规的hack,也不能用IE的私有属性。其实早该如此,IE6虽然仍旧苟延残喘,但是终究会被历史的洪流冲走的,我坚信这IE8成为下一个IE6的时代的来临。
前端工作类似一道工艺,相同的设计,工艺不同,价值也会天差地远。
上次试作的主题,设计用了半天,HTML化也是半天,总共才一天时间,加上才第一次做主题,自然漏洞百出。虽然大的问题暂时也没有,但是代码级别差距很大。这次截然不同,纯CSS,没有设计直接写,但是style.css我已经写了2天有余,到现在也仅仅只是有一个框架。期间数易其稿,多次改动整个布局。
现在就是主题单元测试的内容,相当周到。有多层次的页面,有混合布局、超长、超短、甚至是无标题或者无内容的文章,也有超多分类、标签的极限测试,还有何种视频嵌入,总之是应有尽有。