Geekly Articles each Day
📜 ⬆️ ⬇️

Some interesting and useful things for web developer # 42

Good day, dear habravchane. Recently, I saw some interesting and useful tools / libraries / events that I want to share with Habr.

Webtorrent




Full torrent client for NodeJS and browsers. Streaming will work right in the browser thanks to WebRTC (data chanels) for P2P transport. And most importantly, “It's Just JavaScript ™”, that is, no additional plug-ins or extensions are needed. The project has collected more than 3000 stars on GitHub and currently provides the following features: directly streaming data itself, downloading several torrents simultaneously, support magnet uri, peer discovery and protocol extension api, the ability to connect WebTorrent clients on different domains, streaming video to <video > tag in format (webm (vp8, vp9) or mp4 (h.264)), as well as in AirPlay, Chromecast, VLC player and other devices.
') 
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




Probably the most convenient script for implementing Drag & Drop functionality. Dragula is the easiest to use, supports touching devices, does not depend on third-party libraries, and works in all modern browsers including 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




Very extraordinary library for writing synthesizers based on the HTML5 Audio API. And most importantly, the fact that to write your first melody does not require a detailed understanding of the work of synthesizers. It's enough to know that synth = new Beep. Instrument () creates a collection of triggers, each of which has sounds and notes. And then the case of practice and experimentation. In general, this is a fun thing for your javascript leisure.

Space.js




Space.js creates a 3D scrolling effect for your page. The script supports more than 10 types of different animations and is as easy to use as possible. To work correctly, you need to divide the entire layout into blocks with the `.space-frame` class and specify animation parameters in certain data attributes.

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


React native


In the 40th edition of Interesting and Utility, I wrote about NativeScript, a library for developing mobile applications for iOS, Android and Windows Phone on a stack of web technologies. And this is pure JavaScript API on top of native components from mobile platforms. But I can not fail to mention here React Native, the idea of ​​which is completely similar, only they had a release later and this is a brainchild from Facebook, which immediately predicts the project to have much greater prospects.

Western thoughts or what would translate to Habré:




They say and show domestic IT resources:




Finally:




For help in preparing the material I express my deep gratitude to Alexander Maslov drakmail .

Friends backenders! I think everyone knows that I am doing my compilations entirely on altruism. I always went through a bunch of websites to make it always convenient to work. And at one point I decided to share the material found. Over time, collections have gained some popularity and significantly expanded in terms of content. From now on, I will clearly structure the “Finally” block so that people do not have to look for what they need. In order for the sections not to be bare and always filled with relevant information, I need your help. And the problem is not only in time, but also in competence. In terms of backend, I am rather a theorist than a practitioner.

Pkhshshnik, rubist , pythonist, goschik , if you already monitor GitHub Trending, Reddit, HackerNews or Twitter in search of interesting and useful things on your topic, if you find it definitely has value, but does not deserve the attention of the whole post, if it's not difficult for you once a week / in two weeks, depending on the material to share a pair of kilobytes of reference mass, then write me in a personal or any social. network from profile. Scribble in the main section as desired. The name or contacts of volunteers in each post will be indicated.

Previous selection (Release 41)

I apologize for any typos. If you notice a problem - please write in a personal.

Thank you all for your attention.

Source: https://habr.com/ru/post/256117/

More articles:


All Articles