Frontend разработчик

📲 Мы в MAX 👉 @frontend_1

CSS совет 💡 Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете. 📲 Мы в MAX 👉 @frontend_1

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин https://max.ru/channel_win_sysadmin Системный Администратор Windows https://max.ru/channel_linux_admin Linux: Системный администратор https://max.ru/channel_linuxmod Linux https://max.ru/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Городские📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП https://max.ru/channel_krasnodar_novosty Краснодар Новости https://max.ru/channel_novosibirsk_novosti Новосибирск https://max.ru/channel_samara_novosti Новости Самары https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга https://max.ru/channel_kazan_novosti Новости Казани https://max.ru/channel_omsk_novosti Новости Омска https://max.ru/channel_moskva_24 Москва 24

💡 Знаете ли вы, что к числам в упорядоченном списке можно добавить 0️⃣? 📲 Мы в MAX 👉 @frontend_1

CSS-совет 💡 Возможно, ты не знал о единице измерения lh в CSS 📲 Мы в MAX 👉 @frontend_1

Совет по HTML 💡 Семантический способ выделить часть текста ✅ 📲 Мы в MAX 👉 @frontend_1

В нашем канале много ценного для разработчиков по подготовке к собесам👇

Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!

Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 https://t.me/frontend_punks Реклама, erid: 2W5zFGwDoJH ИП Галактионов Тихон Витальевич, ИНН 771618975809

🎯 Современный способ центрирования с place-items Центрировать элемент — базовая задача, но многие до сих пор пишут лишнее: ❌ Старый способ с Flexbox:

display: flex;
justify-content: center;
align-items: center;

✅ Новый минималистичный способ с Grid:

display: grid;
place-items: center;

📌 place-items — это сокращение для align-items + justify-items. Работает только с CSS Grid, но зато: * Меньше кода * Более читаемо * Идеально для одиночных элементов в контейнере 💡 Подходит для модалок, карточек, лоадеров и др. ⚙️ Поддержка: все современные браузеры (даже IE11 частично поддерживает place-items как -ms-grid) Пробуй — и забудь про лишние строки! 📲 Мы в MAX 👉 @frontend_1

🚨 Осторожно с useEffect: ловушка зависимости на функцию! В React легко попасть в ловушку, передавая функции внутрь useEffect, не задумываясь об их зависимости.

useEffect(() => {
  fetchData(); // ⚠️ Эта функция может пересоздаваться на каждый рендер!
}, [fetchData]);

Если fetchData определена внутри компонента, она будет новой при каждом рендере, и эффект снова выполнится. Это может вызвать бесконечные циклы или лишние вызовы. 🛠 Решения: 1. Вынести функцию наружу, если она не зависит от пропов/стейта. 2. Обернуть в useCallback:

const fetchData = useCallback(() => {
  // ...
}, []);

📌 Всегда проверяй зависимости в useEffect. Полагайся на ESLint-плагин react-hooks — он поможет не попасть в ловушку. 📲 Мы в MAX 👉 @frontend_1

🔥 Юзаешь React + TypeScript? Тогда вот тебе трюк на миллион — типизация children правильно! Часто можно увидеть вот так:

type Props = {
  children: React.ReactNode;
}

Но это слишком широкий тип. Он допускает что угодно: строки, числа, фрагменты, null… 📌 Лучше — использовать ReactElement:

import { ReactElement } from 'react';

type Props = {
  children: ReactElement;
}

👉 Это значит: ожидаем ровно один React-элемент, и никаких строк/чисел/массивов. Если нужно несколько элементов — используем:

type Props = {
  children: ReactElement | ReactElement[];
}

🎯 Это даёт жёсткую и предсказуемую типизацию, особенно полезно для обёрток и layout-компонентов. ⚠️ А если хочешь прям универсальность — тогда ReactNode ок. Но осознанно. Пиши типы как профи 💪 📲 Мы в MAX 👉 @frontend_1

🔥 Быстрое сравнение объектов в JS без глубоких сравнений Иногда не нужен deep equal, а просто надо понять: два объекта точно одинаковы по содержимому? Вот простой, но мощный трюк на базе JSON.stringify():

const isEqual = (a: object, b: object) =>
  JSON.stringify(a) === JSON.stringify(b);

📌 Подходит для: * Простых объектов без методов и undefined; * Сравнения кеша/props в memo; * Быстрой проверки изменений формы. ⚠️ Не подходит: * Для вложенных объектов с разным порядком ключей ({a:1,b:2} !== {b:2,a:1}); * Когда есть Date, Map, Set, функции, undefined, symbol. 🧠 Альтернатива: Если важен порядок и типы — используй lodash.isEqual. 👉 Пример использования:

if (!isEqual(prevForm, currentForm)) {
  saveChanges();
}

⚡ Просто. Эффективно. Для 80% кейсов — 🔥 📲 Мы в MAX 👉 @frontend_1

🧩 Трюк с z-index, о котором часто забывают Если у вас не работает z-index — причина может быть не в его значении, а в контексте наложения (stacking context). ❗️Вот что его создаёт (неочевидное): * position: fixed | absolute | relative + z-index ≠ auto * transform, filter, perspective, opacity < 1 * will-change, mix-blend-mode, contain: layout и другие 📦 Пример:

