🤟 Попробовал 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