Как указать, что серверный компонент должен рендериться динамически во время выполнения, если он не использует динамические API в Next.js.

👉 @frontend_1

Table tenniCSS

Создано на HTML и SCSS, без использования JS.

https://codepen.io/amit_sheen/pen/PobQjMX

👉 @frontend_1

CSS Swirl

Версияна чистом CSS.

400 квадратов, с использованием sibling-index и count, кучи тригонометрических функций и немного типизированной арифметики. (Пока работает только в Chrome 140+).

https://codepen.io/amit_sheen/full/PwZoLBG

👉 @frontend_1

❓ Как сделать чат в React?

😎 Ответ — на бесплатном вебинаре 29 сентября!

WebSocket — это не сложно. Покажем на практике, как связать React-приложение с сервером для обмена сообщениями в реальном времени.

Соберем работающий прототип мессенджера с авторизацией и интерфейсом. Идеальный проект для портфолио.

Присоединяйтесь к бесплатному вебинару курса «JavaScript Developer. Professional».

👉 Пишите код вместе с экспертом:

https://vk.cc/cPQvpa

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

React предпочитают по умолчанию — и это убивает инновации во фронтенде

React по умолчанию сопряжён со скрытыми издержками. Вот аргументы в пользу более осознанного выбора подходящего фреймворка для конкретной задачи.

React больше не побеждает за счёт своих технических достоинств. Сегодня его выбирают по умолчанию. И именно это «по умолчанию» теперь тормозит инновации во всей фронтенд-экосистеме.

Когда командам нужен новый фронтенд, разговор редко начинается с вопроса: «Каковы ограничения и какой инструмент лучше всего под них подходит?» Чаще всё звучит так: «Давайте возьмём React — его все знают». Такой рефлекс запускает самоподдерживающийся цикл, в котором архитектуру определяют сетевые эффекты, а не техническая уместность.

https://www.lorenstew.art/blog/react-won-by-default/

👉 @frontend_1

Скрытые возможности Radix UI

Radix UI — это не просто компоненты, а гибкий набор примитивов с точным контролем поведения. Вот несколько фишек, которые можно использовать:

Контролируемое состояние

Большинство компонентов (Dialog, Popover, DropdownMenu) можно открыть/закрыть вручную через open и onOpenChange. Это удобно для синхронизации с глобальным состоянием или URL.

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  {/* ... */}
</Dialog>

Отключать порталы при необходимости

По умолчанию контент рендерится в body через Portal. Но если нужен рендеринг в текущем DOM (для стилизации, тестирования или ограничения области), вы можете отказаться от портала.

<Dialog.Content>
  {/* ... */}
</Dialog.Content>

Проигрывать анимации исчезновения

Radix по умолчанию удаляет элементы из DOM при скрытии. Чтобы включить CSS-анимации ухода (opacity, scale, transform), используйте forceMount.

<Dialog.Content forceMount className="fade-out-animation">
  {/* ... */}
</Dialog.Content>

Свободно комбинировать компоненты

Вы можете вкладывать один компонент в другой — например, Popover в DropdownMenu или Dialog в Tabs. Radix правильно обрабатывает фокус, события и поведение, даже в сложных вложенных интерфейсах.

👉 @frontend_1