Several interesting and useful things for a web developer (release 3)
Good day, dear habravchane. Since you have a day programmer. Recently, I saw some interesting and useful tools / libraries / events that I want to share with Habr.
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. Syncs with Dropbox and Google Drive, so it can be used on all smartphones. And the most pleasant thing is that for this service there is a functional and simple API.
')
Multifunctional PHP5.3 library, which is an excellent solution for project optimization. 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 intelligently cache resources, both on the server side and on the client side. Github Project
First-class project collector on Node.js. From the point of view of optimization, it is similar to Munee (I wrote about PHP before, because the elders have to give in, and in general such conveniences appear “not often” on it ). Otherwise, a huge variety of different build settings for: Boilerplate, Bootstrap, Skeleton, Angular.js, Backbone.js, Jade, Phonegap and so on.
A small, almost imperceptible favicon can be a very useful element in a competent interface. This script allows you to easily manipulate all sorts of ways to display favicon in your project, even to broadcast arbitrary video or recording from a webcam. There is also jQuery Notify Better with similar but less extensive functionality.
Today, we are able to animate elements beautifully and easily in various ways on 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 up. The syntax is quite simple:
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.
"Arbitrary CSS preprocessor for Node.js and browsers." Until I had time to thoroughly test it. But in general, it looks like a quality mix 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.
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 the promotional video. And this is all done in Samara, Studio CloudCastleRespect for the quality and sense of taste .
"30-second Slideshows for Hackers".
And in the end we will get this presentation.
Maybe someone did not see Shade.less / Shade.css .
Recently, I was looking for a tool similar to Kuler to define Flat colors and found only this palette (I will be grateful for the link to the required service in the comments).
Interesting CSS quirks: Client-side full-text search in CSS , Mona Lisa on pure CSS ( image2css ) and Cartman .
Thank you all for your attention.
Next Collection (Release 4) Previous Collection (Release 2)
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. Syncs with Dropbox and Google Drive, so it can be used on all smartphones. And the most pleasant thing is that for this service there is a functional and simple API.
')
Munee
Multifunctional PHP5.3 library, which is an excellent solution for project optimization. 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 intelligently cache resources, both on the server side and on the client side. Github Project
Brunch
First-class project collector on Node.js. From the point of view of optimization, it is similar to Munee (I wrote about PHP before, because the elders have to give in, and in general such conveniences appear “not often” on it ). Otherwise, a huge variety of different build settings for: Boilerplate, Bootstrap, Skeleton, Angular.js, Backbone.js, Jade, Phonegap and so on.
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 sorts of ways to display favicon in your project, even to broadcast arbitrary video or recording from a webcam. There is also jQuery Notify Better with similar but less extensive functionality.
Animo.js
Today, we are able to animate elements beautifully and easily in various ways on 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 up. 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
"Arbitrary CSS preprocessor for Node.js and browsers." Until I had time to thoroughly test it. But in general, it looks like a quality mix 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 the promotional video. And this is all done in Samara, Studio CloudCastle
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 will get this presentation.
Finally:
Maybe someone did not see Shade.less / Shade.css .
Recently, I was looking for a tool similar to Kuler to define Flat colors and found only this palette (I will be grateful for the link to the required service in the comments).
Interesting CSS quirks: Client-side full-text search in CSS , Mona Lisa on pure CSS ( image2css ) and Cartman .
Thank you all for your attention.
Next Collection (Release 4) Previous Collection (Release 2)
Source: https://habr.com/ru/post/193716/
All Articles