James0x57

Wow, crazy timing! You'll love what I just posted haha

I really like the sounds too - are they original and/or free to use?

A year ago I shared the first version of augmented-ui here, inspired by Deus Ex: Human Revolution, and got an awesome, really motivating response.

Today I released version 2 - it's a complete rewrite with over 150 new ways to shape HTML elements for a futuristic, Sci-Fi look. No JS needed!

It's still 100% free to use anywhere and Open Source :)

I linked to the repo since that's usually what's important around here, but if you're interested in the site, here you go: https://augmented-ui.com/ Would love to hear what you think!

PS: Wanted to say cheers to you all too because since that first post a year ago, I've shared a handful of other CSS ideas here and the conversations are hands-down better and more friendly than anywhere else. Glad to be here! Hope the CSS file helps!

wow, that's super clever. I was sitting here reading the code and didn't find a negative margin or positional property anywhere, and further, no switches to hold the state. Couldn't for the life of me figure out what you were doing hahaha I love it

Thank you!

OHHH I wish the others would have been more specific other than "it doesn't work". Thank you!

The way that random thing works is:

1) #randommenu:target shows the overlay (based on hash in the url)

2) the overlay has a link to "#" (fullscreen) that says "click-click"

3) Then rendered ontop of the link, all 16 level labels are full screen & transparent

4) Animations loop through them (hard-coded random scramble) to change their z-index to be on top, one at a time, for about 0.25s each

5) Clicking on any of the labels causes that layer to disappear, exposing the "#" link

6) Clicking again changes the url to "#" so #randommenu is no longer :target, thus closing the overlay

My guess is it's probably flashing too fast for iOS/Safari to register a full click.. I could probably fix it by making the random sequence take longer.

Can you confirm the URL never changes to "#" and stays stuck on "#randommenu"?

This is awesome - Could you please explain how you're holding state of each box individually without checkbox:checked? It's not immediately obvious to me how that's possible or where it's happening in your code!

You can't (afaik) tell if it's a right-click vs left-click in HTML+CSS alone that causes the el state to change - that info is part of the JS event :)

edit: ^ previously said "with css variables to hold state" or something similar (or my wires got crossed and I saw that somewhere else)

CSS variables can't be set by animations yet without JS's CSS Houdini giving them a type - a CSS @ property is in the works to do it without JS though!

lmao, I've come full circle. Excellent callout. hahaha

haha, awesome! You nailed it. It's really cool to see it being tested out in the world! Thank you for sharing!

Yes, but I didn't trust them to stay synchronized and it wasn't too difficult to generate the code for 1000 keyframes so I just did that :)

the timer stops at 999 because that's what it does in the real minesweeper, you can keep playing though!

I made a Binary Coded Decimal 7 Segment Display Decoder a couple days prior to starting this: https://github.com/propjockey/bcd7sdd

After that blew up on twitter I tried thinking of something else I could test using checkboxes as the state and MineSweeper just popped in my head since it's pretty much 480 fancy checkboxes.

Motivation was just to see if I could, then to see what the limits are once I realized I'd be able to.

Thanks for checking it out!

Any chance you could share a screenshot? I can't test safari without owning apple products or paying for a service :(

as far as I know iOS 13.4.1 should be completely compatible.. there might a smaller limit on the number of calc() operations? The spec says it must support a minimum of 20 operations, but I'm (ab)using almost 1000 in a max()

Hmmm... do you know what version you have?

It should work on iOS 11.3 and up... maybe. They might have smaller limits on the number of operations per calc()..? Can't think of anything overtly incompatible.

Unfortunately Safari is today's IE6 in web dev since they're so far behind on so many features. Except it's worse since you can't test without owning their products or paying for a service either... wish I could check it out, there's probably something to learn

This is great! I love how there's a bit of a reward for getting past the difficult middle part of gameplay - when there's not many spots left it goes fast and you can click click click to finish up without sitting there cleaning up your notes or counting 1-9 to figure out the last number or two. This is a big improvement haha

I would say no because the core boolean mechanic that allows CSS-Sweeper to exist cannot be inverted directly (NOT, !). In order to invert anything here, you have to start with an inverted copy of every bit and do the opposite calculation at every &, |, etc to always have a "NOT" var to reference. Like a shadowy, anti-vein, copy of the main logic.

