James0x57

5 ms·

1.
by James0x57 6y ago
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?
2.
by James0x57 6y ago
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 HTM
3.
Show HN: A CSS file that reshapes the web(github.com)
14 points by James0x57 6y ago|2 comments
4.
by James0x57 6y ago
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
5.
by James0x57 6y ago
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
6.
by James0x57 6y ago
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!
7.
by James0x57 6y ago
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 :)
8.
by James0x57 6y ago
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
9.
by James0x57 6y ago
lmao, I've come full circle. Excellent callout. hahaha
10.
by James0x57 6y ago
haha, awesome! You nailed it. It's really cool to see it being tested out in the world! Thank you for sharing!
11.
by James0x57 6y ago
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 :)
12.
by James0x57 6y ago
the timer stops at 999 because that's what it does in the real minesweeper, you can keep playing though!
13.
by James0x57 6y ago
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 ch
14.
by James0x57 6y ago
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() ope
15.
by James0x57 6y ago
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
16.
by James0x57 6y ago
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 u
17.
by James0x57 6y ago
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 a
18.
by James0x57 6y ago
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
19.
by James0x57 6y ago
haha thanks! :D
20.
by James0x57 6y ago
I saw that a few days before I started making this actually! https://news.ycombinator.com/item?id=23867569
21.
by James0x57 6y ago
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!
22.
by James0x57 6y ago
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 s
23.
by James0x57 6y ago
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 li
24.
Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript(github.com)
390 points by James0x57 6y ago|92 comments
25.
by James0x57 6y ago
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.
26.
by James0x57 6y ago
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&
27.
by James0x57 6y ago
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 active
28.
by James0x57 6y ago
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
29.
by James0x57 6y ago
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 wa
30.
by James0x57 6y ago
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.mozill

More ›