window.undefined = 'hello';
window.Infinity = 'hello';

var undefined = void 0;

(() => {
  const undefined = 'hello';
  const Infinity = 100;
  const NaN = 'This is NaN';
  console.log(undefined, Infinity, -Infinity, NaN);
  // 'hello', 100, -100, 'This is NaN'
})();

(() => {
  function undefined(Infinity, NaN) {
    console.log(Infinity, NaN);
  }

  undefined('foo', 'bar');
  // 'foo', 'bar'
})();

function isNegativeZero(value) {
  return 1 / value === -Infinity;
}

Object.is(value, -0);

const v = [-0, 0];
console.log(Math.sign(v[0])); // -0 → направление влево

const img = new Image();
img.referrerPolicy = 'no-referrer';

img.onload = () => console.log('Вы авторизованы на YouTube');
img.onerror = () => console.log('Вы не авторизованы на YouTube');

img.src = 'https://accounts.google.com/ServiceLogin?passive=true&continue=https%3A%2F%2Fwww.youtube.com%2Ffavicon.ico&uilel=3&hl=en&service=youtube';

const img = new Image();
img.referrerPolicy = 'no-referrer';

img.onload = () => console.log('Вы авторизованы в VK');
img.onerror = () => console.log('Вы не авторизованы в VK');

img.src = 'https://vk.com/login?u=2&to=ZmF2aWNvbi5pY28-';

type Entity = 
  | { type: 'user'; name: string }
  | { type: 'post'; title: string };

type User = { id: number; name: string };
type ReadonlyUser = { [K in keyof User]: User[K] };

interface ReadonlyUser {
  [K in keyof User]: User[K]; // ❌ Ошибка
}

interface Dictionary {
  [key: string]: number;
}

for (let i = 0; i < 10; i++) {
  if (i === 2) {
    break;
  }
}

let x = 1;

labelName: if (x === 1) {
  console.log('Hello');

  break labelName;

  console.log('World'); // этот код не сработает
}

const x = 1;

labelName: {
  console.log('Hello');

  if (x === 1) {
    break labelName;
  }

  console.log('World'); // этот код не сработает
}

constexpr int kMaxFunctionArguments = 120000;

function test(...args) {
  console.log(args.length);
}

test(...Array(120_000)); // Chrome → RangeError: Maximum call stack size exceeded

test(...Array(500_001)); // Firefox → RangeError: too many function arguments

arr.push(...data)

const CHUNK_MAX_SIZE = 50_000;

function safePush(arr, data) {
  const dataCopy = data.slice();

  while (dataCopy.length > 0) {
    const chunk = dataCopy.splice(0, CHUNK_MAX_SIZE);
    arr.push(...chunk);
  }
}

«Эй, нарисуй фон вот по такому алгоритму!»

// простая утилита для получение CSS переменной и нормализации её значения
function getProperty(properties, key) {
  const value = properties.get(key);
  return value ? value.toString().trim() : null;
}

// Наш класс для отрисовки
class CheckerPainter {
  static get inputProperties() {
    // описываем какие CSS переменные мы принимаем на вход
    return [
      '--checker-color-1',
      '--checker-color-2',
      '--checker-cell-width',
      '--checker-cell-height',
    ];
  }
  
  // Вся "магия" происходит в этом методе
  paint(ctx, geom, properties) {
    const color1 =
      getProperty(properties, '--checker-color-1') || '#000000';
    const color2 =
      getProperty(properties, '--checker-color-2') || '#FFFFFF';
    
    const cellWidthRaw =
      getProperty(properties, '--checker-cell-width') || '24px';
    const cellHeightRaw =
      getProperty(properties, '--checker-cell-height') || '24px';
    
    // Простейший парсинг числа, px нам не важно
    const cellWidth = parseFloat(cellWidthRaw) || 24;
    const cellHeight = parseFloat(cellHeightRaw) || 24;
    
    const cols = Math.ceil(geom.width / cellWidth);
    const rows = Math.ceil(geom.height / cellHeight);
    
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        ctx.fillStyle = (x + y) % 2 === 0 ? color1 : color2;
        ctx.fillRect(
          x * cellWidth,
          y * cellHeight,
          cellWidth,
          cellHeight
        );
      }
    }
  }
}

registerPaint('checker', CheckerPainter);

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('checker-painter.js');
}

<div class="box"></div>

.box {
  --checker-color-1: #D394C8;
  --checker-color-2: #60C7EF;
  --checker-cell-width: 32px;
  --checker-cell-height: 32px;

  background-image: paint(checker);
  width: 640px;
  height: 480px;
}

const obj = { a: 1, b: 2 };

delete obj.b;

var x = 1;
delete x; // false, x остаётся
console.log(x); // 1

let y = 2;
delete y; // SyntaxError (в строгом режиме)

const z = 3;
delete z; // SyntaxError

let fruits = ['apple', 'banana', 'cherry'];
delete fruits[1];

console.log(fruits);        // ['apple', <1 empty item>, 'cherry']
console.log(fruits.length); // 3 ❗️

// ❌ Плохо
// delete user.password;
// send(user);

// ✅ Хорошо
const { password, ...safeUser } = user;
send(safeUser);

obj.password = null; // сохраняем форму объекта, работает быстро

let cache = new Map();
cache.set('token', 123);
cache.delete('token'); // Быстро и безопасно ✅

let fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1);
// ['apple', 'cherry']

let numbers = [1, 2, 3, 4, 5];
numbers = numbers.filter(n => n !== 3);
// [1, 2, 4, 5]

