And so it begins
#web-design #augmented-ai #copilot #where-is-my-css-at
I created my first website a long time ago, hand-crafted <HTML> in Notepad, wrangling <TABLE> to force a layout and center images. It started my obsession with writing code in minimal interfaces so nothing got in the way (I hand-rolled C++ and Java in Notepad as well, before moving onto Vim!). I didn’t like WYSIWYG applications; they felt like cheating. And when something broke, if you knew every line of code, you knew the places it might have broken.
After HTML I discovered JavaScript, and Netscape, and Internet Explorer. Then CSS, and Netscape, and Internet Explorer again (no, that’s not a typo), both browsers were so hard to wrangle that you’d reach for JavaScript to fix one problem and cause three more, and eventually even CSS needed JavaScript to behave. Java Applets and security, or the lack of it. Flash, I actually miss Flash (as do threat actors!). I even did a study on using 3D navigation for a shopping website built with a Flash interface. Don’t you know, VR website navigation was just around the corner, until the next time it came around!
It’s fair to say I’ve seen a lot. I never became a full-time web developer, but I did end up taking on a React UI professionally (it was only meant to be for 2 weeks to bootstrap). JavaScript had grown up, it had frameworks, and it was easier to wrangle the DOM. Well, I’m not sure it was easier, but you could wrangle it more, and virtually now as well! I eventually ended up pushing for and implementing a micro-frontend architecture. I know, architecture on an HTML page (sorry, single-page application). We have come a long way now, with browsers really fronting serious applications! I’ve also realised the need for IDEs; writing modern code as a professional software developer without one makes no sense. I still like to sketch ideas on paper or draft in Vim when trying something new or difficult, but modern software engineering brings so much baggage that you can’t hold all that context yourself, you have to offload it to an IDE/tool setup, your team or OSS.
So when I sat down with the idea of building a website I had a fair idea of what I wanted and a good framework (which every JS developer knows changes once a full moon) for researching what I needed. I came across Why Astro, interesting.
Astro sounded like what I wanted, focused on content websites, server first, UI agnostic, zero JS by default! It supports content via Markdown files, and I really liked the design principles. Its island architecture sounded like a clean version of micro-frontends, and even more appealing, it sounded like PHP or CGI (yes, I am that vintage). Stuffing JavaScript into the browser just because you could always felt wrong to me; maybe that’s why I prefer backend. So here I had a modern framework that promised clean, modern HTML with JS only when needed. I was sold.
So I opened up Spotify and queued up Ash’s Free All Angels to get into the old web developer mode. Except this time I did not have a copy of Dynamic HTML: The Definitive Reference on hand, a massive 1000+ page book with HTML, CSS, DOM, ECMAScript, and all the hacks needed for browsers. Instead I had Copilot and VS Code!
I have a template for how I like to structure a project: dev containers in VS Code, and it has to be on Linux, with a task runner (after years of being told to drop Make, I now use Just). So I fired up VS Code, described the shell structure I like for any project, and Copilot whipped it up as I sat watching. It made some mistakes, which I got it to fix. I’m now so used to using Copilot that I get it to work almost as I need, but you never know, it’s a non-deterministic word generator after all! Before long I had a nice setup. I could just create a cookie-cutter template to bootstrap repos, but that is too much work for a personal project, especially now with Copilot.
Now, with the boilerplate out of the way and the ability to develop anywhere that runs dev containers, instead of reading the Astro docs, I just told Copilot to scaffold a project with Astro. A few minutes of back and forth later, Astro was ready with a bland blog.
And here is the most brilliant part: I described a mood board to Copilot, and with some back and forth we arrived at the design you see now. Some change from WYSIWYG!
I wasn’t happy with some of the performance and how it was handling fonts, and it was missing some security features I like (even though this is just a static web page, it’s always good practice).
Would I ship it?
I had a look around. The code looked okay. Would I ship it to production for my job? Probably not. I’d want to understand Astro in more detail and dig in for those 2am calls for sure. If I knew nothing about software engineering and web design, would I have got the same results? I’m not so sure. I might have got something that looked similar, but Copilot gets subtle parts wrong that would snowball if not corrected. Its insistence on setting up CI/CD was a bit annoying, imagine the only developer on the project wasting time plumbing up an insecure CI/CD setup that Copilot initially suggested. That is a trap waiting for anyone with no grounding in software engineering.
Ship It!
So I set up my server solution, leaning into what I know and not wanting to battle with server config (but more on that in another blog). I ran the command to deploy, and in a few minutes everything was plumbed up and I had a personal project website live on the internet. The feeling of seeing it was the same as I had in the early 2000s, just with fewer books referenced in the making of it, and missing some of the more questionable early design choices we made back then! The process of creating may have changed, but the sense of achievement when seeing something created was no less!
Anyway, stay tuned for more posts, where I promise to dive into more technical aspects!