原先的RSS Feed源都是整合在FeedSky，但目前FeedSky已接近”倒闭”，其RSS Feed已经不再更新,所以老读者们可能在RSS阅读器中无法获取彬Go博客的新内容~请各位订阅的读者重新订阅彬Go博客新的RSS源，地址如下：http://blog.bingo929.com/feed(长期有效)http://feed.feedcat.net/bingo929 ...继续阅读 (15)

Allo’Allo’。大多数人都很清楚高效的Web应用开发有多重要。在你进行某些乏味的项目开发时，你会因为各种令你头痛的事情而感到焦虑、烦躁，比如寻找项目模板、配置项目基础架构、开发环境、测试环境以及后续的项目优化和压缩。这种枯燥乏味如流水线般的事情，偶尔一次还好，但如果周而复始的进行类似的项目，你的脑袋不会炸掉才怪！幸运的是，有一些先进的前端工具能帮我们自动化完成这些事情，让我们远离乏味的流水线工作，将更多的精力放在核心功能编码上面。本文会向你展示如何使用Yeoman和Polymer高效完成这些任务，Yeoman用来自动化创建Web应用工作流，而Polymer则是由加盟Google的原Palm webOS开发团队打造的一个前端库，其基于Shadow DOM、Custom Elements、MDV等最新浏览器特性，使用Web Components来填充和装饰Web应用。您还可以参考以下前端技术相关文章:《使用CSS3开启GPU硬件加速提升网站动画渲染性能》《人人网首页拖拽上传详解(HTML5 Drag&Drop;、FileReader API、formdata)》《关于HTML 5 canvas 的基础教程》《精选15个国外CSS框架》本文翻译自英文原文《Building Web Apps With Yeoman And Polymer》,由于英文原文内容很 ...继续阅读 (25)

注意:这篇文章介绍的 API 尚未完全标准化，并且仍在变动中，在项目中使用这些实验性 API 时请务必谨慎。引言现在的 web 严重缺乏表达能力。你只要瞧一眼“现代”的 web 应用，比如 GMail，就会明白我的意思：堆砌一点都不现代。然而可悲的是，这就是我们构建 web 应用的方式。在现有基础上我们不应该有更高的追求吗？您还可以参考以下HTML5/CSS3相关文章:《使用CSS3开启GPU硬件加速提升网站动画渲染性能》《HTML5 WebSockets 基础使用教程》《关于HTML 5 canvas 的基础教程》《让所有IE支持HTML5的解决方案》时髦的标记，行动起来!HTML 为我们提供了一个完美的文档组织工具，然而 HTML 规范定义的元素却很有限。假如 GMail 的标记不那么糟糕，而是像下面这样漂亮，那会怎样？="Paul, Addy">="Paul"profile="profile.png"profile="118075919496626375791"datetime="2013-07-17T12:02">Feelin' this Web Components thing.Heard of it?...查看演示(需翻墙)真是令人耳目一新！这个应用太合理了，既有意义，又容易理解。最妙的是，它是可维护的，只要查看声明结构就可以清楚地知道它的作用。自定义元素，救救我们！就 ...继续阅读 (12)

最近几周一直在搞自己的个人网站，一来是为了总结一下近几年自己的前端职业历程，二来是希望把这个网站做成自己的Web版个人履历/简历。网站首屏会有一个跟随鼠标进行空间透视移动的DOM动画效果，这里用到了一些JS逻辑，由于涉及到动画和性能问题，这里简要总结一下开发过程中遇到的一些问题。想来博客已经近两年没有更新过了，甚感愧疚，2014年一定一定一定会勤快些的！个人网站Demo预览大家看过网站之后，应该能大致了解到，动画中使用了很多大尺寸半透明PNG24图片，具体尺寸取决于你电脑的分辨率，目前会根据1920/1440/1024这三种分辨率宽度加载不同尺寸的图片。动画逻辑是每个图片都会以不同的速度跟随鼠标移动，以达到空间感很强的透视效果。具体的js逻辑我会在以后单独写一篇讲解，还会把这个动画写成jQuery插件提供给大家下载，敬请关注^_^先来说说遇到的问题：网站本身设计初衷就没有打算支持IE8及以下版本浏览器，并不是因为代码兼容性问题，而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户，毕竟是我自己的网站，所以我说了算！哈哈~没有了低版本IE6浏览器，就不用顾虑他们的性能问题了，本以为开发会一帆风顺，结果”性能问题”竟然出现在了一直以性能出色著称的Chrome浏览器中。Chrome下的动画比IE9和FF都要慢很多，一开始觉得是自己的js逻辑问题，因为要遍历9个元 ...继续阅读 (19)

早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。到现在，这个功能已经上线了整整半年，这篇文章也足足拖延了半年才分享给大家，实在是对不住了，呵呵，今后彬Go一定要勤奋发Blog！您还可以参考以下HTML5/CSS3相关文章:《使用CSS3开启GPU硬件加速提升网站动画渲染性能》《HTML5 Drag&Drop; 拖拽、FileReader实例教程》《HTML5 WebSockets 基础使用教程》《关于HTML 5 canvas 的基础教程》《让所有IE支持HTML5的解决方案》《一起感受HTML5和CSS3的能量》关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览器”。本次拖拽上传的宣传口号：你敢”脱”，我就敢上传…言归正题，首先看看效果，大家如果有人人网帐号的话可以在首页试一试拖拽上传 ...继续阅读 (41)

