đ„ Check out this insightful post from Hacker News đ
đ Category:
đ Key idea:
Old Computer Challenge – Modern web for the ZX Spectrum
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 256×192 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
đŹ Share your opinion below!
#ïžâŁ #Computer #Challenge #Modern #web #Spectrum
đ Posted on 1761015898
