Code Ready | Frontend

🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»! В этой статье: • Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение; • Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы; • Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

40 собесов и оффер за 1 месяц Алексей разработчик. Искал работу с декабря - написание сопроводов и отклики занимали очень много времени. Выхлоп - почти нулевой. В какой-то момент понял: так можно искать бесконечно. И по совету друга попробовал ии-ассистента Софи. ▫️За ~1 месяц прошел около 40 собеседований ▫️Получил оффер с вакансии, на которую, по его словам, не откликнулся бы сам

В описании она выглядела скучно, а по факту - одна из самых интересных компаний, с которыми я общался.

Весь процесс - от первого собеседования до оффера - занял 4 дня. P.S. Попробовать Софи бесплатно можно будет 16 июня. Не пропусти анонс здесь.

📂 Напоминалка по работе API и прокси! Например, Forward Proxy скрывает клиента и управляет исходящими запросами, Reverse Proxy принимает трафик на стороне сервера и распределяет его между сервисами, а API Gateway централизует авторизацию, rate limiting и маршрутизацию API. На картинке — базовые различия между Forward Proxy, Reverse Proxy и API Gateway, которые полезно держать под рукой каждому разработчику. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

👩‍💻 Эффект цифрового сбоя для текста без JS! Обычный заголовок можно превратить в полноценный UI-эффект, если разделить его на несколько независимых слоёв. Как работает:

• ::before и ::after создают копии текста; • каждый слой анимируется отдельно; • разные цвета формируют chromatic aberration; • небольшие смещения создают эффект glitch-сигнала.

Приём отлично подходит для стартовых экранов, главных секций сайта, экранов загрузки и декоративных интерфейсов. 📣 Code Ready | #фишка

💪 Кто сейчас вообще получает офферы в IT в 2026? Я создатель YeaHub — базы IT собеседований. И я регулярно вижу, как реально выглядит рынок изнутри. Вакансий стало меньше, а ATS и фильтры просто не пропускают до живого рекрутера. Собеседования стали жёстче — задают абсурдные вопросы, о которых ты никогда не слышал. Из-за высокой конкуренции выросли ожидания: задач стало больше и они стали сложнее.

Но при этом каждый день кто-то всё равно получает офферы в крупные компании — даже в текущем рынке. Вопрос в другом: как получить оффер именно тебе?

✊🏻 Меня зовут Руслан. Я IT-Founder & Tech Lead, строю продукты и руковожу командами из 100+ человек. Занимаюсь подготовкой Frontend-разработчиков к собеседованиям и трудоустройству в Big Tech. И я просто систематизировал то, что вижу на рынке и в собеседованиях. 💼 На канале: • база реальных IT собеседований (РФ и зарубежные компании) • задачи, которые дают в BigTech и продуктовых компаниях • полный гайд по подготовке к собеседованиям • как привести в порядок резюме • материалы по System Design и архитектуре • подготовка к Frontend трудоустройству в BigTech • инфраструктура больших приложений

📍 Если хочешь понять, как сейчас реально устроены собеседования — начни с закрепа на канале.

👉 https://t.me/reactify_IT

🤔 Code JavaScript — большой учебник и практикум по JS! На сайте собрана полноценная база материалов по JavaScript: от базового синтаксиса и работы с DOM до более сложных тем вроде замыканий, событий, async/await и ООП. Материал построен в формате уроков и практических заданий, поэтому подходит не только для чтения, но и для закрепления знаний на практике. 📌 Оставляю ссылочку: code.mu 📣 Code Ready | #сайт

preventDefault(): контроль стандартного поведения браузера! При работе с DOM-событиями часто нужно отменить действие браузера: переход по ссылке, отправку формы, скролл и т.д. Для этого используется event.preventDefault(). Метод отменяет стандартное поведение браузера, но не останавливает всплытие события. Для этого используется stopPropagation(). Базовый пример:

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault();

  console.log('link click handled manually');
});

После вызова preventDefault() переход по ссылке не произойдёт, и обработка полностью перейдёт под контроль JavaScript. Это особенно полезно в SPA-приложениях, где навигация управляется роутером без перезагрузки страницы. Пример — работа с формой:

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const data = new FormData(form);
  send(data);
});

