Mizutsune

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,
  });
})();

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

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

function func(mixedData) {
  const id = mixedData?.target?.id ?? mixedData;
  console.log(id);
}

func(123) // 123
func({target: {id: 456}}) // 456

isValid() {
  return Object.values(obj).flatMap(Object.values).every(n => n.valid);
},

objects() {
  return Object.values(this.obj).flatMap(Object.values);
},
isValid() {
  return this.objects.every(n => n.valid);
},

function preparedData<T extends Record<string, {name: string, id: string}[]>>(data: T) {
  return Object.keys(data).map((key) => {
    return data[key as keyof T].map((a) => ({
      val: a.name,
      newId: a.id,
    }));
  });
}

if (
    window.location.search.indexOf('?q=') === -1 &&
    window.location.search.indexOf('&q=') === -1
) {
    window.location.search += (window.location.search ? '&' : '?' ) + 'q=' + searchInput.value;
}

/images
  /content
    /gallery
      /1.jpg
      /2.jpg
      /3.jpg
    /slider
      /1.jpg
      /2.jpg
      /3.jpg

<div class="slider">
  {% for i in 1..3 %}
    <div class="slide">
      <img src="/images/content/slider/{{ i }}.jpg">
    </div>
  {% endfor %}
</div>

computed: {
  deadlineText() {
    const today = new Date().setHours(0, 0, 0, 0);
    const deadline = new Date(this.task.deadline).setHours(0, 0, 0, 0);
    return [ 'Уже было', 'Сегодня', 'Жди' ][1 + Math.sign(deadline - today)];
  },
},

element.addEventListener('click', function(event) {
    // Сработает обработчик 1 раз
}, {once: true});