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

做者:Lee Reilly

翻译:疯狂的技术宅javascript

原文:https://github.blog/2020-04-0...html

未经容许严禁转载前端

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


image.png

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

1. 文件模糊查找🔎

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

img

2. 轻松浏览文件和目录

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

78818701-ee142700-7989-11ea-9297-c3cf4e88f891.gif

特别提示:能够与 GitHub Enterprise works 一块儿使用🙌面试

有趣的事实:几年前就向做者提供了有关支持 GitHub Enterprise 的信息。若是你要为 GitHub 构建浏览器扩展,并但愿确保它适用于 GitHub Enterprise,能够经过加入 GitHub 开发人员计划得到开发人员许可证。 。chrome

3. 新通知提醒

这是关于浏览器扩展的主题,图中来自 @sindresorhusproject 通知在工具栏上的图标中显示了出来。你也能够启用桌面通知。segmentfault

78306110-73fe2100-74f7-11ea-8a54-1ba3d0a8db61.png

它还适用于 GitHub Enterprise。你要作的就是更改 API 端点以匹配你实例的 URL(例如 https://api.github.cyberdynes...)。

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

不管你设置了多少精心设计的电子邮件或通知过滤器,总会有漏网之鱼。由个人好友 @benbalter 建立的 Mention Highlighter 突出显示了全部说起个人名字和哇的内容,他们跳出来了!即便是在文字墙中,或者当我快速浏览评论时,也能够看到针对个人任何内容。

image.png

5. 连接到代码段

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

不幸的是若是该文件被编辑、删除或重命名,连接将不能再按预期工做。你能够按 y 或单击 Copy permalink 以生成将始终有效的规范 URL。

image.png

你还能够经过按住 SHIFT 键并选择开始和结束行来连接到行号范围。

特别提示:若是你在 GitHub 注释中添加代码段连接,则会显示代码漂亮的可视化效果。

image.png

我记得这个功能最初是几年前由 几个实习生创建的。若是你喜欢这样有趣的东西,请考虑申请咱们的实习计划

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

image.png

可视化十六进制代码

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

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

image.png

可视化差别🧡💚

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

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

image.png

实际上,若是你在三个反引号以后添加某种语言,则该代码将会 语法突出显示

魔鬼隐藏在细节中

在问题中添加完整的错误日志或冗长的程序输出可能会有助于解决错误,可是若是它占用了太多的页面垂直空间,请考虑使用 <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

78515738-d2333a00-776b-11ea-9a08-fa8c19b2ae5f.gif

使文字和图像居中

都到 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>

image.png

较小的文字

<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/)!

image.png

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

特别提示: 个人好友 @bitoiu 有一些使用 Markdown 表格的绝佳技巧 ,必定要看一下!

7. URL-hacking 主题

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

咱们的 UI 提供了按一种主题和语言进行过滤的方式(例如,搜索全部用 JavaScript 编写的 #game 类存储库 )。查看两个主题组合的搜索结果的惟一方法是经过 URL-hacking 。只需在主题 URL 后面附加一个?q=[TOPIC] 便可组合两个主题的结果。一些例子:

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

investing-app-take-3.gif

8. 深色主题

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

image.png

你知道吗: 大多数软件工程师更喜欢使用深色模式,由于……浅色会吸引更多的虫子(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 位街机的储库贡献者视图。很是适合炫耀本身的地位,并打印出来贴在办公室的公告栏或冰箱上。 💪🏻

image.png

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

@arzzengit-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

来自 @casperdclgit-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   |

@IonicaBizaugit-stats 中有各类有趣的数据,包括贡献和饼图。就像他的许多项目同样,CLI 输出使人愉快。 👏🏻

image.png

但愿你和你的团队可以明白,你的价值不只仅取决于代码行和提交次数。若是这些指标与你的绩效挂钩,那么可能该换工做了。 咱们正在招聘

10.摩尔斯电码锻炼!💪🏻

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

img

编者注:老实说,咱们不肯定 Lee 是在开玩笑仍是认真的。谨慎行事,风险自负。 🤷

你有 GitHub Protip 吗?

你有没有可使你在 GitHub 上的平常更轻松的技巧、窍门或 hack 技巧?请与你们分享。


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,天天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:


相关文章
相关标签/搜索