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

💡Шпаргалка по CSS 📲 Мы в MAX 👉 @frontend_1

Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в американскую компанию 👆Это недавние результаты участников нашего комьюнити.

Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум!

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

Сегодня хочу поделиться с тобой одной тонкостью, которая помогает делать интерфейс более дружелюбным — скелетоны (skeleton loaders). Это те самые серые заглушки, которые показываются до загрузки данных. Пользователь видит, что «что-то происходит», и не чувствует, что приложение тормозит. 🦴 Как сделать скелетон быстро и без боли? Я часто использую компонент из @radix-ui/react-skeleton или shadcn/ui. Но можно собрать свой за 5 минут:

const Skeleton = ({ className }: { className?: string }) => (
  <div className={`animate-pulse bg-muted rounded-md ${className}`} />
)

А потом использовать так:

{isLoading ? (
  <Skeleton className="h-6 w-40" />
) : (
  <span>{user.name}</span>
)}

Без скелетонов пользователь может увидеть "прыгающий" интерфейс — сначала пустота, потом всё резко появилось. Это раздражает. Скелетоны создают ощущение плавности и контроля. 📲 Мы в MAX 👉 @frontend_1

💡 Scroll-snap-type Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

🔘Используется для каруселей, слайдеров и списков. Зачем это нужно: ➡️ Сделать UX удобным и предсказуемым. ➡️ Избавиться от костылей на JS. 📲 Мы в MAX 👉 @frontend_1

Ознакомьтесь с этими 5 советами по адаптивному веб-дизайну 👨‍💻 📲 Мы в MAX 👉 @frontend_1

Импорт локальных изображений vs использование изображений из папки / public в Next.js 📲 Мы в MAX 👉 @frontend_1

/public

Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } https://codepen.io/jh3y/pen/abPgrGR 📲 Мы в MAX 👉 @frontend_1

Совет по JavaScript💡 Легко и правильно отображайте цены. 📲 Мы в MAX 👉 @frontend_1

Совет по веб-доступности 💡 Лучший способ сделать ваши ссылки, состоящие только из иконок, удобными для экранных читалок. 📲 Мы в MAX 👉 @frontend_1

📲 Мы в 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