Что такое wh?

Что такое wh?

Вопрос 'wh' может означать несколько вещей в контексте Frontend Development. Рассмотрю самые вероятные варианты.

1. Webhook (вебхуки)

Если имеется в виду Webhook, это механизм для отправки данных между приложениями в реальном времени:

// Пример webhook обработчика на бэкенде
app.post('/webhook', (req, res) => {
  const event = req.body;
  
  // Обработай событие
  console.log('Получено событие:', event);
  
  // Отправь успешный ответ
  res.status(200).json({ status: 'received' });
});

// Пример: отправка webhook уведомления
fetch('https://example.com/webhook', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    event: 'user_created',
    userId: 123,
    timestamp: new Date()
  })
});

2. Viewport Width/Height (ширина и высота viewport)

Если речь идет о CSS свойствах, vw и vh — это единицы измерения на основе viewport:

/* vw - viewport width (ширина окна браузера) */
.full-width {
  width: 100vw; /* 100% ширины экрана */
}

/* vh - viewport height (высота окна браузера) */
.full-height {
  height: 100vh; /* 100% высоты экрана */
}

/* Практический пример: fullscreen блок */
.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* min-height для гибкости */
.section {
  min-height: 100vh;
  padding: 40px;
}

Применение в JavaScript:

function getViewportSize() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  return { width, height };
}

// Пример: установи размер элемента = viewport
const element = document.querySelector('.fullscreen');
element.style.width = window.innerWidth + 'px';
element.style.height = window.innerHeight + 'px';

// Обработка изменения размера
window.addEventListener('resize', () => {
  console.log('Новый размер:', getViewportSize());
});

3. Web Vitals

Если речь идет о Web Vitals, это набор метрик производительности:

// Основные Web Vitals

// 1. LCP (Largest Contentful Paint) - когда загружается основной контент
// 2. FID (First Input Delay) - задержка при первом взаимодействии
// 3. CLS (Cumulative Layout Shift) - смещение элементов при загрузке

// Измерение Web Vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log); // Cumulative Layout Shift
getFID(console.log); // First Input Delay
getFCP(console.log); // First Contentful Paint
getLCP(console.log); // Largest Contentful Paint
getTTFB(console.log); // Time to First Byte

// Пример вывода
/* 
{
  name: 'LCP',
  value: 2500,
  rating: 'good',
  delta: 2500,
  id: 'v3-1234567890'
}
*/

4. Web Workers (Веб-воркеры)

Если речь идет о Web Workers, это многопоточность в JavaScript:

// Главный поток (main thread)
const worker = new Worker('worker.js');

// Отправка данных в worker
worker.postMessage({
  data: [1, 2, 3, 4, 5],
  action: 'sum'
});

// Получение результата
worker.onmessage = (event) => {
  console.log('Результат от worker:', event.data);
};

// worker.js (отдельный файл)
self.onmessage = (event) => {
  const { data, action } = event.data;
  
  let result;
  if (action === 'sum') {
    result = data.reduce((a, b) => a + b, 0);
  }
  
  // Отправить результат обратно
  self.postMessage(result);
};

// Практический пример: вычисления не блокируют UI
function heavyCalculation() {
  // Вместо этого:
  // const result = expensiveComputation(); // Зависает UI
  
  // Делаешь это:
  worker.postMessage({ data: largeArray, action: 'process' });
}

5. 'which' атрибут (键盘 события)

Если речь идет о свойстве события which для клавиатуры:

document.addEventListener('keydown', (event) => {
  // event.which - код нажатой клавиши (deprecated, используй event.key)
  console.log('Нажата клавиша:', event.which);
  
  // Лучше использовать:
  console.log('Нажата клавиша:', event.key); // 'Enter', 'Escape', и т.д.
  console.log('Код:', event.code); // 'Enter', 'Escape', и т.д.
});

// Пример: обработка Enter
const input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Отправить форму');
  }
});

6. what/where/when (вопросительные слова)

Если это просто буквы "wh" в начале вопроса (what, where, when, which, why, who, how):

Esa - общее объяснение на собеседованиях:

What - что это такое? (определение)
Where - где это используется? (примеры использования)
When - когда это нужно? (сценарии)
Why - почему это важно? (мотивация)
How - как это работает? (реализация)

Самое вероятное значение

На собеседовании Frontend Developer вопрос 'wh' скорее всего означает одно из:

1. Web Vitals - метрики производительности
2. Webhook - интеграция с внешними сервисами
3. Web Workers - многопоточность
4. viewport units (vw/vh) - адаптивные размеры

Рекомендация

Если вы получили этот вопрос, лучше спросите уточнение у интервьюера:

• 'Имеете в виду Web Vitals, Webhook, Web Workers или что-то другое?'
• Это покажет, что вы внимательны и хотите дать точный ответ

Если это Web Vitals (наиболее вероятно)

// Полный пример оптимизации под Web Vitals

import { getCLS, getFID, getLCP } from 'web-vitals';

// Отслеживание метрик
getLCP(metric => {
  console.log('LCP:', metric.value, 'ms');
  // Отправить аналитику
  analytics.send({ metric: 'LCP', value: metric.value });
});

getFID(metric => {
  console.log('FID:', metric.value, 'ms');
});

getCLS(metric => {
  console.log('CLS:', metric.value);
  // CLS - число без единиц, 0 - идеально
});

// Рекомендуемые значения:
// LCP: <= 2.5s (хорошо)
// FID: <= 100ms (хорошо)
// CLS: <= 0.1 (хорошо)

Если вы уточните, что имеется в виду, я смогу дать более точный и полный ответ.