打破封闭意识

针对跨团队协作乱的情况,我特别想说明一下,由于研发部门不是直接创造收入的业务部门,而是承担业务部门的服务者角色。

作为一个服务者,往往站在一个被动和弱势的位置上,很容易被业务人员举着收入的大棒指挥你无条件的服从。

业务部门人员随便指派任务,随意变更需求,团队同学无所适从。这样一来,部门内部无论怎样合理的计划都会被外部的力量轻易打破,让团队同学无所适从,导致大家的工作积极性不高,喜欢互相推卸责任。

久而久之,员工就产生了自我保护意识,凡工作尽量往后退,凡责任尽量往别处推,不求有功但求无过。

为打破员工养成的这种自我封闭的保护意识,鼓励员工更加积极主动做事情,我能够做的就是把这些责任都扛在自己身上,亲自去协调每项工作,让团队成员没有后顾之忧,让团队同学相信我可以搞定他们担心的事情,出了任何问题我可以来背锅,给自己的团队创造一个相对宽松和自由的工作空间,保护团队不被外部的各种杂事伤害到。

我常用的手段反而是将压力直接告知给团队,这里需要反思,应该先思考导致问题的原因,再去协调大家一起想解决办法,在这个过程中自然能感受到压力也有动力,而不是只说xxx要求这样,我也没办法,这样领导很无能。

开发者关系(DevRel)的新手指南

开发者关系部门组成

  • 社区经理

  • 技术作者

  • 技术布道师

  • 技术倡导者

  • 增长黑客

  • 营销人员

目的

开发者关系部门的目标是与开发者建立积极的关系,而开发者是面向开发者的公司的主要客。

对于开发者来说,幸福感来自于完美的产品文档,网站的简单导航,响应式的客户支持,有建设性的入门帮助教程,有吸引力的活动/竞赛,以及介于两者之间的东西。这正是开发者关系团队的重点所在。

不同类型公司的不同职责

根据科技公司的规模、产品或类型的不同,技术布道师/倡导者的目标也有所不同。

1.在一个全球性的跨国公司中,技术布道师的工作重点是尽可能多地出席全球各地的活动。在分享技术知识的同时,也要提到他们代表的是XYZ公司。有时候,技术布道师也要负责那些公司新招募到的开发者,帮助他们与其他人站在同一起跑线上。

2.在一家科技创业公司中,技术布道师的工作重点是让尽可能多的开发者用户了解产品,并确保现有的用户能够了解产品的一切,让他们充分地利用好产品。

3.在一家中等科技公司中,技术布道师的工作重点可能不仅仅是参加技术活动,还要建立各种内部策略来吸引和留住开发者客户

所需的开发经验

技术的创造者和技术的消费者之间存在着巨大的差距,而这正是需要开发者关系团队来填补的。

这个世界上每天都有令人难以置信的科技在涌现出来,发展速度之快,简直超出了人的极限。因此,一个在某一领域的专家,往往只知道另一个领域的一些细节。但作为观众,你却把所有这些不同的专家集合在一起,让你觉得自己是唯一不知道很多事情的人。

多个帽子

一个庞大的开发者关系团队意味着每个技术倡导者都可以花时间来尝试如何为公司的开发者客户提供更好的服务。比如,编写有趣的教程,谈论最热门的技术趋势,举办网络研讨会,撰写发人深省的技术文章,录制教学视频,手绘草图来解释复杂的数据结构/算法,提出更有效的技术支持策略,为产品建立入门指南,甚至只是参加尽可能多的开发活动,尝试与技术领域的人们进行面对面的互动。

但是一个较小的开发者关系团队,就意味着要同时要做不止一件这样的事情。这是一个完美的平衡行为,天生具有实验性的品质。任何东西太多或太少都可能是危险的。因此,你要不断地进化策略,定期检查指标,根据多个变量分析什么是有效的,什么是无效的等等。

经验丰富的开发人员!= 高级技术倡导者/开发关系负责人

一个开发者关系团队与一个由开发人员组成的技术团队或营销团队相比,有着完全不同的目标、责任、技能要求等。

因此,即使你是做了多年的开发人员,你也需要花一些时间在开发者关系本身,才能准确地去理解它。因此,从一个有丰富经验的开发人员到一个高级的开发倡导者的转变,对你和公司来说都不太可能有太大的成效。

开发者关系在印度

