GitHub 上的一些技巧、工具和搞笑的东西

疯狂的技术宅

发布于 2020-04-26 11:33:20

7640

发布于 2020-04-26 11:33:20

文章被收录于专栏：京程一灯

每日前端夜话第320篇

翻译：疯狂的技术宅

作者：Lee Reilly

来源：github

正文共：3626 字

预计阅读时间：10 分钟

本文绍了一些很棒的浏览器扩展，URL hack，键盘快捷键以及一些搞笑的东西。*

我用 GitHub 来辅助项目开发、业务开发和市场营销经理等工作已有10多年了。在此过程中，我掌握了一些技巧来管理我的通知，快速查找内容和创建 pull 请求，将 markdown 发挥极限，并通过一些第三方扩展个性化我的体验。我分享了一些我的最爱，希望有一些新的东西对你有所帮助。

1. 文件模糊查找?

我在 GitHub 工作了一年多之后才发现我们有一个模糊文件查找器。在任何存储库中按 t 键进行访问，然后就可以输入要查找的文件的名称。我发现它非常有价值，可以跳入新的 Rails 项目并快速寻找 schema.rb 来了解该应用程序。

2. 轻松浏览文件和目录

说到搜索文件，有一个名为 Octotree 的很棒的浏览器扩展可以帮助你浏览目录，并以熟悉的树状结构打开文件。

特别提示：可以与 GitHub Enterprise works 一起使用?

有趣的事实：我几年前就向作者提供了有关支持 GitHub Enterprise 的信息。如果你要为 GitHub 构建浏览器扩展，并希望确保它适用于 GitHub Enterprise，可以通过加入 GitHub 开发人员计划获得开发人员许可证。

3. 新通知提醒

这是关于浏览器扩展的主题，图中来自 @sindresorhus 的 project 通知在工具栏上的图标中显示了出来。你也可以启用桌面通知。

它还适用于 GitHub Enterprise。你要做的就是更改 API 端点以匹配你实例的 URL（例如 https://api.github.cyberdynesystems.com）。

4.让你的 @mentions 脱颖而出?

无论你设置了多少精心设计的电子邮件或通知过滤器，总会有漏网之鱼。由我的好友 @benbalter 创建的 Mention Highlighter 突出显示了所有提及我的名字和哇的内容，他们跳出来了！即使是在文字墙中，或者当我快速浏览评论时，也可以看到针对我的任何内容。

5. 链接到代码段

这并不是什么秘密，但绝对不是所有人都知道的，偶尔也会让人大跌眼镜。你可以在查看文件时单击行号来链接到特定的代码行。默认情况下，行号（例如，#L1337）被附加到URL，它能够直接把你带到这一行。

不幸的是如果该文件被编辑、删除或重命名，链接将不能再按预期工作。你可以按 y 或单击 Copy permalink 以生成将始终有效的规范 URL。

你还可以通过按住 SHIFT 键并选择开始和结束行来链接到行号范围。

特别提示：如果你在 GitHub 注释中添加代码段链接，则会显示代码漂亮的可视化效果。

我记得这个功能最初是几年前由几个实习生建立的。如果你喜欢这样有趣的东西，请考虑申请我们的实习计划！

6.必备的 Markdown 格式化技巧

GitHub Flavored Markdown 非常适合文本和基本表的原始格式设置，但有时需要发挥你的创造力来使它完成自己所需的工作。

键盘标签

你可以通过使用 <kbd> 标签使文本看起来像按钮，这与常规反引号文本略有不同。非常适合在自述文件或 Wiki 中记录诸如键盘快捷键或游戏控制之类的内容。

Press <kbd>W</kbd> to go up, and <kbd>A</kbd> to go down.
If you can find the <kbd>ESC</kbd>, pressing that will fire missiles

可视化十六进制代码

将十六进制颜色放在反引号中会渲染出该颜色的图块。我认为它完全是十六进制功能！

GitHub contribution graph colors: `#C6E48B` `#7AC96F` `#249A3C` `#196127`

可视化差异??

你可以使用反引号和 diff 可视化一个差异，该差异会适当地突出显示红色或绿色的线条。

```diff
10 PRINT “BASIC IS COOL”
- 20 GOTO 11
+ 20 GOTO 10
```

实际上，如果你在三个反引号之后添加某种语言，则该代码将会语法突出显示。

魔鬼隐藏在细节中

在问题中添加完整的错误日志或冗长的程序输出可能会有助于解决错误，但是如果它占用了太多的页面垂直空间，请考虑使用 <details> 和 <summary> 标签。

Having some problems firing up the laser.

<details>
<summary>Click here to see terminal history + debug info</summary>
<pre>
488 cd /opt/LLL/controller/laser/
489 vi LLLSDLaserControl.c
490 make
491 make install
492 ./sanity_check
493 ./configure -o test.cfg
494 vi test.cfg
495 vi ~/last_will_and_testament.txt
496 cat /proc/meminfo
497 ps -a -x -u
498 kill -9 2207
499 kill 2208
500 ps -a -x -u
501 touch /opt/LLL/run/ok
502 LLLSDLaserControl -ok1

使文字和图像居中

都到 2020 年了，我仍然很难将网页中的所有内容居中。我发现一个 <div align="center">[ Your content here ] 的组合产生了奇迹。非常适合将徽标放在存储库的自述文件中居中。

<div align="center">
<img src="https://octodex.github.com/images/dunetocat.png" width="200">
<p>This is some centered text.</p>
</div>

较小的文字

在 <sup> 或 <sub> 标记中换行可以使其更小。非常适合在图像下添加 “图1：描述” 之类的内容，或者在表格中缩小文本使其不会水平滚动。

