yuyingwu/blog

Yuying Wu's Blog

blog's Issues

人人都有好工作 - 简历篇

最近小伙伴们有在考虑换工作的事宜，我刚好看到这本《人人都有好工作》，里面有一章专门介绍哪些内容应该出现在简历中，而哪些不应该，摘录下来，共勉。

一、你有必要准备三种不同格式的简历

• 为多数应聘公司准备的word文档
• 纯文本文件
• 你的个人网页

二、准备多份简历

• 不同的工作以及不同的公司都会对应聘者有着不同的要求。即便你在同一家公司同时申请的两个岗位都叫做“应用程序员”，这依然代表了两份不同的工作。
• 简历必须是写给它的特定读者看的，它一定得是为你正在应聘的公司以及你所追求的工作量身定做的。
• 应聘职位的具体说明也将直接影响你的简历内容。
• 如果你现在还没有一份像样的简历，那就赶紧动手开始写吧，而且还要记得时不时地重新审视一遍你的作品。随时准备好更新资料丰富简历，也准备好删除那些和当前的情况不再相关的内容。要把简历当成是一个花园，栽种新鲜的植物，铲除那些枯萎的。

三、简历至少包括以下内容

• 联系方式

  • 不能把当前工作的电话写进联系电话栏
  • 邮箱必须是个人邮箱地址

• 职业自述

  • 关于找工作（没有绝对标准的答案）
  • 阅历小结【详见这里】
  • 两三种专业技能【详见这里】
  • 学历/证书（如果这些内容可以让你加分的话）【详见这里】

• 工作经历【详见这里】

• 教育背景

  • 教育背景部分的基本内容就是要将你所完成的高等教育机构名称，以及你所获得的学位分别列举出来。

• 工作之外的其他相关成就（如果你觉得自己的工作经历还不够丰富）

  • 请保证你所列出的奖项都是很特别且很有意义的。

• 关键词及技能列表

四、不需要出现的内容

• 照片

• 职业目标，无意义

  • 职业目标：赢取信息技术领域一份具有挑战性的工作，并能利用自己的才能为行业发展做出贡献。

• 兴趣爱好

• “如要求可提供相关证明”

• 无关的工作经验

  • 去麦当劳打工，并没有为日后成为一名程序员有什么贡献

五、阅历小结

在工作经验的部分，你所要着重阐述的是自己在某个领域工作了多少年，这个领域最好能具体到什么行业的哪一种工作，举个例子：

• 3年财富500强公司Solaris系统管理员经验
• 7年C/C++语言数据库自动化软件开发经验
• 5年用户界面设计经验
  这些语句中的重点可以根据你的求职目标进行修改。随着你应聘的工作的不同，需要在简历中强调的工作背景侧重点也将改变。

譬如你曾为nokia工作，而目前要应聘的是moto的手机业务部，那么就需要强调一下你在这个领域的经验技能：

• 5年用户界面设计经验，其中4年设计手机用户界面

六、主要专业技能

你需要在专业技能部分阐述自己的最高技能是什么，如果可能就加上量化的陈述。

• 大量的Ruby语言经验，两年Rails经验
• 专业Solaris系统管理员，支持200多个工位
• 3~8人的测试和开发团队的管理经验
• 3年FrameMaker使用经验，手册长度在100至300页之间
• 对上百名学员进行过10多门课程的培训

七、其他技能

也许你还有一些别的技能可以写进简历，当然那只是针对某家具体的公司。

• 可流利使用西班牙语，并能翻译程序错误信息
• 活跃于开源软件开发项目，曾担任Perl 6项目经理

八、工作经历

• 公司行

  • 公司名称
  • 公司简介（除非公司很出名，不然加一小段公司简介有助于面试官了解你的工作内容）
  • 工作时间

• 职位，以及任职期间取得的成就

• 在说明中加上一些数字能起到锦上添花的作用。如果你能把创造的工作价值用数据量化，这也将给所出示的内容价值加分。即使这个项目并不是依靠你个人的力量完成，这依然体现了你自身参与的价值。（请确保你能在面试时将写在简历中的数据流畅的说出来，而不是支支吾吾）

  • 在6个月之内使网站流量增加50%（同时列举你为此采取的行动）
  • 带领4~6名程序员的团队
  • 创建任务跟踪系统，减少了40%的进度拖延现象
  • 新安装路由器提高流量达25%，为客服减少了20%关于网络响应问题的投诉
  • 在三个月之内将“打开”状态的back log传票从500张减至20张

九、如果你是刚毕业、没有专业经验的新人怎么办？

将你的学习经历以及平时的兴趣爱好写进职业描述部分，然后加上一点你期望的发展方向。

• 刚毕业于XXX大学XXX专业，在校平均成绩3.43分
• 2年开源项目工作经验，熟练使用Perl6、Ruby on Rails
• 丰富的课程项目小组领导经验，带领2~6人学生团队
• 期望加入小型创业公司或从事音乐或语音录制工作【表明发展意向很重要】

十、开源项目为职业生涯灌注力量

开源软件不仅仅为互联网注入一股新鲜力量，它也可以成为职业生涯的爆发点，特别是对于一个职场新人来说。它能为刚开始找工作的你提供至关重要的工作经验以及工作样例。

着手一个开源软件（OSS）项目，无论这个项目是你自主开发的还是原本已有的，对你来说都是一份实实在在的工作经验。这既能显示你有编写代码的能力，又表明你能很好地和团队合作、与他人相处。而且，这些工作经历是雇主可以找到和验证的。

开源项目也让你能有真实技能范例可随时给别人展示。每次演讲会上，当我说到准备好一份相关工作成果去面试时，总能听到一些人的抱怨说：“我没法带工作样例去面试，因为那些代码都是归原公司所以没法随随便便示人。”这很糟糕，因为这样会让他们失去一些求职成功的机会。而开源软件项目就是很理想的解决办法，你可以随时把你的绝活展示给大家。

