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/
culi 30 days ago [-]
The last one is actually independent. But you're right about the first two
“No” basically. Unless it can be poly filled into safari (ios) it is not worth adopting just yet.
uhoh-itsmaciek 31 days ago [-]
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 a Chrome bug? A bug in Anchoreum? In dev tools, it looks like it's an Anchoreum issue, because there's a separate element in the DOM.
Edit: also happens on level 25 without changing anything if I drag the anchor to the left.
Edit 2: ah, I think that area is where you're _supposed to_ place the anchor. It's not very clear from the text.
pinoy420 31 days ago [-]
What do you mean by cute?
uhoh-itsmaciek 23 days ago [-]
It's just a nice, playful touch.
nottorp 31 days ago [-]
I suppose fixing CSS itself to be predictable would be too hard? :)
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.
chilmers 31 days ago [-]
Pretty neat. But there doesn't seem to be any way to select or style the anchored element based on which fallback position it is in? This would seem to preclude adding a directional arrow to it, which is a somewhat baseline feature for things like tooltips.
vollbrecht 31 days ago [-]
Seams not supported in firefox
nicce 31 days ago [-]
Nor Safari
webstrand 31 days ago [-]
There's a polyfill that I haven't tried using that claims to make it work in Safari/Firefox.
JLCarveth 31 days ago [-]
Great, yet another feature Firefox doesn't support... I really try to not use Chrome, but I run into this sort of issue a lot.
Not all browsers implement the same features at the same time. Firefox releases some features before Chrome, so it goes both ways.
nicoburns 31 days ago [-]
Firefox is actively working on an implementation of this to be fair (source: I work on Servo and we have been accepting a steady stream of anchor positioning changes from our upstream stylo component)
lofaszvanitt 31 days ago [-]
the chrome team just shovels all kinds of shit into their browser, that literally nobody uses. but it looks good in comparisons
layer8 31 days ago [-]
Firefox is in good company, Safari also doesn’t.
somesun 29 days ago [-]
a very good game to learn css
uhoh-itsmaciek 31 days ago [-]
And no answers, huh? I'm stuck on 38.
Edit: it doesn't mention that `anchor()` can accept an anchor name, which is kind of important for this.
lerp-io 31 days ago [-]
honestly idk if there is any reason anyone should be learning CSS anymore
MarcellusDrum 30 days ago [-]
What's the alternative?
wruza 31 days ago [-]
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.
layer8 31 days ago [-]
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.
wruza 30 days ago [-]
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.
CSS Flex https://flexboxfroggy.com/
CSS Grid https://cssgridgarden.com/
CSS selectors https://flukeout.github.io/
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 a Chrome bug? A bug in Anchoreum? In dev tools, it looks like it's an Anchoreum issue, because there's a separate element in the DOM.
Edit: also happens on level 25 without changing anything if I drag the anchor to the left.
Edit 2: ah, I think that area is where you're _supposed to_ place the anchor. It's not very clear from the text.
https://package.elm-lang.org/packages/mdgriffith/elm-ui/late...
Fixing CSS would be nice.
Not all browsers implement the same features at the same time. Firefox releases some features before Chrome, so it goes both ways.
Edit: it doesn't mention that `anchor()` can accept an anchor name, which is kind of important for this.
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.
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.