Webtorrent.js

https://github.com/feross/webtorrent

Шедевральный проект — торрент-клиент для Node.js и браузеров. Да, ты не ослышался, стриминг будет работать прямо в браузере благодаря технологии WebRTC (data channels) для P2P-транспортировки. И для этого не требуются какие-то дополнительные плагины или расширения. Как написали разработчики: «It’s Just JavaScript™».

Для того чтобы BitTorrent корректно работал с WebRTC, авторы проекта внесли некоторые изменения в протокол. Поэтому единственное ограничение при работе с Webtorrent — он умеет подключаться только к другим клиентам, поддерживающим WebTorrent (и WebRTC). Но в то же время ведется работа для поддержки uTorrent, Transmission, Vuze.

Если подытожить, то на данный момент проект предлагает следующее:

  • торрент-клиент для Node.js и браузеров;
  • загрузку нескольких торрентов одновременно;
  • потоковую передачу данных;
  • поддержку magnet uri, peer discovery и protocol extension api;
  • всеобъемлющий набор тестов;
  • стриминг видео в <video> тег в формате WebM (vp8, vp9) или MP4 (h.264);
  • стриминг в AirPlay, Chromecast, VLC player.
 

Wavesurfer.js

https://github.com/katspaugh/wavesurfer.js

Замечательный скрипт, который с помощью Canvas отрисовывает звуковые волны. С Wavesurfer.js легко создать аудиоплеер наподобие того, что реализован в Spotify. Библиотека содержит целый ряд дополнительных опций и методов. Все безупречно работает во всех современных браузерах с поддержкой Web Audio API. А для старых браузеров написана обертка на Flash — wavesurfer.swf.

var wavesurfer = Object.create(WaveSurfer);
wavesurfer.init({
    container: '#wave',
    waveColor: 'violet',
    progressColor: 'purple'
});
 

JointJS

https://github.com/DavidDurman/joint

Убийца MS Office Visio на JavaScript. Я шучу, конечно, но Joint — великолепная библиотека для создания различных диаграмм с невероятно широким спектром возможностей. Joint позволяет работать с элементами любой формы, привязывать их друг к другу, зумировать результат, сериализировать/десериализировать данные, управлять всевозможными событиями. Важно отметить, что все адаптировано под тач-интерфейсы. А сама библиотека имеет грамотную MVC-архитектуру и гибкую плагинную систему.

 

FastDom

https://github.com/wilsonpage/fastdom

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

fastdom.read(function() {
  var width = element.clientWidth;
});

fastdom.write(function() {
  element.style.width = width + 'px';
});


 

Primer

https://github.com/primer/primer

Еще один одновременно CSS-тулкит, сборщик и руководство по стилю, который определенно заслуживает внимания в данной подборке, потому что это детище от команды GitHub. Проект за пару недель собрал более 3 тысяч звезд на GitHub и может даже составить конкуренцию для Twitter Bootstrap.

 

NodeGit

https://github.com/nodegit/nodegit

Либа для нативной работы с Git из Node.js. Ценный инструмент для тех, кто пишет на серверном JavaScript и привык использовать хуки. Корректно работает на Windows, Linux и Mac, а также есть версия для новоиспеченного IO.js.

Пример эмуляции git log:

var open = require("nodegit").Repository.open;

// Open the repository directory.
open("tmp")
  // Open the master branch.
  .then(function(repo) {
    return repo.getMasterCommit();
  })
  // Display information about commits on master.
  .then(function(firstCommitOnMaster) {
    // Create a new history event emitter.
    var history = firstCommitOnMaster.history();

    // Create a counter to only show up to 9 entries.
    var count = 0;

    // Listen for commit events from the history.
    history.on("commit", function(commit) {
      // Disregard commits past 9.
      if (++count >= 9) {
        return;
      }

      // Show the commit sha.
      console.log("commit " + commit.sha());

      // Store the author object.
      var author = commit.author();

      // Display author information.
      console.log("Author:\t" + author.name() + " <", author.email() + ">");

      // Show the commit date.
      console.log("Date:\t" + commit.date());

      // Give some space and show the message.
      console.log("\n    " + commit.message());
    });

    // Start emitting events.
    history.start();
  });
 

Oridomi

https://github.com/dmotz/oriDomi

«The web is flat, but now you can fold it up». Очень эффектная библиотека. OriDomi умеет превращать любой элемент или изображение в лист бумаги, который можно складывать и по-разному отображать в перспективе со множеством различных вариаций.

var folded = new OriDomi('.paper', {
  // Number of panels when folding left or right (vertically oriented)
  vPanels: 5,
  // Number of panels when folding top or bottom
  hPanels: 3,
  // Folding duration in ms
  speed: 1200,
  // Backwards ripple effect when animating
  ripple: 2,
  // Lessen the shading effect
  shadingIntesity: .5,
  // Smaller values exaggerate 3D distortion
  perspective: 800,
  // Keep the user’s folds within a range of –40 to 40 degrees
  maxAngle: 40,
  // Change the shading type
  shading: 'soft'
});
 

React Native

https://github.com/facebook/react-native

В прошлой подборке я писал про NativeScript — библиотеку для разработки мобильных приложений под iOS, Android и Windows Phone на стеке веб-технологий. Так вот, по своему назначению React Native — это практически то же самое, только релиз у них состоялся немного позже. Но проект курируется Фейсбуком и поэтому, возможно, имеет гораздо большие перспективы.

 

Gemini

https://github.com/bem/gemini

Утилита для регрессионного тестирования верстки от Яндекса. Этот чудо-инструмент с очень продуманной реализацией diff-алгоритма позволяет тестировать верстку в разных браузерах, сравнивая различные фрагменты в различных состояниях, сохраняя скриншоты и наблюдая за JavaScript. Безусловно, он необходим только для разработки реально больших интерфейсов, а не для верстки типичного проекта. В основе лежат Selenium Server и Phantom.js

var gemini =require('gemini');
gemini.suite('button', function(suite) {
    ...
});
suite.setURL('/some/url');
suite.setCaprureElements('.button');
 

Space.js

https://github.com/gopatrik/space.js

Space.js методом декларативного описания создает 3D-скроллинг для твоей страницы. Скрипт поддерживает более десяти видов различных анимаций и максимально прост в использовании. Для корректной работы требуется разделить всю верстку на блоки с классом .space-frame и в определенных дата-атрибутах указать параметры анимации.

<div class="space-frame" data-transition="rotate360" data-duration="1.4">
    <section class="space-inner-frame">
        [contents]
    </section>
</div>

  • Подпишись на наc в Telegram!

    Только важные новости и лучшие статьи

    Подписаться

  • Подписаться
    Уведомить о
    0 комментариев
    Межтекстовые Отзывы
    Посмотреть все комментарии