我的技术和生活
-

浅谈小型技术团队管理:问题篇
开篇先画一下范围:
- 针对小公司和小技术团队
- 技术团队地位中等偏上,作用比较重要,又不是那么重要
- 通常来说没有很核心的产品
比如外包公司,客户当然期望你做出佳作,但实际上也做好了不行就换人的心理准备;或者老板本身不是做互联网的,拉起一支队伍想“赋能”一下自己的行业。总之就是资源不会太多,能做好当然皆大欢喜,做不好背锅走人也不要意外。
这里我主要想和以技术研发为核心的纯互联网产品公司区分开。此时资源都会向研发倾斜,节奏也会跟着研发走,对于技术管理者来说,施展的空间要大得多。
好,相信很多技术同学都有类似的经历:
工作几年之后,自我感觉良好,大部分技术问题难不倒你。突然有一天,某位曾经合作愉快的前同事突然找到你,说有个改变世界的产品,需要一位足够出色的 CTO 来统领团队,想来想去你最合适。
你觉得项目听起来靠谱,也觉得自己有能力接手,然而更重要的是:工作几年,想多接触些管理,但是现在的领导并不打算让贤,公司也没有那么多坑等着你填,这似乎的确是个好机会。
于是你接受了对方的条件,成为这个小型技术团队的领导,公司非常需要你的团队做出好产品,但是你要面临很多不利因素:
- HC紧张,岗位设置很难做到面面俱到
- 业界知名度低,难以招幕到高级人才
- 资金压力大,要求快速迭代、变现,给研发部门自由发挥的空间不大
- 名义上“技术一小步,公司一大步”,但实际上技术并不是绝对核心,至少在几位合伙人的眼里不是。
无论如何,先搭建团队,然后动手开发,活儿总是要干的嘛。大多数同学面临这种情况,会直觉性地选择俩眼一闭,先写代码。毕竟,写了代码才有产品,有了产品才有后面的其它工作。
早期的开发一般会比较顺利,毕竟没有限制,只管做功能就好。但是,随着开发进行,踏踏实实写代码很快变成了奢求,一茬接一茬的问题出现,大家疲于奔命,到处救火,真正的产品优先级反而抛在后面。以我的经验,常见的问题有:
- 出了问题,前后端互相甩锅,前端说是后端的问题,后端说是前端的问题
- 测试人员高高兴兴的测出来一大堆问题,其中一多半可能不是问题,但是测试也需要职业成就感,所以他们宁可错杀一千不愿放掉一个
- 因为缺少回归,做新功能或者改 bug 的时候一不小心就把之前的代码改坏了
- 后端没做出接口,前端开始的时候要等后端,比较闲;后来接口出来了(多半延期),为了项目整体进度,又要赶时间,忙得要死
- 没有测试集,不敢重构,不敢升级依赖,不敢更换系统
- 没有压力测试,市场费用花出去,一波流量涌入,服务器挂了……
- 长期零和博弈导致团队内部关系紧张,内耗严重
早年我也认为这个问题无解。大家只能夹缝中求生存,想方设法把产品搞出来弄上线,寄望产品成功,争取到足够多的时间旧代码,还技术债。用发展解决问题,或者至少延缓问题。
但是我厂工作几年之后,我开始有新的想法。想要保证产品质量和代码质量,同时一点代价都不付出,当然不可能;但是,以优秀的技术产品、良好的流程,在保证产品质量和代码质量的同时,减少付出的成本,使得我们最终能够在项目进度、团队建设、产品质量之间找到平衡点,是绝对可能的。
可惜的是,我暂时找不到能够立刻满足这套需求的产品,所以我决定在未来的一段时间把它整理开发出来,至少能够满足我自己的日常使用。希望这个坑能填上,能够真的派上用场。
-
思否创始人的 Python 课
我跟思否的关系一直不错,所以理所当然要帮他们宣传一下,顺便水一篇博客。
一般来说,我很少转发别人的课,毕竟我自己的课都不想占用太多公共资源。不过这次是 Joyqi 老道士下山,非常少见,相信课程质量会很有保证,建议不要错过。这里帮他们扩散一下,微信扫描/识别下面图片的链接即可。
训练营形式,面向初学者,非常值得。

-

