agent-coding-the-spiral-back-to-fumbling

⋯ 60 unchanged lines
   
  **Want → Try → Fail → Fix → Learn → Repeat.**
   
− <svg
−   viewBox="0 0 720 200"
−   xmlns="http://www.w3.org/2000/svg"
+ <img
+   src="https://res.cloudinary.com/dkxhoyenc/image/upload/v1778694239/cuq44c.png"
+   alt="Same loop, different level: comparing the learning loop from 10 years ago with Agent Coding today"
    style={{
      width: "100%",
      maxWidth: "720px",
      margin: "2rem auto",
      display: "block",
    }}
− >
−   <defs>
−     <marker
−       id="arrow1"
−       markerWidth="8"
−       markerHeight="6"
−       refX="8"
−       refY="3"
−       orient="auto"
−     >
−       <path d="M0,0 L8,3 L0,6" fill="#6366f1" />
−     </marker>
−     <marker
−       id="arrow2"
−       markerWidth="8"
−       markerHeight="6"
−       refX="8"
−       refY="3"
−       orient="auto"
−     >
−       <path d="M0,0 L8,3 L0,6" fill="#10b981" />
−     </marker>
−   </defs>
−   <text
−     x="360"
−     y="20"
−     textAnchor="middle"
−     fill="#94a3b8"
−     fontSize="11"
−     fontFamily="monospace"
−   >
−     SAME LOOP — DIFFERENT LEVEL
−   </text>
−   <rect
−     x="20"
−     y="40"
−     width="330"
−     height="140"
−     rx="12"
−     fill="none"
−     stroke="#334155"
−     strokeWidth="1.5"
−     strokeDasharray="4 3"
−   />
−   <rect
−     x="370"
−     y="40"
−     width="330"
−     height="140"
−     rx="12"
−     fill="none"
−     stroke="#334155"
−     strokeWidth="1.5"
−     strokeDasharray="4 3"
−   />
−   <text
−     x="185"
−     y="62"
−     textAnchor="middle"
−     fill="#6366f1"
−     fontSize="12"
−     fontWeight="bold"
−     fontFamily="monospace"
−   >
−     10 years ago
−   </text>
−   <text
−     x="535"
−     y="62"
−     textAnchor="middle"
−     fill="#10b981"
−     fontSize="12"
−     fontWeight="bold"
−     fontFamily="monospace"
−   >
−     Now
−   </text>
−   <g transform="translate(185, 125)">
−     <ellipse
−       cx="0"
−       cy="0"
−       rx="70"
−       ry="35"
−       fill="none"
−       stroke="#6366f1"
−       strokeWidth="1.5"
−     />
−     <text
−       x="0"
−       y="-50"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="10"
−       fontFamily="monospace"
−     >
−       Want to build
−     </text>
−     <text
−       x="-85"
−       y="5"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="9"
−       fontFamily="monospace"
−     >
−       Search
−     </text>
−     <text
−       x="85"
−       y="5"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="9"
−       fontFamily="monospace"
−     >
−       Fix bug
−     </text>
−     <text
−       x="0"
−       y="55"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="9"
−       fontFamily="monospace"
−     >
−       It works!
−     </text>
−     <path
−       d="M50,-28 A70,35 0 1,1 45,-30"
−       fill="none"
−       stroke="#6366f1"
−       strokeWidth="1.5"
−       markerEnd="url(#arrow1)"
−     />
−   </g>
−   <g transform="translate(535, 125)">
−     <ellipse
−       cx="0"
−       cy="0"
−       rx="70"
−       ry="35"
−       fill="none"
−       stroke="#10b981"
−       strokeWidth="1.5"
−     />
−     <text
−       x="0"
−       y="-50"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="10"
−       fontFamily="monospace"
−     >
−       Describe intent
−     </text>
−     <text
−       x="-85"
−       y="5"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="9"
−       fontFamily="monospace"
−     >
−       Prompt
−     </text>
−     <text
−       x="85"
−       y="5"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="9"
−       fontFamily="monospace"
−     >
−       Iterate
−     </text>
−     <text
−       x="0"
−       y="55"
−       textAnchor="middle"
−       fill="#e2e8f0"
−       fontSize="9"
−       fontFamily="monospace"
−     >
−       It works!
−     </text>
−     <path
−       d="M50,-28 A70,35 0 1,1 45,-30"
−       fill="none"
−       stroke="#10b981"
−       strokeWidth="1.5"
−       markerEnd="url(#arrow2)"
−     />
−   </g>
− </svg>
+ />
   
  This is the exact same loop from when I first learned to code. Same pattern. Same feeling of fumbling. Same satisfaction when it finally works after several rounds of back-and-forth.
   
⋯ 26 unchanged lines
   
  I think the right image for this is an **upward spiral**.
   
− <svg
−   viewBox="0 0 500 380"
−   xmlns="http://www.w3.org/2000/svg"
+ <img
+   src="https://res.cloudinary.com/dkxhoyenc/image/upload/v1778694915/w7m4u5.png"
+   alt="The upward spiral: from fumbling with PHP, through University and Work, to Agent Coding — same trial-and-error pattern, each loop higher"
    style={{
      width: "100%",
      maxWidth: "500px",
      margin: "2rem auto",
      display: "block",
    }}
− >
−   <defs>
−     <marker
−       id="arrowUp"
−       markerWidth="8"
−       markerHeight="6"
−       refX="8"
−       refY="3"
−       orient="auto"
−     >
−       <path d="M0,0 L8,3 L0,6" fill="#94a3b8" />
−     </marker>
−   </defs>
−   <line
−     x1="250"
−     y1="360"
−     x2="250"
−     y2="20"
−     stroke="#334155"
−     strokeWidth="1"
−     strokeDasharray="4 3"
−     markerEnd="url(#arrowUp)"
−   />
−   <text x="265" y="30" fill="#94a3b8" fontSize="10" fontFamily="monospace">
−     abstraction
−   </text>
−   <ellipse
−     cx="250"
−     cy="300"
−     rx="120"
−     ry="30"
−     fill="none"
−     stroke="#6366f1"
−     strokeWidth="2"
−     opacity="0.4"
−   />
−   <text
−     x="250"
−     y="305"
−     textAnchor="middle"
−     fill="#6366f1"
−     fontSize="11"
−     fontFamily="monospace"
−   >
−     Fumbling with PHP
−   </text>
−   <text
−     x="250"
−     y="340"
−     textAnchor="middle"
−     fill="#475569"
−     fontSize="9"
−     fontFamily="monospace"
−   >
−     syntax · logic · trial & error
−   </text>
−   <ellipse
−     cx="250"
−     cy="200"
−     rx="120"
−     ry="30"
−     fill="none"
−     stroke="#f59e0b"
−     strokeWidth="2"
−     opacity="0.6"
−   />
−   <text
−     x="250"
−     y="205"
−     textAnchor="middle"
−     fill="#f59e0b"
−     fontSize="11"
−     fontFamily="monospace"
−   >
−     University · Work
−   </text>
−   <text
−     x="250"
−     y="240"
−     textAnchor="middle"
−     fill="#475569"
−     fontSize="9"
−     fontFamily="monospace"
−   >
−     OOP · patterns · Sprint · Scrum
−   </text>
−   <ellipse
−     cx="250"
−     cy="100"
−     rx="120"
−     ry="30"
−     fill="none"
−     stroke="#10b981"
−     strokeWidth="2"
−   />
−   <text
−     x="250"
−     y="105"
−     textAnchor="middle"
−     fill="#10b981"
−     fontSize="11"
−     fontFamily="monospace"
−   >
−     Agent Coding
−   </text>
−   <text
−     x="250"
−     y="140"
−     textAnchor="middle"
−     fill="#475569"
−     fontSize="9"
−     fontFamily="monospace"
−   >
−     intent · prompting · verification
−   </text>
−   <path
−     d="M130,300 C100,250 130,230 130,200 C130,170 100,150 130,100"
−     fill="none"
−     stroke="#94a3b8"
−     strokeWidth="1.5"
−     strokeDasharray="3 3"
−   />
−   <path
−     d="M370,300 C400,250 370,230 370,200 C370,170 400,150 370,100"
−     fill="none"
−     stroke="#94a3b8"
−     strokeWidth="1.5"
−     strokeDasharray="3 3"
−   />
−   <text
−     x="250"
−     y="375"
−     textAnchor="middle"
−     fill="#64748b"
−     fontSize="9"
−     fontFamily="monospace"
−   >
−     same "try → fail → learn" pattern, each loop higher
−   </text>
− </svg>
+ />
   
  Viewed from above, we're standing at the same position. Still fumbling. Still trial and error. Still "try, fail, fix, learn."
   
⋯ 73 unchanged lines