.image {
  clip-path: circle(50%);
}

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result);

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
const obj = { [symbol1]: 'value1' };
console.log(symbol1 === symbol2, obj[symbol1]);

.box {
  animation: slide 2s ease-in-out infinite alternate;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

const div = document.createElement('div');
div.dataset.userId = '123';
div.dataset.userName = 'Alice';
console.log(div.getAttribute('data-user-id'));

const arr = [10, 20, 30];
const [first, ...middle, last] = arr;
console.log(first, last);

@media (prefers-color-scheme: dark) {
  .card {
    background: #333;
    color: white;
  }
}

const arr = [1, 2, 3, 4];
const exists = arr.some(n => n > 5);
const allSmall = arr.every(n => n < 10);
console.log(exists || allSmall);

const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 50);
console.log(total);

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}