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

🔥 Юзаешь 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

🔥 React: useEffect с async-функцией — антипаттерн! Многие пишут так: useEffect(() => { async function fetchData() { const res = await fetch('/api/data') const json = await res.json() setData(json) } fetchData() }, []) 💥 Это работает, но неявно. Возникают проблемы: - нет отмены запроса при анмаунте; - сложно обрабатывать race conditions; - нельзя обрабатывать ошибки на уровне useEffect. ✅ Лучше — использовать AbortController и обычную функцию: useEffect(() => { const controller = new AbortController() fetch('/api/data', { signal: controller.signal }) .then(res => res.json()) .then(setData) .catch(err => { if (err.name !== 'AbortError') console.error(err) }) return () => controller.abort() }, []) 🧠 Профит: - безопасное отключение; - контроль ошибок; - читаемый код. 📲 Мы в 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 Питер Новости: Санкт-Петербург / СПБ / ДТП

🔎 Как "убить" ненужный console.log в проде — элегантно Многие забывают удалять console.log, warn, error перед продом. Это 💩 и баги безопасности, и просто шум. Есть изящное решение — удаление логов на этапе сборки. Для Vite / Rollup / esbuild / Terser — добавьте: 🔧 Terser (например, в Vite): // vite.config.ts terserOptions: { compress: { drop_console: true, drop_debugger: true, }, } ⚙️ Esbuild: esbuild: { drop: ['console', 'debugger'], } 💡 Совет: Если используете логгер типа logger.info(...), настройте статический анализ через Babel plugin или tree-shaking. Важно: не отключайте console.error на деве — это может скрыть критичные баги. 🧼 Чистый прод = меньше багов + быстрее загрузка 📲 Мы в MAX 👉 @frontend_1

JavaScript становится понятнее, когда из него получается не учебный фрагмент, а живое приложение. Трекер привычек — хороший формат для такой практики: есть интерфейс, данные, события, состояние, прогресс и сохранение результата в браузере. 29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти. Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript, как данные превращаются в интерфейс и почему для полноценного мини-приложения не всегда нужен фреймворк. Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень». 👉 Регистрируйтесь: https://vk.cc/cZMYJE Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🔥 useDeferredValue: плавный UX без костылей При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе. useDeferredValue из React решает эту проблему ✨ 🧠 Как это работает? Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно. const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); const filteredData = useMemo(() => { return heavyList.filter(item => item.includes(deferredQuery)); }, [deferredQuery]); ⚠️ Важно: useDeferredValue не откладывает сет стейт — он откладывает только чтение значения внутри зависимостей. 🚀 Идеально для: – Автокомплитов – Фильтрации больших списков – Любых дорогих вычислений при вводе 📚 Подробнее: https://react.dev/reference/react/useDeferredValue 📲 Мы в MAX 👉 @frontend_1

🔥 Трюк с :has() в CSS — как маленький хак улучшает UX Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее. Вот пример, как улучшить UX форм без JS 👇 form:has(input:invalid) button[type="submit"] { opacity: 0.5; pointer-events: none; } 📌 Что делает: Если в форме есть невалидный input, сабмит-кнопка становится неактивной. 💡 Применения :has(): - Показывать/прятать элементы в зависимости от вложенности; - Делать UI реактивным без JS; - Улучшать доступность форм и состояний. ✅ Минимализм, UX и современный CSS — в одном трюке. Попробуй! 📲 Мы в MAX 👉 @frontend_1

🔥 useMemo vs useCallback — не путай! Многие React-разработчики путают useMemo и useCallback. Давай раз и навсегда разберёмся: 🤯 В чём разница? - useMemo(fn, deps) — мемоизирует значение, возвращает результат выполнения fn(). - useCallback(fn, deps) — мемоизирует саму функцию, возвращает fn. 💡 Когда использовать? - useMemo — если ты вычисляешь что-то тяжёлое или зависящее от пропсов/стейта: const filtered = useMemo(() => data.filter(i => i.active), [data]); - useCallback — если передаёшь функцию в дочерний компонент, чтобы избежать лишних ререндеров: const handleClick = useCallback(() => { console.log('clicked'); }, []); ⚠️ Антипаттерн const memoized = useMemo(() => () => doSomething(), []); Это просто useCallback(doSomething, []). Не усложняй 😄 🔁 Используй по назначению — и код будет быстрее и понятнее! 📲 Мы в MAX 👉 @frontend_1

🔥 Трюк с :has() в CSS: "Родительская магия" Селектор :has() наконец стабильно работает во всех современных браузерах. Это открывает мощные возможности — реакция родителя на состояние потомка без JS! Пример: подсветить div, если внутри есть заполненный input: div:has(input:valid) { border: 2px solid green; } Или показать ошибку, если инпут невалиден: form:has(input:invalid) .error-message { display: block; } 📌 Зачем это нужно: - 💡 Упрощает логику UI без JS - 🚫 Убирает необходимость в лишних классах и хендлерах - 💪 Делает компоненты декларативнее и чище Проверить поддержку: https://caniuse.com/css-has 📲 Мы в MAX 👉 @frontend_1

Совет по HTML 💡 Возможно, ты не знал об этой HTML-сущности для вставки мягких переносов слов 🤩 📲 Мы в MAX 👉 @frontend_1