Github on Steroids

#github #devrel #dx #debugging

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

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}`