From eea6ed74d5e190a865cb6251d5b7ba9b08bba4a8 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Thu, 10 Apr 2025 22:17:41 +0200 Subject: [PATCH 1/5] typo: add plural --- src/modules/pull-system/FlowArticle.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/pull-system/FlowArticle.vue b/src/modules/pull-system/FlowArticle.vue index 2c9a11b..3f9ddfc 100644 --- a/src/modules/pull-system/FlowArticle.vue +++ b/src/modules/pull-system/FlowArticle.vue @@ -230,7 +230,7 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {

Do you mind comparing more projects? What happens when we simulate 1000 - news mobile app! Are patterns the same? + news mobile apps! Are patterns the same?

From f8abdeb4ad06afb65eef6d5192e78a3bba430438 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Thu, 10 Apr 2025 22:26:48 +0200 Subject: [PATCH 2/5] article: better introduction --- src/modules/pull-system/FlowArticle.vue | 68 ++++++++++++------------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/src/modules/pull-system/FlowArticle.vue b/src/modules/pull-system/FlowArticle.vue index 3f9ddfc..15d2ab2 100644 --- a/src/modules/pull-system/FlowArticle.vue +++ b/src/modules/pull-system/FlowArticle.vue @@ -121,55 +121,50 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, { coding, and ensuring the product goes live.

- First, what is a feature? A feature is a software component that - provides a functionality for the user. Examples include the ability to - read articles, share content, or use the app offline. In our simulation, - a feature is represented as follows: + First, let's take a moment to define the most important element: the + feature. A feature is a software component that provides a functionality + for the user like the ability to read articles, share content, or use + the app offline. In our simulation, a feature is represented as follows:

Each feature starts with an intention: "{{ feature.name }}". This defines what we will add to the mobile app. + >". "{{ feature.leadTime }}d" indicates the + number of days teams work on the feature. The goal is to minimize this + number and deliver features as quickly as possible. "" shows the number of defects found in the feature during its workflow + (For simplicity, we assume teams can identify all defects, and no + defective features are delivered). Any defect must be reworked by the team that caused it.

+

It takes one day to each team to complete their part.

-

- {{ feature.leadTime }}d indicates the - number of days teams work on the feature. The goal is to minimize this - number and deliver features as quickly as possible. -

-

- - shows the number of defects found in the feature during its workflow. - For simplicity, we assume teams can identify all defects, and no - defective features are delivered. Any defect must be reworked by the - team that caused it. -

-

- Okay! We have 20 features to deliver. Each team takes one day to - complete their part for a feature. -

-

Every day, you can choose between two strategies:

-
    -
  1. Push system
    2. -
  2. Pull system
    3. -

- In this article, we’ll examine how these strategies affect efficiency - and quality. Let’s explore each one! + Okay! We have 20 features to deliver and every day, you can choose + between two strategies:

-

The Push System: Start as Many Features as Possible

+

+ 1. The Push System: Start as Many Features as + Possible +

In the push system, we aim to maximize the time teams spend working on the product. This ensures no downtime, as everyone always has tasks to complete.

-

The Pull System: Produce Features When the Next Team Needs Them

+

+ 2. The Pull System: Produce Features When the Next + Team Needs Them +

Instead of pushing features forward, the pull system waits until the next team is ready. This approach acknowledges that the ideal "push @@ -177,9 +172,9 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, { readiness, we avoid creating a backlog of pre-prepared features.

- To implement this, we introduce "blue bins" as safety stock. These bins - ensure teams always have work ready to process without delays but we - stop whenever blue bins are full. + We introduce "blue bins" as safety stocks: these bins ensure teams + always have work ready to process without delays + but teams stop whenever blue bins are full.

+
+

All set? Let's make this app!

+

- Well, what do you think? Not so simple... What are the insights from - these strategies? Here are some observations: + Well, what do you think? Not so obvious... What can we say? Here are + some observations:

  1. From 857969163fa048c5948f24546007f54b1a641002 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Thu, 10 Apr 2025 22:31:23 +0200 Subject: [PATCH 3/5] fix: release done animation closer to the title --- src/modules/pull-system/feature/FeatureStep.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/pull-system/feature/FeatureStep.vue b/src/modules/pull-system/feature/FeatureStep.vue index a39761d..4286fa3 100644 --- a/src/modules/pull-system/feature/FeatureStep.vue +++ b/src/modules/pull-system/feature/FeatureStep.vue @@ -15,7 +15,11 @@ const featuresInProgress = computed(() => props.features.filter((feature) => feature.status === 'doing') ) const featuresDone = computed(() => - props.features.filter((feature) => feature.status === 'done') + props.step.title === 'Release' + ? props.features + .filter((feature) => feature.status === 'done') + .sort((a, b) => (a.leadTime > b.leadTime ? -1 : 1)) + : props.features.filter((feature) => feature.status === 'done') ) const hasFeaturesInProgress = computed( From 75541a0764accce5af078f376e509c068028b491 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 26 Apr 2025 11:23:20 +0200 Subject: [PATCH 4/5] copy to clipboard instead of downloading an image --- index.html | 2 +- main.ts | 20 ++++++++++++++------ team-leader.html | 2 +- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 684c642..0d13844 100644 --- a/index.html +++ b/index.html @@ -161,7 +161,7 @@

    Screenshot the house: - +

    diff --git a/main.ts b/main.ts index 33b33b6..4ccf5cd 100644 --- a/main.ts +++ b/main.ts @@ -83,12 +83,20 @@ const screenshotHouseButton = document.querySelector('#screenshot-house') if (screenshotHouseButton) { screenshotHouseButton.addEventListener('click', async () => { const house = document.querySelector('#thinking-people-system') - if (house) { - const png = await domToPng(house) - const a = document.createElement('a') - a.href = png - a.download = 'thinking-people-system.png' - a.click() + if (!house) { + return + } + + const png = await domToPng(house) + + try { + const response = await fetch(png) + const blob = await response.blob() + await navigator.clipboard.write([ + new ClipboardItem({ [blob.type]: blob }) + ]) + } catch (error) { + console.warn(error) } }) } diff --git a/team-leader.html b/team-leader.html index d722b50..be07cce 100644 --- a/team-leader.html +++ b/team-leader.html @@ -152,7 +152,7 @@

    Screenshot the house: - +

    From e9b183f1dd09d5e3736c358ae87fbcca108cbcfb Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Thu, 22 May 2025 00:04:16 +0200 Subject: [PATCH 5/5] fix: compose with focus and text hide --- index.css | 29 +++++++++++++++++++++++++---- main.ts | 4 +++- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index f99f7d5..1301224 100644 --- a/index.css +++ b/index.css @@ -30,6 +30,22 @@ li { color: var(--primary-color); } +.no-focus.text-hide, +.no-focus.text-hide a, +.no-focus.text-hide a:visited, +.no-focus.text-hide a:focus, +.no-focus.text-hide a:focus-visible { + color: var(--primary-color-no-focus); +} + +.focus.text-hide, +.focus.text-hide a, +.focus.text-hide a:visited, +.focus.text-hide a:focus, +.focus.text-hide a:focus-visible { + color: var(--color); +} + .customer-satisfaction-roof-parent { filter: url(#round); /* Making the triangle fit the rest of the house */ @@ -181,7 +197,14 @@ details.hud li { .raibow { text-decoration: underline; - background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff); + background: linear-gradient( + to right, + #6666ff, + #0099ff, + #00ff00, + #ff3399, + #6666ff + ); -webkit-background-clip: text; background-clip: text; color: transparent; @@ -189,9 +212,7 @@ details.hud li { background-size: 400% 100%; } - @keyframes rainbow-animation { - 0%, 100% { background-position: 0 0; @@ -200,4 +221,4 @@ details.hud li { 50% { background-position: 100% 0; } -} \ No newline at end of file +} diff --git a/main.ts b/main.ts index 4ccf5cd..3fede01 100644 --- a/main.ts +++ b/main.ts @@ -50,7 +50,9 @@ if (focusElements.length > 0) { focusable.classList.contains(element) ) - if (!elementToFocus) { + if (elementToFocus) { + focusable.classList.add('focus') + } else { focusable.classList.add('no-focus') } })