I was reading Hui Jing's post about building a progressively enhanced Node.js web app. I’ve never worked with Node.js before, but I was curious and “remixed” her Glitch demo. Sure enough, I ended up building something different altogether! 🙈
What did I build?
I built a simple web app that displays posters from swissted.com and their corresponding Codepen “recreations”.
Swissted is a visual design project by artist Mike Joyce, where he creates posters for iconic music concerts with the International Typographic Style (a.k.a. Swiss design style). The posters’ distinctive style lends itself to developers and designers recreating the posters in HTML and CSS. A Codepen search for “swissted" will yield a few dozens of results. These are simply my favourite things in the world combined: alternative music, Swiss design and typography, HTML and CSS! 😻
Why did I build it?
When I was browsing to see which posters have been recreated, I had to go back and forth between Swissted and Codepen websites and wade through pages in both websites. I made “Tribute to Swissted” to solve that problem, namely to see all poster designs and links to corresponding Codepen recreations from one interface.
How did I build it?
I built it as a Node web application on Glitch using these libraries:
- Koa
- Koa middleware: koa-static, koa-router, koa-views
- Nunjucks
- Cheerio
In this series, I will be documenting how I built this web app. Please stay tuned for the next posts!
- Part I: Setting up a Node.js Web App with Koa and Nunjucks
- Part II: “Scraping” and Parsing Data with Cheerio
- Part III: Styling, Markup, Accessibility, and Performance
Top comments (0)