.box {
  display: grid;
  justify-content: center;
  align-content: center;
}

.box {
  display: grid;
  place-content: center;
}

.box {
  display: grid;
  place-items: center;
}

.child {
  place-self: center;
}

import("/path/to/module.js")
  .then(m => console.log("Модуль загружен:", m))
  .catch(e => console.error("Ошибка загрузки:", e));

import("/path/to/math.js")
  .then(({ sum }) => console.log("Sum:", sum(2, 3)))
  .catch(console.error);

document.querySelector("#confettiBtn")?.addEventListener("click", () => {
  import("/path/to/confetti.js")
    .then(m => m.run())
    .catch(console.error);
});

const supportsDynamicImport = (() => {
  try { new Function("import('data:text/javascript,')"); return true; }
  catch { return false; }
})();
console.log("Dynamic import support:", supportsDynamicImport);

import("/path/to/user-profile.js")
  .then(m => m.init())
  .catch(e => console.error("Ошибка загрузки модуля:", e));

const user = { name: 'Sam', age: 28 };

const user = watch({ name: 'Sam', age: 28 });

user.age;      // GET - age
user.age = 30; // SET - age 30

const safe = obj => new Proxy(obj, {
  get: (t,p) => p in t ? t[p] : (console.warn('No key:',p), undefined)
});
safe({ a: 1 }).b;

let y = 0;

setInterval(() => {
  y += 5;
  el.style.transform = `translateY(${y}px)`;
}, 16);

let y = 0;

function animate() {
  y += 5;
  el.style.transform = `translateY(${y}px)`;
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

let y = 0;
let last = performance.now();
const speed = 200; // px/sec

function animate(now) {
  const delta = now - last;
  last = now;

  y += (delta / 1000) * speed;
  el.style.transform = `translateY(${y}px)`;

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.overlay {
  position: absolute;
  inset: 0;
}

function initModal() {
  window.addEventListener("resize", onResize);
}

function onResize() {
  console.log("resize");
}

element.addEventListener("click", () => {
  console.log("click");
});

function handleClick() {
  console.log("click");
}

element.addEventListener("click", handleClick);

element.removeEventListener("click", handleClick);

function initModal() {
  const modal = document.querySelector(".modal");
  const bigData = Array.from({ length: 100_000 }, () => ({}));

  function onResize() {
    if (!modal) return;
    modal.style.width = window.innerWidth + "px";
  }

  window.addEventListener("resize", onResize);
}

function initModal() {
  const modal = document.querySelector(".modal");

  function onResize() {
    if (!modal) return;
    modal.style.width = window.innerWidth + "px";
  }

  window.addEventListener("resize", onResize);

  return () => {
    window.removeEventListener("resize", onResize);
  };
}

🔊 Продолжайте читать на Habr!

const bugs = [
  { id: 1, title: "CSS не грузится", status: "open" },
  { id: 2, title: "API 500", status: "fixed" },
  { id: 3, title: "Кнопка не реагирует", status: "open" }
];

console.table(bugs);

console.log(
  "%cCRITICAL BUG DETECTED",
  "font-size: 18px; font-weight: bold; color: red;"
);

console.group("User Load Flow");
console.log("Запрос данных пользователя");
console.log("Запрос ролей");
console.groupEnd();

textarea {
  resize: both;
}

textarea {
  resize: none;
}

textarea {
  resize: vertical;
}