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:

GitHub saved reply demo

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:

GitHub Actions status check on PR

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:

Octotree screenshot

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:

GitHub Hovercard demo

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:

Isometric Contributions screenshot

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:

Linear ticket with GitHub 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:

Figma and GitHub integration

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:

GitHub mobile app screenshot

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:

Go forth and be productive, and don‘t forget to have some fun while you‘re at it!

Similar Posts