Examples

Step 1:

Here we go! Example time! Alice, maintainer of an awesome open-source react app needs a new loading spinner. So, she uploads a new tak to code-relay:

export const LoadingSpinner = () => {
  /**
   * @Task
   *      Create a loading spinner
   *      using css animations
   */
};

Simple enough! She goes on to to work on something else and let's code-relay handle the rest

Step 2:

Bob emails mailto:contribute@coderelay.io and code-relay assigns him this task. He takes a quick look at it and divides it into two smaller tasks. 1. Making a circle. 2. Making the circle spin. Then sends it on its way.

export const LoadingSpinner = () => (
  /**
   * @Task
   *      Make this circle spin
   *      using css animations
   *
   */
  <Circle />
);

export const Circle = () => {
  <div>
    {/**
     * @Task Create a circle
     */}
  </div>;
};

Step 3-A:

Code-relay assigns making the circle to Christine, who decides to make the circle using some css styles.

export const LoadingSpinner = () => (
  /**
   * @TaskInProgress:
   *      Make this circle spin
   *      using css animations
   */
  <Circle />
);

export const Circle = () => (
  <div
    style={{
      width: 25,
      height: 25,
      backgroundColor: "#ff453a",
      borderRadius: "50%",
    }}
  ></div>
);

Output:

Step 3-B:

At the same time as Christine, Doug is assigned making the circle move. He creates an animation in css, but it doesn't turn out like he hoped. It's moving in a diamond, instead of a circle. So, he creates a new task to fix this and sends it along.

jsx

export const LoadingSpinner = () => (
  <div className="spin">
    <Circle />
  </div>
);

export const Circle = () => (
  /**
   * @MergeTask Replace with a circle
   */
  <div
    style={{
      width: 15,
      height: 15,
      backgroundColor: "#ff453a",
    }}
  ></div>
);

css

.spin {
  animation: 3s linear 0s infinite
    spinner;
}

@keyframes spinner {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(25px, 25px);
  }
  50% {
    transform: translate(0, 50px);
  }
  75% {
    transform: translate(-25px, 25px);
  }
  /** 
   * @Task
   *    Make it so it spins in a 
   *    circle instead of a diamond
   */
}

Output:

Step 3-B part 2:

Emily, takes a look at the code and finds a fix.

jsx

export const LoadingSpinner = () => (
  <div className="spin">
    <Circle />
  </div>
);

export const Circle = () => (
  /**
   * @MergeTask Replace with a circle
   */
  <div
    style={{
      width: 15,
      height: 15,
      backgroundColor: "#ff453a",
    }}
  ></div>
);

css

.spin {
  animation: 3s linear 0s infinite
    spinner;
  min-width: 50px;
  min-height: 50px;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Output:

Step Merge 3-A and 3-B:

Code relay assigns the task of merging our two branches to Fred. He leaves the css unchanged and merges the .jsx. He decides everything looks good, but the spinner is missing more circles, so he makes a task for that.

export const LoadingSpinner = () => {
  /**
   * @Task Increase number of dots
   */
  return (
    <div className="spin">
      <Circle />
    </div>
  );
};

export const Circle = () => (
  <div
    style={{
      width: 15,
      height: 15,
      backgroundColor: "#ff453a",
      borderRadius: "50%",
    }}
  ></div>
);

Output:

Step 4:

Grace adds 4 more circles with and calls it a day!

export const LoadingSpinner = () => (
  <div
    style={{
      width: 50,
      height: 50,
      position: "relative",
    }}
  >
    {[0, 1, 2, 3, 4].map((index) => (
      <div
        className="spin"
        style={{
          width: 50,
          height: 50,
          position: "absolute",
          animationDelay: `${
            index / 1.65
          }s`,
        }}
        key={index}
      >
        <Circle />
      </div>
    ))}
  </div>
);

export const Circle = () => (
  <div
    style={{
      width: 15,
      height: 15,
      backgroundColor: "#ff453a",
      borderRadius: "50%",
    }}
  ></div>
);

Output:

Done. That's the life of one code-relay