Lit-html, Typescript, and Parcel

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

I started with static HTML pages for detail and home. This way I got most of the styling right for light vs dark and desktop vs mobile.

I relied a lot on Gemini Code Assist for the CSS from scratch. I am inclined to stick with Bulma when the design does not start out with a specific solution image.

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

• Styling the the dropdown menu

  I ended up styling a select element. Positioning the dropdown arrow and tracking the color theme in the options all required special CSS. This separation of CSS and HTML with special wrapper divs is not good for reuse.

• Responsive grid

  I encountered an unexpected behavior where widening the window ended up reducing the number of countries per row. Gemini helped me trace this to an interaction from padding and max-width. max-width was in px derived from the style guide and padding in vw (viewport width percentage). Widening the window much beyond max-width ended up expanding the padding to a point that only three countries per row fit.

• Merging rest responses

  There is now a limit of 10 fields for the all endpoint. The responses are merged and you can observe the delayed responses because the Afghan flag changes. I am leaving that as a quirk. It would be easy enough to update the data.json with a snapshot of the current responses.

What specific areas of your project would you like help with?

Simplify the non-semantic HTML structure. I would prefer to avoid divs whose only point is styling. I am actively trying to avoid custom HTML tags or other techniques that add a level of indirection or "abstraction". I am trying to see how far re-use of functions will carry me. I prefer functions that return HTML with wrapper divs over custom classes or custom HTML tags with non-standard attributes, but even better would be some CSS tricks that avoid the wrapper divs in the first place.