julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:jcalixte/tps

Browse Source
This commit is contained in:
Julien Calixte
2025-05-23 10:42:56 +02:00
parent 8dc3dd4762 e9b183f1dd
commit c360506a73
6 changed files with 83 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.css
View File

@@ -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;

2
index.html
View File

@@ -161,7 +161,7 @@
</ul>
<p>
Screenshot the house:
<button class="button" id="screenshot-house">Screenshot</button>
<button class="button" id="screenshot-house">copy to clipboard</button>
</p>
</details>
<svg class="round-svg" xmlns="http://www.w3.org/2000/svg">

24
main.ts
View File

@@ -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')
}
})
@@ -83,12 +85,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)
}
})
}

70
src/modules/pull-system/FlowArticle.vue
View File

@@ -121,55 +121,50 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
coding, and ensuring the product goes live.
</p>
<p>
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:
</p>
<FeatureItem :feature="feature" />
<p>
Each feature starts with an intention: "<code>{{ feature.name }}</code
>". This defines what we will add to the mobile app.
>". "<span class="numeric">{{ feature.leadTime }}d</span>" indicates the
number of days teams work on the feature. The goal is to minimize this
number and deliver features as quickly as possible. "<QualityIssue
class="inline"
:quality-issue="feature.qualityIssue"
/>" shows the number of defects found in the feature during its workflow
<em
>(For simplicity, we assume teams can identify all defects, and no
defective features are delivered)</em
>. Any defect must be reworked by the team that caused it.
</p>
<p>It takes one day to each team to complete their part.</p>
<!-- [complexity]
<p>
<span class="numeric">({{ feature.complexity }})</span> is the
complexity of the feature. The more complex a feature is, the more
chance we introduce a defect.
</p> -->
<p>
<span class="numeric">{{ feature.leadTime }}d</span> indicates the
number of days teams work on the feature. The goal is to minimize this
number and deliver features as quickly as possible.
</p>
<p>
<QualityIssue class="inline" :quality-issue="feature.qualityIssue" />
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.
</p>
<p>
Okay! We have 20 features to deliver. Each team takes one day to
complete their part for a feature.
</p>
<!-- [dps] <p>Each day, you can choose between 3 strategies:</p> -->
<p>Every day, you can choose between two strategies:</p>
<ol>
<li><PushSystemIcon /> Push system</li>
<li><PullSystemIcon /> Pull system</li>
</ol>
<p>
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:
</p>
<h3>The Push System: Start as Many Features as Possible</h3>
<h3>
1. <PushSystemIcon /> The Push System: Start as Many Features as
Possible
</h3>
<p>
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.
</p>
<h3>The Pull System: Produce Features When the Next Team Needs Them</h3>
<h3>
2. <PullSystemIcon /> The Pull System: Produce Features When the Next
Team Needs Them
</h3>
<p>
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.
</p>
<p>
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
<em><strong>but</strong></em> teams stop whenever blue bins are full.
</p>
<!-- [dps]
<h3>Problem solving: no production, just reflection</h3>
@@ -191,12 +186,15 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
team learn and start to be extremely good at problem solving.
</p> -->
</div>
<div class="text">
<p>All set? Let's make this app!</p>
</div>
<FlowDashboard class="above" />
<FeatureSteps alias="playground" />
<div class="manual-simulation text">
<p>
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:
</p>
<ol>
<li>
@@ -230,7 +228,7 @@ const createdAt = new Date('2025-01-08').toLocaleDateString(undefined, {
</p>
<p>
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?
</p>
</div>
<SimulationControls type="multiple" />

6
src/modules/pull-system/feature/FeatureStep.vue
View File

@@ -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(

2
team-leader.html
View File

@@ -152,7 +152,7 @@
</ul>
<p>
Screenshot the house:
<button class="button" id="screenshot-house">Screenshot</button>
<button class="button" id="screenshot-house">copy to clipboard</button>
</p>
</details>
<svg class="round-svg" xmlns="http://www.w3.org/2000/svg">