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

Приходи на Frontend Speed Dating – 1,5 часа на полезные знакомства

7 октября пройдет Frontend Speed Dating — вечер коротких онлайн-знакомств для разработчиков. Ты приглашен ;-)

Как это будет: участники будут рандомно делиться по парам и общаться в Zoom. Будет 6 раундов по 10 минут.

Зачем:
• Обсудишь темы, которые вызывают споры: тестирование и наблюдаемость фронта, техдолг, карьера и инструменты.
• Заберешь идеи и практики, которые работают у других, и поделишься своим опытом.
• Найдешь полезные контакты и познакомишься с Frontend-коммьюнити – на прошлой встрече общались до 11 вечера, а потом обменивались контактами!

Вечер организует Mindbox, но будет «без оружия»: никакого хантинга и рассказа про вакансии, пока ты сам не спросишь.

📅 Когда: 7 октября
⏰ Во сколько: 19:00–20:30 по мск
📍 Где: Zoom (ссылку пришлём после регистрации)

Зарегистрироваться

Folding Ticket Detail

Анимация разворачивания билета с подробной информацией.

https://codepen.io/pizza3/pen/bGVPZvo


Мы в MAX

👉 @frontend_1

Как frontend-разработчику получить оффер в Bigtech?

Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные.

Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые?

При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

На своем канале:
👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks

Реклама, erid : 2W5zFGtLCTA ИП Галактионов Тихон Витальевич, ИНН 771618975809

Эффекты мерцания с помощью CSS 🚀

1. Animate opacity
2. Use custom linear() timing 🔥

:root { --flicker: linear(0 0% 0.5%, 0.1723 0.7925% ... ); }
.flicker {
animation: dim 4s infinite var(--flicker) alternate;
}
@​keyframes dim { opacity: 0.25; }

Мы в MAX

👉 @frontend_1

⚡️Уже работаешь с Vue, но автотесты и UI-компоненты всё ещё вызывают стресс? Пора действовать! Записывайся на вебинары, которые проходят в рамках курса «Vue.js разработчик».

Бесплатный вебинар «Пишем Автотесты на Vue.js»
🗓 9 октября, 20:00

На вебинаре:
• Компонентное, 2E2, Unit-тестирование — разложим по полочкам
• Библиотеки Vue: Cypress и Vitest — разберём на практике
• Напишем первые автотесты — легко и без страха

Для разработчиков, которые хотят освоить автотесты во Vue и прокачать навыки, которые пригодятся на любых проектах.

Бесплатный вебинар «Почему во Vue проще: интерактивные UI-компоненты за минуты»
🗓 22 октября, 20:00

На вебинаре:
• Модальные окна, слайдеры, выпадающие меню — делаем с нуля
• Реактивность Vue в действии — управляем состоянием и анимацией
• Почему Vue быстрее и проще, чем React для UI

Для фронтенд-разработчиков, которые хотят ускорить создание интерфейсов и расширить портфолио практичными компонентами.

Записаться на вебинары: https://vk.cc/cQ0xAE

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

Люблю использовать CSS-анимацию, например, такую

.ring {
  animation: float 2s infinite alternate var(--ease);
  animation-delay: calc(
    sin((var(--index) / var(--count)) * 45deg)
    * -2s
  );
}

Мы в MAX

👉 @frontend_1