Несколько интересностей и полезностей для веб-разработчика #17

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

    Intercooler.js


    Кто нибудь помнит FullAjax — разработку Руслана Синицкого sirus (нынешний основатель Jelastic)? Вкратце это библиотека для работы с AJAX с помощью объявления определенных атрибутов у элементов, а подробнее об этом написано в постах «Прямые ссылки на AJAX веб-сайтах – наша технология Fullajax Direct Link», «Полный AJAX. Теория и Примеры. Фишки и Фичи» и «Fly AJAX — пишите меньше, имейте больше. Нестандартный AJAX и индексация поисковиками». Вернемся к Intercooler, это нечто похожее:

    <div id="targetDiv">Results Div...</div>
    <i id="indicator" style="display:none" class="fa fa-spinner fa-spin">
    <input id="hiddenInput" type="hidden" name="hidden" value="42"/>
    
    <div ic-trigger-on="click" ic-verb="POST" ic-src="/example" ic-include="#hiddenInput" ic-indicator="#indicator" ic-target="#targetDiv" ic-transition="none">
        Click Me!
    </div>
    

    После клика по div, отправляется POST запрос со значением поля с #hiddenInput, а в процессе будет отображаться #indicator. Ответ будет передан в блок #targetDiv. Разве не здорово?


    Flow.js


    Библиотека обеспечивает «множественную синхронную, стабильную, отказоустойчивую и возобновляемую/перезапускаемую» загрузку файлов используя максимум HTML5 File API. Великолепный инструментарий с множеством различных опций и методов.

    var flow = new Flow({
      target:'/api/photo/redeem-upload-token', 
      query:{upload_token:'my_token'}
    });
    // Flow.js isn't supported, fall back on a different method
    if(!flow.support) location.href = '/some-old-crappy-uploader';
    
    flow.assignBrowse(document.getElementById('browseButton'));
    flow.assignDrop(document.getElementById('dropTarget'));
    
    r.on('fileAdded', function(file, event){
        ...
      });
    r.on('fileSuccess', function(file,message){
        ...
      });
    r.on('fileError', function(file, message){
        ...
      });
    


    Parsedown — лучший Markdown парсер на PHP




    FB Flo


    Live Reload решение от разработчиков Facebook. Состоит из двух частей: npm модуля и дополнения для Chrome. Основные преимущества по сравнению с популярными Emmet Livestyle или Live Reload заключаются в реагировании на Node.js файлы, возможность работать в любом редакторе, простая интеграция на сервере с вашей рабочей средой.


    JsAction


    Небольшая библиотека от Google построенная при помощи Closure Compiler для управления событиями. JsAction позволяет разделять DOM узлы в соответствии с обработчиками событий. Не могу лаконично перевезти «JsAction is a tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action.» Суть в том, что вы сначала декларируете обработчики событий, а потом подключаете их к элементам с помощью атрибута jsaction:

    <div id="foo"
         jsaction="leftNav.clickAction;dblclick:leftNav.doubleClickAction">
      some content here
    </div>
    


    var eventContract = new jsaction.EventContract;
    
    // Register the event types we care about.
    eventContract.addEvent('click');
    eventContract.addEvent('dblclick');
    
    var dispatcher = new jsaction.Dispatcher;
    
    eventContract.dispatchTo(goog.bind(dispatcher.dispatch, dispatcher));
    
    //Register individual handlers
    myapp.LeftNav.prototype.doStuff = function(flow) {
      // do stuff
    };
    
    myapp.LeftNav.prototype.registerHandlers = function() {
      dispatcher.registerHandlers(
          'leftNav',                       // the namespace
          this,                            // handler object
          {                                // action map
            'clickAction' : this.doStuff,
            'doubleClickAction' : this.doStuff
          });
    };
    


    AniJS


    Потрясающая библиотека для декларативного описания CSS-анимаций. Послужит вам отличным инструментом при создании лэндингов.
    <div class="demo-square demo1" data-anijs="if: click, do: flipInY, to: .container-box"></div>
    

    If some event(click, scroll, mouseover), On any element (css selector), Do some behavior(Rotate animation), To (any element).

    Поддерживает все самые необходимые события и весь набор анимаций animo.css

    Ampache



    Огромнейший труд и большой подарок opensource PHP сообществу. Ampache — это веб-приложение для аудио и видео стриминга и файл менеджер предоставляющий доступ к вашей медиатеке с любого устройства подключенного к интернету.

    Grunt Email Design


    image
    Из названия уже можно догадаться, что именно делает плагин, но я уточню: компилирует SCSS, переводит все стили в inline, загружает все изображения на CDN (опционально) и отправляет тестовое письмо на указанный адрес.

    Не могу не продублировать в этой подборке новость от хабраюзера emuravjev: «Типограф Муравьёва опубликован на GitHub», пост про замечательную Матрешку.js от Finom и стайлгайд компилятор JSCS от mdevils перед использованием которого, рекомендуется посмотреть видео с мыслями о красивом коде в команде Яндекса.

    Западные мысли или что стоило бы перевести на Хабре:




    Напоследок:


    • Tablesaw — группа плагинов для создания отзывчивых таблиц.
    • October — достаточно популярная CMS на PHP, которая буквально за несколько дней собрала более 1000 старов на GitHub.
    • DOMtastic — крошечная библиотека (3-4кб в gzip) на замену jQuery для всех необходимых операций с DOM.
    • sharp — самый быстрый npm модуль для изменения размеров JPEG, PNG, WebP и TIFF изображений.
    • LoopBack — Node.js фреймворк, который по заявлению создателей вобрал в себя все самое лучшее из Express.
    • Исходный код Atom от GitHub
    • elasticsearch-dump — утилита для импорта и экспорта данных elasticsearchю
    • Minicron — система управления и мониторинга Cron Jobs на Ruby.
    • Depthy — Google Camera's Lens Blur playground, фантастический эффект в вашем браузере!
    • guides — guide for programming in style.
    • Помните GitBook? Дак вот на его основе появилось приложение редактор для Windows, Mac и Linux.
      image
    • Аффиляционная программа Firefox


                                                             Предыдущая подборка (Выпуск 16)

    Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.

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

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

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

    • 90.6%Да580
    • 9.4%Нет60

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 11

      +2
      Огромное спасибо на GitBook editor
        0
        У вас конвертация в PDF заработала?
          0
          Нет, как и публикация в epub. Требует каких-то утилит в PATH. Видимо скоро починят.
            0
            Спасибо, я уж подумал, что у меня какой-то косяк. На винде программка вообще иероглифами общается
        0
        Почему у вас написано, что Ampache это подарок только PHP сообществу? Другие люди не смогут его установить?
        Я так понимаю, на их экране указан стек технологий, который использовался при создании Ampache, среди которых PHP. Это же не значит, что другие не могут пользоваться этой системой.

        Посмотрел «Introduction to JadePHP». Не понимаю, какой смысл освещать на хабре вполне рядовой порт. Если кто-то интересуется Jade, то я советую обратиться к оригинальному референсу по языку. В статье сам Jade весьма слабо раскрыт, а если говорить о порте, то он вполне заурядный. Из отличий указано только, что вставки кода не JS-ные, а PHP-шные; а ещё почему-то нельзя пользоваться индентацией, отличной от двух пробелов (в оригинальном Jade можно).
        В этой статье также используется !!! 5, который давно уже является deprecated. А ещё в примерах неправильная вложенность тегов, либо пробелы поехали, либо косяк автора. Не рекомендую такую статью.
          +2
          Присоединяюсь: огромное спасибо!
            +1
            Огромное количество полезного! спасибо!
              0
              Отличная подборка, спасибо!

              Помните GitBook? Дак вот на его основе появилось приложение редактор для Windows, Mac и Linux.


              Идея замечательная, но продукт ещё немного сыроват. Зашёл в develop, получил:
              Скрытый текст
              Uncaught node.js Error

              Error: Module name «nw.gui» has not been loaded yet for context: _. Use require([])
              requirejs.org/docs/errors.html#notloaded
              at makeError (file:///C:/Users/AppData/Local/Temp/nw1308_150/build/static/application.js:164:17)
              at Object.localRequire [as require] (file:///C:/Users/AppData/Local/Temp/nw1308_150/build/static/application.js:1389:44)
              at requirejs (file:///C:/Users/AppData/Local/Temp/nw1308_150/build/static/application.js:1723:24)
              at eval (eval at undefined, :1:1)

                0
                FB Flo

                У него какая то бредовая картинка получается. У Life Reloade выходит нет редактирования css и изображений без перезагрузки страницы? Но оно там есть насколько я помню, страница обновляется только на правки js кода и самой стрницы.
                  0
                  Есть ещё BrowserSync который умеет синхронное отображение страницы одновременно в разных браузерах и на разных девайсах в пределах одной подсети (поднимает веб-сервер и отрывает сразу в дефолтном браузере с текущим IP, поэтому ничего не надо проверять), синхронно скролить и заполнять формы. Вобщем на видео всё понятно.

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