🎰 Стрим по решению задач с собеседований уже сегодня в 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 на стриме

Как мы выходили на зарубежный рынок

До появления в группе Евгении (имя изменено для анонимности), я очень осторожно подходил к вопросу поиска работы вне СНГ

Я хорошо знал как сделать резюме, оформить линкедин, но стратегия поиска, или по-простому - где откликаться, что писать и как показать себя на зарубежном рынке было для меня частично загадкой)

Встала задача найти работу в Южной Америке, с большой разницей в часовых поясах и непонятным рынком

Мы хорошо знали что и как тренировать для собеседований, а Евгения была на зарубежном рынке уже больше 10 лет, и знала ресурсы для поиска работы и выхода на hr. А перед приходом Жени в нашей команде появился ментор, который уже много лет работает на Кипре.
И тут я понял - это полный комплект, dream team💪

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

Для меня, как для человека который провел год в поисках идеального рецепта резюме на hh, это был прорыв, потому что даже если hh отвалится полностью, можно спокойно пересесть на другие ресурсы и способы, которые после успешного трудоустройства Евгении стали доступны всем)

Вот так, работая с разработчиками, каждый месяц открывается что-то новое.
Так что постепенно повышаем кол-во выпускников зарубежом)

Кстати, вчера начали работу с Алексеем из Шанхая, так что публично коммитимся на то, чтобы теперь найти работу уже в другом конце планеты)

stay tuned ❤️
@codepunks_bro

Разборы резюме Frontend разработчиков

5 ноября в 20:00 мск проведем легендарные разборы ваших резюме🤪

Что нужно сделать для участия в разборе:

1. Отправить резюме и сопроводительное к нему вот сюда: @codepunks_bro
В сопроводительном дай немного фактуры: на каком сейчас этапе, какая цель, где есть просадка по твоему мнению, сколько откликов/собеседований было за последний месяц. Чем подробнее, тем лучше.

все)

Жду резюмешки👆