JavaScript *

Оглавление

Введение
Классификация круговых интерфейсов
Принципы проектирования кругового интерфейса
Основы анимации кругового интерфейса
Библиотека классов на JavaScript для реализации круговых интерфейсов

Введение

Круговой интерфейс – это графический интерфейс, элементы которого имеют круглую форму, расположены или анимированы по круговой траектории.

Сложный круговой интерфейс преимущественно состоит из нескольких круговых элементов, имеющих единый центр.
На рисунке 1 представлены примеры абстрактного кругового интерфейса.

Рис. 1 – Примеры круговых интерфейсов

Круговые интерфейсы могут применяться с целью:

• разнообразить дизайн проекта или продукта;
• обеспечить компактность при визуализации информации;
• получить цифровой аналог реальных интерфейсов управления или измерительных приборов.

Данная статья посвящена ключевым аспектам процесса разработки круговых интерфейсов, а именно их классификации, принципам проектирования, основам анимации, а также реализации круговых интерфейсов на JavaScript с помощью специализированной библиотеки классов.

В прошлом году я участвовал в соревнованиях JS13K 2019, на которых людям предлагается разрабатывать игры в менее чем 13 КБ кода на JavaScript. Я участвовал с клоном Doom, который назвал… «Ещё один клон Doom» (Yet Another Doom Clone).


Поиграть в него можно здесь. Исходный код выложен сюда.

Зачем создавать клон Doom?

Зачем писать FPS на JavaScript всего в 13 КБ (с учётом сжатия)? По нескольким причинам. Но лучше всего на этот вопрос отвечает раздел FAQ соревнований JS13K «Можно ли использовать WebGL?»:

«Да, но может быть сложно уместить его в 13 килобайта, если вы планируете писать FPS».

Кроме того, в то время я как раз написал 3D-рендерер и хотел поработать над ним ещё. К тому же мне нравится создавать сильно сжатый код. (Например, много лет назад я создал язык и написал компилятор для нового языка, предназначенный специально для использования в код-гольфинге.)

Именно поэтому я выбрал FPS. Остаётся вопрос: «Почему Doom?» На него ответить проще: если вы хотите написать FPS, и чтобы он при этом был небольшим, то Doom — практически самый минималистичный вариант.

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод статьи «Regex Cheat Sheet» автора Emma Bostian.

Регулярные выражения или «regex» используются для поиска совпадений в строке.

Ищем совпадение по шаблону

Используем метод .test()

const testString = 'My test string'
const testRegex = /string/
testRegex.test(testString) // true

Ищем совпадение по нескольким шаблонам

Используем | — альтернацию

const regex = /yes|no|maybe/

Игнорируем регистр

Используем флаг i

const caseInsensitiveRegex = /ignore case/i
const testString = 'We use the i flag to iGnOrE CasE'
caseInsensitiveRegex.test(testString) // true

Извлекаем первое совпадение в переменную

Используем метод .match()

const match = 'Hello World!'.match(/hello/i) // 'Hello'

Мой брат недавно отучился на компьютерщика и сейчас завершает стажировку в области фронтенд-разработки. Он узнал и о CSS Grid, и о CSS Flexbox, но в том, как он пользуется этими механизмами создания макетов, я отметил одну особенность, с которой я уже сталкивался. А именно, ему тяжело даётся принятие решений о том, когда использовать Grid, а когда — Flexbox. Например, он использовал CSS Grid для создания макета заголовка сайта. При этом он отметил, что довести проект до ума ему было нелегко, и что ему пришлось долго экспериментировать с grid-column и настраивать всё до тех пор, пока у него не получилось то, что ему было нужно.



Честно говоря, мне это не понравилось. Поэтому я решил поискать какой-нибудь ресурс, который помог бы моему брату как следует уяснить различия между Grid и Flexbox и дал бы возможность взглянуть на примеры, созданные с использованием обеих этих технологий. Но ничего подходящего мне найти не удалось. Тогда я решил написать статью, посвящённую Grid и Flexbox. Надеюсь, она получилась понятной.

В статье изложен материал практического использования React для решения задачи построения графиков на основе информации с финансовых рынков. Функционал графиков расширен элементами рисования и индикаторами, что позволяет дополнительно производить анализ при выборе торговой стратегии. Статья может заинтересовать frontend разработчиков, решающих задачи по графическому отображению данных.

Доброго времени суток, друзья!

Я тут слайдер написал с голосовым управлением, распознаванием текста и его чтением (озвучиванием) средствами браузера.


