2025/10/19
Table of contents
#
Last year I participated in the OCC challenge and between work and personal life I totally forgot about it, luckily I saw a post online of someone doing the challenge and remembered about it. I didn’t want to miss this year challenge as it was fun learning something new last year, so hopefully its not too late.
This years challenge it was a DIY, you could create your own OCC challenge. So I thought it’d be fun to try to recreate a website and navigation for the ZX Spectrum using BASIC and the limited graphics capabilities of the computer.
Hardware #
Well, in this case the hardware is the ZX Spectrum, though I must say that I used an emulator (Fuse) to test and run my code.
Limitations #
The ZX Spectrum image resolution is 256x192 pixels, so the space is very limited. The colour palette is made up of 8 colors, with a “brighter” variation.
With this in mind I had to design a website for the ZX Spectrum and how you’d navigate with it.
Challenge #
So given the hardware and limitations I thought that I’d first do Google, since they have a simple design and is I’d say well known by everyone.
Google #
The image below, is what Googles homepage would look like.
You’d access their services listed by pressing the first letter of that service, in case there is more than 1 with the same letter you’d use another letter or simply add a second page of services.
In this case you can access Search by pressing “S”. It will simply prompt for your search and in this case I searched for “How to run LLM on a microprocessor” and you’d navigate through the different results by going pressing “w” (up) or “s” (down).
Hacker news #
Hacker news is text heavy content, so it makes it “easy” to design it for the ZX Spectrum as its graphics capabilities are kinda limited.
As you can see, you’ll be able to see your username and the amount of points you have in the top bar and in this case I decided that navigation would be done “less” interactively and you’ll access posts by simply selecting the number (1 to 6). If you want to go to the second page of posts you can press “M” and if you want to submit you press “S”.
So if we select the first post by pressing 1, we’ll load more details about the post and the comment section.
You’ll see the title, user that posted it, time and the comment section with the amount of comments, in this case 42. The problem with the comment section is that some comment threads can go deep and have different branches as multiple users will reply. So in this case what I thought was to simply navigate the top level comments with “M” for the next comment and “B” to go back to the previous top level comment. I guess you could add a “[R]eply” option, to reply to the comment you are seeing on screen and navigating through the comment replies, you’d press something like “C” and you’ll enter a page of the child comments of the parent comment. The only problem with this is that because the screen is so tiny and limited, that most of the time you’ll only be able to see 1 comment at a time and when posts have 300 comments, navigating them is going to be hard.
And this is what submitting a new link would look like, you’d simply “edit” the different fields and then “S"ubmit
Conclusion #
Personally I had fun doing this, I didn’t have to spend a lot of time researching before doing that as I had already done a lot of that work in last year challenge, so I could focus on what I wanted to do. You can check the source code and try it yourself in my repository https://codeberg.org/0x00cl/Web-ZX
Appendix #
Here are videos of the interactions in the ZX Spectrum