Вёрстка сайтов | HTML, CSS, JS

Задача: Реализуй debounce на JavaScript Представь, что у тебя есть поисковая строка. Пользователь вводит текст, но ты не хочешь отправлять запрос на сервер после каждого символа. Нужно реализовать функцию debounce, которая откладывает выполнение переданной функции до тех пор, пока не пройдёт определённое время без новых вызовов. Условие Напиши функцию debounce(fn, delay), которая: 1. Принимает функцию fn и задержку delay в миллисекундах. 2. Возвращает новую функцию. 3. При каждом вызове новой функции сбрасывает предыдущий таймер. 4. Вызывает fn только тогда, когда с последнего вызова прошло delay миллисекунд. 5. Передаёт в fn аргументы последнего вызова. Пример

const search = debounce((query) => {
  console.log('Поиск:', query);
}, 500);

search('J');
search('Ja');
search('Jav');
search('Java');

// Через 500 мс:
// Поиск: Java

Заготовка

function debounce(fn, delay) {
  // Твоя реализация
}

Дополнительное испытание Когда реализуешь основную версию, попробуй сделать так, чтобы сохранялся контекст this при вызове функции. Ограничение: нельзя использовать сторонние библиотеки, например Lodash. Можешь прислать своё решение. Я проверю его, укажу на ошибки и дам подсказки, но не буду сразу показывать правильный код. #домашка

Что не так с этими iPhone? С телефонами — ничего! Небольшие повреждения есть только на упаковке, поэтому новые оригинальные iPhone можно приобрести по специальной цене. iPhone 17 Pro Max — от 35 000 ₽ iPhone 17 Air — от 29 000 ₽ iPhone 16 Pro — от 27 000 ₽ Все устройства новые и запечатанные. Количество ограничено. Посмотрите доступные модели и актуальные цены в нашем Telegram-канале! Получить предложение #реклама О рекламодателе

Макет для тренировки (мойфрахт) Перейти к макету 🧑‍💻 #практика | #макет

Простой паралакс при скролле Посмотреть на codepen👨‍💻 #практика

ResizeObserver Читать 👨‍💻 #полезности

Почему fetch() не считает 404 ошибкой? Представим, что мы отправляем запрос на сервер:

try {
  const response = await fetch("/api/users");

  const users = await response.json();
  console.log(users);
} catch (error) {
  console.error("Ошибка запроса:", error);
}

Кажется, всё правильно: отправили запрос, получили данные, обработали ошибку. Но что произойдёт, если сервер вернёт 404 или 500? Ничего. `catch` не выполнится. Дело в том, что fetch() отклоняет Promise не при любом неуспешном HTTP-статусе, а при сетевых ошибках, прерывании запроса и некоторых других сбоях. Ответы 404, 403 и 500 считаются успешно полученными HTTP-ответами. Как правильно обрабатывать ошибки? Для этого у объекта Response есть свойство ok:

try {
  const response = await fetch("/api/users");

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  const users = await response.json();
  console.log(users);
} catch (error) {
  console.error(error);
}

response.ok возвращает true, если HTTP-статус находится в диапазоне от 200 до 299. А ещё у fetch() нет таймаута по умолчанию Если сервер долго не отвечает, запрос может ждать гораздо дольше, чем хотелось бы. Можно использовать AbortSignal.timeout():

const response = await fetch("/api/users", {
  signal: AbortSignal.timeout(5000),
});

Теперь запрос будет автоматически прерван примерно через 5 секунд, если не завершится раньше. И ещё один нюанс fetch() не отправляет cookies при кросс-доменных запросах по умолчанию. Если сервер использует авторизацию через cookies, может понадобиться:

fetch("https://api.example.com/users", {
  credentials: "include",
});

При этом сервер должен разрешать запросы с учётными данными через CORS, а сами cookies должны соответствовать ограничениям браузера. Итог fetch() кажется простым API, но у него есть особенности, которые важно учитывать: - HTTP-ошибки не вызывают автоматический reject. - Таймаут нужно задавать самостоятельно. - Передача cookies зависит от credentials, CORS и настроек самих cookies. Именно из таких мелочей складывается надёжная работа с API на фронтенде.

Почему JavaScript Date такой странный? Казалось бы, что может быть проще работы с датами? Но в JavaScript даже здесь есть свои подводные камни. 1. Месяцы начинаются с нуля

new Date(2026, 0, 1) // 1 января
new Date(2026, 11, 1) // 1 декабря

Да, январь это 0, а декабрь это 11. При этом дни месяца начинаются с 1. 2. Несуществующие даты автоматически исправляются

new Date(2026, 1, 30)
// 2 марта 2026

В феврале 2026 года всего 28 дней, но вместо ошибки JavaScript просто переносит лишние дни на следующий месяц. И это работает в обратную сторону:

new Date(2026, 2, 0)
// 28 февраля 2026

Нулевой день марта превращается в последний день февраля. 3. Одинаковые на вид даты могут означать разное

new Date("2026-01-01")
new Date("2026-01-01T00:00:00")

Первая строка интерпретируется как полночь по UTC, а вторая как полночь по локальному времени. Из-за этого результат может отличаться в зависимости от часового пояса пользователя. 4. Сравнение дат работает не совсем очевидно

