i,unbug

Undeniable[Better:见贤思齐,闻庸自省. Unique:独立思索,志在远方. Genuine:谦逊真诚,宽以待人.]

变量命名神器Codelf搜索开源代码帮开发者给变量命名

Posted by on Jan 1, 2016 in Web | 0 comments

计算机科学里两件最难的事:缓存失效和命名。
Codelf通过搜索在线开源平台Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec的项目源码,帮开发者从中找出已有的匹配关键字的变量名,从而帮助为变量名苦恼的开发者命名。这个搜索服务支持直接搜索中文。
Codelf  基于searchcode和有道词典开发完成。目前开源在Github上。

相关连接:
知乎的讨论:https://www.zhihu.com/question/27097399/answer/78619944

Codelf: http://unbug.github.io/codelf/

Codelf 的 github repo: https://github.com/unbug/codelf

Two hard things: http://martinfowler.com/bliki/TwoHardThings.html

Read More

支持打印http日志的代理node脚本工具,无需再等待fiddler for mac啦

Posted by on Jan 19, 2014 in Mobile Web App, Web | 0 comments

logproxy.js是一个基于nodejs实现代理服务并打印http日志的小工具.给移动前端开者带来诸多便利.

run:
node logproxy [listen port] [only log host,..]
eg.
1.start logproxy with default setting
node logproxy
2.listen on port 8088 and only log hosts — ‘c.163.com’ and every host matchs ‘126.com’
node logproxy 8088 c.163.com,*126.com

Snip20140119_71

Read More

[招聘]网易前端急招前端人才!

Posted by on Nov 6, 2013 in Lounge | 3 comments

网易前端急招小伙伴啦,期待前端有志青年的加入!

无需太多顾虑,简历发过来就有机会!

工作地点: 网易(北京)

职位: 前端开发工程师

职位描述:

1、熟悉W3C标准,能熟练运用XHTML、CSS进行合理的网页制作,熟悉常用浏览器,利用自己的经验有效地解决浏览器兼容问题;

2、熟悉JavaScript语言,能进行常规WEB应用的开发;

3、对交互体验、可用性、用户体验有一定程度的理解;

4、有良好的责任心和团队合作能力,能承受较大的压力;

5、具备良好的学习能力,能脚踏实地做事;

6、严格遵守团队的代码格式、结构的规定,编写易读、易维护、高质量、高效率的代码;

7、javascript开发经验优秀者优先考虑;

8、有移动前端开发经验者优先考虑;

9、加分项: 熟悉nodeJS;有后端开发经验;有客户端开发经验;熟悉Linux命令;熟悉Apache/nginx环境的配置等;

工作职责:

1、与产品保持良好沟通,能快速理解、消化各方需求,并落实为具体的开发工作;

2、能很好的将美术设计的效果图实现成HTML页面;

3、熟练使用Javascript准确地进行代码构建,实现产品所需的动画效果以及交互效果;

4、了解前端的技术实施规则,能很好的和后台工程师实现数据互通;

邮箱: tidelgl@gmail.com     QQ: 346742896

Read More

如何不用翻墙可以享受Chrome for android的远程调试功能

Posted by on Jun 5, 2013 in Mobile Web App | 3 comments

Chrome for android的远程调试功能 出来已久了,但由于默认的DevTools使用的是appspot服务器,这在国内是需要翻越GWF行不通.

但Chrome自带的DevTools是有一个协议开启的,即”chrome-devtools://”.通过这个协议,我们就无需翻墙就可以调试了.

方法如下:

1.在你的http://localhost:9222页面 右键 你想调试的手机里的页面选择”复制连接地址”,

会得到类似这样的连接http://chrome-devtools-frontend.appspot.com/static/27.0.1453.90/devtools.html?ws=localhost:9222/devtools/page/351EAE82-5307-58D1-A50F-9C3F2E0C3FE0″

Snip20130605_3

2.然后将上面的地址的红色部分替换为“chrome-devtools://devtools/devtools.html”即可,例如

chrome-devtools://devtools/devtools.html?ws=localhost:9222/devtools/page/351EAE82-5307-58D1-A50F-9C3F2E0C3FE0″

Snip20130605_5

3.如果你像我一样喜欢用Canary,那通过最新版的chrome://inspect/ 命令调试更加方便了,点开会列出所有可调试的页面,包括你的外接android设备的Chrome for android里打开的页面,只需要点击列表里出现的连接后的”inspect”就可以了,注意,这个功能也是需要安装启动ADB的

Snip20130605_7

Read More

Android上当viewport的width大于device-width时出现文字无故折行的解决办法

Posted by on Apr 23, 2013 in Mobile Web App | 0 comments

有人遇到某些android机子使用了P标签后P标签没有适应宽度,解决办法多种但都不是什么好方法:不使用P标签,float:right,position:absolute或者加背景.

以上遭遇跟我遇到文字无故折行相似:

当你的viewport的width大于device-width时就出出现这个问题

<meta name="viewport" content="target-densitydpi=device-dpi,width=640" />

android设备device-width大多没有超过640,这时多数情况文字出现了折行,没有铺满.但debug看到文字所在的元素宽度是正常的.
值得一提的是article等html5新增元素如果出现了问题再刷新可能就正常了,但p元素却没有这么幸运.
对于这个问题,给文字所在元素加上背景图片就解决了,如果不用背景就加个background: url(‘about:blank’)或者background:(”);
试试过用background: rgba(0,0,0,0)并没有解决问题,对于这个结果我也非常的无奈,如果你遇到了相同的问题,有更好的办法,欢迎告诉我.

Read More

今晚作者失眠,为了不浪费生命,决定与大家分享MIHTool的开发心得

Posted by on Mar 17, 2013 in Lounge | 7 comments

#MIHTool#今晚作者失眠,为了不浪费生命,决定与大家分享MIHTool的开发心得.
首先,MIHTool是作者希望前端移动小组能有一个查看Webkit debug borders以便优化前端移动项目的工具,原本打算请客户端开发同事做,后来作者花了半天时间调研后一意孤行的亲手开发,边学OC边开发,是的,作者的OC非常不专业可以说很槽糕.不到一个星期左右MIHTool 1.0版就出来了,之后几乎每个星期发布一个版本,之所以每个星期仅仅是单纯的因为苹果AppStore审核周期7天左右罢了.

Read More

Chrome beta for Android 新版带来与PC端接近完整的开发者与实验室功能

Posted by on Mar 7, 2013 in Web | 1 comment

我们知道,Chrome在地址栏打开chrome://chrome-urls/ 即可获得大量利于开发者调试与跟踪的功能,其中chrome://flags/ 包含大量即将支持”来自未来的web特性”的选项,如WebGL切换,SPDY等…其中包括显示页面FPS和”合成渲染层边框”即MIHTool重要功能之一的”显示页面合成渲染层(Compositing Render Layers)”.

Screenshot_2013-03-07-10-48-34

Read More

Chrome全平台更至 22版本后,给前端调试带了几个令人兴奋的实用功能

Posted by on Oct 9, 2012 in Web App | 2 comments

Chrome全平台已经更新版版本 22.0.1229.79,给前端调试带了几个令人兴奋的功能:

1.Elements面板,右键元素节点选择“Scroll Into View”,可以在页面视图中快速定位到当前节点

2.Elements面板,右键元素节点选择“Break on…”则可以监听元素子元素变化,属性变化,节点被移除时触发断点debug

3.Elements面板,右键元素节点选择“Force Element State”则可以应用元素的“:active,:hover,:focus,:vistied”状态,同时这些状态是可以组合使用而且保持着的

4.Elements面板,选中元素节点,在右则的样式版本中点击“+”号,就可以依元素的选择器生成对应的样式,生成优先级“ID选择器>类别选择器>标记选择器”

同是在上图中,我们也可以看到“鼠标”形状的按钮,就是在样式列表中显示当前元素对应的鼠标四个状态样式的,这个功能早期版本一直有的。

Read More
Page 1 of 3123