In software development sometimes we face a really difficult problem, usually one wrapped up in math. In tackling a dynamic cropping tool we ran into numerous mathematical puzzles along the way. So what do you do when you are blocked by one of these puzzles? Here are a few simple steps that can really help.

1: Talk to a rubber duck

Sometimes simply explaining a problem will give you the perspective you need to solve it. Usually, explaining a problem involves asking a colleague for help and suddenly, mid-explanation, the answer comes to you. This is because we spin our wheels on one aspect of a problem and it keeps us from seeing the bigger picture. The technique works just as well on a rubber duck as it does on a colleague.

2: What are the known and known unknown variables?

Maybe you recognize these words from Donald Rumsfeld, but breaking down the puzzle into these buckets will help you more clearly see the picture and provides a framework for the puzzle pieces you will run into along the way. You aren’t solving the problem in this step, but breaking it down into pieces will provide a solid foundation and a clear vantage point.

3: Visualize the problem

If you're dealing with a lot of variables, it can be helpful to sketch things out with good ol' pen and paper. The cropping tool we've been building is a collection of three components:

1. Cropping the full-sized image.
2. Selecting a subject in the cropped image.
3. Presenting different previews of the cropped image with different aspect ratios.

We had to take into account the cropped image and the image subject (both in terms of the pixels of the full-sized image) while scaling the crop previews using SVGs. Having a visual representation of all this information made it much simpler to think about scale factors and how different values were related. When working with a lot of moving parts (or geometry), never underestimate the power of a simple diagram. Your brain will thank you.

Nicole Zhu

4: Look for a simple problem to solve first

When familiarizing yourself with what you know, look for the more complete areas of the problem to solve first. What can you use as a foundation to solve a simpler problem? In the case of the crop preview tool we have two axis’ to calculate, X and Y. When cropping a photo narrower we have a lot more complete information about the height so we calculated the Y axis of the crop first. After that portion of the problem was solved we turned our attention to the X axis of the crop. Piece by piece the larger problem started to fall into place as we tackled each smaller problem individually.

In a way, this is a lot like rock climbing. Think of your big problem as a cliff face but you’re just trying to find your next hold. Once you anchor yourself onto the holds you have, the next hold suddenly appears within easy reach. Eventually, you’ll make it to the top by just anchoring yourself to what you know and looking for the next step.

5: Guess the answer and work backwards

Sometimes a piece of information may appear to be missing or extremely difficult to solve for. While we didn’t need to use this trick for the cropping tool, it has proven itself valuable in other situations. Once, after getting stuck while working on the perspective property in a CSS parallax mixin and consulting Twitter for help, Brenna O’Brien came up with the answer along with a helpful tip to guess what the value should be. Guessing a value provides a temporary dataset to lean on. If your functions start spitting out numbers similar to the values you guessed, chances are you’re getting close to the right answer. This trick came in handy when doing the gutter math for a constraint-based grid system. After eyeballing the values and plotting them on a graph it became clear what type of equation would be needed for the function to work properly.

6: Repeat

These problems aren’t always easy and they take time. Be patient with the process of slowly working through each step of solving your problem. If you find yourself banging your head against a wall, go back to step one and break the problem down into smaller problems, then break those problems down into even smaller ones. It may not feel like it, but with each tiny step forward you are one step closer to solving the larger problem.