alt Hacker NewsCSS Hell
Comments
Normalize adding a screenshot of what we are missing when you decide for us that a site isn’t mobile friendly.
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.
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.)
This was a great challenge, thanks for sharing! I do agree that the messaging could be improved a bit about what is possible and what is not.
Here are my solutions, for anyone who is interested: https://gist.github.com/meew0/98cca86cd3f64ee71fe39bf747aa01...
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
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 peg is bigger than the hole in #1 making me think I need to scale the peg down. Turns out you don't actually need to get the peg inside the hole, you only need them to touch!
Fun once one figures it out. Text editing is a little annoying as one can't highlight with the cursor and delete.
transform is forbidden but -webkit-transform seems to work :^)
Cool game!
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 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" :).
Guess I'll go back to coding on my phone :'(
Took me a while to figure out, but "peg" and "hole" naming system was really throwing me off, as I somehow convinced myself that both peg and hole must perfectly match. Probably that old front-end developer thinking got me, from times when I tried to make websites pixel perfect, according to design.
Is it possible to construct a meta-system or constraint-system under which it's impossible or very difficult to construct 2 functions that effectively result in the same outcome? Does this exist?
It seems to me that CSS suffers from the "1 billion ways to do the same thing but very slightly differently" problem.
I got stuck on #2 and had to look up the solution, which still doesn't seem to make sense?
I'd love to plug Josh Comeau's excellent CSS course https://css-for-js.dev/ Expensive but worth every penny.
<I'm not affiliated with Josh in any way>
I'm confused. I completed the first two puzzles just applying a simple
transform: translate(x, y)
It seems like I can trivially complete the third puzzle with the same approach.
I like how I can click-drag one of the CSS text fields and still move the box.
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.
!important does not work? This is really hell.
typo of blasphemized in: "you blashpemized Cascading Style Sheets", actually should be blasphemed even
Doesn't work on Mobile Safari or Brave on an iPad Pro m4. (x) button and add css don't do anything.
Nice. Feels abit like TAS-100, "the assembler game nobody asked for", but a bit more realistic.
On the first level margin-left:660px got accepted as a solution even though the peg barely overlaps.
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.
First puzzle was hard, margin-right was not working. But you can't double click or use ctrl-arrow or ctrl-backspace which is infuriating.
Also typo in "Unfortuantely" message when you use the forbidden transform
an extension to run with my phone would be nice
#9 really got me.
> Web site created using create-react-app bro...
I never understood why anyone would want to learn CSS
“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.
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.