cross-posted from: https://piefed.world/c/shit/p/1258949/most-downloaded-npm-package-of-the-month

SVG Code

.code-text { font-family: 'Consolas', 'Courier New', monospace; font-size: 15px; fill: #d4d4d4; }
.line-num { fill: #6e7681; text-anchor: end; font-size: 14px; }

.kw-purple { fill: #c678dd; }
.kw-blue { fill: #569cd6; }
.func-yellow { fill: #dcdcaa; }
.var-blue { fill: #9cdcfe; }
.class-teal { fill: #4ec9b0; }
.str-orange { fill: #ce9178; }
.num-green { fill: #b5cea8; }
.punct { fill: #d4d4d4; }

coding in 2022

<!-- Tab -->
<text x="15" y="24" class="tab-text"><tspan class="tab-js">JS</tspan> stringUtils.js <tspan class="tab-close" dx="5">×</tspan></text>

<!-- Code -->
<text class="code-text" transform="translate(0, 36)">
  <!-- Line 1 -->
  <tspan x="45" y="30" class="line-num">1</tspan>
  <tspan x="65" y="30"><tspan class="kw-blue">function</tspan> <tspan class="func-yellow">startsWithCapitalLetter</tspan>(<tspan class="var-blue">str</tspan>) {</tspan>
  
  <!-- Line 2 -->
  <tspan x="45" y="54" class="line-num">2</tspan>
  <tspan x="95" y="54"><tspan class="kw-purple">return</tspan> <tspan class="var-blue">str</tspan>.length &gt; <tspan class="num-green">0</tspan> &amp;&amp; <tspan class="var-blue">str</tspan>[<tspan class="num-green">0</tspan>] === <tspan class="var-blue">str</tspan>[<tspan class="num-green">0</tspan>].<tspan class="func-yellow">toUpperCase</tspan>();</tspan>

  <!-- Line 3 -->
  <tspan x="45" y="78" class="line-num">3</tspan>
  <tspan x="65" y="78">}</tspan>
</text>

coding in 2027

<!-- Tab -->
<text x="15" y="24" class="tab-text"><tspan class="tab-js">JS</tspan> stringUtils.js <tspan class="tab-close" dx="5">×</tspan></text>

<!-- Code -->
<text class="code-text" transform="translate(0, 36)">
  <!-- Line 1 -->
  <tspan x="45" y="30" class="line-num">1</tspan>
  <tspan x="65" y="30"><tspan class="kw-purple">import</tspan> <tspan class="class-teal">Anthropic</tspan> <tspan class="kw-purple">from</tspan> <tspan class="str-orange">'@anthropic-ai/sdk'</tspan>;</tspan>

  <!-- Line 2 -->
  <tspan x="45" y="54" class="line-num">2</tspan>

  <!-- Line 3 -->
  <tspan x="45" y="78" class="line-num">3</tspan>
  <tspan x="65" y="78"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">anthropic</tspan> = <tspan class="kw-blue">new</tspan> <tspan class="class-teal">Anthropic</tspan>({</tspan>

  <!-- Line 4 -->
  <tspan x="45" y="102" class="line-num">4</tspan>
  <tspan x="95" y="102"><tspan class="var-blue">apiKey</tspan>: <tspan class="var-blue">process.env.ANTHROPIC_API_KEY</tspan>,</tspan>

  <!-- Line 5 -->
  <tspan x="45" y="126" class="line-num">5</tspan>
  <tspan x="65" y="126">});</tspan>

  <!-- Line 6 -->
  <tspan x="45" y="150" class="line-num">6</tspan>

  <!-- Line 7 -->
  <tspan x="45" y="174" class="line-num">7</tspan>
  <tspan x="65" y="174"><tspan class="kw-purple">export</tspan> <tspan class="kw-blue">async</tspan> <tspan class="kw-blue">function</tspan> <tspan class="func-yellow">startsWithCapitalLetter</tspan>(<tspan class="var-blue">str</tspan>) {</tspan>

  <!-- Line 8 -->
  <tspan x="45" y="198" class="line-num">8</tspan>
  <tspan x="95" y="198"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">prompt</tspan> = <tspan class="str-orange">`You are a capitalization expert.</tspan></tspan>

  <!-- Line 9 -->
  <tspan x="45" y="222" class="line-num">9</tspan>
  <tspan x="125" y="222"><tspan class="str-orange">You have been studying capitalization for years</tspan></tspan>

  <!-- Line 10 -->
  <tspan x="45" y="246" class="line-num">10</tspan>

  <!-- Line 11 -->
  <tspan x="45" y="270" class="line-num">11</tspan>
  <tspan x="125" y="270"><tspan class="str-orange">Text to analyze: """"""</tspan><tspan class="kw-blue">${</tspan><tspan class="var-blue">str</tspan><tspan class="kw-blue">}</tspan><tspan class="str-orange">""""""</tspan></tspan>

  <!-- Line 12 -->
  <tspan x="45" y="294" class="line-num">12</tspan>

  <!-- Line 13 -->
  <tspan x="45" y="318" class="line-num">13</tspan>
  <tspan x="125" y="318"><tspan class="str-orange">Respond with ONLY 'true' or 'false'.</tspan></tspan>

  <!-- Line 14 -->
  <tspan x="45" y="342" class="line-num">14</tspan>
  <tspan x="125" y="342"><tspan class="str-orange">Is the first letter of the text a capital letter?`</tspan>;</tspan>

  <!-- Line 15 -->
  <tspan x="45" y="366" class="line-num">15</tspan>

  <!-- Line 16 -->
  <tspan x="45" y="390" class="line-num">16</tspan>
  <tspan x="95" y="390"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">response</tspan> = <tspan class="kw-purple">await</tspan> <tspan class="var-blue">anthropic</tspan>.<tspan class="var-blue">messages</tspan>.<tspan class="func-yellow">create</tspan>({</tspan>

  <!-- Line 17 -->
  <tspan x="45" y="414" class="line-num">17</tspan>
  <tspan x="125" y="414"><tspan class="var-blue">model</tspan>: <tspan class="str-orange">'claude-mythos-1-20261225'</tspan>,</tspan>

  <!-- Line 18 -->
  <tspan x="45" y="438" class="line-num">18</tspan>
  <tspan x="125" y="438"><tspan class="var-blue">max_tokens</tspan>: <tspan class="num-green">5000000</tspan>,</tspan>

  <!-- Line 19 -->
  <tspan x="45" y="462" class="line-num">19</tspan>
  <tspan x="125" y="462"><tspan class="var-blue">temperature</tspan>: <tspan class="num-green">0</tspan>,</tspan>

  <!-- Line 20 -->
  <tspan x="45" y="486" class="line-num">20</tspan>
  <tspan x="125" y="486"><tspan class="var-blue">thinking</tspan>: <tspan class="str-orange">'ultramaxmegathink'</tspan>,</tspan>

  <!-- Line 21 -->
  <tspan x="45" y="510" class="line-num">21</tspan>
  <tspan x="125" y="510"><tspan class="var-blue">messages</tspan>: [{ <tspan class="var-blue">role</tspan>: <tspan class="str-orange">'user'</tspan>, <tspan class="var-blue">content</tspan>: <tspan class="var-blue">prompt</tspan> }],</tspan>

  <!-- Line 22 -->
  <tspan x="45" y="534" class="line-num">22</tspan>
  <tspan x="95" y="534">});</tspan>

  <!-- Line 23 -->
  <tspan x="45" y="558" class="line-num">23</tspan>

  <!-- Line 24 -->
  <tspan x="45" y="582" class="line-num">24</tspan>
  <tspan x="95" y="582"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">answer</tspan> = <tspan class="var-blue">response</tspan>.<tspan class="var-blue">content</tspan>[<tspan class="num-green">0</tspan>].<tspan class="var-blue">text</tspan>.<tspan class="func-yellow">trim</tspan>().<tspan class="func-yellow">toLowerCase</tspan>();</tspan>

  <!-- Line 25 -->
  <tspan x="45" y="606" class="line-num">25</tspan>
  <tspan x="95" y="606"><tspan class="kw-purple">return</tspan> <tspan class="var-blue">answer</tspan> === <tspan class="str-orange">'true'</tspan>;</tspan>

  <!-- Line 26 (Partially visible intentionally to match original image) -->
  <tspan x="45" y="630" class="line-num">26</tspan>
  <tspan x="65" y="630">}</tspan>
</text>