Кілька цікавинок і корисностей для веб-розробника #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)

Приношу вибачення за можливі помилки. Якщо ви помітили проблему — напишіть, будь ласка, в приват.

Спасибі всім за увагу.

Сподобалася Вам добірка?

/>
/>


<input type=»radio" id=«vv66479»
class=«radio js-field-data»
name=«variant[]»
value=«66479» />
Так
<input type=«radio» id=«vv66481»
class=«radio js-field-data»
name=«variant[]»
value=«66481» />
Немає

Проголосував 31 людина. Утрималося-3 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.