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

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

    BrowserSync



    Я считаю это лучшим Live Reload инструментом. BrowserSync — это: конечно же перезагрузка страницы после изменения исходных файлов в том числе и серверных (PHP, ASP, Rails и др); синхронизация с десктопами, планшетами и смартфонами; синхронизирует между браузерами скроллинг, данные в формах и множество других действий; существует как Grunt и Gulp плагин; доступен на Windows, Linux, MacOS.

    npm install -g browser-sync
    

    
    // Using a an IP based host
    browser-sync --proxy "192.167.3.2:8001" --files "app/css/*.css"
    
    


    Imacss


    Очень полезная вещь, с помощью которой одним простым действием можно перевести все изображения в вашем проекте в Data URI с заменой в CSS:
    npm install -g imacss
    

    $ imacss "~/projects/webapp/images/*.{svg,png}" images.css
    

    или так:
    var imacss = require('imacss');
    
    imacss
        .transform('/path/to/your/images/*.png')
        .on('error', function (err) {
            error('Transforming images failed: ' + err);
        })
        .pipe(process.stdout);
    


    simpleCart.js



    Элегантное решение для создания корзины в интернет магазине. Богатый функционал и гибкая настройка, о чем рассказа хватит на целую статью. Есть только один большой минус — поддержка только западных платежных систем от PayPal, Amazon и Google. Проекту необходима парочка фирменных пул реквестов от хабравчан.

    RAD.js



    Основная цель RAD — избавить девелопера от мобильной рутины. Это не очередной UI фреймверк, он нисколько не накладывает ограничение на фантазии дизайнеров. Это полезный набор решений для постоянно возникающих системных задач и мобильных хаков. Принцип работы транзишена между скринами в SPA: в момент когда пользователь хочет уйти со страницы, она детачится от основной ветви и ссылка на бранч сохраняется в JS. За счет этого в следующий раз нет необходимости перерендеривать эту страницу и привязывать события, нужно просто заменить ноду в DOM ответственную за видимую страницу. Небольшая задержка получается только при первом показе страницы.

    Fontprep



    Замечательное Mac приложение с открытым исходных кодом в помощь для создания иконочного шрифта.
    Видео с демонстрацией работы



    Напоследок:




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

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

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

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

    Поддержать автора
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 16

      0
      PHP Live Regexp — нету ссылки?
      0
      > Mongoose — одна из лучших (если не лучшая) ORM для MongoDB в Node.JS

      А в чём отличие от github.com/mongodb/node-mongodb-native? Они оба официально поддерживаются, api, как мне показалось, почти одинаково.
        +1
        Mongoose — ORM, которая использует драйвер node-mongodb-native.
        +2
        Спасибо за наводку на BrowserSync.
          0
          У кого-нибудь удалось заставить правильно работать Browser-Sync с Symfony2 проектом? Ломаются пути к assets, когда запускается проект по определенному IP и порту:

          http://192.168.1.6:3002/bundles/192.168.1.6:3002core/css/jquery-ui-1.10.4.custom.min.css
          
            +2
            После порта, наверное, "/" нужен.
          0
          Fontprep — это же прекрасная замена fontsquirrel
            +1
            Браузерный клон дико популярной по непонятным причинам в последнее время игры Flappy Bird

            Играть невозможно, физика ужасная.

            Учавствовал в хакатоне недавно. Тоже задачей стояла разработка клона. Было реализовано на Phaser, вот результат. Могу написать пост о процессе разработки — разбор Phaser.State'ов, импорт спрайтовых анимаций, как делать меню и т.п.

            P.S. Использую Clay в качестве Leaderboard и бывает подтормаживает. Сейчас играбельно все.
              0
              Да, у вас физика лушче. А пост лично мне было бы интересно почитать
                –1
                В фуллскрине в Firefox 27 @1920x1200 FPS на глаз не превышает 10-15… В чем может быть проблема? Смешно же, когда такая примитивная игра тормозит в 2014 году.
                  0
                  1) Рендерер — используется только Canvas. Была возможность использовать WebGL, но на некоторых браузерах не работало.
                  2) Физический движок, который с Phaser идет. Пересчет столкновения происходит 60 раз\сек (по крайней мере пытается :)

                  Попробуйте его в малом окне открыть. Думаю все будет нормально. А вопрос по перфомансу Canvas-игр на великих разрешениях до сих пор открыт.
                  +1
                  Теперь я понимаю, почему она такая сложная была по мнению некоторых
                  image
                    0
                    Зависла при столкновении и больше никак нереагировала
                      0
                      Хабраэффект в действии. При столкновении идет запрос на Clay, взять таблицу рекордов. Бывает clay не отдает результат.

                      P.S. Времени давалось только 2 дня, поэтому много недочетов.
                    0
                    Поддерживаю. Тоже бы с интересом почитал пост.

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое