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

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

    Webflow



    С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

    Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

    Parallax.js


    Функциональный и простой инструмент для создания параллакс эффекта.


    Для всех элементов на которых будет применяться эффект указываем класс layer и устанавливаем значение скорости движения в аттрибуте data-depth. В библиотеке есть ряд параметров:
    <ul id="scene"
      data-calibrate-x="false" // Отключает калибровку по горизонтали
      data-calibrate-y="true"  
      data-invert-x="false"     
      data-invert-y="true"  // Устанавливает инверсию по вертикали
      data-limit-x="false"
      data-limit-y="10" // Устанавливает ограничение в 10 циклов для движения
      data-scalar-x="2"
      data-scalar-y="8" // Устанавливаем чувствительность движения
      data-friction-x="0.2"
      data-friction-y="0.8"> // Как я поннимаю это хаотичность движения элементов
      <li class="layer" data-depth="0.00"><img src=""></li>
      <li class="layer" data-depth="0.20"><img src=""></li>
      <li class="layer" data-depth="0.40"><img src=""></li>
      <li class="layer" data-depth="0.60"><img src=""></li>
      <li class="layer" data-depth="0.80"><img src=""></li>
      <li class="layer" data-depth="1.00"><img src=""></li>
    </ul>
    

    После чего передаем родительский элемент в Parallax конструктор:
    var scene = document.getElementById('scene');
    var parallax = new Parallax(scene);
    


    Intention.js


    Небольшая, но полезная библиотека, которая упрощает процесс разработки именно адаптивного, а не отзывчивого дизайна. Все очень просто. Принцип работы наглядно иллюстрируется на следующем изображении.


    Device.js

    Cкрипт по принципу Modernizr присваивает тегу HTML классы ios/android/windows/blackberry phone/tablet landscape/portrait, тем самым избавляет Вас от необходимости прописывать основные разрешения устройств в media queries.

    Говоря о «кроссдевайсности» хочется также упомянуть про Risizer — Bookmark для для тестирования отзывчивого дизайна. Все мы знаем про множество подобных сервисов, но мне кажется, этот способ самый удобный.

    GistBox



    GistBox синхронизируется с вашим GitHub профилем и в нужном виде отображает Gist лист. Все ваши сниппеты отсортированы по меткам и всегда под рукой. Доступен как расширение для Chrome.

    CSS Modal


    Начну с того, что проект создан одним из членов команды Boilerplate. CSS Modal — самый простой способ добавить в своей проект адаптивное модальное окно:

     <section class="semantic-content" id="modal-text" tabindex="-1"
                role="dialog" aria-labelledby="modal-label" aria-hidden="true">
    
            <div class="modal-inner">
                <header id="modal-label"><!-- Header --></header>
                <div class="modal-content"><!-- The modals content --></div>
                <footer><!-- Footer --></footer>
            </div>
    
            <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
                data-dismiss="modal">×</a>
        </section>
    


    И нужно всего лишь подключить сам скрипт перед закрывающим тегом body, после чего данная разметка станет модальным окном.

    Dotdotdot.js, Uikit, HTML2PDF


    Недавно мне понадобилось сокращать абзацы многоточием. Но стандартный text-overflow работает только на одной строке с no-wrap. И на просторах интернета мне повстречался замечательный скрипт (dotdotdot.js), который отлично решает эту задачу.

    Uikit — плюс один к существующим веб фреймворкам со своими особенностями.

    HTML2PDF. Сервис написан на основе Phantom.js. Возможно, пригодится для оформления портфолио в .pdf.

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

                                 Следующая подборка (Выпуск 3)      Предыдущая подборка (Выпуск 1)

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

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

    • 86.9%Да1267
    • 13.1%Нет191
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 27

      –19
      Я бы на вашем месте еще бы подкопил подобных сервисов, и уже потом написал бы пост о них(а вот то, что дали небольшой хинт к некоторым, это круто). А так, конечно, и на этом спасибо.
        +7
        Зачем их много-то? Вы в состоянии освоить за день десяток таких инструментов, если еще и работать надо? Ну тады респект вам, конечно.
          +1
          На самом деле я не пишу для того чтобы написать. Все что тут — было у меня в закладках. Что-то похожее я отсортировал и выбрал нужное. Но я не могу судить строго по себе и выложил то, что считаю интересным и полезным за последнее время. Будет здорово, если буду полезным.
            0
            Вот ещё: froont.com и macaw.co
              0
              Подборка хорошая и как раз подходящего размера для одного раза.
              0
              Чтобы положить в «кэш» в голове и, если вдруг понадобится сделать, допустим, параллакс-эффект, вспомнить: «о! я же видел клевый инструмент для параллаксов на хабре!».
              +1
              Если вам не хватает инфы в пределах одного поста, добро пожаловать в наши еженедельные дайджесты :)
              –6
              Очень советую добавить туда koding.com :)
                +14
                параллаксовое демо — офигительно!..
                  +15
                  Дабы не искать остальным: wagerfield.github.com/parallax/ ;-)
                    +1
                    Лига лени благодарит тебя ;)
                    +1
                    но у меня жёстко тормозит =( Intel Atom N450 1.66GHz, 2GB RAM. Chrome Версия 22.0.1229.94. Ubuntu 13.04. Задержка отрисовки кадров примерно секунда!
                      0
                      Да, у меня та же проблема, хоть и железо немного мощнее, стоит Ubuntu 13.04, Chromium 28.0.1500.71
                        +2
                        Не расстраивайтесь, на моем i5-3 тоже фпс меньше 10
                          0
                          У меня в FF тоже жутко тормозит и это странно, потому что в хроме и ИЕ10 летает. Core-i7, 16gb RAM, Win7, FF 23.0.1, chrome 29.0.1547.57 m
                            +1
                            я удивлен как на вашем железе вобще что-то может тормозить)))
                            0
                            Плагин позиционируется как вариант для мобильных устройств: открывала с планшета (Android 4.2.2, 1.6GHz Quad-core, 2Gb RAM ) и телефона (Android 4.1 — Cyanogenmod, 600 MHz, 256 mb RAM) — лагает, что характерно, в обоих случаях. Обещанного смещения по гироскопу не наблюдается ни там, ни там…
                              0
                              А у меня на телефоне (Android 4.1.2, 1400 МГц, 4х-ядерный, 1Gb RAM) нормально, все четко и гироскоп работает, круто! :)
                            +1
                            И жутко лагающее
                              0
                              Очень круто выглядит с планшета. Повилял планшетиком и такой «Уиии на волнах поплавал»:)

                              И вообще никапельки не лагает, разве что первую секунду пока все загружалось.
                              P.S. Смотрел с айпада мини
                              0
                              До чего полезные вещи! Спасибо.
                                +1
                                Спасибо за GistBox. Еще есть аналог Webflow — froont.com/ тоже очень интересный
                                  +2
                                  Uikit — это что-то. Затеял переход с jQuery UI на Twitter Bootstrap, но с самого начала смущало отсутствие пространства имен и местами слишком сложная верстка + отсутствие обработчиков некоторых вполне элементарных событий, а это по-моему как раз то, что нужно. Придется то, что сейчас являет полу рабочую смесь jQuery UI и Twitter Bootstrap переводить на этот фреймворк, уж очень хорошее производит впечатление.
                                  Спасибо вам за упоминание!
                                    +3
                                    Как то странно верстать кроссбраузерный макет, но делать это надо только в определённом браузере.
                                    Firefox 23.0.1 чем не современен?

                                      –13
                                      Тебе не все ли равно? Я вот сайт группе заделал.
                                        +6
                                        Молодец.
                                      +2
                                      Огромное человеческое Спасибо за Webflow!

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