在最后我们将一起实现如下图水面波动的效果，不过阅读完本文，也将了解到这一思路的其他用法本篇默认读者本已经能读懂基本的glsl语言，语法不再做过多解释，如果有不理解可以翻看之前的文章有详细讲解用shader制作马赛克这是上帝的杰作：10行代码搞定“热成像”几款2077风格的shader

2D矩阵对旋转的局限性在之前的文章中我们讨论过旋转这件事，也说过用2阶矩阵描述的旋转：教练我想学矩阵很多成熟的框架/库也是基于矩阵这套逻辑来写的，比如说我膜拜的pixi.js

头“秃”来自“the book of shader”今天我的文章可能会有点抽象。我尽量“有图有真相”，不让大家的大脑内存泄漏！本文会讲到：transform 2D变换背后的数学原理如何直观理解一个矩阵齐次变换是什么？可能会涉及一些：逆矩阵()，正交()，向量的知识，用到的时候假装自己知道就可以了！但基本不会涉及3D，四元数，各类引擎中MVP...

与我交流过的绝大多数web开发者，都喜欢使用所有新的语法特性（如async/await，类，箭头函数等）。尽管所有现代浏览器都支持以上的语法，多部分开发者仍然会转译到ES5并且加上polyfill以便支持哪一小部分仍旧使用老版本浏览器的用户。

原文地址上周在JS圈中发生了意见相当重磅的事件。Vue的star数超过了React。 使用一个叫做Star History的工具，我们可以看到：React的大佬地位被迅速蹿升的Vue给取代了！ 每当一个流行框架出现时，总能引发那个框架“真的”更受欢迎，那个框架更强大的争论！ 纸面繁荣和实际使用 请不要会错意，近来我用Vue比react多得多。...

然而，这可能还不够。你有想过页面也许会加载许多实际不会用到的资源？通过懒加载，一种设计模式，来实现推迟初始化（加载/获取/分配）资源（代码/数据/静态资源）直到你需要使用的时候再加载。

Tree Shaking是一个针对ES6以上代码的清楚死代码的算法，也是Webpack 2最被期待的特性之一。通过清除未使用的ES6引用，Webpack能更助于压缩过程从而得到比之前更小的文件体积。

原文 Node.js开发者经常检测环境变量NODE_ENV，但你是否知道设置这个值同时也具有着某些别的意义？阅读本文你将发现这些。 NODE_ENV是一个在Express框架中极其常用的环境变量。用其确定应用的运行环境（诸如开发，staging，生产，测试...）。 通常，应用将会运行在开发环境。我们可以通过改变process.env.NODE_ENV来改变...

React Router 4与前代相比最大的变化莫过于其不再需要配置。相对的，应用服务为自身的"配置"，并确定渲染时该呈现的内容。这种新方式通畅运作良好，但还是可能跳坑的。

如果你想理解React Router，那么应该先理解history。更确切地说，是history这个为React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。

我发现当你在写React应用时，将组件分成容器组件与展示组件是一个好模式。如果你使用react已有一段时间了，你可能早就发现这件事了。这里有一篇文章对其进行了很好的解释，但我想补充几点。

github地址 现在我们对three.js的基本元素与如何用three.js搭建场景有了一定的了解后，本篇我们开始搭建村落中山坡，房屋等对象。 ps:如果没看过第一篇的请移步这里 山坡与草皮 思路 从图中可以看出山坡mesh的geometry在three.js中并未直接提供，demo的思路是由基本几何体BoxGeometry变形而来。这里说明一下，three.js构...

原文 高阶函数 在javascript中高阶函数实际上就是控制函数的函数，有别于普通函数传递变量，高阶函数传递的是函数，并且输出函数 这对于js初学者来说足够烧脑，也足够惊艳。初识时常常会被被震撼了，原来函数还可以这么用 {代码...} 这是《JavaScript设计模式与开发实践》的单例模式的一个高阶函数。 地址延迟搜索 对于...

原文链接 本文将带领读者以几何视角来理解矩阵，本文力求简洁，基本不涉及矩阵计算，相关概念请参阅相关教材，本文所有矩阵例子均使用二阶矩阵 空间与矩阵 矩阵的几何意义 矩阵是什么？从几何角度来看，每种矩阵都对应着一种特定的空间变换方式： 上图中的三个矩阵分别对应了空间的放大，斜切与旋转 点与图形 点／图形存...

原文地址SVN使用中心仓库作为开发者们的联络中心，并通过开发者们与中心仓库之间工作副本的变更集的传递来进行协作。这不同于Git中每个开发者都拥有自己的仓库副本，自己的本地历史与分支结构的协作模式。使用者通常需要共享一系列的提交而非一个单一的变更集。Git让你能够在不同仓库间分享整个分支而非从工作备份向中心...

