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

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

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

    imageFlat 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.

    Blendme.in


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

                                              Версия для Photoshop CC     Версия для Photoshop CS6

    Editr.js


    С помощью 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


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

    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)

    Only registered users can participate in poll. Log in, please.

    Понравилась ли Вам подборка?

    • 88.3%Да788
    • 11.7%Нет104
    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 15

      +1
      Спасибо за ссылку на polymer!
        +1
        Polymer — очень интересно
          0
          Wec Components — это интересно, как бы только они не изобрели еще один XAML (лучше меньше, да лучше), сильно много там всего лишнего накручено.
          0
          Очень интересная подборка! Да! Спасибо автору. Мне как раз нужен был loader.
          Скажите а можно вам подкидывать идеи для поиска? Таким образом вы будете находить самую лучшую реализацию идеи, и всем ей рассказывать?
            0
            Спасибо, приятно быть полезным. Идеи для поиска… Не знаю, давайте попробуем. В принципе затея хорошая, но главное чтобы их не было очень много, а то меня не хватит.
            0
            Понравился jq-плагин Responsive Elements, простота и чистота описания стилей в таком случае. Возможно ли добиться того же эффекта при помощи less/scss?
              0
              Мне кажется, что не стоит перекладывать это на стили. В любом случае, пользователям будет отдаваться css, а не, например, less с его клиентским компилингом.

              А если имеется ввиду просто описание стилей — то да, конечно можно. Я, например, все собираюсь переписать стили для bx-slider'a, так как они в плане оформления не очень и не работают с моими настройками цветов/отступов, которые я задаю в less-шаблоне.
                0
                Спешу вас обрадовать — лесс вполне компилируется на серверной стороне.

                Раз можно, то как?
                  0
                  А в чем конкретно возникают трудности?
                  В одном проекте я делал два инлайн-блока.
                  У родителя white-space:nowrap; overflow: hidden; width: 100%;
                  У дочернего блока меню margin-left: -Aem; width: Aem; transitions: all;
                  Может я чего-то забыл еще.
              +1
              Почему-то новости о «трендовых плоских дизайнах», типа Bootstrap 3 в дефолтной теме,
              меня наводят на мысли о цикличности истории. Видимо, тренд нас постепенно ведёт
              к чему-то в этом роде.
                0
                Спасибо за pace.js. Вот только что искал что-то подобное, нашёл только NProgress.
                  0
                  Хм, заметил интересную штуку в Pace.js. Там внизу есть демки, над демками кнопка Choose your color. Вот если кликнуть то открывается системный Color Picker. Как?
                    0
                    Легко. Читайте про Chrome. Есть и Datapicker встроенный в нем
                    0
                    Brace.io гениально! Особенно для маленьких приложений. Например Q&A, для какого нибудь мобильного приложения. Жаль только домен нельзя свой навесить
                      0
                      Можно
                      Is there support custom domains?
                      Yes!

                    Only users with full accounts can post comments. Log in, please.