Функционал:

• Смена слайдов по нажатию кнопок или стрелок на клавиатуре
• Тоже самое по голосовым командам «вперед» и «назад»
• Распознавание текста на изображении, запись текста в локальное хранилище и чтение текста голосом от Google по нажатию кнопки «читать»
• Тоже самое по голосовой команде «читать»

Код проекта.

GitHub Pages.

Что такое #codevember и зачем он нужен? В последние пару лет каждый ноябрь я натыкался в соцсетях на интересные произведения искусства, созданные ИИ, отмеченные этим хэштегом. Согласно информации с codevember.xyz:

Codevember – это челлендж для разработчиков, созданный для того, чтобы отточить их креативность и улучшить навыки. Цель – каждый день ноября создавать креативный фрагмент кода. Мы будем давать вам рекомендации для вдохновения каждый день, но вы можете создавать свои скетчи.

В этом году я решил попробовать поучаствовать и в ноябре изучить Processing (p5.js) и побаловаться созданием графики, которая создана не для какой-то определённой задачи.

Несмотря на кажущуюся простоту темы, мне не довелось поучаствовать ни в одном проекте, где сборка фронтовой и серверной частей была бы настроена удобно, то есть обладала бы следующими характеристиками:

• эти части собираются параллельно (в разных процессах)
• после пересборки серверной части перезапускается сервер, исходя из новых файлов
• после пересборки фронтовой части обновляется текущая страница в браузере
• изоморфные файлы вызывают обе пересборки, а неизоморфные — только соответствующую
• необходимые параметры (порт watch-сервера, https-режим) настраиваются через env-переменные

Коллеги настраивали лишь последовательную сборку этих частей при изменении любых файлов, что приводило к обязательному перезапуску сервера и нескольким перезагрузкам страницы (т.к. для этого использовалась либо middleware, отслеживающая запуск сервера, либо watch-сервер webpack, но видел и что используются они одновременно). Поэтому тема показалась актуальной, разберем все по полочкам.

Перевод статьи подготовлен в преддверии старта курса «Vue.js-разработчик».

---

В основе масштабного приложения на Vue.js лежит хранилище, в котором находятся все данные. Хранилище Vuex в приложении на Vue.js служит единым источником истины, который обеспечивает отличную производительность и реактивность из коробки. По мере того, как обрастает кодом ваше приложение, количество данных в хранилище Vuex также растет, и управлять ими становится труднее. Проектирование управления состоянием вашего приложения на основе лучших практик поможет решить большинство проблем, которые появляются по мере усложнения приложения.

В этой статье мы поговорим о некоторых лучших практиках и советах по проектированию архитектуры механизма управления состоянием в масштабном приложении на Vue.js. Мы поговорим о следующих пяти концепциях, которые помогут спроектировать хранилище наилучшим образом.

1. Структурирование хранилища
2. Разделение хранилища на модули
3. Автоматический импорт модулей хранилища
4. Сброс состояния модуля
5. Глобальный сброс состояния модуля

Добрый день! Продолжим разбираться с данной темой (с предыдущей частью можно ознакомиться по ссылке).

Сегодня перейдем к практической части. Начнем с настройки своего удостоверяющего центра на основе полноценной криптографической библиотеки с открытым исходным кодом openSSL. Данный алгоритм был проверен с использованием windows 7.

Установив openSSL, мы можем выполнять различные криптографические операции (например, создание ключей и сертификатов) через командную строку.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Никто из обычных людей не достиг в этом мире ничего значимого.
Джонатан, «Очень странные дела»

Автор материала, перевод которого мы сегодня публикуем, предлагает читателям взглянуть на необычные JavaScript-конструкции. А именно, речь пойдёт о коде, результаты работы которого могут показаться неожиданными. Разбор такого кода, по мнению автора статьи, поможет всем желающим лучше разобраться в JavaScript, в очень странном, но многими любимом языке. 

В пятой версии сборщика Webpack появился набор плагинов для обмена модулями между Javascript приложениями.

Эта статья — краткое описание и пример на основе двух небольших приложений построенных на фреймворке ReactJS.

Плагин Module Federation позволяет приложению экспортировать один или несколько модулей в отдельный JS файл. Отличный способ строить микрофронтенд приложения. Сторонние приложения могут импортировать себе готовые модули, это могут быть например реакт компоненты. Причём, импорт зависимостей Webpack берёт на себя. Отличие от NPM в том, что импорт в runtime.

