Draw the line · FahamLah

The problem

Tap each point on the timeline.

Three teams ask you for a pipeline. One size won’t fit all. Tap each team to meet them.

Try it

Team 1, Mak Siti’s kuih site. Which stations does it need?

Drag a card into a box. Or tap the card, then tap the box.

Try it

Here is Mak Siti’s line. Try the events. Find the one where the van stays parked.

Try the events. Find the one asked for.

What happened on GitHub

Push to mainPull request

Workflow file .github/workflows/site.yml

1name: Kuih site
2on:
3  push:
4    branches: [main]
5  pull_request:
6permissions:
7  contents: read
8jobs:
9  test:
10    runs-on: ubuntu-latest
11    steps:
12      - uses: actions/checkout@v7
13      - run: npm ci && npm run lint && npm test
14  deploy:
15    needs: test
16    if: github.event_name == 'push'
17    runs-on: ubuntu-latest
18    steps:
19      - uses: actions/checkout@v7
20      - run: npm ci && npm run build
21      - run: npm run deploy
22        env:
23          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

The line

Push to main · main

Try it

Team 2, the Kedai Kancil API. Put their stations in order.

First station at the top. Put these in order. Use the arrows, or drag.

Run the tests
Deploy
Build the image
Lint the code
Scan the image
Publish to GHCR

Predict

Someone broke the API’s Dockerfile.

Which station will stop the line? Tap it, then press Run.

What happened on GitHub

Push to main

Workflow file .github/workflows/api.yml

1name: API line
2on:
3  push:
4    branches: [main]
5permissions:
6  contents: read
7  packages: write
8jobs:
9  line:
10    runs-on: ubuntu-latest
11    steps:
12      - uses: actions/checkout@v7
13      - run: npm ci
14      - run: npm run lint
15      - run: npm test
16      - run: docker build -t api:${{ github.sha }} .
17      - name: Scan the image
18        uses: aquasecurity/trivy-action@v0.36.0
19        with:
20          image-ref: api:${{ github.sha }}
21          severity: CRITICAL
22          exit-code: '1'
23      - name: Publish to GHCR
24        run: |
25          echo "$TOKEN" | docker login ghcr.io -u "$GITHUB_ACTOR" --password-stdin
26          docker tag api:${{ github.sha }} ghcr.io/kancil/api:${{ github.sha }}
27          docker push ghcr.io/kancil/api:${{ github.sha }}
28        env:
29          TOKEN: ${{ secrets.GITHUB_TOKEN }}
30      - run: npm run deploy
31        env:
32          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

The line

Push to main · main

Predict

Team 3, Klinik Ceria. They want staging, then production after a manager says go. Which design fits?

Try it

Run Klinik Ceria’s line. When production waits, approve it for the manager, Dr Lim.

Run it. When a job waits for you, check it and approve.

What happened on GitHub

Push to main

Workflow file .github/workflows/release.yml

1name: Clinic release
2on:
3  push:
4    branches: [main]
5permissions:
6  contents: read
7jobs:
8  build:
9    runs-on: ubuntu-latest
10    steps:
11      - uses: actions/checkout@v7
12      - run: npm ci && npm test && npm run build
13      - uses: actions/upload-artifact@v7
14        with:
15          name: site
16          path: dist
17  staging:
18    needs: build
19    runs-on: ubuntu-latest
20    environment: staging
21    steps:
22      - uses: actions/checkout@v7
23      - uses: actions/download-artifact@v8
24        with:
25          name: site
26          path: dist
27      - run: npx wrangler deploy --env staging
28        env:
29          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
30      - run: curl --fail --silent https://staging.example.com/health
31  production:
32    needs: staging
33    runs-on: ubuntu-latest
34    environment: production
35    steps:
36      - uses: actions/checkout@v7
37      - uses: actions/download-artifact@v8
38        with:
39          name: site
40          path: dist
41      - run: npx wrangler deploy
42        env:
43          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

The line

Push to main · main

Check

Good design, or needs work? Swipe each one.

Swipe right for good, left for needs work. Or use the buttons.

1 / 4

Give every team the same six stations, always

You did it!

You can now design a pipeline that fits the team.