humphreybc

That video is hilarious!

This is nice and it gets past the paywall. Thank you.

Yes. It was my New Year’s resolution on 31 December 2017 and I deleted my account on 1 January 2018. I’ve been able to focus on growing our startup and getting back to reading; I subscribed to the New Yorker and the Atlantic. That’s primarily how I get my news now. Being off Facebook means I don’t get invited to many events, but I’ve been surprised at how people have adjusted to emailing me or texting me instead. You certainly learn who your real friends are.

I also deleted my Twitter account which has been much more cathartic and healthier for me. I was a long time Twitter user, and followed a lot of very liberal people in tech. Unfortunately, after the 2016 election, most of their tweets became political, and my feed was all ranting, whinging, and hate. What’s even worse is that I’m in Australia, so even though I agreed with them, it wasn’t relevant to me.

I spent some time trying to build a simple grid layout with dynamic width and height items in order for the layout to naturally flow responsively. Most libraries—like this one—require fixed width items or fixed width containers with fluid items.

Fully responsive turned out to be a lot harder than I thought it would be due to lots of rabbit holes, but the algorithm was fairly straightforward. My first approach was to try CSS Flex and Grid, but they didn't cut the mustard since they're not really designed for this sort of thing. I then found CSS Columns and had that working, but it proved too unstable for production use with issues with the sort order of items, wrapping across columns, and cross-browser support.

I ended up building our own library: https://github.com/heydovetail/react-masonry-responsive

There's a nice brief writeup about using CSS for masonry layout here: https://regisphilibert.com/blog/2017/12/pure-css-masonry-lay...