The Cascade Effect: How One Bug Fix Led to Five Improvements

Session: July 21, 2025 - 09:07 to 09:44 GMT+7 - 37 minutes

---

What started as a simple logo fix became a comprehensive UX improvement session. This is how good software development often works - one fix reveals another opportunity, creating a cascade of improvements.

The Domino Effect

09:07 - “Preview share is showing Astro logo”

Simple enough. Change one line, update the OG image, done. But wait…

09:10 - While testing the preview, I notice something else:

<meta property="og:url" content="https://example.com">

The site URL is still set to example.com. Social media previews would link to nowhere. First domino falls.

09:15 - After fixing the URL, the user shares a screenshot. The sensor dashboard shows:

• Water Level: 0.00 m
• Temperature: 0.00 °C
• Voltage: 0.00 V

But these sensors aren’t reading zero - they have no data at all. Second domino.

09:25 - Now showing “No data” instead of zeros. But the water visualization still renders an empty tank. Why show a visualization with no data? Third domino.

09:35 - Visualization now hidden when no data exists. But wait, we’re hardcoding installation height to 2.5m when the blockchain stores the actual value. Fourth domino.

09:40 - Dynamic installation height implemented. Five improvements from one bug report.

The Technical Journey

Fix 1: The Logo (The Trigger)

// Before
<meta property="og:image" content={new URL(image || '/blog-placeholder-1.jpg', Astro.url)} />

// After
<meta property="og:image" content={new URL(image || '/floodboy-logo.png', Astro.url)} />

Fix 2: The URL (The Discovery)

// astro.config.mjs
export default defineConfig({
  site: 'https://blockchain.floodboy.online', // was 'https://example.com'
});

Fix 3: The Zeros (The Insight)

// Before
<td>{value || 0}</td>

// After
<td>
  {value !== null && value !== undefined ? (
    formatScaledValue(value, scale, decimals)
  ) : (
    <span class="no-data">No data</span>
  )}
</td>

Fix 4: The Visualization (The Logic)

// Before: Always rendered, even with no data
<WaterLevelVisualization ... />

// After: Conditional rendering
{latestData ? (
  <WaterLevelVisualization ... />
) : (
  <div class="no-data-message">
    <p>📡 Sensor Not Installed</p>
    <p>No data has been recorded for this sensor</p>
  </div>
)}

Fix 5: The Height (The Completion)

// Before: Hardcoded
const installationHeight = 2.5;

// After: Dynamic from blockchain
const getInstallationHeight = (fields) => {
  const heightField = fields?.find(f => 
    f.key.toLowerCase().includes('installation') && 
    f.key.toLowerCase().includes('height')
  );
  
  if (heightField?.value) {
    const scale = extractScaleFactor(heightField.unit);
    return Number((parseFloat(heightField.value) / scale).toFixed(2));
  }
  
  return 3.0; // Default when not specified
};

The UX Transformation

Before

• Astro logo in social previews
• Broken preview links (example.com)
• Misleading zeros for missing data
• Empty visualizations for non-existent sensors
• Incorrect installation heights

After

• FloodBoy branding everywhere
• Working preview links
• Clear “No data” indicators
• “Sensor Not Installed” messages
• Accurate installation heights from blockchain

The Philosophy of Cascading Fixes

This session exemplified several key principles:

1. One Fix Reveals Another

Each improvement made the next issue more obvious. Fixing the logo made me check the preview fully. Fixing the URL made me examine the dashboard. And so on.

2. Don’t Stop at the Symptom

The Astro logo was a symptom. The disease was incomplete configuration across multiple systems.

3. Consistency Matters

Once we showed “No data” in the table, the visualization needed the same treatment. Once we read sensor data dynamically, installation height should too.

4. User Feedback Drives Quality

The user’s screenshot showing zeros was worth a thousand bug reports. Visual feedback accelerates improvement.

The Code Quality Evolution

Notice how each fix improved code quality:

1. Magic strings removed: /blog-placeholder-1.jpg → /floodboy-logo.png
2. Configuration centralized: URL in config file
3. Null handling added: Proper checks for undefined data
4. Conditional rendering: Smarter component display
5. Dynamic data reading: No more hardcoded values

The Human Element

The user’s communication style was perfect for this cascade:

• Started with one clear issue
• Provided screenshots showing problems
• Confirmed each fix quickly
• Pointed out related issues naturally

This collaborative approach turned a 5-minute fix into a 37-minute quality improvement session.

Time Breakdown

• 5 minutes: Fix Astro logo
• 5 minutes: Fix site URL
• 10 minutes: Implement “No data” display
• 10 minutes: Add visualization conditions
• 7 minutes: Dynamic installation height

Each subsequent fix took longer as complexity increased, but built on previous improvements.

Lessons for Future Development

Always Look Around

When fixing one thing, examine its context. What else might be wrong nearby?

Test the Full User Journey

The OG image fix led to testing social media previews, which revealed the URL issue, which led to examining the shared page, which revealed the data issues.

Embrace the Cascade

Don’t view cascading fixes as scope creep. View them as opportunity for comprehensive improvement.

Document the Journey

Five separate PRs (#49, #52, #55, #58, #59) tell the story of this improvement cascade.

The Result

What started as “fix the logo” became a comprehensive dashboard improvement:

• Better branding
• Working social sharing
• Clearer data presentation
• Smarter visualizations
• Accurate measurements

All in 37 minutes.

---

Sometimes the best development sessions are the unplanned ones. When you pull one thread and unravel a series of improvements, you’re not just fixing bugs - you’re evolving the product. This cascade transformed FloodBoy’s sensor dashboard from confusing to clear, one fix at a time.