前段时间做了个node全栈项目，服务端技术栈是 nginx + koa + postgresql。其中在centos上搭建环境和部署都挺费周折，部署测试服务器，接着上线的时候又部署生产环境服务器。这中间就有很多既无聊又费精力，吃力不讨好的”体力活”。所以就开始思考怎么自动化这部分搭建部署的工作，也就引出了Docker。

前端开发当中最有意思的就是实现动画特效，Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中的动画组件主要分为两类：

1. 隐式动画控件：只需设置组件开始值，结束值，执行时间，比如AnimatedOpacity，AnimatedSize等组件。
2. 显式动画控件：需要设置AnimationController，手动控制动画的执行。显式动画可以完成隐式动画的效果，甚至更加地可控和灵活，不过需要管理该动画的AnimationController生命周期，AnimationController并不是一个控件，所以需要将其放在StatefulWidget中。

目前跨端开发比较热门的就是 React Native 和 Flutter 了，到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说，基于web生态的 React Native 应该是一个更加顺畅而自然的选择；但 Flutter 让人动心的地方就是高性能和 跨端UI一致性。而React Native 发展不太明朗和 Flutter 越发成熟的走势对比促使我从观望的心态转为加入 Flutter。

这里主要就是记录一下学习Flutter的一些感想和看法：

1. 包管理
2. 布局和样式
3. json
4. 状态管理

canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎，某些场景使用起来还是过于繁琐的，不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版，图标，相关动画还是非常高效的，而且 svg 还是矢量图形，高清还原各种屏幕尺寸的设计简直就是神器。

svg 基础知识不再讲解，结合svg特点和应用场景，主要介绍如下几方面的内容

• svg sprite
• css background-image 插入svg
• 文字路径
• 路径动画

原文地址：使用typescript改造koa开发框架

强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势，那么对常用的脚手架进行改造也就势在必行了。

接下来开始对基于 koa 框架的 node 后端脚手架进行改造：

1. 项目开发环境 和 typescript 编译环境的搭建；
2. 对 node、koa、koa中间件和使用到的库 添加类型化支持；
3. 基于 typesript 的特性改造项目。

使用WebGL将图形绘制到画布后，如何与外部进行交互？这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。

本节实现的效果: WebGL选中物体

什么是HDR

HDR (High Dynamic Range，高动态范围)，在摄影领域，指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后，就叫HDR，它能同时反映出场景最暗和最亮部分的细节。为什么需要多张图片？因为目前的单反相机的宽容度还是有限的，一张照片不能反映出高动态场景的所有细节。一张图片拍摄就必须要在暗光和高光之间做出取舍，只能亮部暗部两者取其一。但是通过HDR合成多张图片，却能达到我们想要的效果。

我们之前已经学习过二维纹理 gl.TEXTURE_2D，而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP，它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度，立方体纹理使用法向量，换句话说三维方向。本节实现的demo请看 天空盒

WebGL 中当透明和半透明物体共存时，相关设置不正确的话，物体表面会出现破碎杂乱的断面，非常影响效果，我们接着就来解决这个问题。
完成的展示Demo请看: 半透明物体和透明物体共存

实际效果请看demo：纹理贴图

为了增加额外细节，提升真实感，我们使用了漫反射贴图和高光贴图，它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话，只有一件事决定物体的形状，那就是垂直于它的法线向量。砖块表面只有一个法向量，表面完全根据这个法向量被以一致的方式照亮。如果每个片元都用不同的法线会怎样？这样我们就可以根据表面细微的细节对法线向量进行改变；这样就会获得一种表面看起来要复杂得多的幻觉：