Leon's blog

每天活的有趣一点

正在浏览 软件开发 里的文章

之前的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 facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

2. CSS

输入如下文字:bgc#1,按下tab,将生成这样的代码:

background-color: #111;

输入如下文字:bdrs5,按下tab,将生成这样的代码:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

最后放一个Emmet cheat sheet,方便参考。

软件开发行话

抢沙发

今天的王垠blog上看到一篇关于软件的行话,有些听过,有些知道却不知道怎么说,有些,吭吭,完全不知道。

这让我想起了,Eric Raymond的著名的The Jargon File。 于是弄篇文章在这里记下来,方便自己以后查阅。 继续阅读

前端开发调试工具非常方便,Firefox下有Firebug,Google Chrome和Safari下有Web inspector。 但是手机上的浏览器调试一直还没有特别好的工具。随着iOS 6的退出,这一现象得到了很大的改变。现在可以通过桌面Safari的Web inspector直接调试,iOS 6上浏览器里的网页内容了,几乎跟调试桌面浏览器里的页面一样快,一样方便。唯一的遗憾是,似乎还只有Mac下的Safari 6支持这个功能,Windows下的Safari版本还不行。也许这也是Apple促销Mac的一个手段吧。

调试iOS 6上浏览器里的页面的具体步骤如下

  1. 在iOS 6上的Safari设置里开启Web inspector选项。并把设备通过数据线连接到Mac。

iOS 6 Safari inspector-1

  1. 打开Mac上的桌面Safari,在Develop菜单下将会出现连接了的iOS 6设备。选择这个设备下要调试的页面。

iOS 6 Safari inspector-2

  1. 在桌面Web inspector上选取Html元素,手机上将高亮显示

iOS 6 Safari inspector-3

  1. 当然除了高亮显示,其他修改、查看页面加载过程,调试Javascript等一样也不少

iOS 6 Safari inspector-4

update

这两天试用了一下手机应用快速原型工具Codiqa. Codiqa的基本想法是在jQueryMobile的基础上做一些包装,提供一个可视化的工具,使产品设计人员能快速的搭建一个应用原型.进一步,如果以后的应用的开发是基于jQueryMobile的,Codiqa希望这个原型可以作为应用开发实际使用的基础代码.

类似想法的工具网站应该不少,但是基于jQueryMobile的却不多,或者我不知道. 我挺喜欢这类的原型工具的, Codiqa现在的功能还比较少, 甚至对jQueryMobile的支持也不全面, 但是以后应该会逐渐成熟, 希望Codiqa以后能在现在jQueryMobile的基础上能加入更多的组件和特性.

下面是我Codiqa使用下来的一些感受:

优点

  • 快速构建原型,基本上就是拖拽,填填属性
  • 可以创建多个jQueryMobile页面,支持配置页面间的跳转
  • 可以上传自定义的jQuery Mobile theme, 可惜仅支持jQuery Mobile Themeroller生成的CSS,不能上传图片资源
  • 30天内免费试用. 在免费期内把3个免费的项目都建出来,过了免费期就不能创建项目了,但是已有项目还是能正常使用.
  • 可以在线共享,可以在移动设备上直接体验
  • 可以导出Html代码,作为项目开发的基础

缺点

前两天一个同事作业面时,碰到一个锯齿问题。他使用了一个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”这段字的显示效果有明显变化。 也截两张图放这里对比一下:

CSS transform without GPU accelerate CSS transform with GPU accelerate

参考: