QR code component

What are you most proud of, and what would you do differently next time?

This static site generator feels a bit over-engineered.

We'll see how well it stands up to upcoming challenges.

What challenges did you encounter, and how did you overcome them?

First I wanted to define all lengths via em units because I read that helps responsiveness. This made it almost impossible to match up my implementation with the original design. Once I switched to px units, my problems went away.

Centering the solution on the screen was not easy, I had to read up how to do this via Flexbox.

I spent some time on figuring out how to overlay the design JPG on top of my implementation and how to switch between the two for comparison purposes. Finally I placed the design JPG into an absolute-positioned div with z-index: 1 and visibility: hidden, then switched it on/off via DevTools.

Had to play with letter-spacing and a blur filter to get a similar enough look for the fonts.

For me the size of the font was not 15px but 15.5px, maybe this is due to the font rendering pecularities of Firefox under Linux Wayland.

What really bothered me was that the length units felt quite arbitrary: the only way to assess their correctness was to compare my implementation with the design JPG. It would feel much better if there were some mathematical rules which I could learn and then follow.