BINGO929.COM

blog.bingo929.com

彬Go——关注前端开发/前段性能优化/WebUI网页设计/交互体验

http://blog.bingo929.com/index.php

则是由加盟Google的原Palm webOS开发团队打造的一个前端库，其基于Shadow DOM、Custom Elements、MDV等最新浏览器特性，使用Web Components来填充和装饰Web应用。 这篇文章介绍的 API 尚未完全标准化，并且仍在变动中，在项目中使用这些实验性 API 时请务必谨慎。 人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata). 哦，Sorry, 是 拖拽上传. 给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程). 上周六有幸同我们人人网的几个同事一起去Google总部参加了 给力HTML5 2011 Google HTML5 训练营. 规范自己的JavaScript书写 – Dojo Javascript 编程规范. 编程规范，相当不错的 Javascript 编程风格规范，建议大家可以借鉴一下此规范编写 Javascript。 关于HTML 5 canvas 的基础教程. 关于HTML 5 canvas 的基础教程.

blog.bingo929.com

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) | 彬Go

http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata). 哦，Sorry, 是 拖拽上传. 关于HTML 5 canvas 的基础教程. 人人网当时也向广大用户推出升级浏览器活动，并喊出口号 ”工欲善其计算机，必先利其浏览器”。 本次拖拽上传的宣传口号 你敢”脱”，我就敢上传…. FormData是基于 XMLHttpRequest Level 2. 关于Drag&Drop拖拽事件，之前我写过一篇专门介绍的文章 给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程). 那篇文章详细讲解了Drag and Drap事件的原理和代码实例，这里的拖拽上传实现原理基本上是一样的，大家有兴趣或不太了解的话可以先看看那篇文章，我在这里就不再过多啰嗦了 下面直接出拖拽上传简要代码实例. 拖来拖去 , 一定要注意dragover事件一定要清除默认事件. 获取文件数据 HTML5 File API. 中我也有介绍过关于File API中的FileReader接口，作为 File API. Just leave a c...

blog.bingo929.com

很久以前的工作记录 | 彬Go

http://blog.bingo929.com/category/my-works

人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata). 哦，Sorry, 是 拖拽上传. 这次是我业余威克生涯的第三次中标，而且是一次中了两标，不过都是属于同的个网站的项目，分别是” My Language Town网站风格美工设计. 客户的评价: 总体来说还可以，其中Logo和导航条设计我感觉可以更好一些 我们是个服务型网站，所以我倾向于类似Youtube或者alibaba这样的导航 另外，找人搜索部分的Seach按钮最好不要跟边框放在一起，做页面的时候不好处理。 人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata). 给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程). 规范自己的JavaScript书写 – Dojo Javascript 编程规范. 关于HTML 5 canvas 的基础教程.

blog.bingo929.com

彬Go——关注前端开发/前段性能优化/WebUI网页设计/交互体验 - Part 2

http://blog.bingo929.com/page/2

自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如 article )的途径是使用 HTML5 shiv. 人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata). 给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程). 规范自己的JavaScript书写 – Dojo Javascript 编程规范. 关于HTML 5 canvas 的基础教程.

blog.bingo929.com

规范自己的JavaScript书写 - Dojo Javascript 编程规范 | 彬Go

http://blog.bingo929.com/dojo-javascript-style-guide.html

规范自己的JavaScript书写 – Dojo Javascript 编程规范. 编程规范，相当不错的 Javascript 编程风格规范，建议大家可以借鉴一下此规范编写 Javascript。 Any violation to this guide is allowed if it enhances readability. 不要使用多重语义 Never multiple words. 3常量 必须 在对象 类 或者枚举变量的前部声明。 6公有类的命名 必须 使用混合名称 mixedCase 命名。 7CSS 变量的命名 必须 使用其对应的相同的公共类变量。 8私有类的变量属性成员 必须 使用混合名称 mixedCase 命名，并前面下下划线。 变量 topic 为 Topic 类型的变量. 12变量如有较广的作用域 large scope ，必须使用全局变量 此时可以设计成一个类的成员。 而非 dojo.events.mouse.MouseEventHandler. MouseEventHandler as opposed to MouseUIEventHandler. TRY … C...

blog.bingo929.com

通过CSS3的-webkit-transform:translate3d开启GPU硬件加速提升网站动画渲染性能 | 彬Go

http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

