上期访谈了重量级的 iView 作者 Aresn ,这次的访谈对象同样是重量级的-- Meathill。不只是体重,如果你常逛我们的讲堂板块 ,你会经常在我们的热门推荐讲座中看到他的身影。

先不说 Meathill 10 年多的从业史,清蒸简单地说下个人对 Meathill 的一个非技术印象吧:声爽(原因此处不做详说,有兴趣评论区见)、年轻。虽然 Meathill 从业已 10 余年、看问题一针见血,但是心态尤其的年轻:爱玩、爱吃,还撸剧…

下面递 🎤 给 @Meathill 让大家对他有个技术和非技术的认识~

关于 Meathill 本人

我的花名叫“肉山”

Hi,肉山老师,简单地和大家打个招呼,介绍下自己吧

大家好,我叫翟路佳,花名“肉山”。这个外号是高中时一位唤作“白裤头”的同学所取,已经伴随我大半辈子。与 Dota 毫无关系,我的英文名是 Meathill,网上大部分 Meathill 都是我。

我 2006 年毕业于中国地质大学(武汉),没有走校招,然后进京务工。有幸得到一家垂直门户垂青,入行做页面仔。网站前端 2005~2006 年发生了巨大变化,大家基本上都是半路出家,面对互联网和前端的高速发展,只能尽量坚持住不要掉队。那几年加班很厉害,感觉自己成长也很快,头发掉的更快,用《一拳超人》的台词就是:我变秃了,也变强了。

2012 年到 2016 年期间,我加入朋友的创业公司,共谋大业。中间起起伏伏,最终还是失败了。去年离职之后,想在培训分享领域取得一些成长,所以今年大多数时间都在这个方向努力。成效不高。从一个无名氏到现在能接受 SF 的访问,我觉得进步是有的;但从养家糊口来看,还是远远不够。于是8月份,我加入 OpenResty Inc,工作至今。

我经常在微博 和 SF 上活动,你们可以在上面找到我。我的文章多数会发在我的博客 上(SF 只发技术职业相关),也欢迎大家光临。

从业 11 年

细细数来,肉山老师已经从业 11 年了,对此,你有什么感想吗?

感想颇多呀,哈哈。

最大的感想是:时间过得好快呀。毕业找工作入职似乎才刚刚发生,现在已经工作 11 年了。刚开始工作的时候,看周围的人觉得他们都好牛逼啊,什么都会;如今周围的人都好年轻啊,比我小十几岁的比比皆是。

说点对大家有用的吧。年少的时候,我觉得世界很单纯,做好自己就可以;年长一些之后,每每回首,总会发现一些处理得很差的地方,大量时间被浪费。我建议大家平时多观察周围,学校公司社会,了解其中的运行规律。比如找工作,第一份工作最重要的就是工资。很多人觉得,能学到东西才是最重要的。但是,如果一份工作能让你挣到最多的钱,那它一定会给出有挑战性的任务给你;而且,从可执行性的角度来看,只有工资,是一个明确的指标,其它工作氛围、学到东西什么的,都虚无缥缈几乎无法考察。

理解公司的运营机制,了解社会的运行规律并非要你放弃理想主义与社会同流合污,而是当你面临选择的时候,能够做出最正确的选择。我回顾自己的职业生涯(学生生涯浪费的一塌糊涂都懒得分析了),觉得自己大约浪费了2~3年时间,而且这些浪费理论上是可以避免的。如果这些时间利用好了,我现在的身价翻上一翻应该没有问题;即使没利用好,拿来做分享在社区刷存在感,今年也不必举步维艰了

爱旅行

肉山老师在自己的微博 定义自己是专业前端开发业余产品经理吃货旅行爱好者。上个月你刚去过日本,你去过的令你最印象深刻的地方是哪?

这次去印象最深的是环球影城。

我的游记里是这么写的“第一个看的项目是终结者2。开场前我还和老婆说,不会真放2个小时吧……她说:你最好担心别排这么久队只放5分钟。结果开场后疑虑一扫而空:是完完全全脱离正片的新冒险。当然阿诺还在,甩枪上膛的酷炫动作也还在。结合各种3D效果,舞台影片结合,4D,3幕互动等等,看的我眼泪止不住的流。太棒了太棒了,没想到少年最爱能以这样的形式焕发新生。自然小朋友被吓哭了。”