<div align="center">
<img src="https://octodex.github.com/images/megacat-2.png" width="200"><br>
<sup><strong>Fig 1:</strong> Megatocat into action</sup>
</div>
View more octocats on the [Octodex](https://octodex.github.com/)!

现在我们基本上已经回到了上个世界 90 年代，使用古老的手撸 HTML。就像当初用记事本和 Netscape Navigator 进行这种操作的人一样，我对此表示满意。

特别提示： 我的好友 @bitoiu 有一些使用 Markdown 表格的绝佳技巧，一定要看一下！（https://github.blog/2020-04-02-github-protips-tips-tricks-hacks-and-secrets-from-vitor-monteiro/#magic-markdown-tables-%E2%9C%A8）

7. URL-hacking 主题

我摸鱼的方式之一是在 GitHub 上寻找标有 ＃game 的新项目，然后进行测试，或者把它们克隆到本地“修改其内容并查看会发生些什么”。这是喝咖啡休息时或无聊的周日下午的绝佳活动。

我们的 UI 提供了按一种主题和语言进行过滤的方式（例如，搜索所有用 JavaScript 编写的 #game 类存储库）。查看两个主题组合的搜索结果的唯一方法是通过 URL-hacking 。只需在主题 URL 后面附加一个?q=[TOPIC] 即可组合两个主题的结果。一些例子：

所有标有 `#covid-19` 和 `#visualization` 的存储库： https://github.com/topics/covid-19?q=visualization
所有标有 `#chrome-extension` 和 `#github` 的存储库： https://github.com/topics/chrome-extension?q=github
所有标记有 `#unity` 和 `#shader` 的存储库： https://github.com/topics/unity?q=shader
所有标有 `#minecraft` 和 `#mod` 的存储库： https://github.com/topics/minecraft?q=mod

你知道吗：怎样将主题应用于你的存储库帮助人们发现它们，甚至对他们有所贡献？只需单击一个按钮，然后输入一些与你的项目的目的和主题领域相关的关键字即可：

8. 深色主题

对于其中的 l33t h4x0rs 来说，unofficial GitHub Dark Theme 浏览器扩展可能很有趣。它可与 Chrome、Firefox、Opera 和 Safari 配合使用，再加上我们终于修复了网站图标问题。非常适合那些深夜黑客会议。?

你知道吗： 大多数软件工程师更喜欢使用深色模式，因为……浅色会吸引更多的虫子（bug）。</dad_joke>（无聊的笑话）

9. 数字游戏

有时对存储库的元数据进行分析并提取指标是很有用的（或有趣）。你可以使用 git shortlog -sn 从命令行按提交计数生成作者的排序列表。

$ git shortlog -sn

3164  Stanley Goldman
1549  Andreia Gaita
195  Don Okuda
191  Emil "AngryAnt" Johansen
15  Meaghan Lewis
9  Lee Reilly
8  Sarah Guthals
7  Sam Christiansen
7  Mauro Palumbo
6  Marcus Christensen

也可以用 git shortlog -sn --no-merges 排除合并提交。

如果它是公共存储库，则 GitHub High Scores 能够为你提供存一种类似老式 8 位街机的储库贡献者视图。非常适合炫耀自己的地位，并打印出来贴在办公室的公告栏或冰箱上。??

img

那只是提交次数，但是代码行呢？每个优秀的工程师都知道这是最重要的指标。有大量简洁的 CLI 项目可帮助你分析Git数据。

@arzzen 的 git-quick-stats 很好地概述了存储库的活动。你甚至可以按天、小时和月来查看贡献。

$ git-quick-stats

Stanley Goldman <StanleyGoldman@github.com>:
 insertions:    1800 (1%)
 deletions:     1455 (1%)
 files:         221 (2%)
 commits:       108 (3%)
 lines changed: 3255
 first commit:  Thu Apr 6 09:33:53 2017 -0700
 last commit:   Fri Jul 27 14:14:51 2018 -0400

来自 @casperdcl 的 git-fame 还总结了一些贡献信息，包括代码行数。

$ git-fame

Total commits: 5190
Total ctimes: 17640
Total files: 1058
Total loc: 113683
| Author                   |   loc |   coms |   fils |  distribution   |
|:-------------------------|------:|-------:|-------:|:----------------|
| Stanley Goldman          | 75955 |   3164 |    414 | 66.8/61.0/39.1  |
| Andreia Gaita            | 34438 |   1549 |    477 | 30.3/29.8/45.1  |
| Emil "AngryAnt" Johansen |  2230 |    191 |     35 | 2.0/ 3.7/ 3.3   |
| Don Okuda                |   312 |    195 |     51 | 0.3/ 3.8/ 4.8   |
| Meaghan Lewis            |   228 |     15 |     31 | 0.2/ 0.3/ 2.9   |

@IonicaBizau 的 git-stats 中有各种有趣的数据，包括贡献和饼图。就像他的许多项目一样，CLI 输出令人愉快。??

https://github.com/IonicaBizau/git-stats

希望你和你的团队能够明白，你的价值不仅仅取决于代码行和提交次数。如果这些指标与你的绩效挂钩，那么可能该换工作了。我们正在招聘！

10.摩尔斯电码锻炼！??

最后……你是否想过有一种可以锻炼身体并练习莫尔斯电码的方法？别再等了！这个来自@veggiedefender 的 ingenious app 通过反复合上笔记本电脑来生成莫尔斯电码，并且我见过牛 B 的功能。当你在疫情之中被困在屋子里但并且仍然要为健身房会员付费时，这是一项很棒的运动。.-.. — .-..