RAX7

https://developer.mozilla.org/en-US/docs/Web/SVG/E...

const uniqueCellsCount = json.data.reduce((acc, c) => acc.add(c.cell), new Set()).size;

Не забудь ставить на паузу видео слайдах которые не видны в данный момент.

Это называется "липкий хедер"
https://www.google.com/search?q=%D0%BB%D0%B8%D0%BF...
https://www.youtube.com/results?search_query=%D0%B...

https://jsfiddle.net/9xqm23yb/

const watch = document.querySelector("#watch");
let milliseconds = 0;
let timer;

function millisToHuman(milliseconds) {
  return new Date(milliseconds).toISOString().slice(11, 22);
}

const startWatch = () => {
  watch.classList.remove("paused");
  clearInterval(timer);
  timer = setInterval(() => {
    milliseconds += 10;
    const timeStr = millisToHuman(milliseconds);
    result.innerHTML = timeStr;
    watch.innerHTML = timeStr;
  }, 10);
};

const pauseWatch = () => {
  watch.classList.add("paused");
  clearInterval(timer);
};

const resetWatch = () => {
  watch.classList.remove("paused");
  clearInterval(timer);
  milliseconds = 0;
  watch.innerHTML = "00:00:00:00";
  result.innerHTML = "00:00:00:00";
};

document.addEventListener("click", (e) => {
  const element = e.target;
  if (element.id === "start") startWatch();
  if (element.id === "pause") pauseWatch();
  if (element.id === "reset") resetWatch();
});

function newLapTime() {
  const lap = document.querySelector('.lapContainer');
  lap.innerHTML += `<br/><div> ${millisToHuman(milliseconds)} </div>`;
  milliseconds = 0;
}

throttle не вызывает переданную ему функцию, а лишь создает обертку для нее.

const throttledAddComment = throttle(addCommentFn, 5000);
sendButton.click((e) =>{
    e.preventDefault();
    throttledAddComment();
});

Подобные эффекты делают на основе шума Перлина https://thebookofshaders.com/11/?lan=ru
А если установить расширение Spector.js, то можно посмотреть код шейдеров, которые создают такой эффект.

Плавное изменение z-index (даже если такое и было бы возможно) тебе ничем не поможет, т.к. z-index указывает лишь порядок отрисовки элементов. Пока один элемент выше остальных он отбрасывает тень на соседние элементы, а соседние элементы не оказывают на него никого влияния. Но как только он оказывается ниже (за счет изменения z-index или transform: traslatez) тень с соседних элементов пропадает и он сам оказывается затенен соседями. Чтобы избавится от этого резного перехода нужно разделить блок на слой с элементами и слой с тенями и анимировать изменение тени.

https://jsfiddle.net/8htdgrkz/

https://codesandbox.io/s/swiper-vertical-forked-6l...

Можно с помощью оператора instanceof

function func(data) {
  if (data instanceof Event) {
    var id = data.target.id;
  } else {
    var id = data;
  }
}

Но лучше использовать кастомные события и проверять наличие поля detail в объекте события

function func(event) {
  const id = event.detail ? event.detail.id : event.target.id;
}
domElement.dispatchEvent(new CustomEvent('event-name', { detail: { id: 'id-42' } }));

Сделай вспомогательную функцию для загрузки картинок, которая будет возвращать промис. Код с созданием персонажа оберни в асинхронную функцию и дождись в ней загрузки картинки.

const canvas = document.getElementById('canvas');

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = src;

    if (image.complete) {
      resolve(image);
      return;
    }

    image.onload = () => resolve(image);
    image.onerror = (e) => reject(e);
  });
}

class Character {
  constructor(options) {
    this.ctx = options.ctx;

    this.image = options.image;
    this.width = options.width;
    this.height = options.height;

    this.render();
  }

  load() {}

  render() {
    this.ctx.drawImage(this.image, 0, 0, this.width / 7, this.height, 0, 0, this.width / 7, this.height);
  }
}

(async function main() {
  const spriteImage = await loadImage('./img/sprite.png');

  const character = new Character({
    ctx: canvas.getContext('2d'),
    image: spriteImage,
    width: 448,
    height: 60,
  });
})();

#navigation-top:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(-90deg);
}

#navigation-middle:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(0deg);
}

#navigation-bottom:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(90deg);
}

- callback(rooms) {
+ callback: (rooms) => {