ВведениеРассмотрим способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге.Идея возникла при необходимости создания анимации таймера: Требуемая анимацияАнимация цифры не представляет трудности, а вот бегущая закрашенная часть границы достаточно интересна. Длина закрашенной части границы ум…
Hello world! Zustand (читается как "цуштанд", что переводится с немецкого как "состояние") — это, на мой взгляд, один из лучших на сегодняшний день инструментов для управления состоянием приложений, написанных на React. В этой статье я немного расскажу о том, как он работает. Давайте начнем с примера использования zustand для реализации функционала отображения/скрытия модального окна. Код проекта лежит здесь. Демо: Для работы с зависимостями я буду использовать Yarn. Создае…
Привет! Меня зовут Евгений Прокопьев, я старший инженер-разработчик в СберМаркете. На React Native (далее просто RN) я пишу уже больше 6 лет и очень люблю создавать красивые анимации. В интернете часто сталкиваюсь с мнением, что на RN невозможно сделать красивые и стабильные анимации: их трудно делать и они ужасно лагают. По моему опыту всё обстоит совсем не так — вопрос именно в том, как их готовить. Хочу поделиться опытом, что сделать, чтобы у вас анимации не лагали, и по возможности восста…
Веб — богатая экосистема с массой мощных API, которая только пополняется. В нашем распоряжении уже знакомые инструменты — Canvas или Intersection Observer, но в 2023 мы также имеем Web MIDI API, Speech Recognition и даже такие экзотические штуки, как геймпады и VR прямо в браузере. Естественно, эти API сложно использовать в Angular из-за разницы парадигм нативного JavaScript и декларативного Angular. Вот тут и появляемся мы!Как все начиналосьWeb API для Angular — это опенсорс-инициатива, котор…
Эта статья — перевод оригинальной статьи "TypeScript 5.2's New Keyword: 'using'".Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.В TypeScript 5.2 появится новое ключевое слово 'using', которое можно будет использовать для утилизации чего-либо с помощью функции Symbol.dispose, когда оно покидает область видимости.{ const getResource = () => { return { [Symbol.dispose]: () => { …
JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами переводом его статьи.JP CamaraГлавный инженер Wealthbox — CRM для финансовых консультантовНесколько месяцев назад я работал над интерфейсом JavaScript для большого набора данных, используя TanStack Table. Ограничения были такие: максимум 50 тыс. строк контента,группировка до 3 колонок.Производит…
Со временем каждый уважающий себя проект обрастает модульными и интеграционными тестами. В идеальном мире автотесты должны проходить быстро, чтобы их хотелось запускать как локально, так и в CI. Но почему в большинстве проектов запуск тестов отнимает критически много времени?– Зачастую причиной является неправильная работа с асинхронными операциями. В статье разберемся, как Jest помогает писать молниеносные тесты, и рассмотрим ключевые сценарии.Дисклеймер: В данной статье примеры рассматривают…
Статья-туториал для тех, кто хочет узнать, как из заголовка получается «6» методом рекурсивного спуска. Начнём с самого простого и дойдём до вычисления -1.82 или около того из строки -2.1+ .355 / (cos(pi % 3) + sin(0.311)).Конечно, этот метод неоднократно описан на Хабре и зачитан каждому айтишному первокурснику. В своей версии я хочу изложить его очень просто и подробно, с позиции элементарной практики на JavaScript. Ссылки на рабочий код — в самом низу.«2»Разберём невыносимо простой пример: …
ВведениеРешим реальную практическую задачу, с которой мне пришлось столкнуться на моем проекте React/TypeScript.ЗадачаУ нас есть массив конкретных строковых значений, таких как "first", "second", "third", "fourth" и "fifth". Необходимо отобразить их на странице, т.е как-то использовать, а также убедиться, чтобы эти данные были строго типизированы и TypeScript нам выдавал всплывающие подсказки при их использовании в коде.РешениеСначала поместим данные в н…