晚晴幽草说之-前端札记

坦白来说，写博文这事儿，是一项费力且耗时的工作；如果再加上行文、配图方面的考究润色，就更为不易。但平时，偶有些新的见闻和想法什么的，值得分享讨论；兴致踏来时，则会分享至 HacPai、V2ex 抑或是微博；而这些分享内容不多，不成整体，难以成篇，故此也很分散；而且受众也飘忽不定，反馈稀薄。这篇文字的存在，即是将平时那些微技随帖，汇集整理，独成一文，分享给关注晚晴幽草轩的朋友们，也将不定期更新；鉴于多半与前端相关，就取其名为：晚晴幽草说之-前端札记。

晚晴幽草轩 - 题图来自 500px

制作响应电子邮件模板

近期，为制作一套响应电子邮件模板，倍感疲惫，苦煞心也。当然也收获些许经验，当你需要的是一个非常简单的响应式HTML电子邮件模板时，你可以这样做：可参见 responsive-html-email-template。看起来真的很简单，但实践起来这不是简单且不友好的。当然，你可以使用一些工具，如 gulp ＆ gulp-inline-css，代码如下：

let gulp = require('gulp'),
  inlineCss = require('gulp-inline-css')
gulp.task('inline-css', function() {
  return gulp.src('./src/**/*.html')
    .pipe(inlineCss())
    .pipe(gulp.dest('build/'))
})
gulp.task('watch', function () {
    gulp.watch('./src/**/*.html', ['inline-css'])
})
gulp.task('default', ['watch'])

它可以帮助你制作邮件模板，如写一个网页一样。但是你必须自己支持，哦，糟糕。你可能很无奈，直到你见到她 —— mjml，她可能是你的救星，关于如何简单制作一套优质的响应式邮件模板。美中不足的是，她也有一些问题。所以，我提供了这个工具，让你更容易使用她，具体参见 responsive-email-template。

git clone https://github.com/nicejade/responsive-email-template
npm i (yarn)
./node_modules/.bin/mjml --watch src/index.mjml -o build/index.html
gulp (If you need extra style)

@2017-10-12 于深圳.南山

JavaScript & 机器学习

根据 Atwood 定律：“任何可以使用 JavaScript 来编写的应用，最终会由 JavaScript 编写。机器学习这方面也不例外。得益于各种套件，今天的机器学习的门槛已经越来越低。Google 新推出了 Teachable Machine 项目，让用户无需编程就可以用手机、平板、计算机等设备的摄像头采集数据进行机器学习。这一项目是 Google 的 A.I. Experiment 的一部分，源代码已经公布在Github上；简单的说，Teachable Machine 是一个基于浏览器的机器学习演示实验，用一个叫做 Deeplearn.js（A hardware-accelerated deep learning library for the web.）的库构建，网页开发者可以编写一个简单的视觉输入，并设定输出和三个训练分类器，来在浏览器中训练新的神经网络。如有兴趣，不妨一探究竟: https://deeplearnjs.org/ 。

类似使用 JavaScript 对机器学习方面的探究尝试，还有很多，比如 neurojs: A javascript deep learning and reinforcement learning library (一个javascript深入学习和强化学习库)。是不是又有新的可以学习 & 折腾的方向了？此处有表情：【捂脸】。

@2017-10-09 于深圳.南山

博客评论系统

嗟夫，真真是：独立的才是自己的。博客从最开始用多说，17年6月1日关闭服务后，转战网易云跟帖；未曾想它8月1日也跟着关闭了（其实，它的关闭倒也没什么，坦白说差多说远也）。索性转投靠至国外Disqus(很早之前，辅助博客天意人间舫就选择用的它)，奈何这堵墙厉害之极，家里虽也翻了墙，却仍不能很好访问；这才又转战至 Gitment（善用Github Issue 的开源评论插件，同类型的还有 gitalk）；😂 言多皆泪，感慨颇多啊——独立的才是自己的，之后得空时候，还是自己搞一套😪，Fighting。

@2017-09-10 于深圳.南山

Clustrmaps－最便捷的博客访问统计

做网站，访问统计是不可或缺的部分（即使只是满足下小小虚荣和好奇）；

晚晴幽草轩自15年4月份运营以来，使用过百度统计，Google Analytics，Firebase 等等；而昨天，又发现一款——clustrmaps，看起来挺有意思，就迫不及待的注入到博客中，点次查看晚晴幽草轩-访问统计。

百度统计，Google Analytics，两者都很强大，尤其是后者，但只是运营者自己比较方便查看整个数据表现。

Firebase，相对来说可配置化更加丰富，也能实时更新，可是从表现来看，跟使用的百度统计数据，有不小的出入，可见确实数据比较严重。

而 clustrmaps 呢，也能实时更新，配置化程度也高（嗯，更多功能目测是收费的）。它的优势在于（仅限于目前所感）：最方便添加 👏🏻、最为直观 👐🏻、普通访问用户也能方便查看访问情形 ✋🏻 … … 也许还有更多，等着你去试用 😄。

@2017-07-14 于深圳.南山

构建中大型 Vue 项目样板

对于如何构建 VueJs 项目，自然推荐官方的脚手架 vue-cli ；而对于微小型项目，个人倒挺看好 poi —— (Delightful web development)，它能让你十分便捷的使用当前流行的框架（ Vue React 等）。

即便如此呢，很多业界朋友，对 Vue 项目的构建，还是不尽如人意；鉴于此，有根据过往的些许经验，设计出一套样板 —— vue-boilerplate-template ，以供参考，当然也期待朋友给予指正。

其中已经依赖了 vue-router、 vuex、 vue-i18n、 element-ui、 bootstrap 诸多库；也注入了 webpack、 Eslint、 pre-commit 等等便捷开发相关的库。其中对与后台接口调用与使用，vuex 的运用，视图结构的塑造，路由和多语言的配置，公共方法的调度，webpack 打包优化等等，都基于便捷开发的前提下，做了相应的设计，希望有缘人会喜欢；这一番设计缘由，得空会另起一篇文章予以阐明；而这番设计也会，在不断的学习中持续改进。

之前有写篇关于 vue 的文章－如何写一手漂亮的 Vue,有些童鞋评论说，多是废话，也无心于之争；开源这份样板，也是将所学运用到代码中，欢请朋友们品评指正😊。

@2017-06-26 于深圳.南山

快速开发响应网站的工具

早上看博客后台数据统计时候，发现有些来源自于这个地址：http://sizzy.co/；

点进去看了后发现有点意思; 搜索发现，这出自于最近开源的项目 sizzy-github:
A tool for developing responsive websites crazy-fast （才几天就有 2.05k+ Star）。

如果来查看下网站在个平台表现，是不是挺方便快捷的？比如：个人博客表现。

@2017-04-26 于深圳.南山

It's only too late if you decide it is. Get busy living. or get busy dying!