3,2
рейтинг
20 апреля 2015 в 03:00

Разработка → Несколько интересностей и полезностей для веб-разработчика #42

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Webtorrent




Полноценный торрент клиент для NodeJS и браузеров. Стримминг будет работать прямо в браузере благодаря WebRTC (data chanels) для P2P транспортировки. А самое главное «It's Just JavaScript™», то есть не нужны никакие дополнительные плагины или расширения. Проект собрал более 3000 звезд на GitHub и на данный момент предоставляет следующие возможности: непосредственно саму потоковую передача данных, загрузка нескольких торрентов одновременно, поддержку magnet uri, peer discovery и protocol extension api, возможность подключения WebTorrent клиентов на разных доменах, стримминг видео в <video> тег в формате (webm (vp8, vp9) или mp4 (h.264)), а также в AirPlay, Chromecast, VLC player и прочие устройства.

var WebTorrent = require('webtorrent')

var client = new WebTorrent()
var magnetUri = '...'

client.add(magnetUri, function (torrent) {
  // Got torrent metadata!
  console.log('Torrent info hash:', torrent.infoHash)

  torrent.files.forEach(function (file) {
    // Get a url for each file
    file.getBlobURL(function (err, url) {
      if (err) throw err

      // Add a link to the page
      var a = document.createElement('a')
      a.download = file.name
      a.href = url
      a.textContent = 'Download ' + file.name
      document.body.appendChild(a)
    })
  })
})



Dragula




Вероятно самый удобный скрипт для реализация Drag&Drop функционала. Dragula максимально проста в использовании, поддерживает трогательные устройства, не зависит от сторонних библиотек и работает во всех современных браузерах включая IE7+.

dragula(containers, {
  moves: function (el, container) {
    return true;         // elements are always draggable by default
  },
  accepts: function (el, target, source, sibling) {
    return true;         // elements can be dropped in any of the `containers` by default
  },
  direction: 'vertical', // Y axis is considered when determining where an element would be dropped
  copy: false,           // elements are moved by default, not copied
  revertOnSpill: false,  // spilling will put the element back where it was dragged from, if this is true
  removeOnSpill: false   // spilling will `.remove` the element, if this is true
});


Beep.js




Очень неординарная библиотека для написания синтезаторов на основе HTML5 Audio API. А самое главное, то что для написания своей первой мелодии, не требуется детального понимания работы синтезаторов. Достаточно знать, что synth = new Beep.Instrument() создает коллекцию триггеров, каждый из который имеет звуки и ноты. А дальше дело практики и экспериментов. В общем это занятная штука для вашего JavaScript досуга.

Space.js




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

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


React Native


В 40 выпуске «Интересностей и полезностей» я писал про NativeScript — библиотека для разработки мобильных приложений под iOS, Android и Windows Phone на стеке веб технологий. Причем это чистый JavaScript API поверх нативных компонентов из мобильных платформ. Но я не могу не упомянуть здесь React Native, идея которого полностью аналогично, только релиз у них состоялся позже и это детище от Facebook, что сразу предрекает проекту значительно большие перспективы.

Западные мысли или что стоило бы перевести на Хабре:




Говорят и показывают отечественные ИТ ресурсы:




Напоследок:




За помощь в подготовке материала выражаю огромную благодарность Александру Маслову drakmail.

Друзья бэкендеры! Я думаю всем известно, что свои подборки я делаю полностью на альтруизме. Я всегда прошаривал кучу сайтов, чтобы мне всегда было удобно работать. А в один момент я решил делиться найденным материалом. Со временем подборки обрели некую популярность и значительно расширились в плане содержания. Отныне я буду четко структурировать блок «Напоследок», дабы людям не приходилось искать нужное. Для того чтобы разделы не были голыми и всегда наполнялись актуальной информацией, мне требуется ваша помощь. И проблема не только во времени, но и в компетенции. В плане бэкенда я скорее теоретик, чем практик.

Пхпшник, рубист, питонист, гоущик, если ты уже мониторишь GitHub Trending, Reddit, HackerNews или Twitter в поисках интересностей и полезностей по своей теме, если найденное определенно имеет ценность, но не заслуживает внимание целого поста, если тебе не трудно раз в неделю/в две недели в зависимости от материала делиться парой килобайт ссылочной массы, то напиши мне в личку или любую соц. сеть из профиля. Писанина в основной раздел по желанию. Имя или контакты волонтеров в каждом посту обязательно будут указаны.

                                                         Предыдущая подборка (Выпуск 41)

Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.

Спасибо всем за внимание.
Понравилась ли Вам подборка?

Проголосовало 448 человек. Воздержалось 52 человека.

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

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (17)

  • 0
    За Dragula отдельное спасибо, как раз искал нечто подобное.
    • +1
      еще бы дерево поддерживала и цены бы не было
      • 0
        Клавиатуру Вам в руки и вперёд — к PullRequest'ам!
    • 0
      Всегда пожалуйста!
  • +17
    трогательные устройства

    Какая прелесть! Я теперь только так и буду их называть!
    • 0
      Это здорово. У нас и так в языке масса неологизмов, а в ИТ сфере и того больше разы.
  • +3
    Thefuck — улучшает работу с командной строкой.

    это вообще бомба, большое спасибо)
    • +1
      А если эту утилитку еще и на голосовую команду повесить ))
      • 0
        я пока додумался только до русского аналога в алиасе)
    • 0
      Согласен! Пожалуйста :)
  • 0
    Читаю про Webtorrent и 'я в шоке'!
    Это получается, теперь можно чуть ли не простым обновлением веб-сайта понизить нагрузку на сервера раздачи 'файлов для загрузки', за счет раздачи их через p2p сеть клиентов. И самое главное, не только файлов но и любого медиа и ее стриминга!

    А тут на хабре тишина. Я может неверно понял и у этой технологии есть какие то подводные камни, полностью нивелирующие все достоинства p2p?
    • 0
      Проект на самом деле просто потрясающий. Но на ваш вопрос затрудняюсь ответить. Теоретически да, но как все будет на практике пока неизвестно.
    • +1
      Половину прошлой недели пробовал завести этот клиент, ничего не получилось, может потому и нет информации что оно мало у кого заработало.
    • +1
      Кстати на их сайте вот такая пикча.
      Картинка
      image

      Судя по ней вебторенты работают между собой и с каким то Hybird. К обычным клиентам не ходит. :(
      To make BitTorrent work over WebRTC (which is the only p2p transport that works on the web) we made some protocol changes. Therefore, a browser-based WebTorrent client can only connect to other clients that support WebTorrent (and WebRTC).

      The WebTorrent node.js module will soon gain the ability to connect to web peers using WebRTC, making it the first «hybrid» client. We hope established torrent clients (uTorrent, Transmission, Vuze, etc.) will also add support for WebTorrent (and WebRTC) so they can connect to both normal and web peers.
      • 0
        Делаю небольшой проек для себя — там сейчас такая проблема: webtorrent сидирует качает через webrtc, а обычный torrent клиент webrtc не поддерживает, поэтому они никак между собой раздавать и качать не будут. Webtorrent-hybrid вроде как решает эту проблему
    • 0
      Да, похоже на сегодня это слишком хорошо чтобы оказаться правдой. Ждем торрента в браузере уже много лет… Adobe что-то делала-делала на своем флэше — тоже ничего толкового не вышло.
  • –1
    Реализация Space.js это ужaс просто. По крайней мере в тех примеры что там показаны — мазохизм какой-то.
    Подобная реализация показана здесь — www.treds.net, вот для такого как по мне — это подходит.

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