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

🌐 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 в реальных проектах и многое другое

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