Code Ready | Frontend

👩‍💻 В коде слишком много операторов и условий? Snazzy Operator — делает операторы (=>, ===, &&, >= и другие) более выразительными и аккуратными за счёт специальных лигатур и стилизации. Код становится легче воспринимать визуально, особенно в больших файлах и сложных условиях. 📣 Code Ready | #vscode

📱 Минималистичные анимированные карточки! Привет! В этом гайде создадим карточки с плавной анимацией, увеличением при наведении и динамическим добавлением через JavaScript. Ключевые моменты:

• HTML: контейнер с карточками и кнопкой внутри. • CSS: тень, плавный масштаб и адаптивное расположение. • JS: добавление новых карточек без перезагрузки страницы.

Подходит для витрин товаров, портфолио или информационных блоков. 📣 Code Ready | #гайд

Айтишники за эти задачи получают от 10 000 до 20 000 руб. Научим делать их за 7 дней. Завтра запускаем бесплатный практикум по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения в 2026 году без навыков программиста. 7 дней ты будешь выполнять востребованные задачи на фрилансе и в найме: - Сверстать веб-сайт на HTML + CSS – от 10 000 руб. - Оживить страницу с помощью JavaScript – от 5 000 руб. - Перенос макетов из Figma в Angular – от 20 000 руб. - Подключить backend и загрузить сайт на хостинг – от 7 000 руб. Роман Чернов, Fullstack с 12-летним стажем, ставит задачи и даёт инструкции. Кураторы помогают на каждом этапе. На выходе получаешь живой сайт в портфолио, даже если ты никогда не кодил. А главное, понимаешь, что разработка не так сложна, как кажется. И хорошо зарабатывать тут может даже новичок. 👉 Забрать место на практикуме ⏰ Регистрация открыта до старта потока 28 мая. После — только платный вход.

❤️ Dev Notes — заметки, шпаргалки и статьи по JS! На сайте собраны не только шпаргалки, но и полноценные статьи с разбором разных тем: работа с массивами и объектами, функции, замыкания, методы JS и практические нюансы разработки. Материал подаётся с примерами кода и краткими пояснениями. 📌 Оставляю ссылочку: dev-notes.ru 📣 Code Ready | #сайт

Разбираем как не словить утечку памяти на обработчиках событий! Одна из частых причин утечек — обработчик повесили, а снять забыли. Особенно это неприятно, когда событие висит не на локальном элементе, а на чём-то долгоживущем: window, document, глобальный event bus и т.п.

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  // забыли снять обработчик
}

Компонента уже нет, а onResize всё ещё вызывается. Плюс callback может держать в замыкании старое состояние, DOM-ноды, данные — и GC не сможет это нормально прибрать. Правильнее сразу закладывать cleanup:

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  window.removeEventListener('resize', onResize);
}

Главное — снимать нужно ту же самую функцию. Вот так не сработает:

el.addEventListener('click', () => doSomething());
el.removeEventListener('click', () => doSomething());

Это две разные функции, даже если выглядят одинаково. Нормальный вариант:

function handler() {
  doSomething();
}

el.addEventListener('click', handler);
el.removeEventListener('click', handler);

Ещё момент — capture.

el.addEventListener('click', handler, true);
el.removeEventListener('click', handler, false);

Так обработчик не снимется, потому что capture отличается. Для удаления браузер сравнивает type, listener и capture. passive, once, signal в этом сравнении не участвуют. Когда обработчиков несколько, удобно использовать AbortController:

const controller = new AbortController();

window.addEventListener('resize', onResize, {
  signal: controller.signal
});

document.addEventListener('visibilitychange', onVisible, {
  signal: controller.signal
});

// cleanup
controller.abort();

abort() снимет все обработчики, которые были добавлены с этим signal. А если обработчик нужен только один раз:

button.addEventListener('click', handler, { once: true });

После первого вызова он удалится сам. Важный нюанс: удалённый DOM сам по себе ещё не утечка. Если на него нет внешних ссылок — GC его заберёт. 🔥 Проблемы начинаются, когда: обработчик висит на window / document; callback держит старое состояние в замыкании; DOM-нода или данные лежат в массиве, store или кэше. 📣 Code Ready | #практика

⚡️ Бесплатное обучение фронтенд-разработке с нуля на JavaScript и Nuxt— с поддержкой от наставника Для тех, кто хочет подтянуть свои навыки и наконец-то получать ответы на резюме, или начать путь во фронтенде На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 17 мая стартует бесплтаное обучение, где он поможет разобраться в JavaScript и Nuxt; а после и в других инструментах 👩‍💻👩‍💻 Обучение подойдёт, даже если у вас минимальный опыт в программирвоании — всё объясняюе так, чтобы поняла даже бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как попасть на работу джуну или разрабу с опытом Помимо кода — пошаговый план обучения современному фронтенду, — способы поиска клиентов с помощью ИИ — как взять первый заказ на фрилансе без перегретых бирж. — где искать работу, когда на сайтах вакансий одни отказы Подписывайтесь, чтобы участвовать, осталось 56 мест Учиться самому можно бесконечно, если не знать, куда копать. На интенсивах вы сократите время на поиск инфы и получите понятный план от разработчика, который сам нанимает новичков. ➡️Участвовать бесплатно Среди всех участников разыграет годовой доступ к топовому ИИ

