CollagenCollagen позволяет создавать тестовую анимацию управляемую с клавиатуры, имеется редактор уровней который позволяет создавать слои, перемещать камеру вида а также управлять анимацией персонажа. Для создания анимации небходимо создать в редакторе все необходимые спрайты: спрайты с анимацией, спрайты с фоновой подложкой, сохранить их в проект. Как создавать спрайты читать в описании редактора. В данном примере будет объяснена простейшая анимация движения персонажа, а также принцип работ…
Рис 1. Одновременная работа в редакторе блок схем с помощью WebRTCWebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные.Для соединения браузеры должны обменяться параметрами соединения: SDP и ICECandidate-ами SDP описывает требования к соединению - т.е. что будет передаваться: видео/аудио/текст, какие кодеки поддерживаются. ICECandidate-ы это адреса, куда можно посылать пакеты.Для WebRTC соединения нужно:Обменяться требованиями к соеди…
Привет, уважаемые участники Хабр!Сегодня продолжим создание мини-игры с движущимися кружочками и интересным капельным эффектом. В первой части было сделано базовое перемещение кружочков по странице. А в сегодняшнем уроке мы сделаем анимацию “взрыва” и поглощения кружочков. Финальное демо второй части урока:Давайте начинать!Генерация кружочков Для того, чтобы сделать “деление” одного кружка на несколько в класс Substance добавим новую функцию splitting, которая в цикле будет создавать заданн…
Немного обо мнеЯ занимаюсь frontend уже 8 лет и с самого начала карьерного пути наблюдал как наш продукт рос и развивался (и я вместе с ним), формировалось frontend-сообщество, мировые web-стандарты получали второе дыхание и быстрое развитие, а accessibility приходило в наши дома. За это время я успел достаточно глубоко проникнуться идеями доступности, поскольку ранее и сам уделял внимание клавиатурному вводу в личном пользовании интернетом. Полагаю, все знакомы со стандартным паттерном аутент…
Любой программист, часто работающий с API, может сэкономить массу времени, если использует ChatGPT для автоматизации преобразования JSON в интерфейсы Typescript. Зачем это нужноAPI — удобный и универсальный способ наладить взаимодействие с сайтом или другим веб-приложением. Основная проблема при написании кода обычно заключается в том, он должен быть уведомлен об ответе. Но в результате обращения к API вы не получаете завершения.У этой проблемы есть два основных варианта решения:Отправить запр…
В текущих проектах я применяю подход Behavior Driven Development (BDD) для написания end‑to‑end тестов. Хотя раньше я скептически относился к Given‑When‑Then синтаксису, теперь часто его использую. Главная причина — я больше не пишу BDD‑сценарии вручную, а генерирую их с помощью ChatGPT.В статье расскажу, как вы можете генерировать AI-тесты в своем проекте и запускать их в реальном браузере с помощью Playwright.AI пишет тестыДля примера я буду использовать демо‑приложение TodoList, разработанн…
Всем привет, если у вас появилась идея связать эти два инструмента, то хочу вас огорчить, прямой интеграции у них пока нет...4 простеньких шага для решения этой проблемы:Создаем webhook в MattermostСоздаем Custom Integration и Alert в SentryПишем небольшой сервис, который будет принимать сообщение(event) из SentryПриводим event в нужный формат и отправляем в Mattermost с помощью webhookВесь код сервиса лежит в этом репозитории на гитхибе.Когда я столкнулся с проблемой, я начал искать готовые р…
Я решил написать этот пост по мотивам своей недавней дискуссии в комментариях к другому посту, напрямую с веб-компонентами не связанному. Я часто вступаю в подобные дискуссии здесь на Хабре и на других площадках. Кроме того, я регулярно провожу технические интервью с разработчиками и мы, также, часто касаемся этой темы. И вот, что я вам скажу: большинство фронтенд-разработчиков вообще не понимают, что такое веб-компоненты и зачем они нужны. Стандарту уже несколько лет, он давно поддерживается …
Привет, уважаемые участники Хабр! Сегодня мы поговорим о создании мини-игры, которую вы сможете использовать для украшения своего веб-сайта или просто оставить в качестве заставки. Мы разделим разработку проекта на две части: начнём с базового движения объектов и закончим созданием полноценного проекта. Данный курс подойдет как для новичков, которые уже немного освоили JavaScript, HTML и CSS, так и для уже опытных программистов.Финальное демо первой части урока:Давайте начинать!Структура проек…