Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.
Flat UI Free 2.1
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.
Framer
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template.
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/8e4/c63/a02/8e4c63a0293e8c2ad52a93d1a3f99131.jpg)
Буквально на днях появилось одно очень удобное расширение для Photoshop — Blendme.in. Благодаря ему все самые популярные наборы иконок будут доступны прямо в окне фотошопа. Графический файлы распространяются под лицензией Creative Commons Attribution 3.0 Unported License.
Версия для Photoshop CC Версия для Photoshop CS6
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/c1d/f69/a8f/c1df69a8ff9c63b000d18f2d92a8a875.jpg)
С помощью Editr вы сможете организовать на своем сервере playground для работы с HTML, CSS, JavaScript. Качественный и красивый проект: основан на ACE Editor, поддержка Emmet, Base64, LESS и CofeeScript, валидация JS и CSS, множество тем.
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/409/d50/dd0/409d50dd0d8f88fed6a2946dd89147e3.jpg)
Юзабельный jQuery плагин для создания адаптивного меню. Очень красивая демо страничка не оставит вас равнодушными к этому скриптусмайл. Также существует похожий, возможно, даже более функциональный скрипт на нативном JS — Responsive-nav
Выше я уже рассказывал про инструмент для «интерактивного прототипирования». Composite — это нечто похоже: На данный момент это приложение для только iOS, которое удаленно подключается к фотошопу и позволяет создавать дизайнерам интерактивные прототипы. Еще одно отличие это то, что он платный возможно и более стабильный.
«Brace is the new way to host websites». На самом деле это интересный способ хостить простые сайты. Можно даже что-нибудь сделать с CMS основанных на XML. Но пока это лишь «интересность» и, возможно, для кого-нибудь удобный сервис для демонстрации верстки клиентам.
Большое спасибо всем за внимание.
Следующая подборка (Выпуск 5) Предыдущая подборка (Выпуск 3)
![](https://habrastorage.org/getpro/habr/post_images/c1d/65c/c90/c1d65cc901f04a55276dff62649a7674.jpg)
![image](https://habrastorage.org/getpro/habr/post_images/7ff/a2f/a68/7ffa2fa6840a740707420bf62277c4c5.jpg)
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.
![](https://habrastorage.org/getpro/habr/post_images/9e9/c33/d42/9e9c33d42bd0471eccb4f9caa5e1ad66.jpg)
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template.
Blendme.in
![](https://habrastorage.org/getpro/habr/post_images/8e4/c63/a02/8e4c63a0293e8c2ad52a93d1a3f99131.jpg)
Буквально на днях появилось одно очень удобное расширение для Photoshop — Blendme.in. Благодаря ему все самые популярные наборы иконок будут доступны прямо в окне фотошопа. Графический файлы распространяются под лицензией Creative Commons Attribution 3.0 Unported License.
Версия для Photoshop CC Версия для Photoshop CS6
Editr.js
![](https://habrastorage.org/getpro/habr/post_images/c1d/f69/a8f/c1df69a8ff9c63b000d18f2d92a8a875.jpg)
С помощью Editr вы сможете организовать на своем сервере playground для работы с HTML, CSS, JavaScript. Качественный и красивый проект: основан на ACE Editor, поддержка Emmet, Base64, LESS и CofeeScript, валидация JS и CSS, множество тем.
Responsive Elements
Простой и в тоже время очень юзабельный плагин на 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
![](https://habrastorage.org/getpro/habr/post_images/409/d50/dd0/409d50dd0d8f88fed6a2946dd89147e3.jpg)
Юзабельный jQuery плагин для создания адаптивного меню. Очень красивая демо страничка не оставит вас равнодушными к этому скрипту
Composite
Выше я уже рассказывал про инструмент для «интерактивного прототипирования». Composite — это нечто похоже: На данный момент это приложение для только iOS, которое удаленно подключается к фотошопу и позволяет создавать дизайнерам интерактивные прототипы. Еще одно отличие это то, что он платный возможно и более стабильный.
Brace
«Brace is the new way to host websites». На самом деле это интересный способ хостить простые сайты. Можно даже что-нибудь сделать с CMS основанных на XML. Но пока это лишь «интересность» и, возможно, для кого-нибудь удобный сервис для демонстрации верстки клиентам.
Напоследок:
- Polymer — очень амбициозный проект. Это новый тип библиотеки для веба, основанной на веб-компонентах, которая предназначена для функционирования последних элементов веб-платформы на современных браузерах. Грубо говоря, это огромной набор полифилов для создания поддержки последних стандартов и кроссбраузерности в браузерах.
- Fireshell — я бы сказал что это более полноценный Boilerplate c Grunt, SCSS/SASS и прочим, чем существующий H5BP
- Возможно кто-то не увидел мой пост про SVG.js
- Browserswarm — это как Browserstack, но для тестирования JS
- CLNDR.js — один из самых качественный и функциональных календарей на JS.
- Два свежеиспеченных красивых шрифта: Fira от Mozilla для FirefoxOS (GitHub) и The Exo, который появился благодаря Kickstarter
- Simperium — realtime сервис, хороший конкурент для Pusher. Более кроссплатформенный и менее дорогой. Разработан в Automattic (Wordpress, Gravatar и др.)
- Learnyounode — еще одна обучалка для Node.js, но консольная.
Большое спасибо всем за внимание.
Следующая подборка (Выпуск 5) Предыдущая подборка (Выпуск 3)
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Понравилась ли Вам подборка?
88.34% Да788
11.66% Нет104
Проголосовали 892 пользователя. Воздержались 140 пользователей.