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

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

制作响应电子邮件模板

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
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 AnalyticsFirebase 等等;而昨天,又发现一款——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 于深圳.南山

你可能感兴趣(/有用)的文章:

打赏

广而告之

文章目录
  1. 1. 制作响应电子邮件模板
  2. 2. JavaScript & 机器学习
  3. 3. 博客评论系统
  4. 4. Clustrmaps-最便捷的博客访问统计
  5. 5. 构建中大型 Vue 项目样板
  6. 6. 快速开发响应网站的工具
  7. 7. 你可能感兴趣(/有用)的文章: