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

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

    image
    Летом 2013 года издательство The Guardian обновило свой сайт, согласно всем современным трендам/нормам/правилам. Но самым главным событием является то, что разработчики выложили весь фронтенд сайта в открытый доступ на GitHub. Свыше 1500 старов, 10 000 коммитов и 100 веток. Там целый джентельменский набор. Для многих это будет кладезь знаний.

    imageCenny.js — plug 'n play бэкенд для веб-приложений. Быстрый, защищенный, расширяемый.
    var server = new Cenny();
    server.set({data: [1,2,3]});
    server.get(function(data){ 
       console.log(data); 
    });
    


    imageМаленький скрипт от Filament Group (один из первых спонсоров jQuery). Overthrow.js это полифил для отзывчивого дизайна, который стабилизирует работу стандартного скроллинга контента HTML элементов (overflow: auto/scroll) на тач устройствах. Для тех, кто не совсем понял о чем речь, сравните на вашем гаджете работу обычного скроллинга и действие Overthrow.


    TinyPNG Developer API


    Многие уже знакомы с данным оптимизатором изображений. Но не все знают, что недавно разработчики открыли публичный API. TinyPNG проигрывает таким проектам как Kraken.io или JPEGmini, но тем не менее алгоритмы сжатия работают на достойном уровне. Но главное — бесплатный тарифный план на 500 изображений в месяц, в том время как конкуренты предоставляют только платные услуги. А еще существует grunt-tinypng плагин.

    Gitter


    image
    От авторов проекта: «A bit like IRC only smarter». На самом деле это намного больше чем просто чат. Сервис синхронизируется с GitHub и дает возможность продвинутого общения в рамках проектов, определяет коммиты и «понимает код». Помимо веб-интерфейса доступен как приложение для Mac. В ближайшем будущем разработчики обещают версии для iOS и Android.

    Echo.js


    Вероятно, лучший скрипт для реализации lazy-loading, не нуждающийся в дополнительный библиотеках:
      <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
      
      <script>
      Echo.init({
        offset: 100,
        throttle: 250
      });
      // Echo.render(); is also available for non-scroll callbacks
      </script>
    


    Imager.js


    Пожалуй, лучший скрипт для создания отзывчивых изображений от BBC News, пока все ждем picture и srcset:
    <div style="width: 240px">
        <div class="delayed-image-load" data-src="http://example.com/assets/{width}/imgr{pixel_ratio}.png" data-alt="alternative text"></div>
    </div>
    
    <script>
        new Imager({ availableWidths: [200, 260, 320, 600] });
    </script>
    


    Textillate.js


    Данный jQuery плагин дает возможность с легкостью анимировать текст множеством впечатляющих способов, описанных в animate.css.
    $('.tlt').textillate({
      // the default selector to use when detecting multiple texts to animate
      selector: '.texts',
    
      // enable looping
      loop: false,
    
      // sets the minimum display time for each text before it is replaced
      minDisplayTime: 2000,
    
      // sets the initial delay before starting the animation
      // (note that depending on the in effect you may need to manually apply 
      // visibility: hidden to the element before running this plugin)
      initialDelay: 0,
    
      // set whether or not to automatically start animating
      autoStart: true,
    
      // custom set of 'in' effects. This effects whether or not the 
      // character is shown/hidden before or after an animation  
      inEffects: [],
    
      // custom set of 'out' effects
      outEffects: [ 'hinge' ],
    
      // in animation settings
      in: {
        // set the effect name
        effect: 'fadeInLeftBig',
    
        // set the delay factor applied to each consecutive character
        delayScale: 1.5,
    
        // set the delay between each character
        delay: 50,
    
        // set to true to animate all the characters at the same time
        sync: false,
    
        // randomize the character sequence 
        // (note that shuffle doesn't make sense with sync = true)
        shuffle: false,
    
        // reverse the character sequence 
        // (note that reverse doesn't make sense with sync = true)
        reverse: false,
    
        // callback that executes once the animation has finished
        callback: function () {}
      },
    
      // out animation settings.
      out: {
        effect: 'hinge',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
        reverse: false,
        callback: function () {}
      },
    
      // callback that executes once textillate has finished 
      callback: function () {}
    });
    


    Напоследок:


    • Spacegray — красивая плоская тема для Sublime.
      image
    • Feathers.js — REST и real-time APIs.
    • Awesome-php — большой и качественно подобранный список инструментов для PHP.
    • Vim.js — эмулятор Vim на JavaScript.
    • Stringy — очень функциональная PHP библиотека для работы со строками.
    • LaTeX2HTML5 — название говорит само за себя.
    • Knwl.js — находит в тексте даты, время, email'ы, ссылки, адреса и смайлы.
    • Flaticon — самая огромная база бесплатных плоских векторных иконок.
    • Flysystem — работаем с локальным и удаленными файлами (FTP, AWS, Dropbox и др.) на PHP.
    • jQuery Nested — multi column grid layout
    • Ввиду популярности email маркетинга, генерируем «кросспочтовоклиентные» кнопки и фоновые изображения.


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

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

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

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

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

    • 88.0%Да691
    • 12.0%Нет94
    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 23

      +2
      Тема для саблайма знатная, глазам нравится.
        0
        Я тоже на картинку повелся. Поставил, часть элементов сливается (например при поиске по проекту — на маке если что).
          0
          Да, минус в этом. Вкладки вообще не различаются.
            +1
            Попробуйте itg.flat. Очень качественно сделана
          0
          http://netcribe.brace.io/ — не открывается.
            0
            Я делал сервис типа Brace (ничего о подобном не знал, подход отличается, идея таже), но бросил, т.к. перестал видеть в этом смысл. Может не стоило бросать?
              0
              Я думаю не стоило. Если говорить об $1 в месяц, то это удобство стоит того. И! Скажу по себе и своим знакомым, мы патриотическая нация. И если я (и мои знакомые) увидим подобный сервис на Я.диск — мы будем на нем. $1 — $2 в месяц за привязку домена и удобнейший хостиг — это супер
                0
                Блин, надо всё-таки доделать прототип и показать. Я почти год назад рассказывал знакомым об этой идее, но никто не оценил или не понял.
                  0
                  1 бакс ещё да, а вот за 2 бакса уже есть куча хостингов.
                    0
                    Я не планировал брать деньги за хостинг или привязку домена. Была только идея брать деньги за дополнительные модули, например корзина и личного кабинета для магазинов (всмысле функционал, который не всем нужен, нагружает сервер и нуждается в тех. поддержке с моей стороны).
                      0
                      Ага, понял. Так SaaS-сервисы и вырастают :)
                  0
                  Простите, а можете вкратце поведать здесь или в личке, чем так хорош, кроме платности, этот Brace?
                    0
                    Под спойлером видео есть, там довольно хорошо все расписано. Я начал писать, что даёт такой сервис… но это почти полностью дублирует видео.
                  0
                  Насчёт Spacegray — есть аналогичная Флатландия, с квадратными вкладками выглядит просто прекрасно.
                    0
                    а со Spacegray у вас красится левая колонка у Sublime?
                      0
                      Для этого нужно прописать в настройках саблайма нужную строчку (есть в инструкции).
                    +2
                    Overthrow.js — не работает в crome+win8

                    Echo.js — картинки и так грузятся лениво

                    Imager.js — авторы ни спеку на data-*не читали, ни свой головой не подумали. data-src и data-aly легко могут конфликтовать с другими библиотеками. Надо использовать более специфичные, например data-imager-src, data-imager-alt

                      0
                      насчёт echo.js:
                      > img src=«img/blank.gif» alt=«Photo» data-echo=«img/photo.jpg»
                      и все поисковики опрокинуты с нормальной картинкой, всем альтам будет один black.gif. Либо так делать для картинок, которые подгружаются динамически, например в бесконечном скролле.
                        +1
                        А если указывать в «src» реальный путь к картинке. И перед вызовом «echo.js» вызывать свой скрипт, который будет создавать параметр «data-echo» с «src», а «src» заменять на «img/blank.gif». Тогда проблемы с ПС быть не должно. Пути к картинкам будут верные. Но я не знаю рабочий ли это вариант.
                          0
                          Боюсь, браузер начнёт загружать картинки из src в тот момент, как их увидит, и уж точно до запуска своего скриптика для их подмены
                            0
                            ох уж эти браузеры :) тогда остается только вариант: «Либо так делать для картинок, которые подгружаются динамически, например в бесконечном скролле.». Плохо конечно что возникнет проблема с ПС, а так скрипт не плохой.
                              0
                              Смотря как сделать. Принцип работы достаточно известного Mobify.js: «на странице в начало тега HEAD вставляется скрипт, временно оборачивающий содержимое BODY в тег PLAINTEXT — это предотавращает загрузку рессурсов. Далее выполняется наш код, манипуляции с DOM, ну а в конце BODY восстанавливается и ресурсы грузятся.»
                          0
                          а в чем Kraken.io лучше tinypng? Они же оба pngquant используют… да и результаты странные… tinypng почти на всех изображениях показывает на порядок лучший результат нежели kraken.io (только пара картинок кракеном сжалась лучше).

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