A few interesting and useful things for a web developer (Issue 3)

Good day, dear Khabravchians. Happy programmer day. Recently, I saw several interesting and useful tools / libraries / events that I want to share with Habr.

Cloudconvert

A great online file converter that supports a total of 140 formats of the following types: archive, audio, cad, document, ebook, image, presentation, spreadsheet, video. It is synchronized with Dropbox and Google Drive, which makes it possible to use on all smartphones. And the best part is that for this service there is a functional and simple API.

Munee

Multifunctional PHP5.3 library, which is an excellent solution for optimizing a project. With it, you can compile LESS, SCSS and CofeeScript files on the fly, resize and crop images, minify CSS and JS, combine them into one request. Munee also provides the ability to correctly cache resources, both on the server side and on the client side. Github Project

Brunch

First-class project builder at Node.js. From the point of view of optimization, it is similar to Munee (I wrote about PHP before, because the older ones have to concede, and in general such conveniences appear on it “not often” ). Otherwise, there are a lot of different build options for: Boilerplate, Bootstrap, Skeleton, Angular.js, Backbone.js, Jade, Phonegap, etc.

Favico.js

A small, almost imperceptible favicon can be a very useful element in a competent interface. This script allows you to easily manipulate all kinds of ways to display favicon in your project, even broadcast arbitrary video or recording from a webcam. There is also jQuery Notify Better with similar, but less broad functionality.

Animo.js

Today, we are able to beautifully and easily animate elements in various ways in CSS using Effeckt.css or Animate.css . Animo.js is a small library (7kb) that allows you to manipulate CSS animations (animate + animo.css) and adds a cross-browser Blur effect. Works with jQuery 2 and later. The syntax is quite simple:

$('#demo-a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
	$('#demo-n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() {
		$('#demo-i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() {
			$('#demo-m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
				$('#demo-o').animo({animation: "fadeOutRight", duration: 0.5, keep: true}, doMagicIn()); // function to fade them back in
			});
		});
	});
});

Gridism

If you do not use CSS frameworks (Bootstrap, Foundation, UIkit, etc.), then I recommend Gridism, as the easiest and most miniature way to create a responsive grid.

Rework

"Custom CSS preprocessor for Node.js and browsers." Until I had time to thoroughly try it out. But in general, it looks like a high-quality mixture of LESS, SCSS and Stylus, because there is JavaScript with normal functions, built-in Compass, freedom from prefixes, various "subtle" moments, like transparent mixins or built-in .at2x polyfiles ([vendors]) for retina displays.

Basiliq

Basil is a PSD file containing a huge number of UI elements for creating desktop and mobile interfaces. Personally, I really liked the style of "Freehand" (handmade) and even more like it after watching a promotional video. And this is all done in Samara, CloudCastle Respect for quality and sense of taste .

Cleaver

"30-second Slideshows for Hackers."

npm install -g cleaver

cleaver path/to/something.md

title: Basic Example
author:
  name: "Jordan Scales"
  twitter: "@jdan"
  url: "http://jordanscales.com"
output: basic.html
controls: true
--
# Cleaver 101
## A first look at quick HTML presentations
--
### A textual example
Content can be written in **Markdown!** New lines no longer need two angle brackets.
This will be in a separate paragraph
--
### A list of things
* Item 1
* Item B
* Item gamma
No need for multiple templates!

And in the end we get just such a presentation

Finally:

Maybe someone did not see Shade.less / Shade.css .
Recently, I was looking for a tool similar to Kuler for defining Flat colors and found only this palette (I will be grateful for the link to the necessary service in the comments).
Interesting CSS gimmicks: Client-side full-text search in CSS , Mona Lisa in pure CSS ( image2css ) and Cartman .

Thank you all for your attention.

                             Next Collection (Issue 4)       Previous Collection (Issue 2)