我很喜欢旅行,因为可以见识到很多不同的人事物。如果你同时还喜欢思考,就更有乐趣。比如我去越南富国岛,环岛游的时候看到很多当地人住在铁皮房里,房子很破,里面也没啥值钱东西,就在门口绑一个吊床,躺在上面什么也不干。然后联想所谓“赤道的诅咒”,以及新加坡前总理李光耀的话:新加坡之所以发展得这么好,因为行政机关都装了空调。深表同意。

是个全栈工程师

清蒸看你的个人主页 ,你是本科读的是应用化学,但现在是一个 Full-Stack Developer ,当中经历了怎么样的曲折呢?

哈,这个说来话长。

首先我喜欢写代码。我小学的时候就通过一些科普读物了解到电脑和编程,并且利用各种机会尝试编程。家里也很支持,我在同龄人当中算比较早接触到电脑,大约小学的时候就给我爸开发了一个预算工具,用 QBasic 写的,跑在 DOS 上。当时好象是94、95年,都还没有 Windows 95。

然而这几乎是我正式工作成为一名程序员之前,所达到的最高峰了。因为我的家里没有人能告诉我接下来应该干什么;或者这个程序怎么改进;或者我怎么把它产品化。之后十年,我的电脑技能除了打游戏,大多用来装电脑和修电脑。

所以我一直都想做一名老师,或者,可能“向导”更合适。帮有兴趣的人进入编程领域,避免更多的电脑神童“沦为”游戏宅。

书归正传。虽然没有更进一步的作品,但我对编程的兴趣仍然很大,所以断断续续地学习着相关知识。高考失利,第一志愿报考浙大软件学院落榜,好在第二志愿的地大把我收了,也算入读 211。但是专业就不好选了,服从分配,学习应用化学。大学环境比起高中变化很大,一不小心就挂了科,导致大二转专业也不行,索性一直读到毕业。

大学期间遇到两本非常好的书:一本是香港自由职业者 Luar 的《FLASH MX 2004 AS2.0与RIA应用程序开发》,另一本名字作者都不记得了,只记得是 Flash + XML 做卡牌游戏的书。这两本书都非常贴近实战,包含完整的产品实现过程,可以很容易地应用到其它产品上。通过学习,我接到了学校附属幼儿园的网站建设工作;之后,又凭借这段产品经验,打动了第一份工作的面试官,得以跨专业进入 Web 前端开发领域。

可以说,没有这两本书,就没有现在的我。所以我也一直很想写一些书,帮助现在想入行的人。

工作之后的经历相对就平淡许多。从页面仔开始,到 Flash 游戏,再到 PHP 后端接口;从 table 布局,到 div 布局,再到 CSS3;从简单页面,到 Hybrid,到后端开发。期间有业务驱动,但更多的其实是自我驱动。我喜欢挑战新技术,喜欢在安全的范围内尽量尝试拓展技术技能树,我认为这是有追求的开发者必须具备的素质。

现远程办公

肉山老师所在的公司是全员远程办公,你觉得这个办公形式怎么样?

远程办公看上去很美,实际问题不少,我在 新司两月记自由职业的利与弊 中说过一些,大家可以去看一下,这里就不再重复了。

我只想提醒那些没有尝试过远程工作,对远程工作抱有幻想的同学:远程有好处,也有坏处;决定一份工作是好是坏的因素里,远程是相对不太重要的一个;另外,远程可能会比坐班更花时间。

当然,就目前来说,我也还在探索阶段,希望有经验的同学跟我分享。我还计划明年多出去几次,看看是不是能体验更多远程的乐趣。

关于 Meathill 对技术问题的看法

Promise 的由来及优势

在讲座【Promise 的 N 种用法】 有小伙伴问及Promise到底是为了解决什么问题而出现的?之前看《你不知道的JavaScript》这本书上说“回调的最大问题是控制反转,它会导致信任链的完全断裂”。我还是不清楚Promise对于普通的回调来说有哪些优势?什么是控制反转?肉山老师可以简单地做下文字回复吗?

