👍 Карьерный хаб для айтишников

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

⏺ React + TypeScript, Redux Toolkit — хороший пример продакшн-архитектуры для изучения.

📎 Ссылка на репозиторий

🐸 Библиотека фронтендера

#readme

😓 100vh съедает половину экрана на мобилках

Классика: делаешь height: 100vh для фуллскрин-секции, на десктопе всё ок, а на телефоне контент уезжает за экран и появляется скролл.

❔ В чем причина:

Браузер считает 100vh по полной высоте экрана, включая скрывающиеся панели. Когда скроллишь — адресная строка прячется, высота viewport меняется, и блок начинает прыгать.

Раньше приходилось считать реальную высоту через JS — решение рабочее, но костыль.

🔤 Теперь есть нормальные CSS-единицы (с 2022 года):

dvh — динамическая высота, подстраивается при скролле

svh — учитывает адресную строку

lvh — без адресной строки, максимальная высота

Поддержка: iOS 15.4+, Chrome 108+, Safari 15.4+

✅ Fallback:

Сначала указываем height: 100vh, а следом height: 100dvh — новые браузеры просто переопределят старое значение.

🐸 Библиотека фронтендера

#hotfix #css

🐸 Библиотека фронтендера

#pixel_pause

⭐️ Как скопировать коммит из другой ветки

Когда нужен один конкретный фикс, но мёржить всю ветку не хочется — выручает git cherry-pick.

git cherry-pick <hash>

Git применит выбранный коммит в твою текущую ветку — аккуратно и без лишнего кода.

⏺ Фишка:

— Можно применить сразу несколько коммитов:

git cherry-pick A^..B

Так Git возьмёт все коммиты с A по B включительно (вариант без ^ пропустит A).

— Удобно для переноса хотфиксов из main в develop или наоборот.

🐸 Библиотека фронтендера

#readme #git

👨‍🦳 Почему <div role="button"> — это не кнопка

Частая картина в коде:

<div class="btn" role="button">Нажми меня</div>

Кажется, что role="button" превращает <div> в кнопку. Но это не так.

🔤 Ключевой инсайт:

role="button" только сообщает скринридерам «это кнопка», но НЕ добавляет поведение кнопки.

У такого "div-button" по-прежнему нет:

- Фокуса с клавиатуры (Tab)
- Активации по Space/Enter
- Состояния disabled
- Доступного имени

Всё это нужно программировать вручную через JS.

⏺ Есть способ проще:

button {
  all: unset;
}

Одна строка CSS сбрасывает стили браузера — и можно стилизовать <button> как угодно, сохраняя всю встроенную доступность.

Семантический HTML — это не только про «правильность». Это способ избежать лишней работы.

📎 Читать подробнее

🐸 Библиотека фронтендера

#read_watch