Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Anchoreum: A game for learning CSS anchor positioning

anchoreum.com

Post reply on HN
Print view View original

21–28 of 28 posts

Re: Anchoreum: A game for learning CSS anchor positioning

#21

Post by layer8 »

wruza wrote: post #16

When will they realize that layout is fundamentally a linear problem, which only needs a "constraint" as a building block? That all these stupid width-basis-fit-minmax-fr-anchor-span combinations boil down to "Σ(aₙxₙ) ≤ b" and a couple of specialized distributors? How many half-assed incantations and reiterations it will take? Jesus Christ.

What do you do when there is no solution to the set of constraints? What do you do when there are multiple (usually infinitely many) solutions to the set of constraints? More importantly, how do you specify the behavior for those cases such that all browsers behave identically? I’m not saying that CSS is better (it’s not), but it’s a bit more involved than “just run a CSP solver”, and you can still get surprising behavior depending on window size, font size, content size and so on.

Re: Anchoreum: A game for learning CSS anchor positioning

#23

Post by wruza »

layer8 wrote: post #21
wruza wrote: post #16

When will they realize that layout is fundamentally a linear problem, which only needs a "constraint" as a building block? That all these stupid width-basis-fit-minmax-fr-anchor-span combinations boil down to "Σ(aₙxₙ) ≤ b" and a couple of specialized distributors? How many half-assed incantations and reiterations it will take? Jesus Christ.

What do you do when there is no solution to the set of constraints? What do you do when there are multiple (usually infinitely many) solutions to the set of constraints? More importantly, how do you specify the behavior for those cases such that all browsers behave identically? I’m not saying that CSS is better (it’s not), but it’s a bit more involved than “just run a CSP solver”, and you can still get surprising beh…

What do you do when there is no solution to the set of constraints?

You break the one with the lowest priority. Then another one, until it solves. You may create groups and break whole groups (to e.g. simulate “media” “queries”).

What do you do when there are multiple (usually infinitely many) solutions to the set of constraints?

Add constraints if they are missing, or, in case you wanted it to be underconstrained, allow the mentioned distribution algos to find extremums and allocate “space” accordingly. A naively underconstrained system will solve into just something, whatever. Just like html does something when you write zero css.

More importantly, how do you specify the behavior for those cases such that all browsers behave identically?

In text? I don’t get the question. If a behavior is programmable, it is specifiable. In fact, this specification will take 100x less sentences than the current mess.

it’s a bit more involved than “just run a CSP solver”, and you can still get surprising behavior depending on window size, font size, content size and so on.

Do you have any examples? Feels like simply not true.

Re: Anchoreum: A game for learning CSS anchor positioning

#24

Post by nottorp »

thibran wrote: post #17
nottorp wrote: post #13

I suppose fixing CSS itself to be predictable would be too hard? :)

You mean like elm-ui? https://package.elm-lang.org/packages/mdgriffith/elm-ui/late... Fixing CSS would be nice.

I don't know. Considering browsers are used as an application delivery platform these days, I'm not sure a library that "draws inspiration from typography" would help.

Re: Anchoreum: A game for learning CSS anchor positioning

#26

Post by culi »

lelandfe wrote: post #15
culi wrote: post #5

If this accepts Firefox and Safari then it could be a great addition to "intro to web dev" tutorials CSS Flex https://flexboxfroggy.com/ CSS Grid https://cssgridgarden.com/ CSS selectors https://flukeout.github.io/

Same creator as the first two, Thomas Park. Looks like he's started a series of these, but they're all paywalled except those three: https://codepip.com/games/

The last one is actually independent. But you're right about the first two

Re: Anchoreum: A game for learning CSS anchor positioning

#28

Post by uhoh-itsmaciek »

pinoy420 wrote: post #20
uhoh-itsmaciek wrote: post #7

Neat. The museum framing is cute, and well executed with the footsteps sound between levels. On level 20, if I set `position-try-fallbacks: flip-inline;` and drag the anchor to the top, something weird happens: the label stays on top, but is also mirrored below the anchor, except with no text or background, just a border and a translucent frame. Latest Chrome (on Ubuntu, but I don't think that matters here). Is this…

What do you mean by cute?

It's just a nice, playful touch.
Post reply on HN