Github on Steroids
Read this article at Devto WebsiteFew of below content does not render properly so instead of reading here, you can read this in Devto instead.

Github on Steroids

githubdeveloperexperiencedxdebugging

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.

youtube tyUNy-WFs-c

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.

  1. Since I'm using chrome go to chrome://bookmarks
  2. Then click 3 dots icon on your most top right
  3. 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' })
  1. It will look like this bookmark github1s.com
  2. 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.

githistory.xyz reactjs package.json file

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 .

twitter 1425505817827151872

Hope you enjoy reading it, Thank you.