Vue 3.0-beta.1 发布!
经历一年多的推倒重来反复打磨,在众多开发者的千呼万唤之下,Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本。
按照官方路线图,原计划 Q1 末发布测试版,Q2 发布正式版。目前看来稍微有些延期,不过不多。相信正式版会很快到来,非常期待呀。
在我看来,Vue 已经是一份杰作,而 3.0 的变化则让它更加优秀。
起初,Vue 开创性的使用
Object.defineProperty改写对象属性赋值运算,隐性收集依赖,把前端开发的难度降低了一个维度。从此,我们不需要考虑怎么绑定数据,怎么更新视图,只需要简简单单修改变量的值,界面就会自动变化,如魔法一般。如今,Vue 3.0 更进一步,使用 Proxy 拦截赋值操作,不仅实现了同样的功能,还大幅降低系统消耗、减少计算时间。——更加值得期待的是,因为新 API 更强大,之前困扰众多开发者的“修改数据,界面不更新”问题,应该会变得极为罕见。
这会令 Vue 的入门门槛变得更低。在我看来,这件事善莫大焉。写代码并不仅仅是写代码,它是这个世界上成本最低的“创造型”工作。其它创造型工作,比如雕塑、美术,除了复杂的基础教育,还需要昂贵的生产成本。编程不需要,只要你有一台电脑,坐下来就可以写,想怎么写就怎么写,想写什么就写什么。而前端,又是其中成本最低的,你甚至不需要搭建开发环境,拿个记事本就能写,写完放到浏览器里就能跑。
从这个角度出发,每次在知乎看到“我出身不好,能不能学编程”,或者“我学历不好,能不能学编程”,我都会建议他们学。因为学会编程,不仅仅是掌握一门手艺,可能养家糊口,更是给自己的未来增加了一种可行性。学会编程,你就可以把手伸到我这种专业程序员伸不到的地方,帮助自己、帮助他人、甚至帮助世界,同时也能给自己换来各种各样的回报。
另外,新增的 Composition API——不管是一些人口中的“学 React hooks”,还是 Vue 作者尤雨溪说的“这不是 hooks,这比 hooks 强太多了”——大大增强了代码的可复用性,能很好的改进代码架构,为更大的项目、更强的架构,带来了更多的可能。
如果说 jQuery 让更多的人可以学会开发,那么 Vue 就让更多的人可以开发中大型软件。它会给整个行业带来的巨大帮助,让更多的产品可以有更好的用户体验,让更多的产品可以迁移、升级到新平台、新架构。
这个影响是潜移默化的,就像当年 Flash Player 集成 H.264 视频解码器一样,虽然很多人没注意,但是视频网站的春天就是那个时候到来的。如今,有了更好的基础设施,哪个新产品会崛起,我无法判断,但我觉得,对技术来说,更好的一天已经开始了。
(更多…) -

代友招聘:珠海/远程 APISIX 前端
另外我们 OpenResty Inc. 也在持续招聘后端工程师/系统工程师,可选北京、深圳,也支持远程,详情请点击:OpenResty Inc. 招聘后端工程师。
支流科技(APISIX)是一家开源基础软件创业公司,围绕着 Apache APISIX 构建下一代微服务,用户包括:中航信、海尔优家、腾讯云、空中云汇、NASA、欧盟数字工厂等 100 多家国内外知名公司和科研机构。
招聘中高级前端工程师,主要负责:
- 企业官网开发
- Dashboard 型产品开发
主要待遇:
- 全职工作,有五险一金
- 珠海上班最好,远程亦可
- 有(丰厚)期权
需要:
- 独立工作能力
- 掌握 Web 前端技术
- 掌握前端工具链
- 熟悉软件工程体系
- 至少熟练使用一个前端框架
加分项:
- 有开源项目参与经验
- 有长期博客
- 有远程工作经验
-

代友招聘:广州垂直领域知识付费
公司从 2018 年开始做相关的产品研发,到现在已经经历了两轮迭代,目前正在招聘新鲜血液,准备在 2020 年再搏一搏。
招聘链接在这里,长期招聘:https://www.zhipin.com/job_detail/?query=硅碳鼠&city=101280100&industry=&position=,目前主要招聘中级以上的前端和 PHP。
感兴趣的同学可以直接联系,或者找我推荐。
-

