В сегодняшнем обзоре новостей JavaScript мы рассмотрим, какие новые функции были реализованы в dhtmlxGantt 6.1 и dhtmlxRichText 1.1. Также мы рассмотрим два новых инструмента. Первый позволяет визуализировать кодовую базу JavaScript в удобном для чтения виде. Вторая - это легкая канбан-доска Angular. Кроме того, по традиции поделимся полезными советами и статьями.

Новые инструменты и обновления

dhtmlxGantt 6.1

dhtmlxGantt - это библиотека диаграмм Ганта JavaScript, которая позволяет создавать онлайн-приложения для управления проектами на основе диаграмм Ганта. Недавно разработчики выпустили dhtmlxGantt версии 6.1, которая включает некоторые любопытные нововведения.

Новая версия dhtmlxGantt позволяет добавить наложение, которое можно использовать для встраивания любого настраиваемого содержимого в верхний слой поверх приложения диаграммы Ганта. Например, вы можете добавить S-образную кривую, показывающую прогресс или увеличение расходов по проекту. Новая версия библиотеки позволяет добавлять всплывающие подсказки ко всем элементам диаграммы Ганта. В предыдущих версиях этот параметр был доступен только для задач в области диаграммы Ганта. Кроме того, вы можете применять временные ограничения для задач. Ограничения по времени ускоряют и упрощают планирование проекта, поскольку Гант автоматически планирует все задачи, как только руководитель проекта налагает необходимые ограничения на некоторые из них. Эта функциональность позволила разработчикам реализовать стратегию обратного планирования в дополнение к перспективному планированию по умолчанию. Чтобы узнать больше об этих и других новых функциях, вы можете посетить страницу релиза. Также есть YouTube-видео для тех, кому лень читать.

dhtmlxRichText 1.1

dhtmlxRichText - это полностью настраиваемый редактор форматированного текста JavaScript с поддержкой HTML, Markdown и обычного текста в качестве форматов ввода и вывода. Начиная с версии 1.1 разработчики могут получить доступ к API этого редактора форматированного текста JavaScript, который позволяет работать с текстом напрямую. Новый контроль блочных цитат позволяет легко превращать обычный текст в цитаты. Расширенные и настраиваемые функции статистики позволяют подсчитывать как символы с пробелами, так и без них, а также слова и любые другие статистические характеристики текста, определенные разработчиками. Чтобы узнать больше об этих и других новых функциях, посетите страницу релиза.

аркит

Arkit - это инструмент, который визуализирует кодовые базы JavaScript, TypeScript и Flow в виде значимых и допускающих фиксацию архитектурных диаграмм. Этот инструмент идентифицирует, соединяет и группирует сконфигурированные архитектурные компоненты. С его помощью вы можете визуализировать все компоненты или некоторые сегменты архитектуры. Визуализации кодовой базы можно экспортировать как диаграммы SVG, PNG или Plant UML. arkit можно установить через менеджеры пакетов NPM или Yarn.

GBoards

GBoards - это канбан-доска в стиле Trello, созданная с помощью Angular. Бэкэнд-часть приложения была создана с помощью Node.js. Компонент следует принципам материального дизайна, поэтому он хорошо впишется в ваше современное веб-приложение. Функциональность этого приложения является базовой. Вы можете добавлять, обновлять и удалять новые доски, списки и карточки.

Полезные советы и статьи

Повышайте уровень своих навыков JavaScript: 12 основных понятий

Будь вы новичок или опытный разработчик JavaScript, очень полезно время от времени проверять свои навыки и навыки программирования, чтобы убедиться, что вы используете оптимальный подход. Авторы веб-сайта ma-no думают так же и поэтому решили поделиться 12 базовыми концепциями, критически важными для понимания любым разработчиком JavaScript. Статья включает следующие темы:

  1. Значение и присвоение ссылочной переменной
  2. Закрытие
  3. Деструктуризация
  4. Распространение синтаксиса
  5. Остаточный синтаксис
  6. Методы массива
  7. Генераторы
  8. Оператор идентичности (===) против оператора равенства (==)
  9. Сравнение объектов
  10. Функции обратного вызова
  11. Обещания
  12. Асинхронное ожидание

Как работать со звуком в JS: Пользовательский аудиоплеер с API веб-аудио (часть 1)

В своей статье Тымец Владимир делится своим опытом создания веб-приложения с React и Web Audio API. Автор начинает с азов. Не с основами использования React, как вы, наверное, догадались. Владимир описывает природу звука как вибрацию, которая обычно распространяется как звуковая волна давления через среду передачи, такую ​​как газ, жидкость или твердое тело. После этого он описывает, как звук сохраняется на устройствах, как вы можете загрузить его с сервера и работать с ним на клиенте. Статья хорошо детализирована и содержит примеры кода.

8 причин использовать стилизованные компоненты

Стилизованные компоненты - это структура стилей CSS-in-JS, которая использует тегированные литералы шаблонов в JavaScript и потрясающую мощь CSS, чтобы предоставить платформу, которая позволяет вам писать фактический CSS для стилизации компонентов реакции. Нвосе Лотанна описывает некоторые из различных преимуществ стилизованных компонентов и объясняет, почему вам следует подумать о том, чтобы принять их в качестве предпочитаемой среды CSS-in-JS. Среди основных преимуществ использования styled-components:

  1. Свобода создания собственных компонентов с помощью CSS
  2. Встроенный стайлинг на стероидах
  3. Встроенная мобильная поддержка
  4. Стили с заданной областью
  5. Безклассовая политика
  6. Серверный рендеринг
  7. Модульное тестирование CSS и тестирование снимков
  8. Sass и отполированная поддержка

Автор пытается оставаться объективным и упоминает некоторые аргументы против использования стилизованных компонентов, такие как проблемы непрерывности и труднопреодолимая кривая обучения.

Как мы построили React Carousel

И последнее, но не менее важное: мы хотели бы отдать дань уважения нашей традиции упоминать React в нашем ежемесячном обзоре новостей JavaScript. Сегодня мы хотим поделиться статьей от Марека Хотоборски, который решил поделиться своим опытом создания карусельного компонента с помощью React.