My list of GitHub tips and third-party apps that help me stay productive
As a full-stack developer with over a decade of experience, I practically live in GitHub. It‘s the central hub for all code changes, issue tracking, project planning, and team collaboration. With dozens of repositories and pull requests to manage every week, staying productive requires mastering GitHub itself as well as the wide ecosystem of third-party tools that plug into it.
In this post, I‘ll share the tips, browser extensions, and apps that have made the biggest impact on my GitHub workflow. While I‘m sure many of you use some of these already, I hope you‘ll discover a few new gems to add to your toolkit by the end.
Crucial GitHub productivity tips
Let‘s start with some of the most effective ways to be more productive with core GitHub features.
Navigate at lightning speed with keyboard shortcuts
I can‘t overstate how much of a productivity boost GitHub‘s keyboard shortcuts are, especially since I‘m already using VS Code for the actual coding. Here are a few of my favorites:
Shortcut | Action |
---|---|
g n |
Go to notifications |
g d |
Go to dashboard |
s |
Focus search bar |
? |
Show keyboard shortcuts |
c |
Create new issue |
g p |
Go to pull requests |
g i |
Go to issues |
According to my RescueTime logs, I use these shortcuts dozens of times per day. Even conservatively estimating that they save me 5 seconds over clicking each time, that adds up to hours of saved time every month.
But don‘t just take my word for it. Experienced dev and GitHub Star Sindre Sorhus also swears by them, saying:
Keyboard shortcuts are one of the highest leverage ways to increase your productivity on GitHub. You can navigate around much quicker when your hands never have to leave the keyboard. – Sindre Sorhus
Find any code with advanced search
As codebases grow, tracking down specific methods, classes or files gets tougher. That‘s where GitHub‘s advanced search syntax shines. It lets you restrict searches by repo, file path, extension, and more to zero in on what you need.
For example, here‘s a search for all TypeScript files that import RxJS in Angular‘s repos:
org:angular language:typescript filename:*.ts RxJS
And here‘s one for all files that contain "ToDo" comments in a specific path:
in:file ToDo in:path /src/app
According to GitHub, users perform over 5 million code searches per day, so I‘m definitely not alone in relying heavily on this. It‘s so much faster than manually browsing and using editor search when working across many repos and a large team.
Use saved replies for frequent review comments
Whenever I‘m doing code reviews, I find myself making the same comments over and over about style nits, reminders to add tests, update docs, etc. Rather than type them from scratch every time, I use GitHub‘s saved replies feature.
Here‘s a saved reply I use when I need to remind someone to add test coverage:
Please add some unit tests to verify this behavior and prevent regressions. Let me know if you need any help!
I access it with just a couple clicks right within the PR comment box:
It‘s a small thing but the time savings really add up when you‘re doing multiple code reviews per day. It also helps me give more consistent and thorough feedback.
Put GitHub Actions to work
No modern GitHub workflow is complete without GitHub Actions to automate repetitive tasks. Its lightning fast build times and unmatched integration with GitHub make it our CI/CD tool of choice.
We have Actions set up to:
- Run 6 parallel test jobs on every PR, catching bugs before they‘re merged
- Build and deploy our app to staging and prod based on branch name conventions
- Publish our documentation site when the
main
branch is updated - Create release notes and notify stakeholders on new production deploys
Here‘s a snippet of our main PR testing workflow:
name: CI
on: [pull_request]
jobs:
test:
name: Test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js 14.x
uses: actions/setup-node@v2
with:
node-version: 14.x
- run: npm ci
- run: npm test
env:
CI: true
It runs automatically on every PR, giving us confidence in our code quality:
Since adopting Actions, we‘ve measurably increased our code quality while saving over 20 hours of developer time per week on manual testing and deploys. It‘s a huge boon to productivity.
Keep repos lean and clean
Finally, keeping GitHub repos tidy is an often overlooked way to save yourself and your team time. That means:
- Deleting stale branches and tracking down their creators to merge or close them
- Removing old test data, local config files and other cruft from repos
- Carefully considering additions to default branch protection rules and CI
- Documenting and organizing your Issues, Projects, Wikis, and Discussions
- Archiving inactive and deprecated repos rather than leaving them to rot
This keeps the signal-to-noise ratio high and makes it much easier to find what you need in a crunch. We dedicate a small amount of time to repo hygiene tasks in each sprint and it pays dividends.
Browser extensions that supercharge GitHub
Up next are the browser extensions that add must-have features to GitHub.
Refined GitHub
Refined GitHub is the ultimate Swiss army knife extension for developers. Its exhaustive feature list includes:
- Automagically marking merged PRs as read
- Linkifying issue/PR references in code and comments
- Hiding inactive users in your news feed
- Adding a "Yours" indicator to comments you‘ve authored
- Quick-edit files right from any code view
- Dozens of other improvements and tweaks
It‘s maintained by Sindre Sorhus and a team of prolific open source contributors. They‘ve put a tremendous amount of thought and effort into it and it shows. Installing Refined GitHub is a no-brainer.
Octotree
Octotree brings IDE-like project navigation to GitHub with a browsable tree view of the current repo:
It saves a ton of time expanding and collapsing folders compared to native GitHub project browsing. Over 500k users agree and have contributed to its 4.8-star average rating.
GitHub Hovercard
This one does exactly what it says on the tin. When you hover over a user, issue, or repo link, it pops up a quick summary of key details:
No more loading user profiles just to see what they work on or clicking through to get issue status. It supports both public and private repos too.
Isometric Contributions
Ok, this one doesn‘t boost productivity, but it does make your contribution graph a lot more fun to look at:
C‘mon, how cool is that? It‘s the perfect way to spice up your profile and have a bit of fun with all those green squares.
Integrations that tie GitHub into my workflow
As good as GitHub is on its own, it becomes 10x more powerful when integrated with the other development tools my team uses.
Slack
Slack is the de-facto hub for dev teams to discuss projects, share knowledge, and coordinate efforts. Its GitHub integration is fantastic for staying on top of activity without constantly checking GitHub.
My favorite feature is notification filtering. You can choose exactly what events (PRs, comments, releases, etc) and repos you want to be notified about in specific Slack channels or DMs. Here‘s a snippet of our notification settings:
{
"notifications": {
"pulls": {
"opened": true,
"closed": true,
"reopened": true
},
"issues": {
"opened": true
},
"releases": {
"published": true
}
},
"assignees": ["leonardofaria", "SaraVieira"],
"reviewers": ["leonardofaria"]
}
We have a dedicated Slack channel for each major repo where all discussions about issues, PRs, and releases happen. It keeps information organized and searchable and it‘s way faster than hopping between GitHub and Slack all day.
Linear
Linear is a sleek, developer-friendly alternative to Jira for tracking work. GitHub‘s official integration makes it a snap to connect the two.
You can attach commits and PRs directly to Linear tickets and sync status changes between the two systems. For example, here‘s a Linear ticket with an attached PR:
The integration also works in the other direction – Linear‘s UI lets me quickly hop to the GitHub issue or PR for any ticket. And it even posts Linear ticket status changes right to the relevant GitHub issues.
Figma
Connecting Figma to GitHub super-charges collaboration between developers and designers. The official Figma integration automatically posts screenshots and links in PRs and commits whenever Figma files change.
Here‘s an example from our design system repo:
We also use the community-built Figma Fast Feedback integration to sync GitHub threads with Figma comments, ensuring design discussions are always in sync across tools.
VS Code
Like many devs, I‘m practically married to VS Code. Its GitHub Pull Requests and Issues extension lets me review and manage PRs without the context switch of hopping to GitHub proper.
I can browse all open PRs, view diffs, and add code-level comments right within my editor. It‘s a huge time-saver when I‘m in the zone and don‘t want to break flow. Over 2.6 million other VS Code users have discovered the same productivity boost.
Jest
Jest is my go-to testing tool for all things JavaScript. It‘s fast, easy to use, and has great features like snapshot testing. We make heavy use of its GitHub Actions integration to automate our unit and integration tests.
Here‘s a simplified snippet of our Jest action:
steps:
- uses: actions/checkout@v2
- name: Use Node.js 14.x
uses: actions/setup-node@v2
with:
node-version: 14.x
- run: npm ci
- run: npm test
This ensures all tests automatically run on every PR and blocks merging if any fail. In the past year, this has caught hundreds of bugs before they made it to production, more than paying for the time spent writing all those tests.
Mobile apps for coding on the go
While I do most of my GitHub work from my Mac, there are times I need to review a PR or respond to an urgent issue from my phone. In those situations, these mobile apps are lifesavers.
GitHub Mobile
It took a while, but GitHub finally released their own official mobile clients for iOS and Android last year. They‘ve quickly become my preferred way to access GitHub on the go.
The app UI is clean and thoughtfully designed mobile interactions in mind:
It has a slick code review experience that lets me view diffs and add comments entirely from my phone. I can also manage notifications, browse repos, and stay on top of issues no matter where I am.
GitPoint
GitPoint is an open source (of course) GitHub client for iOS built in React Native. It has a very polished UI and goes beyond the basic feature set of GitHub‘s official app.
My favorite power user features are:
- Granular push notifications settings for watching/unwatching threads
- Multi-account switching
- Markdown text editor with preview
- Code syntax highlighting when viewing files
If you want more control over your mobile GitHub experience, GitPoint is an excellent choice.
Additional resources
If you‘ve made it this far, you must be as passionate about productive GitHub workflows as I am! Here are a few of my favorite resources for going even deeper:
- GitHub Actions Tutorial – Excellent YouTube series on automating your workflows with Actions
- Awesome Browser Extensions for GitHub – Giant list of 200+ GitHub browser extensions
- GitHub Power User – Exhaustive guide to becoming a GitHub power user
- protips.md – Official GitHub training kit with tons of useful tips
Go forth and be productive, and don‘t forget to have some fun while you‘re at it!