💅 Josh W. Comeau — статьи и руководства по JavaScript и React!

На сайте собраны статьи и интерактивные туториалы по JavaScript, React, CSS-анимациям, Flexbox, Grid и архитектуре интерфейсов. Автор объясняет сложные концепции простым языком и показывает не только как, но и почему это работает.

📌 Оставляю ссылочку: joshwcomeau.com

📣 Code Ready | #сайт

👩‍💻 Подсветка и удобная работа с env-конфигами!

env-cmd-file-syntax — добавляет подсветку и поддержку синтаксиса для файлов env-cmd, помогая удобнее работать с переменными окружения. Расширение делает конфиги читаемее, упрощает навигацию и помогает быстрее замечать ошибки в названиях и структуре переменных.

📣 Code Ready | #vscode

🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»!

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

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

📣 Code Ready | #статья

Как сделать адаптивный текст без 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 | #совет

👩‍💻 Для удобной работы с .sass-синтаксисом в VS Code!

Sass (.sass only) — добавляет полноценную поддержку indented-синтаксиса Sass: подсветку, автодополнение, навигацию и корректное распознавание .sass-файлов без фигурных скобок и точек с запятой. Помогает комфортно работать со старыми и современными Sass-проектами прямо в редакторе.

📣 Code Ready | #vscode

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 | #практика

🤔 Code JavaScript — большой учебник и практикум по JS!

На сайте собрана полноценная база материалов по JavaScript: от базового синтаксиса и работы с DOM до более сложных тем вроде замыканий, событий, async/await и ООП. Материал построен в формате уроков и практических заданий, поэтому подходит не только для чтения, но и для закрепления знаний на практике.

📌 Оставляю ссылочку: code.mu

📣 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

📂 Напоминалка по работе API и прокси!

Например, Forward Proxy скрывает клиента и управляет исходящими запросами, Reverse Proxy принимает трафик на стороне сервера и распределяет его между сервисами, а API Gateway централизует авторизацию, rate limiting и маршрутизацию API.

На картинке — базовые различия между Forward Proxy, Reverse Proxy и API Gateway, которые полезно держать под рукой каждому разработчику.

Сохрани, чтобы не потерять!

📣 Code Ready | #ресурс

🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»!

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

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

📣 Code Ready | #статья