New page: color modules example

[estelle]

Example for new CSS color module page.

[teoli2003]

Made a first pass. We also need to run Prettify on this file; I'll do a last pass afterward (it is difficult to read like this).

Unless you know why, you should always use === instead of == and textContent instead of innerHTML if there is no HTML involve.

[estelle]

I added opacity * 1 to force it to a number so I could do opacity === 1. HTML form controls return strings, hence the == 1

[estelle]

@teoli2003 We went with

function hexOpacity(color, opacity)  {
  let char = "00";
  if (opacity > 0) {
    char = Math.floor(opacity * 255).toString(16);
  }
  return `${color}${char}`;
}

Is it also ok to go with the following way of declaring a function (the first line), or against our best practices guidelines?

const hexOpacity = (color, opacity) => {
  let char = "00";
  if (opacity > 0) {
    char = Math.floor(opacity * 255).toString(16);
  }
  return `${color}${char}`;
}

[teoli2003]

There are a few last small changes, but I find this much easier to read already!

[teoli2003]

@teoli2003 We went with

function hexOpacity(color, opacity)  {
  let char = "00";
  if (opacity > 0) {
    char = Math.floor(opacity * 255).toString(16);
  }
  return `${color}${char}`;
}

Is it also ok to go with the following way of declaring a function (the first line), or against our best practices guidelines?

const hexOpacity = (color, opacity) => {
  let char = "00";
  if (opacity > 0) {
    char = Math.floor(opacity * 255).toString(16);
  }
  return `${color}${char}`;
}

When possible, I prefer to have a function definition. I don't see what the longest syntax brings to readability.

(I'm not a fan of setting the else value before the if, but that's not against our rules and a matter of taste)

[teoli2003]

👍