Works in all browsers, maybe, but certainly not all screen sizes. On my 1080p 5" nexus 5x, opening the page leaves me with unreadably small text. If I zoom in, the text doesn't reflow. So now I need to bounce scrolling around from side to side to read a line of text.

I suspect if I performed the same test in my 1440p 27" monitor, I'd have a surprisingly similar problem, of overly small text in a small box in the centre.

So in reality, while it may have made it super simple to preserve the shape of the Rubik's cube unfolded, it's impeded reading the main content on anything outside the range of a plus side phone to a Macbook's scaled 1440x900 canvas. And really the Rubik's cube could have been just a image (an SVG if you're worried about sharp or selectable text).

Ha! I should have said the technique works. I'd obviously want to lay things out a little smaller on phone screens. Though, for that particular use, is just punt and say not supported on smaller screens.

Note, I couldn't just do an image because of the animation nonsense I was playing with.

Edit: though, oddly, I think you are really complaining about some of the styling I inherited from org. I can possibly fix that easily enough. Never tried. Pretty sure I can just swap out a "width" with "max-width" and things will reflow as desired. For my eyes on my phone, the current width was fine. I didn't bother checking why it killed reflow. But I can confirm it reflows as desired on desktop if I do that.

Sure, max-width will restore reflow, but now your code listings and images break out of their container: https://i.imgur.com/utCVxg1.png

My point is that absolute positioning/pixel perfect designs are easy because they solve a simplified project "How to have my content look correct at a fixed size". But it breaks down once that fixed size is no longer reasonable for the target device.

Right, I agreed that what I did would not scale down to small screens. Nor will it work if you ever try and display on an apple watch or some such. The max-width would have just given you flowing text. I fully expect the visualization to be broken on small sizes.

I contend that is just not a requirement for most things. This particular endeavor mine, included.

So, what point are you arguing against? If it was that I pitched this strongly as a panacea. I definitely concede it is not one. But I also don't believe in panaceas.

If if it is that there is an easier way to get that layout such that I can play with it in silly animations without absolute positioning, I'm game to see it.

Edit: I should say thanks for getting me to look at my own site again in a long time. The code block would need the same width->max-width flip. Though, I question on why anyone would look at that page... well, ever, first. But in general even on a small screen. Not sure what I want code blocks to do there. Will take another look sometime hopefully this weekend. :)

Went ahead and flipped both of my "width" overrides to "max-width". Amusingly to me, the worst part of the pages, now, it seems is the MathJax stuff. That said, I'm not seeing an obvious difference in my mobile firefox, just chrome. Still not entirely sure how I would even want these to look there. If you have a good pointer for a site that styles code decently on mobile, I'd love to take a look and see about emulating/stealing.

I like absolute positioning but it's really hard to learn how to use fluently. New devs need to be educated on the concepts otherwise you get a total mess.

Flex and grid are more intuitive so they're easier for juniors to train up on.

How is it hard to learn. Put someone in front of some graph paper and let them layout what they want the page to look like. Get someone a little more experienced to help them pick the points that can grow, and off you go.

Not to say that they can't do better with flex and grid. But it was like our entire industry didn't even bother trying to learn with the first tools that our industry made.

I think the main difficulty is twofold. First there's the box model, which was different in IE than in the rest of the world for a long long time. Juniors that don't understand the difference will produce markup and styling that work in one browser but not the other. Absolute positioning is way more sensitive to the box model than other kinds of layout.

Second, unless you really want to insist on absolutely positioning everything, you're just going to need elements to flow occasionally. Most devs just aren't going to get a granular enough understanding of how absolute, relative, and fixed positioning work to where they can mix up the two to form fluid UIs.

They'll make one mistake and not realize it and before you know it behavior starts an inexorable slide in sanity, from which the only recovery is to scrap the entire page and start over. Been there done that.

Agreed it is no panacea. I still feel it is much more sane than most alternatives I've lived through.