使用DNS服务器DNSMasq,解析127.0.0.1来简化本地Web项目开发

开发Web项目的时候,程序员通常喜欢通过修改本地的`/etc/hosts`来把项目的域名指向本机的服务器。比如 next-big-project.dev 指向 127.0.0.1 。随着项目的增加,本机的hosts文件里很快就会加入很多的项目记录。有意思的是还有人专门注册了顶级域名并把它们指向了 127.0.0.1。比如`localhost.com`!真是活雷锋啊,专门利人。当然更好的办法是能有个属于自己的DNS服务器,那就更方便了。DNSMasq正是满足了开发人员的这个需求。

Continue Reading

Sublime Text 2 的新Zen coding 插件:Emmet

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

Continue Reading

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

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

Continue Reading

jQueryMobile快速原型工具Codiqa

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

Continue Reading

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

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

Continue Reading

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

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

Continue Reading

软件项目的任务积压管理

这是一篇关于如何管理软件项目需求、任务、缺陷的文章,来自大名鼎鼎的Joel Spolsky, StackOverflow的创始人。 想像一下你生平第一次来的一家面包工厂。开始这里看起来像是一个无法理解的杂乱不堪的机器,一些工人在里面东奔西跑的忙碌着。仔细再看看,你就会看到一些你认识的东西。一些桶装的芝麻,大桶大桶的面团,一些小面球,还有些烤好了的面包条。 这些都是库存,或者叫积压。积压逐渐的堆在机器之间。在机器边上,是大桶的将被撒在汉堡面包片上的芝麻。生产线的尽头,是些装满面包的箱子和空箱子。它们在等着被卡车运到商店去。 维持积压需要费用。假设你的面包厂有6个50吨的面粉贮仓。贮仓空下来时,你就会把它填满。这意味着平均你有150吨面粉积压。按照现在的价格计算,你需要73000美刀来维持这个积压。一直需要占用这么多钱。 积压还有别的消耗,比如腐烂、变坏。面粉可以储存几个月,但是面包从它们出炉的那一刻起价值就在不断的降低;24小时之后,基本上就一文不值了。 为什么还要要保持有库存,有积压呢?因为缺货也会造成损失。如果订购芝麻需要2天,在你的芝麻用光的时候,你就2天没办法生产面包。库存可以防止类似的生产流程上的阻塞。丰田汽车的精益生产系统和限制理论,可以指导我们优化每一个生产环节上需要多少缓冲库存。 为什么我会关心这些呢?因为软件开发流程上也有几个主要的积压堆积点。这些环节上的堆积,会造成大量的时间和金钱的浪费。 你也许会问:“什么?软件怎么能跟工厂比呢?” 好吧,想像一下,把产品想法当作生产原料。根据你的流程不同,产品想法可能会经过下面这几个开发阶段,才最终完成为客户看到的软件的特性。 特性决策阶段 (我们真的需要实现这个特性吗?) 设计阶段 (特性描述, 白板讨论, 原型测试, 等等) 实现阶段 (软件编码) 测试阶段 (抓虫) 修复阶段 (杀虫) 部署阶段 (把代码发送给客户,或者部署到WEB服务器,等等) (备注: 不是,这可不是“瀑布式开发”。真的不是。 真不是。 闭嘴。)…

Continue Reading

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

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吧. 至今为止还没发现任何已安装的插件兼容性问题.

Continue Reading

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

知道浏览器的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

Continue Reading

End of content

No more pages to load

Close Menu