📂 Напоминалка по Web Performance Metrics! Например, TTFB показывает, как быстро сервер начинает отвечать, а FCP помогает понять, когда пользователь впервые видит контент на экране. На картинке — 9 основных метрик производительности сайта, которые полезно держать под рукой каждому разработчику. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

Как сделать адаптивную сетку без media queries? Многие пишут отдельные breakpoint для каждой ширины экрана. В итоге CSS разрастается, а grid становится сложно поддерживать:

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Но CSS Grid умеет адаптироваться вообще без media queries:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

minmax(250px, 1fr) говорит: колонка не может быть меньше 250px, но может растягиваться. auto-fit автоматически переносит элементы на новую строку, когда места становится мало.

.card {
  min-width: 0;
}

А min-width: 0 дополнительно защищает grid от переполнений длинным контентом. 🔥 В итоге сетка сама решает, сколько колонок поместится в контейнер. 📣 Code Ready | #совет

Совет на 2027 год — переходите в ML. Пока обычные разрабы конкурируют с ИИ-копилотами, ML-инженеры эти самые нейронки создают. В эпоху нейростей это самые востребованые люди в мире программирования. Зарплаты мидлов начинаются от 250 000 ₽, а у сеньоров в BigTech доходят до 700 000 ₽. А чтобы освоить его всего за 4 месяца без лишней суеты — изучите канал Марка Миргалеева. Он помог 20+ ученикам найти работу от 250к в ML/NLP/AI-агентах На канале вы найдёте: — Всё про самые востребованные стеки(Python, ИИ-агенты, NLP) и почему математика — это не страшно, если учить только нужное. — Как оформить резюме, чтобы оно пролетало через любые LLM-фильтры и ATS-системы прямо к тимлидам. — Скрипты переговоров, которые помогли его ученикам прыгнуть с 0 до 360к всего за 8 месяцев. Во времена острой нехватки ML-разработчиков, это лучшее время, чтобы перекатиться. Переходи и изучай: https://t.me/+TwxQ8W6MF6hhY2My

👩‍💻 Хочется сразу видеть, какой цвет используется в коде? Colorize — подсвечивает все цветовые значения прямо в редакторе: HEX, RGB, HSL, CSS-переменные и другие форматы. Вместо набора символов ты сразу видишь реальный цвет рядом с кодом. Удобно при работе с UI, темами и большими CSS/SCSS-файлами, где важно быстро ориентироваться в палитре проекта. 📣 Code Ready | #vscode

👩‍💻 Эффект собирающихся карточек без JS! В интерфейсах важно удерживать внимание пользователя во время прокрутки. Один из приёмов — заставить карточки наслаиваться друг на друга вместо обычного скролла. Как работает:

• position: sticky фиксирует карточки во время прокрутки; • разные значения top создают ступенчатое прилипание; • margin-bottom формирует пространство для stacking; • тени усиливают ощущение глубины и слоёв.

Так можно делать более удобные блоки, где пользователь концентрируется на текущем контенте, а не теряет внимание во время длинного скролла. 📣 Code Ready | #фишка

Состояние, которое легко спутать с ленью Становится сложнее делать дела, меньше эмоций, больше "потом". И в какой-то момент жизнь превращается в автопилот, все через силу. Так противно, если честно, когда даже отдых не помогает😓 Советую посмотреть 3 коротких видео, чтобы понять, что с тобой происходит, почему и как из этого выбраться: https://t.me/Manifestans Хочется же жить и радоваться, правда? Это куда приятнее, чем существовать, как сомнамбула. Действуй!

👩‍💻 Хватит учить только синтаксис, начинай делать реальные проекты! Python Ready — авторский канал, где Python перестаёт быть только теорией и становится рабочим инструментом. Мини-проекты, боты, советы, разборы задач, гайды и шпаргалки для каждого программиста. 🔥 Советую подписаться: @python_ready

🐱 Frontend Information — база знаний по фронтенду в одном репозитории! Это сборник материалов для фронтенд-разработчика: от HTML/CSS и БЭМ до JavaScript, React, Redux и архитектуры приложений. Внутри есть и шпаргалки, и статьи, и курсы — всё разложено по темам и уровням. Получается готовая дорожная карта для фронтендера: можно идти от основ вёрстки до сложных SPA.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Разбираем как не словить утечку памяти на обработчиках событий! Одна из частых причин утечек — обработчик повесили, а снять забыли. Особенно это неприятно, когда событие висит не на локальном элементе, а на чём-то долгоживущем: window, document, глобальный event bus и т.п.

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  // забыли снять обработчик
}

