Pull to refresh

Несколько интересностей и полезностей для веб-разработчика (выпуск 3)

Website development *CSS *JavaScript *
Доброго времени суток, уважаемые хабравчане. С прошедшим вас днем программиста. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Cloudconvert




Великолепный онлайн конвертер файлов, который поддерживает в общей сложности 140 форматов следующих типов: archive, audio, cad, document, ebook, image, presentation, spreadsheet, video. Синхронизируется с Dropbox и Google Drive, благодаря чему возможно использование на всех смартфонах. А самое приятное это то, что для данного сервиса существует функциональное и простое API.


Munee



Многофункциональная PHP5.3 библиотека, которая является отличным решением для оптимизации проекта. С ее помощью вы можете на лету компилировать LESS, SCSS и CofeeScript файлы, изменять размеры изображений и обрезать их, минифицировать CSS и JS, объединять их в один запрос. Также Munee дает возможность грамотно кэшировать ресурсы, как на стороне сервера, так и на стороне клиента. Проект на Github

Brunch


Первоклассный сборщик проектов на Node.js. С точки зрения оптимизации аналогичен Munee (про PHP написал раньше, потому что старшим надо уступать, и вообще подобные удобства на нем появляются «не часто»). В остальном огромное множество различных настроек сборки для: Boilerplate, Bootstrap, Skeleton, Angular.js, Backbone.js, Jade, Phonegap и тд.

Favico.js


Маленькая, практически незаметная фавиконка, может быть очень полезным элементом в грамотном интерфейсе. Данный скрипт позволяет с легкостью манипулировать всевозможными способами отображения favicon в вашем проекте, даже транслировать произвольное видео или запись с веб-камеры. Также существует jQuery Notify Better с похожим, но менее широким функционалом.

Animo.js


На сегодняшний день, мы имеем возможность красиво и легко анимировать элементы различными способами на CSS с помощью Effeckt.css или Animate.css. Animo.js — это маленькая библиотека (7кб), которая позволяет манипулировать CSS анимациями (animate+animo.css) и добавляет кроссбраузерный Blur эффект. Работает с jQuery 2 и старше. Синтаксис весьма прост:
$('#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


Если вы не используете CSS фреймворки (Bootstrap, Foundation, UIkit и др), то рекомендую Gridism, как самый простой и миниатюрный способ для создания отзывчивой сетки.

Rework


«Произвольный CSS препроцессор для Node.js и браузеров». Пока не успел хорошенько распробовать его. Но в целом это похоже на качественную смесь LESS, SCSS и Stylus, потому что здесь есть JavaScript с нормальными функциями, встроенный Compass, свобода от префексов, различные «тонкие» моменты, как прозрачные миксины или встроенные полифилы .at2x([vendors]) для retina дисплеев.

Basiliq



Базилик — это PSD файл, содержащий в себе огромное количество UI элементов для создания десктопных и мобильных интерфейсов. Лично мне очень сильно понравился стиль «Freehand» (ручная работа) и еще больше он понравится после просмотра промо ролика. А сделано это все в Самаре, студии 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!

И в итоге мы получим вот такую презентацию

Напоследок:


Возможно кто-то не увидел Shade.less/Shade.css.
Недавно я искал инструмент похожий на Kuler для определения Flat цветов и нашел только эту палитру (буду благодарен ссылке на необходимый сервис в комментариях).
Занимательные CSS диковинки: Client-side full-text search in CSS, Мона Лиза на чистом CSS(image2css) и Картман.

Спасибо всем за внимание.

                             Следующая подборка (Выпуск 4)      Предыдущая подборка (Выпуск 2)
Only registered users can participate in poll. Log in, please.
Какой CSS препроцессор вы используете?
24.1% LESS 469
16.86% SCSS/SASS 328
2.88% Stylus 56
0.26% Rework 5
55.91% Не использую 1088
1946 users voted. 399 users abstained.
Only registered users can participate in poll. Log in, please.
Понравилась ли вам подборка?
84.42% Да 1311
15.58% Нет 242
1553 users voted. 384 users abstained.
Tags:
Hubs:
Total votes 145: ↑134 and ↓11 +123
Views 60K
Comments 29
Comments Comments 29