As such that the game does not actually allow you to use the cascade as it should be used is a downside.
I'm glad we agree CSS is unintuitive on many unique and creative fronts.
CSS -> Tailwind
JS -> Typescript
It must be maddening working as a browser dev knowing that the very first thing most devs worth their corn do is immediately go to abstracts so they are able ignore your work as much as they can.
Previously we had things like CoffeeScript, HAML, Pug, SASS/SCSS.
Tailwind is just plain CSS classes and the code generation step is just an optimisation.
For TS there is a proposal for adding type annotations to Javascript. Dunno how far it is, though.
JSX is the odd one out but still closer to HTML than things like HAML, which also had embedded logic but looked nothing like HTML.
"I mean, would you write code on your phone? Actually, don't answer, because I don't want to know."
Yes I would - I do that pretty often these days (partly because LLMs called from my phone do the frustrating typing part for me.)
I find it convenient to do both some programming and exploring documentation and new technologies on a tablet, and just discard those that don't allow me to. If you're selling to computer professionals you shouldn't try to preempt the expected problem of customers complaining that your services don't render right on a small iPhone.
Phones are definitely usable as desktops nowadays, especially if you stick it in a cardboard and can actually see (make use of) most of the pixels on the screen. People just haven't gotten used to it yet. They're not slow either, and for some workloads apparently very fast: I recently also noticed my phone is faster at certain ffmpeg codecs than my laptop!
Ergonomically it's quite good, your fingers end up in a convenient place and when you want to reallocate your body you remove and reset the circles to new positions. The drawback is that on a phone you need to use both hands to type, but if you're doing something like programming or text editing you'll likely be rather involved anyway.
It's also nice that the keyboard doesn't hide half the screen, instead you can look through the circles or touch outside of them to temporarily hide the keyboard entirely.
Edit: Right, forgot to mention perhaps the best functionality, the sixth circle repeats the last bytes it sent, so if you do some action you have a button to just do it again and again. Comes in handy all the time.
https://play.google.com/store/apps/details?id=de.software_la...
I'm mostly in a terminal, commonly in vim, where the 'regular keyboard' experience makes text and code editing quite convenient compared to the usual software keyboard suspects. In web forms and the like it's also fairly convenient, one can send move left and then hit repeat until the correct position (or any number of arrow key equivalents for moving rows). I hardly ever move the cursor by pointing somewhere in the text.
It took me something like three weeks to become really fluent in Penti, back in 2017-2018 I think.
Here are my solutions, for anyone who is interested: https://gist.github.com/meew0/98cca86cd3f64ee71fe39bf747aa01...
Your objective is to get Peg A over Hole A.
Spoiler free hint (reverse text to read):
)tnetsisnoc yats ot tsuj stinu wv esu ot tnaw yam uoy dna( nigram gnisu sevlovni noitulos ehT
> The mechanics of the puzzles are simple: for each peg, there is a hole, and each peg must overlap with its corresponding hole. To accomplish this, you will add CSS properties to certain divs.
Fun once one figures it out. Text editing is a little annoying as one can't highlight with the cursor and delete.
Ran into a weird bug on puzzle 2 where adding a `flex-flow` property and then deleting it also seems to unset the `flex-direction` property on the underlying element. Probably should be disallowed under the no-mixing-shorthand rule I guess.
Also could you make it so that clicking inside a text box doesn't trigger the drag effect? It would be nice to be able to highlight/double-click text to delete/replace it.
It seems to me that CSS suffers from the "1 billion ways to do the same thing but very slightly differently" problem.
<I'm not affiliated with Josh in any way>
Just an FYI... Your screen size plays into the solutions. Make your browser width 1350px.
transform: translate(x, y)
It seems like I can trivially complete the third puzzle with the same approach.
Aah… Now I see. You're meant to click on each element to view its properties and add your own. Silly me.
> for each peg, there is a hole, and each peg must overlap with its corresponding hole
I got some warnings like "this is not a best practice and I don't like bad practices". Like hey, who are you to judge me like that? I'm offended.
Also typo in "Unfortuantely" message when you use the forbidden transform
Hopefully “Marcos” doesn’t need a job any time soon! :D
Unsure if the site is supposed to be satire or something because that is the message I received, however, CSS, including responsive design, is actually simple to pick up.
Note that I’m not a designer at all (because THAT requires actual skill), just a dev.
There's any number of reasons the author might not support mobile for this personal, free project. "I don't feel like it" would be a perfectly valid one.
Also, based on their GitHub profile, they already have a job (at Google).
You dare to call this game "CSS Hell", and then tell me that it will be TOO hell for me to play on a phone???
I USE CSS EVERY DAY. YOU UNDERESTIMATE MY TOLERANCE FOR SELF-HARM, MORTAL.
*opens site in mobile in desktop mode