168 lines
6.7 KiB
HTML
168 lines
6.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Glitch in the Thread | Anthony Figueroa</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Courier New', Courier, monospace;
|
||
|
|
background-color: #000000;
|
||
|
|
color: #00ff00;
|
||
|
|
line-height: 1.8;
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 40px 20px;
|
||
|
|
text-shadow: 0 0 5px #00ff00;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #ff0000;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 4em;
|
||
|
|
text-shadow: 3px 3px #333;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
font-family: 'Times New Roman', Times, serif;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
color: #00ff00;
|
||
|
|
border-bottom: 2px solid #ff0000;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-family: 'Times New Roman', Times, serif;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
font-size: 1.1em;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.glitch-text {
|
||
|
|
font-size: 1.5em;
|
||
|
|
text-align: center;
|
||
|
|
color: #ff0000;
|
||
|
|
text-shadow: 2px 2px #00ff00;
|
||
|
|
margin: 40px 0;
|
||
|
|
font-family: 'Times New Roman', Times, serif;
|
||
|
|
}
|
||
|
|
.story {
|
||
|
|
background-color: #111;
|
||
|
|
border: 2px solid #00ff00;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 30px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0,255,0,0.3);
|
||
|
|
}
|
||
|
|
.story h3 {
|
||
|
|
color: #ff0000;
|
||
|
|
font-size: 2em;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-family: 'Times New Roman', Times, serif;
|
||
|
|
}
|
||
|
|
.code-snippet {
|
||
|
|
background-color: #222;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-family: 'Courier New', Courier, monospace;
|
||
|
|
font-size: 0.9em;
|
||
|
|
color: #00ff00;
|
||
|
|
border-left: 4px solid #ff0000;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.9em;
|
||
|
|
margin-top: 60px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.back-button {
|
||
|
|
display: block;
|
||
|
|
width: 300px;
|
||
|
|
margin: 40px auto;
|
||
|
|
padding: 15px;
|
||
|
|
background-color: #ff0000;
|
||
|
|
color: #000000;
|
||
|
|
font-size: 1.2em;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 10px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
font-family: 'Times New Roman', Times, serif;
|
||
|
|
}
|
||
|
|
.back-button:hover {
|
||
|
|
background-color: #00ff00;
|
||
|
|
color: #ff0000;
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
.image-placeholder {
|
||
|
|
background-color: #333;
|
||
|
|
height: 300px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 2em;
|
||
|
|
color: #555;
|
||
|
|
border: 2px dashed #ff0000;
|
||
|
|
margin: 30px 0;
|
||
|
|
font-family: 'Times New Roman', Times, serif;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>The Glitch in the Thread</h1>
|
||
|
|
|
||
|
|
<div class="glitch-text">
|
||
|
|
"Every mistake is a stitch in the grand design."
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story">
|
||
|
|
<h3>Chapter 1: The Great Espresso Flood</h3>
|
||
|
|
<p>It started with a Raspberry Pi, a coffee maker, and a whole lot of hubris. I thought I could automate my morning brew. Instead, I flooded my kitchen with espresso and learned that fail-safes aren't just for data centers.</p>
|
||
|
|
<div class="code-snippet">
|
||
|
|
if (coffee_maker.is_on() && !kitchen.dry()) {
|
||
|
|
// This is where I learned about edge cases
|
||
|
|
console.log("Oh no, not again!");
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<p>This wasn't just a coding fail. It was a life lesson. Sometimes the best way to learn is to make a huge mess and then clean it up. That's what this page is about. Every mistake, every bug, every time I thought I had it figured out and then I didn't. It's all part of the thread.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story">
|
||
|
|
<h3>Chapter 2: The Monolith That Ate My Prod Database</h3>
|
||
|
|
<p>There was this one time I tried to refactor a monolith. You know, the kind where everything is tangled up like a ball of yarn that's been sat on by a cat. I thought I could just pull one thread and everything would fall into place. Instead, I deleted the entire production database.</p>
|
||
|
|
<div class="code-snippet">
|
||
|
|
// This is what I thought would happen:
|
||
|
|
refactored_monolith = clean_and_tidy(monolith);
|
||
|
|
|
||
|
|
// This is what actually happened:
|
||
|
|
rm -rf /production/database/*
|
||
|
|
</div>
|
||
|
|
<p>But here's the thing: that mistake made me a better architect. Now I have backups, and I test everything in staging first. And I still laugh about it. Because that's what we do. We laugh at the glitches, and we keep stitching.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story">
|
||
|
|
<h3>Chapter 3: The Guitar Solo That Sounded Like a Dial-Up Modem</h3>
|
||
|
|
<p>I tried to code a guitar solo. I thought, "Hey, I can use JavaScript to make music!" Turns out, my code sounded like a dial-up modem trying to connect to the internet in 1999. But you know what? That dial-up modem sound is now my favorite ringtone. Because it reminds me that sometimes the best art comes from the mistakes.</p>
|
||
|
|
<div class="code-snippet">
|
||
|
|
// My attempt at a guitar solo:
|
||
|
|
playSound("dial-up-modem-noise.mp3");
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="glitch-text">
|
||
|
|
"Every loose thread tells a story."
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story">
|
||
|
|
<h3>Chapter 4: The Bayeux Tapestry of My Life</h3>
|
||
|
|
<p>Did you know the Bayeux Tapestry is actually an embroidery? And it's 70 meters long? That's like, 230 feet of story. And it's full of little mistakes and loose threads. That's what I want this page to be. A tapestry of all my mistakes, all my glitches, all the times I thought I had it figured out and then I didn't.</p>
|
||
|
|
<p>Because here's the thing: every mistake is a lesson. Every bug is a flower in the garden. And every time you pull a thread, something new unfolds.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
Built with ❤️ and a lot of coffee in Minneapolis, MN. <br>
|
||
|
|
Check out my video: <a href="https://4ort.mov/w/jTfpmJv3oq17Bbj8u94Mug">"My Grandma Trying to Explain What a Refactor is"</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="index.html" class="back-button">Back to the Playground</a>
|
||
|
|
</body>
|
||
|
|
</html>
|