-
小程序·云开发
- desc: 小程序·云开发
- link: https://www.cloudbase.net
-- name: 羚珑智能设计
- desc: 京东羚珑智能设计
- link: https://ling.jd.com
-- name: 京东零售设计服务平台
- desc: 京东零售设计服务平台
- link: https://jdrd.jd.com
-- name: JDC京东设计中心
- desc: 京东设计中心
- link: https://jdc.jd.com
-- name: Deep Ocean
- desc: 腾讯 Deep Ocean
- link: http://dopro.io/
-- name: 百度FEX
- desc: 百度Web前端研发部
- link: http://fex.baidu.com
-- name: 淘宝FED
- desc: 淘宝前端团队
- link: http://taobaofed.org
-- name: TGIdeas
- desc: 腾讯互娱设计中心
- link: http://tgideas.qq.com
-- name: ISUX
- desc: 腾讯SNG设计中心
- link: http://isux.tencent.com
-- name: CDC
- desc: 腾讯用户研究与体验设计中心
- link: http://cdc.tencent.com
-- name: 携程UED
- desc: 携程设计委员会
- link: http://ued.ctrip.com
-- name: 优优教程网
- desc: 优优教程网
- link: https://uiiiuiii.com/
-- name: Designup
- desc: Designup
- link: https://www.designup.cn/
-- name: 百度EUX
- desc: 百度EUX
- link: http://eux.baidu.com/
diff --git a/source/_data/menu.yml b/source/_data/menu.yml
deleted file mode 100644
index 92f3b9543c..0000000000
--- a/source/_data/menu.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-home: index.html
-geek: https://geeks.aotu.io
-html5: https://cases.aotu.io
-about: about/
-join: join/
\ No newline at end of file
diff --git a/source/_data/words.json b/source/_data/words.json
deleted file mode 100644
index 118a40214c..0000000000
--- a/source/_data/words.json
+++ /dev/null
@@ -1,94 +0,0 @@
-[
- {
- "en":"A friend in need is a friend indeed.",
- "zh-cn": "患难见真交."
- },
- {
- "en":"A good medicine tastes bitter.",
- "zh-cn": "良药苦口."
- },
- {
- "en":"After a storm comes a calm.",
- "zh-cn": "雨过天晴."
- },
- {
- "en":"All roads lead to rome.",
- "zh-cn": "条条大道通罗马."
- },
- {
- "en":"Art is long, but life is short.",
- "zh-cn": "人生有限，学海无涯."
- },
- {
- "en":"Better late than never.",
- "zh-cn": "只要开始，虽晚不迟。"
- },
- {
- "en":"Early to bed and early to rise makes a man healthy, wealthy, and wise.",
- "zh-cn": "早睡早起，富裕聪明身体好。"
- },
- {
- "en":"East, west, home is best.",
- "zh-cn": "金窝银窝，不如自己的草窝。"
- },
- {
- "en":"Everyday and in every way i’m getting better.",
- "zh-cn": "每天每个方面我的生活都正在好转。"
- },
- {
- "en":"Just do it!",
- "zh-cn": "做了再说！"
- },
- {
- "en":"Great hopes make great man.",
- "zh-cn": "远大的希望，造就伟大的人物。"
- },
- {
- "en":"It is good to learn at another man’s cost.",
- "zh-cn": "前车之鉴。"
- },
- {
- "en":"It is never too late to mend. ",
- "zh-cn": "亡羊补牢，犹为未晚。"
- },
- {
- "en":"Knowledge is power.",
- "zh-cn": "知识就是力量。"
- },
- {
- "en":"Look before you leap. first think, then act.",
- "zh-cn": "三思而后行。"
- },
- {
- "en":"More haste, less speed. ",
- "zh-cn": "欲速则不达。"
- },
- {
- "en":"Never too old to learn.",
- "zh-cn": "活到老，学到老。"
- },
- {
- "en":"No pain, no gain.",
- "zh-cn": "天下事没有不劳而获的东西。"
- },
- {
- "en":"Nothing is difficult to the man who will try. ",
- "zh-cn": "世上无难事，只要肯登攀。"
- },
- {
- "en":"Practice makes perfect.",
- "zh-cn": "熟能生巧。"
- },
- {
- "en":"Well begun is half done. ",
- "zh-cn": "好的开端是成功的一半。"
- },
- {
- "en":"Where there is a will, there is a way.",
- "zh-cn": "有志者，事竟成。"
- },
- {
- "en":"A journey of a thousand miles begins with single step.",
- "zh-cn":"千里之行，始于足下。"
- }
-]
diff --git a/source/_posts/2015-10-08-aotu-blog-v1.md b/source/_posts/2015-10-08-aotu-blog-v1.md
deleted file mode 100644
index aff11326ba..0000000000
--- a/source/_posts/2015-10-08-aotu-blog-v1.md
+++ /dev/null
@@ -1,128 +0,0 @@
-title: 凹凸实验室博客V1.0.0发布
-subtitle: "凹凸实验室博客是一个托管于Github的静态博客，基于HEXO搭建，主题的定做参考自future-imperfect的扁平简约，暂且命名为`o2`。"
-cover: //img13.360buyimg.com/ling/jfs/t1/45433/23/2569/97180/5d070321E45a2e35e/193b43b5bc410695.jpg
-date: 2015-10-08 10:24:35
-categories: 项目总结
-tags:
- - Hexo
- - 项目总结
-author:
- nick: LV主唱大人
- github_name: mamboer
----
-
-
-筹备了两周多，凹凸实验室博客 V1.0.0 正式发布啦，欢迎同学们体验并提供建议。
-它是一个托管于Github的静态博客，基于HEXO搭建，主题的定做参考自[future-imperfect](http://html5up.net/future-imperfect)的扁平简约，暂且命名为`o2`。主题单独开源于 [hexo-theme-o2](https://github.com/o2team/hexo-theme-o2)，有兴趣的朋友可以自由下载使用。
-
-> 2016年12月更新：当前主题为全新设计，不再使用`hexo-theme-o2`，喜欢的童鞋可以直接fork [o2team/o2team.github.io](https://github.com/o2team/o2team.github.io)的源码。
-
-
-
-## 博客的一些特性
-
-1. 使用github头像
-
- 记得将你们在github的头像更新到最帅，将你github的用户名在文章内头部填好即可！
-
-2. [hexo-wordcount](https://npmjs.org/package/hexo-wordcount) 显示博文字数
-3. [不蒜子](http://ibruce.info/2015/04/04/busuanzi/) 统计博文的pv
-4. 每日一句英文警句
-5. [多说](http://duoshuo.com)评论
-
-## 使用指引
-
-1. 安装hexo
-
- ```
- npm i hexo-cli -g
- ```
-
-2. 将o2team.github.io的源码拉到本地
-
- ```
- git clone git@github.com:o2team/o2team.github.io.git o2team
- ```
-
-3. 初始化子模块(submodules)
-
- ```
- cd o2team
- git submodule init
- git submodule update
-
- # 切换至themes/o2目录，签出master分支
- cd ../themes/o2
- git checkout master
- ```
-
-4. 安装nodejs包
-
- ```
- # 切换回根目录下
- cd ../../
- npm install
- ```
-
-5. 运行`hexo s --watch`
-
- 运行上述命令后，浏览器打开 [http://localhost:4000](http://localhost:4000) 即可本地访问我们的网站
-
-## 创建文章
-
-有两种方法创建文章，可任选其一：
-
-> 注意：文件名不要出现中文!!!
-
-1. 使用`hexo new` 命令
-
- ``` bash
- $ hexo new "My New Post"
- ```
-
-2. 拷贝现有的文章进行修改
-
- hexo使用markdown来编辑文章，在source目录下，拷贝任意md文件进行创建新的文章。具体可参考下hexo的官方说明
-
-## 文章规范
-
-1. 使用markdown写博文
-2. 博文图片统一位置：`source/img/post/`
- 在博客内容中可以使用 `pimg` 自定义标签来引用图片。注意别覆盖了别人的图片!!!
- 其语法格式为：
- `{% raw %}{% pimg imageName [alt text] [JSONImageAttibutes] %}{% endraw %}`
- 例如：
- `{% raw %}{% pimg post-aotu.jpg "空格请用%20来区分" '{"title":"hello","class":"test_img"}' %}{% endraw %}`
- 需要注意的是：`pimg` 利用空格来划分字段属性，如果一个属性的值需要空格，请将空格用`%20`代替!!!
-
-3. 为了保证博客整体美观，每个文章需要一张配图(大小：840x340)
-4. 指明文章的副标题、作者信息、封面图片地址
-
- ```
- subtitle: "凹凸实验室博客是一个托管于Github的静态博客，基于HEXO搭建..."
- date: 2015-11-20 00:24:35
- cover: "封面图片地址"
- tags:
- - Hexo
- author:
- nick: LV主唱大人
- github_name: mamboer
-
- ```
-5. 利用` `设置文章的摘要
-
- 示例：
- ```
- title: 文章标题
- ---
- 这部分是文章摘要，这部分是文章摘要。在hexo模版里可通过 {% raw %}{{ post.excerpt }}{% endraw %} 来引用。
-
- 这里是文章的剩余部分。在hexo模版里可通过{% raw %}{{ post.more }}{% endraw %} 来引用。
- ```
-
- 实际使用请参考[本文]({{ raw_link('_post/2015-11-20-aotu-blog-v1.md') }})。
-
-## 关于博客的发布
-
-为了便于统一维护，博客的发布由`LV`负责。同学们写好博文并在本地预览OK后直接提交Github即可。
-
diff --git a/source/_posts/2015-10-13-start-postcss.md b/source/_posts/2015-10-13-start-postcss.md
deleted file mode 100644
index 662931c826..0000000000
--- a/source/_posts/2015-10-13-start-postcss.md
+++ /dev/null
@@ -1,368 +0,0 @@
-title: PostCSS快速入门使用
-subtitle: "PostCSS 是一套利用JS插件实现的用来改变CSS的工具.这些插件能够支持变量和混合语法，转换未来CSS语法，内联图片，还有更多"
-date: 2015-10-13 09:34:25
-cover: //img14.360buyimg.com/ling/jfs/t1/48017/11/2528/73775/5d07034dE7165a710/2f3b0fa0b5db7a9c.jpg
-categories: Web开发
-tags: Web开发
-author:
- nick: Sky
- github_name: cnt1992
----
-
-## 初识PostCSS
-
-如果你第一次听说`PostCSS`这个东西，那么请看下面摘自官方`Github`的介绍：
-
-> PostCSS is a tool for transforming CSS with JS Plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more
-
-翻译成中文的意思如下：
-
-> PostCSS 是一套利用JS插件实现的用来改变CSS的工具.这些插件能够支持变量和混合语法，转换未来CSS语法，内联图片，还有更多
-
-我们用过`Less`、`SASS`等工具来对CSS做`预处理`操作，按照它们约定的语法来书写并且最终转换成可用的样式，这付出的代价是**必须先熟悉这个工具的书写语法**。
-
-随着近几年 [Grunt](http://gruntjs.cn/)、[Gulp](http://gulpjs.com/)、[Webpack](http://webpack.github.io/docs/) 等自动化工具的兴起，`组合式应用`变得非常的热门，那`PostCSS`存在的意义是什么呢？答案是：**CSS生态系统**
-
-`PostCSS`拥有非常多的插件，诸如自动为CSS添加浏览器前缀的插件`autoprefixer`、当前移动端最常用的`px`转`rem`插件`px2rem`，还有支持尚未成为CSS标准但特定可用的插件`cssnext`，还有很多很多。就连著名的`Bootstrap`在下一个版本`Bootstrap 5`也将使用`PostCSS`作为样式的基础。
-
-一句话来概括PostCSS：**CSS编译器能够做到的事情，它也可以做到，而且能够做得更好**
-
-## 快速使用PostCSS
-
-上面大致介绍了`PostCSS`，也许我们并没有在头脑里形成对它的认知，那下面我们就通过一个简单地实例来看看如何使用`PostCSS`。
-
-`PostCSS`得益于插件，支持Grunt,Gulp,webpack,Broccoli,Brunch还有ENB，这里我们将以`Gulp`作为实例来讲。
-
-
-### 环境准备
-
-创建并进入我们的实例目录
-
-``` bash
-mkdir postcss-demo && cd postcss-demo
-```
-
-然后快速生成`package.json`文件
-
-``` bash
-# --yes 参数能够帮助我们快速生成默认的package.json
-npm init --yes
-```
-
-将上面创建的`package.json`文件的`main`参数改为`gulpfile.js`，然后安装我们所需的依赖
-
-```bash
-# gulp跟gulp-postcss是必须的，后面两个插件为了演示用途
-npm i gulp gulp-postcss autoprefixer autoprefixer-core cssnext --save-dev -d
-```
-
-创建`gulpfile.js`
-
-```bash
-# 这里用命令行进行创建，你也可以手动新建
-touch gulpfile.js
-```
-
-### 修改gulpfile.js
-
-将下面代码贴进`gulpfile.js`
-
-```javascript
-var gulp = require('gulp');
-var postcss = require('gulp-postcss');
-var autoprefixer = require('autoprefixer');
-var cssnext = require('cssnext');
-
-//定义css任务
-gulp.task('css', function(){
- //定义postcss任务流数组
- var processors = [
- autoprefixer({
- browsers:['last 3 version'],
- cascade: false,
- remove: false
- }),
- cssnext()
- ];
- return gulp.src('./src/css/*.css')
- .pipe(postcss(processors))
- .pipe(gulp.dest('./dist'));
-});
-```
-
-### 创建示例样式
-
-在项目根目录下创建src目录，再在src目录下面创建css目录，然后创建style.css文件
-
-``` bash
-# 这里用命令创建，你也可以手动创建
-mkdir -p src/css && touch style.css
-```
-
-编辑样式如下：
-
-```css
-h1{
- display:flex;
-}
-
-:root {
---fontSize: 1rem;
---mainColor: #12345678;
---highlightColor: hwb(190, 35%, 20%);
-}
-
-body {
-color: var(--mainColor);
-
-font-size: var(--fontSize);
-line-height: calc(var(--fontSize) * 1.5);
-padding: calc((var(--fontSize) / 2) + 1px);
-}
-
-```
-
-
-### 运行实例
-
-一切准备就绪之后可以在项目根目录下执行刚才我们定义的任务
-
-```bash
-gulp css
-```
-
-如果不出什么意外的话就会在根目录下面生成一个`dist`文件夹，里面有一个样式文件，内容如下：
-
-```css
-body{
- display:-webkit-flex;
- display:-ms-flexbox;
- display:-webkit-box;
- display:flex;
-}
-
-body {
-color:#123456;
-color:rgba(18, 52, 86, 0.47059);
-
-font-size:16px;
-font-size:1rem;
-line-height:24px;
-line-height:1.5rem;
-padding:calc(0.5rem + 1px);
-}
-```
-
-我们可以看到我们写的样式自动添加了浏览器前缀，并且一些未来CSS语法也被转换了。
-
-## 了解PostCSS
-
-通过上面的实例我们应该知道`PostCSS`的使用方法，此时让我们先回想一下`CSS预处理器`的使用历程：
-
-1. 学习该CSS预处理器的语法特性，诸如：变量定义、嵌套、继承
-2. 在特定后缀名(.less/.scss等)的文件按照上面的语法进行编写
-3. 通过Gulp/Grunt/Webpack等自动化工具或者手动编译成CSS样式
-
-而`PostCSS`的使用历程：
-
-1. 直接按照CSS标准语法来书写CSS样式文件
-2. 通过Gulp/Grunt/Webpack等自动化工具加载PostCSS插件转换输出
-
-通过对比我们类比一个结论：*CSS预处理器好比给你一个工具箱，工具箱里面有什么东西该怎么拿已经跟你约定好，你必须按照这个规则来拿；而PostCSS好比给你一个盒子，你可以从旁边选择自己需要的工具放进盒子打包拿走，如果还不够用你可以自己造一个工具*
-
-## 深入PostCSS
-
-`PostCSS`自身只包括了`CSS分析器`，`CSS节点树API`，`source map生成器`，`CSS节点拼接器`，而基于`PostCSS`的插件都是使用了`CSS节点树API`来实现的。
-
-我们都知道CSS的组成如下：
-
-```css
-element {
- prop1 : rule1 rule2 ...;
- prop2 : rule1 rule2 ...;
- prop2 : rule1 rule2 ...;
- ...
-}
-```
-
-也就是一条一条的样式规则组成，每一条样式规则包含一个或多个属性跟值。所以`PostCSS`的执行过程大致如下：
-
-1. Parser
- 利用`CSS分析器`读取CSS字符内容，得到一个完整的`节点树`
-
-2. Plugin
- 对上面拿到的`节点树`利用`CSS节点树API`进行一系列的转换操作
-
-3. Plugin
- 利用`CSS节点拼接器`将上面转换之后的节点树重新组成CSS字符
-
-4. Stringifier
- 在上面转换期间可利用`source map生成器`表明转换前后字符的对应关系
-
-
-### PostCSS性能
-
-在PostCSS官方推特上看到，由JavaScript编写的PostCSS比C++编写的libsass还要快3倍，下面来自官方推特的截图:
-
-
-
-
-如果你对上面的性能截图有疑问，可以亲自来[这里](https://github.com/postcss/benchmark)测试看看。
-
-
-### 开始编写自己的PostCSS插件
-
-`PostCSS`在自己的[Github](https://github.com/postcss/postcss#plugins)上放了一些常用的插件，更多的插件可以在[postcss.parts](http://postcss.parts/)进行搜索。
-
-但有时候已有的插件不满足我们的需求，这个时候需要编写自己的PostCSS插件，下面我们将一步步创建一个简单的插件，这个插件功能非常简单，如下：
-
-```css
-/*
- 文件位置：src/css/style.css
- */
-h1 {
- font-family: "\5FAE\8F6F\96C5\9ED1",fontstack('Arial');
-}
-```
-
-当输入上面的样式时，会生成下面的样式：
-
-```css
-/*
- 文件位置：dist/style.css
- */
-h1 {
- font-family: "\5FAE\8F6F\96C5\9ED1",tahoma,arial;
-}
-```
-
-### 环境准备
-
-我们将以`Gulp`作为基础来实现我们的插件，首先创建项目文件夹
-
-```bash
-mkdir postcss-plugin && cd postcss-plugin
-```
-
-然后快速创建`package.json`文件：
-
-```bash
-npm init --yes
-```
-
-紧接着先安装必备的包
-
-```bash
-npm i gulp postcss gulp-postcss --save-dev -d
-```
-
-再创建`gulpfile.js`并且输入下面内容:
-
-```javascript
-var gulp = require('gulp');
-var postcss = require('gulp-postcss');
-
-gulp.task('css', function(){
- var processors = [
- ];
- return gulp.src('./src/css/*.css')
- .pipe(postcss(processors))
- .pipe(gulp.dest('./dist'));
-});
-```
-
-### 创建插件文件夹
-
-我们在执行`npm install`安装的包都放置在`node_modules`文件夹下面，这里我们创建PostCSS的插件文件夹，注意：**PostCSS的插件命名格式为：postcss-插件名字**
-
-```bash
-# 这里采用命令新建文件夹，你也可以手动创建
-mkdir node_modules/postcss-fontstack
-```
-
-### 创建插件入口文件
-
-现在我们可以在`postcss-fontstack`文件夹创建入口文件`index.js`，`PostCSS`创建插件的方式如下：
-
-```javascript
-var postcss = require('postcss');
-module.exports = postcss.plugin('插件名字', function 插件名字(选项){
- //这里写插件代码
-})
-```
-
-那我们可以在`index.js`里面贴入下面代码：
-
-```javascript
-var postcss = require('postcss');
-
-modules.exports = postcss.plugin('fontstack', function fontstack( options ){
- return function( css ){
- options = options || {};
-
- var fontstack_config = {
- 'Arial': 'tahoma,arial',
- 'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif'
- };
-
- function toTitleCase( str ){
- return str.replace(/\w\S*/g,function( txt ){
- return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
- });
- }
-
- // css.walkRules方法用来遍历每一条css规则
- css.walkRules( function( rule ){
- // walkDecls方法用来解析属性跟值
- rule.walkDecls( function( decl, i ){
- var value = decl.value;
- if( value.indexOf( 'fontstack(' ) !== -1 ){
- var fontstack_requested = value.match(/\(([^)]+)\)/)[1].replace(/["']/g,"");
- fontstack_requested = toTitleCase( fontstack_requested );
-
- var fontstack = fontstack_config[ fontstack_requested ];
-
- var firstFont = value.substr( 0, value.indexOf('fontstack(') );
-
- var newValue = firstFont + fontstack;
-
- decl.value = newValue;
- }
- });
-
- });
- }
-});
-```
-
-在`gulpfile.js`引入上面的插件，代码如下：
-
-```javascript
-var gulp = require('gulp');
-var postcss = require('gulp-postcss');
-
-gulp.task('css', function(){
- var processors = [
- ];
- return gulp.src('./src/css/*.css')
- .pipe(postcss(processors))
- .pipe(gulp.dest('./dist'));
-});
-```
-
-### 运行实例
-
-在项目根目录下运行实例，最终实现我们的效果
-
-```bash
-gulp css
-```
-
-## 再谈PostCSS
-
-基于`PostCSS`能够做到很多`CSS预处理器`做不到的事情，未来发展前景还是挺不错的，而且最新的`Atom`编辑器也可以下载插件来支持`PostCSS`这种语法。
-
-但这就意味着`CSS预处理器`过时了么？不会。`PostCSS`的出现并不是为了替换掉之前的技术，只是提供多一种思路让我们去考虑，就比如Sass编译后再加`autoprefixer`自动补齐浏览器前缀这种做法当前还是比较流行的。
-
-再回到文章最开始说的，`PostCSS`其实是在打造一个改变CSS开发方式的生态系统。也许暂时我们还是保持传统的开发方式，但未来对于`PostCSS`我还是保持关注，它是值得期待的。
-
diff --git a/source/_posts/2015-10-16-vim-list.md b/source/_posts/2015-10-16-vim-list.md
deleted file mode 100644
index 6472a13290..0000000000
--- a/source/_posts/2015-10-16-vim-list.md
+++ /dev/null
@@ -1,63 +0,0 @@
-title: 我的vim二三事
-subtitle: "用了几年Vim，我发现我越来越喜欢它了，和好多人一样喜欢它，也许喜欢的理由各不相同，但大抵有如下几个。"
-date: 2015-10-16 10:24:35
-cover: //img30.360buyimg.com/ling/jfs/t1/55254/34/2612/122532/5d070399E87268b74/a1bca545ac8b1293.jpg
-categories: Web开发
-tags: Web开发
-author:
- nick: honlyhuang
- github_name: huangliyn
----
-
-## 前言
-> 选择你所喜欢的，爱你所选择的--列夫·托尔斯泰
-
-### 不是理由的理由
-
-用了几年Vim，我发现我越来越喜欢它了，和好多人一样喜欢它，也许喜欢的理由各不相同，但大抵有如下几个：
-+ 即使你用了几年了，你还是会在某天惊呼原来还可以这么操作，**它总会给你带来惊喜**。
-+ 当你要操作的时候你根本不用去想那些快捷键(也许不能叫快捷键，它是谓语{operator}和宾语{text-objects}，组合在一起形成不同指令,好像自然语言)，它们就在你意识里。也许开始的时候你需要去记一些快捷键（别的编辑器不用吗？），但记住以后你熟练了，就像是骑自行车，你就忘记它的存在，你只用输出你的思想，**它让你更专注你要做的事情本身**。
-+ 虽然会有很多的快捷键以便让不同的人找到他们最佳的操作方式，但是**每个人常用的不外乎特定的十几个快捷键**，而这些快捷键都是有内在逻辑让你记住的，比如：d(elete)删除,D(elete)删除到行尾,d(elete)
-a w(ord) 删除一个词。
-+ 如果懒，那么你学Vim是没错的，它是**变化中的永恒**，那么多的编辑器更新迭代，它们都有vi模式或vi插件，你可以用你所学，一如既往。
-+ 它有**非常多的插件**，你可以定制一些自己喜欢的强大功能。（这其实也是个缺点的吧，毕竟自己配置多费时间呀，不过好些人一个配置用了十多年）。[到底有多强大呢，看看知乎上这篇文章。](http://www.zhihu.com/question/20151659)
-
-我知道上面这些说得太抽象了，也许我们应该来点具体的，你可以边看边对比一下你使用的编辑器的操作：
-
-| 编辑 | 用 Vim |
-| :----| :----- |
-| 如何向下移动7行 | 7j |
-| 如何删除一个词（word） | dw |
-| 如何删除一行 | dd |
-| 如何删除｛｝里的内容 | di{ |
-| 光标移动到第80行 | 80G |
-| 如何在当前文件里搜索光标所在位置的词| *(#) |
-| 如何在50行到100行之间查找并替换| :50,100/old/new/g |
-| 如果你想在同一文件中对比两个不同的块时怎么做| :sp (to 'split' the view) |
-| 如果你想要打开光标所在文件名的文件 | gf (which means 'g'o to this 'f'ile) |
-| 如果你想要得到每行前10个字母而它后面的数据不是你想要的 | ctrl-v (win 下是ctrl-q) |
-| 如果你想要转换别人给到你的混合大小的文件变成小写 | 1GVG u |
-| 录制一系列命令然后执行 | 用宏 |
-| 在width:16px的数字16上加20 | 20 ctrl+a |
-| 输入23+45+119的结果 | ctrl+r=23+45+119 |
-
-以上的这些操作都是直接在键盘上操作的，没有用鼠标。
-
-喜欢一个人的时候总能说出好多的理由，而不喜欢却只需要一个理由。此时我赞美我的女神你也在心里列举了你心中女神的诸多可爱美丽特点。所以可以想象各种关于编辑器文章下的各种互喷吐槽，即使是同一个编辑器的文章下也不免相互吐槽，毕竟不同人理念也是不一样的。
-
-
-### 有所为有所不为
-
-vim是个高效的文本编辑器，在文本编辑这一领域可谓是独步天下，高手[使用vim处理SRT字幕内容](http://zhuanlan.zhihu.com/vim-non-programming/19918627)，痴迷者除了使用vim写代码、[发邮件](http://www.vimer.cn?p=1222)、[看股票](http://bluegene8210.is-programmer.com/posts/67910.html)、写博客、写markdown(这篇文章就是vim写的markdown)还[使用vim浏览网页](http://www.iplaysoft.com/vimium-and-vimperator.html)，普通人可以把它作为[普通人的编辑利器](http://blog.sina.com.cn/s/blog_45dac66f010005kw.html)。在文本编辑领域，后来者只有模仿而无法超越vim。小李飞刀独步天下却也砍不了骨头，在代码编程领域，公认的最适合的场景是做Unix/Linux服务器编程,不用下载服务器端的文件而直接修改；其次是编写html/css/javascript/shell/python/c等；最后在mac、linux下要改文件用系统带的vim随手改改。而编写Java
-EE、Objective-C等还是用Eclipse、XCode等IDE的比较好。
-
-### 君子性非异也，善假于物也
-vim只是一个工具而已，它并不能让你码代码的能力提升，只能帮你更快速地输出你的思维。每一个工具都有它特定的场景，聪明的人总会在适当的场景做出合适的选择。好多人都说学习起来好难的呀，投入的成本换来的收益是不是成正比的呢？我觉得还是值得的，上面也说过，它是万变中的不变，同时它真的是个高效的工具，另外也许最后出来的高效的编辑外还带给你一些东西，比如好奇发现带来的惊喜，又如你发现你用了几年还有好多不会的谦虚，还有用宏解决了一个棘手问题的喜悦。最后它只是一个工具，是雕刻林诗音松木人像的小刀，或是冠绝武林的小李飞刀，关键在人。
-
-### 不积跬步无以至千里
-佛渡有缘人，细想这个‘有缘人’还挺有意思的，其实就是信的人，不信的说再多也是没有用的。如果想学，不必卸载你的是编辑器，做出破釜沉舟之势，万一用了两天觉得不方便或是有紧急的要修改的内容，要换回来用熟悉的编辑器。另外也不要觉得一时学不会就感觉挫折，毕竟很多东西都不可一蹴而就的，需要一点积累，所以慢慢来的。那些《7天XX》《21精通XX》真的害了好多人，慢慢来，实在不行认为自己笨了，不还有勤能补拙吗？好多的编辑器都有vi插件或模式，你可以找一找然后装上试试的，等熟悉了觉得不满足了再换成vim，要是觉得一直用vi插件也不错的就一直用着，能解决问题的顺手的才是最高效的。
-
-### 选择你所喜欢的，爱你所选择的
-我在小学的时候搞了个小霸王说要学习五笔，然后字根没有背完就忘记了，大学时候再一个想起这个事决定再学五笔，然后没有几天又放弃了，毕业两年后想起学五笔这个事，心里有个结，于是又学起来了，然后一直在用，虽然是五笔混合模式，偶尔也用纯五笔模式。vim就是在我可以用五笔的时候开始学的，当时拿同事的vimrc来直接就用了，现在也在用的，只是改了少许的地方，一直在够用就好的状态，然后在用的时候觉得有什么不自然的地方就找一下答案的，慢慢地越来越顺手了。细想我这个慢方法还是可取的，那么多我的命令我只会我常用的十几个，但那也是够用的了，并且是越来越喜欢，看着别人用的也还常发现还有很多不会的东西。
-
-再回首，一切是那样自然，一如vim的理念keep it simple，我也只装了平时常用的几个插件，还有一些比较强大的插件也没有用得着，所以没有装上。最近为了给同事们讲一下vim,才意识到虽然平时说vim有几个模式，但是用的时候自己也没有区分得很清楚，觉得就是一个整体，应该那样，有时候我们只是为了区分和认识一个东西才把它解构了，就像一首好的歌曲，我们只用觉得好听，那些乐评人说的为什么好感觉都很有道理。vim命令有多难记也还是有逻辑的；vim里可以快速精确的查找定位；vim真的好像一切文本皆对象，操作针对字符，词，行，块，文件这些对象；vim的设计哲学是如果你的工作只需要做一次，那没问题，怎么搞都行，如果你的工作是要重复地完成某些工作，则vim总可以帮你找到更少的按键方式来实现相同的目标。如[VimGolf](http://vimgolf.com/)所说Real Vim ninjas count every keystroke - do you?
diff --git a/source/_posts/2015-10-21-z-index-and-translate3d.md b/source/_posts/2015-10-21-z-index-and-translate3d.md
deleted file mode 100644
index 3097916283..0000000000
--- a/source/_posts/2015-10-21-z-index-and-translate3d.md
+++ /dev/null
@@ -1,55 +0,0 @@
-title: 探究transform动画元素的z-index
-subtitle: transform 变换的时候会让 z-index “临时失效”，其实并非 z-index 失效了，只是 z-index 被用在不同的 `stacking context` 上。
-date: 2015-10-21 10:24:35
-cover: //img20.360buyimg.com/ling/jfs/t1/84441/38/2530/39585/5d0703b9Eac796197/08404d066abc58cf.png
-categories: Web开发
-tags:
- - translate3d
- - zindex
-author:
- nick: 小振
- github_name: Manjiz
----
-
-## z-index 和 translate3d
-
-在一次需求中，需要做出三张卡牌走马灯式滚动的效果，由于在前面的一张卡牌需要挡住后面的卡牌，自然而然地就用 z-index 使前面的卡牌显示在最上面，配以 transform 动画让“走马灯”滚起来，在开发过程中，在 PC 侧 Chrome 中表现良好，在本人手机浏览器中也表现良好，最后测试时却发现，在微信客户端或 QQ 客户端中打开页面出现问题，“走马灯”滚动时，卡牌先通过 transform 就位后，才把 z-index 设置较大的卡牌置于上面，感觉上非常的不流畅。
-
-
-
-究其原因，发现这是某些浏览器的渲染规则，涉及到 `stacking context` 的概念，transform 的元素会创建新的 DOM，层级会在普通元素的上面，除了 transform ,还有哪些情况会创建新 `stacking context`呢？
-
-MDN 上有相关介绍：
-> * the root element (HTML),
-> * **positioned (absolutely or relatively) with a z-index value other than "auto",**
-> * **a flex item with a z-index value other than "auto",**
-> * **elements with an opacity value less than 1,**
-> * **elements with a transform value other than "none",**
-> * elements with a mix-blend-mode value other than "normal",
-> * elements with isolation set to "isolate", on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto",
-> * specifing any attribute above in will-change even you don't write themselves directly
-
-下图是对 transform 和 opacity 的测试结果：
-
-
-
-很明显，红色 div 都在绿色 div 上面了，说明真的有创建了个更高层级的 `stacking context`。再做进一步测试，我给两组的 div 都加了 `position:relative;z-index:1;`，结果绿色的都在上面了，手机微信上也一样，这能不能说明 z-index 对层级的影响大于 transform 和 opacity 呢。
-
-至于 transform 变换的时候会让 z-index “临时失效”，其实并非 z-index 失效了，只是 z-index 被用在不同的 `stacking context` 上，而非在默认的 context 上同等地比较层级了。所以 DOM 在 transform 的工程中，DOM 处于一个新的 `stacking context` 里，z-index 也是相对于这个 `stacking context` 的，所以表现出来的实际是 `stacking context` 的层次，动画一结束，DOM 又回到默认的 context 里，这时的 z-index 才是在同一个 context 上的比较。
-
-那该用什么方法来控制卡牌的层级，又能让动画流畅地表现呢，当然是 translate3d 中的 z-axis，很多时候我们并不知道它是用来做什么的，平常用得最多的只是它的 x-axis 和 y-axis，不妨先看个例子：
-
- .box1 {width:100px;height:100px;background:red;transform:perspective(100px) translate3d(0, 0, 100px);}
- .box2 {width:100px;height:100px;background:blue;transform:perspective(100px) translate3d(0, 0, 200px);}
-
-实际效果是，看不到它们，然后我们再设置 perspective 为 201px，这时可以很明显地看到，box2 占据了整个屏幕，而 box1 宽高约为 200px，唯有设置 translate3d(0,0,0) 时，宽高才为 100px。
-
-现在可以来理解下 perspective 和 translate3d 的关系，perspective 可以比作镜头和 DOM 的距离，实际上设置多少都没影响，因为它通过跟 z-axis 上的数值比例来影响样式，它更像是一个刻度，而 translate3d 的 z-axis 则表示了 DOM 和屏幕的距离。假定镜头跟屏幕的距离固定了，z-axis 越大，DOM 逐渐远离屏幕，靠近镜头，这时 DOM 看起来也就越大，当 z-axis 大于或等于 perspective 时，DOM元素已经在我们镜头的后面了，所以也就看不到它了。
-
-
-
-现在也就好理解为什么 perspective 和 translate3d 能够影响 DOM 的层级了，它们在屏幕和镜头之间的距离不同，所以就有了层次，移动端设备很好地表现了这个结论，但在 PC 的 Chrome 上测试则不然，我们仍需要 z-index 才会表现出我们需要的 层次关系。
-
-**参考**
-
-* http://segmentfault.com/q/1010000002480824
diff --git a/source/_posts/2015-10-26-zepto-cors.md b/source/_posts/2015-10-26-zepto-cors.md
deleted file mode 100644
index 99fcd6bf49..0000000000
--- a/source/_posts/2015-10-26-zepto-cors.md
+++ /dev/null
@@ -1,144 +0,0 @@
-title: 前方有坑，请绕道——Zepto 中使用 CORS
-subtitle: "一直以来，我们在移动端上面使用 zepto 并没有出现太大的问题。直至我们将 Ajax 跨域请求从 iframe 的方式切换成 CORS 之后。"
-date: 2015-10-26 12:24:22
-cover: //img12.360buyimg.com/ling/jfs/t1/51898/6/2545/140297/5d07043aE14d3c609/6cbb7838ddf76024.jpg
-categories: Web开发
-tags:
- - Zepto
- - CORS
-author:
- nick: koppt
- github_name: Koppthe
----
-
-众所周知，现在移动 Web 开发中，`Zepto.js` 是使用频率比较高的库之一。由于它的体积小，加载速度快，有着和 `jquery` 类似的 API，而备受开发者喜爱。可随着时间的推移，我们遇到了不少 `Zepto` 的坑，而且文件体积的大小跟代码的执行效率并没有什么关系，最后我们发现 `Zepto` 并没有太大的卵用。
-
-jsperf 上有个 `zepto` 和 `jquery` DOM 操作的对比测试，有兴趣可以看一下：[zepto vs jquery - selectors](http://jsperf.com/zepto-vs-jquery-2013/25)
-
->开源项目好坏的一个评判标准之一：是否有一个强大的社区和一批积极的贡献者
-
-
-我们简单的看一个对比：
-
-
-
-很明显，`Zepto` 的活跃度远远没有 `jquery` 高。不过言归正传，还是回到 `Zepto` 的话题上。
-
----
-
-一直以来，我们在移动端上面使用 `zepto`并没有出现太大的问题。直至我们将 Ajax 跨域请求从 iframe 的方式切换成 `CORS` 之后，一个比较隐蔽的 Bug 出现了。
-
-### 问题描述
-
-1. 页面在Webview中，点击按钮无效
-2. 页面在部分浏览器中，无法拉取到用户的信息
-
-### 问题定位
-
-我通过 `Fiddler` 或 `Charles` 抓包发现，在 webview 中，点击按钮之后的 Ajax 请求并未发出，但是页面在手机QQ浏览器和 PC 上表现都是正常的。因为是在切换 CORS 之后，页面才出现异常的，在此之前并没有版本迭代。所以 CORS 代码首当其冲要进行深层次的 code-review，于是我直接在 `CORS` 的代码块上进行 `try-catch`，结果捕获到异常：
-
-`INVALID_STATE_ERR: DOM Exception 11`
-
-
-### 问题深入剖析
-
-先来看看测试代码：
-
-```
-if (options.withCredentials) {
- options = $.extend(options, {
- xhr: function() {
- var xhr = new window.XMLHttpRequest()
- xhr.withCredentails = true
- return xhr
- }
-}}
-delete options.withCredentails
-
-$.ajax(options)
-```
-
-
-这段代码在大多数浏览器中都可以正常执行，但是在 Android 的 webview 和一些旧版本的手机浏览器中会抛出错误。
-
-以上代码和普通的 Ajax 请求不同的地方在于设置了 `CORS` 的 `withCredentials` 属性。（`CORS` 请求默认是不会带上 `cookies` 等身份信息的，如果需要在请求中带上 `cookies`，则需要设置 `XMLHttpRequest` 的 `withCredentials` 属性值为 true）
-
-下面通过两个例子来分析一下：
-
-例一：
-
-```
-var xhr = new XMLHttpRequest()
-xhr.withCrendentials = true
-xhr.open('POST', 'url', true)
-xhr.send()
-```
-
-这段代码在部分浏览器中依旧会抛出异常：`INVALID_STATE_ERR: DOM Exception 11`
-
-例二：
-
-```
-var xhr = new XMLHttpRequest()
-xhr.open('POST', 'url', true)
-xhr.withCredentials = true
-xhr.send()
-```
-
-这段代码可以正常执行，并不会抛出异常
-为什么 `xhr.withCredentials` 赋值在 `xhr.open()` 方法之前就会出错呢？
-
-秉着科(xian)学(de)严(dan)谨(teng)的态度，翻看了 W3C 在 2011 年和 2012 年关于 `XMLHttpRequest` 的规范文档，发现使用 `withCredentials` 属性的规范发生了改变。
-
-2011 年的规范：
-
-
-2012 年的规范：
-
-
-对比两份文档，我们重点看一下 step 1：
-2011 年的规范中规定当 `XMLHttpRequest` 的 `readyState` 状态不是 `OPENED` 时，会报错；
-2012 年的规范中规定当 `XMLHttpRequest` 的 `readyState` 状态不是 `UNSENT` 或 `OPENDED` 时，会报错；
-
-下面简单介绍一下 `XMLHttpRequest` 的 `readyState` 值：
-
-| Value | State | Description |
-| ------ | ----------- | -----------|
-| 0 | UNSENT | open() has not been called yet. |
-| 1 | OPENED | send() has not been called yet. |
-| 2 | HEADERS_RECEIVED | send() has been called,and headers and status are available. |
-| 3 | LOADING | Downloading;responseText holds partial data |
-| 4 | DONE | The operation is complete |
-
-由此可以看出，当一个 `XMLHttpRequest` 对象被创建时，默认的 `readyState` 状态为 `UNSENT`，只有执行了 open() 方法并且还没有执行 send() 方法时，`readyState` 的状态才为 `OPENED`。
-
-由于一些老版本的浏览器是按照 2012 年之前的规范来实现的，所以这一部分浏览器中，open() 方法要在设置 `withCredentials` 属性之前调用。因此为了兼容，正确的做法应该是在 open() 方法之后再设置 `withCredentials` 属性。
-
-下面来看看 zepto.js v1.1.3 的源码：
-```
-if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]
-
-var async = 'async' in settings ? settings.async : true
-
-xhr.open(settings.type, settings.url, async, settings.username, settings.password)
-```
-
-`zepto` 是在 open() 方法之前设置 `XMLHttpRequest` 的属性值的，所以这会导致在使用 `CORS` 并且设置 `withCredentials` 的时候，代码在部分浏览器中报错。Android webview 中重现的几率很大。
-
-----
-
-总结：在使用 `CORS` 时，如果要给 `withCredentials` 赋值，请务必要在 open() 方法之后，否则无法向后兼容。
-
-对于 zepto.js 的问题，已经有用户向作者提交了 PR，作者也表示会在下个版本中修复（可是直到今天，都更新到 v1.1.6 版本了，还是没有修复这个问题，更改一下代码顺序就那么难吗？！难怪阿里也嫌 zepto 更新速度太慢，问题多，所以自己 fork 代码进行了定制化）。
-
-所以目前如果要用 `zepto` 来进行 `CORS` 的话，还是需要自己更改 `zepto` 的 ajax 模块代码，然后手动构建。
-
-----
-
-### 参考资料：
-
-[XMLHttpRequest Level 2 2011](http://www.w3.org/TR/2011/WD-XMLHttpRequest2-20110816/#the-withcredentials-attribute)
-[XMLHttpRequest Level 1 2014](http://www.w3.org/TR/XMLHttpRequest/)
-[XMLHttpRequest Level 2 2014](http://www.w3.org/TR/XMLHttpRequest2/)
-[Zepto issues](https://github.com/madrobby/zepto/issues/921)
-
diff --git a/source/_posts/2015-11-02-flash-canvas.md b/source/_posts/2015-11-02-flash-canvas.md
deleted file mode 100644
index d553fc2e24..0000000000
--- a/source/_posts/2015-11-02-flash-canvas.md
+++ /dev/null
@@ -1,292 +0,0 @@
-title: 使用Adobe FLASH CC制作Canvas动画
-subtitle: "flash可以导出canvas动画，大大缩短制作动画所需要的时间。它是可视化IDE，可以让我们写少很多代码。做出来的动画，可以更加精确。"
-date: 2015-11-02 18:44:25
-cover: //img20.360buyimg.com/ling/jfs/t1/74339/1/2163/81630/5d070458Ec55b55bd/c827e30795f45b8c.png
-categories: Web开发
-tags:
- - Flash
- - Canvas
-author:
- nick: 圆姑娘她爹
- github_name: youing
-
----
-
-
-flash可以导出canvas动画，大大缩短制作动画所需要的时间。它是一个可视化IDE，可以让我们写少很多代码。做出来的动画，可以更加精确。同时，可以通用使用帧脚本中的 Javascript，为资源添加交互性。
-
-
-
-## 新建HTML5 Canvas项目
-
-
-
-### 舞台设置
-
-舞台大小修改为：600x600 (_这里可以根据设计稿调整所需要的舞台大小_)
-
-### 帧频
-
-是指每秒钟放映或显示的帧或图像的数量，这个数值设置越大，动画越快，但同时也是性能消耗大户。这里我们设置为36
-
-
-
-## 导入资源
-
-文件 > 导入 > 导入到库
-
-## 布局
-
-快捷键Ctrl + L或者窗口菜单下 > 库
-
-从资源库中把资源拖到舞台进去,通过移动拖拽的形式进行布局
-
-
-
-## 图形与影片剪辑
-
-我们可以将单独的动画，放到一个独立的影片剪辑里，这样可以更好的控制动画。几个独立的剪片剪辑，可以组成一个完整的动画。
-
-当我们把图片从资源库拖到舞台时，它这个时候，只是普通的位图，并不能做补帧动画，所以我们必须把它转换成元件。
-
-* **图形**由矢量图或者是位图组成。
-* **影片剪辑**包含在动画影片中的影片片段，有自己的时间轴和属性。具有交互性，是用途最广、功能最多的部分。
-
-下面制作以飘动的钱，做个例子说明
-
-选择位图，右键 > 转换为元件，这个时候，弹出一个对话窗口，我们首先选择“影片剪辑”，保存。双击进入刚才创始的影片剪辑，这个时候，由于刚才我们只是把位图转成了影片剪辑，但实际上，它里面，仍然是一个位图，所以并不能做动画操作。所以我们需要在影片剪辑里，把图片转换了“图形”。
-
-
-
-## 时间轴
-
-上面已经把图片转成图形元件，所以我们现在需要时间轴某个地方中插入关键帧。这里我们在30,60帧处插入关键帧。然后在30帧处，移动元件的位置，然后在每个关键帧的中间右键，选择“创建传统补间”。速度可以通过删除或者增加两个关键帧的补间动画时间长度来控制。
-
-
-
-
-
-## 动作播放控制
-
-如果我们希望动画可以连续从头再播放，可以在动画的最后一帧插入一个空白关键帧，打开动作面板，然后写上
-
-```
-this.gotoAndPlay(0)
-```
-
-
-
-
-即可回到第一帧重新播放，如果希望停止动画，则
-
-```
-this.stop();
-```
-
-如果希望跳到某帧去播放
-
-```
-this.gotoAndPlay(n)
-```
-
-如果希望跳到某帧并停止
-
-```
-this.gotoAndStop(n)
-```
-
-
-## 发布
-
-文件 > 发布设置
-
-### 文件输出
-
-* 循环时间轴(_表示是否循环整个动画_)
-* 覆盖HTML(_第一次发布时可以选上，如果对html有修改，记得把这个选项去掉,否则会对文件进行覆盖操作_)
-
-### 资源导出选项
-
-* 图像(_是否导出雪碧图_)
-* javascript命名空间(_基本上不需要修改_)，这几个属于全局变量，可以在发布后的js文件中再修改。
-
-
-
-
-
-
-## 生成html
-
-最终会生成一个html文件和一个js文件
-
-### 生成的html文件
-
-* 框架自带的preloadjs,可以轻松管理资源预加载，它提供了相关api可以进行loading等操作。
-
-
-``` html
-
-
-
-
-
-
-```
-
-#### 将SVG图像作为背景图像嵌入
-```css
-background: url('http://www.w3school.com.cn/svg/rect1.svg') no-repeat;
-```
-
-#### 使用svg元素，通过代码将SVG图像嵌入到HTML代码中
-```html
-
-
-
-```
-
-### svg sprites
-svg sprites类似于css sprites，将各个svg合并在一起。
-最主要的优点就是能减少页面的加载时间，优化开发流程，以及保持页面中图片元素的一致性。
-实践中我们可以把整块的svg放在head头部， 因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。
-```html
-
-
- 后文介绍
- -TIPS：不要在before,after里加动画！ - -## 不止于“动”： -1. **惯性** - - 物体没有停在本应该停止的位置上而是靠惯性**继续摆动一段时间然后反方向摆回来**。 - 惯性在日常的动画需求中应用相当普遍，元素的高速进入都涉及惯性。 - - 示例：标题快速从左侧划入屏幕中，标题本应停在屏幕左右居中位置，由于惯性的作用，标题到达居中位置后又向右滑行一小段，再反方向滑回。 -  （案例：618 APP返场页H5） - -2. **透视** - - 物体与观察者的距离远近在静态时通过**物体的大小**来体现。 - 当物体运动时，通过**远近物体不同的运动速度**来体现，从而形成层次感。**近处的物体运动快，远处的物体运动慢**。 -  - （透视原理图） - - 示例：云朵与观察者的距离有远近之分（不可能所有的云都在一个平面上），设置云朵的飘动动画时，可根据云朵的大小（远近）设置不同的运动速度，近处的云朵飘动的速度比远处的快，从而形成透视。 - ``` - .cover_clouds .c1, - .cover_clouds .c2, - .cover_clouds .c4, - .cover_clouds .c6 - { - -webkit-animation: cloudFloat linear 6s infinite; - } - .cover_clouds .c3, - .cover_clouds .c5, - .cover_clouds .c7 - { - -webkit-animation: cloudFloat linear 10s infinite; - } - ``` -  （案例：iphone6s推广游戏） - -3. **节奏** - - 善用**曲线**和**缓动**可使效果更生动。 - **多个元素保持相同节奏**，保证画面的动画不过分凌乱。 - - 示例：匀速的呼吸与缓动的呼吸。 - ``` - .breath{ - -webkit-animation: - breath 6s linear infinite; - } - ``` - ``` - .breath{ - -webkit-animation: - breath 6s cubic-bezier(.2,.73,.71,.44) infinite; - } - ``` -  - (左图：匀速呼吸效果图；右图：缓动呼吸效果图) - 跟随动画进行呼吸，可以明显感觉到缓动的呼吸更贴近我们实际的呼吸情况。呼吸函数如下： -  - （图片来源：[让界面动画更自然——ISUX](http://isux.tencent.com/animation-factor.html)） - -4. **跟随** - - 跟随动作是将物体的各部位拆解，通常是**没有骨架**的部位较容易产生跟随的动作。例如：一个奔跑的人突然停下，他的衣服头发等可能仍会运动。其中，人是“主体”，衣服头发等是“附属物”。 - 附属物的动作取决于：**主体的动作**，**附属物本身的重量和质地**，以及**空气的阻力**。 - **主体与附属物之间动作的重叠和追随**，就是鉴定动作流畅性与自然度好坏的标准。 - - 示例：首页主体人物动作触发后，进行小范围的四向运动以模拟人物身体颤动的效果。人物头饰（花及骨头）与运动主体（人）并非一体，属于附属物。附属物的运动受主体的运动影响出现同向、延时的运动。 -  （案例：拍拍七夕活动页—七叻个夕） - -## 优化 -1. 不用left/right/width/height/margin-top等 -2. 少用color/background等 -3. 使用translate/opacity -4. 适当开启GPU加速 -5. 适当使用will-change - - -## 参考文章 -1. [CSS3 transition 属性过渡效果 详解,Techzero ,2014-04-1](http://www.itechzero.com/css3-transition-property-transition-effect-explain.html) -2. [深入理解CSS3 Animation 帧动画,Aaron,2015-07-13](http://www.cnblogs.com/aaronjs/p/4642015.html) -3. [CSS3 timing-function: steps() 详解,那个傻瓜瓜,2014-12-30](http://www.tuicool.com/articles/neqMVr) -4. [主流动画实现方式总结,Benjamin,2015-01-25](http://www.zuojj.com/archives/1292.html) -5. [Animation Principles for the Web](https://cssanimation.rocks/principles/) -6. [12 basic principles of animation](https://en.wikipedia.org/wiki/12_basic_principles_of_animation) diff --git a/source/_posts/2016-01-07-auto-deploy-website-by-webhooks-of-github.md b/source/_posts/2016-01-07-auto-deploy-website-by-webhooks-of-github.md deleted file mode 100644 index a4e3dd00ad..0000000000 --- a/source/_posts/2016-01-07-auto-deploy-website-by-webhooks-of-github.md +++ /dev/null @@ -1,188 +0,0 @@ -title: 使用Github的webhooks进行网站自动化部署 -subtitle: 本文介绍Github的高级功能webhooks，并通过实例帮助我们如何使用它进行网站的自动化部署 -cover: //img20.360buyimg.com/ling/jfs/t1/42436/36/6777/23242/5d073c46Ec32bbcdd/ae3edeb82083683a.jpg -date: 2016-01-07 17:05:05 -categories: Web开发 -tags: - - Github - - webhooks -author: - nick: SkyCai - github_name: cnt1992 ---- - -相信很多码农都玩过了`Git`，如果对`Git`只是一知半解，可以移步`LV`写的 [GIT常用操作总结](http://aotu.io/notes/2015/11/17/Git-Commands/)，下面介绍到的一些关于 `Git` 的概念就不再赘述。 - -为啥想写这篇文章？主要是因为部门服务器因为安全性原因不允许`SCP`上传文件进行应用部署，然后有一些应用是放在Github上的，然后部署应用的步骤就变成： - -1.git clone github项目 本地目录 -2.配置一下应用的pm2.json并reload -3.Nginx配置一下反向代理并restart - -当然如果只是一次性部署上去就不再修改的话并没啥问题，但是要是项目持续性修改迭代的话，就比较麻烦了，我们就在不断的重复着上面的步骤。作为一个码农，怎么允许不断的重复同样的工作，于是`Github webhooks`闪亮登场。 - - - -## 关于Github webhooks - -让我们看看 [官方](https://developer.github.com/webhooks/) 关于Github webhooks的解释： - -> Webhooks allow you to build or set up integrations which subscribe to certain events on GitHub.com. - -提炼出来几个点： - -- 必须是Github上面的项目 -- 订阅了确定的事件（包括push/pull等命令） -- 自动触发 - -刚好符合了这几个条件，那接下来就看看如何进行`网站自动化部署`，主要会从下面几点来讲解： - -1.自动化`shell`脚本 -2.服务端实现 -3.配置`github webhooks` - -## 自动化脚本 - -我之前翻译过一篇文章 [使用Node.JS创建命令行脚本工具](http://aotu.io/notes/2015/12/23/building-command-line-tools-with-node-js/)，但是我们现在的自动化脚本直接用 `shell` 来实现，假设名称为`auto_build.sh`： - -```sh -#! /bin/bash - -SITE_PATH='/export/Data/aotu.jd.com/index/cnt1992.github.io' -USER='admin' -USERGROUP='admin' - -cd $SITE_PATH -git reset --hard origin/master -git clean -f -git pull -git checkout master -chown -R $USER:$USERGROUP $SITE_PATH -``` - -**Note:** 在执行上面`shell`脚本之前我们必须第一次手动`git clone`项目进去，例如： - -``` -git clone github远程项目 /export/Data/aotu.jd.com/index/cnt1992.github.io -``` - -> shell脚本其实就跟直接在终端运行命令一样，类似于windows下面的BAT批处理命令，更多详细可以查阅资料。 - -## 服务端实现 - -`Github webhooks`需要跟我们的服务器进行通信，确保是可以推送到我们的服务器，所以会发送一个带有`X-Hub-Signature`的`POST`请求，为了方便我们直接用第三方的库[github-webhook-handler](https://github.com/rvagg/github-webhook-handler)来接收参数并且做监听事件的处理等工作。 - -现在我们可以在`shell`脚本的同级目录下面执行下面命令初始化一个`package.json`: - -```bash -npm init -f -``` - -然后执行下面命令安装上面提到的第三方库： - -```bash -npm i -S github-webhook-handler -``` - -接下来创建我们的服务主入口文件`index.js`： - -```bash -touch index.js -``` - -紧接着参考`github-webhook-handler`的`demo`编辑我们的`index.js`： - -```javascript -var http = require('http'); -var spawn = require('child_process').spawn; -var createHandler = require('github-webhook-handler'); - -// 下面填写的myscrect跟github webhooks配置一样，下一步会说；path是我们访问的路径 -var handler = createHandler({ path: '/auto_build', secret: '' }); - -http.createServer(function (req, res) { - handler(req, res, function (err) { - res.statusCode = 404; - res.end('no such location'); - }) -}).listen(6666); - -handler.on('error', function (err) { - console.error('Error:', err.message) -}); - -// 监听到push事件的时候执行我们的自动化脚本 -handler.on('push', function (event) { - console.log('Received a push event for %s to %s', - event.payload.repository.name, - event.payload.ref); - - runCommand('sh', ['./auto_build.sh'], function( txt ){ - console.log(txt); - }); -}); - -function runCommand( cmd, args, callback ){ - var child = spawn( cmd, args ); - var response = ''; - child.stdout.on('data', function( buffer ){ resp += buffer.toString(); }); - child.stdout.on('end', function(){ callback( resp ) }); -} - -// 由于我们不需要监听issues，所以下面代码注释掉 -// handler.on('issues', function (event) { -// console.log('Received an issue event for %s action=%s: #%d %s', -// event.payload.repository.name, -// event.payload.action, -// event.payload.issue.number, -// event.payload.issue.title) -}); -``` - -然后利用node管理工具跑起来服务，这里使用了`pm2`： - -```bash -pm2 start index.js -``` - -到这一步服务已经跑起来了，但是对外网并不能直接访问到，所以还需要配置一下`Nginx`做一下反向代理： - -```javascript -··· -server { - listen 80; - server_name aotu.jd.com; - - ··· - location /auto_build { - proxy_pass http://127.0.0.1:6666; - } - ··· -} -``` - -OK，到这里整个服务已经搭建完成，下一步就只需要配置`Github webhooks`。 - -## 配置`github webhooks` - -我们可以在我们的`Github`上面最右边有一个`Settings`的Tab，找到`Webhooks & services`，如下图： - - - -然后点击新建，输入`Payload URL`跟`Secret`，确定即可。 - -## 验证 - -绑定成功之后，我们可以试试提交一下代码，然后来到`Github`看看是否自动触发了接口，如下图： - - - -然后随便选择一个点击一下，可以看到`200`的响应： - - - -## 小结 - -上面就是利用`Github webhooks`进行网站自动化部署的全部内容了，不难发现其实这项技术还是有局限性的，那就是依赖于`github`，一般我们选择的都是免费github账号，所有项目都对外，一些敏感项目是不适合放置上去的。 - -这个时候就考虑这个组里同事推荐的 [backup](http://backup.github.io/backup/v4/)，自己还没试用，有兴趣可以了解了解。 diff --git a/source/_posts/2016-01-07-debug-webapp-with-chrome-devtools.md b/source/_posts/2016-01-07-debug-webapp-with-chrome-devtools.md deleted file mode 100644 index 08d4f6ceda..0000000000 --- a/source/_posts/2016-01-07-debug-webapp-with-chrome-devtools.md +++ /dev/null @@ -1,119 +0,0 @@ -title: 使用Chrome开发工具优化Web应用 -subtitle: 本文主要介绍如何使用Chrome开发工具的Timeline功能来监控Web应用的性能，找出问题，并由此延伸出一些优化Web应用性能的思路。 -cover: //img12.360buyimg.com/ling/jfs/t1/48480/21/2613/390171/5d073cd4E94c39266/3a75d838191fbb7b.png -categories: 性能优化 -tags: - - chrome - - DevTool -author: - nick: Simba - github_name: Simbachen -date: 2016-01-07 17:05:05 ---- - -当我们写了一组炫(fu)酷(za)的H5动效后，发现在移动端上会卡顿，该怎么办？ -目前市场上大多数设备的屏幕刷新频率是60Hz，想要用户滑动页面或者播放动画没有卡顿，浏览器的渲染速率就要和屏幕刷新的频率同步，达到60fps。 - -Chrome开发工具的Timeline面板监控了web应用运行时所有活动情况，不过它的功能很多，对于英文不好的童鞋，有点无从下手，下面直接上手来使用。 - -## 首先，审查一个页面，切换到Timeline面板。 - - -图中红框标出的部分是功能栏：从45到47版本，Timeline工具连续都有更新，当前截图的版本号是47.0； - ->* 开始/停止记录，打开Timeline面板时刷新页面会自动开始记录 -* 清除已有记录 -* 过滤内容 -* 强制垃圾回收 -* 视图模式，最新版本中点击切换两种视图模式 -* 捕获内容选项，选中最后一项截屏的话会保留每帧的截图，记录数据的buffer空间会和快被占满 - -## 接下来记录一段时间线状态。 - - -图中没被标出的部分是整个监控过程中的数据概览；红框标出的部分有两栏，上面是选中的时间段内每一帧的情况，下面是内存占用的变化。 - -浏览器渲染的速率达到60帧/秒，那么每一帧只有1000ms / 60 = 16.67ms的时间来响应，其中浏览器在每一帧还要做一些额外的事情，因为我们要保证每一帧的CPU time在12ms左右。 - -有红色三角形角标标出的表示当前帧消耗过多时间 - - -点击选中一帧可以看到当前帧的详细情况，图中显示，当前帧的渲染消耗了30.8ms，可能会造成卡顿。 -饼图中可能会有五个颜色： - ->* 蓝色： 加载 -* 黄色： 脚本执行 -* 紫色： 渲染 -* 绿色： 绘制 -* 灰色： DevTools不感知的活动 - -图中帧因为没有加载活动，没有蓝色区域。可以看出脚本执行和帧绘制占据了大部分面积，不过问题并不在这里，因为它们总共才花费7.82s。 -在Chrome的45.0版本中，饼图里还有一种颜色：白色，表示刷新周期里空闲的时间。在这段时间里，一直在等待用户的响应，直到一个交互事件触发了页面视图的变化。最新的更新里在饼图中去掉了白色，区分为CPU time和帧的Duration，更加合理。这里引起视图渲染和绘制可能有： -1. 用户的交互行为 -2. 定时器触发 - -使用requestAnimationFrame这个函数，将脚本执行和渲染流程联系起来，以避免在某一帧的中间突然执行脚本导致重新渲染和绘制而整个过程不能在16ms内完成。 - - -## 分析一个问题帧 - - -这一帧比较极端，从图上看就是紫色部分花费掉了大量时间，我们就可以从这里入手来优化代码，在此之前先得了解一下浏览器绘制帧的整个过程。实际导致绘制帧卡顿可能是其中任何一个环节。 - - - - ->* Javascript： 除了使用Javascrit来实现视觉变化，还有CSS Animations、 Transitions。 -* Style： 根据CSS选择器，对每个DOM元素匹配对应的CSS样式。 -* Layout: 在上一步确定了每个DOM元素的样式规则后，这一步就是具体计算每个DOM元素最终在屏幕上显示的大小和位置。web页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。例如父元素的宽度变化引发子元素宽度变化，又联动的引发孙子元素的宽度变化。 -* Painting： 绘制，本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。 -* Composite： 上一步的绘制是在多个层上进行的，在这一步，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。 - - -说明，上述过程的解释总结或直接引用自谷歌开发者文档。 - -在以上5个过程里： - -1. 修改DOM元素的“layout”(宽、高、位置)属性，浏览器会检查哪些元素需要重新布局，然后对页面激发一个reflow过程完成重新布局。被reflow的元素，接下来也会激发绘制过程，最后激发渲染层合并过程，生成最后的画面。 -2. DOM元素有一些“paint only”属性，例如背景图片、文字颜色、阴影，这些属性不会影响页面的布局，因此浏览器会在完成样式计算之后，跳过布局过程，只做绘制和渲染层合并过程。 -3. 还有一些CSS属性既不需要重新布局也不需要重新绘制，例如，transform、opacity（目前，只有这两个属性），浏览器会在完成样式计算之后，直接做渲染层合并。 -4. 用translateZ(0)属性把动画元素提升到单独的渲染层中（我们常说的启用3D加速）。 - -对于滚屏和动画，最理想的就是只使用transform和opacity来实现视觉变化效果，并且遵循第四点。 - - -## 点击切换视图模式，找到问题所在。 - - - -这是一个知名线上网站的首页，这里发生了滚屏触发加载内容，导致DOM结构变化，引发了大量内容的重绘和渲染，并且页面旧的内容没有回收，节点较多，明显的感觉到滚屏的时候有卡顿感。对于这个应用按照上述的思路来优化，在优化的过程中，我们也许会遇到下面这个问题。 - - - -这是另一个demo页面，有数千个节点组成，用以模拟无限懒加载数据的情况，其中只有一个节点上应用了循环的css3动画。其它的都不会改变。为了将有动画的节点独立到一个单独的渲染层中，我对它应用了translateZ(0)。本以为大功告成，结果在滚屏的时候发现非常卡顿。于是就有了上图，平均每帧的渲染都消耗掉了200ms左右，从Timeline监控数据中可以看到，其中Composite Layers这个过程耗费了大量时间。那么直接查看layer状态： - - - -再看官方文档的提示：由于每个渲染层的纹理都需要上传到GPU处理，过多的渲染层来带的开销而对页面渲染性能产生的影响，甚至远远超过了它在性能改善上带来的好处。 - -实际上页面里并没有主动通过translateZ属性来独立更多的层，我们可以认为这是触发了浏览器的一个“bug”，最新版本的chrome仍然会触发这个问题，不过最新版本的ios里Safari已经不会触发这个问题了。至于什么情况会触发浏览器去创建一个独立层来渲染元素，例如拥有3DCSS属性的元素、使用加速视频解码的元素等，对这个问题这里就不再详述。 - -如果手动的将大量的层独立出来渲染，导致GPU罢工，或是任由他们导致CPU罢工，都会造成性能问题，不过有了Timeline工具，我们就能找到问题所在，一一去分析解决了。 - - - - - -## 参考文档： -https://developers.google.com/web/fundamentals/performance -https://developer.chrome.com/devtools/docs/timeline - - - - - - - - - - diff --git a/source/_posts/2016-01-08-promise.md b/source/_posts/2016-01-08-promise.md deleted file mode 100644 index 27b8ae1896..0000000000 --- a/source/_posts/2016-01-08-promise.md +++ /dev/null @@ -1,280 +0,0 @@ -title: Promise 实战 -subtitle: 本文适合对Promise已有一定了解的同学，如果你还不知道Promise是什么，可以移步这里Promise API的使用方法，掌握基础的Promise使用方法后，再阅读本文。 - -cover: //img13.360buyimg.com/ling/jfs/t1/45903/37/2685/28858/5d0771c8Ef0b6254f/387020907a5d5f7b.jpg -category: Web开发 -tags: - - ES6 - - Promise -author: - nick: AdamChuan - github_name: AdamChuan -date: 2016-01-08 17:05:05 ---- - -## Promise 是什么 ## - -Promise 是抽象异步处理对象以及对其进行各种操作的组件。 通俗点讲，Promise能解决由于回调嵌套带来的流程控制与可读性问题。 -promise 已经是成为我们解决回调炼狱的常用方案，而且已经得到官方标准支持，如果你刚刚开始使用Promise，本文将帮助你了解几个常见的Promise的使用场景。 - - -## Promise 的历史 ## - -[早在1976年就有人提出Promise 的概念](https://en.wikipedia.org/wiki/Futures_and_promises)。之后的计算机语言发展中，很多语言都提供了与 Promise 相关的特性。而对于Javascript语言来说，最早让大家广泛接触的 Promise 相关的库是由 `jQuery.Deferred()` 对象实现的。随着 Promise/A+ 标准规定了一系列 API，实现该标准的库如雨后春笋版涌现了出来，在最新的ECMAScript 2015中已经提供了Promise的内置对象，成为了基础库。 - -## 一些Promise的使用场景 ## - -### 1.原生API函数的Promise化 ### -大部分原生的API函数并不支持Promise，还是基于回调来使用的，所以需要把一些方法改为返回一个 Promise 对象，这个过程被称为函数的 Promise 化。 -下面一个例子将对定时器`setTimeout` Promise 化。 -```js -function timer(fn,time){ - return function(){ - return new Promise( (resolve,reject)=>{ - setTimeout(function(){ - fn(); - resolve(); - },time); - }); - } -} - -Promise.resolve() - .then( - timer(function () { - console.log('1') - }, 1000) - ) - .then(() => { - console.log('2'); - }); -/* -输出结果 -1 -2 -*/ -``` -Promise化本质上都属于一种Curry化。Curry化是指，将需要传递多参数的函数生成一个新的函数，如上代码先通过执行 timer得到一个新的函数，该函数会返回一个Promise，这样就完成了Promise化。将一些基础的函数进行Promise化，可以 -大大减少不必要的代码。 -下面的代码，将会体现这种优势: -```js - var promise_timer = timer(function () { - console.log('1') - }, 1000) - - function promise_timer2(){ - return new Promise( (resolve,reject)=>{ - setTimeout(function(){ - console.log('1'); - resolve(); - },1000); - }); - } -``` -变量`promise_timer`赋予的函数，与函数`promise_timer2`是等价的。 可以看出 `setTimeout` Promise 化之后，代码程序可读性更强，代码量也变少了。 - -### 2.Promise.all解决并行任务 ### - -当某个函数需要在 N 个回调都完成时才执行，这个时候就可以使用`Promise.all`来改善你的代码。 - -以下是一个图片并行加载的例子,当所有图片加载完成后，再将所有图片一起展示。 - -```js - -function loadImg(src){ - return new Promise( (resolve,reject)=> { - var img = document.createElement("img"); - img.src = src; - img.onload = function(){ - resolve(img); - } - img.onerror = function(err){ - reject(err); - } - }); -} - -function showImgs(imgs){ - imgs.forEach(function(img){ - document.body.appendChild(img); - }); -} - -Promise.all([ - loadImg('1.png'), //加载图片 - loadImg('2.png'), - loadImg('3.png'), - ... -]).then(showImgs); //显示图片 - - -``` - - -需要注意的是，`Promise.all`中传入的 Promise 数组，各自 resolve 之后得到的值，将合并成一个数组传入到 then 中的方法，且数组中 resolve 值的顺序，与 Promise 数组的顺序一致。 - - -### 3.Promise.then 的链式调用 ### - -在许多Promise示例中都可以看到类似如下的链式调用的代码。 - -```js - -function getUserInfo(){ - console.log('getUserInfo start'); - return new Promise((resolve,reject)=>{ - setTimeout(()=>{ - var userInfo = { - name : 'adamchuan' - }; - resolve(userinfo); - console.log('getUserInfo end'); - },1000); - }); -} -function getGroupInfo(userinfo){ - console.log('getGroupInfo start'); - return new Promise((resolve,reject)=>{ - setTimeout(()=>{ - var groupInfo = { - name : 'jdc' - } - console.log('getGroupInfo end'); - resolve(groupInfo,userinfo); - },1000); - }); -} - -function getTaskInfo(groupInfo,userinfo){ - console.log('getTaskInfo start'); - return new Promise((resolve,reject)=>{ - setTimeout(()=>{ - var taskInfo = { - name : 'rebuild' - }; - console.log('getTaskInfo end'); - resolve(); - },1000); - }); -} - -var p = Promise.resolve(); - p.then(getUserInfo) - .then(getGroupInfo) - .then(getTaskInfo); - -/* 输出结果 - getUserInfo start - getUserInfo end - getGroupInfo start - getGroupInfo end - getTaskInfo start - getTaskInfo end -*/ -``` -如上面代码所示，我们可以很清楚的理解到程序执行的顺序是 - - - -1. 得到userInfo -2. 得到groupInfo -3. 得到taskInfo - -但是如果我们对代码进行一点小的改造，将 then 中的方法不再返回 Promise ，那么执行的代码将会变成这样: - -``` js -var p = Promise.resolve(); - p.then(getUserInfo) - .then(getGroupInfo) - .then(getTaskInfo) - ... - -function getUserInfo(){ - console.log('1'); - new Promise((resolve,reject)=>{ - setTimeout(()=>{ - console.log('2'); - resolve(); - },1000); - }); -} - -function getGroupInfo(){ - console.log('3'); - new Promise((resolve,reject)=>{ - setTimeout(()=>{ - console.log('4'); - resolve(); - },1000); - }); -} - -function getTaskInfo(){ - console.log('5'); - new Promise((resolve,reject)=>{ - setTimeout(()=>{ - console.log('6'); - resolve(); - },1000); - }); -} - -/* 输出结果 - getUserInfo start - getGroupInfo start - getTaskInfo start - getUserInfo end - getGroupInfo end - getTaskInfo end -*/ -``` -这是为什么呢？ -因为每次调用 then 都会返回一个新的 Promise ，如果 then 中的申明的方法没有返回一个 Promise ，那么会默认返回一个新的 -处于 fulfilled 的 Promise ，之后添加的 then 中的方法都会立即执行,所以执行的顺序就变成这样了： - - -*当要在使用链式 Promise 时，请务必在then传入的方法中返回一个新的 Promise。* - -另外一个需要注意的是，resolve 传递给下个 then 方法的值只能有一个，上面 getTaskInfo 方法中是无法获取到 userInfo 的值，所以如果有多个值需要放在一个数据集合（ Array , Object , Map , Set ）中传入下个方法。 -```js -function getTaskInfo(groupInfo,userInfo){ /* userInfo为undefined */ - console.log(groupInfo); // { name : 'jdc'} - console.log(userInfo); // undefined -} -``` - -### 4.中断或取消 Promise 链 ### -Promise 标准的API 中并没有提供相应的方法来 中断或者取消 Promise 链的执行，一些库中提供了类似`Promise.break`或者 `Promise.fail`的方法来中断或取消 Promise 链。利用`Promise.catch`的特性来中断 promise链。 - -```js -/** 用于中断的信号 */ -class BreakSignal { } - -Promise - .then(() => { - // 开始. - }) - .then(() => { - if (wantToBreakHere) { - // 抛出中断信号. - throw new BreakSignal(); - } - }) - .then(() => { - // 需要跳过的部分. - }) - // 接住中断信号. - .catch(BreakSignal, () => { }); -``` -只要在 Promise 执行过程中抛出异常，都会直接跳转到 catch 中。但是这样的做法有一个缺点，无法区分程序本身的异常，还是手动抛出的异常。所以需要手动设置一个标识标量，来区分是为了中断执行还是本身的程序异常。 - -## 小结 ## -合理的利用 Promise ,可以让代码脉络更加的清晰易懂，流程控制，异常捕获也更加准确。当然为了使用 Promise 也要编写很多额外代码， -想要真正的解决回调问题还得期待ES7的 `async` `await` 关键字的到来，不过在此之前，Promise 都将是解决程序流程控制的最优选择之一。 - -## 参考文章 -1. [Promise A+](http://www.zuojj.com/archives/1292.html) -2. [Promise迷你书](http://liubin.org/promises-book/) -3. [Promise的前世今生](http://alinode.aliyun.com/blog/5) -4. [jQuery的deferred对象详解](http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html) - diff --git a/source/_posts/2016-01-14-introduction-to-JS-game-development.md b/source/_posts/2016-01-14-introduction-to-JS-game-development.md deleted file mode 100644 index 91002f81fd..0000000000 --- a/source/_posts/2016-01-14-introduction-to-JS-game-development.md +++ /dev/null @@ -1,257 +0,0 @@ -title: js游戏开发初级入门 -subtitle: 凹凸实验室水灵通透软妹子－暖暖，手把手教你用js开发五子棋游戏！ -cover: //img11.360buyimg.com/ling/jfs/t1/82905/29/2165/48213/5d0773d6E2da7396e/49b273d509671025.jpg -categories: Web开发 -tags: - - js - - 游戏 - - 五子棋 -author: - nick: 暖暖 - github_name: Newcandy -date: 2016-01-14 09:20:39 ---- -万事开头难，js一直没有进步？跟着这篇文章来编写五子棋游戏吧！ - - -## 1 游戏开发方法 - -### 1.1 小规模游戏 -小规模游戏一般由一人或两人完成，不需要详细的产品说明等资料，直接进入代码的编写，然后在浏览器中解释并运行。有时候出现错误，重新编辑再回到浏览器解释运行，就是一个简单的编辑-解释-运行的重复工作模式。 - -### 1.2 大规模游戏 -大规模游戏一般由两人以上完成，一共分为三个阶段：设计阶段、说明阶段、实现阶段。首先是设计阶段：设计什么游戏，游戏的主体用户是谁，游戏的目的等。然后是说明阶段：清楚游戏需要的类和类中需要的方法，分别做一个规划，保证编写代码时思路清晰，以及代码的整洁性。最后是实现阶段，其实就是进入编辑-解释-运行的工作模式。也就是说，大规模游戏比小规模游戏多了两大阶段即设计阶段和说明阶段而已。 - -## 2 了解游戏规则 - -* 对局双方各执一色棋子。 -* 空棋盘开局 -* 黑先、白后，交替下子，每次只能下一子。 -* 棋子下在棋盘的空白点上，棋子下定后，不得向其它点移动，不得从棋盘上拿掉或拿起另落别处。 -* 黑方的第一枚棋子可下在棋盘任意交叉点上。 - - -## 3 五子棋游戏的主要方法 - -### 3.1 画棋盘 - -#### 3.1.1 画棋盘思路 -```javascript -// 确定棋盘大小 15*15 即n = 15 - -function drawGobang(n) { -// 动态生成dom元素 -// 通过添加类控制棋盘样式，尤其注意边缘的棋子的样式控制 -} -``` - -#### 3.1.2 画棋盘代码 -```javascript -// 画棋盘格子 -function drawGobang(n) { - - for(var i=0;i
-
-
-这个案例下的预加载处理技术是，先把页面DOM结构放入JS模版中，预加载完成后再把页面从JS模版拎出来，页面渲染完后能够完整地呈现页面给用户。
-其中，图片资源相关预加载处理代码段为：
-```javascript
- PreLoad.prototype.image = function(a) {
- var b = document.createElement("img");
- b.src = a
- ...
- }
-
-```
-
-通过创建image元素，设置其src，就简单方便可以预先发起HTTP请求，实现预加载图片。
-除了对png/jpg等格式图片能够利用以上方法实现预加载，对于DataURL转换图片为base64编码的字符串也能够实现预加载。
- 在Adidas的《罗斯·决不凋谢》中，利用DataURL协议将图片转换成base64编码的字符串写入JS中，预加载JS文件完成后通过JS来进行内联在DOM元素中。
-> 以下截图来自案例[《Adidas：罗斯·决不凋谢》](http://drose6.adidasevent.com/])![img](https://img11.360buyimg.com/ling/jfs/t1/66484/30/2193/2173/5d085430E86b4235d/4d6398822a573276.png '示例图片' '{"style":"display:inline-block;max-width:200px;max-height:200px;width:100%;"}' %}
-
-
-
-这里贴出该案例中部分预加载处理代码代码，有兴趣的可以详见0.main.js、2.main.js、3.main.js处深入研究。
-> 以下为Chrome Dev Tool 对案例资源查看的界面截图
-
-
-
-虽然，业界有一种说法是不建议在移动端开发中使用DataURL转换图片为base64编码的做法，因为对大量的base64图片解码比较损耗内存和性能，但是使用base64在一定条件下是有助于页面加载速度提升，具体的原由可以前往[《图片资源Base64化在H5页面里有用武之地吗？》](http://aotu.io/notes/2016/03/04/can-we-use-base64-in-h5-webapps/)阅读。
-### 隐性预加载
-除了明确的预加载提示，还有一种是通过推进触屏页面进度的趣味互动的方式，笔者称之此种类似的情况为隐性预加载。
-
-> 截图来自案例[《大众点评：阿惠故事1 - 吃饭别带姥爷》](http://evt.dianping.com/market/20151207/)![img](https://img20.360buyimg.com/ling/jfs/t1/40350/17/9226/2411/5d08557eEc379b4a0/376f3fe83a34ea9c.png '示例图片' '{"style":"display:inline-block;max-width:200px;max-height:200px;width:100%;"}' %}
-
-
-
-
-在大众点评的《阿惠故事1 - 吃饭别带姥爷》的预加载中，先是显性预加载(钱币小图标Loding)快速地呈现部分画面(截图右部分)给用户，再通过互动(向上滑动数钱)来继续分段加载资源。这样的做法一改用户往日沉闷的等待，能够给予用户更好的体验。
-
-还有一个比较特别的案例是大众点评和欧莱雅合作的《好年从头开始》，笔者也将之归纳为隐性预加载。
-
->截图来源于案例[《大众点评：好年从头开始》](http://evt.dianping.com/midas/160108-loreal/index.html)
-
-
-
-
-
-在这里，开发者先预加载了部分图片以呈现首屏画面给用户，同时图片预加载依然在进行，当用户触发的页面内的图片资源还未加载完时则会显示进度条，加载完毕则可以进入下一个画面。
-
-笔者觉得采用这种方式的原因有二，第一，页面内容需要加载的资源过多，若等待全部加载完毕所需时间耗费过长，容易导致流失用户；第二，页面内容足够吸引，即时在交互过程中插入等待过程，用户也愿意去等待。
-
-## 懒加载
-
-懒加载，又称为延迟加载、按需加载。指的是图片在页面渲染的时候先不加载，页面渲染完成后在指定动作触发后再加载图片。
-这种方式通常比较合适于篇幅较长的页面，并且图片内容的重要性低于页面信息内容，能够快速地先将重要的页面信息呈现给用户。
-譬如，这种方式则应用于电商商品信息集合页面，同时也常用于文章阅读的情景下。除了在移动端的应用场景之外，在PC端懒加载也是应用最广泛的一种图片加载优化方式。
-最为常见的一种懒加载技术是以可见距离作为触发点。当页面滑动到屏幕可见区域时，则进行加载图片。实现的原理是：
- - 先将图片的实际src，记录在data-set属性中。
- - 监听屏幕滚动，计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的懒加载。
-
-具体可以前往[拇指期刊](http://jdc.jd.com/h5/case/maga.html)点击文章阅读体验喔。
-
-## 写在最后
- 希望这篇文章能够带给读者一些启发。并不是某一种案例只使用一种加载方式。同时，也不是触屏页面的加载方式仅限于以上方法之一。
- 这里仅是列举并讨论常见的加载方式，凡事讲究实践出真知，在实践的时候必然会有更加切合具体案例的好方法。
- Keep Moving，在触屏页面的开发中，兴许还有更多更优秀的图片资源加载方式等着我们去发掘。
-
-> 文中案例搜集均来源于[数英网](http://www.digitaling.com/projects):)
diff --git a/source/_posts/2016-03-15-jcloud-sum.md b/source/_posts/2016-03-15-jcloud-sum.md
deleted file mode 100644
index 4530ec2497..0000000000
--- a/source/_posts/2016-03-15-jcloud-sum.md
+++ /dev/null
@@ -1,146 +0,0 @@
-title: 某超长文档的探索之路
-subtitle: 加量不加价~ 比字数谁都赢不了我!
-date: 2016-03-15 16:18:00
-cover: https://img14.360buyimg.com/ling/jfs/t1/81553/15/2270/396092/5d085648Ee47b04b1/633cbe7c5c08b71e.png
-categories: 项目总结
-tags:
- - jcloud
- - sum
-author:
- nick: Littly
- github_name: Littly
----
-
-所谓的文档, 大概就是指那种洋洋洒洒写了不下几万字, 最后没有多少人会看完的东西. 对, 比技术不一定, 但比字数谁都赢不了我!
-
-
-
-这次京东云改版的项目, 除了需要搭建一个放置京东云文档的平台, 还包括了文档录入的工作. 之前使用[**Hexo**](http://hexo.io)做过[**HaloJS**](http://aotu.io/halojs/)的文档平台, 在文档录入的时候并没有碰到太多问题. 本以为搭建文档页面也就仅此而已, 直到碰到了长达104页的doc文档...
-
-
-### 搭建框架
-
-不同于其他零散的页面, 文档页面是一整个系列的, 具有相同的页面结构. 页面头部, 底部, 导航等组件. 如果像平时制作静态页面那样每个页面都从一个空白的模板html文件开始下手, 在开发量达到一定程度的时候, 页面整体的维护就会非常困难. 首先是无法很痛快地进行某些公共模块的修改: 就算只是在底部加多一个链接, 或者在导航中删除一个条目, 我们都需要对每个页面都进行手动修改. 另外, 页面的资源管理会越来越难. 每个页面都需要引用整体页面的样式文件与脚本文件, 还都有页面私有的样式文件, 脚本文件, 还有图片文件等. 如果这些资源共用一个文件夹, 有时候就会面临文件命名的难题.
-
-如上面说, 文档页面可谓是重复工作最严重的一种页面. 好在搭建框架的小伙伴非常给力, 使用了同样很给力的开源的前端工程化开发工具[Athena](https://github.com/o2team/athena),自带支持代码热更新的预览服务, 自带压缩代码, 编译sass/less的工具, 自带上传sftp的工具等等. 而对于这个需求来说, 最好用的莫过于ejs模板语法的支持了. 有了模板, 公共的组件在不同页面都可以随意引用, 工作量减少了非常多.
-
-每个页面都由组件组成, 平时写页面的时候只需要点名引用需要的组件. 搭建完成后, 使用Athena工具的build命令, 就可以将页面的静态文件输出. 对于这批文档的页面, 每个页面会被拆分为头部组件, 底部组件, 导航组件. 如果开发过程中某个组件产生变化, 只需要直接修改组件, 再重新运行build命令, 就可以使每个引用了这个组件的页面都一起变过来, 可谓十分方便.
-
-### 录入文档
-录入文档可能是这一整个需求最痛苦的工作了. 一百多页A4纸大小的DOC文档, 还需要依据设计稿重新设置样式, 是十分机械化的工作. 在这里, 我的小伙伴将文档中的不同样式建立为不同的组件, 比如一级标题组件, 或是二级标题组件等等. 这些组件使用起来就像下面这样:
-
-```html
-<%= widget.load('doc_mod_list3', {
- title1: '操作指南',
- item1: ['挂载云硬盘','绑定公网IP','常见问题','主机数量','监控报警','删除云主机','绑定监控报警','重置密码','制作镜像'],
- title2: '常见问题',
- item2: ['主机数量','监控报警','删除云主机'],
- item3show: false
-}) %>
-```
-
-组件本身是一个ejs模板:
-
-```html
-