Эта статья — перевод оригинальной статьи "Introducing runes".Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.ВступлениеВ 2019 году Svelte 3 превратил JavaScript в реактивный язык. Svelte - это фреймворк для создания веб-интерфейса, который использует компилятор для превращения декларативного кода компонентов в такой...<script> let count = 0; function increment() { count += 1; } </script> <button…
Современный JS предоставляет множество способов перебора массива. Но какой из них является наиболее эффективным по скорости?Чтобы ответить на этот вопрос, мы проведем тесты, перебирая массивы разной длины и вызывая для каждого элемента метод toString().Рассмотрим основные способы перебора: for, for(reverse), while, do..while, for..in, for..of, for..each.Важно! Точность результата console.time() сильно зависит от конфигурации вашей системы.Для начала протестируем скорость каждого способа на мас…
Автор: Маслов Андрей, Front-end разработчик.О статьеЭта статья создана для облегчения процесса изучения TypeScript с помощью практичных примеров. Более подробную информацию можно найти в документации или в дополнительных материалах. Статья предназначена как для начинающих разработчиков, которые только начинают знакомиться с TypeScript, так и для опытных разработчиков, желающих углубить свои знания в этом языке. Здесь вы найдете краткое и информативное изложение ключевых аспектов TypeScript, ко…
landing page для наглядностиВступление 1Эта статья модификация прошлой статьи двухлетней давности: https://habr.com/ru/articles/569410/В той статье я излагал свои мысли, получил кучу критики и в итоге многое переосмыслил. Там я в целом описывал ряд изменений связанных со временем (недели, месяцы, часовые пояса, часы, минуты и секунду). Но сейчас я понимаю, что с практической точки зрения, реализация тех идей не рациональна. И поэтому я сократил свое кардинально. Из всех изменений я оставил тол…
Есть много библиотек и фреймворков, которые помогают преодолеть все препятствия на пути JavaScript разработчика. Если раньше мы использовали ванильный JS, то со временем пришёл jQuery, а затем React и Vue. Каждый год появляется все больше новых библиотек, фреймворков и инструментов. Некоторые из них продолжают развиваться и находят свою аудиторию, в то время как другие исчезают и постепенно забываются. В статье рассмотрим ещё одну библиотеку, которая может быть полезной для разработки небольши…
В данной статье поговорим о том, почему Event Loop вообще был создан, как с ним работать и почему про него спрашивают на собесах.JS был спроектирован как однопоточный язык программирования. Это значит, что он может выполнять только одну операцию одновременно. Тем не менее у JavaScript есть такой механизм как Event Loop, который как раз и позволяет выполнять "асинхронные" операции. Почему "асинхронные" в кавычках? Да просто потому что JavaScript тоже выполняет их синхронно, асин…
CollagenCollagen позволяет создавать тестовую анимацию управляемую с клавиатуры, имеется редактор уровней который позволяет создавать слои, перемещать камеру вида а также управлять анимацией персонажа. Для создания анимации небходимо создать в редакторе все необходимые спрайты: спрайты с анимацией, спрайты с фоновой подложкой, сохранить их в проект. Как создавать спрайты читать в описании редактора. В данном примере будет объяснена простейшая анимация движения персонажа, а также принцип работ…
Рис 1. Одновременная работа в редакторе блок схем с помощью WebRTCWebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные.Для соединения браузеры должны обменяться параметрами соединения: SDP и ICECandidate-ами SDP описывает требования к соединению - т.е. что будет передаваться: видео/аудио/текст, какие кодеки поддерживаются. ICECandidate-ы это адреса, куда можно посылать пакеты.Для WebRTC соединения нужно:Обменяться требованиями к соеди…
Привет, уважаемые участники Хабр!Сегодня продолжим создание мини-игры с движущимися кружочками и интересным капельным эффектом. В первой части было сделано базовое перемещение кружочков по странице. А в сегодняшнем уроке мы сделаем анимацию “взрыва” и поглощения кружочков. Финальное демо второй части урока:Давайте начинать!Генерация кружочков Для того, чтобы сделать “деление” одного кружка на несколько в класс Substance добавим новую функцию splitting, которая в цикле будет создавать заданн…