Github on Steroids 
Tags: github, devrel, dx, debugging
Published: 2021-05-21 14:22:39

---
title: Github on Steroids 
published: true
description: Improve github experience with octotree, github1s, githubsurf, and githistory
tags: Github, developerexperience, dx, debugging
cover_image: https://source.unsplash.com/gnyA8vd3Otc
---

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](https://www.octotree.io/) (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](https://github.com/conwnet/github1s)
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)
```js
javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' })
```

4. It will look like this
![bookmark github1s.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvxfhm7q0rqjvqpz8mu3.png)
5. Once that done, now feel free to open any repo and click the bookmark that you just created. 
[Github ReactJS](https://github.com/facebook/react)
[Github1s ReactJS](https://github1s.com/facebook/react)

Another alternative for this is [Github Surf](https://github.com/surfcodes/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](https://githistory.xyz/)

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.


![githistory.xyz reactjs package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3rn9dfvfw06ejx04lsz.png)
 

And lastly, you also can create a bookmark and below is the code. Please refer the step above.

```js
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 <kbd>.</kbd>

{% twitter 1425505817827151872 %}

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.