样式 -webkit-transform:transition3d(0,0,0). 对所有动画DOM元素添加- webkit-transform:transition3d(0,0,0). 开启GPU硬件加速之后，又出现了一个chrome诡异的Bug，当你有多个position:absolute;元素添加 -webkit-transform:transition3d(0,0,0);. 3D CSS transform: translateZ causes elements to disappear in Chrome. Fixed attachment background image flicker/disappear in chrome when coupled with a css transform. 所以我的临时解决办法是，减少使用 -webkit-transform:transition3d(0,0,0). 2地址栏输入”chrome:flags”搜索”fps”，将”FPS计数器”开启，浏览器重启后右上角会实时显示帧速率。 关于HTML 5 canvas 的基础教程.

blog.bingo929.com

HTML5 WebSockets 基础使用教程 | 彬Go

http://blog.bingo929.com/html5-websockets.html

关于HTML 5 canvas 的基础教程. Http:/ ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js. Eg try 'hi', 'name', 'age', 'today' /. Socket has been opened! ChatLog, input, button, #examples'. P Oh no, you need a browser that supports WebSockets. How about a href=http:/ www.google.com/chrome Google Chrome /a? The user has WebSockets. The connect function code is below. P class=event Socket Status: '. P class=event Socket Status: '. P class=message Received: '. P class=event Socket Status: '. After study just a...

blog.bingo929.com

给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽 、FileReader实例教程) | 彬Go

http://blog.bingo929.com/google-enjoy-html5-drag-drop-filereaderenren.html

给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程). 上周六有幸同我们人人网的几个同事一起去Google总部参加了 给力HTML5 2011 Google HTML5 训练营. 好久没有写博客了，今天也该分享些给力的东西了，正好借此次机会跟大家分享些HTML5相关的给力的技术 sessionStorage、localStorage、Web SQL DateBase、Indexed DB、Canvas绘图、FileReader、Drag&Drop… ，何止是给力，简直就是给力. 关于HTML 5 canvas 的基础教程. 1:00 – 1:30 注册. 1:30 – 2:30 HTML5 技术剖析. 2:30 – 3:00 宣布竞赛规则，开始组队. 3:00 – 6:30 作品创作 / 提交. 6:30 – 7:00 作品展示. 7:00 – 7:30 评奖、颁奖. 文章用实例的方式讲了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。 过去我们想实现网页中的拖拽效...

blog.bingo929.com

彬Go——关注前端开发/前段性能优化/WebUI网页设计/交互体验 - Part 4

http://blog.bingo929.com/page/4

脚本，这些有趣的JS脚本可以帮助你快速方便的绘制图表 线、面、饼、条… ，其中包括jQuery、MooTools、Prototype和一些其它的JavaScript框架。 在中国，很多前端开发初学者都会把xHTML CSS页面制作说成 DIV CSS. 是什么意思，只知道盲目的追求DIV CSS，但在国外，是没有DIV CSS这个概念的，很明显如果单从字面上去理解，DIV CSS的网页就要全都是div，很明显是无法达到语义化标准的。 彬Go也希望通过博客让所有读者正视代码语义化的重要性，请把”DIV CSS”这个词从脑子中删除，用”xHTML CSS”替代吧. 如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML CSS处于懵懂状态，希望大家通过这43个”DIV CSS”实例教程学习到语义化xHTML CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。 Safari 4.0 beta版正式发布，Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。 关于HTML 5 canvas 的基础教程.

blog.bingo929.com

自定义元素--使用Web Components为你的HTML代码定义新元素 | 彬Go

http://blog.bingo929.com/custom-elements-html-web-components.html

这篇文章介绍的 API 尚未完全标准化，并且仍在变动中，在项目中使用这些实验性 API 时请务必谨慎。 你只要瞧一眼 现代 的 web 应用，比如 GMail，就会明白我的意思. 关于HTML 5 canvas 的基础教程. HTML 为我们提供了一个完美的文档组织工具，然而 HTML 规范定义的元素却很有限。 Feelin' this Web Components thing. /. 该规范只是 Web 组件模块提供的众多新 API 中的一个，但它也很可能是最重要的一个。 扩展已有 DOM 元素的 API. 这个限定使解析器能很容易地区分自定义元素和 HTML 规范定义的元素，同时确保了 HTML 增加新标签时的向前兼容。 第二个参数是一个 可选的 对象，用于描述该元素的 prototype。 要创建扩展自元素 B 的元素 A，元素 A 必须继承元素 B 的 prototype。 它们以继承某个特定 HTMLElement 的方式表达了 元素 X 是一个 Y。 你有没有想过为什么 HTML 解析器对非标准标签不报错 比如，我们在页面中声明一个. 8211; HTML 规范. 在 JS 中创建 DOM.