|
|
2012年10月9日
摘要：
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选择器>类别选择器>标记选择器”
同是在上图中，我们也可以看 阅读全文
2012年9月21日
摘要：
升级了iOS6后测试了一下给应用推广来的新特性SMART APP BANNERS .首先要在head标签添加如下meta
1
要注意的是content属性：app-id即是你的应用id,app-argument则用作打开应用时的URL，比如打开网易新闻对应的新闻VIEW。
测试结果是：
升级了iOS6的iOS设备，不过有点小BUG，比如new ipad中整条内容部分是居左而没居中显示，itouch4只有在对应的应用成功安装了才显示。希望这些BUG是个别机子，因为测试条件有限没有全面测试。
你想你会问，如果动态添加这条meta会是什么结果呢？先来看看：
http://www.iunbug.com/archives/2012/09/21/431.html 阅读全文
摘要：
已经有不少前端同行抱怨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 阅读全文
2012年9月18日
摘要：
http://www.iunbug.com/archives/2012/09/18/398.html
iScroll4启用snap时原生滚动会被阻止，具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。
官方的解决办法是追加onBeforeScrollStart事件：1 onBeforeScrollStart: function (e) { return true; }
这种办法在测试中iOS和原生android设备是没有问题的，但第三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看
http://www.iunbug.com/archives/2012/09/18/398.html 阅读全文
2012年7月18日
摘要：
http://www.iunbug.com/archives/2012/07/18/387.htmlFacebook在Mobile Web APP方面一直是担当榜样的大哥形像.近日出的新版在iOS上多了个“摇一摇”（Friendshake）寻找附近友邻功能。与这个功能相关的事件早在iOS4.2的时候就被mobile safari支持了,很早就听到做mobile游戏的朋友用上这个事件了,即是DeviceMotionEvent,下面我们就来讲讲这个事件:DeviceMotionEvent会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.加速度的计算方式是重 阅读全文
2012年6月18日
摘要：
你可能听说了这个新MVC框架： CanJS。还有什么比用它来创建一个联系人Web App更能深入了解它的办法呢？当看完这三篇教程，你将全面了解用它的什么工具来创建你自己的Web App。
选择正确的库
创建一个JS APP没有好的工具是很有难度的，jQuery只是操作DOM的库，没有提供任何创建APP的基础，这就是为什么我们要一个类似CanJS的专门的库。
CanJS 是一个轻量级的MVC库，提供你创建一个JS APP所需的工具。
CanJS 是一个轻量级的MVC库，提供你创建一个JS APP所需的工具。 它提供有MVC (Model-View-Control) 模式的基本框架，模板动态绑定， route的支持且 内存安全。同时支持 jQuery, Zepto, Mootools, YUI, Dojo，有丰富的扩展和插件。
第一部分你将学到：
阅读全文
http://www.iunbug.com/archives/2012/06/14/360.html 阅读全文
2012年6月14日
摘要：
PageSpeed Insights早在2年前google就推荐了这个工具的预览版，现在他们推荐一个功能全面的2.0版本。作为Chrome开发者工具的扩展。可以对你的网站进行全面的分析，包括静态资源文件，网络，DOM和timeline等。下载安装之后打开发者工具就到下图的按钮，点击分析即可得到一份全面的报告。
阅读全文
http://www.iunbug.com/archives/2012/06/14/353.html
PageSpeed Insights早在2年前google就推荐了这个工具的预览版，现在他们推荐一个功能全面的2.0版本。作为Chrome开发者工具的扩展。可以对你的网站进行全面的分析，包括静态资源文件，网络，DOM和timeline等。下载安装之后打开发者工具就到下图的按钮，点击分析即可得到一份全面的报告。 阅读全文
2012年6月12日
摘要：
这是我们目前所知iOS6的Mobile Safari给前端开发者所带来的，我期望在接下来的Beta版中惊喜更多用户体验更好。
可远程调试的Web检查器
之前的开发工具对iOS来说实在太少，就一个功能单一的console.log，根本没法查看页面结构。 iOS6的Safari Web检查器引入了 ‘Remote Debugging’（远程调试） 界面， 同时支持iPhone和iPad。
它功能和使用就像Chrome for Android 的远程调试工具 , 在桌面上的Web检查器选中的元素在iOS设备上就会被高亮。
重点是，之前可用的仅是嵌入式的 Firebug Lite，虽然强大但不支持触屏设备。
据我所知，残废得只有Console的开发工具已经把移除了。
http://www.iunbug.com/?p=339 阅读全文
2012年6月11日
摘要：
阅读全文
文档化你的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/ 阅读全文
2012年6月7日
摘要：
背景：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/ 阅读全文
2012年6月6日
摘要：
到目前，本系列文章集中讲了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/ 阅读全文
摘要：
从这系列的以上文章中，你已经学到以传统的方式使用文件。你可以上传文件到服务器，可以从硬盘中读取文件。这些都是最普遍的操作文件的方式。然而，还有一个全新的方式让你能简化任务，就是使用 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/ 阅读全文
2012年6月5日
摘要：
浏览器通过FileReader 对象从文件中读取数据比较好理解。在上篇文章中， 你学到如何轻松的使用 FileReader 的各种格式从文件中读取数据。FileReader 在很多方面与 XMLHttpRequest 非常相似。
进度事件
进度事件虽如此普遍事实上它们是在另外的规范中提出的[1]。 这些事件是专门为展示数据的传输过程而设计的。比如使用FileReader 从服务器或者硬盘中读数据的过程。
六个进度事件如下：
loadstart – 表明进度开始。这是第一个触发的事件。
progress – 数据加载过程中不停觖发.
error – 数据加载失败触发.
abort –当调用 abort()来取消数据加载时触发 (XMLHttpRequest和FileReader通用).
load – 全部数据成功加载完毕触发。
loadend – 加载结束时触发，无论是error, abort, 或者 load都触发。
上篇文章中已经提到过error 和 load，其他事件将让你能够更细粒度的控制数据传输。
阅读全文 阅读全文
摘要：
在上篇文章中,我介绍了在JavaScript操作文件，重点讲了如何取得File对象。 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到。有了文件当然接下来就是读取文件了。
FileReader
FileReader 功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest 一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。
FileReader 可以返回几种格式来文件数据的格式， 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕：
readAsText() – 返回文件内容的纯文本格式
readAsBinaryString() –返回文件内容的二进制格式 (不推荐– 推荐使用 readAsArrayBuffer())
readAsArrayBuffer() – 返回文件内容的 ArrayBuffer 格式(图片文件推荐使用)
readAsDataURL() – 返回文件内容的 data URL格式
阅读全文 阅读全文
摘要：
多年前,我在Goolge面试中被问及哪些改变会能使我得以提高Web的用户体验的。 在我的心目中的第一位是有不用 控件实现文件操作的办法。尽管Web的多数部分已经改变，但操作文件还是最原始落后的方式。终于，HTML5新的API到来了，在较新的桌面浏览器中我们有更多操作文件的方式了 (iOS 暂时不支持)。
文件类型
文件类型定义在 File API[1] 的规范里，并且是File的抽象. 每个File实例都有以下属性:
name – 文件名
size – 文件的大小字节数
type – 文件的MIME type
一个File对象给出了一个文件的基本信息而无需直接访问文件内容。这点很重要，因为读取文件需要进行磁盘操作，文件的大小直接影响了读取过程消耗的总时间。一个File对象实是一个文件的引用，而获取文件的内容则是另一个完全不同的过程。 阅读全文
2012年6月3日
摘要：
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的执行 阅读全文
2011年7月23日
摘要：
sencha touch 跟Ext js一个提供了丰富且高级的组件让我们能快速的开发出一个跨手机平台而且很绚丽的产品,这听起来不错,但很快我们发现了一个严重的问题,手机上的效果根本没有在PC上用chrome打开的效果一样让人有刷刷的快感(#@#$$#@$#),甚至让人痛苦. sencha touch和ext一样,组件是类式继承的,大大降低了使用和学习的周期.但缺点也是很明显的,你每增加一个组件,内存消耗就增加很多,可能你已经使用minify/JSBuilder/YUI compressor等工具压缩过你的代码了,如果性能还不佳,那么可以看看以下是个人的一点建议
http://www.iunbug.com/article.html?objNews.id=277001 阅读全文
摘要：
Node.js,socket.io是什么这里我就不再多说了,很多人一直想实现一个在线 聊天的项目,现在主要把自己的配置笔记分享给大家,让更多朋友不必为此走弯路了,跳转看详情
http://www.iunbug.com/article.html?objNews.id=276003 阅读全文
2011年7月18日
摘要：
sencha touch 的list,性能非常的低,官方论坛有人说超过200个项就已经是超标了!但事实上超过40个项就非常卡了,尤其是每个项里还有图图片的时候,在iphone中可能效果不错,但到了android,你可能会摔手机.
卡的原因其实是元素太多,必需限制显示的数据,但又要解决上滚和下滚显示相应的项,有人会想到用分页,其实分页相当的麻烦,下面就说一个鄙人奋战了一天摸索出来的方法,仅仅三步,几行代码,你看了也会会心一笑.
http://www.iunbug.com/article.html?objNews.id=246003 阅读全文
2011年7月16日
摘要：
要Google+邀请的速速转到以下连接去留下你的Gmail!!
http://www.iunbug.com/article.html?objNews.id=245001 阅读全文
2011年6月18日
摘要：
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 阅读全文
2011年5月26日
摘要：
sencha touch带来了最新的风格定义方案, 使得自定义风格变得非常简单也非常有效果,比如你想你的应用换一个颜色仅仅需要一行代码就能够达到,想定义一个按钮,仅一个样式就得到圆形,向前,向后等各种样式的风格按钮,因为有一套工具来帮助我们更容易的达到目的.跳转看详情.
http://www.iunbug.com/article.html?objNews.id=234001 阅读全文
2011年5月19日
摘要：
4.0正式版还没出到一个月,第一个小版本的更新4.01就发布了,别看版号小,但性能竟然提高达300%,比如4.0中,追加大批量的列很快,但是追加大批量的行却很慢的会导致最终执行慢.非常值得更新.跳转看详情.
http://www.iunbug.com/article.html?objNews.id=233002 阅读全文
2011年5月18日
摘要：
作者通过一个HTML5小游戏实例解说开发sencha touch应用如何实现离线存储,跳转看详情!
http://www.iunbug.com/article.html?objNews.id=233001 阅读全文
2011年5月15日
摘要：
[推荐]FACEBOOK是如何管理代码的
所属分类:面包屑 最后编辑:2011-05-14 17:42
为何facebook可以挖这么多优秀的工程师去?是什么原因让facebook成为工程师的天堂?看看facebook如何管理代码或许会明白.
跳转看详情!
http://www.iunbug.com/article.html?objNews.id=231002 阅读全文
2011年5月14日
摘要：
Ext js 4中最大的特性就是Data可以懒载入了,Grid中使用Data是最非见的,一个最佳的实践就是通过Grid做个类似Twitter的无限翻页,跳转看详情!
http://www.iunbug.com/article.html?objNews.id=232001 阅读全文
摘要：
Sencha Animator 是目前最图形化的 CSS3动画设计的图形设计器,这次更新不仅带来三个新的编辑器( Color Picker, a Gradient Editor and a Easing Curve Editor)而且意外的发现,无论是linux上还是MAC上当然window上都有一相应的版本,如果学学习最精练的CSS3那么这是个不错的帮手,跳转看详情!
http://www.iunbug.com/article.html?objNews.id=231001 阅读全文
2011年4月28日
摘要：
http://www.iunbug.com/article.html?objNews.id=230001
2011年4月26日,这是一个曾经值得期待如今值得庆贺的日子!是sencha的里程碑,也是Ext js 的里程碑,经过5个预览版和3个Beta版本后,Ext js 4.0 正式发布!
一.学习门槛变低了,更加实用的实例,更加清楚详细的文档.(不用再对着Ext js的强大流口水却只是去用jQuery了)
二.更加剽悍的内核
1.一个完善的测试框架.(终于可以像JAVA一样来个单元测试,或者高级点来个TDD开发吧,再进一步点直接XP编程吧!)
2.更加清晰灵活的系统类库.组件动态加载,混合组件,可活用的依赖库.
3.沙箱模式.(不必每次要给项目新增组件时都为一点资源开销而讨论得面红耳赤了)
4.MVC模式的开发.(想改点皮肤?美工不懂JS就算了!不!Ext js 4.0满足了男女搭配干活不累的愿望)
5.SKD Tools.(又是一个惊喜,不过目前还是Beta,想想toou版是不是...???YY吧)
三.最新特性
1.强大的图表类库包.不时用得不多,估计是慢慢展现 阅读全文
2011年3月31日
摘要：
http://iunbug.appspot.com/article.html?objNews.id=228001 阅读全文
2011年2月21日
摘要：
Ext JS 4 倒计时之开发者预览版正式发布(下载)
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-02-21 11:42
Ext js 4很快要与我们见面了,我相信众多正在使用目前3.X版本的Ext js 的前端开发程序员们肯定很期待,3.X版本中太多的杯具和吃力的开发会因为4.0的发布而成为历史.
本预览版尽管并没有提供一个完整的EXT JS 4,但实例中我们已经收获太多的惊喜,一起下载好好享用享用吧,跳转下载..
http://iunbug.appspot.com/article.html?objNews.id=226001 阅读全文
2011年2月14日
摘要：
彻底研究jQuery 1.5的重头戏之延迟特性
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-02-13 07:36
jQuery 1.5已经如期而至了,相信多人已经部署到项目当中,jQuery 1.5中80多个BUG的修正,.sub()方法的方便,重写的AJAX,当然还有本文中提到的延迟对象,跳转看详情...
http://iunbug.appspot.com/article.html?objNews.id=222002 阅读全文
摘要：
Ext JS 4 倒计时之Model抢先深入详解
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-02-13 07:23
Ext js 4很快要与我们见面了,我相信众多正在使用目前3.X版本的Ext js 的前端开发程序员们肯定很期待,3.X版本中太多的杯具和吃力的开发会因为4.0的发布而成为历史.
前面的文章里提到Ext js 4给我们带来的变化和改善之一的Data 库包,这里再次深入详解Ext js 4的Model流程吧,跳转看详情..
http://iunbug.appspot.com/article.html?objNews.id=221003 阅读全文
摘要：
Ext JS 4 倒计时之图表工具抢先详解
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-02-13 07:18
Ext js 4很快要与我们见面了,我相信众多正在使用目前3.X版本的Ext js 的前端开发程序员们肯定很期待,3.X版本中太多的杯具和吃力的开发会因为4.0的发布而成为历史.
Ext js 4的图表从IE6到IOS都是通吃的哦,跳转看详情..
http://iunbug.appspot.com/article.html?objNews.id=223001 阅读全文
摘要：
Ext JS 4 倒计时之Data库包抢先详解
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-02-13 07:27
Ext js 4很快要与我们见面了,我相信众多正在使用目前3.X版本的Ext js 的前端开发程序员们肯定很期待,3.X版本中太多的杯具和吃力的开发会因为4.0的发布而成为历史.
那么就让我们先看看Ext js 4给我们带来的变化和改善之一的Data 库包吧.
http://iunbug.appspot.com/article.html?objNews.id=221002 阅读全文
摘要：
彻底研究jQuery 的.bind(),.live() 和 .delegate()的使用和区别
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-02-14 00:48
很多人对jQuery 的.bind(),.live() 和 .delegate()方法使用起来很迷惑,不知道其中的区别和何时使用才算适当,那么我们就来彻底研究这三个方法的不同和使用例子吧,跳转看详情...
http://iunbug.appspot.com/article.html?objNews.id=221001 阅读全文
2011年1月26日
摘要：
http://iunbug.appspot.com/article.html?objNews.id=217001
JQUERY 1.5 RC1发布,31号出正式版本.
所属分类:RIA(jQuery,Ext js) 最后编辑:2011-01-25 14:05
jQuery一如既往的速度,新年就给我们带来jQuery1.5版本,现在想知道新特性的可以下载jQuery 1.5 RC 来看看源码..跳转看详情...
http://iunbug.appspot.com/article.html?objNews.id=217001 阅读全文
2011年1月14日
摘要：
李开复再出新书--《微博：改变一切》
http://iunbug.appspot.com/article.html?objNews.id=212001
李开复老师最近勤更新自己的twitter,果然是有动静,最新的一条帖子里表明春节新书《微博：改变一切》将与大家见面.跳转看详情... 阅读全文
2011年1月6日
摘要：
http://iunbug.appspot.com/article.html?objNews.id=211001
自从android出来后把手机应该的开发推向了另一个高潮,正当众多开发者热衷于开发IOS游戏应用时,他们更多的人选择了把握android这个大蛋糕,但可惜,目前android的游戏应用还是良莠不齐,更致命的是平台太多太杂,很多开发者并没有得到预期的收获,不过有的人却成功了,那么我们看看这里面是不是有什么窍门呢?跳转看详情.. 阅读全文
2011年1月4日
摘要：
http://iunbug.appspot.com/article.html?objNews.id=210001 阅读全文
2010年12月22日
摘要：
[教程]Ext Designer 中构建可重用可自定义的组件最后编辑:2010-12-22 02:39[教程]Ext Designer 中构建可重用可自定义的组件最后编辑:2010-12-22 02:39[教程]Ext Designer 中构建可重用可自定义的组件最后编辑:2010-12-22 02:39[教程]Ext Designer 中构建可重用可自定义的组件最后编辑:2010-12-22 0... 阅读全文
|
浙公网安备 33010602011771号