.parent {
  transform: translateZ(0); /* создаёт stacking context */
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 999; /* но не выйдет за пределы .parent */
}

🧠 Вывод: z-index работает только внутри текущего контекста наложения. Чтобы перекрыть что-то выше — нужно изменить контекст. 📚 Подробнее: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Stacking_context 📲 Мы в MAX 👉 @frontend_1

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин https://max.ru/channel_win_sysadmin Системный Администратор Windows https://max.ru/channel_linux_admin Linux: Системный администратор https://max.ru/channel_linuxmod Linux https://max.ru/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Городские📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП https://max.ru/channel_krasnodar_novosty Краснодар Новости https://max.ru/channel_novosibirsk_novosti Новосибирск https://max.ru/channel_samara_novosti Новости Самары https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга https://max.ru/channel_kazan_novosti Новости Казани https://max.ru/channel_omsk_novosti Новости Омска https://max.ru/channel_moskva_24 Москва 24

CSS совет 💡 Для лучшего UX используйте :focus-visible вместо :focus для изменения стиля обводки ✅ 📲 Мы в MAX 👉 @frontend_1

🎯 CSS tip: как избавиться от :last-child и упростить отступы Когда нужно задать отступ между элементами, но не последнему, часто пишут:

.item:not(:last-child) {
  margin-bottom: 16px;
}

Но есть современный способ без селекторов и костылей 👇 ✅ Используй gap с flex или grid:

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

📌 Преимущества: – Нет нужды в :last-child – Чище HTML и CSS – Работает одинаково в любом направлении (row, column) – Поддерживается во всех современных браузерах Итог: если ты всё ещё пишешь :not(:last-child) — пришло время обновить подход. 📲 Мы в MAX 👉 @frontend_1

Совет по CSS 💡 Знаете ли вы, что можно упростить длинные списки селекторов в CSS с помощью :where()? 🤩 📲 Мы в MAX 👉 @frontend_1

🔥 useMemo vs. переоптимизация Многие мидлы бездумно оборачивают всё подряд в useMemo, думая, что так улучшают производительность. На деле — часто наоборот: добавляют лишние вычисления и усложняют отладку. 📌 Когда useMemo реально нужен: - 🧠 Тяжёлые вычисления (парсинг, сортировка, фильтрация больших массивов); - 🧱 Объекты/массивы в props, чтобы избежать лишних ререндеров memo-компонентов; - 🖼️ Стабильность зависимостей в useEffect. ❌ Когда НЕ нужен: - 💨 Простые вычисления (арифметика, строковые конкатенации); - 🧹 "на всякий случай" — без профилирования. 📊 Как проверить, помогает ли useMemo? Открой DevTools → вкладка Profiler → замерь рендер до и после — часто разница нулевая (или хуже). 🛠️ Альтернатива: начни с чистого компонента, профилируй, оптимизируй только узкие места. 📲 Мы в MAX 👉 @frontend_1

🔥 Vue: тонкий нюанс с v-if и v-for Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇

<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
  {{ item.name }}
</li>

Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if. ✅ Лучше так:

<li v-for="item in visibleItems">
  {{ item.name }}
</li>

А в computed:

computed: {
  visibleItems() {
    return this.items.filter(item => item.visible);
  }
}

💡 Это улучшит производительность и избавит от неожиданных багов при больших списках. Подробнее — в оф. доках: https://vuejs.org/guide/essentials/list.html#v-for-with-v-if 📲 Мы в MAX 👉 @frontend_1

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? Кто-то без всякой драмы проходит собесы и уходит в Яндекс, VK или на валютную удалёнку. В сильные и амбициозные команды. А у кого-то зарплата не растёт, который год, задачи одни и те же неделя за неделей, календарь забит созвонами, от которых ничего не меняется. Отклики на вакансии, а в ответ — тишина или очередная noname контора. На собесах вообще нигде не встречающаяся техничка(( 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке. Из своих учеников собрал комьюнити, в котором уже больше 220 frontend-разработчиков 🫂

В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.

У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ База по микрофронтам ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме А ещё у меня куча успешных кейсов и отзывов — все они в канале. Подписывайся: https://t.me/+CYoHn4u9_BgyOGEy Реклама, erid: 2W5zFHNcK8V ИП Галактионов Тихон Витальевич, ИНН 771618975809

🚨 Антипаттерн: усложнённые condition-рендеры Иногда в JSX попадаются вот такие "шедевры":

{isLoggedIn && user?.settings?.theme === 'dark' && !isLoading && <DarkDashboard />}

🧠 Да, работает. Но читаемость? Поддержка? Страдает. ✅ Лучше так:

const shouldShowDarkDashboard =
  isLoggedIn && user?.settings?.theme === 'dark' && !isLoading;

return (
  <>
    {shouldShowDarkDashboard && <DarkDashboard />}
  </>
);

📌 Плюсы: - легко отлаживать; - можно переиспользовать; - код "говорит", что делает. 🎯 Правило: выноси сложные условия из JSX — это прокачивает читаемость и облегчает поддержку. 📲 Мы в MAX 👉 @frontend_1