尬聊会:第四期实录

尬聊会第二期实录。聊了学习、半路出家、去哪里找工作等问题。

视频地址 Bilibili

时间:2017-09-17 22:00
地点:douyu.tv/meathill
回看视频:http://blog.meathill.com/tech/galiao-4.html

0. 试讲 PPT

https://github.com/orgs/meathill-lecture/

1. 从学校到工作必须习惯的转变

有人问:觉得现在的工作比较难完成,怎么办?是不是要换工作。

职场当中,普通员工和领导之间,基层领导和中层领导,中层领导和高层领导,大多数处于一种荣辱与共的状态,是多和博弈。所以,尽早与领导沟通,重新安排分配工作,对大家都有好处。换工作这里并不合适。

之前写的一篇文章 开发新人要适应的变化

2. 学习方法,我学了东西很快忘

  1. 尽量多的做东西
  2. 尽量的关注这方面的内容
  3. 做一些自己的小产品/工具

3. 编程思维

有时候需要一个需求,明明不难,却无从下手

—— 写得少

把数字转成中文大写,比如 1024 => 壹仟零贰拾肆

方法同上。

走出舒适领域。

4. 老师, 我是半路出家, 非计算机方向。在编程道路上常常会有力不从心。

  1. 可以解决,比如通过阅读、看视频、练习等
  2. 可以忽略,需要我们学会区分知识的边界

5. SEO 分页还是ssr好

如果服务器很好,那无所谓;不然的话,静态分页好。

6. 找工作去哪个网站比较好

建议大家常泡社区:

  1. https://segmentfault.com/questions
  2. https://www.v2ex.com/

7. 找工作技术和人力都过了还是没要我,怎么回事?

  1. 有更合适的人选
  2. 这个岗位不招人了
  3. 这个岗位出现了变化
  4. 你感觉错了……

尬聊会:第三期实录

尬聊会第二期实录。聊了跳槽、工作选择、加班等问题。

视频地址 Bilibili

时间:2017-08-06 22:00
地点:douyu.tv/meathill
回看视频:http://blog.meathill.com/tech/galiao-3.html

  1. 我的第一份工作,兼谈如何跳槽
    1. http://blog.meathill.com/internet/days-in-a-company-first-leave.html
    2. http://blog.meathill.com/internet/days-in-a-company-quit-relax-and-back.html
  2. 为什么尽量避开外包公司?
    1. 对技术要求很低
    2. 对产品的标准很低
    3. 没有办法在一个产品做持续的投入
    4. (大外包公司)很难和采购外包的企业共同发展
  3. 李文星事件的启示:
    1. 天上不会掉馅饼
    2. 了解这个社会的运行机制
    3. 学会算账
  4. 加班好不好
    1. 拒绝制度性加班
    2. 拒绝崇拜加班的领导
    3. 如果总加班,很可能是管理能力太差
    4. 不要盲目拒绝加班
  5. 从小公司跳到上市公司 有可能吗

  6. 大佬前端学习路线大概是什么样

解决 [Vue warn]: You may have an infinite update loop in a component render function

在 `v-for` 循环当中,如果用方法或者计算属性对 vm.$data 的属性进行操作,理论上,可能因为修改到循环对象,诱发无限循环。此时 Vue 就会发出警告(并不是真的已经无限循环了)。

今天写着写着,突然发现控制台里有错误:

[Vue warn]: You may have an infinite update loop in a component render function

这个问题很奇怪,之前从来没有遇到过。如果是我自己主导的项目,倒也好办,慢慢 debug 就是;偏偏在公司的项目里遇到这个问题,而公司项目的体系结构很复杂,我还没完全掌握。更恼火的是,因为体系复杂,debug 也非常困难,再加上尚无测试框架,这个难搞啊……

好死不死的,当时是下午3、4点钟,正好到了肚饿的时刻,结果又落入低血糖状态,真是屋漏偏逢连阴雨,船小又碰顶头风,饿得我脑仁生疼……

不过终于还是被我 Google + debug 出来。事实上是这样的,在 v-for 循环当中,如果用方法或者计算属性对 vm.$data 的属性进行操作,理论上,可能因为修改到循环对象,诱发无限循环。此时 Vue 就会发出警告(并不是真的已经无限循环了)。

例如这样一个组件,它里面是用 :checked + <label> 实现的一组按钮。它有以下功能:

  1. 为了能够分组,需要设置它们的 name 属性
  2. 为了能够用 <label> 控制 <input>,需要给 <input> 设置 id
  3. 按钮可以被删除

于是我选择这样做:

<template>
<div>
  <template v-for="(item, index) in items">
    <input type="checkbox" :name="'my-component-' + selfIndex" :id="getID">
    <label :for="getID(false)">
    <button type="button" @click="remove(index)">&times;</button>
  </template>
</div>
</template>

<script>
let count = 0;

export default {
  data() {
    return {
      selfIndex: 0,
      itemIndex: 0,
    }
  },
  methods: {
    getID(increase = true) { // 注意,问题就出在这里
      if (increase) {
        this.itemIndex++;
      }
      return `my-component-${this.selfIndex}-${this.itemIndex}`;
    },
  },
  beforeMount() {
    this.selfIndex = count;
    count++;
  }
}
</script>