上周六有幸同我们人人网的几个同事一起去Google总部参加了《给力HTML5 —— 2011 Google HTML5 训练营》，从下午1点多到晚上9点多8个小时左右的时间，收获还是很大的，8个小时的时间把以前一直想学或想做的事情都给搞了一些。好久没有写博客了，今天也该分享些给力的东西了，正好借此次机会跟大家分享些HTML5相关的给力的技术（sessionStorage、localStorage、Web SQL DateBase、Indexed DB、Canvas绘图、FileReader、Drag&Drop…），何止是给力，简直就是给力！您还可以参考以下HTML5相关文章:《HTML5 WebSockets 基础使用教程》《关于HTML 5 canvas 的基础教程》《让所有IE支持HTML5的解决方案》《一起感受HTML5和CSS3的能量》Google HTML5 训练营先简单介绍一下这个训练营的活动流程：1:00 – 1:30 注册1:30 – 2:30 HTML5 技术剖析技术讲座1 —— Google 工程师技术讲座2 —— 特邀嘉宾（李靖威、李继成，就职于人人网）2:30 – 3:00 宣布竞赛规则，开始组队3:00 – 6:30 作品创作 / 提交6:30 – 7:00 作品展示7:00 ...继续阅读 (12)

前言良好的JavaScript书写习惯的优点不言而喻，今天彬Go向大家推荐DojoJavascript编程规范，相当不错的 Javascript 编程风格规范，建议大家可以借鉴一下此规范编写 Javascript。感谢i.feelinglucky的翻译。序Any violation to this guide is allowed if it enhances readability.所有的代码都要变成可供他人容易阅读的。快读参考核心 API 请使用下面的风格：结构规则注释模块小写不要使用多重语义（Never multiple words）类骆驼公有方法混合其他的外部调用也可以使用 lower_case()，这样的风格公有变量混合常量骆驼 或 大写下面的虽然不是必要的，但建议使用：结构规则私有方法混合，例子：_mixedCase私有变量混合，例子：_mixedCase方法（method）参数混合，例子：_mixedCase, mixedCase本地（local）变量混合，例子：_mixedCase, mixedCase命名规范1.变量名称 必须为 小写字母。2.类的命名使用骆驼命名规则，例如：Account,EventHandler3.常量 必须 在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义，并且其成员 必须 使用骆驼命名规则或使用大写：varNodeTyp ...继续阅读 (16)

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。您还可以参考以下HTML5/CSS3相关文章:《使用CSS3开启GPU硬件加速提升网站动画渲染性能》《关于HTML 5 canvas 的基础教程》《让所有IE支持HTML5的解决方案》《一起感受HTML5和CSS3的能量》什么是WebSockets？WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。WebSockets将会替代什么？WebSockets可以替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。一些AJAX应用使用上述技术-这经常是 ...继续阅读 (14)

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中彬Go将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。彬Go希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。您还可以参考以下HTML5和CSS3相关文章:《关于HTML 5 canvas 的基础教程》《用CSS3制作50个超棒动画效果教程》《5个CSS3技术实现设计增强》《让所有IE支持HTML5的解决方案》《一起感受HTML5和CSS3的能量》《提升你设计水平的CSS3新技术》HTML5 & CSS3 准备就绪该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。HTML5安全手册CSS3按钮生成器所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。When can I use…（HTML5 & CSS3 浏览器兼容性）很详细的关于HTML5, CSS3, SVG ...继续阅读 (10)

HTML 5 规范引进了很多新特性，其中最令人期待的之一就是canvas 元素。HTML 5canvas 提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的API提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括Opera,Firefox,Konqueror和Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas ：下载支持 3D canvas, HTML video 和 File I/O 的 Opera关于 Opera 3D canvas 上下文的文章关于 Firefox 3D canvas上下文的文章本文介绍 2D canvas基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。可以点击此处批量下载本文实例代码目录简述canvas 基础2D context API基本线条路径插入图像像素级操作文字阴影颜色渐变小节canvas 基础创建 canvas 的方法很简单，只需要在 HTML 页面中添加 ...继续阅读 (12)

CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)您还可以参考以下CSS3相关文章:《使用CSS3开启GPU硬件加速提升网站动画渲染性能》《5个CSS3技术实现设计增强》《一起感受HTML5和CSS3的能量》《提升你设计水平的CSS3新技术》1.CSS3实现钟表效果(基于jQuery)使用CSS3的基本变形特性:rotate，并结合了jQuery这类javaScript框架制作的CSS3时钟效果。2.模拟时钟模拟时钟基于过渡webkit和CSS3变形，javascript用于将其按当前时间转动。3.可使用箭头键旋转的3D立方体你可以使用上、下、左、右方向键控制这个3D立方体，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。4.多种3D立方体(淡入淡出)多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’ ，我个人觉得效果很震撼，你能看到写在3D立方体上的透视感极强的文字。5.CSS3手风琴效果使用CSS3实现 ...继续阅读 (4)