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早已不新鲜，但是从自己手中写出来，还是感觉不大一样。尤其是当地球闪着蓝幽幽光芒缓慢转动的时候，似乎这就是极致的美了。

shopex_eyes

动态载入/删除/更新外部 JavaScript/CSS (转)

by Bentz on January 20, 2010

动态载入 JavaScript/Css 文件

传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在标签里面进行添加:

1
2
3
<br />
      <script src="myscript.js" type="text/javascript"></script></p>
<link href="main.css" type="text/css" rel="stylesheet" />

这些文件用这种方式会同步加载到当前这个页面。

现在用动态的方式载入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&gt;N
Child element (div&gt;p, div#footer&gt;p&gt;span);
* E+N
Sibling element (h1+p, div#header+div#content+div#footer);
* E*N
Element multiplication (ul#nav&gt;li*5&gt;a);
* E$*N
Item numbering (ul#nav&gt;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

屏幕快照 2009-11-03 上午11.44.26

Google Wave

by Bentz on October 24, 2009

要不是收到申请通过的信件，我都快忘记这茬了。。如果你还不了解google wave请看介绍

google这个受邀才能体验的机制做的狠抓人心，记得gmail出来时也是如此，最开始一个帐号能炒到上千美刀。。不过现在泛滥的可以不值钱鸟~

还有数个邀请，想要的朋友留言，我尽力发放 :)