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

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

Athena Crisis — это современная реализация тактической стратегии в духе Advance Wars, написанная на Rust с использованием движка Bevy. Особенности: * Сражения в стиле пошаговой стратегии * Кампания с диалогами и кат-сценами * Пользовательские карты и редактор уровней * ИИ-противники * Полностью кроссплатформенный: работает в браузере, на ПК и мобильных устройствах * Сохраняемые игры Проект в активной разработке. Вы можете попробовать демо прямо сейчас в браузере: Играть в демо https://github.com/nkzw-tech/athena-crisis 👉 @frontend_1

Не просто кнопка "Загрузить": Секреты работы с файлами в React 🎓 19 мая в 20:00 — бесплатный вебинар для разработчиков, которые хотят делать удобную и безопасную загрузку файлов в React-приложениях. Что покажем: — Drag & Drop, предпросмотр, валидация — всё, что ждали от UX; — Обработка PDF, Excel и изображений прямо в браузере; — Как не «положить» интерфейс при загрузке тяжёлых файлов; — Защита от XSS, проверка MIME-типов и другие нюансы безопасности. 📌 Для фронтендеров и fullstack-разработчиков, которым важна клиентская оптимизация. В программе — реальные примеры кода, которые можно сразу использовать. Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение. Регистрация: https://vk.cc/cLVH8S Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🎯 Современный способ центрирования с 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) Пробуй — и забудь про лишние строки! 👉 @frontend_1

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

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

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

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

📌 Всегда проверяй зависимости в useEffect. Полагайся на ESLint-плагин react-hooks — он поможет не попасть в ловушку. 👉 @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 ок. Но осознанно. Пиши типы как профи 💪 👉 @frontend_1

🚀 Подборка Telegram каналов для программистов Системное администрирование, DevOps 📌 https://t.me/bash_srv Bash Советы https://t.me/win_sysadmin Системный Администратор Windows https://t.me/sysadmin_girl Девочка Сисадмин https://t.me/srv_admin_linux Админские угодья https://t.me/linux_srv Типичный Сисадмин https://t.me/devopslib Библиотека девопса | DevOps, SRE, Sysadmin https://t.me/linux_odmin Linux: Системный администратор https://t.me/devops_star DevOps Star (Звезда Девопса) https://t.me/i_linux Системный администратор https://t.me/linuxchmod Linux https://t.me/sys_adminos Системный Администратор https://t.me/tipsysdmin Типичный Сисадмин (фото железа, было/стало) https://t.me/sysadminof Книги для админов, полезные материалы https://t.me/i_odmin Все для системного администратора https://t.me/i_odmin_book Библиотека Системного Администратора https://t.me/i_odmin_chat Чат системных администраторов https://t.me/i_DevOps DevOps: Пишем о Docker, Kubernetes и др. https://t.me/sysadminoff Новости Линукс Linux 1C разработка 📌 https://t.me/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С https://t.me/DevLab1C 1С:Предприятие 8 https://t.me/razrab_1C 1C Разработчик https://t.me/buh1C_prog 1C Программист | Бухгалтерия и Учёт https://t.me/rabota1C_rus Вакансии для программистов 1С Программирование C++📌 https://t.me/cpp_lib Библиотека C/C++ разработчика https://t.me/cpp_knigi Книги для программистов C/C++ https://t.me/cpp_geek Учим C/C++ на примерах Программирование Python 📌 https://t.me/pythonofff Python академия. https://t.me/BookPython Библиотека Python разработчика https://t.me/python_real Python подборки на русском и английском https://t.me/python_360 Книги по Python Java разработка 📌 https://t.me/BookJava Библиотека Java разработчика https://t.me/java_360 Книги по Java Rus https://t.me/java_geek Учим Java на примерах GitHub Сообщество 📌 https://t.me/Githublib Интересное из GitHub Базы данных (Data Base) 📌 https://t.me/database_info Все про базы данных Мобильная разработка: iOS, Android 📌 https://t.me/developer_mobila Мобильная разработка https://t.me/kotlin_lib Подборки полезного материала по Kotlin Фронтенд разработка 📌 https://t.me/frontend_1 Подборки для frontend разработчиков https://t.me/frontend_sovet Frontend советы, примеры и практика! https://t.me/React_lib Подборки по React js и все что с ним связано Разработка игр 📌 https://t.me/game_devv Все о разработке игр Библиотеки 📌 https://t.me/book_for_dev Книги для программистов Rus https://t.me/programmist_of Книги по программированию https://t.me/proglb Библиотека программиста https://t.me/bfbook Книги для программистов БигДата, машинное обучение 📌 https://t.me/bigdata_1 Big Data, Machine Learning Программирование 📌 https://t.me/bookflow Лекции, видеоуроки, доклады с IT конференций https://t.me/rust_lib Полезный контент по программированию на Rust https://t.me/golang_lib Библиотека Go (Golang) разработчика https://t.me/itmozg Программисты, дизайнеры, новости из мира IT https://t.me/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 https://t.me/nodejs_lib Подборки по Node js и все что с ним связано https://t.me/ruby_lib Библиотека Ruby программиста https://t.me/lifeproger Жизнь программиста. Авторский канал. QA, тестирование 📌 https://t.me/testlab_qa Библиотека тестировщика Шутки программистов 📌 https://t.me/itumor Шутки программистов Защита, взлом, безопасность 📌 https://t.me/thehaking Канал о кибербезопасности https://t.me/xakep_2 Хакер Free Книги, статьи для дизайнеров 📌 https://t.me/ux_web Статьи, книги для дизайнеров Математика 📌 https://t.me/Pomatematike Канал по математике https://t.me/phis_mat Обучающие видео, книги по Физике и Математике https://t.me/matgeoru Математика | Геометрия | Логика Excel лайфхак📌 https://t.me/Excel_lifehack https://t.me/mir_teh Мир технологий (Technology World) Вакансии 📌 https://t.me/sysadmin_rabota Системный Администратор https://t.me/progjob Вакансии в IT

🔥 Быстрое сравнение объектов в 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% кейсов — 🔥 👉 @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 👉 @frontend_1

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