Some interesting and useful things for web developer # 17

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

Intercooler.js

Does anyone remember FullAjax - the development of Ruslan Sinitsky sirus (the current founder of Jelastic)? In short, this is a library for working with AJAX by declaring certain attributes on elements, and more about this is written in the posts “Direct links to AJAX websites - our Fullajax Direct Link technology” , “Full AJAX. Theory and Examples. Chips and features " and " Fly AJAX - write less, keep more. Non-standard AJAX and indexing by search engines . Back to Intercooler, this is something similar:

<div id="targetDiv">Results Div...</div> <i id="indicator" style="display:none" class="fa fa-spinner fa-spin"> <input id="hiddenInput" type="hidden" name="hidden" value="42"/> <div ic-trigger-on="click" ic-verb="POST" ic-src="/example" ic-include="#hiddenInput" ic-indicator="#indicator" ic-target="#targetDiv" ic-transition="none"> Click Me! </div>

After clicking on the div, a POST request is sent with the value of the field with #hiddenInput , and #indicator will be displayed in the process. The response will be passed to the #targetDiv block. Isn't it great?

')

Flow.js

The library provides “multiple synchronous, stable, fault-tolerant and renewable / restartable” file downloads using a maximum of the HTML5 File API. Great toolkit with many different options and methods.

 var flow = new Flow({ target:'/api/photo/redeem-upload-token', query:{upload_token:'my_token'} }); // Flow.js isn't supported, fall back on a different method if(!flow.support) location.href = '/some-old-crappy-uploader'; flow.assignBrowse(document.getElementById('browseButton')); flow.assignDrop(document.getElementById('dropTarget')); r.on('fileAdded', function(file, event){ ... }); r.on('fileSuccess', function(file,message){ ... }); r.on('fileError', function(file, message){ ... });

Parsedown - the best Markdown parser in PHP

Fb flo

Live Reload solution from Facebook developers. It consists of two parts: the npm module and add-on for Chrome . The main advantages compared to the popular Emmet Livestyle or Live Reload are to respond to Node.js files, the ability to work in any editor, easy integration on the server with your working environment.

Jsaction

A small library from Google built with Closure Compiler for event management. JsAction allows you to split DOM nodes according to event handlers. I can’t concisely transport the "JomAction of the DOM" and the action code. ”The point is that you first declare the event handlers, and then connect them to the elements using the jsaction attribute:

 <div id="foo" jsaction="leftNav.clickAction;dblclick:leftNav.doubleClickAction"> some content here </div>

 var eventContract = new jsaction.EventContract; // Register the event types we care about. eventContract.addEvent('click'); eventContract.addEvent('dblclick'); var dispatcher = new jsaction.Dispatcher; eventContract.dispatchTo(goog.bind(dispatcher.dispatch, dispatcher)); //Register individual handlers myapp.LeftNav.prototype.doStuff = function(flow) { // do stuff }; myapp.LeftNav.prototype.registerHandlers = function() { dispatcher.registerHandlers( 'leftNav', // the namespace this, // handler object { // action map 'clickAction' : this.doStuff, 'doubleClickAction' : this.doStuff }); };

AniJS

Awesome library for declarative description of CSS animations. It will serve you a great tool when creating landing pages.

 <div class="demo-square demo1" data-anijs="if: click, do: flipInY, to: .container-box"></div>

If some event (click, scroll, mouseover), On any element (css selector), Do some behavior (Rotate animation), To (any element).

Supports all the most necessary events and the entire set of animations animo.css

Ampache

The greatest work and great gift opensource PHP community. Ampache is a web application for audio and video streaming and a file manager that provides access to your library from any device connected to the Internet.

Grunt Email Design

From the title you can already guess what exactly the plugin does, but I will clarify: it compiles SCSS, translates all styles in inline, uploads all images to CDN (optional) and sends a test letter to the specified address.

I can not duplicate in this compilation the news from emuravjev habraiser : “Muravyov's typographer published on GitHub ”

Western thoughts or what would translate to Habré:

Finally:

Tablesaw is a group of plugins for creating responsive tables.
October is a fairly popular CMS in PHP, which literally in a few days gathered more than 1000 old-fashioned people on GitHub.
DOMtastic is a tiny library (3-4kb in gzip) to replace jQuery for all necessary operations with DOM.
sharp is the fastest npm module for resizing JPEG, PNG, WebP and TIFF images.
LoopBack - Node.js framework, which according to the creators of the application has absorbed all the best from Express.
Atom source code from GitHub
elasticsearch-dump - a utility for importing and exporting elasticsearch data
Minicron is a Ruby Cron Jobs management and monitoring system.
Depthy - Google Camera's Lens Blur playground, a fantastic effect on your browser!
guides - guide for programming in style.
Remember gitbook ? Duck here on its basis appeared the editor application for Windows, Mac and Linux.
And the Firefox filing program

Previous selection (Release 16)

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

All Articles

Some interesting and useful things for web developer # 17

Western thoughts or what would translate to Habré:

Finally:

More articles: