语源科技BlogJava-深圳Java俱乐部

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

∪∩BUG — Tue, 09 Oct 2012 03:39:00 GMT

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

Posted by unbug on Oct 9, 2012 in Web App | 0 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选择器>类别选择器>标记选择器”

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

http://www.iunbug.com/archives/2012/10/09/455.html

∪∩BUG 2012-10-09 11:39 发表评论

运用webkit绘制渲染页面原因解决iscroll4闪动的问题

∪∩BUG — Fri, 21 Sep 2012 04:24:00 GMT

已经有不少前端同行抱怨iScroll4的各种问题，我个人并不赞同将这些问题归咎于iScroll4,因为iScroll4进无论是touch事件的捕获，还是使用transform来处理滚动，以及将cubic-bezier应用到transition上实现高效的平滑滚动，这些原理我们都是已知的。更多原理细节可以参看[译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动一文。此文则来解释另一个被很多人误解为iScroll4 造成的问题，那就是内容多的页面闪动的问题。现象表现为：

1.滑动过程中，滚动区内的元素在释放手指时出现细微闪动

2.图片缩放过程中释放手指时明显闪动

3.iOS上从mobile safari打开或第三方应用内打开后，切回主屏幕再切回页面时明显闪动

4.页面初始时闪动

大致这些情况下会有闪动，在ipad2,new ipad上会明显看得出。

下面就来分析产生的原因和解决办法：

http://www.iunbug.com/archives/2012/09/19/411.html

∪∩BUG 2012-09-21 12:24 发表评论

iScroll4启用snap时原生滚动被阻止的解决办法

∪∩BUG — Tue, 18 Sep 2012 09:48:00 GMT

http://www.iunbug.com/archives/2012/09/18/398.html

iScroll4启用snap时原生滚动会被阻止，具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。

官方的解决办法是追加onBeforeScrollStart事件：

    
            onBeforeScrollStart: function (e) { return true; }

这种办法在测试中iOS和原生android设备是没有问题的，但第三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看

http://www.iunbug.com/archives/2012/09/18/398.html

∪∩BUG 2012-09-18 17:48 发表评论

用一个js脚本备份饭否消息

Aloong — Tue, 21 Aug 2012 20:50:00 GMT

摘要: 分享写了一个晚上的可以备份饭否各种消息的js脚本.

首先进入 http://m.fanfou.com 登录好自己的帐号.

然后在chrome下按F12,切换到最后一栏"Console".
在里面粘贴下面代码后回车: 阅读全文

Aloong 2012-08-22 04:50 发表评论

Facebook最新的Mobile Web APP版新增的”摇一摇”功能所用到的DeviceMotionEvent事件

∪∩BUG — Wed, 18 Jul 2012 10:56:00 GMT

Facebook在Mobile Web APP方面一直是担当榜样的大哥形像.近日出的新版在iOS上多了个“摇一摇”（Friendshake）寻找附近友邻功能。与这个功能相关的事件早在iOS4.2的时候就被mobile safari支持了,很早就听到做mobile游戏的朋友用上这个事件了,即是DeviceMotionEvent,下面我们就来讲讲这个事件:

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.

加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过陀螺仪和加速计来区别这两者的.

使用方法如下:http://www.iunbug.com/archives/2012/07/18/387.html

∪∩BUG 2012-07-18 18:56 发表评论

MongoDB安装手记

apple0668 — Sat, 07 Jul 2012 14:11:00 GMT

简介：
MongoDB是一个高性能，开源，无模式的文档型数据库，是当前NoSql数据库中比较热门的一种。它在许多场景下可用于替代传统的关系型数据库或键/值存储方式。Mongo使用C++开发。
安装：
软硬件环境
-----------------------
系统：win7 64bit
数据库：Mongo-2.0.6
-----------------------
下载地址：http://www.mongodb.org/downloads
按照自己需要下载对应操作系统的数据库版本。
目前由于我的是64系统，下载对应64位的数据库。

Step1：解压MongoDB目录为C:\mongodb
Step2：创建E:\MongoDB\data，指定数据库存储目录E:\MongoDB\data，操作如下
C:\mongodb\bin\mongod --dbpath E:\MongoDB\data

测试数据库是否安装成功：浏览器输入http://localhost:27017/
结果：

You are trying to access MongoDB on the native driver port. For http diagnostic access, add 1000 to the port number

安装成功，可以使用MongoDB进行开发工作了。

然后运行mongo即可连接到test数据库，你就可以进行数据操作。运行help显示帮助命令行。
双击：C:\mongodb\bin\mongo.exe,输入help帮助命令

就可以在命令行下面进行数据库操作了。

apple0668 2012-07-07 22:11 发表评论

Google推出强大的网站速度分析和优化建议的Chrome开发者工具扩展插件：PageSpeed Insights

∪∩BUG — Thu, 14 Jun 2012 03:44:00 GMT

PageSpeed Insights早在2年前google就推荐了这个工具的预览版，现在他们推荐一个功能全面的2.0版本。作为Chrome开发者工具的扩展。可以对你的网站进行全面的分析，包括静态资源文件，网络，DOM和timeline等。下载安装之后打开发者工具就到下图的按钮，点击分析即可得到一份全面的报告。阅读全文 http://www.iunbug.com/archives/2012/06/14/353.html

∪∩BUG 2012-06-14 11:44 发表评论

iOS6的Mobile Safari给前端开发者带来了什么

∪∩BUG — Tue, 12 Jun 2012 10:45:00 GMT

这是我们目前所知iOS6的Mobile Safari给前端开发者所带来的，我期望在接下来的Beta版中惊喜更多用户体验更好。阅读全文http://www.iunbug.com/?p=339

∪∩BUG 2012-06-12 18:45 发表评论

[译]用YUIDoc文档化JavaScript代码

∪∩BUG — Mon, 11 Jun 2012 07:05:00 GMT

阅读全文 http://www.iunbug.com/2012/06/07/%E7%94%A8yuidoc%E6%96%87%E6%A1%A3%E5%8C%96javascript%E4%BB%A3%E7%A0%81/ 文档化你的JS代码有点类似于测试；我们都意识到要这么做，但我们都不确定怎么做，大多数人都没有做，但其实我们非常支持这么做。YUIDoc正是应付这个问题的最佳方案，那么，本教程将使你快速掌握它。 http://www.iunbug.com/2012/06/07/%E7%94%A8yuidoc%E6%96%87%E6%A1%A3%E5%8C%96javascript%E4%BB%A3%E7%A0%81/

∪∩BUG 2012-06-11 15:05 发表评论

Pixastic:强大的图片处理JS库，支持滤镜等超过28种处理效果

∪∩BUG — Thu, 07 Jun 2012 07:33:00 GMT

背景：http://www.travelog.me/ 上的背景图片是高斯模糊的效果，而他们用的库就是Pixastic。 Pixastic 是一个强大的图片处理JavaScript库，可以让你轻易的对图片执行各种处理，无论是滤镜还是各神奇的效果只需要几行JS代码即可以做到。仅需要浏览器支持Canvas。阅读全文 http://www.iunbug.com/2012/06/07/pixastic%E5%BC%BA%E5%A4%A7%E7%9A%84%E5%9B%BE%E7%89%87%E5%A4%84%E7%90%86js%E5%BA%93%EF%BC%8C%E6%94%AF%E6%8C%81%E6%BB%A4%E9%95%9C%E7%AD%89%E8%B6%85%E8%BF%8728%E7%A7%8D%E5%A4%84%E7%90%86%E6%95%88/

∪∩BUG 2012-06-07 15:33 发表评论

[译]JavaScript文件操作(5)-Bolb类型（二进制大对象）

∪∩BUG — Wed, 06 Jun 2012 11:48:00 GMT

到目前，本系列文章集中讲了File对象能在用户参与下对操作文件的产生的积极效果。事实上File对象是Blob的特殊类型。即大块的二进制数据，File对象的大水的类型等属性都继承自Blob。大多时候， Blob 的 File是可以同时使用的。例如，可以用FileReader从Blob中读取数据，可以通过URL.createObjectURL()来创建一个URL对象。阅读全文 http://www.iunbug.com/2012/06/06/%E8%AF%91javascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C5-bolb%E7%B1%BB%E5%9E%8B%EF%BC%88%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%A4%A7%E5%AF%B9%E8%B1%A1%EF%BC%89/

∪∩BUG 2012-06-06 19:48 发表评论

[译]JavaScript文件操作(4)-URL对象

∪∩BUG — Wed, 06 Jun 2012 04:25:00 GMT

从这系列的以上文章中，你已经学到以传统的方式使用文件。你可以上传文件到服务器，可以从硬盘中读取文件。这些都是最普遍的操作文件的方式。然而，还有一个全新的方式让你能简化任务，就是使用 URL 对象。何为 URL对象? URL对象是硬盘上指向文件的URL。例如，你想在页面上显示用户系统里的一张图片，服务器不必知道对应文件，当然也不用上传它。你只需在页面中加载它即可。是的，前面的文章中提到，获取文件的引用，读取 data URI，然后赋值给一个元素。不过细想其中多浪费：图片原本就在硬盘上，还要转换成另一个格式再用之？如果你创建一个URL对象，你可以直接赋值给元素而后直接加载文件。阅读全文 http://www.iunbug.com/2012/06/05/%E8%AF%91file-api%E4%B9%8Bjavascript%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C4-url%E5%AF%B9%E8%B1%A1/

∪∩BUG 2012-06-06 12:25 发表评论

[翻译]手把手教你编写iOS上Mobile Web App实现Fixed Position和模拟滚动

∪∩BUG — Sat, 02 Jun 2012 18:12:00 GMT

背景概述

Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是Google的Fixed position的最佳实践之一. iPad上的基于两栏的Gmail也运用了这种实现机制.

桌面浏览器本身就支持 position: fixed. 但 mobile Safari在iOS5之前不支持, 我们只能定制一个模拟滚动的工具来替代原生的滚动.

本教程就是在Mobile Web App上如何实现position: fixed的,就以下几点来讲:

如何布局
通过transforms实现滚动的动画效果
通过 transitions实现滚动的惯性冲力
触摸屏幕时中止滚动,即在打断 transitions的执行

跳转看详情

http://www.iunbug.com/2012/06/03/%E7%BF%BB%E8%AF%91%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%BC%96%E5%86%99ios%E4%B8%8Amobile-web-app%E5%AE%9E%E7%8E%B0fixed-position%E5%92%8C%E6%A8%A1%E6%8B%9F%E6%BB%9A%E5%8A%A8/

∪∩BUG 2012-06-03 02:12 发表评论

在Fedora Linux上快速部署搭建JDK, Tomcat, MySQL的JSP开发演示环境流程记录教程.

Aloong — Fri, 09 Dec 2011 20:20:00 GMT

摘要: 今晚很简单地搭了一个linux下的jsp服务器
主要内容就是安装了jdk,然后装了tomcat,然后装了mysql.
简单记录一下过程, 包括下载地址,安装方式和配置过程.
比较不一样的是安装和配置的全程都可以不用联网,只要提前下载好4个需要的文件就可以了. 阅读全文

Aloong 2011-12-10 04:20 发表评论

腾讯2012校园招聘面试面经,技术类,应用软件开发,Java,移动终端方向可参考.

Aloong — Sun, 16 Oct 2011 08:15:00 GMT

摘要: 腾讯2012校园招聘面试面经,技术类,应用软件开发,Java,移动终端方向可参考.

昨天上午才笔试完,到现在拿到口头offer,感觉怎么好像过了有好几天那么长的时间,赞一下TX的效率真的是超级高.

估计有很多人要问,于是来写面经.我就喜欢做这样一劳永逸的事情..

笔试有保密协议就不说什么了,大概就是上课会学到的那些基础,每个方面都稍有有点印象就够了吧,笔试改卷应该挺松的.
我看到我的笔试卷子上面是62分..

--------------------这是一面的分界线------------------------------- 阅读全文

Aloong 2011-10-16 16:15 发表评论

sencha touch 性能优化个人经验谈

∪∩BUG — Sat, 23 Jul 2011 05:40:00 GMT

sencha touch 跟Ext js一个提供了丰富且高级的组件让我们能快速的开发出一个跨手机平台而且很绚丽的产品,这听起来不错,但很快我们发现了一个严重的问题,手机上的效果根本没有在PC上用chrome打开的效果一样让人有刷刷的快感(#@#$$#@$#),甚至让人痛苦. sencha touch和ext一样,组件是类式继承的,大大降低了使用和学习的周期.但缺点也是很明显的,你每增加一个组件,内存消耗就增加很多,可能你已经使用minify/JSBuilder/YUI compressor等工具压缩过你的代码了,如果性能还不佳,那么可以看看以下是个人的一点建议

http://www.iunbug.com/article.html?objNews.id=277001

∪∩BUG 2011-07-23 13:40 发表评论

centOS下通过NPM安装和配置node.js+socket.io+connect在线聊天的详细教程

∪∩BUG — Sat, 23 Jul 2011 04:48:00 GMT

Node.js,socket.io是什么这里我就不再多说了,很多人一直想实现一个在线聊天的项目,现在主要把自己的配置笔记分享给大家,让更多朋友不必为此走弯路了,跳转看详情Node.js,socket.io是什么这里我就不再多说了,很多人一直想实现一个在线聊天的项目,现在主要把自己的配置笔记分享给大家,让更多朋友不必为此走弯路了,跳转看详情

http://www.iunbug.com/article.html?objNews.id=276003

∪∩BUG 2011-07-23 12:48 发表评论

sencha touch 高性能 list最简单高效的实现方案

∪∩BUG — Mon, 18 Jul 2011 01:26:00 GMT

sencha touch 的list,性能非常的低,官方论坛有人说超过200个项就已经是超标了!但事实上超过40个项就非常卡了,尤其是每个项里还有图图片的时候,在iphone中可能效果不错,但到了android,你可能会摔手机.卡的原因其实是元素太多,必需限制显示的数据,但又要解决上滚和下滚显示相应的项,有人会想到用分页,其实分页相当的麻烦,下面就说一个鄙人奋战了一天摸索出来的方法,仅仅三步,几行代码,你看了也会会心一笑.

http://www.iunbug.com/article.html?objNews.id=246003

∪∩BUG 2011-07-18 09:26 发表评论

要Google+邀请的速速留下你的Gmail!!

∪∩BUG — Sat, 16 Jul 2011 02:55:00 GMT

要Google+邀请的速

转到以下连接去

留下你的Gmail!!

http://www.iunbug.com/article.html?objNews.id=245001

∪∩BUG 2011-07-16 10:55 发表评论

Ext JS 4.0.2发布!Ext JS 3.4 支持IE9!

∪∩BUG — Sat, 18 Jun 2011 09:07:00 GMT

Sencha同时发布了Ext JS的两个升级版本,4.0.2依旧提升性能和BUG修复.3.4版则提供了IE9的支持.跳转看详情.Sencha同时发布了Ext JS的两个升级版本,4.0.2依旧提升性能和BUG修复.3.4版则提供了IE9的支持.跳转看详情.

http://www.iunbug.com/article.html?objNews.id=236001

∪∩BUG 2011-06-18 17:07 发表评论