Sublime Text 2 的新Zen coding 插件:Emmet

On

之前的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…

通过Safari调试iOS 6上浏览器内容的页面

On

前端开发调试工具非常方便,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 Debugging

jQueryMobile快速原型工具Codiqa

On

这两天试用了一下手机应用快速原型工具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…

CSS3 transform 在webkit内核浏览器下的锯齿问题

On

前两天一个同事作业面时,碰到一个锯齿问题。他使用了一个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-chrome

开发人员无法重现生产环境上的问题怎么办?

On

最近碰到了一个比较奇怪的问题,一个用rewrite实现的Wordpress分页功能在测试和开发服务器上都没有问题,但是上线以后在生产环境上有问题。而且时有时无,很难找出规律,确定不了到底是什么地方出了问题。 已经采取的一些尝试,但是没有解决问题: 查看生产环境错误日志 同步生产环境上的数据库、各类配置,在测试服务器上试图重现 让IT配合,修复生产服务器上的一些可能的潜在问题 添加一些额外的运行日志 但是这些过程,由于要经过公司开发、PM、测试、IT等几个部门,效率非常低。反复几次大家之后没有结果,大家的情绪也都比较失落。最终也没有找到问题的所在,两周之后PM决定放弃解决这个问题,尝试别的实现方式。 虽然问题没解决,但是感觉以下几点以后还是要注意的。 1.争取在线调试的权限 虽说平常,开发人员不应该直接接触生产环境(应该通过工具,自动提交、测试、发布、验证)。但是在出现一些棘手问题时,开发人员有环境能重现问题是必要的,即使是在生产环境。在遵循一定的规范,谨慎小心的前提下,对生产环境有一定的访问处理权限,将有利于尽快找出问题所在,在以后的代码或者环境中避免类似问题。 2.开发发布流程有没有有缺失什么? 现在比较流行的开发部署模式是CI(持续集成开发),很多公司能做到每天向生产环境发布部署多次代码(有的甚至是几十次上百次)。 现在我们公司离这个水平还很远。我们现在的流程是QA和IT在配合部署更新,通常是一周为单位的。 即使我们不提CI,我们实际上还缺少一个staging server环境。简而言之,staging = production – users 。staging上应该能重现生产上能出现的问题,staging更重要的意义在于可以在部署更新到生产之前拦截可能出现的问题,在问题出现在生产环境之前暴露并解决。 我们没有一个几乎等同于生产环境的调试环境,测试和开发服务器跟生产环境有这样那样的差别。 当然更重要的是,我们的发布更新过程有还有很多手工过程,这不但易出错,而且也是造成环境差别的来源之一。 只有不断的把手工过程变成脚步,变成每个人随时都能使用的工具,才能提高发布效率,向CI看齐。不过这需要一个工程师主导的企业文化环境,在我们公司现在还很难。 3.换种方法实现,或者放弃吧。 当在一个问题上纠结太久时,也许该放下来想一想。这个功能必须这样做吗?换种方法行不行?这个功能真的有必要吗?不做行不行? 虽然有时候这些问题也不是我们能决定的,但是建议建议,也许会有意想不到的有好处。 参考 Different methodologies for solving bugs that only occur in production Staging Servers, Source Control &…

软件项目的任务积压管理

On

