impressjs 与 introjs 的一个初步整合尝试

把 impressjs 和 introjs 做了一个整合尝试,之前就预料可能无法轻易整合成功,果不其然,出来后的效果还是很糟糕,具体见:

//exp.xiaogd.net/demo/tour/impressjs_features_tour.html

虽然存在严重缺陷,不过考虑到尝试做了,还是把它放出来,以后看看能否进一步改进吧。

具体问题一是破坏了 impressjs 的布局,原因初步看来是两者在 transform 属性使用上的冲突,而且看起来不好解决,因为两者都重度依赖这些。

二者在 mask 上也存在问题,比如在遮罩时下面的文字都看不清了。

其它一些问题还有比如快捷键方面的冲突(暂时没有找到规避的方式,双方似乎都没有考虑过这个问题),动态显示的元素无法定位(暂时的解决方式是让其不要隐藏)等等。

可以说,introjs 在“无侵入性”方面还是有待提高。

怎么说好呢,过于 tricky 的东西往往就是这样,它们很精巧,可它们也很容易受到破坏,尤其你把它们弄到一块时,结局往往是互相伤害~

当你采用一些框架时,你的想法是不用重复发明轮子,很快就能得到某些东西。但是一旦整合出现问题,你会发现你马上陷入一种尴尬中,你不得不深入到那些实现的细节中,然后之前节省的功夫又全部赔进去了,而且糟糕的是你可能会发现冲突无法调和或者要费老大的劲才能解决。

最糟糕的结果就是“从入门到放弃”,然后还是不得不重复发明轮子,唯一的好处或许就是到时再造轮子时还有个参考……

intro.js——一个产品特性导航(指南) js 框架

介绍了一个产品特性导航(product features tour) js 框架——intro.js

所谓“产品导航(product tour)”或者说“特性指南”,就是你一开始进入一个网站时,它一步一步(step-by-step)引导你了解网站特性的东西。通常伴随一些全局阴影以及局部高亮的效果以抓住读者的注意力。

如下图所示:

产品特性导航示意图

这种东西也可以在你手机新安装的一些 APP 里看到。在你第一次使用时,它也会弹出来,简要介绍产品的一些特性。

intro.js 则是一个帮助你做到以上效果的 js 框架。更多的了解可以参考它的主页:http://introjs.com/

它的主页本身就是一个 demo,可以点击它的主页上的 demo 按钮来查看整个导航效果。

minifier——一个 nodejs 的 js 及 css 压缩插件

简要介绍了如何通过 minifier 插件来精简压缩 js 和 css 文件。

minifier 是一个 nodejs 下的用于压缩 js 和 css 文件的插件。

首先确保已经安装了 nodejs 的环境,然后通过以下命令安装此插件:

npm install [-g] minifier

之后,如下图所示:假如在 d:\dev\exp\web 下有一些 js 和 css 文件:

那么,假如想压缩那个 hello.js 文件,则通过执行如下 minify 命令:

minify hello.js

则当前文件夹下会默认生成一个叫 hello.min.js 的精简压缩的文件:

压缩之前文件是这样:

[js]/**

  • test minify */ function sayHello(name) { console.log('hello ' + name + '.'); } // hello golden sayHello('golden');[/js]

之后的 min 版本的文件则这样:

[js]/**

  • test minify */ function sayHello(l){console.log("hello "+l+".")}sayHello("golden") [/js]

可以看到,除了开头处的 jsdoc 文件注释保留原样外,其它部分都变得很紧凑了,某些注释也去掉了,甚至一些局部变量名也简化了。

压缩 css 文件过程类似。

如果不喜欢它缺省的文件名,还可以用 --output 选项显式指定压缩后的文件名(还可以包含一个不同的路径):

minify --output my.js hello.js

那么压缩后的文件名则变为 my.js,位置与原文件相同(因为没有额外指定其它路径)。

还可以去到上一级目录上,然后针对整个 web 文件夹执行 minify 命令:

minify web

如此则将整个 web 文件夹下的所有 js 和 css 文件都压缩了,压缩后的文件名还是按缺省的方式,也即是 xxx.min.js 或 xxx.min.css,并放在跟原文件同样的位置。

更多用法可以参考官网的介绍:https://www.npmjs.com/package/minifier

在 ftp 工具 WinScp 中显示 linux 隐藏文件

有时候需要修改 linux 系统上的文件,我一般都是通过 ftp 工具在 Windows 端来完成,因为实在受不了 vi 那种有模式的编辑器的操作习惯。

记得前阵有个新闻说 stackoverflow 已经帮助过 100 万用户退出 vi 了~

但是 ftp 工具缺省不会显示 linux 中的隐藏文件,但有时又需要修改它们,那要怎么调整呢?

以 WinScp 这款工具来说,在菜单中找到“Options(或 Views)--preferences”,在弹出的窗口中选择“Panels—show hidden files”,将复选框勾上,如下图所示:

image

这样就 OK 啦。