如何在 GitHub 正确吐槽 #4

Description

@cssmagic

如何在 GitHub 正确吐槽

背景

在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

一个吐槽狂的日常

我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

“这行代码是谁写的?”

看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

01 ide-annotate

行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

02 ide-annotate-open

“它是怎么变成现在这样的?”

根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

03 ide-vcs

在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

04 ide-diff

手边没有 IDE 怎么查?

如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

05 github-file-detail-page

其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

06 github-blame

而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

07 github-history

在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

08 github-diff

吐槽 Commit

追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

09 ide-github-plugin

(需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

https://github.com/{org}/{project}/commit/{revision}

好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

10 github-commit-comment

憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

更优雅一点,吐槽 PR

在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

那么,如何通过 commit 找到它所属的 PR 呢?

在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

11 github-search

(请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

12 github-search-issue

此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

13 github-search-pr

做一个有情怀的吐槽狂

要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


转自: cssmagic/blog#51

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
       blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
      }
      } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
      })();
      (function(){
      try {
      var __m = "github.com";
      var __re = new RegExp('^' + "github\\.com" + '
      
      Skip to content

      如何在 GitHub 正确吐槽 #4

      Description

      @cssmagic

      如何在 GitHub 正确吐槽

      背景

      在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

      因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

      一个吐槽狂的日常

      我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

      吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

      “这行代码是谁写的?”

      看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

      我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

      对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

      01 ide-annotate

      行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

      02 ide-annotate-open

      “它是怎么变成现在这样的?”

      根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

      选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

      03 ide-vcs

      在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

      04 ide-diff

      手边没有 IDE 怎么查?

      如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

      05 github-file-detail-page

      其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

      06 github-blame

      而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

      07 github-history

      在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

      08 github-diff

      吐槽 Commit

      追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

      如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

      如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

      09 ide-github-plugin

      (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

      如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

      https://github.com/{org}/{project}/commit/{revision}
      

      好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

      10 github-commit-comment

      憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

      更优雅一点,吐槽 PR

      在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

      上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

      另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

      那么,如何通过 commit 找到它所属的 PR 呢?

      在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

      11 github-search

      (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

      搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

      12 github-search-issue

      此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

      13 github-search-pr

      做一个有情怀的吐槽狂

      要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

      另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


      转自: cssmagic/blog#51

      Activity

      Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

      Metadata

      Metadata

      Assignees

      No one assigned

        Labels

        No labels
        No labels

        Type

        No type

        Projects

        No projects

          Milestone

          No milestone

          Relationships

          None yet

          Development

          No branches or pull requests

          Issue actions

          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
          Skip to content

          如何在 GitHub 正确吐槽 #4

          Description

          @cssmagic

          如何在 GitHub 正确吐槽

          背景

          在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

          因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

          一个吐槽狂的日常

          我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

          吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

          “这行代码是谁写的?”

          看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

          我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

          对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

          01 ide-annotate

          行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

          02 ide-annotate-open

          “它是怎么变成现在这样的?”

          根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

          选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

          03 ide-vcs

          在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

          04 ide-diff

          手边没有 IDE 怎么查?

          如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

          05 github-file-detail-page

          其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

          06 github-blame

          而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

          07 github-history

          在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

          08 github-diff

          吐槽 Commit

          追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

          如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

          如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

          09 ide-github-plugin

          (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

          如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

          https://github.com/{org}/{project}/commit/{revision}
          

          好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

          10 github-commit-comment

          憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

          更优雅一点,吐槽 PR

          在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

          上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

          另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

          那么,如何通过 commit 找到它所属的 PR 呢?

          在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

          11 github-search

          (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

          搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

          12 github-search-issue

          此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

          13 github-search-pr

          做一个有情怀的吐槽狂

          要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

          另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


          转自: cssmagic/blog#51

          Activity

          Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

          Metadata

          Metadata

          Assignees

          No one assigned

            Labels

            No labels
            No labels

            Type

            No type

            Projects

            No projects

              Milestone

              No milestone

              Relationships

              None yet

              Development

              No branches or pull requests

              Issue actions

              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
              Skip to content

              如何在 GitHub 正确吐槽 #4

              Description

              @cssmagic

              如何在 GitHub 正确吐槽

              背景

              在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

              因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

              一个吐槽狂的日常

              我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

              吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

              “这行代码是谁写的?”

              看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

              我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

              对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

              01 ide-annotate

              行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

              02 ide-annotate-open

              “它是怎么变成现在这样的?”

              根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

              选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

              03 ide-vcs

              在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

              04 ide-diff

              手边没有 IDE 怎么查?

              如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

              05 github-file-detail-page

              其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

              06 github-blame

              而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

              07 github-history

              在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

              08 github-diff

              吐槽 Commit

              追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

              如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

              如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

              09 ide-github-plugin

              (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

              如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

              https://github.com/{org}/{project}/commit/{revision}
              

              好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

              10 github-commit-comment

              憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

              更优雅一点,吐槽 PR

              在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

              上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

              另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

              那么,如何通过 commit 找到它所属的 PR 呢?

              在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

              11 github-search

              (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

              搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

              12 github-search-issue

              此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

              13 github-search-pr

              做一个有情怀的吐槽狂

              要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

              另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


              转自: cssmagic/blog#51

              Activity

              Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

              Metadata

              Metadata

              Assignees

              No one assigned

                Labels

                No labels
                No labels

                Type

                No type

                Projects

                No projects

                  Milestone

                  No milestone

                  Relationships

                  None yet

                  Development

                  No branches or pull requests

                  Issue actions

                  , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
                  Skip to content

                  如何在 GitHub 正确吐槽 #4

                  Description

                  @cssmagic

                  如何在 GitHub 正确吐槽

                  背景

                  在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

                  因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

                  一个吐槽狂的日常

                  我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

                  吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

                  “这行代码是谁写的?”

                  看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

                  我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

                  对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

                  01 ide-annotate

                  行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

                  02 ide-annotate-open

                  “它是怎么变成现在这样的?”

                  根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

                  选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

                  03 ide-vcs

                  在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

                  04 ide-diff

                  手边没有 IDE 怎么查?

                  如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

                  05 github-file-detail-page

                  其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

                  06 github-blame

                  而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

                  07 github-history

                  在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

                  08 github-diff

                  吐槽 Commit

                  追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

                  如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

                  如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

                  09 ide-github-plugin

                  (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

                  如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

                  https://github.com/{org}/{project}/commit/{revision}
                  

                  好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

                  10 github-commit-comment

                  憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

                  更优雅一点,吐槽 PR

                  在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

                  上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

                  另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

                  那么,如何通过 commit 找到它所属的 PR 呢?

                  在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

                  11 github-search

                  (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

                  搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

                  12 github-search-issue

                  此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

                  13 github-search-pr

                  做一个有情怀的吐槽狂

                  要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

                  另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


                  转自: cssmagic/blog#51

                  Activity

                  Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                  Metadata

                  Metadata

                  Assignees

                  No one assigned

                    Labels

                    No labels
                    No labels

                    Type

                    No type

                    Projects

                    No projects

                      Milestone

                      No milestone

                      Relationships

                      None yet

                      Development

                      No branches or pull requests

                      Issue actions

                      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
                      Skip to content

                      如何在 GitHub 正确吐槽 #4

                      Description

                      @cssmagic

                      如何在 GitHub 正确吐槽

                      背景

                      在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

                      因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

                      一个吐槽狂的日常

                      我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

                      吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

                      “这行代码是谁写的?”

                      看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

                      我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

                      对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

                      01 ide-annotate

                      行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

                      02 ide-annotate-open

                      “它是怎么变成现在这样的?”

                      根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

                      选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

                      03 ide-vcs

                      在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

                      04 ide-diff

                      手边没有 IDE 怎么查?

                      如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

                      05 github-file-detail-page

                      其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

                      06 github-blame

                      而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

                      07 github-history

                      在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

                      08 github-diff

                      吐槽 Commit

                      追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

                      如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

                      如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

                      09 ide-github-plugin

                      (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

                      如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

                      https://github.com/{org}/{project}/commit/{revision}
                      

                      好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

                      10 github-commit-comment

                      憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

                      更优雅一点,吐槽 PR

                      在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

                      上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

                      另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

                      那么,如何通过 commit 找到它所属的 PR 呢?

                      在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

                      11 github-search

                      (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

                      搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

                      12 github-search-issue

                      此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

                      13 github-search-pr

                      做一个有情怀的吐槽狂

                      要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

                      另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


                      转自: cssmagic/blog#51

                      Activity

                      Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                      Metadata

                      Metadata

                      Assignees

                      No one assigned

                        Labels

                        No labels
                        No labels

                        Type

                        No type

                        Projects

                        No projects

                          Milestone

                          No milestone

                          Relationships

                          None yet

                          Development

                          No branches or pull requests

                          Issue actions

                          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
                          Skip to content

                          如何在 GitHub 正确吐槽 #4

                          Description

                          @cssmagic

                          如何在 GitHub 正确吐槽

                          背景

                          在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

                          因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

                          一个吐槽狂的日常

                          我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

                          吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

                          “这行代码是谁写的?”

                          看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

                          我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

                          对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

                          01 ide-annotate

                          行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

                          02 ide-annotate-open

                          “它是怎么变成现在这样的?”

                          根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

                          选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

                          03 ide-vcs

                          在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

                          04 ide-diff

                          手边没有 IDE 怎么查?

                          如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

                          05 github-file-detail-page

                          其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

                          06 github-blame

                          而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

                          07 github-history

                          在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

                          08 github-diff

                          吐槽 Commit

                          追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

                          如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

                          如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

                          09 ide-github-plugin

                          (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

                          如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

                          https://github.com/{org}/{project}/commit/{revision}
                          

                          好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

                          10 github-commit-comment

                          憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

                          更优雅一点,吐槽 PR

                          在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

                          上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

                          另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

                          那么,如何通过 commit 找到它所属的 PR 呢?

                          在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

                          11 github-search

                          (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

                          搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

                          12 github-search-issue

                          此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

                          13 github-search-pr

                          做一个有情怀的吐槽狂

                          要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

                          另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


                          转自: cssmagic/blog#51

                          Activity

                          Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                          Metadata

                          Metadata

                          Assignees

                          No one assigned

                            Labels

                            No labels
                            No labels

                            Type

                            No type

                            Projects

                            No projects

                              Milestone

                              No milestone

                              Relationships

                              None yet

                              Development

                              No branches or pull requests

                              Issue actions

                              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
                              Skip to content

                              如何在 GitHub 正确吐槽 #4

                              Description

                              @cssmagic

                              如何在 GitHub 正确吐槽

                              背景

                              在几年前,百姓网几乎所有项目的开发流程就已经迁到 GitHub 上了。将 GitHub flow 作为日常开发流程,有一个很大的好处,pull request 很自然地成为 code review 的平台——每个人的代码都必须经过 review 之后,才会合并到主干。

                              因此,各个项目的 pull request 也逐渐成为一座座金矿,新人可以在历史 PR 中汲取经验,高手也常常通过 PR 追查疑难杂症的来龙去脉。而对我这个吐槽狂来说,PR 也是一个非常重要的阵地……

                              一个吐槽狂的日常

                              我叫魔法哥,我是一个吐槽狂。每当我在公司项目中看到不靠谱的代码,总是忍不住一吐为快。我相信,吐槽使人进步,吐槽改变世界。

                              吐槽很爽,但也有风险。即使某段代码看起来不太对劲,我也要再三确认,因为一旦搞错了,会很没面子。接下来,我会告诉你,我如何安全、优雅、正确地在 GitHub 吐槽别人的代码。

                              “这行代码是谁写的?”

                              看到不靠谱的代码,我们的第一反应通常是这个疑问。怨有头债有主,先要弄清楚喷谁。

                              我厂推荐使用 JetBrains 系列 IDE 来干活(公司出钱买正版),因此这里以 PhpStorm 为例,来还原一下我的工作场景。

                              对于启用了版本控制的项目,PhpStorm 允许我们查看每一行代码的作者信息。在行号处点击右键,选中 Annotate,即可开启此功能。(图一)

                              01 ide-annotate

                              行号栏会扩展出一条作者信息栏,显示出每行代码所属的 commit 版本号、更新日期、作者等信息。当鼠标悬停在此栏时,还会显示每行的详细信息,包括完整的 commit 版本号、精确的更新时间、commit 的标题等。(图二)

                              02 ide-annotate-open

                              “它是怎么变成现在这样的?”

                              根据上面的方法,我们就通常可以找到吐槽的对象了。但这还不够。有些时候这里显示出的作者可能是只重排了一下代码格式,并非真凶;又或者我们需要了解清楚代码是怎么一步步改成现在这样的,涉案人员都不能放过。所以接下来,我们要捋一遍这个文件的历史。

                              选择菜单 VCSGitShow History,PhpStorm 会在 Version Control 面板显示出当前文件的所有相关 commit 历史。(图三)

                              03 ide-vcs

                              在这个历史记录中,双击任何一条 commit 即可查看它的 diff 视图。这样就可以深入分析某段代码的更改过程、定位到相应的 check-in 节点。(图四)

                              04 ide-diff

                              手边没有 IDE 怎么查?

                              如果自己的电脑不在手边,也可以用浏览器登录 GitHub 网站,通过网页界面来一步步追查。我们进入项目 repo 的主页,打开某个文件的详情页面,在顶部可以发现 “Blame” 和 “History” 两个按钮(图五):

                              05 github-file-detail-page

                              其中,进入 Blame 页面可以查看文件内每行代码的作者信息(图六),其功能相当于图一。

                              06 github-blame

                              而进入 History 页面可以查看这个文件的所有修改记录(图七),类似于图三。

                              07 github-history

                              在 History 页面点击任何一条 commit 即可查看该 commit 各文件的 diff 视图(图八),相当于图四。

                              08 github-diff

                              吐槽 Commit

                              追查到问题代码真正的 check-in 节点后,就可进入相关 commit 的详情页面开始吐槽了。慢着,如何找到某个 commit 在 GitHub 上的详情页?

                              如果你在 GitHub 网站进行追查,那么图八其实就是 commit 的详情页。此外,在图六 Blame 页面的左栏可以点击 commit 的标题或版本号直达该 commit 的详情页;图七中的每一行都链向每个 commit 的详情页。

                              如果你正在用 PhpStorm,且你的 PhpStorm 安装了 GitHub 插件,也比较好办。在类似图二的作者信息栏展开的状态下,右击任一 commit,在弹出菜单中选择 Open on GitHub,即可打开浏览器进入该 commit 的详情页。(图九)

                              09 ide-github-plugin

                              (需要注意的是,由于我们的工作 repo 都是 fork,所以这个操作打开的页面是你的 fork 中的这个 commit。你需要手动修改一下页面 URL 来进入项目 upstream 的对应的 commit 页面。)

                              如果你的 PhpStorm 没有安装 GitHub 插件,也可以试试另一种方法。在图九的右键菜单中选择 Copy revision number,即可得到该 commit 的版本号。然后使用以下模式手工构造一个 URL 打开即可:

                              https://github.com/{org}/{project}/commit/{revision}
                              

                              好了,在 commit 详情页的底部,我们可以发现一个评论框。(图十)

                              10 github-commit-comment

                              憋了这么半天,终于可以畅快地吐槽了!这个评论框具备完整的 GitHub 评论功能,我们可以使用 GitHub 风格的 Markdown 语法 书写富文本,可以引用其它 commit 或 PR、@ 别人、拖拽图片上传,很方便。

                              更优雅一点,吐槽 PR

                              在 GitHub 吐槽 commit 看起来很拉风,但这还不够,还可以更优雅一点。

                              上面说过,PR 是一座金矿,那里有很多讨论。找到某个 commit 所属的 PR,有助于我们更好地了解背景,避免喷错(安全第一啊)。

                              另一方面,当不良代码被合并到主干时,我们固然可以怪罪代码作者,但这更多是 review 者的责任。因为帮别人 review 代码的往往是有经验的资深工程师,帮助新人纠错和成长是他们的重要职责。因此,找到 PR 再吐槽,还可以揪出那些不认真 review 代码、“毁” 人不倦的导师们,直接打脸,岂不快哉!

                              那么,如何通过 commit 找到它所属的 PR 呢?

                              在上一节我们已经找到了 commit 的版本号,接下来,我们登录项目 upstream repo 的主页,在页面顶部有一个搜索框,填入 commit 的版本号,搜索。(图十一)

                              11 github-search

                              (请留意此时搜索框的状态是 “This repository”,否则你可能进错了的页面。)

                              搜索结果往往为空。别着急,在页面左侧的搜索类型栏可以发现 “Issues” 有 1 条搜索结果,点击之。(图十二)

                              12 github-search-issue

                              此时就可以找到这个 commit 是在哪个 PR 被合并到主干的啦(图十三)。尽情开动吧!

                              13 github-search-pr

                              做一个有情怀的吐槽狂

                              要知道,总会有一些害羞的同学不敢直面我的吐槽,他们总是假装没有收到我在 GitHub 的评论。为此,我写了这篇教程《如何正确接收 GitHub 的消息邮件》,并发给每个人,这样应该可以防止大家装睡了吧。

                              另外,在日常的吐槽工作中,我还会把一些典型的错误汇总起来,并招集大家听我当面吐槽一遍。虽然大家都很嫌弃我,但我丝毫不为所动,因为我是一个有情怀的吐槽狂,天生骄傲!


                              转自: cssmagic/blog#51

                              Activity

                              Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

                              Metadata

                              Metadata

                              Assignees

                              No one assigned

                                Labels

                                No labels
                                No labels

                                Type

                                No type

                                Projects

                                No projects

                                  Milestone

                                  No milestone

                                  Relationships

                                  None yet

                                  Development

                                  No branches or pull requests

                                  Issue actions