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

時間 2020-04-25

標籤 github 一些技巧工具搞笑東西欄目 Git 简体版

原文原文鏈接

做者：Lee Reilly
翻譯：瘋狂的技術宅javascript

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

未經容許嚴禁轉載前端

本文紹了一些很棒的瀏覽器擴展，URL hack，鍵盤快捷鍵以及一些搞笑的東西。*java

我用 GitHub 來輔助項目開發、業務開發和市場營銷經理等工做已有10多年了。在此過程當中，我掌握了一些技巧來管理個人通知，快速查找內容和建立 pull 請求，將 markdown 發揮極限，並經過一些第三方擴展個性化個人體驗。我分享了一些個人最愛，但願有一些新的東西對你有所幫助。git

1. 文件模糊查找🔎

我在 GitHub 工做了一年多以後才發現咱們有一個模糊文件查找器。在任何存儲庫中按 t 鍵進行訪問，而後就能夠輸入要查找的文件的名稱。我發現它很是有價值，能夠跳入新的 Rails 項目並快速尋找 schema.rb 來了解該應用程序。程序員

2. 輕鬆瀏覽文件和目錄

說到搜索文件，有一個名爲 Octotree 的很棒的瀏覽器擴展能夠幫助你瀏覽目錄，並以熟悉的樹狀結構打開文件。github

特別提示：能夠與 GitHub Enterprise works 一塊兒使用🙌面試

有趣的事實：我幾年前就向做者提供了有關支持 GitHub Enterprise 的信息。若是你要爲 GitHub 構建瀏覽器擴展，並但願確保它適用於 GitHub Enterprise，能夠經過加入 GitHub 開發人員計劃得到開發人員許可證。。chrome

3. 新通知提醒

這是關於瀏覽器擴展的主題，圖中來自 @sindresorhus 的 project 通知在工具欄上的圖標中顯示了出來。你也能夠啓用桌面通知。segmentfault

它還適用於 GitHub Enterprise。你要作的就是更改 API 端點以匹配你實例的 URL（例如 https://api.github.cyberdynes...）。

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 表格的絕佳技巧，必定要看一下！

7. URL-hacking 主題

我摸魚的方式之一是在 GitHub 上尋找標有 ＃game 的新項目，而後進行測試，或者把它們克隆到本地「修改其內容並查看會發生些什麼」。這是喝咖啡休息時或無聊的週日下午的絕佳活動。

咱們的 UI 提供了按一種主題和語言進行過濾的方式（例如，搜索全部用 JavaScript 編寫的 #game 類存儲庫）。查看兩個主題組合的搜索結果的惟一方法是經過 URL-hacking 。只需在主題 URL 後面附加一個?q=[TOPIC] 便可組合兩個主題的結果。一些例子：

全部標有 #covid-19 和 #visualization 的存儲庫：
https://github.com/topics/cov...
全部標有 #chrome-extension 和 #github 的存儲庫：
https://github.com/topics/chr...
全部標記有 #unity 和 #shader 的存儲庫：
https://github.com/topics/uni...
全部標有 #minecraft 和 #mod 的存儲庫：
https://github.com/topics/min...

你知道嗎：怎樣將主題應用於你的存儲庫幫助人們發現它們，甚至對他們有所貢獻？只需單擊一個按鈕，而後輸入一些與你的項目的目的和主題領域相關的關鍵字便可：

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 位街機的儲庫貢獻者視圖。很是適合炫耀本身的地位，並打印出來貼在辦公室的公告欄或冰箱上。 💪🏻

那只是提交次數，可是代碼行呢？每一個優秀的工程師都知道這是最重要的指標。有大量簡潔的 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 輸出使人愉快。 👏🏻

但願你和你的團隊可以明白，你的價值不只僅取決於代碼行和提交次數。若是這些指標與你的績效掛鉤，那麼可能該換工做了。咱們正在招聘！

10.摩爾斯電碼鍛鍊！💪🏻

最後……你是否想過有一種能夠鍛鍊身體並練習莫爾斯電碼的方法？別再等了！這個來自@veggiedefender 的 ingenious app 經過反覆合上筆記本電腦來生成莫爾斯電碼，而且我見過牛 B 的功能。當你在疫情之中被困在屋子裏但而且仍然要爲健身房會員付費時，這是一項很棒的運動。.-.. — .-..

編者注：老實說，咱們不肯定 Lee 是在開玩笑仍是認真的。謹慎行事，風險自負。 🤷