这是一篇关于如何管理软件项目需求、任务、缺陷的文章,来自大名鼎鼎的Joel Spolsky, StackOverflow的创始人。 想像一下你生平第一次来的一家面包工厂。开始这里看起来像是一个无法理解的杂乱不堪的机器,一些工人在里面东奔西跑的忙碌着。仔细再看看,你就会看到一些你认识的东西。一些桶装的芝麻,大桶大桶的面团,一些小面球,还有些烤好了的面包条。 这些都是库存,或者叫积压。积压逐渐的堆在机器之间。在机器边上,是大桶的将被撒在汉堡面包片上的芝麻。生产线的尽头,是些装满面包的箱子和空箱子。它们在等着被卡车运到商店去。 维持积压需要费用。假设你的面包厂有6个50吨的面粉贮仓。贮仓空下来时,你就会把它填满。这意味着平均你有150吨面粉积压。按照现在的价格计算,你需要73000美刀来维持这个积压。一直需要占用这么多钱。 积压还有别的消耗,比如腐烂、变坏。面粉可以储存几个月,但是面包从它们出炉的那一刻起价值就在不断的降低;24小时之后,基本上就一文不值了。 为什么还要要保持有库存,有积压呢?因为缺货也会造成损失。如果订购芝麻需要2天,在你的芝麻用光的时候,你就2天没办法生产面包。库存可以防止类似的生产流程上的阻塞。丰田汽车的精益生产系统和限制理论,可以指导我们优化每一个生产环节上需要多少缓冲库存。 为什么我会关心这些呢?因为软件开发流程上也有几个主要的积压堆积点。这些环节上的堆积,会造成大量的时间和金钱的浪费。 你也许会问:“什么?软件怎么能跟工厂比呢?” 好吧,想像一下,把产品想法当作生产原料。根据你的流程不同,产品想法可能会经过下面这几个开发阶段,才最终完成为客户看到的软件的特性。 特性决策阶段 (我们真的需要实现这个特性吗?) 设计阶段 (特性描述, 白板讨论, 原型测试, 等等) 实现阶段 (软件编码) 测试阶段 (抓虫) 修复阶段 (杀虫) 部署阶段 (把代码发送给客户,或者部署到WEB服务器,等等) (备注: 不是,这可不是“瀑布式开发”。真的不是。 真不是。 闭嘴。) 在这些阶段之间,就可能产生积压。比如:当程序员完成了代码开发(阶段3 实现阶段),把代码交给测试人员去测试(阶段4 测试阶段)。任何时候,都有一定量的的代码等着被测试。这就是代码积压。 代码积压的代价是巨大的。它很可能累积成6到12个月的工作量,导致生产线卡壳,产品交不到客户手里。这甚至有可能造成巨大的差别,就像时髦的尖端产品(如iPhone)跟永远在别人屁股后面追赶的产品(如Windows Phone)这样的差别。几乎不会有人会去购买Windows Phone,尽管iPhone其实仅仅比它先进6个月而已。很多市场都有网络效应,领先者意味着赢取几乎所有的份额。所以在开发流程上消除积压,能创造或毁掉一个产品。 现在我们来回顾一下积压累积的3个主要环节。 1.产品特性点子库 每个产品都有很多新点子,你实现点子的速度永远赶不上新点子涌现的速度,所以你就把他们记录下来,这就形成了产品特性点子库。点子库里很多点子其实是坏点子,你把他们记录下来,只是为了避免伤害想出这些点子的人的感情而已。点子库看起来能让每个人都感觉良好。 问题是,这些点子中90%的点子永远也不会被实现。所以花在这些永远也不会被实现的点子上的分分秒秒,记录、设计、思考、讨论,都是浪费时间。当我听说产品团队定期的开展“点子库梳理”会,在会上仔细的研究这些永远也不会被实现每一个点子,每天、每周细心的浪费着自己的时间和精力,我戳瞎自己眼睛的心都有。 建议:不要让点子库里的工作超过一或两个月。如果点子库满了,不要加入新的项目,除非你删除掉一些别的项目。不要花时间细化说明、设计、讨论这些点子库里的项目。产品特性点子库事实上应该被视为是一个关于你现在还不用讨论或开始工作的项目的列表。 2.缺陷数据库…

SublimeText2 正式发布, 如何从之前的beta版本升级

On

SublimeText 2.0 日前正式发布, 修改了一堆的bug, 性能也有提升, 是时候upgrade了. 升级portable版本的步骤如下: 备份当前SublimeText2版本 下载SublimeText 2.0的portable版本, 32位,64位 解压SublimeText 2.0的portable版本 把解压出来的SublimeText 2.0的portable版本里所有的文件, 复制到当前SublimeText2版本所在的目录 从当前SublimeText2版本的备份中拷贝以下文件到当前目录: Data\Settings\Session.sublime_session Data\Packages\User\Preferences.sublime-settings Data\Packages\User\Default (Windows).sublime-keymap OK, 升级完毕, 享受你的脱掉了beta帽子的SublimeText2吧. 至今为止还没发现任何已安装的插件兼容性问题.

如何判断浏览器当前是以什么模式在渲染页面

On

知道浏览器的QuirkMode, 在IE下也知道如何查看IE是否处在QuirkMode. 但是在Chrome下我还真不清楚在哪里能看到浏览器现在是否是在以QuirkMode在渲染页面. 找了一圈子,也只找到了这个用JavaScript判断的方法. 难道Chrome没有在界面上提供工具指示这个状态吗? window.alert(‘You are in ‘ + (document.compatMode===’CSS1Compat’?’Standards’:’Quirks’) + ‘ mode.’) 参考: http://stackoverflow.com/questions/627097/how-to-tell-if-a-browser-is-in-quirks-mode

让Sublime Text 2支持使用<包围选中的文字

On

Sublime Text 2有一个很好用的小功能,在选中文字时,如果按下[,{,(,’,”等符号,会使用按下的符号把选中的文字括起来. 这个功能我在编辑markdown文件是经常使用. 可惜的是这个功能并不支持<符合,不知道这是出于什么考虑.不过给<加上这个功能也很简单.只需要打开Default (OSX).sublime-keymap文件.在里面添加下列配置即可. { “keys”: [“<“], “command”: “insert_snippet”, “args”: {“contents”: “<${0:$SELECTION}>”}, “context”: [ { “key”: “setting.auto_match_enabled”, “operator”: “equal”, “operand”: true }, { “key”: “selection_empty”, “operator”: “equal”, “operand”: false, “match_all”: true } ] },