alt.hn

4/22/2025 at 9:58:50 PM

CSS Hell

 https://csshell.com/

by gaws

4/23/2025 at 12:16:20 AM

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.

by riggsdk

4/23/2025 at 12:47:36 AM

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.

by marktolson

4/23/2025 at 2:25:45 AM

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).

by craftkiller

4/23/2025 at 12:35:23 PM

Exactly what I did to the first one. `left: 12xxpx` did it. Then I got back here to check if I am only one dumb enough to not understand why it does not work.

by npodbielski

4/23/2025 at 4:02:49 AM

I ran into the same thing and just quit. I would have greatly appreciated this little piece of feedback in the UI.

by tobinfekkes

4/23/2025 at 7:23:01 AM

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.

by archerx

4/23/2025 at 9:23:02 AM

Same, because of the lack of feedback I genuinely thought it didn't work. Especially considering the fact many editing things don't work (double click doesn't select, cmd+(shift+)arrows doesn't work, etc.)

by thiht

4/23/2025 at 8:06:45 AM

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.

by 1dom

4/23/2025 at 9:00:41 AM

I'm pretty good at handling the cascade and knowing how things work, so this experience you are describing is not mine where CSS is concerned, I doubt I've had to do several hours of trying to make sense of any CSS for probably 5-6 years.

As such that the game does not actually allow you to use the cascade as it should be used is a downside.

by bryanrasmussen

4/26/2025 at 8:09:39 AM

"I understand cascading and so I know it isn't what should be done with Cascading StyleSheets. It is right this tool to simulate CSS doesn't support CSS' nominative feature "

I'm glad we agree CSS is unintuitive on many unique and creative fronts.

by 1dom

4/23/2025 at 8:25:29 AM

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.

by Devasta

4/23/2025 at 9:32:11 AM

I feel however that trendy tech is moving closer to the browser.

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.

by whstl

4/23/2025 at 9:26:01 AM

C++ I can do.

CSS I leave to masochists.

by damnitbuilds

4/23/2025 at 10:09:35 AM

Ah just assumed it was broken, found the dev tools 'hack' Game is very much missing an intro

by wjdp

4/23/2025 at 10:37:22 AM

Normalize adding a screenshot of what we are missing when you decide for us that a site isn’t mobile friendly.

by unangst

4/23/2025 at 5:03:21 PM

OC here- I think that's a really good suggestion, I'll add something like that :) I added that screen while I was quickly cleaning up an old project and didn't have the time to do a full responsiveness redesign. +1 that it's a little inconsiderate to all the small-screen users

by spaghetti-code

4/23/2025 at 2:55:39 PM

Also, I'm viewing this on a large iPad screen. It's plenty wide. Talk about being user-hostile.

by crazygringo

4/23/2025 at 10:42:20 AM

Yeah, I’m not gonna go back on a desktop later.

by prokopton

4/23/2025 at 8:57:20 AM

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.

by KolyaKornelius

4/23/2025 at 12:43:55 AM

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.)

by simonw

4/23/2025 at 2:00:31 AM

I can't stand when websites block me off like that. At least let me freaking see what it is about...

by ivanjermakov

4/23/2025 at 2:31:26 AM

In Firefox Android I can request the desktop page explicitly.

by bombela

4/23/2025 at 3:59:15 AM

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.

by lolinder

4/23/2025 at 6:34:33 AM

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.

by thegeekpirate

4/23/2025 at 11:10:15 AM

Firefox on android makes the viewport size bigger, but maybe it depends on the original size of your phone

by pfg_

4/23/2025 at 7:38:14 AM

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.

by cess11

4/23/2025 at 10:47:10 AM

[dead]

by gnuly

4/23/2025 at 6:31:12 AM

Vivaldi also lets you do this

by dtj1123

4/23/2025 at 4:33:19 AM

iOS safari requesting desktop site no luck. But Orion from Kagi shows the desktop version.

by mediumsmart

4/23/2025 at 7:04:48 AM

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…

by asplake

4/23/2025 at 8:57:47 AM

I think I'm going to be sick

by Biganon

4/23/2025 at 1:32:19 AM

Mostly in ChatGPT Canvas/Claude Artifacts or the like?

by jeffgreco

4/23/2025 at 1:51:34 AM

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/

by simonw

4/23/2025 at 4:07:05 AM

From your phone?! With that tiny screen?

by edoceo

4/23/2025 at 4:28:18 AM

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 lucb1e

4/23/2025 at 7:25:39 AM

I feel like the touch inputs are a bigger hinderance than the screen. Manipulating text with a touch screen keyboard is torture.

by archerx

4/23/2025 at 7:43:39 AM

I find PentiKeyboard to strike a nice balance. You get six circles sized depending on where you put your fingers, and they contain most of what you expect from a regular keyboard, plus convenience chord for Ctrl+b to hasten tmux actions, in-keyboard cheat sheet and a character lookup and picker.

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...

by cess11

4/23/2025 at 9:22:58 AM

Wow that’s interesting but I don’t think I would ever use that. I can actually type really quickly with the touch keyboard but the problem is going back to correct things. On iOS getting the cursor to move back to a previous part of the text to fix an error is and adventure in frustration. Even holding down the space button and draggging the text cursor around is awful. A lot of the times it’s just faster and easier to erase large chunks of text and rewrite it.

by archerx

4/23/2025 at 12:48:30 PM

Yeah, I really missed Penti when I had to use an iOS device for work for a while.

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.

by cess11

