Мы готовы подвести итоги 🏃

Просмотрели вместе с командой заявки и приняли финальное решение! Это было непросто, потому что все кейсы интересные для работы и во всех историях можно найти себя)

Так как заявок было много и конкуренция очень высокая, решили взять двоих человек 🫡

Наши победители - номера
7 и 17

Искренне поздравляем победителей и готовимся к работе) Скоро свяжемся с ребятами и начнем транслировать наш путь)

Ещё раз всем спасибо за участие!

🎰 Стрим по решению задач с собеседований уже сегодня в 20:00

Готовимся провести вечер в мозговом штурме)

Ссылки на стрим будут в @codepunksstream_bot

Что интересного можно рассказать на собеседовании?

Кажется, что методы и browser API настолько многогранны, и нередко можно найти применение или интересные возможности просто раз в неделю заходя в MDN.

Конечно напрямую про них рассказывать без вопроса интервьюера будет как минимум странно, но 👇

Про методы, которые связаны с циклом событий можно упомянуть при рассказе о EventLoop, про некоторые методы можно рассказать в контексте оптимизации. Про отмену запросов на частой задаче fetchWithRetry.

Надеюсь, что пост поможет освежить память или узнать что-то новое, поехали 🫡

1) MutationObserver
Один из самых часто используемых из списка.

Что делает: Следит за изменениями DOM (узлы/атрибуты/текст).

Где обитает: Визуальные виджеты, которые подключаются в «чужие» страницы: отслеживаем, когда хост добавил контейнер, и монтируемся.

const mo = new MutationObserver(records => {
  for (const r of records) if ([...r.addedNodes].some(n => n.id === 'widget')) mount();
});
mo.observe(document.documentElement, { childList: true, subtree: true });

2) requestIdleCallback

Что делает: Переданный колбэк выполнится когда не будет активных макро, микрозадач. То есть задача с самым низким приоритетом.

Зачем нужен: Отложенная аналитика и малозначимые расчёты (warm-up кэшей, prefetch конфигов).

requestIdleCallback(() => warmUpSearchIndex(), { timeout: 2000 });

3) requestAnimationFrame

- Ставит колбэк перед отрисовкой кадра.

Для чего:
- Плавные анимации чисел/скролла без «дёрганий».
- Синхронизация измерений/изменений DOM «в такт» с пайплайном рендеринга.

function tick(t) { updatePositions(t); raf = requestAnimationFrame(tick); }
let raf = requestAnimationFrame(tick);

4) queueMicrotask

Что это. Кладёт колбэк в микротаски (выполняются до следующего рендера и перед таймерами).

Как можно использовать:
- Безопасная рассылка событий после коммита состояния, чтобы подписчики уже видели итог.

setState(next);
queueMicrotask(() => bus.emit('state:committed'));

5) IntersectionObserver

Сообщает, когда элемент попадает/выходит из вьюпорта.

const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { img.src = img.dataset.src; io.unobserve(img); }
}, { rootMargin: '200px' });
io.observe(img);

6) ResizeObserver

Что делает? Слушает изменение размеров элемента.

Где использовать:
- Автолэйаут «контейнер-зависимых» компонентов (чарты, таблицы).
- Пересчёт обрезки/кроссфейда текста при ресайзе контейнера, а не окна.

const ro = new ResizeObserver(([entry]) => redrawChart(entry.contentRect));
ro.observe(chartEl);

7) AbortController

Что это? Универсальная отмена для fetch и не только.

- Отмена устаревших запросов.
- Предотвращение race-condition.
- Прерывание долгих операций при смене маршрута в SPA.

const c = new AbortController();
fetch('/api/search?q=' + q, { signal: c.signal });
input.addEventListener('input', () => c.abort());

8) PerformanceObserver

Подписка на метрики производительности.

new PerformanceObserver(list => {
  for (const e of list.getEntries()) report(e);
}).observe({ type: 'largest-contentful-paint', buffered: true });

performance.mark('data:start');
// ... загрузили данные
performance.mark('data:end');
performance.measure('data:load', 'data:start', 'data:end');

🧑‍🎓Полезная подборка на выходные

Для трудоустройства:
- 60 вопросов, которые точно помогут тебе на собеседовании
- Как мы пишем резюме, чтобы собрать приглашения
- Как пройти фильтр HR
- Задачи, на которых валятся кандидаты

Кому не хватает мотивации:
- Средний оффер наших учеников 271к, и ты так сможешь!
- Убеждения, которые мешают развиваться

Техническое:
- База. Часть 2. Микрофронты
- 10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
- 10 задротских вопросов про React, которые поставят в тупик многих. Часть 2

- Как мы помогаем с трудоустройством

В следующую среду планируем стрим по TypeScript, где будем решать задачи с собеседований вместе с подписчиками, анонс будет в - @codepunksstream_bot💪

А также все выходные провожу консультации, если давно думаешь сменить работу или выйти на грейд выше - @codepunks_bro 🤝

Завтра в 20:00 стрим с разбором задач по TypeScript 🔥

В этот раз решили вернуть старый формат с решением задач голосом, против решения только в чате.

Если вы готовы поучаствовать и решать с нами - напишите заранее @codepunks_bro, и мы выделим несколько задач :)

Ссылка на подключение будет за час 🔺ТУТ

До встречи! 🤓

Серьезный пост🤓

Мне очень нужна ваша обратная связь для контента, и чтобы не устраивать публичных опросов, сделал небольшой тест в боте - там всего 5 вопросов

От вас - 5 минут
От меня - ценный материал "Топ-100 компаний, куда можно отправить резюме" прямо со ссылками на вакансии.

Чтобы помочь мне улучшить канал и получить материал, переходите по ссылке 🔺ПРОЙТИ ОПРОС

Всех заранее благодарю🤍

PS: и до встречи сегодня в 20:00 на стриме