看 andy 的《PM 如何突破工程师心防?》和《工程师如何不被 PM 欺负》感触了一下，欢迎拍砖，讨论。

从团队角度说产品经理和开发工程师应该是一条战线上的兄弟，因为大家的目标是一致的。无论是产品经理和开发工程师大家都想把产品和项目做好，这里我们可以说：“志同”。

几乎所有互联网巨头都会开放自己的 API，但是对于开发者来说试新 API 却是件棘手的事。在开始写第一行代码之前，也许得折腾几个小时来做好设置、获得权限，还得先学习语法。因此，由 Amazon 前员工设立的初创企业CodeNow.com瞄准了这一点需求，帮助开发者简化测试 API 前的准备步骤。

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

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

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

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

Step1：画笔的形成。

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

什么是本地存储

以下内容从网上抄来的

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

====索引=====

【Web 缓存机制系列】1 – Web 缓存的作用与类型

【Web 缓存机制系列】2 – Web 浏览器的缓存机制 

【Web 缓存机制系列】3 – 如何构建可缓存站点

【Web 缓存机制系列】4 – HTML5 时代的 Web 缓存机制

【Web 缓存机制系列】5 – Web App 时代的缓存机制新思路

【Web 缓存机制系列】6 - 进击的 Hybrid App，量身定做缓存机制

============

Web App 的概念逐渐被业界认可，各大互联网公司也纷纷推出 Web App 开发大赛，积极引入到他们的开放平台，比较著名类似 facebook 农场，qzone 偷菜之类的。Web 开发逐渐从 Web Page 的进入到 Web App 的时代，想详细了解的话，可以看下超叔在 D2 上分享的分享《开放时代：从 Web Page 到 Web APP》视频、Slide。

Web App 常见架构

以 WebQQ 例，WebQQ 这个站点的所有内容都是一个页面里面呈现的，我们看到的类似 windows 操作系统的框架，是它的顶级容器和框架，由 AlloyOS 的内核负责统筹和管理，然后其他模块，比如壁纸设置，消息中心，App Store 都是以模块的形式，并用 iframe 的方式嵌入到顶级容器中。具观察，现在越来越多的 Web 应用都倾向于使用这个的架构，这样做好处是很明显的，比如顶级框架可以维持一个不变的 javascript 上下文便于管理；关闭模块的 iframe 后，内存可以更好的释放；利用 iframe 的安全机制最大限度的保证内核的安全和稳定等等。

这种 Web 的架构，其实也给我们 Web 前端提供了从代码逻辑层面上给 Web 应用实现缓存提供了可能。

====索引=====

【Web 缓存机制系列】1 – Web 缓存的作用与类型

【Web 缓存机制系列】2 – Web 浏览器的缓存机制 

【Web 缓存机制系列】3 – 如何构建可缓存站点

【Web 缓存机制系列】4 – HTML5 时代的 Web 缓存机制

【Web 缓存机制系列】5 – Web App 时代的缓存机制新思路

【Web 缓存机制系列】6 - 进击的 Hybrid App，量身定做缓存机制

============

随着现代浏览器的推动，Flash 放弃对移动端的支持，HTML5 无疑成为当前 Web 前端炙手可热的话题。各大游戏开发商、App 开发商纷纷投入人力进行研究和技术储备。相信不久的将来，HTML5 会迎来一个快速发展和普及的春天。那么，HTML5 这个新一代的标准，又给我们带来哪些缓存机制呢？