Red Collar | DEV

«Фронтенд — это просто натянуть дизайн»

Почему так думают: макет выглядит «как готовый сайт», конструкторы собирают страницы за вечер, а в демо все кликается.
Как на самом деле: фронтенд — это инженерия интерфейсов под ограничения браузера, сети и… людей.

⚙️ Что на самом деле делает фронтенд:

1. Состояния и данные. Списки, пагинация, кэш, ошибки, ретраи, офлайн/онлайн.
Если забыть: дубли, вечная «крутилка», потерянные формы.

2. Производительность. Core Web Vitals, сплит бандла, lazy-loading, оптимизация изображений, prefetch.
Если забыть: «тормозит на телефоне», падение конверсии.

3. Доступность (a11y). Семантическая разметка, фокус, клавиатура, контраст, экранные дикторы.
Если забыть: часть аудитории просто не сможет пользоваться сайтом (и это риски для бизнеса).

4. Международка и форматы. i18n, RTL, часовые пояса, числа/валюты, плюрализация.
Если забыть: «\$1,000» превращается в «1.000\$», даты путают людей.

5. Безопасность на клиенте. XSS, CSP, безопасная работа с user-generated контентом, токены.
Если забыть: инъекции через комментарии/поля форм.

6. Тестирование и релизы. Unit, e2e, визуальные снэпшоты, линтеры, типы, CI/CD.
Если забыть: регрессии после каждого «мелкого фикса».

⚙️ Мини-пример: одна кнопка «Оплатить»

Казалось бы — стиль + клик. На деле:

— disabled, loading, retry;
— двойные клики и защита от повторной оплаты;
— локализация текста/валюты;
— a11y (роль, aria-атрибуты, фокус);
— телеметрия (метрики кликов/ошибок);
— graceful-fallback при 3G/офлайне.

Вот почему «просто натянуть дизайн» редко работает в проде.

Когда «натянуть» можно:

Лендинги-однодневки, внутренние прототипы, хакатоны. Как только появляется масштаб/деньги/реальные пользователи — включается инженерия.

⚙️ Что учить джуну вместо «1001 фреймворк»:

— База: HTML по-семантике, современный CSS (layout, cascade layers), чистый JS.
— Сеть: HTTP, кеширование, куки/Storage.
— Доступность: роль элементов, фокус-менеджмент.
— Перф: критический путь рендера, images/fonts.
— Практика: один фреймворк (React/Vue), маршрутизация, состояние (React Query/Pinia), тесты.

Как потренироваться:

— Собери форму оплаты с состояниями и обработкой ошибок (моковый API).
— Переверни макет на RTL и темную тему — ничего не должно «плыть».
— Замерь LCP/CLS, разрежь бандл и добейся улучшений цифрами.

Фронтенд — это не «про красоту», а про надежный пользовательский опыт. Дизайн — старт. Продукт — финиш. И путь между ними — работа фронтенд-инженера.

Подписывайтесь 🔥 RDCLR.DEV

Зачем нужен еще один рантайм? Разбираем Bun

⚙️ Что это?
Bun — это современный JS/TS-рантайм (как Node.js или Deno), написанный на Zig. Главная цель — скорость и удобство «из коробки».

Что решает?
Если у вас проекты на Node.js, вы точно сталкивались с:
— долгим npm install;
— раздутыми зависимостями;
— миллионом конфигов под тесты, пакеты и запуск.

Bun пытается закрыть эти боли: вшивает в себя пакетный менеджер, тест-раннер и бандлер. По сути, это «3 в 1»: меньше костылей, меньше внешних тулов.

Чем отличается от аналогов?

⏺️ Node.js — проверенный стандарт, но тяжелый и старый.
⏺️ Deno — более безопасный и модульный, но с неочевидной экосистемой.
⏺️ Bun — упор на скорость (npm-пакеты ставятся в разы быстрее) и на то, чтобы не тянуть лишние инструменты.

⚙️ Как работает?
Пример: вы хотите поставить зависимости и запустить сервер.

bun install
bun run index.ts

