山维空间

作者： meathill

  • 第二次直播课程完结，兼谈对前端，对培训行业的看法

    第二次直播课程完结，兼谈对前端，对培训行业的看法

    这篇文章写于上周，结果赶上服务器故障，写到一半去迁机器了……参见上篇文章。

    前些天播出了直播课程的第二讲，《Promise 的 N 种用法》，感觉播出本身还算成功。现场气氛不错，学员们积极提问，我做完解答，大家也纷纷表示听懂了，有收获。

    如果人多点就更好了……

    这里再打次广告，课程地址：https://segmentfault.com/l/1500000008757392。购买后可以任意回看，页面上还有推广链接，分享可以得实惠。如果大家想学 Promise 的用法，看这个视频，就够了，完全够了。

    最开始策划这堂课的时候，把问题想简单了，结果做幻灯片的时候才发现，那句话：老师要想给学生一杯水，自己至少要有一桶水，古人诚不我欺。准备的时候花费了比第一次直播，比想象多得多的时间，讲试了两次，才得到了比较满意的结果。

    这次购买的人数也比上次稍微多了几个，感谢亲友团支援，也希望更多的是真实用户吧！试讲的时候，在斗鱼也取得了不错的效果，增加了几个关注，还有人给了100鱼丸。以后录像的时候，都会选在斗鱼同步直播。如果能借机积累点人气的话就更好了。

    总而言之，有进步。

    做了两次直播之后，会有朋友问我说以后是不是就准备干这个了？关于这点我有几个想法跟大家分享。

    选择这个时间去做前端培训，很合适

    在过去很长一段时间里，前端这个行业，发展非常快。新技术新框架，层出不穷，快速更迭。对于我们这些从业者来说，确实不敢放松，甚至有些同学表示担心，学不过来。这个阶段我认为不能当导师，很可能误人子弟，既坑自己，又坑别人。

    但是现在，情况有所改变。ES2017 增加的新特性数量，相对于 ES2015 而言，少得多。现在被大家津津乐道翘首以盼的，也就 Await/Async。CSS4 新增的特性，比 CSS3，也少很多。至于 ES2018，就更少了，写成博客都不带翻页的。这其实也很自然，就像 iPhone567，代际之间几乎没有什么大变化。因为过去的技术积累，其它语言当中有价值的特性，多半已经被前端吸收借鉴进来了。能够极大改善我们开发环境、生产环境的点，基本都已经被发掘过了。

    未来的日子里，我们必须学会不断打磨手头已有的工具和技术，把思路从学习吸收，向深耕细作转换。比如用 ESlint 工具维护统一的代码风格，提升代码质量，提升安全系数，补足团队短板。或者，开拓前端的新边疆，比如 Hybrid，PWA，Electron 正在做的。

    在这样的时刻，我觉得，可以停下来一段时间去做培训。正如我在上面所说，老师要给学生一杯水，自己至少要有一桶水。培训教学是非常好的总结、查缺补漏的手段。可以说利人利己。

    换个角度，现在停下脚步做培训，一时半会儿也不会落后于行业。

    终身学习的庞大市场

    这是我的第一个想法，第二个想法从罗辑思维听来，便是所谓的“终身学习”。

    在他的设想中，我们的未来，会是一个终身学习的时代，所有人都学习，并且是终身不断学习。我觉得至少在程序开发领域，他没说错，我自己就是例子。我2006年参加工作，做页面仔，切图。一边切一边学习 PHP，学习 JS，学习 AS，学习面向对象，学习开发模式，一路边学边干，走到现在。

    我没有放松过学习，并且积极走出舒适领域，主动逼自己学习。回想我的学习历程，主要分两部分：

    1. 刚工作的时候，跟前辈学，靠脸皮厚，抱着大腿猛学
    2. 把他们学得差不多了，就只能自学，订阅博客，关注微博，以及看文档读源码

    然而我发现，并不是所有人都能自学。比如前阵子认识个小妹，我发给她文档链接，她说看不懂英文……然而她必须学会，因为他们公司只有她一个前端。所以这又是一个非常大的市场，即由我，藉用我磁性的声音，清晰的普通话，带领他们学习，帮助他们学习。

    并且现阶段来看，用户的付费意愿，也蛮强烈；付费习惯，也基本养成。

    而且我觉得我周围的大多数人，还不太认可这一点，那么这也是一个机会。培训讲师常有，有10+年一线开发经验的资深前端工程师，愿意做培训讲师的，则不常有。

    与时间赛跑

    综合前面两点，我觉得，眼下这个时机，很适合切换到新跑道。毕竟以现在的我而言，一方面有前线工程师的视野和能力，另一方面又有专职讲师的时间和精力，并且我普通话说得好，声音稳定有磁性，天赋不能浪费。

    希望接下来的时间里，能把讲师做好。说实话，现在课没人买没人听，我并不太担心。我觉得这是必经之路，想想郭德纲当年一后台人给一个听众（都不堪称“众”……）讲相声，也是这么熬过来的。我花了十多年时间才成为一个资深工程师，自然也要花很多时间，才可能成为一名优秀讲师，这很自然。同样借罗辑思维的话，终身学习知识服务，不是随随便便就能搞成的，一样需要专业人士专业服务。

    所以现在我要做的，就是积累课程、积累用户、积累行业内的名气。我计划今年就干这个。所以我也是在跟时间赛跑：在全家饿死之前，把课程培训做起来。

    最后再打个广告，明天我会开始第三次直播：《Web 永恒不变的主题：布局——Box，Flex，Grid》，这次要分享的内容是比较基础的 CSS 布局，除了回顾前几年妖魔鬼怪横行的布局 hack，还会展示 Flexbox 使用和最新的 Grid。对各种级别的前端同学都是很好的一堂课。欢迎大家光临，帮我推广也感激不尽。

    另外我考虑接下来用3周时间，直播一个完整的项目，包括项目配置、webpack + babel + ES6、CSS 预处理、gulp 批处理，整个一套做下来，以及自动化测试、代码规范检查等等。这个得跟站方商量一下。

  • 告别 Bluehost

    告别 Bluehost

    Long long ago，201 为了让大家吃自己的狗粮，要求在职员工每个月都要写博客回帖子发评论。对我这种爱现的人来说，写就写嘛，于是积累了不少文章。离职的时候，还想继续写，不过担心放 201 平台上不安全，于是决定自己搭服务器。

    那是2011年，当时我根本不懂服务器，市面上也没有云服务。我四处对比了一下，决定买 Bluehost 的域名+空间。Bluehost 跟联通是一路货色：“老用户与狗不得参加”。所以头一年各种优惠，吸引了我这种啥也不懂的小白，后面就再没优惠了。而我因为懒一直续到明年……

    不过 Bluehost 也有好的地方，他们家的服务器专为建站调教，装 WordPress 各种方便，自动化脚本分分钟建起一个实例。其它常见网站程序也是如此。而且不限空间和流量，可以各种尝试各种摸索。于是我一股脑搭了一堆东西，虽然最后都没派上什么用场……

    总之，从此，我开始接触学习使用服务器，以及服务器端软件。靠着无敌厚脸皮，我不断从身边各种运维那里一点一点的汲取服务器知识。如今，大体上一个服务器从空白系统到配置完成搭建网站我已经能轻松搞定了。

    于是 Bluehost 空间就越来越不够用了：

    1. 首先它是空间，权限很低，很多东西无法安装
    2. 其次速度越来越慢，平均一个页面将近10秒的打开时间，实在难以接受
    3. 其次国内外的云服务越来越好，价格越来越低，Bluehost 一个月将近 15 刀的租金性价比低得令人发指……

    所以我开始慢慢把服务迁出去，只是因为各种原因，比如这个空间2018年才到期，于是平日投入最大的博客一直没动，甚至宁愿写一个 Node.js 爬虫同步文章到 CDN，都不想迁……不过爬虫写的并不顺利，最后甚至可能就是它把博客搞挂了，如今桌面上非 Chrome 访问博客，都会无限卡在“维护”状态，无法恢复，甚至直接改代码注释掉状态判断都不行。

    哎，所以没办法，迁出来罢！

    回头把域名也转出来，明年空间到期后就彻底告别 Bluehost 了。

  • 新番预告

    新番预告

    下周四（4月6日）晚8点，我会继续在 SegmentFault 开播，内容是《Promise 的 N 种用法》。

    房间：https://segmentfault.com/l/1500000008757392

    欢迎光临。

    坦率地说，这次准备比上次投入精力更多，准备也更充分，试讲就准备讲两次（已经讲了一次）。同样 ￥10.24，这次比上次性价比更高。50P 的 Slide，准备了 20 份代码范例，应该是我近期最大的一笔投入了。

    今天晚上把其中递归循环也写出来了，还是很不容易呀。

    这个标题呢，开始我是想讲 Promise 相关，标题没想好，随便写了个，结果这会儿他们的直播数量还不太多，所以很轻易就给我通过了，然后还宣传了……所以我也就懒得改了，就这么着吧。

  • 第一次视频直播结束

    第一次视频直播结束

    经过认真准备，热情推销，今天进行了第一次视频课程直播。

    我有点紧张，比面对小胖陈胜他们紧张得多，呵呵。所以表现不太理想，中间卡壳好几次，不过也有观众说看现场写代码 Debug 也挺好的。

    另外就是人数略显惨淡，15人在线，29人购买，还有很多是我主动推销的……

    希望以后会更好。

    录像回看地址：https://segmentfault.com/l/1500000008694676

    Slide 地址：https://meathill-lecture.github.io/jquery-backbone-vue/

    下一场预告：

    下一场是关于 Promise 应用的，结合之前写 Meart 的经验，应该也很值得一看。

    地址：https://segmentfault.com/l/1500000008757392

  • 小试 Element UI

    小试 Element UI

    不确定写多长，写先结论吧：暂时不推荐使用。原因如下：

    1. 影响使用的小 Bug 有点多
    2. 需要重新学习一门语言

    接下来详述。

    从前司离职之后，我开始更新技术栈。离开惯用的 Backbone，考虑再三，投入 Vue 怀抱。选择 Vue，而不是竞品 Angular、React 有三个理由：

    1. 文档友好，社区活跃。
    2. 模块拆分的很好，学习曲线平缓。
    3. 基于标准化技术，可以最大限度的避免浪费。

    不过实操之后发现，Vue 与我惯用的 Bootstrap 有些冲突，主要在于：

    1. Bootstrap 对过渡效果和切换的操作依赖于样式，比如 .active、.in。Vue 在处理模板时会把当前样式先缓存起来，然后根据数据增删绑定的样式。此时就可能出问题，tab 页切不动或者动画突然打断之类的。
    2. Bootstrap 会广播特定的事件，这些事件无法被 Vue 捕获，只能在 mounted() 的钩子里手工绑定。

    于是我觉得，既然根基（jQuery）变了，最好把整条线都更新了吧。左右看了看，准备先试下 Element UI。这是饿了么推出的基于 Vue2.0 的组件库，目测组件齐全，文档详细，而且直接以 2.0 为基础，符合我追新的想法。

    实际用了之后……唉……有点……遗憾。项目地址。

    首先，Element UI 把所有组件都封装了，包括布局，比如 <el-row>、<el-col>，我觉得这样太过了。从现实经验来看，布局元素几乎不可能够用，别人总要补充一些。封装的元素我不太知道最终生成的代码是什么样的，也就不好操作，总不能审查元素一个一个看吧？——对了，Element 的文档里缺少样式列表，也是个问题。

    封装的另一个问题，所有元素都要通过后期渲染，总让我感觉不舒服。以及，我几乎无论干什么都要查文档，几乎没法直接动手，这和我选择 Vue 的初衷是相违背的。

    接下来，小 Bug，有点多。除去布局和提示之类，我只用到3个组件：<el-button>、<el-table>、<el-pagination>，结果就遇到4个 bug，浪费很多时间去调试，有两个我给他们开了 issue，还有两个懒得弄了。这里列一下吧：

    1. <el-button :loading="scope.row.fetching"> 无法把 loading 绑定到数据的 .fetching 属性上
    2. <el-pagination> 设置 total 不更新视图
    3. <el-pagination> 更新 total 之后再次广播 current-change 事件，导致重复刷新
    4. <el-table> 里每行的 ref 属性没法正确生成数组

    2017-04-04 更新：

    经过 issue 沟通，我的理解的确有些问题，

    1. Vue 绑定属性的时候，如果该属性层次较深，比如 a.b.c，就不会修改它的 getter/setter，于是会失去响应式更新的特性；同时也不会报错。
    2. <el-table> 不是通过 v-for 渲染的，自然 ref 的表现也就正常了。

    可能别的组件很健壮吧，我运气不好。

    总之，我觉得就目前这个版本，1.2.5，来看，Element UI 还没到让人放心用并且用得好的程度。

    下一次我可能会选别家的再试下，或者继续用 Bootstrap 然后自己拼些小组件出来——我这次就是想找个有 loading 的 button 才找 UI 库的。

    啊，最后，还是感谢 Element UI 团队，感谢饿了么。希望你们再接再厉，相信将来这套库会更好。

  • 准备搞一场专题直播

    准备搞一场专题直播

    准备在 SegmentFault 搞一场专题直播，标题是《jQuery, Backbone, Vue》，计划通过对比老中青三代框架开发的差异，带领大家理解前端发展的趋势，接触更好的未来。

    直播地址：https://segmentfault.com/l/1500000008694676
    幻灯片地址：https://meathill-lecture.github.io/jquery-backbone-vue/
    范例代码仓库：https://github.com/meathill-lecture/jquery-backbone-vue

    求关注，求购买。

  • 离职三个月小记

    离职三个月小记

    时间过得真快，一转眼已经离职三个月了。

    这也是我告别全职工作的三个月，之前几次换工作，基本上一家下一家连接得很紧，离职后差不多下礼拜就去报到了。这次得知被前司“优化”后，我花了更多时间去思考，下一步应该怎么走。

    幸得没有买房，没有房贷压力，让我能更好的观察前路。希望这深思熟虑是对的。

    经营自己

    公司是不可靠的。这里没有责怪前司或者前老板的意思。事后诸葛亮好做，但做决定的时候，大家都是依赖当时的情况、情报，难免会犯错、会踩坑；问题出现，生死存亡之秋，长痛不如短痛，尽早裁剪成本，也是不得已而为之。

    虽然被裁员意味着我的利益受损，但我大体上认同前司的决策。

    而且我相信，将来这样的事情还会发生。被嫌弃、被抛弃、被优化，太阳底下没有新鲜事，之后华为清退34岁员工的事情很快印证了我的想法。

    这就告诫我们，不要相信公司，至少不要依赖公司。而互联网的发展，信息发布渠道的增加和联通又给了我们更多机会，去成为曾经难以企及的“名人”——当然，社会的惯性使得更多人不愿承认那些人是“著名XX家”，甚至不承认ta们是“名人”，只称呼其为“网红”，但实际上，还是一样。

    知名度自然是计价公式中的重要组成部分，更是个人品牌的标志。有知名度，可以大大抵消与公司或组织产生冲突带来的影响，成为更自由的人，有更多的保障，获得更好的生活。

    所以我决定：

    要投入精力、时间，打造个人品牌，努力将自己经营成一个，呃，小V。

    制造持续性收入

    我从小就不会理财，身边也没老司机带路，所以我的钱并不会生钱。不仅如此，我和老婆都是爱玩爱享受之人，花钱的效率颇高……

    我发现，如果没有稳定的持续性收入，就必须一直维持工作的状态——这里特指在某公司全职工作——用劳动换取薪水，再用薪水换取想要的生活。一旦中断，就会陷入恐慌之中——比如现在。

    所以，“做一些可以长期带来收益的事情”，便成为我这段时间的另一个重点。我尝试或正在做的事情有：

    1. 打造一款有人用的产品
    2. 录制教学视频（教案备好了，等咳嗽好了就录！）
    3. 把博客 CDN 化提到日程上

    希望这些手段可以帮我获得持续性的收入，离安全感更近一步。

    于是我也没听前老板的建议，去找大船。虽说进大公司也有机会做这些，但以我的性格，多半又会全力投入新工作，这些事情又会被搁置。这段时间就算是跳科技吧。

    要价高不算啥，成本底才NB

    这段时间为了减轻经济压力，更为了减轻心中的压力，开始接外包工作。于是就少不了就跟发包的老板讨价还价。

    说实话我的报价不低，毕竟也曾经是日薪上千之人，基本上稍微打个折就报给对方了。然后就被嫌弃报价高，然后我就解释我做得好，当然对方多半就不会再回复了。

    不过我有天晚上遛狗的时候突然醒悟过来，我报价高除了满足自己虚荣心之外，给对方给自己都没带来什么好处。对方说不定就想吃碗番茄鸡蛋面，我非说自己烧得一手好海参，然后要求他付半根海参的钱吃番茄鸡蛋面……毕竟从商业上来讲，能够既把成本降下来，又提供好的产品，才是好的健康的模式。

    反思之后我决定，要找时间丰富自己的技术栈和产品线，建立下有深底上不封顶的服务体系，尽量满足各种老板的要求。

    找到合适的途径降低接包成本，服务更多的老板。

    旅游

    这几个月没少往外跑，算起来，12月回了趟老家，1月去了台湾，2月去了日本。三个月差不多有一个月的都在外面玩……

    总结

    过去的三个月，既不想开始时想象的那么高产高效，也不想开始时担心的那么荒废。浪费掉一些时间，也有实际的产出。勉强，我觉得勉强达成早先给自己划下的及格线，所以，照这样再努力一段时间吧。

  • 迁移到 Vultr

    迁移到 Vultr

    前几年 DigitalOcean 刚出的时候，因为很便宜（$5/月），还送 $10 启动资金，于是就入了一台，搭了个梯子，搭了个 Ghost 博客准备写长篇。然而时过境迁，长篇还是就那几篇……

    前几天看到 Vultr 推出了更便宜的套餐，$2.5/月，配置和 DO 一致。而且 DO 上梯子的速度越来越慢，几乎只够搜索，所以干脆换一下吧。便买了一台，将梯子和博客都迁了过来。新机器在东京机房，速度比美西的还是快多了。同样价格，配置也比 DO 高上一截，1G 内存安装 SQLite 终于不用搭虚拟内存了。

    有需要购买的同学不妨用我的链接：http://www.vultr.com/?ref=7124198

  • Ubuntu 16.04 搭建 LNMP 开发环境

    Ubuntu 16.04 搭建 LNMP 开发环境

    前天帮人配了台机器，未来可能还要帮人配。在学会用 Docker 之前，先写一篇记录下怎么搭建环境吧。

    这篇收费！￥4.99，请阅后自觉打钱。

    （更多…）
  • 使用 Webpack 时需避免循环引用

    使用 Webpack 时需避免循环引用

    开发日历控件的时候，对方变更了一下需求，基本上将最终产品分成两个：

    1. 选择连续时间段
    2. 选择多个不连续时间

    那么我们知道，对于这种大部分功能一致，只有若干函数逻辑不同的产品，最合适的就是状态模式。于是很自然的，我就拿“2”作为标准模式，“1”作为新模式，将其重构成父类和子类，大概关系如下：

    // 父类
