Code Ready | Frontend

Про связность, сцепленность и человеческий фактор в коде Когда впервые слышишь cohesion и coupling, кажется, что это из учебника по архитектуре. Но чем дольше работаешь во фронтенде, тем яснее: это не совсем про код, больше про отношения. Между модулями, командами и людьми. Хорошо объяснить разницу между cohesion (связность) и coupling (сцепленность) удалось Артему Сенюкову из Кинопоиска в своем посте. Добавлю от себя параллель, которую заметил. Слабая связность — когда никто не понимает, зачем этот компонент живёт. Сильная сцепленность — когда одно изменение ломает полприложения. Код становится как хрупкая экосистема, где одно движение рушит баланс. Кажется, что высокая связность и низкая сцепленность, не просто технический паттерн, а проявление зрелости. Когда умеешь отпустить контроль, доверить данные другому модулю и при этом понимать, где твоя зона ответственности. Хороший код — честная коммуникация: «я делаю своё, и этого достаточно». Архитектура — это не крепость, а город. С понятными границами и открытыми дорогами. Такой код живёт, развивается и не боится изменений.

👩‍💻 А слышали ли вы, что VS Code может сам проверять Markdown-файлы на ошибки? Markdownlint — расширение, которое анализирует .md-файлы и помогает держать документацию, README и статьи в идеальном порядке. Оно подсвечивает нарушения стандартов (лишние пробелы, неправильные заголовки, отступы в списках) и подсказывает, как их исправить. 📣 Code Ready | #vscode

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

• HTML: компактная разметка с label и textarea. • CSS: лёгкий дизайн, мягкие тени и фокус-эффект. • JS: автоматическое изменение высоты на основе scrollHeight.

Такой элемент отлично подойдёт для чатов, форм обратной связи или комментариев — там, где важно, чтобы поле “росло” вместе с текстом. 📣 Code Ready | #гайд

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке от эксперта; 6. Научишься использовать ChatGPT и Giga во Frontend-разработке; 7. Узнаешь 9 способов найти первый заказ даже без опыта. А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем уже завтра. 🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.

Определяем HEX-код базового цвета по названию! Узнаем HEX цвета прямо из консоли браузера, без библиотек и сайтов - всё решается нативным JS. Шаг 1 — вводим название цвета:

const colorName = prompt("Enter a color name:");

Шаг 2 — создаём элемент и получаем его реальный цвет:

try {
  const div = document.createElement("div");
  div.style.color = colorName.toLowerCase();
  document.body.appendChild(div);

  const rgb = getComputedStyle(div).color;
  document.body.removeChild(div);

Шаг 3 — конвертируем RGB в HEX:

  const hex = rgb.match(/\d+/g)
                 .map(x => (+x).toString(16).padStart(2, "0"))
                 .join("");
  console.log(`Hex code for '${colorName}' is: #${hex}`);

Шаг 4 — небольшая обработка ошибки:

} catch {
  console.log("Invalid color name. Try names like 'red', 'skyblue', 'orange'.");
}

Пример:

Enter a color name: Silver - #c0c0c0  
Enter a color name: Yellow - #ffff00

🔥 Практика на работу со стилями, DOM и конвертацией цветов из RGB в HEX. 📣 Code Ready | #практика

ТОП 3 канала для тех, кто увлекается хакингом и кибербезопасностью Этичный Хакер — крупнейший в СНГ канал по информационной безопасности. OSINT, анонимность, пентест, социальная инженерия. Лаборатория Хакера — авторский канал от специалиста по ИБ. Новости даркнета, сетевая разведка, обзоры инструментов с github, полезные подборки. Mr.Robot — OSINT, анонимность, OWASP, Linux, даркнет.

👩‍💻 Описываем форму фигуры с помощью атрибута! Атрибут d описывает путь, который будет отрисован элементом <path>. Значение атрибута — строка со списком команд, написанных особым образом. Доступные команды:

• Перемещение кисти — M, m; • Прямая линия — L, l, H, h, V, v; • Кубическая кривая Безье — C, c, S, s; • Квадратичная кривая Безье — Q, q, T, t; • Эллиптическая кривая — A, a; • Закрытие пути — Z, z.

Числа в описании пути могут быть разделены пробельными символами или запятыми, причем нет ограничений в каких ситуациях запятую можно, а в каких нет. 📣 Code Ready | #атрибут

Совет на 2025 год — переходите на Go. На Go собирают банки, маркетплейсы и highload-сервисы. Зарплаты мидлов начинаются от 200 000 ₽, а у сеньоров доходят до 600 000 ₽. А чтобы освоить его всего за 3 месяца — изучите канал Максима Аверина. Его бэкграунд: Senior Golang/Python (X5, Lamoda, BestDoctor), 7 лет в бэкенде, экс-тимлид и PM, 300+ собеседований с 2018 На канале вы найдёте: — Советы, которые в разы повысят ваши шансы на перекат в Go — Как легко выбивать себе ту ЗП, которую желаете: скрипты переговоров и шаблоны писем — Как сделать мощный проект с code-review и уже через три недели пойти на собесы. Огромный опыт, который ты можешь перенять абсолютно бесплатно. Переходи и изучай: @maksim_golang

