Создавайте drag and drop с помощью HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/drag-and-drop-01

👉 @frontend_1

Совет по производительности веб-сайтов 💡

Используйте Map вместо Object в случае частых добавлений/удалений пар key-value или когда ключи динамические ✅.

👉 @frontend_1

Создание вкладок с помощью HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/tabs-02

👉 @frontend_1

Совет по Javascript 💡

Вы можете не знать об этом сокращенном синтаксисе для объявления метода в object literal

👉 @frontend_1

Создание отзывчивого макета с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/layout-04

👉 @frontend_1

Узнайте о позиционировании CSS с помощью следующей шпаргалки 🚀

👉 @frontend_1

Vercel Data Cache остается неизменным в течение всего периода развертывания

👉 @frontend_1

Визуализация методов массивов JavaScript 🚀

👉 @frontend_1

Совет по HTML 💡

Легко создайте красивый индикатор выполнения, используя элемент <progress> 🤩

👉 @frontend_1

Autofill vs autofit

👉 @frontend_1

Совет по Javascript 💡

Для лучшей отладки используйте именованные выражения стрелочных функций для критических/часто используемых callback'ов ✅

👉 @frontend_1

Загрузка файла с помощью server action в Next.js

👉 @frontend_1

Советы по HTML 💡

Знаете ли вы, зачем мы пишем <meta charset=«utf-8»> в HTML-документе?

👉 @frontend_1

Создаем платежную карту с эффектом переворачивания, используя только HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/payment-card-02

👉 @frontend_1

Возможно, вы не знаете о блоке lh в CSS 🤩

👉 @frontend_1

Оптимистичное перетаскивание в Next.js

👉 @frontend_1

View Transitions — это подарок 🎁

Один набор CSS keyframes и одна локальная пользовательская переменная для ::view-transition-old/new(body) 🚀

👉 @frontend_1

Валидация форм - это сложно.

Что если бы существовала либа форм Next.js, которая бы выполняла валидацию как на клиенте, так и на сервере из одной схемы Zod 👀.

👉 @frontend_1

Теперь в CSS появилась функция Math.pow() от JavaScript, и вы можете генерировать плавные изменения масштаба шрифтов в CSS для размеров области просмотра/контейнера 👀

:where(dd) {
--min: calc(17 * pow(1.2, var(--lvl, 0)));
font-size: clamp(var(--min), var(--fluid), var(--max)); ✨
}
dd:nth-of-type(2) { --lvl: 2; }

👉 @frontend_1

Становится ли дочерний компонент клиентского компонента также клиентским компонентом?

👉 @frontend_1

Conform - это потрясающе

- Валидация клиента + сервера из одной схемы Zod
- Прогрессивное улучшение
- Восхитительно простой API
- Работает с Next.js ( server actions + useFormState)

👉 @frontend_1