by Vincenius on 1/17/22, 8:13 AM with 64 comments
by woolion on 1/17/22, 12:34 PM
It feels like it is missing ways to help you get to understand things on your own, so a bit more like a test than a real game. Maybe a codegolf scoring (number of characters) and/or semantic scoring (number of atomic expressions used) would help?
As somebody who's doing frontend excessively rarely, it would feel more rewarding to see it compared to some good practices answers. Maybe store the results so you could display the most frequent answers in a future iteration?
Took 16 minutes, trying to understand more than to speedrun. Btw, link of hint 10 is broken (there's an extraneous comma).
The dynamic selection dots are quite neatly done. I found it quite fun and it seems like there are many ways to add interesting features!
by iheredia on 1/17/22, 9:32 AM
The use of `:not` is way more powerful that I usually remember. For example, the second exercise asks to select all the <p> except the one with class="foo"
<div>
<p></p>
<p class="foo"></p>
<p></p>
<p></p>
</div>
This can be done with p:not(.foo)
But also by selecting every thing that we don't want and then negating that. :not(div, .foo)
by 414owen on 1/17/22, 10:59 AM
Mine displays the elements as nested blocks, instead of printing a tree.
by chrismorgan on 1/17/22, 11:03 AM
(You could write <input/>, the old XML syntax for self-closing tags, but I strongly recommend against doing that because it teaches a wrong mental model: that trailing slash is permitted in HTML syntax on void elements for XHTML compatibility but does not close an element: it’s just ignored.)
by TomAnthony on 1/17/22, 11:14 AM
I feel like there should be another scoring axis rather than just time. I think selector length would be wrong, but something like selector complexity, or how robust the selector is to updates.
I scored 3m 50s, but felt like some of my selectors were a bit 'dirty'.
by Nadya on 1/17/22, 6:21 PM
It would have been nice to see what the intended solutions after because otherwise I have no way of finding out that using :enabled was the intended way and not input:not(disabled), button:not(disabled). Realized after I could have used an :is there but I don't use :is often in work due to browser support for IE so it didn't cross my mind at the time. It would also be nice to see that #one, #three, #five, #nine (or whatever the ID's where for that puzzle) was indeed the "intended" answer as a kind of trick question.
Without reading HN I would not have learned I was meant to use :enabled.
by superasn on 1/17/22, 10:46 AM
by mcv on 1/17/22, 10:15 AM
by grenoire on 1/17/22, 9:57 AM
by mrjay42 on 1/17/22, 8:15 PM
by tiffanyh on 1/17/22, 9:45 PM
Wish it had the answer as well, not just hint.
by codeptualize on 1/17/22, 8:45 AM
by emaro on 1/17/22, 1:47 PM
by Zekio on 1/17/22, 8:33 AM
by 255 on 1/17/22, 11:16 AM
I would extend its usefulness by rewarding shorter answers, as you could cheat a lot by using long nth-child selectors for everything which is basically unusable in actual stylesheets
by jdefelice on 1/17/22, 11:56 AM
by sam_goody on 1/17/22, 6:18 PM
It would be good if there was a way I could have seen other users' answers, so I could learn new tricks.
by partiallypro on 1/17/22, 4:54 PM
by nayuki on 1/17/22, 4:46 PM
by MrPatan on 1/17/22, 11:16 AM
by 0lucky on 1/17/22, 11:58 AM
by soperj on 1/17/22, 9:56 PM
by proee on 1/17/22, 9:37 PM
by throwoutway on 1/17/22, 3:16 PM