riggsdk
I spent waaay too long trying to figure out why my CSS rule didn't work. It doesn't accept me to overwrite an already existing one. The rules did not specify this at all. It is not clear that the game wants me to find another rule that fixes the problem instead of adding a single perfectly valid line of CSS that does it. There is a huge difference between those two. CSS being cascading meaning that any CSS property coming after an initial rule will overwrite the previous one (in part or fully). It would be really nice if the game would tell me if the rule I added wasn't allowed instead of just silently failing to do anything with no feedback.
1dom
It's a perfect representation of CSS: it looks and feels like it should do what you need, but it doesn't _technically_ do what it's supposed to do, so you spend a few hours _trying_ to make sense of it, falling back to just random fuzzing and trial and error, before concluding it's all broken and finally accepting it in its current wonky form, trusting that in some browser, somewhere, it works.
Devasta
HTML -> JSX
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.
craftkiller
You can still play that way if you want. Just open your browser's dev tools and edit the CSS rules inside the dev tools. Once you have them overlapping, you just need to do something to trigger the victory check which can be accomplished by doing basically anything (resize the window, click on a circle, type something, I haven't found any action that doesn't trigger the victory check yet).
tobinfekkes
I ran into the same thing and just quit. I would have greatly appreciated this little piece of feedback in the UI.
marktolson
I thought the site was broken for the exact same reason. Instead of being a troubleshooting / practice type test it's more of a puzzle that I do not care to solve.
archerx
Yea I found that stupid as well. I opened the inspector and did it there and it accepted my answer. I decided not to continue afterwards.
simonw
I got this message on my phone:
"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.)
Biganon
I think I'm going to be sick
ivanjermakov
I can't stand when websites block me off like that. At least let me freaking see what it is about...
bombela
In Firefox Android I can request the desktop page explicitly.
lolinder
Doesn't work on my phone on this site—it's detecting the viewport size, and even in landscape with desktop page mode turned on the site refuses to show anything.
cess11
Tried that on some service promoted here yesterday, they still figured out I was on Android and kept blocking me. Happens rather often, actually.
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.
dtj1123
Vivaldi also lets you do this
mediumsmart
iOS safari requesting desktop site no luck. But Orion from Kagi shows the desktop version.
asplake
I started the SolidJS tutorial on my iPhone this morning. Was impressed that it worked at all, but I couldn’t find a way to copy & paste, and switched to my MacBook. Better than giving up I guess…
jeffgreco
Mostly in ChatGPT Canvas/Claude Artifacts or the like?
simonw
Yes exactly - usually in Artifacts, which I then copy and paste into the GitHub web editor in order to ship them via GitHub Pages to https://tools.simonwillison.net/
edoceo
From your phone?! With that tiny screen?
petahpintah
[dead]
zcror
an extension to run with my phone would be nice
SadWebDeveloper
I didn't understand what is the point of the first challenge? anyone care to explain me what is the objective/task because there are just two circles and basically no instructions, kinda feels like a real job (lol)
spartanatreyu
1. Peg A and Hole A to see the CSS on both elements 2. Peg A can have one more rule added to it (that you can specify)
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
degamad
From the opening page of the site:
> 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.
kevinsync
I'm very, very good at CSS and this is absolutely maddening. I grudgingly respect it a lot more because it's really fuckin tough LOL. No overwrites, no transforms, locked elements you can't manipulate, limited amount of CSS property "slots" you're allowed per puzzle. In the age of AI where answers are immediate, hats off to something this absolutely infuriating hahaha
agos
at the second puzzle I went all cocky with a transform and the pop up message telling me I couldn't use it really got me hooked - now, this is a challenge
manuhabitela
cool stuff :)
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.
kirjavascript
transform is forbidden but -webkit-transform seems to work :^)
dheera
I did exactly this too haha
odo1242
By the way: the website restricts use of properties like transform() and animation, but the same restriction doesn’t apply to the transition property. Might be worth noting.
overhead4075
Guess I'll go back to coding on my phone :'(
skeptrune
It would be fun to use this as a motivational punishment lol. Something like "team member who does the least amount of code review has to go through CSS hell" :).
MarcelOlsz
"team member quits on the spot .003s later"
jeffgreco
I got stuck on #2 and had to look up the solution, which still doesn't seem to make sense?
brianush1
apparently the pegs only have to touch the holes, they don't have to line up perfectly
jeffgreco
ahhhhhhh thanks
thrownaway561
how do you look up the solutions?
jeffgreco
The intro instructions link to https://github.com/marcos-acosta/css-hell/blob/main/solution...
thrownaway561
https://github.com/marcos-acosta/css-hell/blob/main/solution...
Just an FYI... Your screen size plays into the solutions. Make your browser width 1350px.
jeffgreco
Does it? Aren't units viewport relative?
It doesn't allow margin-right, you have to use margin to set the right margin. This may be someone's personal hell, not mine.