github-tips

Useful tips & tricks for GitHub. Mostly for me, but public so others might enjoy.

🤯 Wait wat?

1. Press . (period key) while browsing any repository or pull request on GitHub and it'll open that repo in the "web-based editor" github.dev. (docs)

😲 Okay, that is awesome

1. Use the command palette in GitHub to navigate, search, and run commands directly from your keyboard. (docs)
   • Command+K or Command+Option+K (Mac) or
   • Ctrl+K or Ctrl+Alt+K (Windows/Linux)
2. You can specify the theme an image is displayed to by appending #gh-dark-mode-only or #gh-light-mode-only to the end of an image URL, in Markdown.

🤓 Ooh neat

1. Press ? on any page in GitHub to see all available keyboard shortcuts.
2. When viewing a file on GitHub.com, you can press the y key to update the URL to a permalink to the exact version of the file you see. (docs)
3. Toggle between the Write and Preview tabs
   • Command+Shift+P (Mac) or
   • Ctrl+Shift+P (Windows/Linux)

🙂 Bro do you even GitHub?

Many of these are simply keyboard shortcuts I use a lot. Check the docs on GitHub for many more.

1. When viewing a repo on GitHub you can switch between the Code, Issues, Pull Requests, Actions, etc. tabs by typing G and the first letter of the Tabs title. For example, G I opens the issue tab, G A opens the Actions tab.
2. On the Code tab, T opens the file finder
3. On the Issues tab, typing C will create a new issue
4. When creating/editing an Issue, A allows you to set an assignee and L applies a label.

Example flow

A common example (for me) using several of the shortcuts above after landing on a repo page on GitHub:

1. G I to open the Issues tab
2. C to create a new issue
3. A to assign someone
4. L to add labels

Markdown

Check out the docs on basic formatting syntax for more info, these are just a few favorites

1. Alerts

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

2. Emoji cheat sheet

3. Create collapsed sections...

   Using the <details> tag

   We can hide anything, even headers

   # or code
   puts "Hello World"

4. Mermaid is really awesome for flowcharts, sequence diagrams, gantt diagrams, class diagrams, and more

    sequenceDiagram
        participant User
        participant API
        participant Auth
        participant Database
        User ->> API: GET /api/thing
        API ->> Auth: check auth
        Auth ->> API: success
        API ->> Database: get thing
        Database ->> API: {the: thing}
        API ->> User : 200 {the: thing}

Loading

5. aand... footnotes with simple bracket syntax¹, or named².

Footnotes

1. My reference. ↩

2. Named footnotes will still render with numbers instead of the text but allow easier identification and linking. This footnote also has been made with a different syntax using 4 spaces for new lines. ↩