По умолчанию форма отправляет данные и перезагружает страницу. preventDefault() позволяет перехватить submit и самостоятельно управлять отправкой данных. Так обычно реализуются AJAX-формы, async-запросы и кастомная валидация. Важно: preventDefault() работает только для событий, которые поддерживают отмену. Проверить это можно через свойство cancelable. Пример — проверка cancelable:

if (e.cancelable) {
  e.preventDefault();
}

Если событие не является cancelable, вызов preventDefault() не даст эффекта. Отдельный нюанс связан с passive listeners. Пример — passive listeners:

window.addEventListener('touchmove', (e) => {
  e.preventDefault(); // будет проигнорирован
}, { passive: true });

При passive: true браузер заранее считает, что обработчик не будет отменять действие события. Это используется для оптимизации scroll/touch-событий. В таком режиме preventDefault() игнорируется. Иногда отмена зависит от состояния интерфейса или бизнес-логики. Пример — условная отмена:

button.addEventListener('click', (e) => {
  if (!button.matches('.enabled')) {
    e.preventDefault();
  }
});

Здесь действие отменяется только при определённом условии. Также важно понимать разницу между preventDefault() и старым подходом через return false. Пример:

el.addEventListener('click', (e) => {
  e.preventDefault();
});

В addEventListener конструкция return false не отменяет действие браузера и не останавливает propagation. Такое поведение было характерно для inline-обработчиков и jQuery, поэтому многие разработчики до сих пор путают эти механики. Ещё момент: у кастомных событий (CustomEvent) обычно нет встроенного browser behavior. Это значит, что preventDefault() не отменяет никаких действий браузера. Но если событие создано с cancelable: true, вызов установит event.defaultPrevented = true. 🔥 preventDefault() — базовый инструмент управления пользовательскими взаимодействиями в js. 📣 Code Ready | #практика

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFJyvomj ИП Галактионов Тихон Витальевич, ИНН 771618975809

👩‍💻 Для удобной работы с .sass-синтаксисом в VS Code! Sass (.sass only) — добавляет полноценную поддержку indented-синтаксиса Sass: подсветку, автодополнение, навигацию и корректное распознавание .sass-файлов без фигурных скобок и точек с запятой. Помогает комфортно работать со старыми и современными Sass-проектами прямо в редакторе. 📣 Code Ready | #vscode

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

.title {
  font-size: 3rem;
}

@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }
}

Но CSS умеет нативно адаптировать размер текста под экран:

.title {
  font-size: clamp(1.2rem, 4vw, 3rem);
}

clamp() задаёт минимальный размер, адаптивное значение и максимальный предел. Теперь текст плавно масштабируется вместе с viewport.

.subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов. Media queries часто вообще становятся не нужны. 🔥 clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS. 📣 Code Ready | #совет

Взял заказ. Собрал бота. Агентство получило 15 000 рублей. Пока ты ждёшь лучшую вакансию в своём городе — Владислав Пурвиньш закрывает заказы на чат-ботов силами учеников. (Заказов сейчас висит в поиске 10 786 запросов). Каждый получает от 15 000 рублей за заказ. Которые даже не шарят в коде. Просто научились одному инструменту. И бизнесы платят им 200-250 000 рублей в месяц. Схема простая: берёшь реальный заказ из базы → собираешь бота по шаблону → наставник проверяет → сдаёшь и забираешь деньги. Старт 70-80 000 рублей. С опытом от 200 000 рублей в месяц. Запусти бота, там пошаговый план как в 2026 году зарабатывать как нефтяник, только с ноута. 👉 @other_digital_bot Обучение проходит официально — Владислав Пурвиньш имеет образовательную лицензию.

🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»! В этой статье: • Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение; • Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы; • Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

👩‍💻 Подсветка и удобная работа с env-конфигами! env-cmd-file-syntax — добавляет подсветку и поддержку синтаксиса для файлов env-cmd, помогая удобнее работать с переменными окружения. Расширение делает конфиги читаемее, упрощает навигацию и помогает быстрее замечать ошибки в названиях и структуре переменных. 📣 Code Ready | #vscode

