DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Eka
Eka

Posted on

Tribute to Swissted β€” Introduction

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! 😻

Codepen search results for swissted posters

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:


In this series, I will be documenting how I built this web app. Please stay tuned for the next posts!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.