你是否遇到过这样的情景：

1、用 gif 格式的 loading 菊花会有背景颜色，与页面背景格格不入
2、于是，设计师给你一帧一帧变化的透明 png 合图，你能想到的就是用 JS 来控制
3、最终，你会发现用 JS 控制的 loading 菊花，对网页性能有一定的影响

        好在现在，这个 HTML5 到来的时代，如果你不用考虑浏览器兼容问题，你就可以用 CSS3 轻轻松松实现透明 loading 菊花的加载效果，下面的Step By Step 会让你茅塞顿开：

摘要

        Live Reload 是一个旨在提高 web 前端开发者开发效率的 chrome 扩展。当你在心爱的编辑器中更新页面资源（html,js,css）的时候，Chrome 浏览器会自动获取最新的文件并重新载入，避免开发过程需要频繁按 F5 页面的烦恼。特别适合在双屏环境下进行 web 前端开发，不必在编辑器和浏览器之间不停的切换，大大提升开发体验。

每个人在工作中成长，职业化都是一个必经之路。

这是一个渗透进细节和个人工作习惯之中的一个问题，不积跬步，无以至千里，不积小流，无以成江海。关于职业化行为以及怎么来职业化，做了一些思考，希望能沉淀下来，勉励自己，也和大家共勉。

Windows 版

Mac OS X 版

一开始是由于他的迷你地图模式而吸引我的注意力的，这个迷你地图可以概览整个文件。实现快速跳转。这个是个亮点，在其他编辑器中都没有见过此类功能。然而试用了之后我很快发现，迷你地图功能可能未必好用，但真正让我觉得舒服的是，他的 zencoding 支持的非常完美，直接有实时预览功能。

当我们进行游戏开发时，很多时候都需要用到一些几何知识，该文主要是抛砖引玉，通过一个 HTML5 的圈泡泡小游戏介绍下游戏开发中一些几何知识的运用。 游戏 demo 可以看这里：HTML5 圈泡泡小游戏 demo 游戏中一个最主要的操作就是通过鼠标的圈选，捕获选区内的小球并得分（或扣分）。我们一步步来分析这个操作。

Step1：画笔的形成。

首先是，怎样通过鼠标画出一个条条曲线？我们知道，HTML5 游戏的开发中，我们看到游戏里每个动作的更新，都是通过循环中每一帧对游戏元素属性的更新而形成的。因此我们只需要在每次帧更新的时候根据鼠标上一次更新时的位置与本次帧更新的位置画出一条线段，那么在游戏无数次的循环中，鼠标划过的位置就由 N 条线段连成一个轨迹，如果我们把线段都绘制出来，画布上就是一条条曲线或一个个圈。 因此我们也可以说，曲线是一条由多条线段首尾相连的线段组成的 。

2013 年毕业的童鞋们，如果你们对熟悉并热衷于前端开发，有一定计算机编程基础。诚挚邀请你们加入 Tencent 进行实习工作，表现优秀可直接录用。

• 对前端开发，交互设计，用户体验有极大兴趣和热情
• 熟悉 html，css，js 的编码，使用过主流的 js 框架并对其有自己见解。
• 关注业界前沿技术，有自己独立的判断和思考
• 性格开朗，沟通能力强，良好的团队协作能力
• 2013 年毕业的本科生或研究生 🙂

PS:

• 有自己独立作品和 blog 者优先
• 参与或贡献过开源项目者优先
• 对 Html5 相关技术有过研究和实践者优先

这里有优秀的团队，丰富的资源，等待着你的参与，与我们共画一片童话般的世界。

请发简历到 Kinvix<at>QQ.com

什么是本地存储

以下内容从网上抄来的

HTML5 storage 提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 cookie 都会被发送过去。HTML5 的 storage 是存储在你的计算机上，网站在页面加载完毕后可以通过 Javascript 来获取这些数据。
简单的说本地存储是 HTML5 的一部分。更为详细准确的说是本地存储过去是 HTML5 的标准中的一部分，而后来由于有些工作组的人表示 HTML5 太庞大了，于是就剥离出来作为一个单独的标准。这听起来好像是把一块馅饼分成很多块目的是为了减少总的卡路里……

为什么要用本地存储

其实前面已经提到了，用本地存储有这些好处

• 本地存储和 cookie 一样提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在
• 大！虽然不同浏览器的标准可能不一样，主流的一般都在 5~10M，比 cookie 的 4k 强多了
• 本地存储的数据不会被发到服务器，与 cookie 相比，节省带宽，加快响应速度

所以，如果需要保存一些数据到用户的浏览器，而这些数据又不需要每个请求都提交给服务器，不妨考虑使用本地存储。

如何使用

首先，得检查浏览器是否支持本地存储
可以通过检测 window 下面是否有 localStorage 字段来判断，但是在 IE 下，本地文件是不能访问 localStorage 的，此时 localStorage 字段为空，所以还要加上判断

还有一种情况，假如页面里有 id 为 localStorage 的元素，某些浏览器可以通过 window.localStorage 索引到这个元素-___,-||
为了避免你的代码在遇到如此蛋疼的 DOM 时跪掉，我建议是使用特征检查

2012 年 3 月 24 日及 25 日，HTML5 研究小组携手腾讯 Q+前端团队、中青宝互动（本次活动由中青宝互动全程赞助）在深圳中青宝成功举办广东省首期 HTML5 Code Jam！活动现场参赛者活力四射，激情投入，在经过近 32 小时的沟通协作及相互配合后，最终创作的作品在整体质量上超越北京、上海场。

HTML5 Code Jam 现场开发是 HTML5 研究小组在国内的首创现场开发模式，开发者\策划师\设计师齐聚一堂，现场组队\开发并完成项目。通过认识朋友、团队协作、快速挖掘潜能，高效解决大家在开发过程中遇到的问题并历练自己。

话说, 很久很久以前, 一直到不久前, 浏览器原生的 checkbox(复选框) 的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事.

而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让 checkbox 外观一统江湖, 苦不堪言.

在那个时代, css2 和 dom level2 风行, 却对 checkbox 束手无策, 苦逼的攻城师们只能用 JS 来模拟 checkbox 的行为, 无辜的 checkbox 只能灰溜溜的束之高阁~.~

首先说这是一个神奇的播放器，为什么神奇呢，先直接看最终成果：

点击我查看 demo