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

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

^[1]Pace.js ^[1] — это самый простой способ (документация здесь ^[2]) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex ^[3] и Messenger ^[4] — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

^[5]Flat UI Free 2.1 ^[5]
Популярный информационный ресурс Designmodo опубликовал на GitHub ^[6] обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал ^[7] читатель ilya42 ^[8]. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

^[9]Framer ^[9]
Потрясающее изобретение разработчика Koen Bok ^[10]. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). ^[11] PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer ^[12], хочется также упомянуть про его проект Cactus ^[13] — генератор статистических сайтов на Python использующий Django template.

Blendme.in ^[14]

^[14]
Буквально на днях появилось одно очень удобное расширение для Photoshop — Blendme.in. Благодаря ему все самые популярные наборы иконок будут доступны прямо в окне фотошопа. Графический файлы распространяются под лицензией Creative Commons Attribution 3.0 Unported License.

                                          Версия для Photoshop CC ^[15]     Версия для Photoshop CS6 ^[16]

Editr.js ^[17]

^[17]
С помощью Editr вы сможете организовать на своем сервере playground для работы с HTML, CSS, JavaScript. Качественный и красивый проект: основан на ACE Editor, поддержка Emmet, Base64, LESS и CofeeScript, валидация JS и CSS, множество тем.

Responsive Elements ^[18]

Простой и в тоже время очень юзабельный плагин на jQuery. Для того чтобы сделать элемент отзывчивым добавляем к нему аттрибут data-respond и прописываем в CSS классы .gt и .lt с соответствующими размерами по анологии с min-width и max-width в media-queries:

.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red} /* min-width: 150, max-width: 300 */

Trunk.js ^[19]

^[19]
Юзабельный jQuery плагин для создания адаптивного меню. Очень красивая демо страничка не оставит вас равнодушными к этому скрипту смайл. Также существуем похожий, возможно, даже более функциональный скрипт на нативном JS — Responsive-nav ^[20]

Composite ^[21]

Выше я уже рассказывал про инструмент для «интерактивного прототипирования». Composite — это нечто похоже: На данный момент это приложение для только iOS, которое удаленно подключается ^[22] к фотошопу и позволяет создавать дизайнерам интерактивные прототипы. Еще одно отличие это то, что он платный возможно и более стабильный.

Brace ^[23]

«Brace is the new way to host websites». На самом деле это интересный способ хостить простые сайты. Можно даже что-нибудь сделать с CMS основанных на XML. Но пока это лишь «интересность» и, возможно, для кого-нибудь удобный сервис для демонстрации верстки клиентам.

Напоследок:

• Polymer ^[24] — очень амбициозный проект. Это новый тип библиотеки для веба, основанной на веб-компонентах ^[25], которая предназначена для функционирования последних элементов веб-платформы ^[26] на современных браузерах. Грубо говоря, это огромной набор полифилов для создания поддержки последних стандартов и кроссбраузерности в браузерах.
• Fireshell ^[27] — я бы сказал что это более полноценный Boilerplate c Grunt, SCSS/SASS и прочим, чем существующий H5BP
• Возможно кто-то не увидел мой пост про SVG.js ^[28]
• CLNDR.js ^[29] — один из самых качественный и функциональных календарей на JS.
• Два свежеиспеченных красивых шрифта: Fira от Mozilla для FirefoxOS ^[30] (GitHub ^[31]) и The Exo ^[32], который появился благодаря Kickstarter
• Simperium ^[33] — realtime сервис, хороший конкурент для Pusher ^[34]. Более кроссплатформенный и менее дорогой. Разработан в Automattic (WordPress, Gravatar и др.)
• Learnyounode ^[35] — еще одна обучалка для Node.js, но консольная.

Большое спасибо всем за внимание.

                                                          Предыдущая подборка (Выпуск 3) ^[36]

Автор: ilusha_sergeevich

Источник ^[37]