I Built this Website with an iPad

I built this entire website using only an iPad. Why? Mostly just to see if I could. The experience was…not great, but it got the job done.

GitHub Codespaces

The main tool I used was GitHub Codespaces, which works pretty well in Safari. All of the details that Codespaces can actually control are pretty much perfect.

The integrated terminal in the Codespace was a life-saver! Being able to run any CLI commands gave me a lot of control over my workflow. I was able to stop the Codespace whenever I finished working to save a little money, but leaving the Codespace turned off also persisted all of the customizations I had done. This was really nice because I was able to turn the Codepsace off and on and pick up exactly where I had left off during my last session.

My biggest headaches were related to how iPadOS manages things like multi-tasking, keyboard focus, and clipboard access. I can't count the number of times I instinctively typed ⌘ + W to close an editor tab, only to have Safari close my entire session.

Having to switch tabs from the Codespace to another tab to see the work-in-progress website was a little annoying, especially when making lots of iterative visual changes. I tried working around this by doing the “Add to Home Screen” trick on the Codespaces tab so that, using Mission Control, I could have the editor open in one window and the web browser open in another. This worked nicely at making both apps partially visible at once, but I had tons of issues with keyboard focus every time I returned to the Codespace. I had to click around a bunch of random elements before my keyboard input would go to the right place. That was very annoying and negated the benefits of having multiple windows open.

I consistently had issues copy/pasting snippets of code from other websites into the Codespaces editor, where the contents being copied would be encoded as HTML entities in my editor. In most cases, it was easiest to just re-type it manually.

No Debuggers

On an iPad, there's no way (at least none that I could find) to inspect elements or see a debugging console in the browser. These are essential tools when things go wrong and you need to fix them, so not having them could have been a huge liability. Luckily, I was working well within my comfort zone on this project and didn't need those tools. Still, this is a big shortcoming of trying to do development on an iPad.

Tech

Although I usually use personal projects as a time to learn a dozen new things, I decided to play it safe this time and use a lot of the same technologies I use in my day job, namely Next.js and Tailwind.

Next.js 14

The website uses Next.js 14 and makes heavy use of its new React Server Components and static site generation capabilities. Every page is statically generated and served as HTML and JavaScript files.

I really wanted to use Markdown to author the blogging portion of the website, and getting that to work along with Next.js static generation was probably the biggest pain. I've done this before on earlier versions of Next.js that use getStaticProps, but it took me a while to wrap my head around how to do it with the newest version of Next.js. In the end, the answer was sitting right in front of me with React Server Components: I could run the server-side code to read and parse my Markdown directly inside my component!

Tailwind

Tailwind is a boring choice at this point, but it works. The website is minimally styled to begin with, so there wasn't a lot of work to do. The main new technique I learned was using @apply statements in a global CSS file to establish baseline styles for typography. I've really enjoyed the flexibility of being able to override styles on an ad-hoc basis while still feeling like I'm using the framework.

AI-generated excerpts

I still want to do some work on automating it, but I had some fun using ChatGPT to write the excerpts for each blog post. I was able to provide the entire text of the blog post along with some prompts about the desired length and tone of voice. Doing this manually is almost as much work as writing the excerpt myself, but it's a fun exercise and something that I might improve with some automation.

Design

My previous website was an interactive experience emulating a Bash shell. I loved the aesthetic of that and it was undeniably clever, but it was a pretty abysmal website for SEO and general user experience.

This time around, I'm keeping the "looks like a shell" aesthetic but introducing some more traditional website navigation patterns. I wanted to make the website feel like you're using a nice text-based user interface in a shell, so all elements use the same font size (you can't change font sizes in a terminal!) and use only simple colors and lines to separate elements and headings.

As of this writing the website is definitely under-designed, but I'm hoping to tinker with it more over time.

All in all, I finished the whole project over the course of a weekend and had a lot of fun doing it. Not bad as side projects go!