Компонента уже нет, а onResize всё ещё вызывается. Плюс callback может держать в замыкании старое состояние, DOM-ноды, данные — и GC не сможет это нормально прибрать. Правильнее сразу закладывать cleanup:

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  window.removeEventListener('resize', onResize);
}

Главное — снимать нужно ту же самую функцию. Вот так не сработает:

el.addEventListener('click', () => doSomething());
el.removeEventListener('click', () => doSomething());

Это две разные функции, даже если выглядят одинаково. Нормальный вариант:

function handler() {
  doSomething();
}

el.addEventListener('click', handler);
el.removeEventListener('click', handler);

Ещё момент — capture.

el.addEventListener('click', handler, true);
el.removeEventListener('click', handler, false);

Так обработчик не снимется, потому что capture отличается. Для удаления браузер сравнивает type, listener и capture. passive, once, signal в этом сравнении не участвуют. Когда обработчиков несколько, удобно использовать AbortController:

const controller = new AbortController();

window.addEventListener('resize', onResize, {
  signal: controller.signal
});

document.addEventListener('visibilitychange', onVisible, {
  signal: controller.signal
});

// cleanup
controller.abort();

abort() снимет все обработчики, которые были добавлены с этим signal. А если обработчик нужен только один раз:

button.addEventListener('click', handler, { once: true });

После первого вызова он удалится сам. Важный нюанс: удалённый DOM сам по себе ещё не утечка. Если на него нет внешних ссылок — GC его заберёт. 🔥 Проблемы начинаются, когда: обработчик висит на window / document; callback держит старое состояние в замыкании; DOM-нода или данные лежат в массиве, store или кэше. 📣 Code Ready | #практика

Отклики, после которых зовут на собеседования Главный фокус команды ии-ассистента Софи: 1. Ребята переписали парсер - теперь собирают вакансии из 110+ источников: Telegram, Хабр, LinkedIn и другие. 2. Параллельно сделали умный мэтчер - Софи теперь показывает не всё подряд, а то, что подходит именно вам (локация, стек, грейд + обучение на фидбэке юзеров). На этом строится основа автооткликов - быстрых, точных и стабильных. Следующий шаг - откалибровать мэтчер до точности 80%+, но это невозможно без реальных пользователей. Поэтому в ближайшие дни они открывают доступ к бесплатному тестированию. Мест будет немного, так как фокус на качестве. ➡️Если хочешь попасть - подписывайся на канал, там будет анонс о наборе.

Как отодвинуть элемент в конец без justify-content? Частая задача — в одной строке есть несколько элементов, и один из них нужно прижать к правому краю. Обычно начинают оборачивать всё в дополнительные контейнеры.

.nav {
  display: flex;
  justify-content: space-between;
}

Но это ломает контроль над расстояниями между остальными элементами. Есть более точечный и управляемый способ:

.push {
  margin-left: auto;
}

auto-отступ забирает всё свободное пространство и отталкивает элемент вправо:

<nav class="nav">
  <span>Logo</span>
  <span class="push">Menu</span>
</nav>

Это работает не только для одного элемента, но и для групп:

.group {
  margin-left: auto;
}

Теперь можно точно управлять layout без изменения поведения остальных элементов. 🔥 Один margin-left: auto заменяет сложные flex-настройки и даёт контроль над выравниванием. 📣 Code Ready | #совет

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑️ AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄️ Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.

✍️ Web Dev Шпаргалка — вся веб-разработка в одном месте! Удобный справочник, где собраны ключевые аспекты веб-разработки, а также JS: базовый синтаксис, работа с DOM, события, асинхронность, взаимодействие с API. Плюс затронуты важные вещи из Node.js, сборка, инструменты и общая архитектура. Всё подано в сжатом формате, чтобы быстро освежить знания. 📌 Оставляю ссылочку: make-website.ru 📣 Code Ready | #сайт

👩‍💻 Скрываем и разворачиваем длинный текст без JS! В интерфейсах с карточками и списками важно ограничивать объём текста, чтобы сохранить аккуратную сетку, но при этом давать пользователю возможность раскрыть полный контент без перегрузки UI. Как работает:

• -webkit-line-clamp ограничивает количество строк; • checkbox используется как источник состояния; • селекторы управляют отображением текста; • кнопка синхронизируется с состоянием.

Такой подход позволяет управлять длинным контентом декларативно, без событий и дополнительных зависимостей. 📣 Code Ready | #фишка