Ten Ways to Improve Your Development Workflow on GitHub

1. Drafting Pull Requests

Chapter 8 discusses creating pull requests when you’re ready to have code reviewed and merged into the main branch of a repository. But that’s not the only way to use pull requests. In fact, GitHub employees have long stated that creating a pull request is the beginning of a collaborative conversation. Sometimes it may be appropriate to create a pull request even before you’ve pushed code. It’s possible to do by creating a branch on GitHub and then creating a pull request from that empty branch.

Or maybe you do have some code to push, but you know it’s incomplete. You just want to gather some feedback on your progress without alerting code reviewers that they should give your pull request your full attention with a detailed code review. This is where draft pull requests come in handy. To draft a pull request, click the down arrow on the Create Pull Request button and then select Create Draft Pull Request, as shown in Figure 19-1.

This creates a pull request in draft mode. If you have a CODEOWNERS file (which we cover in Chapter 11) in your repository, a draft pull request will not notify those reviewers until the pull request is marked as ready for review by clicking on the Ready for review button, as shown in Figure 19-2

2. Git Aliases

Chapter 6 introduces the concept of Git aliases. Git aliases are short shell scripts that extend Git and automate common tasks. Chapter 6 includes a Git alias for moving commits from one branch to another.

Git aliases can automate tedious clean-up tasks. For example, the following alias deletes all branches that have already been merged into the target branch. If no target branch is specified, then it assumes the master branch.

[alias]

bclean = “!f() { git branch —merged ${1-master} | grep -v ”

${1-master}$” | xargs git branch -d; }; f”

Aliases can be combined together. For example, before you clean up branches, you may want to switch to the target branch and update that branch from the remote server first.

[alias]

bdone = “!f() { git checkout ${1-master} && git pull

—rebase && git bclean ${1-master}; }; f”

Note how the bdone alias makes use of the bclean alias. You might use the bdone alias right after you push a branch that then gets merged by someone on GitHub. com. After the branch is merged, you can run git bdone, and the alias will switch you back to master, run a git pull, and then run the bclean alias.

Adding aliases you find from elsewhere can be a pain, though. This post by one of the authors describes a quick way to include a bunch of aliases into your Git config file: https://haacked.com/archive/2019/02/14/including-git-aliases/.

3. Run Tests Automatically

Writing automated tests for code, such as unit tests, is an essential skill for pro­fessional software developers. It helps improve the design of code and provides a safety net when making changes to code.

When working with a code base with a lot of tests, it’s not uncommon to forget to run tests often. And even if you do run tests often, it’s a distinct step: Make some changes and then run a command to run your tests.

A great way to improve your development workflow is to automate the test runs. Many tools will automatically run tests when your code changes. Here’s a short list of tools for various platforms:

» NCrunch for .NET

» Guard-test for ruby

» Tsc-watch for TypeScript

» Cargo-testify for Rust

» Wallaby.js for JavaScript

Many of these tools are smart about only running the tests affected by the changed code. That way, every change doesn’t end up running the entire test suite.

4. Take Breaks

One simple effective method for improving your workflow, albeit one that is neglected by many developers, is to take regular breaks. Writing code may feel like a sedentary task, but any activity done over an extended period of time can put a lot of stress on the body. The human head is pretty heavy (some heavier than others). Holding it upright can put a lot of stress on the back and neck. According to DataHand, a maker of ergonomic keyboards:

At the end of an average eight-hour workday, the fingers have walked 16 miles over the keys and have expended energy equal to the lifting of 11/4 tons.

Taking regular breaks to stretch your hands, arms, and back can help you remain healthy and thus more productive.

However, that’s not the only benefit of taking breaks. Many people are fans of the Pomodoro Technique developed by Francesco Cirillo in the late 1980s. This tech­nique breaks work down into intervals, traditionally 25 minutes, with a short break of around 3 to 5 minutes in between. Each interval is known as a Pomodoro, Italian for tomato. Why a tomato? Apparently, Cirillo used a tomato-shape timer in college.

After four pomodoros, you take a longer break (15 to 30 minutes). The benefit of this technique is not only to enforce that you rest your body, but it has the added benefit of helping you maintain focus. The general idea is that during a pomodoro, you are intently focused on work. You generally close all other distractions. You can use some of the longer breaks to do things like check emails and browse the web, if you need to. But during the 25-minute pomodoro, you should be intently focused on work. Practitioners swear by the increased focus and flow the tech­nique encourages. You can find many examples of pomodoro timer applications on the web.

5. Prototype User Interfaces

Whether it’s a web or desktop application, building a user interface can be very time-consuming. And it’s difficult to know how usable an interface will be until you put a human in front of it to try it out.

One tool that saves a lot of time when building an interface is a rapid prototyping tool, such as Balsamiq or Invision. This is by no means an exhaustive list of such tools.

The benefit of these tools is they make it possible to build mock-ups of a Graphical User Interface (GUI) in a short amount of time. Some tools even make it possible to add a bit of interactivity so that you can put the interface in front of a person and run some informal usability tests. You can get a lot of valuable feedback by simply asking people questions like “How would you accomplish a task on this screen? What would you click next?”