你并不需要为开源软件做出特别突出的贡献，而且你能做的也不一定非得是写代码。你也可以贡献文档，为维基百科的某一个条目添加文章，或者仅仅在自己参与的邮件群组中回答他人提出的问题。关键只是你用一种可以证明自己的方式为一些实际编程项目贡献力量。

留言板

有什么想法，欢迎在这里交流哈 😄🎉

浅谈 React Error Boundaries

前几天面试候选人的时候，有提到用React 16.x重构了一个电商首页，对各个业务模块做更细颗粒拆解和代码组织，提升开发效率和降低维护成本，在这里要给小同学点个赞，有想法也有落地成果。后来问及“一个模块报错，搞挂了整个页面”的问题，大家都知道，如果页面的entry是index.js，在里面引入各个components的话，运行时只要有一行代码挂了，整个js都会挂掉。针对这个问题，除了前端同学的自测、QA同学的测试或者人肉的code review，有没有代码层面或者机制，做好模块间的错误隔离/处理/上报？比较遗憾的是，在生产环境下，候选人没有针对这个线上大流量页面做相关的处理，靠人肉规范，没能给出比较好的错误隔离的设计思路和实践方案。

其实相关的思路可以有很多种，模块/页面级的异常处理、commit前跑test case、提交后或者发布前headless检查页面报错，等等。

在代码异常处理上，一般我们会用try-catch来做：

try {
  ReactDOM.render(<App />, document.getElementById('root'));
}
catch(error) {
  console.error('Unknown error intercepted. error: ', error);
}

但可以发现，异常信息是捕获到了，但是代码运行就结束了，并没有从异常中“恢复”。

Why Error Boundaries?

过去，组件内的 JavaScript 错误会导致 React 的内部状态被破坏，并且在下一次渲染时 产生 可能无法追踪的 错误。这些错误基本上是由较早的其他代码（非 React 组件代码）错误引起的，但 React 并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

React 16官方文档 —— 错误边界 >>

笔者之前写过一篇《这！就是1688 PC首页》，里面有提到我们团队基于React 16.x的页面实践，一个 index.jsx 中引入子目录下的各种 components ，初期开发阶段，整个应用处于“裸奔”的状态，一个组件抛错误，整个页面都会挂掉。日常抛JS error的情况包括但不限于代码逻辑没注意写错了、数据接口挂了或者返回结构不如预期、多层数据获取的容错等。首页有19个组件和一些公用的函数，如果其中一处报错，会把整个页面搞挂，风险太大。最后选用了React 16的Error Boundaries（错误边界）API去做components之间的容错隔离/错误上报的。

React Error Boundaries in Action

异常捕获/处理 HOC

在里面主要做几件事：

1. 异常捕获后的UI控制标记。通过react life cycle里的 getDerivedStateFromError，捕获运行时的异常，用一个state hasError 来标记当前组件是否报异常了，后续可以用这个state来控制展示传入还是降级的UI；
2. 异常捕获后的回调action componentDidCatch，可以在里面放异常日志上传到服务器的逻辑，同时也支持自定义错误处理回调 this.props.errorHandler；
3. 异常捕获后的自定义降级UI。有个 placeholder 从 this.props 传进来，支持自定义降级UI。由于异常发生后，我们对该组件可以是默认处理不展示，或者展示为开发者自定义的展示，所以这里开放了placeholder支持自定义UI。

import React from 'react';
import wpo from '@ali/retcodelog';

class ErrorBoundary extends React.Component {
  static defaultProps = {
    placeholder: null,
  };

  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError() {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 自定义错误处理回调
    const { errorHandler } = this.props;
    errorHandler && errorHandler({ error, info });

    // 错误日志上报到服务器
    wpo.error('Error Handler', info && 
    info.componentStack ? 
    info.componentStack : 
    'Unexpect error from Error Handler');    
  }

  render() {
    const { placeholder } = this.props;
    const { hasError } = this.state;

    // 异常发生后的自定义降级（恢复）UI
    if (hasError) {
      return placeholder;
    }

    let tpl = this.props.children;

    return tpl;
  }
}

export default ErrorBoundary;

在应用中使用错误边界

一个应用中，可能会存在多个错误边界，如对整个应用App的全局错误边界，以及对每个模块使用的模块错误边界。

{/* global error boundary  */}
<ErrorBoundary errorHandler={() => { window.location.href = 'https://1688.com' }}>
  <App>
    {/* category error boundary  */}
    <ErrorBoundary placeholder={<StaticCategory />}>
      <Category />
    </ErrorBoundary>
  </App>
</ErrorBoundary>

全局或模块级错误边界可能看下图会更直观一些。

Wrapping It Up

回到文章的一开头，很多时候，我们在日常开发中，会不断地往前冲，开发很多酷炫的交互或者功能，有时可能忘记停下来，把更多的目光在质量保障上，本文提到的React Error Boundaries只是其中一个小的点。不同的设备环境、网络环境、用户操作路径，会不会在你不知道的情况下，我们的页面“坏”了，还是需要把这些信息收集起来，让我们看到“想当然”以外更多的东西。

共勉～

附录

值得注意的是，错误边界有一些无法捕获错误的场景：

事件处理
异步代码（如 setTimeout 和 requestAnimationFrame 回调函数）
服务端渲染
ErrorBoundary自身抛出的异常（并非来自子组件）

• React Error Boundaries官方文档
• 社区自建的react-error-boundary
• Why are Error Boundaries not triggered for event handlers?
• componentDidCatch is not getting called when there is an error in promise