This is a submission for [Frontend Challenge - Comfort Food Edition, Perfect Landing] 😊
What I Built Gnoke Books works like an actual printed magazine on a table — you grab the corner of the page and flip it over. This issue features Port Harcourt Bole & Fish: roasted plantain, sometimes roasted yam, grilled fish, and a pepper sauce people hardly talk about outside Rivers State. People hand it down through stories. A scrollable landing page would feel like an ad for it. A paginated…
Gnoke Books is a unique, printed magazine-like digital experience that replicates the feel of flipping through a real magazine on a table. This particular issue showcases Port Harcourt Bole & Fish, a dish made up of roasted plantain, yam, grilled fish, and a signature pepper sauce originating from Rivers State. The UI is crafted through a series of div boxes and gradients, with no external image files required.
The page's design presents itself as a scrollable landing page that resembles an advertisement for the dish, while the layout feels akin to reading a cherished memory from a book. The entire process is done without any frameworks or build steps, enabling offline functionality by caching the first load in local storage.
Developed on an Infinix phone, the project emphasizes simplicity and performance, avoiding any heavy or stuttering elements even within a single browser tab. The developer employed AI to generate initial drafts but remained actively involved in refining and correcting the output.
During development, several key issues surfaced that needed attention. One issue involved the Table of Contents (TOC) being linked to an incorrect page, which required manual proofreading to resolve. Another issue was a conveyor belt-style sponsor feed that scrolled indefinitely, which violated Web Content Accessibility Guidelines (WCAG) 2.2.2. This issue was rectified by adding controls such as pause-on-hover, pause-on-focus, and explicit buttons for touch users.
Additionally, the Table of Contents was initially inaccessible for keyboard users. Once the issue was identified, the developer implemented tabindex, role, and keyboard handlers (Enter/Space) to ensure equal accessibility for all users. Throughout the development process, the developer relied heavily on hands-on testing and manual inspection, akin to assembling an engine through a glovebox, rather than relying solely on AI-generated content.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