// DatePicker.js

import RangeDatePicker from './RangeDatePicker';

class DatePicker {
  ....
  static getInstance(el, options) {
    if (options.scattered) {
      return new DatePicker(el, options);
    } else {
      return new RangeDatePicker(el, options);
    }
}


// 子类
// RangeDatePicker.js

import DatePicker from './DatePicker';

class RangeDatePicker extends DatePicker {

}

    因为这个类只有两个成员，所以我把工厂方法 .getInstance() 放到了父类里面，通过判断参数确定应该返回哪一类实例。代码写完，测试的时候却报错：

    Super expression must either be null or a function, not undefined

    这个意思很明显，被继承的父类不能未定义。然则 DatePicker 明明是定义了的，只是验证两个类文件的话，均未出现任何语法错误。

    遇事不决先 Google，还真找到很多结果，不过大多数都和 React.Component 有关，翻了半天一无所获，只好自力更生。打开 Chrome 开发者工具，勾上“Pause on Exceptions”，观察发生异常时的状况，一遍又一遍，我渐渐意识到，发生这个错误的时候，DatePicker 还未能在 webpack 的环境中完成注册。问题找到了！

    与其它编译类语言不同，JS 是动态语言，所有 JS 代码都是放到统一的环境里跑的，类的代码如此，import 也是如此。所以对于其他语言，比如 ActionScript、Java，循环引用，即 A 引用 B，B 也引用 A，是没问题的，因为类的代码都会编译到执行文件，执行的时候，都已经在环境中；而 JS 是边执行边置入环境，具体到我这里，在将父类 DatePicker 放入环境时，会先 import 子类 RangeDatePicker 的代码，而子类又会要求 import 父类的代码，父类的代码正在引入中，于是便产生了问题。

    想明白这点，后面就好办了，直接创建一个工厂类，把工厂方法放到里面执行，问题便解决了：

    import DatePicker from './DatePicker';
import RangeDatePicker from './RangeDatePicker';

export default {
  createDatePicker(el, options) {
    if (options.scattered) {
      return new DatePicker(el, options);
    } else {
      return new RangeDatePicker(el, options);
    }
  }
}

    PS：当年写依赖注入和包管理工具的时候，就卡在这个地方，怎么都想不通，于是一直也没写完。没想到这些个浓眉大眼有头发的，也都这么不负责任，这种问题都不解决就搞出来让全世界人用了。