mootools tag编辑器
by Bentz on April 14, 2010
最近evernote和things用的比较多,对其中tag编辑的体验很有感觉,真是觉得顺滑无比。一路下来,手都几乎不用离开键盘,保证了焦点不会由于其他操作转移,思路也因此得以连贯。重点和连贯性都保证好了,体验自然不差。老八问我,你觉得用了mac之后给你带来的变化大么?我不好说。。只是潜移默化中,确实有点滴改变在发生。
花了一点时间写了这个mootools的tag编辑器,demo ,在编辑时附加了一个简单的auto-compelte,用上下箭或鼠标选择tags。不得不说的是,mootools的事件机制真的是非常强大好用。
一个小玩意
by Bentz on April 7, 2010
最近看的书,大概都是跟信息视觉化和互动有关。书看的多了,却越来越感觉到自己所知之渺小。从原来的圈子跳出来,这世界会有另外一番景象。
这个小玩意是用google earth api做的一个统计数据的mashup,放在了公司门口作门面。老实说这个idea早已不新鲜,但是从自己手中写出来,还是感觉不大一样。尤其是当地球闪着蓝幽幽光芒缓慢转动的时候,似乎这就是极致的美了。

动态载入/删除/更新外部 JavaScript/CSS (转)
by Bentz on January 20, 2010
动态载入 JavaScript/Css 文件
传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在
标签里面进行添加:1 2 3 |
这些文件用这种方式会同步加载到当前这个页面。
现在用动态的方式载入JavaScript/Css文件:
- 用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
- 设置相应的属性
- 使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function loadjscssfile(filename, filetype){<br /> //如果文件类型为 .js ,则创建 script 标签,并设置相应属性<br /> if (filetype=="js"){<br /> var fileref=document.createElement('script');<br /> fileref.setAttribute("type","text/javascript");<br /> fileref.setAttribute("src", filename);<br /> }<br /> //如果文件类型为 .css ,则创建 script 标签,并设置相应属性<br /> else if (filetype=="css"){<br /> var fileref=document.createElement("link");<br /> fileref.setAttribute("rel", "stylesheet");<br /> fileref.setAttribute("type", "text/css");<br /> fileref.setAttribute("href", filename);<br /> }<br /> if (typeof fileref!="undefined")<br /> document.getElementsByTagName("head")[0].appendChild(fileref);<br /> }<br /> //动态添加一个.js 文件<br /> loadjscssfile("myscript.js", "js");<br /> //像添加.js文件一样,动态添加一个.php文件<br /> loadjscssfile("javascript.php", "js");<br /> //动态一个.css文件<br /> loadjscssfile("mystyle.css", "css");<br /> |
为了防止多次载入同一个js/css文件, 添加以下判断(这只是粗略检测)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <br /> //临时载入的文件名</p> <p>var filesadded="";<br /> function checkloadjscssfile(filename, filetype){<br /> if (filesadded.indexOf("["+filename+"]")==-1){<br /> loadjscssfile(filename, filetype);<br /> //把 [filename] 存入 filesadded<br /> filesadded+="["+filename+"]";<br /> }<br /> else{<br /> alert("file already added!");<br /> }</p> <p>//第一次载入<br /> checkloadjscssfile("myscript.js", "js");<br /> //重复载入同一个文件, 失败<br /> checkloadjscssfile("myscript.js", "js");<br /> |
动态删除 JavaScript/Csss 文件
注意:ie6/7 下动态删除样式时有bug. 2种解决方案:1.样式表里不要有import的样式表 2.把link的type属性设置为空值, 然后再修改 href 的地, 或者直接设置href为空, 最后再把type值设置成”text/css” 强制让ie解释新的样式表。
- 取得相应的 DOM 元素
- 根据 文件名&文件类型 定位元素
- 用 DOM removeChild 删除一个 “script” 或者 ”link” 元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <br /> function removejscssfile(filename, filetype){<br /> //判断文件类型<br /> var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";<br /> //判断文件名<br /> var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";<br /> var allsuspects=document.getElementsByTagName(targetelement);<br /> //遍历元素, 并删除匹配的元素<br /> for (var i=allsuspects.length; i>=0; i--){<br /> if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)<br /> allsuspects[i].parentNode.removeChild(allsuspects[i]);<br /> }<br /> }</p> <p>removejscssfile("somescript.js", "js");<br /> removejscssfile("somestyle.css", "css");<br /> |
动态更新 JavaScript/Csss 文件
- 使用 createElement 创建 要更新的 JavaScript/Css 元素
- 查找要被替换的元素
- 用 replaceChild 替换元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <br /> function createjscssfile(filename, filetype){<br /> if (filetype=="js"){ //if filename is a external JavaScript file<br /> var fileref=document.createElement('script')<br /> fileref.setAttribute("type","text/javascript")<br /> fileref.setAttribute("src", filename)<br /> }<br /> else if (filetype=="css"){ //if filename is an external CSS file<br /> var fileref=document.createElement("link")<br /> fileref.setAttribute("rel", "stylesheet")<br /> fileref.setAttribute("type", "text/css")<br /> fileref.setAttribute("href", filename)<br /> }<br /> return fileref<br /> }</p> <p>function replacejscssfile(oldfilename, newfilename, filetype){<br /> var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none";<br /> var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none";<br /> var allsuspects=document.getElementsByTagName(targetelement);<br /> for (var i=allsuspects.length; i>=0; i--){<br /> if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){<br /> var newelement=createjscssfile(newfilename, filetype);<br /> allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]);<br /> }<br /> }<br /> }<br /> //用 "newscript.js" 替换 "oldscript.js"<br /> replacejscssfile("oldscript.js", "newscript.js", "js");<br /> //用 "newscript.css" 替换 "oldscript.css"<br /> replacejscssfile("oldstyle.css", "newstyle", "css");<br /> |
Espresso 升级拉!
by Bentz on December 15, 2009
Espresso,mac下强大的web开发IDE,最近升级到1.1,增加了不少新功能。
试过不少编辑器,最终还是选择了espresso来写页面,因为他最像神器textmate。类似textmate一般干净的界面和主题,不断增加中的sugar(扩展),完美支持中文,更能导入textmate的bundle为我所用!这些优点和轻量的感觉,使得写页面这种枯燥的事情也变得鲜活乐趣起来。
这次增加的功能不少是重要更新,类似”Find in Project”,”Image Preview”,”Open with”,都使得工作流更加集成。
在一个界面端完成所有要紧事,这恐怕是你我这样的懒人最期望的事情。
Zen Coding,透过css生成html
by Bentz on December 15, 2009
是不是觉得每天都敲同样的html代码有点麻木?ok,那就让css代我们生成优雅的代码和排版吧。让我们专心做其他更重要的事。
这就是Zen Coding所能做的。Zen Coding是一套快速编写html/css的工具,语法简单至极,实现的效果却有点惊人。利用css的书写规则来创建html,想像一下这有多便利吧,尤其是列表、小模块,这简直太棒了!
演示视频
简单的例子
1 | div#content>h1+p |
上面这一行的输出结果
1 2 3 4 | <div id="content"> <h1></h1> <p></p> </div> |
更多语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | * E Element name (div, p); * E#id Element with identifier (div#content, p#intro, span#error); * E.class Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width; * E>N Child element (div>p, div#footer>p>span); * E+N Sibling element (h1+p, div#header+div#content+div#footer); * E*N Element multiplication (ul#nav>li*5>a); * E$*N Item numbering (ul#nav>li.item-$*5); |
上手很简单,多看几个例子就ok,或者在demo尝试一下,online demo。
Zen Coding支持的IDE众多,包括textmate和espresso,可以作为插件安装到我们最熟悉的IDE上。Ok, let’s speed up!
Data URIs for CSS Images tests
by Bentz on December 15, 2009
用Data URIs来嵌入image的好处是能减少连接数,更少的连接数意味着更快的访问速度,和更低的服务器负载。
Rob Flaherty作了一个 Data URIs for css images的测试,将一个页面做成三个版本,分别对比他们的加载情况:
- 页面a:默认页面,1 css 1 js 31 images, 33 requests
- 页面b:css images作data URIs嵌入到css中,3 requests
- 页面c:css images作data URIs嵌入到另一个css中,放到页尾, 6 requests
结论:如预期般的,加载时间c<b<a,但是效果并不明显, 具体情况见这里
about lab
by Bentz on December 12, 2009
把平常捣鼓的一些小玩意放在了lab中,经常更新。
经验很大程度上就是代码量的堆砌,轮子造出来了稍微修剪下就能应用,在细节上没有必要纠缠太多,快速实现,频繁迭代,不要让时间拖累了自己。
js tips
by Bentz on December 7, 2009
超长换行的字符串
在换行的地方加\
1 2 3 4 5 6 7 | var table = '<div class="table-form">\ <table>\ <tr>\ <td ><input type="button" value="关闭"></td>\ </tr>\ </table>\ </div>'; |
mootools bundle for textmate
by Bentz on November 3, 2009
工欲善其事,必先利其器。textmate不愧为最强大的编辑器,各式的bundle不仅好玩,新奇,更重要的是使用,用好bundle的感觉就像武功高手打出一整套组合拳般淋漓畅快,华丽但又拳拳到肉。
mootools的bundle是在git上搜到的,作者Thomas Aylott貌似就是mootools开发者之一。。。他的git中还有一个非常好用的js bundle,相对textmate自带的bundle来说多了挺多实用的功能。
安装:
1 2 | cd ~/Library/Application\ Support/TextMate/Bundles git clone git://github.com/subtleGradient/MooTools.tmBundle.git |
然后show bundle editor,成功安装~
使用时注意将语言切换到MooTools Javascript

Google Wave
by Bentz on October 24, 2009
要不是收到申请通过的信件,我都快忘记这茬了。。如果你还不了解google wave请看介绍
google这个受邀才能体验的机制做的狠抓人心,记得gmail出来时也是如此,最开始一个帐号能炒到上千美刀。。不过现在泛滥的可以不值钱鸟~
还有数个邀请,想要的朋友留言,我尽力发放