使用 JS 模拟元素被 click
需求来自于我厂的 QA 产品。在这个产品中,我需要在浏览器插件里模拟用的各种行为,比如:点击。
click事件前后发生了什么最初我觉得点击嘛,能有啥问题,就直接广播
click事件呗。结果发现并非如此。实际上,一次click背后,其实有一大套的逻辑:- 移动到按钮上时,会依次触发
mouseover,mouseenter事件,前者冒泡,后者不冒泡 - 鼠标按下时,广播
mousedown事件 - 如果此时其它元素有焦点,那么该元素会先失去焦点,并广播
blur事件 - (下一节补充)
- 按钮获得焦点,广播
focus事件 - 如果因此影响到 DOM,那么会等待 DOM 变更
- 如果鼠标没有离开按钮,按钮广播
mouseup事件 - 最后广播
click事件 - 在移动设备上,可能会有 300ms 延迟
其实(5)并不准确,每一次事件广播都是独立的 event loop ,所以上面每一步都可能产生 DOM 变化和其它次生变化,也可能导致一些操作或功能不符合预期。比如:
- 一个搜索框。输入后自动搜索,结果以 dropdown 形式展示在下面
- 点击 dropdown 里的条目可以跳转
- 搜索框
blur时 dropdown 移除
此时,dropdown 里的条目可能无法点击。因为点击时,输入框先
blur,之后 dropdown 隐藏,接下来mouseup事件触发在别的元素上,于是不会有click事件。最简单的解决方案,给
blur事件加延迟,10ms 就够。(关于上面的事件触发顺序,可以用这个的 codepen 尝试)
click事件对change事件的影响接下来,回到 QA 产品。
我真正踩的坑,是
change事件没有按照预期触发。大家知道,Vue 组件通过$emit('input')可以更新绑定在v-model里的值。触发的时机一般通过侦听 DOMinput或者change来决定。如果change无法正确触发,那么 QA 产品自然而然就无法正常工作。实际上,在上一节的
click逻辑中,第(4)步可以展开为:如果失去焦点的元素是
<input>或者<textarea>,则该元素会广播change事件。模拟
click动作的代码最后,演示一下最终代码:
const options = { bubbles: true, cancelable: true, view: window, }; let event = new MouseEvent('mousedown', options); elem.dispatchEvent(event); elem.focus(); event = new MouseEvent('mouseup', options); elem.dispatchEvent(event); elem.click();
相关链接
- 我在思否上的问答:当一个按钮被点击时,发生了什么
- CodePen
- 移动到按钮上时,会依次触发
-

解决诡异的 Chrome 自动完成问题
上周末客户突然报告了一个奇怪的 bug:删除用户时,会自动进入搜索结果页。我在我本地试了一下,100% 复现,相当诡异。经过仔细观察,我发现点击删除用户的按钮时,地址栏会发生变化,在新的路由下,会搜索当前用户:

删除用户时的截图 反复重试之后,我认为:是浏览器自动完成的锅。因为删除用户的操作非常敏感,所以我们要求管理员必须输入密码作为校验。而这个界面与常见的用户登录界面非常相像,所以浏览器自作聪明,找了一个 它认为是 用户名的地方填入了用户名,而这个文本框刚好是全局搜索的搜索框:

如图可见搜索框的位置 当其中的内容发生变化时(也即触发了
change事件),就会跳转到/search?{key}={query},然后开始搜索。问题找到后,接下来进入修问题时间。由于是浏览器的锅,Web 前端难以直接触及,所以很难修。经过反复艰难的 Google,终于在这个页面找到了答案:https://support.google.com/chrome/thread/9498749?hl=en(3楼),原来
autocomplete不止有on和off两个可选值,还可以是username、email、或password,等。(详见 MDN The HTML autocomplete attribute。)于是我尝试给真正的username输入框加上autocomplete属性,果然问题解决了。看来以后有时间得再研究一下
autocomplete属性了,说不定能解决之前为了防止自动补全而做的各种 hack。 -

几步简单的操作解决 `npm audit` vulnerabilities
NPM 是 JavaScript 生态最重要的组成部分,我们的项目中会大量使用 NPM 安装第三方包(安装后就称为“项目依赖”)解决问题。这些第三方包也会带来他们的依赖,最终一个项目里可能安装成百上千个依赖。
有道是:没有完美的代码,代码里一定藏有隐患。所以用的依赖多了,其中有问题的概率也提升了,三五不时的,npm 就会提示我们:
found N low/medium/high severity vulnerabilities。npm 提供命令
(更多…)npm audit fix,理论上可以修复这些隐患,但在实际操作中,以我的经验来看,并不容易生效。我猜测可能是因为依赖间的复杂关系,想彻底解决并升级不太容易。所以我一般是这样做的:

