开篇

现在 Web 富应用越来越多, 越来越多网站朝单页面发展, 所有功能模块都在一个页面中创建. 作为一个合格的前端, 所负责的模块一定是逻辑跟 UI 分离的, 通常的做法就是页面代码编写成模板, 然后往模板填充数据并输出到页面上. 关于前端模板的介绍和使用我就不说了, 不了解的可以先看看这篇文章 (http://www.css88.com/archives/4564), 这里讨论下使用模板引擎引入的另外一个问题 (也不是 Bug 啦~) -- 页面模板代码放哪?

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

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

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

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

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 时跪掉，我建议是使用特征检查