你确定是书里写的是“控制反转”吗?这个词跟 Promise 完全不搭呀。

先解释“控制反转”吧,刚好我之前还稍微研究过。控制翻转一般针对大型软件。比如我们有一个 ClassA,依赖 ClassB,这个时候我们在 ClassA 的实例 a 中如果要使用 ClassB,可能会这样:

constructor() {
    this.b = new ClassB();
}

但是这样做可能会带来问题:

  1. ClassB 有多个同源的类,比如 ClassB1,ClassB2,这些类的功能相似,在不同场合要用不同的类
  2. b这个实例可能需要在多个实例间共享,这些实例间的初始化顺序难以确定

于是便诞生了“控制反转”这一说法,指控制实例初始化的工作,由创建它的程序员,转移给使用它的程序员,所以“控制”就“反转”了。与之相关的概念还有依赖注入。

这个概念用在 Promise 这里有些莫名其妙。回调的确有问题,它最大的问题我在《JavaScript 异步开发全攻略》中 异步的问题 中解释过:异步回调使得需要异步执行的函数(下面简称“异步函数”,并非 Async Function,请注意),和回调函数之间,栈是断裂的。所以在异步函数中发生的问题,从回调函数中无法捕获;在回调函数中发生了问题,我们也无法确定是哪个异步函数触发的。这样会给后面的 Debug 带来很多问题。

目前 Chrome 初步解决了这个问题,Ajax 请求的触发和回调可以在自动合并。

Promise 并没有解决这个问题;真正解决这个问题的是支持 Async Function 异步函数(ES2017)的运行时。所以 Promise 真正的优势在于:

  1. 有很好的阅读和书写体验
  2. 可以把复杂的回调嵌套缩减到2~3层
  3. 可以在任意运行时里实现,比如小程序

学习 CSS 的姿势

肉山老师曾开过一个讲座叫写 CSS 也要开脑洞:万能的 :checked + label ,不知道肉山老师做过最有趣的 CSS 特效是什么呢?能否展示下关键代码?

嗯,其实我没做过特别炫酷的特效……但是我这样说会显得很弱鸡,所以我换个角度再说两句吧。

首先推荐两个网站给大家:CSS-tricks 为数不多目前还在更新的个人博客网站,内容以 CSS 为主;CodePen 在线编写代码的网站,上面有很多案例分享。这两个网站是同一个作者维护的,可以在前者学习新技术,然后到后者去练习。

CodePen 上其实有很多炫酷的 CSS 作品,不过我觉得大部分并没有什么意义——作为练习和教学当然有意义,在生产中没有意义。《:checked + label》这个教程很有意义,它是大量依赖这对选择器组合实现互动功能的基础;但很可惜,CSS 领域并没有给我们留下很多类似的机会。缺少编程能力,无法响应用户操作,仍然会是纯 CSS 组件难以成规模使用的障碍。

很多 CSS 特效虽然炫酷,但都属于“只要肯花时间我也画的出来”;或者“好不容易画出来了只能在项目中用一次好亏呀”这样的分类。我觉得这些大家看一眼,知道 CSS 能做到即可,不用特意学习。

我相信这样可以解释开头“我没做过特别炫酷的特效”那句话了。

最后,推荐我另一个讲堂中演示的效果 ,和另一篇文章:《纯CSS实现多选组件》

组件化的颗粒度

怎么理解你的文章【组件化的度】 说的这个度呢?

这里的“度”自然是指组件化的颗粒度。

“组件化”这个概念并不新鲜,在整个前端界——不限于 Web 前端——组件库实在是非常普遍的一类产品。React 和 Vue 是其中的佼佼者,它们不仅实现了组件化的开发方式,还把创建组件化架构的难度降低到几乎人人可以参与的程度;又渗透到处处皆组件的程度。

于是很多同学都开始创建自己的组件化框架,或者在新项目中运用组件化的开发方式。文中的问题就在这个时候出现了:面对一个未来预期不明确的产品,我们应该选择什么样的颗粒度呢?是尽量粗放,尽量保留 HTML 在模板里,业务逻辑写在每个组件里?还是尽量细致,能组件就组件,写起来几乎看不到原始 HTML?

