Hi everyone, I have few tips on how to increase productivity with Github.
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
github1s.com. Then you will see vscode in your browser.
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
- 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)
- 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
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.
To make it easier for the audience to click, you can play around below links
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.
Just click .
Plus it also support Pull Request view!!.
Editor view: https://github.dev/DefinitelyTyped/DefinitelyTyped/pull/56026
Hope you enjoy reading it, Thank you.