通过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

lesscss 初学注意事项

On

less的嵌套 less支持嵌套,而且习惯上使用嵌套时使用缩进。但是嵌套的语法还是使用{},而不是缩进。所以下面的写法是错误的。 .classA { display: block; } .classB { display: none; } //生成的css如下 .classA { display: block; } .classB { display: none; } 正确的写法是 .classA { display: block; .classB { display: none; } } //生成的css如下 .classA { display: block; } .classA .classB…

SlideShare的新UI: bigfoot

On

昨天为了看SlideShare比较清爽些,刚弄了个改变SlideShare ppt缺省大小的Bookmarklet,没想到今天就看到SlideShare在测试更大的ppt画面的新UI设计, bigfoot. 我马上去试了一下,还是不太满意: ppt大小是固定大小(728x562px), 广告位还是很多. 最后我还是bigfoot关掉了,继续使用这个小Bookmarklet.

给我个干净的SlideShare界面

On

SlideShare是个很好的资料网站,那里你总能找到符合你胃口的的ppt. 可惜缺省的ppt大小比较小(598×481),有的时候连字也看不清楚.切换成全屏吧,又太招摇,桌面上的消息也不太容易看到. 如果提供个大一点的ppt选项就好了,这就是下面这段Bookmarklet的由来.把它拖到浏览器的收藏夹,以后你在SlideShare上看ppt的时候,单击一下这个Bookmarklet,就会把广告什么的隐藏掉了,ppt的宽度大概是屏幕宽度的70%. 这是点击前和点击后的展示效果:

讨厌的CSS3前缀

On

CSS3确实带来了很多很炫的功能,但是为了在现在的浏览器上使用CSS3确实很费劲. 比如要为不同的浏览器书写自己格式的CSS3属性名就是一件麻烦事. 他们为什么不直接使用标准的CSS3属性名呢?! 如果要把元素旋转度,CSS3的语法是: 却要写这么多: 真是够丑的,谁有好办法?

推荐一个Chrome的广告屏蔽扩展, AdBlock

On

如何屏蔽网站的广告?其实以前我不太关心这个。连我这个几乎没人访问的blog,我都放了个Google Ad,我怎么能好意思上别人的网站时,不看别人的广告呢。 但是有些网站的广告放的也实在太多了点。比如我经常使用的dict.cn, 上、下、右,都放满了广告。一眼望去,我还真不知道,那些是单词解释,那些是挂的广告。于是还是打算把dict.cn的广告屏蔽一下。 在Firefox里有个Stylish插件,可以在本地修改网站的css。比如你在Stylish给dict.cn的”#ad_top”加个”display:none”,它就不会显示了在你的浏览器里了。但是碰到广告就去编辑一下对应的css,也挺麻烦的。 如果有人维护这样一个屏蔽大多数网站广告的css,我们只要像使用杀毒软件那样,装个软件,它就自动每天更新新的广告屏蔽css该多好。顺着这个思路,我找到的就是AdBlock for Chrome。AdBlock里的filter lists大概就是这个想法,而且有中文网站的filters可以选。我不清楚的是,这个filters是AdBlock自己维护的,还是用户贡献。如果是用户贡献的那就比较牛了,新出现的广告一出来,用户就能在第一时间贡献用于广告屏蔽的css。跟开源的只要眼睛多、bug就好捉的精神一样,只要用户贡献的广告屏蔽css,网站就干净的多。应该和人肉xxx算是一类。 不管怎样AdBlock for Chrome现在的filters已经不错了,至少它有我需要的dict.cn。 来比较一下使用AdBlock的效果。 使用AdBlock之前的dict.cn: 使用AdBlock之后的dict.cn: AdBlock for Chrome下载地址,还有AdBlock的Firefox姊、Safari妹。

Zen Coding,快速输入html和css之道

On

整理Eclipse for php的时候,无意间看到了这工具,Zen Coding。真是快速编辑html和css的利器,有多厉害,看看这里的演示吧。访问不到的请移步土豆。 作者的主要想法是,通过把编辑器变成一个简单的脚步解释环境,来提高编码的效率。我想这也是VIM这种编辑器反而比一些的IDE效率更高的主要原因。不过Zen Coding的想法更新颖,代码更少。 例如我们要输入这样一段html代码, 以zen coding的方式,就只需要输入“div#header>ul.navigation>li*4>a”,然后按快捷键展开就好了。 心动了,来体验一下zen coding的魅力吧。这个在线的Zen Coding编辑器,是通过js,把普通的html textarea变成了不错的IDE。如何让你网站上的textarea也支持这个功能?试试这个吧。 我常用的代码编辑器是VIM和Eclispe,来看看怎么使它们支持Zen Coding吧。 首先来看看VIM VIM下支持Zen Coding相对比较容易 首先确保你的VIM版本支持python的。我使用的是Debian/squeeze下的vim-nox包,squeeze下支持python的VIM包。 然后下载这两个VIM插件,zencoding.vim和zencoding_vim.py,拷贝到VIM的.vim/plugin目录中。 再从这里,下载Zen Coding for TextMate v0.3.1.zip,把压缩包里的zencoding整个目录拷贝到.vim/plugin下。注意是目录。 OK,现在可以打开VIM试试了。进入插入模式输入“div#header>ul.navigation>li*4>a”,然后按“Ctrl+E”,看看有什么效果,呵呵。 VIM下的Zen Coding的快捷键设置如下: 插入模式下Ctrl+L :插入缩略代码 可视模式下Ctrl+L :在选中的文本前后,重复插入缩略代码 插入模式下Ctrl+E:直接在当前编辑位置,运行并插入生产的代码 插入模式下Tab:同Ctrl+E 再说说Eclipse Eclipse下支持Zen Coding实际上是通过js做的。就像在Firefox里有Greasemonkey这样的扩展是用户可以通过js来扩充Firefox;Eclipse下也有个类似的叫Eclipse Monkey的项目。 首先在Eclipse里添加这个更新站点http://download.eclipse.org/technology/dash/update,更新、安装Eclipse Monkey。 然后看这个演示,就知道怎么在项目里加入zen coding的js文件,来扩展Eclipse了。…