Some interesting and useful things for web developer # 30

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

Cloudtunes

Cloudtunes is one of those projects, looking at which I do not understand the motivation of developers to lay out such developments in open access. Do not consider me a purely mercantile person, but this project is roughly a clone of iTunes in the cloud and this is just a great service. Cloudtunes provides a single interface for your library by synchronizing data between Dropbox, Youtube, Lastfm, and more. The server part is written in Python (Tornado, Celery, Mongo DB, MongoEngine, Redis), and the client part is written in CoffeeScript (Backbone.js, SocketIO, Handlebars, Compass, SoundManager).

')

Sweetalert

Awesome dialog boxes. Most easy to use. A good substitute for classic unappealing alerts and promts. Many additional options that easily allow you to adjust the necessary event sequence of windows.

//A basic message swal("Here's a message!") //A warning message, with a function attached to the "Confirm"-button swal({ title: "Are you sure?", text: "Your will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success); });

Bootstrap theme in the style of Google Material Design

Timing.js

The library adds additional metrics for the Navigation Timing API . Now we will know everything about the page loading. The result that we get from timing.getTimes () :

 firstPaint: 1411307463455.813 // New firstPaintTime: 685.0390625 // New appcacheTime: 2 connectEnd: 1411307463185 connectStart: 1411307463080 connectTime: 105 // New domComplete: 1411307463437 domContentLoadedEventEnd: 1411307463391 domContentLoadedEventStart: 1411307463391 domInteractive: 1411307463391 domLoading: 1411307463365 domReadyTime: 46 // New domainLookupEnd: 1411307463080 domainLookupStart: 1411307463032 fetchStart: 1411307463030 initDomTreeTime: 56 // New loadEventEnd: 1411307463445 loadEventStart: 1411307463437 loadEventTime: 8 // New loadTime: 558 // New lookupDomainTime: 48 navigationStart: 1411307462887 readyStart: 143 // New redirectEnd: 0 redirectStart: 0 redirectTime: 0 // New requestStart: 1411307463185 requestTime: 150 // New responseEnd: 1411307463335 responseStart: 1411307463333 secureConnectionStart: 1411307463130 unloadEventEnd: 0 unloadEventStart: 0 unloadEventTime: 0 // New

Horizonal.js

Awfully unattractive landing and undeservedly small number of stars on GitHub. But the script allows you to create very beautiful effects with content with many different animation variations.

 horizonal.init({ onPageTransition: function(type, page, animator) { // Use whatever JavaScript you like to transform the node } onNodeTransition: function(type, node, animator) { // Use whatever JavaScript you like to transform the node } });

Melchior.js - chained definition of modules (CMD)

 // create module melchiorjs.module('yourModule') // define dependencies .require('dependencyUno') .require('dependencyDuo', 'duo') // define module body .body(function () { // `dependencyUno` is available here! dependencyUno.doSomething(); // aliased `dependencyDuo` is available as `duo`! duo.doSomething(); // return methods for other modules return { method: function () { ... }, anotherMethod: function () { ... } }; });

Hook.js

Hook.js implements a typical “pull-to-refresh” scenario for mobile UX devices on the web: loading / updating content when traction is down. Very usable and can be useful to many for asynchronous projects.

Western thoughts or what would translate to Habré:

108 byte CSS Layout Debugger

 [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Finally:

awesome-shell
A Scalable CSS Reading List
Physical Web - open standard for the Internet of things ( detailed article ).
Basil.js is the missing level of abstraction for storing and processing data in the local cache.
Verb is a CAD library for the web.
6to5 - translates ECMAScript 6 to ES5.
min is the smallest CSS framework in the world (995 bytes).
Brototype - “Bro, do you even javascript?”
Transducers.js - generalized transformation of data (inspired by Clojure's transducers).
Takana - auto refresh the page in the browser when working with SCSS.
N - version manager for Node.
Nightmare - “high level wrapper for Phantomjs”.
Python Prompt Toolkit is a library for creating interactive CLIs.
T and Twitter - CLI clients for Twitter to Ruby and Python, respectively.
Upmin Admin Ruby is a framework for building admins.
Katon - Autostart your Node, Ruby, Python, Go, ... development servers.
AngularJS Tutorial - learn Angular by creating a Gmail clone.
Data Brace - use Google Spreadsheets as CMS.
The Ultimate Guide To iPhone Resolutions.
Pritunl - "Enterprise VPN Server".
windows_98.css - type in the style of Windows 98.

Previous selection (Issue 29)

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/238755/

All Articles