我认为,开发 2C 产品(免费),使用组件库完成快速搭建是合理的;但是在面向企业客户(付费)2B 产品中,就不合适了。原因是多方面的:

  1. 2C 产品大部分都是线上功能。比如微博微信,所有工作都在一两个界面中就能完成。
    2B 产品很多时候需要整合客户的线下流程。这部分流程可能涉及多环节多部门甚至多公司,所以不可能修改流程适应产品,只可能产品适应客户。
  2. 2C 产品大部分免费,用户愿意付出时间精力学习。
    2B 产品基本都收费,客户自诩为上帝,主观上更强烈的要求产品配合他。
  3. 免费用户看重产品的整体表现,比如微博微信其实都存在大量严重的体验问题,但只要这些问题不影响用户的主要目标,大部分用户是没有那么在意的;同类 2C 产品之间竞争,大部分也是整体vs整体。
    2B 产品的任何一条线都不能发生问题,否则影响流程的结果是致命的。所以 2B 产品并不要求有特别亮的亮点,但一定不能出现不及格的短板。

使用组件库必然在很多方面受限制。在 2C 产品中,我们可以绕过去、凑合一下,甚至放着不管等库升级都可以;但是在 2B 产品中,就只能自己想方设法应对,结果常常花费很多时间在本不需要的地方。

所以我认为 2B 产品开发时,应该遵循这样的原则:

  1. 尽量使用细颗粒的组件,比如原始 HTML
  2. 尽量使用简单直接的逻辑,方便多人协作和维护
  3. 开发时注意,一个东西出现 2 次,就要准备进行组件提取;出现超过 3 次,就要动手提取组件
  4. 保持先粗糙再重构的方式进行开发。直到大部分业务逻辑都完成封装。

GitHub 的正确打开方式

肉山老师在【面试经:GitHub】 中你提及到Issues 和 PR看文档观察提交频率GitHub 热门趋势GitHub Pages,可以推荐几个你觉得比较不错的 GitHub 项目吗?

呃,这个问题……现在几乎所有开源项目都托管在 GitHub 上。而知名项目都很好,文档齐全测试完整开发团队响应及时,没有哪个是不好的。

分享一个小经验吧。昨天有位同学向我提问【安装vue-cli 安装总是报错 安装不成功】 。拿到问题之后我自然 Google 之,然而换了几个关键词都没找到答案。于是我尝试在我的电脑上 npm i -g vue-cli,WSL 下一遍就成功了,Windows 10 命令行也不成功,错误信息也一样。于是到 Github 找到 vue-cli 的仓库,打开 issue,最新的就是这个问题:https://github.com/vuejs/vue-... 作者表示已经修改。这其实就是最常见的使用开源项目的体验。

面试的要求

上面说到面经,清蒸这里想问下面过百余人的肉山老师,你作为面试官对应聘者有什么技术和非技术的要求呢?

技术要求得看岗位,Title 给的高要求自然高,反之亦然。一般来说,是这样:

  1. 刚毕业的新人,要求数据结构基础扎实(说明还是上课了),能够写出伪代码
  2. 有1、2年的工作经验,CSS 知识/HTML 知识,能写出符合要求的 JS 程序
  3. 更高,有熟练使用框架的经验;有二次开发的经验;有和后端配合的经验

非技术方面的话,我一般会考察候选人是否喜欢技术。并不是说一定要喜欢技术,只是我会更倾向于选择喜欢技术的人。前端开发发展很快,日新月异,自身不热爱技术的话,很难期待 ta 会坚持学习和提高自己。

接下来会考察学习习惯,我希望候选人喜欢思考,善于总结,能够坚持终身学习。

如果候选人有工作经验,我通常还会要求 ta 把之前工作当中的组织结构,职责情况讲一下,看能不能讲明白。我认为能观察团队协作的人,在协作的时候也会做得更好。

Meathill 和 SF 的渊源

书籍《Electron + Vue 实战建站工具开发》的大纲

《JavaScript 异步开发全攻略》 之后,肉山老师的新书《Electron + Vue 实战建站工具开发》也在撰写中,可以简单地谈一谈本书的一个主要内容和大纲吗?