Больше не нужно ставить jest, ts-node или webpack: Bun уже умеет запускать TypeScript, тестировать и собирать код.

Плюсы:

— Быстрый пакетный менеджер (в разы быстрее npm/yarn/pnpm).
— TS работает без дополнительной настройки.
— Встроенные тесты и бандлер.
— Совместим с npm-экосистемой.

Минусы:
— Проект еще сыроват (ломаются edge-кейсы).
— Документация пока не дотягивает до Node.js/Deno.
— Иногда пакеты ведут себя непредсказуемо.

Bun — это пока «стартап среди рантаймов»: быстрый, дерзкий, но не для продакшена на критичных проектах. Отлично подойдет для пет-проектов и прототипов, а через год-два может реально откусить кусок у Node.js.

Подписывайтесь 🔥 RDCLR.DEV

#культурнопоговорили с гостями SouthHub2025

Спец. выпуск #КультурноПоговорили, который был записан на площадке SouthHub 2025.

Участники собрались в уютном шале МТС, чтобы обсудить одну из важных тем — образование и поговорили о том, как позаботиться об образовании своих детей, достаточно ли просто учиться — или нужно что-то большее и почему учиться важно в любом возрасте.

📹 Смотреть выпуск на Youtube-канале

А вы как думаете, реально ли самостоятельно переучиться на программиста — или это что-то за гранью возможного?

💬 Продакт в кубе. Подписаться

Наш СЕО, Денис Ломов, вел подкаст на SouthHub 2025 в шаттле МТС

Смотрим ❤️

OKLCH: новая цветовая модель в CSS, о которой стоит знать

Помните времена, когда делали палитру в HSL, а кнопка «синяя» внезапно выглядела темнее «красной»? Или когда градиенты в sRGB превращались в унылую серую кашу? Так вот, с OKLCH это прошлое.

⚙️ Что за зверь

OKLCH — это новая цветовая модель в CSS. Одинаковые шаги по яркости реально выглядят как одинаковые шаги.

⚙️ Почему это круто

— палитры без шаманства: хочешь 5 кнопок разного цвета — берешь одну светлоту и насыщенность, меняешь только оттенок → все цвета выглядят ровно.
— градиенты без боли: никаких «грязных» промежуточных оттенков, переходы выглядят естественно.
— современные экраны: поддержка Display-P3, то есть реально яркие и «живые» цвета, которых нет в sRGB.
— OKLCH гарантирует: цвета воспринимаются так, как задумывал дизайнер.

⚙️ Где подвох

— старые браузеры не в теме → нужен fallback. Но в 2025 году вопрос «а что с IE?» мы уже почти не задаем.
— можно задать «несуществующие» цвета, которые ни один экран не отрисует. Но это скорее прикол для тех, кто любит ломать прод.

Код-пример: fallback без боли

:root {
  --color-primary: #0066ff; /* fallback для старых */
  
  @supports (color: oklch(0 0 0)) {
    --color-primary: oklch(65% 0.3 250);
  }
}

⚙️ Что это значит для нас

— дизайнеры наконец могут генерировать палитры, которые выглядят одинаково «по ощущениям».
— фронтам проще держать консистентность без ручных костылей.
— и да, теперь «почему эта кнопка зеленее, чем синяя» — не наш геморрой.

Перевели специально для вас ❤️

Подписывайтесь 🔥 RDCLR.DEV

🚨 Подглядываем за съемками с нашим СТО. Прямо сейчас Макс Мишанин — для шоу «Факапы»

Tailwind vs «классическая» верстка: что выбрать?

Когда речь заходит о стилизации интерфейсов, команды чаще всего делятся на два лагеря:

1. Tailwind — утилитарный CSS-фреймворк.
2. Классическая верстка — собственные стили + SCSS/LESS/PostCSS.

⚙️ Tailwind

— быстрый старт — можно сразу собирать UI из готовых утилит;
— меньше контекста: все в JSX, не нужно прыгать между файлами;
— встроенный контроль консистентности (размеры, цвета, шрифты);
— результат кажется «грязным» из-за длинных классов;
— сложнее поддерживать крупные проекты, если нет строгих правил.

