什么是抽象及它在重复性管理中的作用
这个精彩的 Flash 展示了从最小的普朗克长度（Planck length）（10^-35 m）到可观测宇宙（Observable Universe）（10^27 m）中的各种物体。
具体链接可见http://htwins.net/scale2/index.html，本文后面也嵌入了一个。有各种语言的版本，浏览器要能支持 Flash，缺省尺度为人的大小，鼠标滚轮前滚或后滚查看更大或更小的尺度的物体，也可以拖动下方的滚动条来缩放，能更精确地控制缩放；点击具体的物体还可以查看更详细的介绍。
<param name="movie" value="http://htwins.net/scale2/c.swf?path=http://htwins.net/scale2/scale2lang_neue.swf?bordercolor=white"> <param name="allowScriptAccess" value="always"> This device does not support Adobe Flash, which the Scale of the Universe 2 requires.[Watch the YouTube video!](http://www.youtube.com/watch?v=uaGEjrADGPA)
之前看过别人用 CSS 的属性 stroke-dasharray 和 stroke-dashoffset 制作的一笔画动画，觉得挺好玩的，也就自己做了个：
//exp.xiaogd.net/hm/demo/css/stroke-animate/stroke-animation.html
总共两个动画，一个是自己的域名 xiaogd.net，另一个是自己的签名，其中 svg 中的 path 提前在 inkscape 中做好，然后复制到网页中即可。
动画的实现感兴趣的同学可以查看网页的源代码了解。
之前曾尝试对 impressjs 和 introjs 进行整合，不过很不幸，整合后存在很多问题。
一个主要的问题是两者都重度使用了 transform 属性，造成很多冲突。最近浏览了一下 introjs 的 github 主页，在它的 issue 页面上，我尝试搜索了一下 transform 相关的 issue，果然有不少相关的帖子在说这个问题。
其中还有一位 fork 了这个项目的人提了一个 PR，说修复了 transform 的冲突，我看了下他的描述，感觉挺符合我目前碰到的情况。
不过他也改动了不少代码，包括 css 方面，原作者暂时也没有接受他的 PR 的合并。
于是去到他 fork 的分支下下载了他那个版本的 introjs 下来，试了下，发现还是有问题，不过原页面至少没有移动了。
不过被遮罩元素的位置还是没有算准确，导致偏离了遮罩框，文字跑到左边去了。另外在发生缩放时位置也还会偏移。
总之还是算有一点点改进吧，以后再看看计算的问题。
另外，原来那些 tip 框中的 button 都是显示英文，也顺便改成了中文；最后还设置了 introjs 中的一个 scrollToElement 属性，也避免了在后面几条 step 中页面发生偏移的情况。
总之也还不算是很好，不过跟之前类似，既然弄了，就先这样了，以后再看看能否进一步改进。具体参见：
什么是抽象及它在重复性管理中的作用
Haskell 语言的设计者之一 Paul Hudak 曾说过一句略带夸张的话(overstatement):
编程中最重要的三件事是: 抽象, 抽象, 抽象.
"abstraction, abstraction, abstraction" are the three most important things in programming.
如果你去问一些资深开发者, 程序员最重要的的能力之一有哪些? 那么"抽象的能力"是绝对能排得上号的.