❤️ Codepip — крутой тренажёр для разработчиков! Хочешь прокачать навыки HTML, CSS или JavaScript без скучных учебников? На Codepip учёба превращается в лёгкий и увлекательный процесс. Каждый уровень - это маленький челлендж, который заставит думать как программист и писать правильный код. 📌 Попробуйте сами: codepip.com 📣 Code Ready | #ресурсы

📱 Секундомер с кнопками Start / Stop / Reset! Привет! В этом гайде создаём простой секундомер - он запускается, останавливается и сбрасывается с помощью трёх кнопок, а логика построена на setInterval. Ключевые моменты:

• HTML: разметка дисплея времени и кнопок управления. • CSS: центрирование, аккуратный интерфейс и отзывчивые кнопки. • JS: запуск, остановка и сброс счётчика через setInterval и clearInterval.

Такой мини-проект отлично подходит для тренировки работы с таймерами, интервалами и обработчиками событий. 📣 Code Ready | #гайд

Как разработчику вырасти до Senior за полгода? Чтобы не сидеть месяцами без нормальных офферов и проваливать тех. скрининги, прокачивайте свои слабые места. Если не знаете, что вам нужно усилить и какой у вас уровень — пройдите бесплатный технический скрининг от AI-платформы Jumse. 1) Проанализируете код и найдите ошибки 2) Получите фидбек и оценку качества ответов 3) Заберите карту знаний, которую Jumse сформирует специально для вас В закрепе канала Jumse найдёте этот скрининг и не только 😉👇 • Надо ли учить всё подряд, чтобы прокачаться? • Что нужно знать о себе, прежде чем идти на новый проект? • Как понять, что ты Middle? Подписывайся, чтобы определить свои зоны роста и работать в лучших компаниях: @JUMSEapp ❗️На бесплатный скрининг на базе Python, Java, C# или React+TS+JS есть только 20 мест. Успевайте! Реклама. ИП Андреева Мария Сергеевна, ИНН: 771001057735, erid: 2Vtzqwtbaz9

☕️ JavaScript Questions — огромная коллекция вопросов и ответов по JS! От хитрых нюансов типов данных и замыканий до глубокой логики this и работы событийного цикла - здесь разжёвано то, что обычно путает даже опытных разработчиков. Каждый пример сопровождается пояснением!

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

📣 Code Ready | #ресурсы

Замыкания: сохраняем состояние без классов! Иногда нужно запоминать данные между вызовами функции — например, считать клики, сохранять позиции скролла или количество запросов. Решение — замыкания. Проблемный вариант — данные хранятся в глобальной области. Любой код может изменить значение и сломать логику:

let count = 0;

function click() {
  count++;
  console.log("Clicks:", count);
}

Чтобы изолировать данные, создадим внутреннюю область видимости. Переменная count теперь доступна только функции, которая её замыкает:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log("Clicks:", count);
  };
}

Используем функцию, чтобы хранить состояние между вызовами. Каждый обработчик клика получит своё независимое значение:

const handleClick = createCounter();
button.addEventListener("click", handleClick);

🔥 Замыкания делают функции “умными” — они хранят данные и поведение вместе, формируя капсулу логики. 📣 Code Ready | #практика

Фронтенд, покодим на Yandex Cup? Открыта регистрация на Yandex Cup — чемпионат Яндекса для разработчиков с призовым фондом 12 млн рублей и финалом в Стамбуле! Участники смогут соревноваться за призы и выход в финал, а ещё — пройти собеседование в Яндекс по упрощённой схеме. В направлении Фронтенд 5 призовых мест: 1 место — 500 000 ₽ 2 место — 400 000 ₽ 3 место — 300 000 ₽ 4 место — 200 000 ₽ 5 место — 100 000 ₽ Этапы Yandex Cup: 20–29 октября пройдёт пробный тур для знакомства с платформой и задачами. 2 ноября состоится квалификация, где будут определены 180 финалистов. Финал и церемония награждения пройдут офлайн 5–7 декабря в Стамбуле. Регистрируйтесь до 29 октября.

👩‍💻 Знал ли ты, что можно открывать проекты прямо на сервере через VS Code? Remote – SSH даёт возможность с лёгкостью получать доступ, редактировать и передавать файлы на удалённый сервер, при этом оставаясь в знакомом интерфейсе VS Code. 📣 Code Ready | #vscode

📱 Разбираем работу с событиями! В этой шпаргалке собраны методы и свойства для управления реакциями интерфейса: подписка, удаление, остановка всплытия и создание собственных событий. Эти приёмы применяются при построении интерактивных интерфейсов, делегировании обработчиков и организации обмена сигналами между компонентами. 📣 Code Ready | #шпора