new post

README-zh-cn.md

@@ -320,11 +320,12 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml
 
 感谢捐赠的小伙伴！！！
 
+* 2016.11.16 收到 微信用户 ¥1.00
 * 2016.10.24 收到 奇峰 ¥6.66
 * 2016.10.21 收到 旭廷 ¥10.00
 * 2016.09.24 收到 鑫 ¥6.66
 * 2016.08.25 收到 Erlend Aakre $2.50
-* 2016.08.10 收到 ¥4.40
+* 2016.08.10 收到 微信用户 ¥4.40
 * 2016.07.25 收到 邓炳初 ¥6.66
 * 2016.07.11 收到 彦风 ¥6.66
 * 2016.07.07 收到 Klci ¥2.50

README.md

@@ -306,11 +306,13 @@ You can also donate me for a coffee, and I'll do better. Thanks.
 
 Thanks these friends!!!
 
+
+* 2016.11.16 received Wechat user ¥1.00
 * 2016.10.24 received 奇峰 ¥6.66
 * 2016.10.21 received 旭廷 ¥10.00
 * 2016.09.25 received 鑫 ¥6.66
 * 2016.08.25 received Erlend Aakre $2.50
-* 2016.08.10 received ¥4.40
+* 2016.08.10 received Wechat user ¥4.40
 * 2016.07.25 received 邓炳初 ¥6.66
 * 2016.07.11 received 彦风 ¥6.66
 * 2016.07.07 received Klci ¥2.50

_posts/2016-11-22-js-create-file-and-download.md

@@ -0,0 +1,87 @@
+---
+layout: post
+title:  "使用 JavaScript 创建并下载文件"
+categories: JavaScript
+tags:  文件 下载
+author: HyG
+---
+
+* content
+{:toc}
+
+本文将介绍如何使用 JavaScript 创建文件，并自动/手动将文件下载。这在导出原始数据时会比较方便。
+
+## 先上代码
+
+```js
+/**
+ * 创建并下载文件
+ * @param  {String} fileName 文件名
+ * @param  {String} content  文件内容
+ */
+function createAndDownloadFile(fileName, content) {
+    var aTag = document.createElement('a');
+    var blob = new Blob([content]);
+    aTag.download = fileName;
+    aTag.href = URL.createObjectURL(blob);
+    aTag.click();
+    URL.revokeObjectURL(blob);
+}
+```
+
+很简单对吧，直接调用这个方法，传入文件名和文件内容，程序新建 a 标签，新建 Blob 对象，将文件名赋给 a 标签，同时将 Blob 对象作为 Url 也赋给 a 标签，模拟点击事件，自动下载成功，最后再回收内存。下面我们来看看具体是怎么操作的。
+
+
+
+
+
+![](https://img.alicdn.com/tfs/TB16.GnOpXXXXXdapXXXXXXXXXX-307-134.png)
+
+## Blob 对象
+
+Blob 对象是一个字节序列。拥有 `size` 和 `type` 等属性。
+
+拥有 2 个只读状态 `OPEND` 和 `CLOSED。`
+
+Blob 对象属于 JavaScript Web APIs 中的 File API 规定的部分，可以参考 W3C 文档中的 [ The Blob Interface and Binary Data](https://www.w3.org/TR/2015/WD-FileAPI-20150421/#blob)
+
+再回来看看我们的代码里是这么写的，使用了 Blob 的构造函数：
+
+```js
+var blob = new Blob([content]);
+```
+
+使用方括号的原因是，其构造函数的参数为以下4中：
+
+- ArrayBuffer [TypedArrays] elements.
+- ArrayBufferView [TypedArrays] elements.
+- Blob elements.
+- DOMString [WebIDL] elements.
+
+所谓 `ArrayBuffer` 是一种用于呈现通用、固定长度的二进制数据的类型。详情可以参考 [ArrayBuffer -MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 以及 [ECMAScript2015 标准中的 ArrayBuffer](http://www.ecma-international.org/ecma-262/6.0/#sec-arraybuffer-objects)。
+
+## Blob URLs
+
+Blob URLs 被创建或注销是使用 `URL` 对象上的方法。这个 `URL` 对象被挂在 `Window` (HTML) 对象下，或者 `WorkerGlobalScope` (Web Workers)对象下。
+
+拥有以下静态方法 `createObjectURL` 和 `revokeObjectURL`，用于创建一个 blob 对象的 url 和注销这个 blob url。
+
+详情可查看 [关于创建和注销 Blob URL 的 W3C 标准文档]( https://www.w3.org/TR/2015/WD-FileAPI-20150421/#creating-revoking)
+
+## 模拟 click
+
+```js
+element.click();
+```
+
+在 W3C 中很早就有这个[规范](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361)，不需要写繁琐的模拟事件触发的代码。
+
+## 小结
+
+目前我将这个技术使用在 天猫双十一技术和UED庆功会 的摇火箭大屏游戏中。最后的游戏结果排名，在请求了接口后，在前端直接生成并下载到了本地，作为记录保存。主要也是因为服务端暂时没有提供这个一张表去记录游戏结果，于是采用了前端记录的解决方案。
+
+大家当时都玩的好开心啊，😁。你们的甘其食和全家卡的名单就是这样生成的！
+
+## 参考
+
+- [在浏览器端用JS创建和下载文件 -alloyteam](http://www.alloyteam.com/2014/01/use-js-file-download/)

_sass/_demo.scss

@@ -34,6 +34,7 @@
                     -webkit-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
                     -moz-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
                     box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
+
                 }
                 .a-img {
                     color: #fff;
@@ -56,4 +57,9 @@
             }
         }
     }
-}
+}
+.deep{
+    transition: .32s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+    transform-style: preserve-3d;
+    transform: perspective(1600px) rotateX(14deg) translateZ(-200px);
+}

js/main.js

@@ -52,3 +52,9 @@
     //     window.scrollTo(0,0)
     // })
 }());
+
+
+//////////////////////////hover on demo//////////////////////////////
+(function() {
+    var demoItems = document.querySelectorAll('.grid-item')
+}());

page/3collections.md

@@ -247,6 +247,12 @@ Syntax Theme: Atom Dark or One Dark
 
 * [JS前端开发群月报 -豪情等人维护](http://www.kancloud.cn/jsfront/month/82796)
 
+## 交互和效果很赞的网站
+
+- [https://gyrosco.pe/](https://gyrosco.pe/)
+
+    首页的卡片翻动效果非常赞。
+
 ## Comments
 
 {% include comments.html %}