const a = new Date("2026-01-01");
const b = new Date("2026-01-01");

console.log(a === b); // false
console.log(a.getTime() === b.getTime()); // true

Date является объектом, поэтому === сравнивает ссылки, а не значения дат. 5. Date хранит не дату Внутри объект Date хранит количество миллисекунд, прошедших с 1 января 1970 года, 00:00:00 UTC.

new Date(0).toISOString()
// "1970-01-01T00:00:00.000Z"

Часовой пояс не хранится внутри объекта. Он учитывается при отображении даты локальными методами. Итог Date выглядит простым API, но его поведение легко приводит к ошибкам, особенно при работе с часовыми поясами, пользовательским вводом и сравнением дат. Поэтому при работе с датами важно понимать, что именно хранится, как дата создаётся и в каком часовом поясе интерпретируется.

Ловушки Python, SQL и Git с кодом и разбором Почему round(2.5) в Python даёт 2, а cart=[] в аргументе функции помнит прошлые вызовы? И почему один NULL в подзапросе превращает NOT IN в пустой результат? В канале Koddo — короткие разборы таких ловушек в Python, SQL, JavaScript, Linux и Git. В каждом посте код с выводом, объяснение и ссылка на полный разбор в справочнике koddo.ru. Подписывайся, чтобы встречать их в ленте, а не на собеседовании. Подписаться #реклама 16+ О рекламодателе

Зарабатывайте на установках Яндекс Браузера Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей. Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках. Выплаты до 500₽ за каждую установку Яндекс Браузера. Подать заявку #реклама 0+ partner.browser.yandex.ru О рекламодателе

Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс. Попробуйте бесплатно❤️ Слушать #реклама 18+ music.yandex.ru О рекламодателе

Макет для тренировки (e2b) Перейти к макету 🧑‍💻 #практика | #макет

Пятница, 17:30. Макет почти готов Но один сценарий всё ещё вызывает вопросы. Обсудить сейчас или вернуться в понедельник? Решайте вместе с командой hh.ru в «Охэхэнных новостях». Подписаться #реклама О рекламодателе

Изучаем Классы в JavaScript: Основы и Применение Читать 👨‍💻 #js | #теория

Монолит vs микросервисы: битва за ваши нервы 💻 Монолит или микросервисы? Кажется, что ответ очевиден, но почему-то одни проекты летают, а другие тонут в хаосе? Присоединяйтесь к открытому уроку Сергея Прощаева и получите пошаговое руководство по выбору архитектуры. 📅 9 ноября в 20:00. Разберём: - Как не попасть в ловушку «модных» микросервисов. - Признаки, что пора выходить из монолита. - Архитектурные паттерны перехода: Strangler Fig, BFF, Self-contained systems. - Организационные и технические риски — что пойдёт не так. - Роль DevOps, CI/CD и мониторинга. Вы научитесь оценивать реальные риски и стоимость микросервисов, внедрять изменения без сбоев и хаоса и принимать взвешенные решения, сохраняя технический контроль и производительность команды. ✅ Запишитесь сейчас! Узнать больше #реклама 16+ otus.ru О рекламодателе

Основы событий мыши Читать 👨‍💻 #js | #теория

Grid Attack - игра для изучения css grid Перейти на сайт 👨‍💻 #полезности

Хотите разобраться, как создаются Telegram-боты? Telegram-бот кажется простым для пользователя, но как он получает сообщение и решает, что ответить? На открытом уроке разберём этот процесс на практике. Преподаватель в режиме лайвкодинга создаст бота на Python с библиотекой aiogram — от первого запуска до рабочего диалога с кнопками. Вы узнаете, как получить токен, обрабатывать команды и сообщения, добавлять кнопки и ответы на действия пользователя. В конце проверите работу готового бота прямо в Telegram. Урок подойдёт начинающим Python-разработчикам. 10 ноября в 20:00 МСК. Зарегистрироваться #реклама 16+ otus.ru О рекламодателе

Как использовать css @property Читать 👨‍💻 #css | #полезности

🎁 Розыгрыш 3 плагинов для WordPress Разработчик плагинов APEX SHOP дарит три ключа — каждый победитель выбирает любой плагин: ⚡️ Apex Optimizer — ускорение, SEO и защита сайта 🎯 Custom Popup — попапы, которые не бесят 🤖 DeepPress AI — SEO-статьи с ИИ Лицензия на 1 год с обновлениями и поддержкой. Условия простые: подписаться и написать в комментариях, какой у вас сайт на WP. Всем участникам — скидка 20%. 👉 Участвовать: https://t.me/+zvQ3EcnBVhtiMjcx Итоги — 1 ноября в 12:00 МСК

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Атрибут inert 2. AVIF или WebP? 3. Как сделать стилизацию скролла? Лучшие фронтенд вакансии @job_webdev: 1. Frontend-разработчик (Vue 3 / Nuxt), Middle в IT-компанию 2. Frontend developer for a digital platform 3. frontend-разработчик CRM-систем Лучшие дизайн вакансии @job_webdesign: 1. Web-дизайнер 2. UX/UI-дизайнер цифровых продуктов 3. Дизайнер интерфейсов UI/UX для мобильных проектов #лучшеезанеделю