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>
how the fuck do I read this?
Like, is it blurry for you? It looks ok in Summit. Or are you trying to understand the code?
blurry. Lemmy mobile web client
Easy, leave Lemmy and join Piefed.
Until we meet again…