Some interesting and useful things for web developer # 12

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

BrowserSync

I think this is the best Live Reload tool. BrowserSync is: of course, reloading the page after changing the source files including the server ones (PHP, ASP, Rails, etc.); synchronization with desktops, tablets and smartphones; synchronizes scrolling between browsers, data in forms and many other actions; exists as a Grunt and Gulp plugin; available on Windows, Linux, MacOS.

npm install -g browser-sync 

 // Using a an IP based host browser-sync --proxy "192.167.3.2:8001" --files "app/css/*.css" 

Imacss

A very useful thing, with which in one simple step you can translate all the images in your project into a Data URI with the replacement in CSS:

 npm install -g imacss 

 $ imacss "~/projects/webapp/images/*.{svg,png}" images.css 

or so:

 var imacss = require('imacss'); imacss .transform('/path/to/your/images/*.png') .on('error', function (err) { error('Transforming images failed: ' + err); }) .pipe(process.stdout); 

')

simpleCart.js

An elegant solution for creating a basket in the online store. Rich functionality and flexible settings, as the story is enough for the whole article. There is only one big minus - support only Western payment systems from PayPal, Amazon and Google. The project requires a couple of branded rekvestov from habravchan.

RAD.js

The main goal of RAD is to rid the developer of the mobile routine. This is not just another UI framework, it doesn’t impose any restrictions on designers' fantasies. This is a useful set of solutions for constantly emerging system tasks and mobile hacks. The principle of operation between screens in the SPA is: at the moment when the user wants to leave the page, it is detailed from the main branch and the link to the brunch is saved in JS. Due to this, next time there is no need to re-render this page and bind events, you just need to replace the node in the DOM with the one responsible for the visible page. A small delay is obtained only when the page is first displayed.

Fontprep

A wonderful open source Mac application to help create an icon font.

Finally:

• Browser clone wildly popular for unknown reasons in recent times the game Flappy Bird .
  
• Webshim - all polyfiles are polyfil.
• PHP Live Regexp is a handy tool for testing regular expressions.
• scrollReveal.js or WOW - “expose” the animation when scrolling.
• ListOfMinimalistFrameworks .
• Mongoose is one of the best (if not the best) ORM for MongoDB in Node.JS.
• Sequelize is a very thoughtful ORM for SQL-like DBMS in Node.JS.
• Grid Animation - spectacular animation of the grid elements.
• Nanobar.js - simple progress bar.
• Very usable jQuery Range Slider .

Previous selection (Release 11)

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