Не стоит недооценивать силу простоты. Пожалуй, сложно представить себе, что на чистом JavaScript реализовано что-то вроде системы push-уведомлений, работающей в реальном времени, или инструмент для работы с базами данных, или полноценный текстовой редактор. Но подобные проекты существуют и позволяют решать множество актуальных задач. В этом материале речь пойдёт о нескольких весьма полезных библиотеках, которые подключаются к страницам в виде обычных JavaScript-файлов. При рассказе о каждой из них я постараюсь выделять их особенности и приводить примеры их использования.

Библиотека Push.js

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

Для того чтобы ей воспользоваться — надо начать с обычного HTML-файла. Далее — её нужно к этому файлу подключить. Сделать это можно, либо воспользовавшись соответствующим NPM-пакетом, либо загрузив из её GitHub-репозитория необходимые файлы, например — в виде .zip-архива. После этого нужно поместить файлы библиотеки push.min.js и serviceWorker.min.js в директорию проекта.

Вот пример кода HTML-страницы, в которой используется эта библиотека:

    
    

    
    
Push notification implementation
    
Click on this button to view notification
    Start

Страница, использующая push.js

Библиотека Editor.js

Вот — ещё одна замечательная библиотека — Editor.js. В нашем проекте довольно часто возникает необходимость в текстовом редакторе, а Editor.js — это простая и привлекательная JS-библиотека, реализующая как раз то, что нам нужно. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React. Редактор позволяет форматировать текст, например — делать его полужирным или курсивным, поддерживает оформление заголовков и много чего ещё. Тому, кто хочет воспользоваться Editor.js, достаточно бегло просмотреть документацию, после чего у него будет общее понимание того, что нужно делать. Для установки библиотеки можно воспользоваться NPM-пакетом или подключить её с CDN-ресурса.Сайт библиотеки Editor.js

Вот код файла index.js из проекта, в котором используется Editor.js:

  
    
Enter your content here
    


    Save article
    
    
  

Вот — код index.js:

try {

  var editor = new EditorJS({
    holderId : 'editorjs',
    placeholder: 'Let`s write an awesome story!',
    autofocus: true,

  });

  editor.isReady
    .then(() => {
      console.log("Editor.js is ready to work!");
    })
    .catch((reason) => {
      console.log(`Editor.js initialization failed because of ${reason}`);
    });

  const btn = document.getElementById("button");

  btn.addEventListener("click", function () {
    editor.save().then((outputData) => {
        console.log('Article data: ', outputData)
      }).catch((error) => {
        console.log('Saving failed: ', error)
      });

  });
} catch (reason) {
  console.log(`Editor.js initialization failed because of ${reason}`);
}

Если, сразу после того, как библиотека подключена, попытаться ей воспользоваться, ничего не получится, так как, прежде чем с ней можно будет работать, нужно выполнить некоторые настройки. Собственно говоря — это и делается в вышеприведённом коде файла index.js, который вы можете рассматривать как пример, интегрируя Editor.js в свой проект. При этом редактор поддерживает массу настроек (например — настройки заголовков и списков), освоить которые можно, обратившись к документации. Вот пример настроек редактора:

import Header from '@editorjs/header';
import List from '@editorjs/list';
import MyParagraph from 'my-paragraph.js';
const editor = new EditorJS({

  tools: {
    header: Header,
    list: List,
    myOwnParagraph: MyParagraph
  },
  defaultBlock: "myOwnParagraph"
})

Вот как редактор выглядит на странице.Редактор на странице

Библиотека Howler.js

Вы, вероятно, пользовались в своих проектах HTML-элементами, предназначенными для работы со звуками и видеозаписями. Библиотека Howler.js направлена на решение различных задач, связанных со звуком. К ней подготовлена хорошая документация.Сайт библиотеки Howler.js

Вот фрагмент кода, демонстрирующий работу с этой библиотекой:

Использование Howler.js

Библиотека Reveal.js

Вы когда-нибудь задумывались о том, что настанет день, когда вы сможете создавать презентации, используя JavaScript? В общем-то, этот день, благодаря замечательной библиотеке Reveal.js, уже настал. Я просто не могу не рассказать о ней.Сайт библиотеки Reveal.js

Её, как и другие подобные библиотеки, можно установить в виде NPM-пакета, или можно просто скачать её материалы из GitHub-репозитория и подключить соответствующие .js и .css-файлы к странице.

Вот стили Reveal.js:

Вот команды подключения .js-файлов библиотеки и код её инициализации:

Теперь поговорим, собственно, о слайдах, из которых состоят презентации, создаваемые с помощью Reveal.js.

В файле index.html, в теге , создадим элемент

• О проекте
• Архив
• Реклама Партнёры Правовая информация Контакты Обратная связь
•