这里,为了能生成唯一 ID,我选择每次循环都对 vm.itemIndex++,这就会出现前面说的问题,存在隐患。

解决的方案有两种,一种是把 itemIndex 也放在局部变量里,使它不直接关联在组件上;另一种则是写一个全局的唯一 ID 生成函数,然后引用进来。原理都是一样的。


这两天听评书《乱世枭雄》,学到一句话“拉屎脸朝外”,形容讲义气,不知道咋联系的……

MediaElement 笔记

贵司官网需要放视频,于是需要用播放器,最后选定 MediaElement。然后就开始踩坑之旅。当然,有些是我的问题,不过也有不少是文档没说清楚。这里记录一下。

贵司官网需要放视频,于是需要用播放器。然后就产生如下需求:

  1. 协议好,支持免费商用,最好 MIT
  2. 支持 SRT 字幕
  3. 支持尽可能多的平台

经过筛选,最后选定 MediaElement,一看 WordPress 在用基本就放心了。然后就开始踩坑之旅。当然,有些是我的问题,不过也有不少是文档没说清楚。这里记录一下。


全屏和弹性宽度

当前版本 4.2.5 有个 Bug,如果设置宽度为 100%,那么从全屏恢复到内嵌状态时,会留着全屏的宽度,撑开页面。如果设定一个特定的宽度就不会。但我们的页面是响应式的,需要允许它随页面变化而变化。

这个时候只好手工来做,我的选择是让它 100%,然后侦听从全屏返回的事件,发生后就把宽度恢复。另外,因为 fullscreenchange 事件还没有统一标准,所以不同浏览器里的事件名称也不一样,更不爽的是,IE 下是驼峰,其它浏览器是全小写,我也懒得再写函数转化了,反正就3种情况,全写一遍好了。

// fix MediaElement's issue
  let fitVideo = function() {
    setTimeout(() => {
    $('.mejs__container').width('100%')
      .find('video').width('100%')
      .end().find('.mejs__layers')
      .children().width('100%');
  }, 50);
};
if ('onwebkitfullscreenchange' in document) {
  document.onwebkitfullscreenchange = function() {
    if (!document.webkitFullscreenElement) {
       fitVideo();
    }
  };
} else if ('onmozfullscreenchange' in document) {
  document.onmozfullscreenchange = function() {
    if (!document.mozFullScreenElement) {
      fitVideo();
    }
  };
} else if ('MSFullscreenChange' in document) {
  document.MSFullscreenChange = function() {
    if (!document.msFullscreenElement) {
      fitVideo();
    }
  };
}

默认字幕

Web 标准是有默认字幕的,<track defualt> 即可。但是 MediaElement 没有,最后在 StackOverflow 上找到答案,原来有个未记录在文档里的初始化属性可以控制:

let player = new MediaElementPlayer('intro-video', {
  startLanguage: 'cn', // 这里的名字应该和 <track> 种的 srclang 属性一致
});

插件与生态

MediaElement 把一些有用但不太常用的功能抽出来做成了插件,放在 MediaElement Plugins。不过看起来这个项目有些属于维护,使用的时候很多问题。比如,直接在 features 里开启特定功能,即使对应的插件没有加载,也不会报错,就是没反应,很令人迷茫。


其它大体上文档都能找到,就不多说了。

再次出发

从本月中开始,加入 OpenResty Inc. 开始新的旅程。

去年前司裁员,我等外地工人终于也没逃脱,在年前和平分手。

在创业公司连续工作五年,虽然遇到很棒的老板,但还是有点累。加上被罗辑思维蛊惑,再加上看到一些同行做培训做得很好,所以我就打算先不去找工作,尝试做一下培训。再不济,也能给将来的生活带来一笔客观稳定的被动收入嘛。

如果你有看过我之前的文章应该已经知道结果了。总之,不好搞啊不好搞。

前几日突然看到 OpenResty Inc. 在招前端工程师,而且是远程。我对这个项目早有耳闻,对远程工作也很感兴趣,于是马上投简历过去。经过数轮面试,顺利得到这个职位。

于是从本月中开始,我成为 OpenResty Inc 的一员!


我对这份工作很满意,原因有四:

  1. 远程
  2. 技术型老板,技术型公司
  3. 开源项目,商用收费,在国内应该还很少见,国外比较多,比如 WordPress,感觉很有趣的样子
  4. 具体到细分领域,OpenResty 在行业内名气似乎很响亮,甚至可能是最响亮的一个

祝自己大展鸿图。

Vue 里 $mount 方法的作用

关于 Vue 的 $mount 方法,一问一答。

今天由同学问道:“vue文档里说如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。这个方法在项目中有什么用呢,是一个组件可以挂载到多个dom上就这一个作用吗?”

我的答案如下:

有些时候你创建 vm 的时候 DOM 可能还没准备好,或者写 vm 的时候不确定它要挂在哪个 DOM 上,这个时候就有用了。

