danab's comments

On: Show HN: DropClicks – A clear the screen game (PWA built with react)

[danab]

Hi all, thanks for trying the game! The goal is to clear the screen of squares before the time runs out. If you think you are stuck you may use the buttons at the bottom to rotate or scramble the puzzle. 12 levels in total, I'll let you figure out the scoring mechanics. I would love to hear your high scores (current high score I know of is my sister with 249,906).

Built with react, which was overall a nice experience. Repo is here https://github.com/danab/DropClicks/, any code feedback would be lovely!

On: Mozilla Thimble

[danab]

Even though I also enjoy not closing my li's, I don't think this is an egregious error. The app appears to be focused on helping novices interested in learning HTML. To those just beginning, it's probably most important to enforce the idea of most elements having opening and closing tags.

However, if their target audience is actual developers...well, they've got lots of other problems to deal with as well.

[daa → danab]

The target audience is very much _NOT_ real developers. Think of it as "lesson 2", where "lesson 1" is something like x-ray goggles: https://webmaker.org/en-US/tools/x-ray-goggles/ for someone who _knows nothing_ to start with. Your average (not geeky) 12-year old or 70-year old, for example.

[zanny → daa]

I'm a computer science graduate (aka, I hope I'm a geek) who did the whole html / css track at Code Academy in about 3 hours (aka, hopefully I'm past lesson 0, I haven't taken any web dev classes or some such ever) but trying to keep all the possible tags in my brain at once is still hard. I feel like this kind of tool does nothing if the newbie doesn't know the tags to match the ideas they have for the page.

On: Solving FizzBuzz with CSS

[danab]

Correct me if I'm wrong, but I don't believe you need any of the :not statements, and instead or (3n) and (5n) you can just use 15n for the 'fizzbuzz'.

The cascade of the CSS will take care of the cases the div is a 'fizzbuzz'.

Sorry I can't post the example, Dabblet is working strangely for me this morning.

CSS that should work:

  /**
   * FizzBuzz with CSS
   */

  body {
  	counter-reset: fizzbuzz;
  }

  div {
  	width: 100px;
  	height: 20px;
  	background: #ddd;
  	margin: 0 0 10px;
  }

  div::after {
  	content: counter(fizzbuzz);
  	counter-increment: fizzbuzz;
  }

  div:nth-child(3n)::after {
  	content: "fizz";
  }  

  div:nth-child(5n)::after {
  	content: "buzz";
  }

  div:nth-child(15n)::after {
  	content: "fizzbuzz";
  }

[jontro → danab]

This should also work:

div:nth-child(3n):after { content: ""; }

div:nth-child(3n):before { content: "fizz"; }

div:nth-child(5n):after { content: "buzz"; }

[danab → jontro]

I retract my answer in favor of this. Clever.

[Sivart13 → danab]

I think your answer is a lot more readable, though. I have to squint at jontro's version for a while before determining that it'll actually product the string "fizzbuzz".

[Flam → jontro]

Brilliant.

[jackiebalzer → danab]

Correct, you don't need the :nots as long as the CSS is in that order, since the :after content would be overridden correctly. You would need them if you changed the order of the statements.

I started the experiment using background color instead of "fizz", border color instead of "buzz", and box-shadow instead of "fizzbuzz" which necessitated the need for :nots since the properties weren't overriding.