2年前写过一篇快速搭建项目的文章 Yeoman 快速构建新项目目录结构脚手架工具 。最近借鉴vue-cli的思路，脱离Yeoman，重新写了一个CLI工具。本文将关于Node CLI的知识点记录下来，适合有NodeJS基础的读者。源码地址

Shebang

1
2

/* dogo.js */
#!/usr/bin/env node  // Shebang（”#!”）

package.json文件中加入

1
2
3

"bin": {
	"dogo": "bin/dogo"
}

在开发环境中我们实际上使用 npm link 便利地将我们的 index.js 软链接到 path 变量的位置。

突然看到Flash即将停止维护退出历史舞台的新闻，想起了从高中时代开始，就听说过flash能做动画，当时心心念念想自己做个帅气的动画，就专门跑去电脑城买了Macromedia Flash的光盘，光盘上还印着“闪客”的字样。但当时还是太天真了，不知道Flash只是个工具，想做出动画还需要很多相关知识，无奈只好放弃，做动画也从此成了我的一个小心愿。
最近重新研究了一下现代动画的制作方式，发现Adobe Animate CC就是Flash的替代产品，可以直接导出Canvas在Web中使用，Createjs也成了替代ActionScript3的脚本库。
本文将介绍Createjs与Adobe Animate CC的协作开发方式，对于无Flash基础的前端人员，建议先了解下Flash基础后再阅读本文。

过去经常感慨，微信上那些所谓的H5营销推广页怎么都这么酷炫。也曾怀疑过，这真是前端做出的页面吗？为什么我看着一点思路也没有，为什么！？
深入研究才发现并想起，曾经有个职业叫Flash动画交互师。直到Flash被乔布斯宣判了死刑、Html5的兴起，这些曾经的Flasher才被迫向前端技术转变。他们的工作就是做酷炫的动画效果和互动效果。这就是为什么很多传统前端不知道动画H5是怎么做的了，毕竟隔行如隔山。
脱离Flash后的动画开始使用Div+Css来排版布局，用一些Css3+JS框架做逐帧动画（如：Tweenmax 缓动库）。
但由于使用代码控制动画非常不直观，想要处理复杂动画需要非常多的Tween叠加。慢慢开始出现了一些仿ActionScript3框架的JS引擎，如Createjs，Egret（白鹭），layaAir。和一些3D引擎，如Three.js、A-Frame等。
至此，出现了大量使用canvas2d和webgl3d的技术，但又不如游戏行业对于机制的要求那么高。

使用webpack差不多快一年了，已经稳定运行在多个生产项目中，趁着最近webpack官方版本更新，再整理一下自己模块化，工程化的相关知识。本文将介绍webpack分文件写法，以及html、ejs模板的使用方法。适合对模块化有初步了解，对webpack有基础的读者。

时隔一年，已经有2个RN的项目上线发布，从对手机APP开发的一无所知，到现在可以熟练开发发布应用，期间遇到了很多让人绝望的问题，好在最后都解决了。本文就把那些在开发过程中所遇到的问题及解决方案记录下来。

1. FlatList 初始化时不显示列表，需要拖拽一下才显示
   当 React Navigation 与 FlatList 配合使用时，会出现初始化时不显示列表的bug，必须要拖拽一下，才会正常显示。

   阅读全文 »

本文未涉及详细的代码步骤来深入讲解H5动画的实现过程，只提供一些技术思路和方向，以供深入研究和学习。本文适合对css3与jquery动画库有一定了解的初学者。

公司突然要做一个H5广告，老板只有一个要求，就是要有3D效果，要向《穿越故宫来看你》、《淘宝造物节》等大神级作品看齐。回头看下只有1个策划2个美工不到3个前端的团队，额，臣妾做不到啊。但是老板要求了，别说要搞3D动画，就算他想搞原子弹，我们也要想办法弄清楚原子弹的设计原理，做不出大神级别H5，做个草根山寨版的也行啊，劳动人民的智慧总是无穷无尽的…..

曾经前端工程化的主流方案是使用grunt、gulp作为构建优化工具，使用requirejs、seajs、browserify作为模块化开发工具，构建工具与模块工具相互配合，实现了前后端分离开发的一种工程化解决方案。现如今只需要webpack就可以实现前端工程化所需的大多数功能（和npm script配合使用效果更佳），小而美VS大而全。

本文适合对模块化、前后端分离有一定了解的读者，最好懂得一些webpack、node、express的基础相关知识。需要深入了解webpack配置方法的读者可以进入文章末尾链接继续学习。

工作生活中会有人这样说：“每天工作感觉身体就像被掏空，累得像只狗”。
也有人会那样说：“我真的好喜欢工作，工作让我进步，超快乐”。
作为前端的你，如果也感觉身体被掏空的话，那么首先应该问问自己，是不是肾透支了。如果不是，那你肯定是没有积累自己的组件库吧！。。组件库吧！。。库吧！。。Ccccccccccccccc………….！

其实工作中有很多地方都是可以偷懒的，比如把以前写好的组件直接加载拿来就用，让你的项目开发速度快无边际，简直是开心又惬意，如果再配合GH60机械键盘的话，嗯哼，工作就是一种享受。

言归正转，如何从头开始开发一个JavaScript组件库呢？

GH60是geekhack论坛上的键盘爱好者自行设计开发制作的一款60%键盘（其pcb方案已开源），其特点主要是支持很多种键位组合，可以根据自己的喜好来组合出不同的键位配列，例如最常用的三种配列方案poker/pure/HHKB的键数分别是61、62、59键。玩GH60的精髓就在于开源和按键可编程，让你可以造出自己的专属键盘。本文目的是带你了解gh60的所有部件，包括一些最新的方案，不涉及安装手法，想深入了解的朋友可以在文章底部留言与我交流。

因为工作中经常需要创建新的项目目录（不要问我为什么），每次开始新的项目都需要新建一次前端目录结构、流程化构建等等，后来发现使用Yeoman新建别工程目录很方便，就想自己也定制一套，慢慢完善。

安装配置

• 全局安装yo和yeoman-generator： npm install -g yo ， npm install --save yeoman-generator
• 创建一个以 generator- 开头的文件夹，例如： generator-name
• 在命令行运行 npm init 来构建package.json文件，其中 name 属性必须以 generator- 前缀开头。