Mind Blown

Firstly, while I try to write something every week, I just missed a couple. Sorry about that - I actually took a holiday (my wife and I went to Krakow in Poland, which was such a nice place). Holidays were hard to come by when I was purely freelancing so I took full advantage. But I'm back now so I'm going to try and stick to the schedule.

In the last few weeks my mind has been blown twice. I'm an old gimmer and I've been programming a long time. I'm also pretty conservative when it comes to technology - the wave of hype that accompanies every new framework or technique doesn't impress me (although there are possibly reasons for that which I might talk about another day).

The first thing that blew my mind is about CSS. The second, which I'll talk about next week, is about Javascript.

I bought a book called Every Layout describing how to use CSS for layouts (as opposed to "decoration"). And my mind was totally blown. For the last ten years I've been using various flavours of 12 column grids with responsive breakpoints which work OK but always have certain sizes that just look crappy. My CSS has never been great so I just shrugged and accepted it.

But Every Layout describes how to truly do responsive layouts. It defines a series of primitive layouts (using components if you prefer) and they respond, not just to the available size but also to the content within them. The "switcher" changes from being a series of elements laid out horizontally to being placed vertically, not only when the width of the parent element is reduced but also when you add too many child elements to fit comfortably across your horizontal space. The "cover" gives you true vertical centering without going over the parent borders or chopping off the internal content.

And because they're primitives, you combine them - your header might be two nested clusters to give you a logo and menu bar. Your main section might be a sidebar with a nested stack on each side. A form is a box containing a stack containing a smaller stack with labels and inputs, followed by a cluster of buttons.

It's the opposite of the approach taken by Tailwind (and lately Bootstrap) and it works much better. Plus the CSS it uses is incredibly simple and I think there's only one place where JavaScript is used.

So if you have about £50 to spare, I thoroughly recommend Every Layout. It's one of those things where, now I know, I look at everything I've written before and can't believe how ugly the code is and how badly it works.

Next week, I'll talk about Javascript, and what could well prompt a major change in every single bit of code I write.