JavaScript,TypeScript,CSS等のメモ

console.assert(foo === undefined);  // 予約語でないため保証なし
console.assert(typeof foo === "undefined");  // 長い
console.assert(foo === void 0);  // 可読性悪い
console.assert(foo == null);  // nullとも合致

() => "10000000-1000-4000-8000-100000000000".replace(
        /[018]/g,
        c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
    );

false
0
-0
0n
""
null
undefined
NaN

class FooClass {
  static FIELD = 0;
  field1 = 0;   // public
  #field2 = 0;  // private

  constructor(arg1, arg2) {
    this.field1 = arg1;
    this.#field2 = arg2;
  }

  method1() {}

  get field1() {
    return this.field1;
  }
  set field1(arg) {
    this.field1 = arg;
  }

  static classMethod1() {}
}

// CSSカスタムプロパティ操作
currentStyle = getComputedStyle(element).getPropertyValue("--foo");
element.style.setProperty("--foo","bar");

// CSS静的指定操作
currentStyle = element.style.[property];
element.style.[property] = "value";

// CSS動的指定操作
currentStyle = element.getAttribute("style");
element.setAttribute("style", "property:value;");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "NotoSansJP";
    src: url("/font/nsjp-400.woff2") format("woff2");  /* /static/font/nsjp-400.woff2 */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
}

function getRandomAlphanumeric(nodigit: boolean) {
  const ALPHABETIC = [[65, 25],[97, 25]];  // A:65 [A-Y], a:97 [a-y]
  const ALPHANUMERIC = [...ALPHABETIC, [48, 10]];  // 0:48 [0-9]
  const baseAry = nodigit ? ALPHABETIC : ALPHANUMERIC;
  const [base, rate] = baseAry[Math.trunc(Math.random() * baseAry.length)];
  return Math.trunc(base + (Math.random() * rate));
}

function getTagId(len: number) {
  const ary = Array(len).fill(null).map((_,i) => getRandomAlphanumeric(!Boolean(i)));
  return String.fromCharCode(...ary);
}

console.log(getTagId(4));

function getMSBNumber(state: number): number {
  if (state <= 0 || state > 4294967295) { return 0; }
  return 1 << (31 - Math.clz32(state));
}

<select class="text-char has-[option:checked[value='']]:text-inactive">
  <option value="">placeholder</option>
  <option value="1">foo</option>
  <option value="2">bar</option>
</select>

expect(x).
not. // !

// bool,nullable
toBeTruthy,toBeFalsy // Boolean(x) is true/false
toBeUndefined,toBeDefined // x === void 0 or not
toBeNull // x === null
toBeNaN // Number.isNaN(x)

// primitive
toBe // x === arg
toBeTypeOf // typeof x === arg
toBeInstanceOf // x instanceof arg
toBeOneOf // x is one of allowed ary values as arg

// number
toBeGreaterThan,toBeGreaterThanOrEqual,toBeLessThan,toBeLessThanOrEqual // x>,x>=,x<,x<=
// floating point number
toBeCloseTo // x === arg
// string
toMatch // x.test(/arg/)
toContain // x.includes()

// object
toHaveLength // x.length === arg
toHaveProperty // ObjecthasOwn(x, arg) or x.arg1 === arg2
toEqual // x is same structure(properties) with arg
toStrictEqual // x is same structure(properties) and values with arg

// array
toContain // x.includes()

// error
toThrowError // if error or not

.visually-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  clip: rect(0 0 0 0);
  border: 0;
  overflow: hidden;
  white-space: nowrap;
}

.top-center {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50%;
}
.left-center {
  position: fixed;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.right-center {
  position: fixed;
  top: 50%;
  right: 0;
  translate: 0 -50%;
}
.bottom-center {
  position: fixed;
  left: 50%;
  bottom: 0;
  translate: -50%;
}

<div class="[--hi:#DC143C]">
  <div class="text-(--hi)">hello</div>
</div>