caf批量转wav的script (Mac OS only)
这个script名字就叫caf2wav吧。。。(v^ー°)♪♪
使用方法:
下载压缩包解压后有两个文件 wav2caf.rb 和 caf2wav.rb，丢到需要转换格式的音乐目录，直接运行就可以了，前者是将当前目录所有的wav转成caf，后者是反过来
使用条件:
因为用到了mac os的afconvert命令，所以windows用不了
下载地址：
[这里]
Caf播放器 (caf player v1.0)
现在貌似除了apple自家的QuickTime，其他播放器对caf格式的音频文件都不怎么支持，偏偏QuickTime又很龌蹉，连个播放列表都没，要听多个caf音乐的时候简直是个折磨。
google了一下无果，决定折腾一个出来凑合用用。
这个是用HTML5的File API配合firefox的QuickTime插件实现的，使用方法很简单：
1. 打开 http://lab.ceilwoo.com/caf_player/caf_player.html (只支持Firefox, 其他浏览器有空再说)
2. 然后把你本地的caf音频文件拖拽到播放器右上角那个dropbox区域(支持多选)，松开后就会在下方插入一个所拖放文件的列表，点击其中一个音乐就可以播放了。
3. 点音乐右边的X可以把该音乐从播放列表删除
使用条件：
1.Firefox
2.安装了QuickTime
实现原理：
其实是现在盛行的html5拖拽上传功能的一部分，拖放的时候可以用window.URL.createObjectURL()获取到文件的地址，然后赋值给页面上的QuickTime embed播放。
mozilla的doc有详细介绍这种拖拽文件的方法。
另外获取到的文件地址是 moz-filedata:38c69692-XXX 这样的一种的格式，可以直接当url来使用(譬如是图片的话把img的src改成这个就可以在页面显示出来的)
估计是出于安全因素而不直接显示 “file:///c:/” 这样的明文路径。
PS: 虽然说是caf play，其实wav mp3等都是可以拖进去放的。
PS: 随机播放、顺序播放、播放列表等这些花哨的功能等寡人哪天心情好再加上去，啊哈哈哈
分享一下我做iPhone图标设计时使用的辅助工具
分享一下我做iPhone图标设计时使用的辅助工具 Icon Previewer
因为图片在iPhone/iPad的显示效果与PC机相比经常会有一些差异(颜色、大小)，所以图标设计完后习惯上我都会放到真机上看看效果，再对比一下做做修改。刚开始的时候每次修改图标都要build一次项目，然后是一次又一次的漫长等待。。。于是便诞生了这个在iPhone上快速预览图标的东西。
介绍一下Icon Previewer的结构：
iconpv
-Icon.png
-Icon@2x.png
-main-bg@2x.png
-index.html
下载地址在这里 或 这里
使用时请自行替换icon.png和icon@2x.png成你的项目图标，默认Size与iPhone App的图标一直，分别是57×57和114×114
然后在iPhone上打开index.html，怎么打开？up到自己的服务器或者自己架一个，然后在safari输入你的server地址…
Safari默认的上下两根导航条很影响预览的效果，如果你不想看见他们的话(譬如我…)需要点一下下边的收藏按钮，选择添加至主屏幕
然后iPhone上就会多了个名为Icon PV的图标，点击打开它后就是这个样子
Safari的两根menu栏就不见啦，点一下右上角绿色的preview按钮就可以看到最终效果了
界面上My App的位置就是你刚才替换掉的Icon@2x.png，每次修改好图标后点击上边的Refresh按钮就可以预览新图标了。
PS:预览的是Retina的效果，iPhone4以下的版本还没测试，有bug或效果不佳的话请反馈给我
PS2:我想做成online版的previewer，这样使用时就省去了架服务器的麻烦，不过后台的东西我不太熟悉，如果有PHPer觉得这工具有用并且有兴趣开发online版的话请联系我 ceilwoo#gmail.com
Icon Previewer provide an easy way to preview icons on the iPhone，it’s base on HTML & CSS.
Download Demo
How to use:
1. upload the folder to your server
2. replace the Icon.png and Icon@2x.png as your project icon.
3. open icon previewer like http://xxxx/iconpv in the mobile safari.
4. tap the fav button and save to home screen.
5. tap the webapp “Icon PV” on the iPhone to preview your icon.
I want to develop an online version, then ppl can drag their icons to “Icon PV” and preview on the iphone/ipad at once, but im not good at the backend language, if u are a PHPer, and interest on “Icon PV” online version, contact me plz [ceilwoo#gmail.com], im eager for ur help T-T.
HTML 5 备忘录
由Techking整理的html5 cheatsheet(我翻译成备忘录了)，list和介绍了html5中所有的标签、事件、属性以及desktop & mobile浏览器的支持情况，《CSS权威指南》的浓缩版。
顺手纠正一下，Internet上好多介绍HTML5很炫很酷的动画效果的东西，其实那些绝大多数是CSS3和Javascript的事情，顶多就跟<canvas>有点关系，HTML还没发展到干这些事情的程度。
最受益于HTML5的是其实开发人员。相信投奔HTML5行列的人很快就会迷上新增的各种标签 header footer section detail…etc。下边截图是nekoq.com重构后的代码。
在HTML5中div的使用率降低了很多，现在可以用header去表示一个页面或是一个模块的头部，用article表示一篇文章，相比在过去的很长的一段时间里你要重复写着很多<div id=”xxx”>这样的东西，层次稍微复杂点的代码块末尾就有一堆的</div>、</tr>、</table>，多人协作开发时还经常遇上少标签，没对齐各种烦人问题。而多元化的标签能很好的降低这些烦恼，so..不要犹豫啦，赶快加入HTML5行列吧。
另外悲剧的IE直到IE9才开始支持部分新增的标签，要兼容过去的版本可以在header加上HTML5 IE enabling script:
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Emoji Input [for Twitter,Sina,QQ微博] – (4/29)更新
Emoji Input v1.01 [for Twitter,Sina,QQ微博]
About:
为了提高同学们输入绮罗星手势的速度（<ゝω・）~☆，所以就产生了这个插件，当然还有其他的表情。。。
How to:
Click “^o^” button to open an Emoji Input Selector.
点击 “^o^” 按钮展开Emoji Input的窗口，click喜欢的颜文字表情就可以立刻插入到tweet、微博的输入框中。
Support:
Twitter
新浪微博
扣扣微博
Tested:
FireFox 4.0
Chrome 10.0
下载 [ Firefox下需安装 GreasMonkey插件 ]
反馈
更新日志:
v 1.02
- 针对twitter的html结构改变作了相应的修改
v 1.01
- 添加支持qq、新浪微博
PS:之前的下载的twitter Ascii Emoji可以del了 0.0
Ruby写简单的msn bot
原来有个msn的lib，貌似最近用不了了，那么就从xmpp下手吧
首先找一个jabber server 注册个帐号，例如thiessen.im
(如果用psi的话add ac的时候有很多可选的)
然后在Service Discover把MSN transpot加上 ，那么登录jabber server的时候就自动登录MSN了
require ‘rubygems’
require ‘xmpp4r-simple’# Online status
msg_history = “none”jabber = Jabber::Simple.new ‘YOUR_JABBER_ID’,'YOUR_JABBER_PSW’
jabber.status(nil,”Working!”)#Ctrl+C Disconnect
Signal.trap(“INT”) {
jabber.disconnect
puts “### MSN-BOT logout”
exit
}# welcome message
msg_welcome = “Hi, this is alice. Ceil is busy and no time to reply you.”loop do
jabber.received_messages do |msg|
puts “- #{msg.from}”
puts “#{msg.body}”
jabber.deliver(msg.from, msg_welcome)
end
end
还是Terminal msn舒服，占资源少不说，挂机啥的都很方便 {:c2:}
windows下启用safari的debug mode
由于windows的Safari可以模拟成 mobile safari，而且有强大的debug模式(还是觉得没firebug好用=v=)，实在是居家旅行、调试iPhone(iPad) web app的首选。
但是最近升级到5.01的时候发现熟悉的develop菜单居然不见了….
详情不大清楚，表面现象就是apple把那可爱的菜单给隐藏了，所幸还可以通过修改plist的方法把它弄出来。
方法如下：
windows: 到 C:\Program Files\Safari\Safari.resources 目录，在 Defaults.plist 文件上加上
<key>IncludeDebugMenu</key>
<true/>
重启safari后就可以看见传说中可爱的develop菜单了
mac的话就是 %APPDATA%\Apple Computer\Safari\Preferences.plist
Custom width button with CSS
————————————————
可以用border-image来实现，这个方法不用了
5/9/2011@ceil
———————————————–
今天有人质疑我能否用一张简单的图片实现自定义长度的button with Html&CSS
这个对于万能的CSS来说怎么可能会实现不了呢
所以就做了这个demo
demo地址在：http://www.ceilwoo.com/lab/custom-width-button/
简单的说就是用一张图片实现button的左、中(拉伸)、右部分
左和右用定width + 背景实现
中间需要拉伸的部分把img拉长，隐去左边和右边部分就实现了
优点就是切图方便很多，只要一张正常的button图片就可以实现，不用像平常一样把button的图片切成几块再用css拼起来
缺点就是一个按钮会多一个http请求(用了一个img标签)
PS: css随便写，无视吧
一个菜单的优化经历
最近的项目在多次修修改改之后遗留下了一个悲剧的一二级菜单，html结构混乱不说，还用了N多全局变量，N多脚本去制作切换的效果。所以决定着手重构之。
首先考虑是最激进的方法。只用CSS实现，具体的实现看这里
重构后的效果 -> 这里
除了hover的时候反应速度很快以外也没啥问题了。
后来收到一个feedback
用户从“Bug”按钮移动到“Search bug”的时候，会触发到“报表”的hover效果，以至于难以点到“Search bug”的按钮。
（这里可以体验一下）
第一时间想到的是延迟hover的效果，查了一下相关资料未果，于是写下代码(用到了Jquery)：
function navSwitcher(){
var topNav = $(“#navigation li.menu”);
topNav.hover(
function(){
var item = $(this);
setTimeout(function(){item.addClass(‘menu_hover’);},300);
},
function(){
var item = $(this);
setTimeout(function(){item.removeClass(‘menu_hover’)}, 300);
}
);
}
想法是用setTimeout延迟一下hover的效果，测试时候又发现了个问题，如果从一个按钮快速移动另外一个按钮再移回原来的二级菜单，会触发一个死循环。。
如果每次mousehover与mouseover的的时候clearTimeout一下应该可以解决问题了，于是修改了一下代码，顺便调整了timeout时间优化使用体验，完整的Demo可以到这里查看
代码如下：
function navSwitcher(){
var topNav = $(“#navigation li.menu”);
topNav.hover(
function(){
var item = $(this);
clearTimeout(item.data(‘timeout’));
var t = setTimeout(function(){
item.addClass(‘menu_hover’);
},100);
item.data(‘timeout’, t);
},
function(){
var item = $(this);
clearTimeout(item.data(‘timeout’));
var t = setTimeout(function(){
item.removeClass(‘menu_hover’)
}, 200);
item.data(‘timeout’, t);
}
);
}
嗯。。代码有点丑陋。。不过当我尝试把他封装一下时候发现会额外消耗5ms左右的时间。。于是还是这样好了，
在我的机器上FF3的测试结果:
尚在可以接受的范围:D
于是此次优化工作暂告一段落。
