Newsletter built with Vite + Vue 3

Had a proper tussle with the padding and width/height of an absolute positioned component in a relative positioned parent. Everything should have worked just fine, but when I changed the padding the width/height would change. Had to settle with padding: 0; on it and adjust the margins of each of the children.

Had a hard time with grid-areas until I realised that the value of the grid-area property should not be encapsulated in quotes.

Changing up the image in this one between mobile and desktop sizes was a doozy, but managed to get a rather cool solution using some Vue functions.

Had a bit of a confusing time with all the emits flying around this app securing my already secured love of the coding practice of giving any and all things you create very descriptive names.

Beware when creating multiple controls in the same component. Different instances of the component do not share information unless you communicate data between the instances and not in the code of the component. It took me explaining the situation to phind to realise that I was not communicating data from a component instance to its parent and then back to the other instance of two components that share the same code. Either create unique components or put your defineEmits hat on.

A question I have is on margins and padding. Is it better to add padding in a parent component, or add margins to the components you're working with? Another question is on whether it is actually better to work in rem or px?