我的经验寻找问题

这次我花了很长时间才找到另一个要解决的问题。我发现有很多回购不活跃,没有任何未解决的问题,或者问题太复杂/已经分配给其他人。没想到发现问题这么难!🥵🙈

Lifehack 寻找问题时

最终,我想起了我之前为贡献的一个存储库,其中一个 Hacktoberfest 问题,我认为回馈会很好(提示提示😉😉😉需要考虑的事情在寻找问题时...提示😉)到回购。我很快放弃了我正在做的所有事情,去检查它是否处于活动状态,以及它是否有任何我可以解决的未解决问题。令我惊讶的是,除了作者之前没有人为此做出过贡献,所以我现在正式成为那里的第一批贡献者之一。😋

实施流程

我选择工作的问题比我为 Hacktoberfest 选择的前两个问题要大,我必须实现一个全新的功能。它是关于通过上传 JSON 文件并提供徽章标签和查询来创建动态徽章。我不得不使用 TypeScript 来实现后端和 Vue.js 来为前端创建视图。我以前从未使用过 Vue.js,所以一开始我很害怕,因为我不想做出糟糕的贡献😅。不过,我仍然尝试了一下,因为我真的很想回馈那个 repo,而且能够学到新东西也很棒。幸运的是,代码库非常有条理,它有模板、单元测试、很好的重构,甚至自动检查......编码天堂👼🌈

我觉得我正在使用 JavaScript 和 React,因为 TypeScript 和 Vue 的结构与它们非常相似。

为这个特性实现视图的过程非常简单。我只需要遵循已经存在的模板和结构,因为我注意到网站上的所有页面看起来都非常相似。所以我只是添加/编辑了该功能所需的部分并删除了不必要的部分。

后端有点挑战性,但我通过阅读作者之前为类似功能编写的代码设法做到了这一点,并且我试图遵循它来实现一个新功能。我做的第一件事是实施单元测试。我了解了用于单元测试的describe、it和tobe函数。这是一个小代码片段,它们在我为此问题实施的工作中看起来如何:

describe("#dynamicBadge", () => {
  describe("Url, label, and query", () => {
    it("displays a badge with a given label, URL and query", () => {
      expect(
        dynamicBadge(
          "version",
          "https://raw.githubusercontent.com/MichaelCurrin/auto-commit-msg/master/package.json",
          "version"
        )
      ).toBe(
        "![](https://img.shields.io/badge/dynamic/json?label=version&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2FMichaelCurrin%2Fauto-commit-msg%2Fmaster%2Fpackage.json)"
      );
    });
...
});

进入全屏模式 退出全屏模式

这个测试将测试函数是否会在给定版本、查询和标签的情况下返回正确的值。它将“期望”某些输入并使输出“成为”我们传递的内容。

然后,我正在实现代码,以便它可以通过我编写的所有测试。我正在构建一个将显示动态徽章的徽章 URL。最后,我添加了将新页面连接到网站的路线并更新了文档。

总的来说,我在实现通用徽章功能时遵循了作者的实现过程,所以希望它会成为该 repo 的一个很好的补充。这是我最终得到的结果:可爱 PR。这个 repo 给了我很多更好地重构代码的灵感。

外卖

我了解到,总是害怕使用新的语言/技术是不值得的。当你对编程有足够的基础知识时,只要通读代码并尝试遵循其风格和结构,你就能对一个新工具有所了解。例如,当您开始处理以前从未工作过的 repo 时,请浏览文件夹和文件,并尝试分析结构并浏览代码。这样,您可能会减少对新语言的恐惧,并可能会注意到其他语言/工具的熟悉模式。当我发现 Vue 和 React 非常相似时,我就不再害怕了。所以......不要直接进入编码,先熟悉代码库。😉