当项目大的时候,很多情况是开发的时候估计不到的。比如 A 类里面想使用一个 B 类,但是 B 类有 10 个子类,对应不同场景,你写 A 类的时候根本不知道产品中会使用哪个 B 的子类,所以就要想办法把控制权交出去,这就叫“控制反转”——即控制权从开发者的手上,交到使用者的手上。

我觉得 $mount 这里也是类似的,就是你写了一个 Vue 类,但是不能控制使用场景。所以就要有一个 $mount 方法,由使用者控制,绑到目标 DOM 上。

他又问:“懂了,还有一个问题是一个组件能不能利用$mount属性挂载到多个dom上,我刚刚试了一下是可以渲染,这种用法常见吗??”

我答:

我没这么做过,不过我认为是合理的。

我觉得这个跟 Vue 的定位有关。Vue 和 React、Angular 不一样,后者是大公司企业级产品。Vue 其实很想取代 jQuery,所以这方面其实跟 jq 的插件是很相似的。

Webpack 笔记

记录一些 webpack 的使用经验。我是渐进式使用 webpack 的,一开始只用它打包 js。但是现在开始会把越来越多的依赖交给它管理,所以记一篇笔记。这里不会教怎么使用,而是结合开发经验,总结一些特定需求的解决方案。

我使用的版本:3.5.1

我是渐进式使用 webpack 的,一开始只用它打包 js。但是现在开始会把越来越多的依赖交给它管理,所以记一篇笔记。这篇不是教程,而是结合开发经验,总结一些特定需求的解决方案。

继续阅读“Webpack 笔记”

关于“大漠”的一点不好的记忆

关于大漠的一点不好的记忆。不过当年没搞清楚到底是哪个。发生了最近的事情,我觉得可能是这个……

我这个人不爱交际,在行业里一直是个小透明。

不过我当年也曾想试着改变一下自己,所以找了个前端交流群加了进去。具体的群名字忘记了,总之是“大漠”创建的群。

然后发现这个群真TM恶心。群主大漠有几个小弟,一副高高在上颐指气使的样子,对群里成员吆五喝六随意攻击,不仅对发问者提出各种限制,对回答者也提出各种限制。群主也是一副老子对你们这些废柴施恩,还不快快对我歌功颂德的气势。(具体做法记不清了,好多年了。)

然后我就受不了啦。如果前端圈子都这个吊样子,那我不交际也不要紧。于是吐槽两句自己退群了。

退了之后,想说这个大漠是谁啊,怎么这么差劲,然后搜了一下,发现叫这个名字的好多,无法确定是哪个,我也懒得跑回去确认。


发生了最近的事情后,我举得按人品和气度,有可能是这个……

Vue 笔记:事件

记一些 Vue 的笔记。本篇均与事件处理相关。

onload

需要侦听 load

<template>
  <img src="/path/to/img" @load="onLoad">
</template>

<script>
export default {
  methods: {
    onLoad(event) {
      // do something
    }
  }
}
</script>

drop

需要阻止 dragover 的默认行为,不然不触发。

<template>
  <div class="drop-area" @dragover.prevent="onDragOver" @drop="onDrop">
</template>

<script>
export default {
  methods: {
    onDragOver(event) {
      // 此时仍然可以处理
    },
    onDrop(event) {
      console.log(event.dataTransfer);
    }
  }
}
</script>

尬聊会:第二期实录

尬聊会第二期实录。聊了创业、准备简历等问题。

视频地址

时间锚点:

  1. [00:33] 创业那点事儿
    1. 股权
    2. 期权
    3. 融资
    4. 估值 200w / 20% = 1000w
    5. 市盈率
  2. [10:00] 如何制作简历
    1. 两个不好的简历
    2. [47:55] 一个好的简历
  3. [37:50] 面试时算法和计算机基础怎么准备?
  4. [39:00] 校招和社招的差别

  5. [43:00] 学了 H5 和 CSS,怎么巩固?

  6. [47:55] 一份好的简历

  7. [52:35] 实习工资

    1. 北京 10K
    2. 杭州 4.5K
  8. [1:00:33]怎么选择合适的公司
    1. 在各个方面给予提升
    2. 看老板,看业务
    3. 慎重选择每一份工作
  9. [1:08:15] 对于转行自学就业,找工作,这方面能不能发表下你个人看法
  10. [1:13:33] 我今年31在一家大公司的地方站做前端工作 4年工作经验 今年想去北京工作

  11. [1:16:55] 前端接口测试通常要怎么做呢?有没有考虑做个课程出来聊聊?

  12. [1:18:55] 老师,对原生JS使用熟练, 目前项目多是混合app开发,没有react, angular,vue 框架的经验,对目前面试有影响吗

  13. [1:21:25] 框架学到怎样的程度合适呢

  14. [1:22:00] 老师,最近想换实习公司,如果在上班的时候,面试的HR打电话过来

  15. [1:24:22] 会写小程序优势大吗?

  16. [1:27:19] 与今天有关的课程广告

继续阅读“尬聊会:第二期实录”