Совет по CSS 💡

Используйте табличные цифры для отображения таймеров ✅

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

👉 @frontend_1

🪄 Трюк: «Скелетон» без JS

При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  100% {
    background-position: -200% 0;
  }
}

📌 Как использовать:

1. Создаёте div с классом .skeleton вместо контента.
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.

Плюсы:

- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».

👉 @frontend_1

Совет CSS 💡

Вы можете не знать об этом псевдоклассе CSS

👉 @frontend_1

Совет по Javascript 💡

Как выбрать последний элемент массива

👉 @frontend_1

🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект?

Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.

Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.

⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOmfRV

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Почему стоит использовать Tagged Unions при разработке на TypeScript

Сегодня я хочу поговорить на тему Tagged Unions (размеченных объединений) и объяснить, почему они ваш секретный инструмент для написания надежного TypeScript-кода.

https://habr.com/ru/companies/megafon/articles/933752/

👉 @frontend_1

CSS совет 💡

Возможно, вы не знали, что в CSS можно задавать поворот, используя единицу измерения turn

👉 @frontend_1

Распространённые коды состояния HTTP

👉 @frontend_1

Spellbook of Modern Web Dev

🧙‍♂️ Книга заклинаний современного веб-разработчика — это тщательно подобранный список ресурсов, инструментов и практик, охватывающих весь жизненный цикл современного веб-приложения.

Проект ориентирован на фронтенд, но также затрагивает аспекты бэкенда, DevOps, производительности, безопасности, тестирования, архитектуры и многое другое. Это не просто список ссылок — это настоящая карта знаний по веб-разработке.

📚 Темы включают:
- Среды разработки (IDE, терминал, Git)
- Языки и трансляторы (JS/TS, Babel, WebAssembly)
- UI/UX, CSS-инструменты и фреймворки
- Сборщики и бандлеры (Webpack, Vite, etc.)
- CI/CD, мониторинг, деплоймент
- Архитектурные шаблоны, микросервисы, серверлесс
- Безопасность, производительность, тестирование


https://github.com/dexteryy/spellbook-of-modern-webdev

👉 @frontend_1

👉 @frontend_1

🚀 С 25 по 29 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда.

В программе:

💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье)

🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science)

⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team)

📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк)

📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato)

🎯 Все темы прикладные, с практикой и кейсами.

🔗 Подробности и билеты

P.S: Для подписчиков группы Frontend разработчик скидка 500 р по промокоду react_crew_3_iyBLiN