Полезные инструменты веб-разработчика / Часть 2

Первая часть вот здесь.

Как в прошлый раз, список полезных штук для упрощения работы или экономии времени.

Bit

Bit - это крупнейшая библиотека компонентов JavaScript. Причём не только стандартных, но и для фрейморков, включая Angular 6, Vue, React и др.

Устанавливаются компоненты через NPM, Yarn или через их собственный менеджер пакетов bit.

Pleeease

Pleeease - это сервис для генерации префиксов CSS для поддержки разных свойств разными браузерами. Тут есть не только префиксы, но и просто очиститель от мусора в CSS коде

AmplitudeJS - лёгкий (9 kb) аудио плеер, созданный на чистом JavaScript и HTML. jQuery не нужен. Можно настраивать дизайн, создать плейлист. В Amplitude существуют коллбеки для обработки событий. Есть поддержка прямой трансляции аудио.

Speedracer

Speedracer - тестировщик на скорость загрузки вашего приложения. Устанавливается через NPM и используется как консольная команда.

MD Page

С этим плагином вы сможете писать Markdown код прямо в HTML странице. Надо только лишь включить скрипт, и вы уже можете писать в MD коде.

Johnny Depp

Простой менеджер пакетов для браузерного JavaScript. Это не значит что вы можете качать любой NPM пакет, тут другой принцип действия. Вместо того, чтобы забивать HTML код тонной <script>, можно иниицировать их таким способом:

<!doctype html>
<html>
  <head>
    <script src="//cdn.rawgit.com/muicss/johnnydepp/0.0.3/dist/depp.min.js"></script>
    <script>
      // define dependencies
      depp.define({
        'jquery': [
          '//code.jquery.com/jquery-3.3.1.min.js'
        ],
        'jquery-ui': [
          '#jquery',
          '//code.jquery.com/ui/1.12.1/jquery-ui.min.js',
          '//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css'
        ]
      });

      // load dependencies
      depp.require(['jquery-ui'], function() {
        $(function() {
          $("#datepicker").datepicker();
        });
      });
    </script>
  </head>
  <body>
    <p>Date: <input type="text" id="datepicker"></p>
  </body>
</html>

Заключение

Статья получилась довольно маленькой, т.к. мало что годного можно найти. Тем не менее, то что я показал, имеет смысл чекнуть эти инструменты. Спасибо за прочтение)