The Developer’s Escape Hatch: Using Stash & Pop to Manage Context Switching in GitKraken

Every developer has had this experience. You’re knee-deep in a feature branch, you’re working through code that isn’t compiling, and you get the dreaded Teams message, “Something is broken in prod…” You’ve got a bunch of uncommitted changes, and for just a brief second, you panic. You can’t just keep the code changes uncommitted. You also don’t want to commit broken code.

Welcome to the two buttons in GitKraken that I call the escape hatch, Stash and Pop

What is Git Stash, Really?

Think of Git Stash as a desk drawer that you shove all of your half-finished work into just before some new clients walk in the door.

What Git Stash actually does under the hood is temporarily shelve uncommitted (both staged and unstaged) changes so your working directory stays clean. You can create a brand-new working directory for your hotfix.

Why Context Switching is the Real Enemy

We’ve all dealt with various degrees of context switching or cognitive load. The kind that forces us to juggle two (or more) tasks at once mentally. Usually, both will suffer. Stash is not just a technical tool; it lets your brain fully commit to one thing at a time, because a hotfix that needs to go to production as soon as possible generally needs our full attention.

Where GitKraken Changes the Experience

In the Git CLI, stash is very functional, but entirely text-based. Some of the core commands are:

The CLI is obviously very powerful, but there are genuine friction points, especially when you’re under the stress of a hotfix. You have to remember the stash@{n} index, you can’t easily see what’s inside a stash without an extra command, and if you have several stashes piling up (because THAT’S never happened), managing them means running git stash list all the time just to reorient yourself.

In GitKraken, all of this is surfaced visually.

  • A Stash button sits in the top toolbar where one-click captures everything
  • A Pop button sites right next to it for instant one-click restore and remove
  • Every stash appears as another node in the Commit Graph, so it’s easy to see and remember when that stash was created and what branch it came from
  • All stashes are listed in the Left Panel under a dedicated Stashes section, so no git stash list required
  • Right-clicking any stash gives you a full context menu (a future short article about Share stash as Cloud Patch is coming)
  • GitKraken even supports partial stashes. You can right-click individual files and stash only that change, then apply them back one file at a time, something that requires more complex combinations in the CLI

The Git CLI gives you complete control but demands that you hold a lot of state in your head. GitKraken shows you quickly and easily, all of the state in the UI, reducing your context shifting and making these changes, something you see rather than remember.

The CLI doesn’t hide anything from you; it just doesn’t show anything to you either.

Pro Tips for Stash Power Users

  • Name your stashes: stash@{3} means nothing three days later. A name like “auth-refactor-half-done” does. Also, starting with GitKraken version 11.1, you can ask AI to auto-create your stash messages!
  • Use partial stashes: when only part of your work needs to move. Stashing everything when only one file is relevant, is overkill
  • Apply, don’t always pop: if you’re unsure whether the stash will happen cleanly, use Apply first so you can still have the stash as a fallback (remember Pop applies and removes the stash, whereas Apply does not remove the stash)
  • Hide stashes from the commit graph: if you’re like me and want your commit graph as clean as possible, hide them. It’s still there, just not in the graph

Stash and pop won’t fully protect your flow state; nothing can. But they remove one of the most common reasons developers either lose work or leave a trail of WIP commits they’ll have to clean up later (you DO clean these up…right?). In GitKraken, the whole process takes about 3 seconds.

Add an Alias to MacOS Terminal

photo of a laptop keyboard
Photo by Gabriel Heinzer on Unsplash

If you find yourself typing in cd… a lot in MacOS Terminal and you’re running zsh, you can add a shortcut, or alias to your .zshrc resource file. Here’s how:

From a new terminal window, type

nano ~/.zshrc

This will open that resource file in nano and it’s ready for editing.

Scroll all the way to the bottom of the .zshrc file using your down arrow key.

Once at the bottom we’re going to add the alias.

For instance, when I open a Terminal window, I usually want to navigate to my repos on my local machine, which resides in an external drive called “ExternalOne” in a folder called “code”. So my alias would look something like this:

alias repos="cd /Volumes/ExternalOne/code"

So I’m setting up a shortcut to type into Terminal from now on called “repos” that will automatically take me to that code folder on the external drive.

Now once you’ve gotten your alias typed in, you’ll want to type CTRL-X, ‘y’ at the prompt, and then hit enter. Once you’ve successfully saved your changes to the resource file, you’ll want to make sure to reload it so your alias will take effect. Next type in

source ~/.zshrc

If you didn’t mistype your alias line, it should reload the Terminal window using the new changes. Now you can just type in ‘repos’ to take you to that external code folder!

GitKraken or How I Learned to Love Git

I’ll be honest. I don’t have a lot of experience in git.

Most of my experience, for one reason or another is with SVN and TFS.

At my day job, we made the decision to move from TFS to Git (specifically GitHub) and the transition hasn’t been easy….to say the least.

We also decided to utilize branching when we moved to GitHub, which we never did in TFS. I’m not sure why we never used branching with TFS…it wasn’t my choice or decision to make.

I realize that a lot of git gurus are command line all the way but I’m an extremely visual person. In order for me to complete my absorption of knowledge, it helps tremendously to see a visual representation of something. This can take many forms, PowerPoint presentations, flowcharts, diagrams, etc.

Enter GitKraken.

As a beginner GitHub user, GitKraken has been invaluable in understanding Gitflow (which we decided to implement for all the devs). Setting it up per repo is really easy:

gitkraken interface showing gitflow

GitKraken does an awesome job of showing you visually, what’s going on with your repo:

gitkraken interface showing repo status as a timeline

