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.
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).
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.
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…
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.
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/
Depends what you call tiny. I've only found one "tiny" phone (that is, a normal smartphone size ten years ago) with a modern chipset (so I don't need to replace it in <=3 years) and that's the Jelly Max... but it's only purchasable directly from China and their warranty page is broken so I don't want to throw my coins into a slot machine. Can't find even a single other model, no matter the price. Xperia 5 V comes close but is only available second hand; Xperia 10 VI has a pretty slow SoC. Everything else is a size that people amusedly called "phablet", or was literally a tablet
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!
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.
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)
> 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.
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
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" :).
“Your viewport concerns me.
Hey! You're seeing this message because of your screen- specifically, the width of it. I'm hyped you're here, but this game wasn't designed for small screens, and you will not enjoy attempting it. I mean, would you write code on your phone? Actually, don't answer, because I don't want to know. Anyway, hope to see you soon on a desktop.
-Marcos”
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.
Like many things, CSS is easy to pick up and hard to master.
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).
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.
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).
I ran into the same thing and just quit. I would have greatly appreciated this little piece of feedback in the UI.
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.
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.)
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…
I can't stand when websites block me off like that. At least let me freaking see what it is about...
In Firefox Android I can request the desktop page explicitly.
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.
Desktop mode using Firefox v137.0.2 as well as Chrome v135.0.7049.100 on a Pixel 7a worked for me, in both portrait and landscape.
Vivaldi also lets you do this
iOS safari requesting desktop site no luck. But Orion from Kagi shows the desktop version.
Mostly in ChatGPT Canvas/Claude Artifacts or the like?
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/
From your phone?! With that tiny screen?
Depends what you call tiny. I've only found one "tiny" phone (that is, a normal smartphone size ten years ago) with a modern chipset (so I don't need to replace it in <=3 years) and that's the Jelly Max... but it's only purchasable directly from China and their warranty page is broken so I don't want to throw my coins into a slot machine. Can't find even a single other model, no matter the price. Xperia 5 V comes close but is only available second hand; Xperia 10 VI has a pretty slow SoC. Everything else is a size that people amusedly called "phablet", or was literally a tablet
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!
I always buy the iPhone with the largest screen, but yeah.
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.
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)
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.
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
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
transform is forbidden but -webkit-transform seems to work :^)
I did exactly this too haha
Guess I'll go back to coding on my phone :'(
I'm confused. I completed the first two puzzles just applying a simple
I thought I wasn't allowed to?It seems like I can trivially complete the third puzzle with the same approach.
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" :).
"team member quits on the spot .003s later"
#9 really got me.
I got stuck on #2 and had to look up the solution, which still doesn't seem to make sense?
apparently the pegs only have to touch the holes, they don't have to line up perfectly
ahhhhhhh thanks
how do you look up the solutions?
The intro instructions link to https://github.com/marcos-acosta/css-hell/blob/main/solution...
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.
Does it? Aren't units viewport relative?
I like how I can click-drag one of the CSS text fields and still move the box.
/s ?
> Web site created using create-react-app bro...
“Your viewport concerns me. Hey! You're seeing this message because of your screen- specifically, the width of it. I'm hyped you're here, but this game wasn't designed for small screens, and you will not enjoy attempting it. I mean, would you write code on your phone? Actually, don't answer, because I don't want to know. Anyway, hope to see you soon on a desktop. -Marcos”
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.
Like many things, CSS is easy to pick up and hard to master.
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).
Oh that place with the silly bikes and free Oreos? No wonder.
Silly bikes, free Oreos, and above market salary doesn't seem too bad as far as jobs go.
My mind went something more like this:
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
Uh uh... I am going to count your response as 'Challange accepted.' What multi pain/pane does your phone run?