SIsimonw·Mar 28, 2025
"When you use the LLM you may be productive quicker, but I don't think you can argue that you are really learning anything"
Here's some code I threw together without even looking at yesterday: https://github.com/simonw/tools/blob/main/incomplete-json-pr... (notes here: https://simonwillison.net/2025/Mar/28/incomplete-json-pretty... )
Reading it now, here are the things it can teach me:
:root {
--primary-color: #3498db;
--secondary-color: #2980b9;
--background-color: #f9f9f9;
--card-background: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
padding: 20px;
That's a very clean example of CSS variabl
Read the rest
es, which I've not used before in my own projects. I'll probably use that pattern myself in the future.
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
Really nice focus box shadow effect there, another one for me to tuck away for later.
<button id="clearButton">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="9" x2="15" y2="15"></line>
<line x1="15" y1="9" x2="9" y2="15"></line>
</svg>
Clear
</button>
It honestly wouldn't have crossed my mind that embedding a tiny SVG inline inside a button could work that well for simple icons.
// Copy to clipboard functionality
copyButton.addEventListener('click', function() {
const textToCopy = outputJson.textContent;
navigator.clipboard.writeText(textToCopy).then(function() {
// Success feedback
copyButton.classList.add('copy-success');
copyButton.textContent = ' Copied!';
setTimeout(function() {
copyButton.classList.remove('copy-success');
copyButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy to Clipboard';
}, 2000);
});
});
Very clean example of clipboard interaction using navigator.clipboard.writeText
And the final chunk of code on the page is a very pleasing implementation of a simple character-by-character non-validating JSON parser which indents as it goes: https://github.com/simonw/tools/blob/1b9ce52d23c1335777cfedf...
That's half a dozen little tricks I've learned from just one tiny LLM project which I only spent a few minutes on.
My point here is that if you actively want to learn things, LLMs are an extraordinary gift.