Making changes to the interface to respond to such feedback is much faster than if you had written a bunch of code. Once you’ve run through a few iterations with the mock-ups, you can build the actual GUI with more confidence that you’re on the right track.

6. Scaffold Apps with Yeoman

Starting a new application from scratch can be time-consuming. A lot of boiler­plate code goes into setting up a real production application, and the boilerplate is different depending on the type of app and what the app does.

Yeoman is a tool for scaffolding modern web apps. To install it, run the following command:

$ npm install -g yo

This command adds the yo command to your machine. Yeoman works with gen­erators, which are essentially plugins to the yo command, that add support for a given project type. A huge ecosystem of generators is out there.

For example, suppose that you want to build an extension for Visual Studio Code (VS Code). You would start by installing the generator for VS Code:

$ npm install -g yo generator-code

To run the generator, you run the yo command with the generator name:

$ yo code

The generator prompts you to answer some questions about the project to gener­ate, such as specifying a project name. At the end, the generator takes your answers and scaffolds a project folder with a working VS Code extension.

7. Chrome Web Developer Tools

If you develop browser-based applications for the web or for the Desktop via Elec­tron, no tool is probably more useful than the Chrome Web Developer Tools. To launch these tools, use the shortcut ^ + Option + I on the Mac or Ctrl + Shift + I on Windows.

You can also launch the developer tools by right-clicking on an element of any web page and choosing the Inspect menu option. When the developer tools open, select that element in the Elements tab.

The Elements tab of the developer tools allows you to explore and manipulate the DOM. You can also manipulate the CSS. This provides a nice way to debug CSS problems because it gives you instant feedback on your CSS changes.

The Console tab lets you run JavaScript commands in the context of the current web page.

The Sources tab lists all the scripts that are loaded in the context of the page. This list can be eye-opening when you go to a website you use often and look at this tab. A given web page can have a large number of scripts running.

The Network tab shows all the network requests that were made to render the page, the size of the requests, how long they took, and when they happened in relation to each other. This information is useful for debugging issues where a large request is causing delays in rendering a page.

The Performance and Memory tabs are useful for profiling execution time and memory usage of a page.

8. StackOverflow

StackOverflow.com is a question and answer website for developers. Since its cre­ation in 2008, it’s had a huge impact on the developer community. A big part of its popularity is due to the gamification techniques it employs to maintain high- quality questions and answers.

For example, questions and answers can be up voted and down voted. Answers that receive the most up votes are displayed directly under the question so that people who find the question later don’t have to wade through a ton of answers to find the best answer. If the poster of a question accepts an answer, that answer floats to the top (unless the poster also answered the question), regardless of the number of upvotes. This setup sometimes causes a situation where a better answer with more up votes is displayed before the accepted answer.

Asking questions, answering them, and having questions or answers voted up all contribute to your reputation points. As your reputation points increase, you gain more privileges on StackOverflow, such as being able to edit questions and answers to collectively improve them like a wiki.

If you’re stuck on a programming task, StackOverflow is often a good place to start searching for an answer to your question.

9. Code Analysis Tools

A wide range of tools can analyze code for potential problems and potential improvements. When used properly, these tools can save you a lot of time and headache.

Linters are a class of tools named after a Unix utility named Lint that analyzes C code to flag bugs, style errors, and potential problems without having to run the code. While Lint is the original tool, many linting tools exist for different pro­gramming languages, such as JSLint for JavaScript and ruby-lint for Ruby.

Static analysis tools are similar to linters but work against statically typed lan­guages. These tools take advantage of type information in the source code to find issues in the code that aren’t syntax errors (which the compiler would already catch) but may cause problems down the road. For example, static analysis tools can flag code that may exhibit poor performance in certain situations. Examples of static analysis tools include FxCop for .NET and Coverity for Java.

Some tools surface metrics about your code that may be correlated to quality, such as measuring cyclometric complexity. Cyclometric complexity refers to the num­ber of different execution paths through a piece of code. A method with a very large cyclometric complexity can be hard to understand and prone to bugs.

Some tools, such as Code Climate Quality, are available in the GitHub Marketplace and can perform automated code reviews looking for common problems in code. This tool can identify files and sections of code that are changed frequently. Frequent changes often indicates that the code may have quality issues. Under­standing where your code churns often helps you focus your attention on changes to that code.

10. Project Boards

Project boards are a useful way to visualize the progress and tasks for a project. Chapters 3 and 4 walk through setting up a project board along with project auto­mation for a repository. For a given repository, a project board serves as a com­mon source of truth. Everyone can look at a project board and have a good idea of the overall progress at a glance.

However, you may consider using individual project boards that are not associated with a single repository as a means of managing your overall set of tasks on GitHub. You can go to https://github.com/new/project to create a new personal project board.

Project boards come with a limited set of automations. To really customize your workflow, you may want to create a GitHub Action (see Chapter 14). With GitHub Actions and the GitHub API, it’s possible to create project board automations for nearly any workflow you can think of.

GitHub project boards are not the only option for a Kanban-style board that works with GitHub. Trello (see Chapter 14) is another option. A few other options with deeper integration with GitHub include ZenHub, waffle.io, and HuBoard.

Regardless of the one you pick, a good project board is a helpful addition to any software developer’s workflow.

Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.

One thought on “Ten Ways to Improve Your Development Workflow on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *