cross-posted from: https://piefed.world/c/shit/p/1258949/most-downloaded-npm-package-of-the-month
SVG Code
<svg xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 800 1020” width=“100%” height=“100%”> <style> .bg { fill: #0a0a0a; } .window-bg { fill: #16161a; } .window-border { stroke: #333333; stroke-width: 1.5; } .header-line { stroke: #333333; stroke-width: 1; } .title { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif; font-size: 38px; font-weight: 800; fill: #ffffff; text-anchor: middle; } .tab-text { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif; font-size: 13px; fill: #cccccc; } .tab-js { fill: #f7df1e; font-weight: bold; } .tab-close { fill: #858585; font-size: 14px; }
.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; }</style>
<rect width=“100%” height=“100%” class=“bg”/>
<!-- ==================== 2022 Section ==================== --> <text x=“400” y=“60” class=“title”>coding in 2022</text>
<g transform=“translate(30, 90)”> <!-- Window Container --> <rect width=“740” height=“150” rx=“8” class=“window-bg window-border”/> <line x1=“0” y1=“36” x2=“740” y2=“36” class=“header-line”/>
<!-- 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 > <tspan class="num-green">0</tspan> && <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></g>
<!-- ==================== 2027 Section ==================== --> <text x=“400” y=“320” class=“title”>coding in 2027</text>
<g transform=“translate(30, 350)”> <!-- Window Container --> <rect width=“740” height=“640” rx=“8” class=“window-bg window-border”/> <line x1=“0” y1=“36” x2=“740” y2=“36” class=“header-line”/>
<!-- 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></g> </svg>
Yes, and we both know it could’ve been 100 KB too, but instead we’re served an image 50 times larger.
Doesn’t matter though because the image doesn’t even load for me 🥲