// Tailwind
<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Click me
</button>

⚙️ Классика

— разделение кода (JSX отдельно, стили отдельно);
— легко использовать готовые дизайн-системы;
— гибкость: можно писать кастомные решения без ограничений;
— больше рутины: нужно заводить файлы, писать переопределения;
— выше риск «зоопарка»: стилей без строгого код-ревью;

// JSX
<button className="button">Click me</button>

// styles.css
.button {
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border-radius: 8px;
}
.button:hover {
  background: #1d4ed8;
}

Tailwind часто используют, если нужно быстро валидировать идею или запустить продукт в сжатые сроки. Но для долгосрочных проектов с богатым UI и кастомной логикой «классика» все еще выигрывает по читаемости и поддержке.

Подписывайтесь 🔥 RDCLR.DEV

Next.js 15: серверные компоненты по умолчанию и что это значит для нас

В новой версии Next.js кардинально поменяли подход к рендерингу:

⚙️ Все компоненты теперь серверные по умолчанию → меньше JS на клиенте, быстрее первый рендер, лучше SEO.
⚙️ Для интерактивных элементов достаточно добавить "use client" — и компонент оживет в браузере.

Что это дает:
— Сильный буст производительности без ручной оптимизации.
— Меньше данных гоняем по сети, экономим трафик.
— Проще управлять маршрутизацией и макетами через App Router — логика и данные теперь ближе друг к другу.

Где быть аккуратным:
— Если бездумно ставить "use client", можно снова нарастить бандл до прежних размеров.
— Некоторые библиотеки для UI могут не дружить с серверным рендерингом — придется искать обходные пути.

Next.js 15 не просто «еще одно обновление», а реальный сдвиг в сторону производительности и чистой архитектуры. Если вы строите проект с упором на скорость и SEO — самое время попробовать.

🔗 Источник

Подписывайтесь 🔥 RDCLR.DEV

Тестирование PWA: это вам не просто сайт

Прогрессивные веб-приложения — это как бутерброд из обычного фронта и нативных фич. Именно из-за этого их нельзя тестировать по привычной схеме.

Вот где можно допустить ошибки, если не знать нюансов:

1️⃣ Service Worker может кешировать баги
Если один раз закешировалась нерабочая версия, пользователь будет видеть ее снова и снова. Даже если вы давно все поправили.
Решение: принудительно обновлять Service Worker, реализовывать уведомление об обновлении, следить за флагом waiting.

2️⃣ Офлайн — это не режим, а головная боль
Проверяйте:
— что загружается при отключении интернета
— подгружаются ли нужные ассеты
— корректно ли работает fallback-страница
— можно ли перейти между посещенными страницами
Иначе пользователи при первом же отлете Wi-Fi получат белый экран.

3️⃣ Установка на рабочий стол ≠ просто иконка
Установка PWA зависит от множества условий:
— отображение в display: standalone
— наличие иконок нужного размера
— наличие HTTPS
— сервис-воркер с правильным scope
Приложение может не предложить установку, если упущена одна деталь.

4️⃣ iOS тестировать особенно важно
Safari до сих пор не поддерживает все то, что есть на Android. Например:
— push-уведомления присутствуют, но работают иначе
— ограничения в офлайн-режиме
— нет Web App Install Banner
Выкатить фичу, протестировав только в Chrome, — плохая идея.

5️⃣ Lighthouse не панацея
Да, он покажет базовые метрики и подскажет, чего не хватает для «настоящего» PWA. Но даже с зеленой оценкой может не работать установка, кеширование или offline-режим. Поэтому обязательно делать все вручную.

Полный разбор всех граблей и чек-лист для QA-инженеров читайте на Хабре

Подписывайтесь 🔥 RDCLR.DEV

Тест-план по учебнику ≠ реальная работа

В теории — все по шагам, с документацией и дедлайнами.
На практике — чаты, догадки, созвоны и вечная охота за устными договоренностями.

