Hi everyone, I have few tips on how to increase productivity with Github.
Navigating through source codes in repository
Often time when we open any repository in Github we will be displayed with root folders and files. But, what if you want to navigate deep nested file? You would have to navigate through each nested folder until you find the file you want to open.
It's not really efficient way since every click to folder its actually trigger a lot of network calls, waiting for it to resolve and then browser render it to UI(user interface). And imagine that you are currently on slow 3G connection, you would have wasting your time waiting and clicking.
There are other points that can be added up but its not the objective of this article. So there are 2 way that I can recommend you:
1. Octotree (freemium)
It is a browser extension and they support a lot of browsers(please check their website). For me, their killer feature is Code Review and multiple tabs 🙂. It's much easier when reviewing your peer PR(pull request). Please refer their main website for services that they provide.
2. Github 1s
This is another level of navigating thru all the files and folder. Just add 1s
to the domain from github.com
to github1s.com
. Then you will see vscode in your browser.
from https://github.com/facebook/react
to https://github1s.com/facebook/react
Cool right!. But I would like to highlight 1 more interesting thing, which is how to improve your workflow. Based on their readme, they share a shortcut key with a click in your bookmark, and here how would you setup it.
- Since I'm using chrome go to
chrome://bookmarks
- Then click 3 dots icon on your most top right
- Create a bookmark and enter this line of code to URL input box. For name you can named it yourself (I named it Github1s)
javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' })
- It will look like this
- Once that done, now feel free to open any repo and click the bookmark that you just created. Github ReactJS Github1s ReactJS
Another alternative for this is Github Surf
Look at file history interactively
Sometime you want to know what changes have been made to a file. Github do have a history button for a file, but In my opinion, it's not really detail and still have to click a a lot of things. Luckily there is another awesome tool Git History
We will use this ReactJS package.json file as for our example. Same thing like above, you want to change the url domain.
from https://github.com/repo/path/to/file
to https://githistory.xyz/repo/path/to/file
To make it easier for the audience to click, you can play around below links
- https://github.com/facebook/react/blob/master/package.json
- https://githistory.xyz/facebook/react/blob/master/package.json
Please use keyboard arrow right and left to navigate and for mobile user you can drag left and right as well.
And lastly, you also can create a bookmark and below is the code. Please refer the step above.
javascript: window.location.href = `https://${window.location.hostname === 'github.com' ? 'githistory.xyz' : 'github.com' }${window.location.pathname}`
3. [Github] New update!, Github have built in editor
Just click .
Plus it also support Pull Request view!!.
PR: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56026
Editor view: https://github.dev/DefinitelyTyped/DefinitelyTyped/pull/56026
Hope you enjoy reading it, Thank you.
Top comments (0)