There are several edge cases where a sort of simile of NOT is possible though. You can branch from truthy/falsey into falsy/truthy numbers. And if is something is falsey you can "else" into another action.

Just can't "else" from a truthy state without the ...anti-vein... always being present.

This took ~3.25 days. :)

Since I'm brushing up against the limits of CSS, there's not enough room for a full year :P

haha thanks! :D

I saw that a few days before I started making this actually! https://news.ycombinator.com/item?id=23867569

It's 1.23MB of CSS & HTML - this is meant to be a stress test of the limits, lag is expected for the next several years of average-at-the-time computers!

The timer itself is a CSS animation with 1000 keyframes evenly spread, that runs once for 999s (just realized it should be running for 1000s, oops!). I can't link to lines in the source code because of the 1.23MB filesize but you can search for "timer" in the raw source to see the relevant code: https://raw.githubusercontent.com/propjockey/css-sweeper/mas...

Here's the part that controls when the animation is running:

    #level-none:not(:checked) ~ #ram #timer::before {
      animation: timer step-end 1;
      animation-duration: 999s;
      animation-fill-mode: forwards;
      --pause-if-won: var(--win-state) paused;
      --pause-if-lost: var(--game-over) paused;
      --pause-if-randommenu: var(--randommenu-visible) paused;
      animation-play-state: var(--pause-if-won, var(--pause-if-lost, var(--pause-if-randommenu, running)));
    }

Though the design is responsive to the width of the window, I suspect you mean how slow it is: it's 1.23MB of HTML + CSS, and clicking anything causes almost everything to redraw. It's only a little laggy on my computer but the idea was to test the limits of what's possible and is expected! :)

Thank you for checking it out!

I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results!

I linked to the README since any web devs that see this will probably want to know how buuut here's a link to the game if you want to go hands on:

https://propjockey.github.io/css-sweeper/#randommenu

It's all open source, and I discuss some details of how to do it in that readme, but I am more than happy to answer any questions!

Thanks for checking it out!

Preach! I wholeheartedly agree.

The CSS file is in the repo: https://github.com/propjockey/css-media-vars/blob/master/css...

and the readme links to this in an example link tag: https://unpkg.com/css-media-vars/css-media-vars.css

NPM is for convenience. Can't expect people to jump out of the build env all at once, so providing a vanilla CSS solution as a package is a good way to start the transition. IMO /shrug

IE11 and down is 1.73%, not all 6%. The rest is mostly old versions of popular browsers but tiny browsers like the Chinese QQ Browser are also included at the link provided.

Anyway, I can add a note to call out that it specifically doesn't include IE for people who might not follow the resource linked at the end of the sentence you're talking about where IE11 is the first browser in the list.

Thanks! No direct plans but I'll follow wherever piques my interest.

css-media-vars only happened because I recently began work on the new site/staticlandingpage for augmented-ui (v2 is my primary project right now) and was actively procrastinating because I didn't want to copy paste @media statements everywhere lol

Yes, that would work. Then you just assign your properties to that var as long as you never inspect --empty on the root and you're good to test. Good thinking.

Should be fixed in FF sooner or later though, I reported it in April

Thanks! :D I wanted really badly to be able to do it, so I read the spec very carefully top to bottom a handful of times. And suddenly one day I just realized it. Dove right in and after a bit of progress, I discovered all the logic that was possible too.

I had already been using spaces as a fallback value to do dynamic composition of standard properties ( https://twitter.com/James0x57/status/1233246818118533120 ) so it wasn't too far off to combine it with the "initial" behavior that causes the entire var dependency tree to evaluate to initial, allowing fallback behavior from any point in the tree. :)

Heads up too, Firefox and Chrome both had trouble setting a var to space from the dev tools css panel. So if you play with this further, you may have to deal with that.

I filed bugs to get it fixed though: https://bugzilla.mozilla.org/show_bug.cgi?id=1630488 (not fixed yet)

https://bugs.chromium.org/p/chromium/issues/detail?id=107129... (fixed!)

And minifiers hate it. lol