🤩 Пример реализации эффекта всплывающего изображения с прокруткой с помощью анимации CSS и без использования JS.

.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); }
}

Небольшая хитрость заключается в том, чтобы сложить два элемента изображения и оставить одно из них скрытым за пределами контейнера.

👉 Поиграть можно здесь (используйте Chrome)

#css #tip by Jhey

👀 Довольно любопытная (в формате notebook) демонстрация практики обнаружения объектов на стороне клиента на изображениях, используя только JavaScript и нейронную сеть.

🧰Под капотом — @Xenova/detra-resnet-50, источник вдохновения — этот твит. Не забываете, что этот функционал потребляет много ресурсов процессора и может замедлить работу браузера.

🤩Ищите вдохновение для дизайна футера? Тогда ловите ресурс с множеством идей, на котором можно фильтроваться по стилю и типу.

💬 Что думаете о WebAssembly? Какие дальнейшие перспективы у низкоуровневого бинарного формата для веба?

🤦‍♂️Из-за повышения индекса цитируемости Wasm в сети некоторые новички думают, что учить JS нет никакого смысла.

#холивар

📊 ApexCharts — современная JavaScript-библиотека, которая позволяет создавать интерактивные визуализации данных с помощью простого API и более 100 готовых к использованию примеров.

🔝Библиотека включает более десятка типов диаграмм, которые обеспечивают красивую и адаптивную визуализацию в ваших приложениях и на информационных панелях.

🤩 Вас ждет множество визуальных демонстраций и примеров кода — или просто посетите домашнюю страницу.

👉 GitHub

🤩Подборка для фронтенд-разработчика:

🌐 CSS in JS или самая противоречивая техника стилизации веба / Ильдар Муллахметов, Авито Тех

• Почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков?
• Как влияют на производительность, поддерживаемость кода, девелопер экспириенс?
• Как браузер обрабатывает styled, как влияет на семантику, работает с props и theme?

🌐 Что такое Sentry и почему без него тяжело / Кирилл Логачев, Level Travel

• Как правильно настраивать, использовать и мониторить Sentry?
• Что поможет уменьшить количество ошибок в продакшене?
• Как определять и быстро устранять просочившиеся с релизом ошибки?

🌐 По ту сторону WebView / Максим Лавренюк, UZUM TECHNOLOGIES

• Что следует сделать в первую очередь при старте интеграции?
• Как подружить нативные компоненты с вебом?
• Как спрятать бесшовную авторизацию?
• О чем попросить мобильных разработчиков, чтобы облегчить себе жизнь?

🌐 Web3 для фронтенд-разработчика / Назим Гафаров, Based link

• Какие возможности предоставляет web3 именно для фронтенд-разработчика?
• Какие популярные пакеты можно использовать вместе с React для взаимодействия с Ethereum-кошельками и смарт-контрактами?
• С какими проблемами можно столкнуться при переходе на web3?

📺Смотреть весь митап

#чтопроисходит

🧰Практика и подводные камни base64 кодирования/декодирования строк в JavaScript: на заметку фронтенд-разработчику.

👉Читать

🤯Еще у одного разработчика бомбануло на похожую тему. Но тут важно понимать, что в 2009 году он перешел в мобильную разработку.

🤔В статье он начал с «Я счастлив, что больше не являюсь веб-разработчиком» и закончил «Сколько веб-фреймворков существует сегодня? Вы не можете ответить, так как счет только что изменился!».

🎙Кстати, эту тему среди прочих недавно обсудили в подкасте «РАДИО-Т» (00:52:40-01:04:05).

🔥 Вы можете создать градиентные границы на полупрозрачных элементах, используя mask-clip и mask-composite с псевдо-элементом:

.gradient-border::after {
mask-clip: padding-box, border-box;
mask-composite: intersect;
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
}

• Небольшая хитрость заключается в создании псевдо-элемента с градиентным фоном и затем маскировке его, чтобы мы видели только ту часть, которую хотим, границу.

• mask-clip определяет область, затронутую маской, подобно тому как можно определить background-size. Использование padding-box и border-box ограничивает обе маски.

• mask-composite — это волшебная часть. Она определяет операцию композиции для слоев маски. Использование intersect означает, что перекрывающиеся части заменяются.

📌Что касается остальных стилей:

• Убедитесь, что вы установили pointer-events: none на псевдо-элементе.
• Убедитесь, что он заполняет родительский элемент. Вы можете использовать position: absolute и inset: 0.
• Убедитесь, что фон заполняет пространство, включая border-width. Вы можете использовать calc для этого:

--bg-size: calc(100% + (2px * var(--border)));
background: var(--gradient) center center / var(--bg-size) var(--bg-size);

👉 Посмотреть код и поиграть можно здесь

#css #tip by Jhey

🕘 Timeline JS — созданный в стенах Northwestern University Knight Lab JavaScript-инструмент, с помощью которого с легкостью можно создать красивую шкалу истории или поделиться хронологией каких-то событий.

🧰 Одним словом, маст-хэв для тех, кто любит решения под ключ. Опытные разрабы тоже могут найти для себя что-то полезное.

👉 GitHub

📖Test-Driven Development with React and TypeScript: Building Maintainable React Applications, 2nd Edition (2023)

Автор: Juntao Qiu

Вышла вторая версия книги о разработке через тестирование (TDD) с использованием React и TypeScript, которая на практике погрузит вас в использование принципов TDD для создания полноценного приложения.

📌Чему вы научитесь:

👨‍🎓Освоите основные методы рефакторинга для повышения качества кода
👨‍🎓Научитесь использовать современные методы написания поддерживаемого кода React, включая тестирование и внедрение продукта
👨‍🎓Получите практический опыт применения принципов TDD в реальных проектах и многое другое

👉 Скачать книгу