DEV Community


Tribute to Swissted — Introduction

Web developer, late bloomer. Can center an element with grace and style (pun intended). Mostly sensible (citation needed).
・2 min read

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

Discussion (0)