正如前面说的那样,我很希望能够通过写书的方式帮到有志于从事前端开发的同学。从上一家公司离职之后,我花了大约两个月时间学习使用 Electron + Vue 这两门之前没有接触过的新技术开发了一个静态网站建站工具 Meart。后来在 SF 做讲座,就有出版社的编辑联系我出书,经过讨论,就选择了这个题目。

关于这本书的内容,请大家看这个简介:Electron + Vue 实战开发建站工具 前言 看完应该就清楚了。还有目录,虽然还没写完后面肯定有变化,不过大体上应该如此:Electron + Vue 实战开发建站工具 目录

回顾之前对我影响最大的两本书,我会尽量在这本书里保持“实战”的味道,尽量分享我在编程过程中的所思所想。我希望读者通过阅读这本书,除了能够按部就班的开发出同样地建站工具,还能构建起完整的前端知识体系——甚至包括后端——知道接下来要学什么,去哪里学,等等。

我还在 SF 上建立了技术圈:Electron + Vue 实战开发建站工具 ,并计划把全书的内容分批次更新到圈子当中,让加入圈子的同学可以提前阅读。当然,更重要的是我能够尽早得到反馈,随时修正内容。

新的系列讲座

在 SF 开了 11 场讲座之后,肉山老师是否会开新的讲座呢?这次讲座是系列的吗,主要是哪块内容?

当然。虽然分享的收益低于我的预期,以至于我不得不提前开始全职工作。但是这个事业我还是要坚持下去的。

关于内容方面,首先我会补齐 实战组件开发——手机日历 (4/6) 的最后两讲,分别是利用 GitHub 建立产品网站,与其它开发者在社区交流;以及讲 jQuery 插件升级到 Vue 平台。

接下来我还准备了关于 CSS Grid 的《Grid 十八掌》——素材积累中,目前十四掌。——而且我发现我好象是 SF 上唯一讲 CSS 的,我想以后继续补充这方面的内容,所以还打算讲一次 《CSS 动画》。

再接下来想做一个系列教程:JavaScript 设计模式。其实这个的大纲我都准备好了,是给另一个网站准备的,结果被运营据了,说怕太深影响销量。我觉得在 SF 平台上应该会更受欢迎。

前面是 Live,我还打算录几个视频。一个是 Windows 10 WSL 搭建完整开发环境,目前正在找人赞助笔记本中;还和一些同学合作,准备做一个面试编程题的视频,大约由3~4个题目组成,目前只录了一节。

最后还想做一个 Serverless 开发独立项目的分享,不过这个只是一个想法,离实际还远,毕竟我都没有有说服力的项目。我只是觉得对于广大前端同学来说,光“仿饿了么”,“仿网易云音乐”是不够的,我们需要拿出更有价值的作品证明自己,Serverless 是个机会。

哈哈,一说到想法就收不住了。我目前工作之余大部分时间都会拿来写书,毕竟签了合同,而且很惭愧的告诉大家,已经延期了……等到年底书写完,就会一一兑现上面的承诺。

文末福利

在这篇 Meathill 的专访文的评论区,针对肉山老师的博客中的文章(肉山老师的博客传送门 )或者他在 SegmentFault 问答板块下的回答 内容进行提问,肉山老师将赠送评论者 5 折讲座票哟~

肉山老师左右讲座一览:

如果觉得我的文章对你有用,请随意赞赏

joyqi · 12月6日

赞肉山,从业十余年仍然能保持一份对技术的初心

+4 回复

0

给肉山老师递赞美 @Meathill

清蒸不是水煮 作者 · 12月6日
Meathill · 12月6日

感谢 SF 给我这次机会,希望能跟大家有进一步的交流。

+4 回复

0

按住肉山老师,@慢慢 来这里 🙋

清蒸不是水煮 作者 · 12月6日
慢慢 · 12月6日

给肉山老师递赞美 @Meathill

+1 回复

JackLi · 12月6日

给山哥打call

+1 回复

wujunze · 12月6日

赞👍🏻

回复

火蜥蜴 · 12月6日

6666

回复

载入中...