💅 Josh W. Comeau — статьи и руководства по JavaScript и React! На сайте собраны статьи и интерактивные туториалы по JavaScript, React, CSS-анимациям, Flexbox, Grid и архитектуре интерфейсов. Автор объясняет сложные концепции простым языком и показывает не только как, но и почему это работает. 📌 Оставляю ссылочку: joshwcomeau.com 📣 Code Ready | #сайт

Почему текст внезапно ломает grid и вылезает за контейнер? Очень частый баг в CSS Grid: ставишь overflow: hidden, ellipsis, 1fr, а текст всё равно раздвигает layout и игнорирует ограничения. Кажется, что проблема в overflow.

.title {
  overflow: hidden;
  text-overflow: ellipsis;
}

Но проблема часто вообще не в этом. У grid-элементов по умолчанию стоит min-width: auto, из-за чего элемент отказывается сжиматься меньше контента. Решение — явно разрешить сжатие.

.grid-item {
  min-width: 0;
}

После этого начинают нормально работать:

.title {
  white-space: nowrap;
  text-overflow: ellipsis;
}

Важно: min-width: 0 нужно ставить именно на grid/flex item, а не обязательно на сам текстовый элемент. 🔥 Особенно критично для card-layout, dashboard, table, navbar и любых grid/flex интерфейсов с длинным текстом. 📣 Code Ready | #совет

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🤩 🕓 28 мая, четверг, 19:00 (мск) — приходите на митап в Санкт-Петербурге или подключайтесь онлайн. Спикеры из ЮMoney поделятся, как работают над задачами и улучшают процессы в команде. Вот о чём будут рассказывать: 🟣 Как спят вкладки в браузере. На живом примере разберём, как браузер усыпляет вкладки, почему из-за этого ломается real-time и какие приёмы дебага и resync помогают находить и чинить их в продакшене. 🟣 Как построить Spec-Driven платформу для генерации писем. Используя OpenAPI как единый источник правды, покажем, как описывать контракты электронных писем через спецификацию и автоматически генерировать консистентный HTML. 🟣 Подключение модуля шумоподавления в рабочее место оператора. Рассмотрим инструменты React, WebSockets, WebRTC, а также архитектуру и логику работы модуля шумоподавления. 🟣 Круглый стол — AI во фронтенде: вызовы и реальность. Обсудим влияние нейросетей на фронтенд с трёх позиций: рынка, разработки и образования. Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix 👈

📂 Напоминалка по оптимизации frontend performance! Например, code splitting разбивает большой бандл на части и ускоряет загрузку, а dynamic imports позволяют подгружать код только тогда, когда он реально нужен. Эти подходы помогают оптимизировать критический рендеринг, сократить размер передаваемых данных и улучшить метрики вроде LCP и INP. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурсы

🐱 Node.js Dev — большая база знаний по Node.js и backend-разработке! На сайте собраны статьи, документация и обучающие материалы по Node.js: работа с Express, npm, API, асинхронностью, модулями, потоками и серверной разработкой в целом. Есть как базовые разборы для новичков, так и более сложные темы по архитектуре и производительности. 📌 Оставляю ссылочку: nodejsdev.ru 📣 Code Ready | #сайт

Почему скролл пробивает модалку и начинает двигать страницу? Частый UX-баг: скроллишь контент внутри modal или sidebar, доходишь до конца, и начинает скроллиться вся страница под ним. Обычно это пытаются фиксить через JS и блокировку body-scroll:

body {
  overflow: hidden;
}

Но это может ломать iOS-scroll, sticky и вызывать скачки layout. CSS умеет решать это нативно:

.modal {
  overflow: auto;
  overscroll-behavior: contain;
}

Теперь scroll “останавливается” внутри контейнера и не передаётся родителю. Можно полностью отключить overscroll-эффекты и scroll-chain:

.modal {
  overscroll-behavior: none;
}

Это особенно полезно для modal, drawer, sidebar, chat и mobile-menu.

.chat {
  overflow: auto;
  overscroll-behavior: contain;
}

🔥 overscroll-behavior позволяет нативно контролировать scroll-chain и избавиться от части scroll-lock логики без дополнительных JS-хаков. 📣 Code Ready | #совет

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