🤟 Попробовал Vue — и не жалею

Пять лет на React — и вдруг понял, что жизнь без useEffect реально возможна. Ниже — коротко, в чём именно разница 👇

➡️ Реактивность без боли

🟢 React:

const [count, setCount] = useState(0)
setCount(count + 1)

🟢 Vue:

const count = ref(0)
count.value++

Просто работаешь с переменной — и всё обновляется. Никаких setState, никаких магических зависимостей.

➡️ Computed > useMemo

🟢 React:

const filtered = useMemo(() => items.filter(i => i.active), [items])

🟢 Vue:

const filtered = computed(() => items.value.filter(i => i.active))

Во Vue не нужно думать про зависимости — оно само знает, когда пересчитать значение.

➡️ Template против JSX

<div v-for="item in items" :key="item.id"> читается легче, чем {items.map(item => <div>...)}. v-if, v-show, v-model — три директивы, которые убирают сотни строк boilerplate.

➡️ Меньше кода — меньше багов

🟢 React:

useEffect(() => {
if (email && !isValidEmail(email)) setError(‘Invalid’)
else setError(’’)
}, [email])

🟢 Vue:

const email = ref(’’)
const error = computed(() => email.value && !isValidEmail(email.value) ? ‘Invalid’ : ‘’)

Что реально зацепило:

1. Нет useEffect hell — watch и watchEffect проще и читаемее.

2. v-model — двустороннее связывание без боли и бойлерплейта.

3. Меньше бандл: React + ReactDOM ≈ 45 KB (gzip), Vue 3 ≈ 34 KB (gzip).

Что не зашло:

— Экосистема меньше

— TypeScript-интеграция всё ещё местами шероховата

📌 React — мощный фреймворк. Но Vue решает те же задачи проще: меньше бойлерплейта, меньше магии, больше ясности.

На работе продолжаю React (экосистема, команда, легаси). Но когда сажусь за свой проект в выходные — открываю Vue.

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

#code_battle

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

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