New year, new site

Entry 02 Dec 21, 2020 01 min read ✸ Edit Post

Hi, this is my new site. There’s not much here right now, but hopefully I’ll find time to add more things soon.

A new site for the new year — that sounds good to me.

I’m putting inline images in MDX using gatsby-remark-images. Here is a photo of a shiba in autumn as proof:

shiba in autumn

How cute! I can also make images take up the full width of the container through some hacky class-setting in a div wrapper.

shiba in autumn

It’s not the best, but it works! And seeing as how we’ve already crossed the bridge to hackiness, we might as well go all out. For example, we can place the shibas in a grid or some other interesting layout.

If you are on desktop (or a device with large viewport), you should see shibas grouped neatly into rows. If you are on mobile (or any other device with a smaller viewport), you will see some stacked shibas instead. But would that be so bad?

shiba in autumn shiba in autumn
shiba in autumn shiba in autumn shiba in autumn shiba in autumn

CSS grid is great!

But this would not work if I tried adding pictures of anything besides shibas in autumn. That’s because pictures of different things will presumably have different sizes, and I haven’t figured out a way to handle that elegantly using MDX and gatsby-remark-images yet. Maybe I will create separate layout components in JSX to specify how objects should fit inside their respective containers, though this might require handling some gatsby-image magic manually.

Or maybe my blog will just contain pictures of shibas in autumn. I would be okay with that too.

Avoiding premature (feature) optimization