Left Arrow.Back

Problem Solving

A blueprint of a sci-fi fighter jet.

Notes on problem-solving in software development as a full-stack engineer.

Last TendedSep 2021
PlantedSep 2021
Statusseed
TagsFundamentals
A pencil sketch of a sci-fi fighter jet.

Information

What you are going to do. Gather as much information as possible. This step is the foundation of all work preceding it. The more time you can dedicate to this step, the stronger your understanding of the problem, the more likely a solution will present itself & the better everything proceeding it will go.

"If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and five minutes thinking about solutions."
- Albert Einstein
Illustrated portrait of George Washington
"If we can really understand the problem, the answer will come out of it, because the answer is not separate from the problem."
- Jiddu Krishnamurti
Illustrated portrait of George Washington

Have a face-to-face conversation with the information provider (for example, a Product Owner) if possible. You want to remove any communication barriers that come from other mediums, such as lack of body language in written mediums like issue tickets.

  • Rewrite the information in your own words as a list, sketch pictures. Reading information gets you to 1 level of understanding. Parsing it, in your own language, gets you to the next level.
  • Probe the information. Make any gray areas crystal clear. Consider different states:
    • What do we do for:
      • no data
      • large amounts of data
      • bad data
    • Edge cases (what if a user has JavaScript disabled in their browser).
  • Add a persona of a user to your notes (create 1 if none provided) to build empathy.
  • Write out a list of tasks. Each task should be as small as possible but still, deliver some value. This is not an all-or-nothing game. Delivering something of small value is better than attempting to deliver large value and not making it past the finish line.
  • Order the tasks from biggest value to smallest.
  • Go over these tasks with the provider. Confirm the priority & try to catch anything that may have been misinterpreted.

Cost $

In the current web development space, you might jump straight to React as the choice for creating the user interface. I think the composability that comes from React’s component-based architecture is exceptional for scaling complex projects. You could also argue that in today’s society, requirements rapidly change, and choosing a foundation that can scale is a good choice. But benefits come with costs. React increases your bundle size, increasing download time &, when you consider you should try to keep your page load time under 3 seconds, could cost you users. The goal isn't to build the "perfect solution", it’s about building something that has the best pros to cons ratio given the current information. Be aware of the pros and cons of your choices. Document them.

Take Hacker News as an example. A popular tech news site. It has maintained and grown its readership even despite not adding new features over its lifespan. I would argue that React would have been a poor choice for this site. Due to the requirements of this site, the site’s complexity appears low & the cost of increased bundle size & buy-in of a library outweighs the scalability benefit that React provides.

A blueprint of a sci-fi fighter jet.

Psuedocode

How your going to do it. Explore the existing code base (if there is 1), APIs (use Postman) & documentation. Based on this and the requirements, write out what you need to do in pseudocode. You want a clear idea of where you’re going before you start walking. Do this in a .txt file. No styling, just tabs and letters.

2 people working on a frame of a sci-fi fighter jet in a docking bay.

Code

Using your pseudo code as a step and step guide, start coding.

A sci-fi fighter jet with a ladder attached to it in a docking bay.

Review

Once you finish coding, walk away. After coding for an extended period of time, you can get tunnel vision. Going deep and solving something complicated while making simple mistakes in the surrounding area. Take a break. Go for a walk. Come back to your work with fresh eyes & check:

  • Does it fulfill requirements
  • Is the code:
    • logical
    • documented
    • testable & tested
    • performant
    • scalable
    • secure
Source
A group of people gathered around a sci-fi fighter jet.

PR (pull request)

Submit a PR. To help your team review your work:

  • Size: keep your PR small. The smaller, the easier for reviewers to understand.
  • Title: is a high level description of what's being solved.
  • Description: should guide the reviewer through the code, highlighting related files & grouping them into concepts or problems that are being solved. Use text, images (mockups, screenshots, before & after), videos of it's functionality. Whatever is best to help communicate.
  • Commit Messages: should talk about WHAT changed & WHY. Not HOW – how is in the diff.
  • Draft PR: create a draft PR & read it yourself, comment parts of your to code if you think it's required (also consider putting these comments in the codebase). When you think everything's understandable, Publish your PR & add reviewers.

1 thing I used to do was to start the next task while waiting for reviews. I think this is a mistake. While working on a problem, you build up context. When you start working on another problem, that context begins to decay. You want to maintain that context until the code has been merged. You want to be able to respond quickly and accurately to any comments made on your PR as well as confidently make any required changes.

Source
5 circles connected by 20 random lines with no clear pattern.

Flexibility

In my experience, the above steps don’t occur in order. Rather, you will be jumping back and forth between them as you start building context in your mind. For example, while coding, you build up more understanding of what is required of a task. Time estimations made in the information step may need to be revisited and tasks removed. A better analogy would be to think of them as nodes in a graph rather than steps on a linear line.

Talking with a designer friend, they mentioned that this pattern is similiar in his work. The Double Diamond is a popular design process model. On paper, his team uses this model to solve problems and it pleases management when it comes to reporting. However, the Design Squiggle is a more accurate representation of the process.

2 diamonds on the left & a scribble on the right.