远程办公参与开源项目如何协作？

<p>远程工作 5 个月，总结一下平时是如何进行远程协作的，主要还是结合自身参与的项目以及工作范围而言的，平时的工作大概会涉及以下几点：</p> <ul> <li>需求调研 &amp; 评审</li> <li>原型设计 &amp; 评审</li> <li>功能开发</li> <li>Code Review</li> <li>环境部署</li> <li>技术写作</li> </ul> <p>每一个环节使用的工具自然也是不同的，笔者本身也是一个工具党，所以本文大部分都是在讲用了哪些工具，完成了怎样的事情以及工具<code>有没有代替品</code>。</p> <p>首先， 对于一个聚焦于做开源项目的远程团队来说，沟通很重要，那么就从沟通工具讲起</p> <h2>沟通工具 - 飞书</h2> <p>虽然是远程办公，但是我们是中国的团队，时区没有变，还是在东八区，所以不存在时差的问题，所以沟通上还算简单的，整体采用<code>飞书</code>进行沟通。</p> <p>个人觉得飞书真正践行了远程沟通协作的关键点，它串联了团队所有人的沟通需求。</p> <h3>工作会议</h3> <p>会议的目的是各抒己见，也可能是让大家的想法趋同，达成一致的意见。所以我们带着目的、主题去开一个会议，比如产品原型评审，本着不开无谓的会议，只拉上干系人的方式。会节省很多时间。本身对于小团队来说会议就不算多。</p> <h3>进度同步</h3> <p>每周产品周会，一对一的沟通都是通过飞书的视频会议进行的</p> <h4>每周产品周会</h4> <p>每周产品周会是所有人都参加的一个会议，主要目的是让大家同步当前项目的进度，也可以借此了解其他同事都在做什么</p> <h4>一对一沟通</h4> <p>一对一的沟通是管理者和你的定期谈话，可能先寒暄一阵，进入正题，聊聊最近一周有没有遇到什么技术困难，需要什么帮助，主要目的还是想推进项目正常进行，又或者说说你最近发生的有趣的事情，让大家知道你仍是个“生动” 的人。</p> <h3>文档协同</h3> <p>告别一个邮件、Word 、Excel 传来传去传一天的旧协作方式，当今办公文档协同技术很方便的让大家的想法串联在一起</p> <h3>共享屏幕</h3> <p>如何让别人能快速理解你说的事情，最好的方式就是共享你的屏幕，你花了 3 分钟说一个按钮应该放在页面的什么位置，不如直接将你的想法预先设计出来，使用原型工具将之表现出来，将你的屏幕共享给别人，拿着原型说出你的想法是最好的表现方式</p> <h3>虚拟“水”吧</h3> <p>有时候和同事一直在讨论工作，讨论需求会很无聊，我们现实中和同事在工作之余也会聊聊有的没的吹吹水，一个合适的方式就是创建一个休闲灌水的聊天群，休闲之余，让自己乃至别人每日开心一下。</p> <p><img alt="远程在家 = 无业" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/ce5ecbcd-9409-4682-b16a-be1b17775914.png"></p> <h3>知识空间</h3> <p>共享的知识空间，可以作为团队的内部 WIKI 使用，比如编写员工手册、开发规范、企业文化等等</p> <h2>项目管理</h2> <p>项目管理工具我们采用的是 Linear ，还不了解 Linear 的小伙伴可以看看这篇文章：《<a href="https://linear.app/readme" rel="nofollow">README - A Story of Magic 》</a></p> <h3>Linear</h3> <p><img alt="Linear" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/f39533f8-6539-4aba-9e45-86ea905f09b2.png"></p> <p>Linear 的创始团队背景大多来自 Uber 、Airbnb 、Coinbase ，曾担任过 Airbnb 的首席设计师等的各路大神，所以本身产品界面以及交互就设计的就很精美好用。Linear 很适合中小团队作为项目管理工具来使用。</p> <p>Linear 不仅是一个 issue 管理工具，它还有很多好用的功能，比如：</p> <ul> <li>创建项目，以项目的方式管理 issue （ Projects ）</li> <li>用面板视图查看 issue （ Board ）</li> <li>创建敏捷迭代的发布周期（ Circles ）</li> <li>创建自己的视图（ views ）</li> <li>连接一些工作流，比如 GitHub</li> </ul> <h3>GitHub Issue</h3> <p>要说 Linear 是对内的 Issue 管理，那么 GitHub Issue 一定是面向外部的，如果面向星星数比较多的开源项目，参与度上来了，就会有各种各样的 Issue 产生，那么是需要专门有人维护 Issue 的，比如简单的创建一个 issue <a href="https://docs.github.com/cn/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository" rel="nofollow">提交模版</a>，来约束大家按规范的提问。</p> <h2>写作工具</h2> <p>团队是鼓励大家去进行技术写作的，周报的内容比较开放，借用了飞书的订阅号来编写，飞书的订阅号本质上和微信的公众号是相同的，只不过权限上分为了对内，对外。周报可以讲讲技术，偶尔讲讲生活，写的比较好还可以发到外部公众号</p> <p>那平时也会涉及到英文写作，这时候可能用到一些语言工具，比如翻译软件、语法软件、编辑器等等</p> <ul> <li><a href="https://www.grammarly.com/" rel="nofollow">Grammarly</a></li> <li><a href="https://www.deepl.com/translator" rel="nofollow">DeepL 翻译器</a></li> <li><a href="https://hemingwayapp.com/" rel="nofollow">https://hemingwayapp.com/</a></li> </ul> <p><img alt="Grammarly" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/91e156f2-7ecf-4c66-8d63-e26855aaf3fd.png"></p> <h2>生产力工具</h2> <p>生产力工具是提升工作效率的好帮手，有一些好用的工具一旦用上了真的只觉得相见恨晚，真香！</p> <h3>Raycast</h3> <p><img alt="Raycast" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/d60c131e-036c-4b3b-b8f3-6331ce1afb14.png"></p> <p>这款工具推荐过很多次了，完美代替 macOS 自带的聚焦搜索的最好用的工具，个人觉得比老牌的 <code>Alfred</code> 还好用，可以集成一些服务，比如 <code>GitHub</code>、<code>Linear</code>，用 <code>Raycast</code> 在 <code>Linear</code> 上创建 <code>issue</code> 或者在 GitHub 上创建 PR 是一种什么体验</p> <h3>CleanShot X</h3> <p><img alt="CleanShot X" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/002dda7e-c6e7-415a-b713-e65a9728062a.png"></p> <p><code>CleanShot X</code> 是一个付费的 <code>macOS</code> 截屏、录屏软件，支持云存储服务，平时写作配图的主要输出工具，缺点只有一个，就是贵，$29 一年</p> <p>代替品：</p> <ul> <li>iShot: <a href="https://apps.apple.com/app/id1485844094?mt=12" rel="nofollow">https://apps.apple.com/app/id1485844094?mt=12</a></li> </ul> <h3>Loom</h3> <p><img alt="Loom" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/33632715-89e6-4a17-8ffd-f45a1aa6858d.png"></p> <p>Loom 是一个可以录制并分享视频的服务，平时我们可以用它来录制一个教程，或者你想表达的任何内容分享给他人，有时候视频所表达的内容会很容易被他人接受。</p> <h3>OSlash</h3> <p><img alt="OSlash" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/0328c9cc-dcdf-48ab-8ec0-d9cd4152ddee.png"></p> <p>短链 /黄页中心，它好用在可以一个比较难记<code>长链接</code>转化为<code>快捷键</code>，如何实现的呢，最好是借助 OSlash 的浏览器插件。</p> <p>比如 GitHub 项目主页为： <code><a href="http://github.com/xxx/yyy" rel="nofollow">http://github.com/xxx/yyy</a></code> 转化为 <code>o/home</code></p> <p><code>o/home</code> 是主页的别名，当你下次在浏览器中敲 <code>o/</code> 的时候，会关联出你维护过的所有短链，找到<code>o/home</code> 之后就会打开长链接，这样做的好处就是我们不用记住冗长的链接，只需记住别名就好。</p> <h3>Fig</h3> <p><img alt="Fig" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/307cbe57-aeb6-49b3-a555-25ee209555af.png"></p> <p>用了才知道敲命令有多顺手</p> <h2>开发工具</h2> <p>这里介绍一些每天都要用到的开发工具吧</p> <h3>Balsamiq</h3> <p><img alt="Balsamiq" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/9be933af-5c88-40f6-8a84-aec27d9355b8.png"></p> <p>这款原型工具画出来的图是手绘风格的，好看，但是支持的组件不全。</p> <h3>VSCode + GitHub Copilot</h3> <p><img alt="GitHub Copilot" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/4c4b9462-ff0e-46a1-82ad-08f416af2eda.png"></p> <p>OK ，这个不解释了，有 GitHub Copilot 加持，写代码不要太香。</p> <h3>SourceTree</h3> <p><img alt="SourceTree" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/9e190743-ad75-4427-b693-804d3264eb39.png"></p> <p>Git GUI 管理工具确实是五花八门的，挑选一个你觉得好用的即可，我用的比较顺手的是 <code>SourceTree</code> ，个人比较喜欢它的解决冲突的视图以及 Cherry Pick 的处理界面。</p> <p>平时如果不是解决大的冲突的话，我一般直接用 VSCode 编辑器的 Git 插件就可以了</p> <p>其他推荐：</p> <ul> <li>编辑器插件</li> <li>GitHub Desktop</li> <li><a href="https://www.git-tower.com/" rel="nofollow">Tower</a></li> <li><a href="https://git-fork.com/" rel="nofollow">Fork</a></li> <li>Sublime Merge</li> <li>Git Karken</li> </ul> <h3>Paw</h3> <p><img alt="Paw" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/66d9d602-21d8-484c-952b-041ad5bb3d23.png"></p> <p>一个 API 调试工具，一般我们用 <code>postman</code> 就可以，但是有好用的付费软件岂不是更好，况且这个是蹭来的，感谢同事 Jim 的分享，在 2021 圣诞节前后，<code>Paw</code> 在做一个活动，可以获得一个免费的 License ，节省 <code>$49.99</code></p> <p>代替品：</p> <ul> <li><a href="https://www.postman.com/" rel="nofollow">Postman</a></li> <li><a href="https://hoppscotch.io/cn" rel="nofollow">hoppscotch</a></li> </ul> <h3>TablePlus</h3> <p><img alt="TablePlus" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/630bcf9f-b902-462c-802e-9e44feb96497.png"></p> <p>付费的数据库客户端软件，价格略贵</p> <p>代替品：</p> <ul> <li><a href="https://arctype.com/" rel="nofollow">Arctype</a></li> <li><a href="https://www.beekeeperstudio.io/" rel="nofollow">Beekeeper Studio</a></li> </ul> <h3>Responsively App</h3> <p><img alt="Responsively App" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/8d5a995f-4c51-4a94-b35d-bd853f53d34c.png"></p> <p>当你开发响应式页面的时候用得到的浏览器</p> <h2>GitHub 以及辅助工具</h2> <p>开源项目，代码托管在 GitHub 上，所以 GitHub 玩好是需要一些其他工具的。</p> <h3>Neat</h3> <p><img alt="Neat" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/8211b872-b336-4f19-b291-4cd623a79c4d.png"></p> <p>一款 GitHub 通知管理工具，一般是 PR 、Issue 、code review 通知，它的作用体现在将消息推送给你，让你关注到正在进行的协作关系，比如产生了一个 code review ，会通知到你有一个 CR 需要处理。</p> <h3>DevHub</h3> <p><img alt="DevHub" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/5552ecda-d9d5-42aa-a6bb-41a77f79834e.png"></p> <p>一站式 GitHub 通知、动态面板管理工具，可以通过一个面板看到多个仓库或者账号的动态，类似 TweetDeck 之于 Twitter</p> <h3>GitHub Desktop</h3> <p><img alt="GitHub Desktop" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/2122927d-d141-4b15-8717-d02e3884e254.png"></p> <p>GitHub Desktop 虽然没有其他 Git GUI 那么强大，但是对于管理在 GitHub 上创建的 repos 来说足够了，可以搭配使用</p> <h3>SourceGraph</h3> <p><img alt="SourceGraph" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/67b92019-fd6f-4e9e-934d-315312adabac.png"></p> <p>搭配 Sourcegraph 的浏览器插件，可以轻松查询 GitHub 仓库的代码，一般在线看 GitHub 仓库代码我会使用它，当然它还有很多好用的特性待探索</p> <h3>Graphite</h3> <p><img alt="Graphite" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/8c00d630-aed2-460f-a0e4-7710757af155.png"></p> <p>专注于增强 GitHub 项目 code review 功能的应用，在这里可以观察到 code review 的各个阶段以及状态：</p> <ul> <li>是否轮到你 review</li> <li>是否需要你的关注</li> <li>你的 PR 该谁 review</li> </ul> <h3>同步上游仓库</h3> <p>我们采用 <code>Fork</code> 主仓库，创建 <code>PR</code> 的方式来提交 <code>commit</code>，所以同步上游仓库是每天常用的操作。</p> <h4>Git 命令</h4> <p>一般只需要三条 git 命令即可完成同步上游仓库的动作</p> <pre><code class="language-bash">$&gt; git fetch upstream main # 获取上游仓库 main 分支 $&gt; git merge upstream/main # 尝试自动合并上游仓库 main 分支 $&gt; git push # 推送到远端 </code></pre> <p>当然也可以编写一个 alias</p> <pre><code class="language-bash">alias fmp="git fetch upstream main &amp;&amp; git merge upstream/main &amp;&amp; git push" </code></pre> <h4>GitHub Actions</h4> <p>GitHub Actions 同样也可以实现上述需求，比如： <a href="https://github.com/wei/pull" rel="nofollow">https://github.com/wei/pull</a></p> <p><img alt="wei/pull" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/ad9b79f3-19ae-48f1-a772-2d4db83af504.png"></p> <h2>环境部署</h2> <h3>Render</h3> <p><img alt="Render" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/92416ce1-98c7-4cde-a09b-df27bd71267b.png"></p> <p>目前团队的所有服务都部署在 <code>render</code>，<code>render</code> 有一些类似 <code>vercel</code>、<code>netlify</code>，但是不仅仅支持静态资源部署，还可以部署 <code>Web Services</code>、<code>PostgreSQL</code>、<code>Redis</code> 等服务</p> <h3>Ghost</h3> <p><img alt="Ghost" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/e1766b87-f6e1-4c2f-813a-c01c4163dedd.png"></p> <p>博客使用的是 <code>Ghost</code>，开发者应该会很熟悉，发展至今，<code>Ghost</code> 可以提供 headless API ，搭配 JAMStack 搭建你自己的博客站点。笔者也曾用到了 Ghost 3.x 时代</p> <h2>SEO 与站点维护</h2> <p>你一定也希望你创造维护的站点有人来访问吧，所以做好站点 SEO 是必要的</p> <h3>站点统计</h3> <p><img alt="Plausible" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/1cff4801-ff22-4b58-8077-40f861b11d59.png"></p> <p>统计页面 PV 、UV 的工具，虽然说是 <code>Google Analytics</code> 的代替品，但是 <code>Plausible</code> 也是收费的。</p> <p>代替品：</p> <ul> <li><a href="https://umami.is/" rel="nofollow">https://umami.is/</a> - 开源免费</li> </ul> <h3>客户沟通</h3> <p><img alt="Intercom" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/25425c81-5a5c-4e96-9fa6-c913cfb191c8.png"></p> <p>收获潜在客户的好方法就是让客户可以和你建立联系，<code>在线对话框</code>是目前很多站点采用的方式，<code>Intercom</code> 是收费的</p> <p>代替品：</p> <ul> <li><a href="https://www.chatwoot.com/" rel="nofollow">https://www.chatwoot.com/</a> - 开源免费</li> </ul> <h3>网站监控</h3> <p><img alt="Better Stack" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/76b1cfca-a9b7-4e3d-9218-69a69dd6627f.png"></p> <p>如果出现站点故障，可以及时响应，提醒你需要处理。</p> <h2>一个清单</h2> <p>最后再推荐一个有 Dine 团队维护的<code>用于远程团队的工具</code>清单</p> <p><img alt="Tools for remote Teams" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://files.mdnice.com/user/6210/92af60f6-21de-47b6-96f0-a6c889d044fd.png"></p> <p>我敢肯定你们也有你们的<code>独门秘技</code>，欢迎评论分享</p> <h2>享受创造的乐趣</h2> <p>远程协作的目的是将工作顺利推进下去，选择自己喜欢的、用着顺手的工具就好，以上提到的代替品也绝对不会带有贬义的意思，说它就做的不好，反而可能竞品之间解决的场景也不同，所以合理搭配使用有可能会达到你想要的结果呢。</p> <p>远程工作的衡量标准是<code>工作成果</code>，至于你使用了什么工具去完成的可能并不重要，不过如果使用了一些可以提升生产力的工具，事半功倍，那一定是会让自己开心的，没准儿工具用的好，交付的成果也会变得漂亮。</p> <p>可能对于远程老司机来说，这些工具你也在经常使用，如果没有，希望能帮助到你解决在远程工作中遇到的问题，或者找到一些灵感。</p> <p>利器在手，享受创造的乐趣吧，共勉！</p> <h2>关于小蘿蔔丁</h2> <ul> <li>生活在大理的远程工作者，聚焦于前端，经常活跃于开源社区</li> <li>可以在 GitHub 上找到我： <a href="https://github.com/xiaoluoboding" rel="nofollow">https://github.com/xiaoluoboding</a></li> <li>感兴趣的同学也可以关注我的公众号：平时分享一些前端技术栈、前端技术方案、偶尔分享分享在大理的生活见闻。</li> <li>或者在 Twitter 上 Follow 我：日常推一些关于提升前端开发、提高生产力的好用工具。</li> </ul>