try {
  localStorage.setItem('my_data', '...очень много данных...');
} catch (error) {
  const isQuotaError =
    error &&
    (
      error.name === 'QuotaExceededError' ||  // стандарт
      error.name === 'NS_ERROR_DOM_QUOTA_REACHED' || // Firefox
      error.code === 22 || // старый WebKit
      error.code === 1014  // Firefox старый
    );

  if (isQuotaError) {
    console.log('Переполнено localStorage');
  } else {
    console.log('Другая ошибка:', error);
  }
}

let storage;
try {
  storage = window.localStorage;
  storage.setItem('__test__', '1');
  storage.removeItem('__test__');
} catch (e) {
  console.error('Ошибка: хранилище недоступно!', e.name);
  // используем in-memory fallback
}

import { useLocalStorage } from '@webeach/react-hooks/useLocalStorage';
import { useSessionStorage } from '@webeach/react-hooks/useSessionStorage';

export function MyComponent() {
  const [count, setCount] = useLocalStorage<number>('app:count', 0);
  const [step, setStep] = useSessionStorage<number>('wizard:step', 1);

  // ...
}

0.1 + 0.2 === 0.3 // false

0.1 в двоичной системе = 0.0001100110011001100… (бесконечная дробь)

0.1 + 0.2 // 0.30000000000000004

0.1 + 0.7 // 0.7999999999999999
0.2 + 0.4 // 0.6000000000000001
0.15 + 0.15 // 0.30000000000000004
0.05 + 0.01 // 0.060000000000000005

Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON

Number((0.1 + 0.2).toFixed(2)) // 0.3

(1 + 2) / 10

// const vsSource
layout(location = 0) in vec2 a_position;

void main() {
  // Позиция вершины. У нас будет всего 1 большой прямоугольник
  gl_Position = vec4(a_position, 0.0, 1.0);
}

// const fsSource
precision highp float;

uniform vec2 u_resolution; // Размер экрана
uniform float u_time;      // Время в секундах
uniform vec2 u_mouse;      // Позиция мыши

out vec4 outColor;

void main() {
  // 1. Нормализуем координаты пикселя от 0.0 до 1.0
  vec2 uv = gl_FragCoord.xy / u_resolution.xy;

  // 2. Учитываем пропорции экрана
  float aspect = u_resolution.x / u_resolution.y;
  uv.x *= aspect;

  // 3. Точка интереса (мышь)
  vec2 mouse = u_mouse / u_resolution.xy;
  mouse.x *= aspect;

  // 4. Математика плазмы
  float v = 0.0;

  // Слой 1: Волны по X
  v += sin(uv.x * 10.0 + u_time);

  // Слой 2: Волны по Y (чуть медленнее)
  v += sin((uv.y * 10.0 + u_time) / 2.0);

  // Слой 3: Волны от мыши
  float dist = distance(uv, mouse);
  v += sin(dist * 15.0 - u_time * 2.0);

  // 5. Раскраска (косинусная палитра)
  vec3 col = 0.5 + 0.5 * cos(u_time + v + vec3(0, 2, 4));

  outColor = vec4(col, 1.0);
}

// Инициализация WebGL
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl2');

// Компиляция шейдеров
function createShader(gl, type, source) {
  // см. на codepen
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error(gl.getProgramInfoLog(program));
}

// Создаем геометрию (Один прямоугольник на весь экран)
const positions = new Float32Array([
  -1, -1,
  1, -1,
  -1,  1,
  -1,  1,
  1, -1,
  1,  1,
]);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

// Подготовка Uniforms
gl.useProgram(program);
const resolutionLoc = gl.getUniformLocation(program, 'u_resolution');
const timeLoc = gl.getUniformLocation(program, 'u_time');
const mouseLoc = gl.getUniformLocation(program, 'u_mouse');

let mouseX = 0, mouseY = 0;
canvas.addEventListener('mousemove', (event) => {
  mouseX = event.clientX;
  mouseY = canvas.height - event.clientY; 
});

// Цикл отрисовки
function render(time) {
  // см. на codepen
}

requestAnimationFrame(render);

.list-item {
  /* 1. Не рисуем элемент, пока он вне экрана */ 
  content-visibility: auto;

  /* 2. Задаем примерную высоту (40px) */
  /* auto позволяет браузеру запомнить реальный размер после первого рендера */
  contain-intrinsic-size: auto 40px; 
}

const sourceArray = Array(100_000).fill(0); 
// создаем массив на 100к элементов и заполняем "нулями"

// spread
for (let i = 0; i < 1_000; i++) {
  ([...sourceArray]);
}

// concat
for (let i = 0; i < 1_000; i++) {
  [].concat(sourceArray);
}

// slice
for (let i = 0; i < 1_000; i++) {
  sourceArray.slice();
}

let state0 = 1n; // неизвестно
let state1 = 2n; // неизвестно

function xorshift128plus() {
  let s1 = state0
  let s0 = state1

  state0 = s0

  s1 ^= (s1 << 23n) & 0xFFFFFFFFFFFFFFFFn
  s1 ^= s1 >> 17n
  s1 ^= s0
  s1 ^= s0 >> 26n

  state1 = s1

  return (state0 + state1) & 0xFFFFFFFFFFFFFFFFn
}

console.log([...Array(5)].map(() => Math.random()))

const token = Math.random().toString(36).slice(2)

https://some-site.com/reset-password?token=...

const sourceRandom = parseInt(hash, 36) / Math.pow(36, hash.length)

import { randomBytes } from 'node:crypto';

const token = randomBytes(32).toString('hex');