
#### Table of Contents

On our dev team, we are assigned tickets that may be features or bug fixes. I fumbled through the lifecycle of a ticket a few times where I missed things, forgot things, or didn't refactor where I should. After that, I started to put together a checklist that I use for most tickets.

## TL;DR: Here's the list without description:

- [ ] Clean up debugger/trace/etc
- [ ] Clean up logs
- [ ] Search for TODO’s in code
- [ ] Refactor where needed
- [ ] Write tests
- [ ] Make sure test coverage hasn’t gone down
- [ ] Add translate functions
- [ ] Verify on published url
- [ ] Verify in builder
- [ ] Update Jira
- [ ] Notify PMs
- [ ] Create MR

## My Current Checklist

I currently have these as tasks in [Todoist](https://todoist.com/) where I can duplicate for each new ticket. Sometimes I’ll create sub-tasks on a few of these if there is more to be done on that specific issue.

### Clean up debugger/trace/etc

A reminder to delete any `debugger;` or `trace()` (from [MobX](https://mobx.js.org/README.html)) that are left in the code.

### Clean up logs

Remove any `console.log`s and `console.group`s that may still be there.

### Search for TODO’s in code

I like to leave myself notes as I’m working through a feature or bug. They help me remember to resolve any of the todos that are left.

I usually initial my todos TODO JT so I can find them more easily. [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) is a great VS Code extension that has been a big help for this.

### Refactor where needed

There is inevitably some back and forth about how a feature or bug should be solved so they may be some prototype code that can be refactored.

### Write tests

I could write these tests upfront but I haven’t gotten into that habit yet. I try to make sure I catch the cases we need to cover based on newly added or deleted code.

### Make sure test coverage hasn’t gone down

This reminds me to run test coverage and make sure I haven’t just dropped our coverage.

### Add translate functions

This runs a scanner to add any new UI text to our language files for translation. This will eventually be part of the CI but for now, I need to remind myself.

### Verify on published URL

We publish the URLs of completed visualizations. It’s important to make sure that nothing regressed on the running URL and the feature is working correctly.

### Verify in our builder UI

This is our UI where customers build their visualizations. This is to make sure the fix/feature is working as expected. We also need to make sure it didn’t cause any regressions.

### Update Jira

Make sure the ticket get’s moved through the Jira columns. This signifies QA that it’s ready to be tested.

### Notify PMs

Let the project manager and product manager know that the ticket is complete and ready for their review.

### Create MR

Reminder to create a Merge Request so I can start getting feedback from code reviews.

## Checklists FTW

This checklist has helped me be more consistent with my contributions. I would love to hear how others are using checklists or workflows through individual tickets.


Front-End Checklist for Ticket Completion


#### Table of Contents

A big part of me getting things done are the systems that I have in place. Today I'll talk about a few of the systems that I'm currently using.

## Window Management

I'm using [Better Touch Tools (BTT)](https://www.folivora.ai/) to snap my windows to specific areas on my screens. BTT as the ability to snap a window to a quarter or half of the screen by dressing the window to the corner or edge of the screen.

This is incredibly helpful for diffing or creating a dashboard. I use the custom window size and position for a few of my windows. Since I use a 2 screen set up I usually have my code (VS Code), terminal (iTerm2), and dev tools on the larger screen.

![vs code, dev tools, iterm2 on screen](https://res.cloudinary.com/joelmturner/image/upload/q_80/v1569567747/code-screen.png)

## Spaces

I position the rest of my apps on my laptop spaces. I've tried having all the apps in the same space and just using the app switcher to toggle between the apps but it felt a little too unorganized for me.

I now have a screen for certain jobs. Here's the breakdown of my current setup by space.

### Screen 1 (just one space)

1. Code
   1. [VS Code](https://code.visualstudio.com/)
   2. dev tools ([Chrome](https://developers.google.com/web/tools/chrome-devtools), [Firefox](https://developer.mozilla.org/en-US/docs/Tools))
   3. [iTerm2](https://www.iterm2.com/)

### Screen 2 (6 spaces)

1. Personal design ([Figma](https://www.figma.com))
2. Personal
   1. Personal project dev browser
   2. Music ([Spotify](https://www.spotify.com))
3. Communication/Tracking
   1. [Slack](https://slack.com/)
   2. [Todoist](https://todoist.com/r/joelmturner_rooqqg)
4. Git manager ([GitKraken](https://www.gitkraken.com/invite/78cNgZYg))
5. Work project dev browsers
6. Work design (Slack, [Abstract](https://www.abstract.com/))

I love that everything has its place and I can just swipe to that space or use the app switcher for quick access. After about a week of using this setup I knew where everything was without thinking about it. That had sped up my project speed by quite a bit while reducing my mental fatigue.

## [App Launching](#app-launching)

Alfred is my go to for app launching and switching. It might be one of the most used apps on my computer currently.

## Clipboard History

This is one of my favorite parts of Alfred. I use the history all the time. Sometimes I use it to save my text in a form so I don't lose it on some save glitch. Being able to grab multiple pieces from a document and paste each one. It's nice to be able to go back and grab something that I didn't know that I would need again but it's there in the history.

## Expanding Text

Expanding text through keyboard shortcuts can speed up so many redundant tasks.

Until recently I was using TextExpander 4 (just before they moved to a subscription model) and have moved all my shortcuts to Alfred. Since I was already using and loving Alfred for its other powerful features I decided to go all in with it for snippets. One of the expansions that I use the most is for `console.log()`. I can type `2log` and it will prompt me for input and fill in `console.log("prompText", prompText)`.

Simple snippets are a breeze with Alfred. Form snippets are a little bit of work but still easy enough.

## Task List

I use Todoist for my task list. It is one of my most valuable tools in my tool belt. I love that it is seamless on all my devices and it's set up well for [GTD](https://gettingthingsdone.com/). I usually dump/collect my ideas, todos, and projects into the inbox and sort them out later when I'm in the project management zone.

One feature I use quite a bit is the template copy. When I get assigned a new ticket I copy my ticket checklist and rename it with the ticket number. This helps me make sure that I get everything done before handing it off to QA.

![todoist app screen with tasks](https://res.cloudinary.com/joelmturner/image/upload/q_80/v1569567747/todoist-ticket.png#center)

## ZSH/Bash Alias

I have a few helpful aliases set up for quickly switching directories, running tests, starting projects, etc. Here are a few of them:

```bash
alias nis="npm install; npm start"
alias ns="npm start"
alias nt="npm run test"
alias nsstory="npm run storybook"
alias grun="./gradlew bootrun"
alias gtest="./gradlew test"
alias jmt="cd ~/Desktop/Dev/joelmturner"
```

I would love to hear about how your setup works for you. Let me know on <a href="https://mobile.twitter.com/search?q=https://joelmturner.com/blog/productivity-practices-front-end-development">Twitter</a>.


Category: productivity

Front-End Checklist for Ticket Completion

Productivity Practices for Front End Development