这次没有带来游戏啦,本来还是打算用一个小游戏来介绍阴影,但是发现阴影这块想完完整整介绍一次太大了,涉及到很多,再加上业务时间的紧张,所以就暂时放弃了游戏,先好好介绍一遍 webgl 中的 Matrix。
这篇文章算是 webgl 的基础知识,因为如果想不走马观花的说阴影的话,需要打牢一定的基础,文章中我尽力把知识点讲的更易懂。内容偏向刚上手 webgl 的同学,至少知道着色器是什么,webgl 中 drawElements 这样的 API 会使用~
-
webgl 世界 matrix 入门
In Web开发 on 2017年01月16日 by TAT.vorshen view: 7,0433
-
从零开始 React 服务器渲染 4
一. 前言
当我们选择使用 Node+React 的技术栈开发 Web 时,React 提供了一种优雅的方式实现服务器渲染。使用 React 实现服务器渲染有以下好处:
1. 利于 SEO:React 服务器渲染的方案使你的页面在一开始就有一个 HTML DOM 结构,方便 Google 等搜索引擎的爬虫能爬到网页的内容。
2. 提高首屏渲染的速度:服务器直接返回一个填满数据的 HTML,而不是在请求了 HTML 后还需要异步请求首屏数据。
3. 前后端都可以使用 js
二. 神奇的 renderToString 和 renderToStaticMarkup
有两个神奇的 React API 都可以实现 React 服务器渲染:renderToString 和 renderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包,都接受一个 React Component 参数,返回一个 String。
也许你会奇怪为什么会有两个用于服务器渲染的函数,其实这两个函数是有区别的:
-
模块加载工具制造指南 4
前言
看到这个标题,估计有同学会想,又要重复造轮子么?其实重复造轮子在大多数情况下确实是不太可取的,既浪费了精力又浪费了时间。但这并不能说明重复造轮子完全不可取,比如你想要某个轮子的精简版,又比如你想学习某个轮子的制造方法,重复造轮子也可以是有意义的。
简介
接下来,我们就来学学某个轮子简易版制造方法,这个轮子就是模块加载工具。
说起模块加载工具,估计大家就会想起 webpack、commonjs 等,更“ 久远” 一点的会想起 requirejs 和 seajs。这些工具都源于前端的模块化思想。
为什么前端需要模块化?这主要得益于前端技术的发展,使得前端不再像以前那样只能展示一下静态内容,撑死加上几个飞来飞去的动画。现在的前端内容越来越丰富,我们可以播放视频,可以协同工作,还可以玩游戏。这就导致了前端代码量剧增。当代码行数噌噌噌往上涨时,模块化思想就自然而然地出来了。
-
HTTP2 Server Push 的研究
In Web开发 on 2017年01月04日 by TAT.tennylv view: 11,85951,HTTP2 的新特性。
关于 HTTP2 的新特性,读着可以参看我之前的文章,这里就不在多说了,本篇文章主要讲一下 server push 这个特性。
HTTP,HTTP2.0,SPDY,HTTPS 你应该知道的一些事
2,Server Push 是什么。
简单来讲就是当用户的浏览器和服务器在建立链接后,服务器主动将一些资源推送给浏览器并缓存起来,这样当浏览器接下来请求这些资源时就直接从缓存中读取,不会在从服务器上拉了,提升了速率。举一个例子就是:
-
AlloyTouch 0.2.0 发布– 鱼和熊掌兼得 0
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0
背景
公司师姐昨日在 KM 发了篇长文,主要结论 RAF+transform3d 就是不如 transition+transform3d 平滑流畅,但是 transition+transform3d 没有 translate 属性变更 change 回调,只有 transitionend 的事件回调。最后得出的解决方案:
-
react 动画难写?试试 react 版 transformjs 1
简介
transformjs 在非 react 领域用得风生水起,那么 react 技术栈的同学能用上吗?答案是可以的。junexie 童鞋已经造了个 react 版本。