Собрали в карточки реальный опыт команды Red Collar:
→ Где теория не работает
→ Какой документации всегда не хватает
→ Почему чек-листы спасают чаще, чем кажется

Это не страшилки — это рабочие будни.
Полную статью читайте на Хабре

P.s. ходит слух, что в исходном тексте гораздо больше информации...

Подписывайтесь 🔥 RDCLR.DEV

Финал STUDENT CAMP не для слабых видеокарт

Миша Попов, лид креативной frontend-разработки Red Collar, проведет завершающую лекцию STUDENT CAMP и расскажет, как делать 3D в браузере, которое выглядит не как «ну, норм», а как диджитал-арт.

Разберем:
— Почему не стоит бояться WebGL и Three.js
— Как себя чувствует браузерная графика
— Когда дизайн нужно отстаивать

Что? Где? Когда?
📅 10 июля, 19:00
🏢 Офис Red Collar (г. Воронеж, ул. Текстильщиков 5Б, 3 подъезд, 3 этаж)
🎟 Регистрация

STUDENT CAMP — это:
🔴 Общение с практиками, а не преподавателями
🔴 Реальные кейсы, не лабораторки
🔴 Официальная летняя практика
🔴 Шанс попасть в команду Red Collar

Пусть это финал, но точно не конец 😉

Подписывайтесь 🔥 RDCLR.DEV

🤩 Стажировка Frontend-разработчиков в Red Collar

Лето — самое время не только отдыхать, но и прокачивать скиллы. Приглашаем начинающих фронтенд-разработчиков на стажировку в Red Collar.

🗓 Прием заявок: с 30 июня по 13 июля
🚀 Старт стажировки: 28 июля

Что нужно, чтобы попасть на стажировку:
— Знание HTML, CSS, JavaScript
— Знакомство хотя бы с одним фреймворком (мы в основном работаем с React)
— Желание учиться и время, чтобы пройти стажировку

Как подать заявку:

🎥Подготовьте резюме

🎥Заполните и сверстайте сопроводительное письмо по нашему шаблону. В письме расскажите о себе, какой у вас путь в разработке и что ждете от стажировки. Не забудьте указать фамилию, имя и добавить фото!

🎥Выполните тестовое задание

🎥Все материалы отправляйте на почту career@redcollar.ru

Увидимся в Red Collar — будем вместе делать проекты для Яндекса, VK, МТС, МегаФона, Mail и других топовых компаний!

Подписывайтесь 🔥 Red Collar

✨Звезды сказали✨, что сейчас удачное время для Frontend-стажировки в Red Collar, поторопитесь

Два языка, две лекции, две причины прийти в Red Collar

Один знает, как подружить ИИ с базой знаний. Второй — как собрать полноценный проект на Laravel. Обе лекции для тех, кто хочет погрузиться в современную backend-разработку на Python и PHP.

⚙ 1 июля, вторник, 19:00
Ваня Вялов — «RAG для маленьких»
Разберем:
→ Что такое RAG и зачем он нужен
→ Как на Python собрать пайплайн для генерации точных и релевантных ответов
→ Почему просто подключить LangChain — плохой план

🎟 Регистрация на лекцию

⚙ 3 июля, четверг, 19:00
Ваня Апевалов — «Фреймворк Laravel и его экосистема»
Поговорим про:
→ Что такое Laravel и чем он удобен
→ Какие пакеты и инструменты входят в экосистему фреймворка
→ Какие задачи можно закрыть готовыми решениями из коробки

🎟 Регистрация на лекцию

📍 Лекции проходят в офисе Red Collar:
г. Воронеж, ул. Текстильщиков 5Б, 3 подъезд, 3 этаж

STUDENT CAMP — это:
🔴 Общение с практиками, а не преподавателями
🔴 Реальные кейсы, не лабораторки
🔴 Официальная летняя практика
🔴 Шанс попасть в команду Red Collar

Не просто лекции, а пит-стоп для мозгов 🤠

Подписывайтесь 🔥 RDCLR.DEV