之前的Zen coding插件,现在升级成了Emmet。主要功能还是Zen coding,不过现在除了支持Html,还进一步的把这种快速生成代码的方式扩展到了CSS。而且现在好像架构是基于PyV8用Javascript写的了。另外就是在扩展方面支持强大了很多,这个我没仔细看。 别的不说了,可以看官方很Cool的在线文档。这里就举两个例子。 1. HTML 输入如下文字:div>(header>ul>li*2>a)+footer>p,按下tab,将生成这样的代码: <div> <header> <ul> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </header> <footer> <p></p> </footer> </div> 输入如下文字:ul.generic-list>lorem10.item*4,按下tab,将生成这样的代码: <ul class=”generic-list”> <li class=”item”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li> <li class=”item”>Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li> <li class=”item”>Incidunt vitae quae facereRead More →

今天的王垠blog上看到一篇关于软件的行话,有些听过,有些知道却不知道怎么说,有些,吭吭,完全不知道。 这让我想起了,Eric Raymond的著名的The Jargon File。 于是弄篇文章在这里记下来,方便自己以后查阅。Read More →

前端开发调试工具非常方便,Firefox下有Firebug,Google Chrome和Safari下有Web inspector。 但是手机上的浏览器调试一直还没有特别好的工具。随着iOS 6的退出,这一现象得到了很大的改变。现在可以通过桌面Safari的Web inspector直接调试,iOS 6上浏览器里的网页内容了,几乎跟调试桌面浏览器里的页面一样快,一样方便。唯一的遗憾是,似乎还只有Mac下的Safari 6支持这个功能,Windows下的Safari版本还不行。也许这也是Apple促销Mac的一个手段吧。 调试iOS 6上浏览器里的页面的具体步骤如下 在iOS 6上的Safari设置里开启Web inspector选项。并把设备通过数据线连接到Mac。 打开Mac上的桌面Safari,在Develop菜单下将会出现连接了的iOS 6设备。选择这个设备下要调试的页面。 在桌面Web inspector上选取Html元素,手机上将高亮显示 当然除了高亮显示,其他修改、查看页面加载过程,调试Javascript等一样也不少 update 一篇很全面的关于如何使用手机模拟器和远程调试手机页面的文章: Testing Mobile: Emulators, Simulators And Remote DebuggingRead More →

这两天试用了一下手机应用快速原型工具Codiqa. Codiqa的基本想法是在jQueryMobile的基础上做一些包装,提供一个可视化的工具,使产品设计人员能快速的搭建一个应用原型.进一步,如果以后的应用的开发是基于jQueryMobile的,Codiqa希望这个原型可以作为应用开发实际使用的基础代码. 类似想法的工具网站应该不少,但是基于jQueryMobile的却不多,或者我不知道. 我挺喜欢这类的原型工具的, Codiqa现在的功能还比较少, 甚至对jQueryMobile的支持也不全面, 但是以后应该会逐渐成熟, 希望Codiqa以后能在现在jQueryMobile的基础上能加入更多的组件和特性. 下面是我Codiqa使用下来的一些感受: 优点 快速构建原型,基本上就是拖拽,填填属性 可以创建多个jQueryMobile页面,支持配置页面间的跳转 可以上传自定义的jQuery Mobile theme, 可惜仅支持jQuery Mobile Themeroller生成的CSS,不能上传图片资源 30天内免费试用. 在免费期内把3个免费的项目都建出来,过了免费期就不能创建项目了,但是已有项目还是能正常使用. 可以在线共享,可以在移动设备上直接体验 可以导出Html代码,作为项目开发的基础 缺点 不支持UI元件的拷贝粘贴,配置一个数据多点的列表框需要很多次鼠标操作 不支持对话框元件, Dialogs 只有Page支持背景图片, 其他元件不支持背景图片设置, 不支持image sprite 不支持 Grouped buttons 没有一个好的列表内容元件. List 不支持 Nested list, Numbered list, Split button list, Thumbnails, Icons, Search filter bar, Lists withRead More →

前两天一个同事作业面时,碰到一个锯齿问题。他使用了一个css的transform方法,把一张图旋转了4度,-webkit-transform: rotate(-4deg);-moz-transform: rotate(-4deg);,结果在Firefox里很正常,但是在Chrome和Safari边缘都有严重的锯齿。 后来在StackOverflow上找到了答案。原来webkit内核的浏览器的CSS变换普遍有这个问题,只有在OSX下的新版本的Chrome里已经修复了。现在的解决办法是通过使用css的3D变换来启用GPU加速,通过GPU渲染的变换是进行了防锯齿处理的,效果好很多。具体方法就是在transform属性里加一句translateZ(0)。看看对比图吧: 还有一个问题,感觉经过GPU渲染出来的页面,整个页面都有影响,字体比没经过GPU渲染的页面要淡和细一些。不知道这有什么说法吧。 您可以在这个页面试试,删除translateZ(0)能看到“HTML render with/without CSS 3D”这段字的显示效果有明显变化。 也截两张图放这里对比一下: 参考: http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit-transform-in-chromeRead More →