В этой статье разберем компонент, представляющий собой бесконечный плавный слайдер с автоматической прокруткой, а также добавим его замедление при наведении. Похожие блоки часто используются для информационной ленты логотипов, фотогалерии и других подобных визуальных компонентов.Приблизительный результат следующий (только без дерганий контента):Бесконечная лентаРазметкаПо HTML все достаточно просто. Мы имеем общий статичный родительский компонент, внутри которого лежит контейнер, который мы и б…
Впервые про моделирование эволюции я прочитал в 13 лет в статье «Жить и умереть в компьютере» (Техника — Молодежи, №5 1993 год). Она произвела на меня столь неизгладимое впечатление, что я тут же загорелся идеей создать что-то подобное.Однако никак не удавалось проработать законы мира. Как организмы будут «смотреть» на окружающий мир? Как общаться? Как атаковать? Как кушать друг друга? Наконец, как будет устроен их «мозг»? Реализовать виртуальную машину, как в статье из журнала, или использоват…
Всем привет, я являюсь тимлидом команды Frontend-разработки в компании Firecode.В решениях, которые мы разрабатываем, часто используются E2E-тесты, поэтому я решил поделиться одной из самых используемых практик внутри наших проектов - дата-селекторы.Зачастую обычные веб-приложения не покрывают E2E тестами, однако, когда разговор заходит об административных панелях, формах биллинга и разнообразных конструкторах, то данная потребность быстро возникает. В этой статье мы рассмотрим, как правильно о…
WebRTC - это технология, которая позволяет браузерам и мобильным приложениям обмениваться аудио и видео в реальном времени без необходимости использования промежуточных серверов. Это делает WebRTC идеальным выбором для приложений, которым необходим функционал видеозвонков, стриминга, и аудиовызовов.По сути, WebRTC состоит из двух основных частей:Методы захвата видео и аудио потоков;Методы передачи этих потоков между клиентами;Разберем эти части подробнее.Захват потоковВ целом про аудио- и видео…
Этот документ — не просто список, а выжимка боли, шишек и неожиданных открытий, с которыми сталкивается почти каждый фронтендер. Неважно, Vue ты выбрал или React, если твое приложение должно работать в браузере на айфоне пятилетней давности — добро пожаловать в клуб. Здесь будет всё: от странностей с Safari до неожиданных проблем с синтетическими событиями. Нюансы мобильных браузеров и PWAiOS Safari не поддерживает Notification API без установки PWAПроблема: На iOS ты не можешь просто вызвать n…
При решении реальных задач по System Design или при прохождении собеседования, обязательным этапом является расчет нагрузки и стоимости на вашу IT-Систему. Давайте разберемся что это за этап и почему он так важен?Зачем нужен расчет нагрузки?1. Определение требований к инфраструктуреСколько серверов, ядер CPU, оперативной памяти, дискового пространства и пропускной способности сети потребуется.Пример:Если система должна обрабатывать 10000 RPS, а один сервер выдерживает 1000 RPS, то нужно 10+ сер…
Привет, Хабр! На связи разработчик Peakline — аналитической платформы для Strava. Сегодня я хочу поделиться опытом внедрения Cloudflare Turnstile в веб-приложение на FastAPI. Это решение позволило мне отказаться от назойливых CAPTCHA, улучшить пользовательский опыт и при этом надежно защитить формы регистрации и входа от ботов.Боль традиционных CAPTCHAКаждый, кто хоть раз вводил логин и пароль в интернете, сталкивался с ними: "Выберите все светофоры", "Введите искаженный текст",…
В реактивных системах существуют специальные функции, такие как watchEffect во Vue или autorun в MobX, которые умеют автоматически отслеживать зависимости и перезапускать «эффект» при их изменении. Принцип их работы следующий:Регистрация эффектаФункция принимает другую функцию (так называемый «эффект») и сразу её выполняет.Трекинг зависимостейВо время выполнения эффекта система фиксирует все обращения к реактивным свойствам и подписывается на их изменения.ПерезапускПри изменении любого наблюдае…
В мире тестирования фронтенд-приложений существует одна забавная особенность. Визуальное представление нашей программы почти всегда остается вне зоны покрытия тестами, даже несмотря на то, что фронтенд-разработка это в первую очередь про то что видит пользователь. Если посмотреть на то как пишут тесты на типичном проекте, то в основном это будут юнит-тесты проверяющие внутреннюю специфику компонентов или отдельных функций плюс какие-нибудь е2е-тесты проверяющие отдельные сценарии. Чаще всего …