Omnimaga
General Discussion => Technology and Development => Web Programming and Design => Topic started by: Deep Toaster on September 28, 2020, 04:58:50 pm
-
Just wanted to show off a horrifying project I've been working on for fun:
https://fishbotwilleatyou.com/css/ (https://fishbotwilleatyou.com/css/)
I'm still working on the last two demos and making it more responsive for tall-screen/mobile users, but you get the idea—it's a collection of really stupid things that are technically possible in nothing but HTML and CSS.
Demos that exist:- Double-click handler
- File browser
- Modal dialog
- An arcade reaction game
Demos that I'm working on:- A text adventure game
- A clock of some sort
-
That is really freaking cool :0
-
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.
I'd be interested to compare power consumption of those demos implemented in JavaScript. Did you write them directly in CSS or are you using something like SASS?
-
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.
What's being opened and closed? If you're opening a first child directory (in the middle section), you might be hitting the .. that shows up right after.
I'd be interested to compare power consumption of those demos implemented in JavaScript.
Someone else also suggested doing that. It'd definitely be interesting to see but I'm lazy :( I'd bet it's a lot lighter than an equivalent React app.
Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
-
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.
What's being opened and closed? If you're opening a first child directory (in the middle section), you might be hitting the .. that shows up right after.
Whoops, meant to say dialog not browser. Upon further review, it looks like the bug actually is that if you click and drag the dialog wont close even though the click starts and ends in an area that should close the dialog.
I'd be interested to compare power consumption of those demos implemented in JavaScript.
Someone else also suggested doing that. It'd definitely be interesting to see but I'm lazy :( I'd bet it's a lot lighter than an equivalent React app.
I would suggest comparing against a native JavaScript and a React app if you do compare.
Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
Oof :(
-
Small bug with the file browser. You can open and then immediately close it by double-clicking on the button. It looks like input isn't properly being masked when it's open.
What's being opened and closed? If you're opening a first child directory (in the middle section), you might be hitting the .. that shows up right after.
Whoops, meant to say dialog not browser. Upon further review, it looks like the bug actually is that if you click and drag the dialog wont close even though the click starts and ends in an area that should close the dialog.
Oh gotcha. Yeah, it's intentional that the modal closes when you click in the shade. Maybe there's an issue with dragging tho.Did you write them directly in CSS or are you using something like SASS?
Directly in CSS :)
Oof :(
A good amount of the CSS for the Whac-A-Mole game (including the randomized position animation) is generated from a Python script.