我自己也曾在印度的公司里担任过技术布道师的角色,但那的重心是简单的营销,而不是开发人员/社区建设。这是一个完全错误的想法,如果你是其中之一,请在你雇佣之前理解它。你可能正在改变很多人对这个角色的理解。这个时候Christian Heilmann写的博客将是一个很好的起点。

如果你是一个面向开发人员的技术公司,是时候认真考虑建立一个开发者关系团队了。如果你是一个想加入开发者关系团队的人,请确保你已经把情况弄清楚,并清楚的知道你所要做的事情是什么,然后做出正确的判断。

link 和 @import 加载 css 的顺序

html/css基础篇——link和@inport详解以及脚本执行顺序探讨 - chua1989 - 博客园

  • 下载优先级

  • 脚本优先级

下载!=执行

标准里面代码中引用文件都是按顺序解析下载的。但是现代浏览器都做了优化:浏览器的预解析,所以 <script> 和 <link> 会优先下载/加载。

但是执行顺序和引用顺序相同,所以谁在后面谁的优先级高,即使某些脚本先下载完成,也是排到后面执行。

腾讯一系列低代码平台

Python成神之路- 2021 大前端技术回顾及未来展望
Python成神之路- 2021 大前端技术回顾及未来展望

Design Token

Design Token 是设计系统中的视觉设计原子。它们是一组有着统一命名规则的实体,用于存储视觉设计部分的具体参数,比如 HEX 色值、间距、尺寸的像素等。使用它可以有帮助为 UI 开发工作维护一套具备可扩展性、一致性的视觉体系。

CSS Modules

CSS Modules 有所不同。它不是将 CSS 改造成编程语言,而是功能很单纯,只加入了局部作用域和模块依赖(继承等)。我们需要把所有的标签写到 Javascript 文件里。下面是一个简单的示例:

1
2
3
4
import styles from "./styles.css";

element.innerHTML =
`<h1 class="${styles.title}"> An example heading </h1>`;

在 Javascript 中你可以通过类似 styles.title 的方式访问 CSS 文件中的 .title 类。然后在构建过程中,我们的构建工具会搜索我们用 import 语句载入的名为 styles.css 的文件,之后把源文件解析成新的 HTML 和 CSS 文件,类名会被特定的格式替换:

HTML

1
2
3
<h1 class="_styles__title_309571057">
An example heading
</h1>

CSS

1
2
3
._styles__title_309571057 {
background-color: red;
}

father-build 是什么

umi 打包构建工具,可以将 ts 打成各种格式的包

(0,xxx) 代表什么函数

可以将 eval 运行在全局环境

1
2
3
4
5
6
7
8
(function() {
(0,eval)("var foo = 123"); // indirect call to eval, creates global variable
})();
console.log(foo); // 123
(function() {
eval("var bar = 123"); // direct call to eval, creates local variable
})();
console.log(bar);

Why is (0,obj.prop)() not a method call?

Proxy 学习

Proxy 相当于在对象之前加一层拦截,可以控制调用方对对象的读取/变更

程序中 Reflection 指的是什么?

https://www.zhihu.com/question/28570203

反射(Reflection)其实是通过允许在运行时存取程序数据,以改变程序行为的程序设计技术

反射是一种在程序运行时获取程序元数据的能力。

Javascript 中 Reflect 是什么?

Reflect - JavaScript | MDN

提供拦截 Javascript 操作的方法,很多都可以找到对应的操作。

例如 Reflect.has 和 in 操作符一样

Reflect.apply 和 Function.prototype.apply() 方法类似

puperteer 如何监听请求

Chrome 内核开放了 chrome devtools 能力,可以通过监听它定义的协议获取到浏览器请求

1
chrome.exe --remote-debugging-port=9222

Chrome DevTools Protocol 协议详解 · Issue #82 · Pines-Cheng/blog · GitHub

FingerprintJS - 在浏览器端实现指纹识别

其实这是 Electronic Frontier Foundation 研究出来的技术,可以匿名识别 Web 浏览器,准确率高达94%。通过查询

  • 浏览器的代理字符串

  • 屏幕色深

  • 语言

  • 插件安装

  • 支持的 MIME 类型

  • 时区偏移量和其他功能,如本地存储和会话存储等等

然后这些值通过散列函数传递产生指纹**,不需要通过 Cookie 存储就可以识别浏览器。