A field guide to the modern front end for developers who hand-wrote HTML
Key takeaways
- The last time you wrote a frontend,it looked like one of these —
- Two decades, forty-four meters of build tools, and one very confused <button> later, here's the whole story.
- In 2008 you saved a file called index.html, dragged it onto an FTP client, and watched a little progress bar crawl to the right.
The last time you wrote a frontend,it looked like one of these —
<?php foreach ($cart as $item): ?> <li> <?= $item->name ?> <button>Buy</button> </li> <?php endforeach; ?> or just hand-written <!-- styled by hand, no build --> <button class="buy">Buy</button> <style> .buy { padding: 4px 10px; border: 1px solid #999; } </style> Buy either way: 0 build steps · 0 dependenciesworked in every browser, forever Then you looked away.What the hell happened? Two decades, forty-four meters of build tools, and one very confused <button> later, here's the whole story. Spare twenty minutes; I'll get you up to speed.
In 2008 you saved a file called index.html, dragged it onto an FTP client, and watched a little progress bar crawl to the right. When it finished, your website existed. It worked in Internet Explorer and Firefox and that new one called Chrome. You did not run a "build." You did not install 1,400 packages. You wrote the markup, you wrote the styles, and the browser did exactly what you told it.