使用任何版本控制工具的目的都在于记录你代码的变化。这可以给予你查看项目历史的能力，去发现谁做出了贡献，弄清楚何时产生了bug，回滚到错误的修改。但是，如果你无法定位，获取这些历史记录将变得毫无意义。这也是git log命令存在的理由。

原文地址Git是一切关于commit的艺术：你暂存commit，提交commit，浏览以往的commit，在不同的仓库切换commit，这一切使用不同的命令来实现。这些命令中大部分以各种形式操作commit，一些可以接受commit作为参数。例如，你可以使用git checkout命令来查看以往的commit，只需要传入该commit的哈希即可，抑或传入分支名在不...

git rebase因其“新手应当远离的Git黑魔法”的名号名声在外，但只要使用得当，其可以使团队开发变得无比轻松。本文将对比两个相似的命令：git rebase与git rebase来区分它们的使用场景，最终将“黑魔法”纳入自己的工作流中。

若你想让你的游戏有60桢／秒的体验，你必须要做的就是在16浩渺内完成所有事：子弹运动，创建实体，控制碰撞，轨迹，变换场景，控制输入，播放音效。主流的游戏循环中，你需要做到尽可能高效。即便在30桢／秒的体验中，你也只有32毫秒去完成这一切。特别是当你想要让游戏更加丰满时，速度与效率会显得尤为重要。

几周之前我和一位面试者畅谈了关于我们应该如何选择js框架。他指出当大厂开始公开它们的独家秘方，是多么令人兴奋。开发者内心独白：“这些大厂书写的js与我的不同，他们卓越且成功。他们组织js的方式比我好？我要接受它？”

如果你使用了CLI ，将会读取webpack.config.js文件（或是由 --config 选项传入的文件）。该文件以一下形式暴露配置对象（configuration object）：

你也许早已在项目中使用上了Animations 或 Transitions（如果还没有，可以阅读CSS-Trick’s almanac 关于animations或transitions的相关文章）。你会发现你的一些运动表现流畅，而另一些却不尽如人意，你想知道原因？

对于大型应用，将所有代码置于一个文件中是低效的，特别在某些代码块没有被加载的情况下。Webpack具有能将基础代码切分进能按需调用的“块（chunks）”中的特性。其中“块（chunks）”的概念在一些其他的打包工具中，被称之为“ 层（layers）”，“卷（rollups）”, 或是“片段（fragments）”。而这种能拆分基础代码的特性被称为“...

本篇讨论桌面浏览器，其目的是为了后续讨论类似的移动端行为提供一定基础。大量web开发者早已凭直觉理解了许多桌面端的概念。但是，在移动端这些概念将变得复杂起来，所以预先对这些我们熟知的术语进行讨论将有助于你对移动端浏览器行为的理解。

原文地址在webpack中通常使用插件来添加一些与打包相关的功能，例如BellOnBundlerErrorPlugin会通知你在构建过程的有哪些错误。 内置插件 可以在web pack的配置文件中使用内置插件特性： {代码...} 第三方插件 非内置插件则需要安装，如果发布在npm则通过npm安装，如果没有则通过别的方式： {代码...} 使用方法如下： {...

Loaders是应用于你app资源文件上的转换器。它们是执行在node端的函数，它们将源文件作为参数并将转换结果作为新的资源返回。例如，你可以使用loaders让web pack加载CoffeeScript或是JSX。

市面上的模块打包工具对大型应用（大型单页面应用）并不十分合适。因此急需开发出一款可以通过模块化将代码拆分与静态资源生成无缝结合在一起的工具。曾尝试从现有工具扩展，但实难达到所有目标。

CommonJS通过定义模块格式，并确保在命名空间内每一个模块的执行来解决JavaScript作用域的问题。其通过强制模块输出它们想要对外暴露的变量来实现，也通过定义其他正常工作所需模块来实现。因此CommonJS提供了两个工具：

原文地址 现今Web网页正逐步向Web App进化，主要体现在： 越来越多依赖JavaScript的使用。 现代浏览器提供了多样化的接口。 更多的局部加载代替全局刷新，甚至单个页面代码量的提升。 因此，客户端将承载大量代码！大量的底层代码需要被组织。而模块系统则提供了一个可以将底层代码分割成不同模块的方式。 常见的模块系...

ECMAScript 2015 是 ECMAScript 在2015年6月正式发布的一套标准。ES2015是对语言的一次富有意义的更新，也是自2009年ES5标准发布以来，对于该门语言第一次主要的更新。主流JS引擎正在逐步完善对该标准的支持。