4/23/2025 at 4:24:09 AM

I always buy the iPhone with the largest screen, but yeah.

by simonw

4/23/2025 at 2:12:42 AM

[dead]

by petahpintah

4/23/2025 at 12:55:00 PM

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...

by meew0

4/23/2025 at 2:20:55 PM

It wasn't clear at all to me that the peg doesn't need to overlap the holes perfectly, I was almost ready to give up at lvl 2! Thank you for the solution

by gbalduzzi

4/23/2025 at 1:02:32 AM

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

by kevinsync

4/23/2025 at 8:20:20 AM

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

by agos

4/23/2025 at 5:15:43 AM

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)

by SadWebDeveloper

4/23/2025 at 5:51:16 AM

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

by spartanatreyu

4/23/2025 at 5:40:04 AM

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.

by degamad

4/23/2025 at 4:38:24 PM

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.

by croemer

4/23/2025 at 1:43:45 AM

transform is forbidden but -webkit-transform seems to work :^)

by kirjavascript

4/23/2025 at 2:57:14 AM

I did exactly this too haha

by dheera

4/23/2025 at 5:59:12 PM

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.

by kyle-rb

4/24/2025 at 3:09:35 PM

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.

by butz

4/22/2025 at 11:16:01 PM

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" :).

by skeptrune

4/23/2025 at 4:55:36 PM

OC here :) I originally made this two years ago as a gift for my friend who hates front-end development, so not too far off haha. Although he didn't do anything wrong, it was just his birthday ¯\_(ツ)_/¯

by spaghetti-code

4/23/2025 at 12:33:26 AM

"team member quits on the spot .003s later"

by MarcelOlsz

4/23/2025 at 1:01:33 AM

Guess I'll go back to coding on my phone :'(

by overhead4075

4/23/2025 at 1:23:41 PM

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.

by djoldman

4/23/2025 at 4:58:23 PM

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>

by egonschiele

4/23/2025 at 1:25:28 AM

I got stuck on #2 and had to look up the solution, which still doesn't seem to make sense?

by jeffgreco

4/23/2025 at 3:08:33 AM

apparently the pegs only have to touch the holes, they don't have to line up perfectly

by brianush1

4/23/2025 at 3:19:24 AM

ahhhhhhh thanks

by jeffgreco

4/23/2025 at 6:43:31 AM

I'm confused. I completed the first two puzzles just applying a simple

    transform: translate(x, y)
I thought I wasn't allowed to?

It seems like I can trivially complete the third puzzle with the same approach.

by yakshaving_jgt

4/23/2025 at 8:21:54 AM

did you do it with your browser's developer tools?

by agos

4/23/2025 at 11:09:25 AM

Yes. Maybe I was supposed to write the code somewhere else and I didn't realise.

Aah… Now I see. You're meant to click on each element to view its properties and add your own. Silly me.

by yakshaving_jgt

4/23/2025 at 1:51:32 AM

I like how I can click-drag one of the CSS text fields and still move the box.

by 90s_dev

4/23/2025 at 5:28:55 AM

/s ?

by Dansvidania

4/23/2025 at 5:54:40 AM

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.

by odo1242

4/23/2025 at 4:26:46 PM

!important does not work? This is really hell.

by butz

4/23/2025 at 6:07:03 PM

Doesn't work on Mobile Safari or Brave on an iPad Pro m4. (x) button and add css don't do anything.

by cantrecallmypwd

4/23/2025 at 4:27:20 PM

typo of blasphemized in: "you blashpemized Cascading Style Sheets", actually should be blasphemed even

by croemer

4/23/2025 at 10:29:41 AM

Nice. Feels abit like TAS-100, "the assembler game nobody asked for", but a bit more realistic.

by rightbyte

4/23/2025 at 10:29:48 AM

On the first level margin-left:660px got accepted as a solution even though the peg barely overlaps.

by hapidjus

4/23/2025 at 3:24:02 PM

That's literally the challenge. Get the peg to overlap the holes. That's it. It literally says this on the first page:

> for each peg, there is a hole, and each peg must overlap with its corresponding hole

by jasonlotito

4/23/2025 at 4:02:14 PM

Sure, I just assumed that the peg should overlap the entire hole and not just by a couple of pixels. No need to be salty about it.

by hapidjus

4/23/2025 at 8:10:00 AM

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.

by manuhabitela

4/23/2025 at 9:04:09 AM

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

by h1fra

4/23/2025 at 8:45:44 AM

an extension to run with my phone would be nice

by zcror

4/23/2025 at 5:53:17 AM

#9 really got me.

by gaoryrt

4/23/2025 at 3:36:33 AM

> Web site created using create-react-app bro...

by Kamillaova

4/23/2025 at 11:31:58 AM

I never understood why anyone would want to learn CSS

by UltraSane

4/23/2025 at 12:48:19 AM

“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.

by eek2121

4/23/2025 at 3:09:38 AM

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).

by sampullman

4/23/2025 at 6:13:18 AM

[flagged]

by ForOldHack

4/23/2025 at 6:43:34 AM

Silly bikes, free Oreos, and above market salary doesn't seem too bad as far as jobs go.

by sampullman

4/23/2025 at 5:27:13 AM

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

by bpev

4/23/2025 at 6:12:15 AM

Uh uh... I am going to count your response as 'Challange accepted.' What multi pain/pane does your phone run?

by ForOldHack

4/23/2025 at 7:36:19 AM

ngl running in phone was definitely not ideal

by bpev