You can see in the screenshot above, that I’m working with two branches currently, main and develop. This is a solo project so Gitflow is kind of overkill in this instance. I always have develop checked out and work from that locally. When I’m done and do a commit, I commit to origin/develop and then submit a PR to origin/main from origin/develop. This is a flow that works well for me when I’m working on solo projects.

As of version 7.6.0 of GitKraken, I can also merge my PRs right inside of the client too.

GitKraken has made the move from TFS to GitHub much smoother for me and my team and I cannot imagine doing anymore software development moving forward, without it.

I plan on posting a lot more of my love for GitKraken soon…

useState props

const [activeIndex, setActiveIndex] = useState(null);

Whenever you call useState in React, you get back two elements. The first value will always be its most recent state and the second value is the value you want to set state to.

The const above is called array destructuring and in our particular instance, it’s used to give us direct access to the first element (state) and second element (set state) of useState.

It shortcuts having to do the below:

const colors = ['red', 'green'];
const redColor = colors[0];
const greenColor = colors[1];

And you can shortcut the above by simply doing:

const [redColor, greenColor] = colors;

Which is assigning the first Element in colors, to the variable redColor and the second element in colors, to the variable greenColor.

There are three steps to setting state in Class Components and in Functional Components.

Class Component

// Initialize in the constructor
state = { activeIndex: 0 };

// Reference
this.state.activeIndex;

// Update
this.setState({ activeIndex: 5 });

Functional Component

// Initialize
const [activeIndex, setActiveIndex] = useState(0);

// Reference
activeIndex;

// Update
setActiveIndex(5);

Redux Reducers

In my current self directed learning path about React, I’m wrapping my head around Redux and how it’s used to manage state.

In C# we have an Aggregate() method that takes in a collection and spits out a single value. For instance:

IEnumerable<int ints = new List<int> { 4, 8, 12, 16 };
int result = ints.Aggregate((sum, val) => sum + val);

Can you guess what the value of result is? If you guessed (or knew) 40, you’d be correct.

  • First iteration: 4 + 8, returns 12
  • Second iteration: 12 + 12 returns 24
  • Third iteration: 24 + 16 returns the final 40

With regard to state and where Redux comes in, reducers take in an initial state, and an action, to determine the new state. Redux helps us streamline keeping track of state, so that it’s consistent across our apps. The below code snippet is from a reducer I created called alert.js. The import on the first line is simply importing the SET_ALERT and REMOVE_ALERT constants from my types.js file.

I create another constant and set my initialState equal to an empty array. The reducer function takes two params, current state & action and returns a new state based on action.type and action.payload.

import { SET_ALERT, REMOVE_ALERT } from '../actions/types';

const initialState = [];

export default function (state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SET_ALERT:
      return [...state, payload];
    case REMOVE_ALERT:
      return state.filter((alert) => alert.id !== payload);
    default:
      return state;
  }
}

An action is an object that contains two key/value pairs, type & payload. In Redux Reducers, action.type is required and action.payload is optional.

A core tenet of Redux is that it should never mutate state, so you see the use of the spread operator ...state which makes state immutable.

Stateful Components in React

I haven’t jumped into state in functional components yet. But I am learning about state in class components.

When building a class in React, it’s helpful to extend (in C# we call this an override (inheritance)) React.Component. In order to pass arguments (props) to this class though, you must pass the props into the class constructor as well as into the parent (React.Component). That’s accomplished by using the super keyword.

The nice thing about state in a React class, is that it’s asynchronous out of the box. We can set off a task in the constructor and when you have a callback function that’s tied to this.setState, React will automatically recall the render method and update the state of that component. See my example below:

screenshot of a react application showing stateful components

How To Start with src and tests Folders in your Solution File in VS2019

Organizing your code into src and tests folders on GitHub seems to be getting more and more popular. However, in Visual Studio 2019, it’s not very easy to accomplish. Here is how I do it.

Firstly, let me show you the final outcome:

screenshot of visual studio solution explorer, showing the file layout

To get there requires some Command line. First open a Command window and change to your local root folder for your application. In my case it’s C:\Code\NameOfCoolApp.

Once in the root folder of your application, type this in:

dotnet new sln

You should get something similar to The template “Solution File” was created successfully.

Next, we’re going to stub out one of your projects in the solution, so use whatever your naming convention is here. In my case, we’re going to stub out the Domain project. So from that same command window, type:

dotnet new classlib -o src/NameOfCoolApp.Domain

You should then see something like The template “Class Library” was created successfully and ending with Restore succeeded.

Next, I add a stubbed Unit Test:

dotnet new mstest -o tests/Domain.UnitTests

Following the successful message, we’re then going to add the above two items to the Solution by starting with:

dotnet sln add src/NameOfCoolApp.Domain

And finally:

dotnet sln add tests/Domain.UnitTests

From here you should be able to open the Solution file with VS2019 and be good to move on with the rest of your project within Visual Studio.

.NET Core 3.1 Missing From Target Framework in VS2019

I cloned a repository that was targeting .NET Core 3.1. Trying to run it in VS 2019 ended with this error:

The current .NET SDK does not support targeting .NET Core 2.1. Either target .NET Core 2.0 or lower, or use a version of the .NET SDK that supports .NET Core 2.1.

I looked at the properties of the project and I couldn’t see anything higher than .NET Core 2.2 in my Target frameworks list.

screenshot of .net target frameworks

I spent more hours that I care to admit to here. I checked that .NET Core 3.1 both x64 and x32 were installed. They were.

I checked that C:\Program Files\dotnet was in my Path. It was.

It turned out that I had a global.json file in my root C:\Code folder, where I have all my local code projects, that was limiting my targeting of any child folders to 2.2.

screenshot of the contents of a global.json file

I removed that global.json file and voila! I can now see .NET Core 3.1.