Большинство тех, кто начинает изучать программирование, начали это из-за желания сделать свою игру. Нууу… я не исключение, но судьба меня занесла в веб разработку.

Год 1 | вдохновение

В этом месяце я очень долго пыталась определиться с датасетом и идеей для его обработки. Хотя я начала думать о нем еще в мае, по факту законить удалось только через 8 месяцев (черт, я плоха), а описать проект мне удалось еще спустя месяц (оу, я чертовски плоха).

Идея проекта пришла ко мне после просмотра фильма Безумно богатые азиаты. Мне очень понравилась актриса Мишель Йео, но идея оформилась только после того, как я прочитала больше о ней и узнала, насколько она была выдающейся и крутой. Это заставило меня задуматься выдающихся женщинах, о которых я понятия не имею. И вот — возникла идея как-то это визуализировать.

Однажды встал вопрос: «Использовать ранеры, которые будут на лету компилировать TypeScript в JavaScript (например, node-ts), или компилировать самому заранее (например, через `tsc`) и запускать уже JavaScript код?» – гугление не дало четкого ответа, поэтому я сформулировал его императивным путем:

TypeScript стоит компилировать заранее, через специализированные компиляторы (например, tsc) и запускать уже JS код.

Пара злободневных причин:

Идёте вы, уважаемый читатель, погожим летним вечером по улице, никого не трогаете, и тут… на вас наезжают (тьфу-тьфу-тьфу, как говорится). Хулиганы, просто прохожие, специальные товарищи (как пелось в одной старой песенке) — не столь важно. Вы достаете телефон и начинаете снимать происходящее на видео. Это не очень нравится наезжающим, и телефон у вас отбирают (или изымают на законных основаниях — нужное подчеркнуть). Свидетелей нет, видеозаписи на телефоне больше нет, доказательств для полиции и суда тоже, соответственно, никаких.

Выход из этой ситуации очевиден: видеозапись должна вестись не в локальный файл на ваш телефон, а непосредственно на удаленный сервер. Правда, готовых программных решений для реализации этой идеи не так много (например, вот): в большинстве случаев предлагаемые приложения для мобильного телефона или платные, или работают из рук вон плохо. Экзотические рекомендации типа «в случае нападения хулиганов начните трансляцию на YouTube» я не рассматриваю, так как в реальной ситуации у вас элементарно не будет времени, чтобы запустить трансляцию. Кроме того, видео будет писаться в чьё-то чужое облако, а очень часто это не есть хорошо.

Можно, конечно, подучить Java или Kotlin (а заодно и Swift) или, на худой конец, освоить PhoneGap и написать своё приложение. Однако всё гораздо проще: под катом несложное решение этой задачи посредством HTML5 video/audio API.

Меня зовут Лёша Гусев, я работаю в команде разработки видеоплеера Яндекса. Если вы когда-нибудь смотрели фильмы или трансляции на сервисах Яндекса, то использовали именно наш плеер.

Я сделал небольшую оптимизацию размера бандла — минификацию приватных полей. В докладе на Я.Субботнике я рассказал об использовании Babel-плагинов, трансформеров TypeScript и о том, насколько в итоге уменьшился размер продакшен-сборки проекта.


Конспект и видео будут полезны разработчикам, которые ищут дополнительные способы оптимизации своего кода и хотят узнать, как webpack, Babel и TypeScript могут в этом помочь. В конце будут ссылки на GitHub и npm.

Как всем известно, JavaScript — это язык, который очень быстро развивается. В стандарте ES2020 имеется немало новых возможностей, с которыми вам, вероятно, захочется познакомиться поближе. Честно говоря, писать JS-код можно по-разному. Различные варианты кода, направленные на решение одной и той же задачи, способны дать один и тот же результат, но некоторые из этих вариантов кода могут оказаться значительно короче и чище других. Для того чтобы сделать код качественнее и понятнее, можно пользоваться всяческими полезными приёмами. О некоторых из таких приёмов речь пойдёт в материале, перевод которого мы сегодня публикуем. Надеемся, то, о чём вы сегодня узнаете, когда-нибудь вам пригодится.

Всем привет, меня зовут Александр, я frontend-разработчик. Моя карьера программиста началась относительно недавно, у меня нет специального образования и долгое время я работал совершенно в другой области. Поскольку IT сфера весьма быстро развивается, мне приходится постоянно учиться в ускоренном темпе, чтобы поспеть за своими коллегами с большим опытом за спиной. Для саморазвития, в свободное от работы время, я решил начать свой pet-проект.