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

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

    Cloudtunes



    Cloudtunes один из тех проектов, глядя на которые я не понимаю мотивации разработчиков выкладывать такие наработки в открытый доступ. Не сочтите меня за сугубо меркантильную личность, но данный проект — это грубо говоря клон iTunes в облаке и это просто великолепный сервис. Cloudtunes обеспечивает единый интерфейс для вашей медиатеки, синхронизируя данные между Dropbox, Youtube, Lastfm и тд. Серверная часть написана на Python (Tornado, Celery, Mongo DB, MongoEngine, Redis), а клиентская на CoffeeScript (Backbone.js, SocketIO, Handlebars, Compass, SoundManager).



    SweetAlert


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

    //A basic message
    swal("Here's a message!")
    
    //A warning message, with a function attached to the "Confirm"-button
    swal({
      title: "Are you sure?",
      text: "Your will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, delete it!",
      closeOnConfirm: false
    },
    function(){
      swal("Deleted!", "Your imaginary file has been deleted.", "success);
    });
    


    Bootstrap тема в стилистике Google Material Design




    Timing.js


    Библиотека добавляет дополнительные метрики для Navigation Timing API. Теперь о загрузке страницы мы с вами будем знать все. Результат, который получаем на выходе от timing.getTimes():
    firstPaint: 1411307463455.813 // New
    firstPaintTime: 685.0390625 // New
    appcacheTime: 2
    connectEnd: 1411307463185
    connectStart: 1411307463080
    connectTime: 105 // New
    domComplete: 1411307463437
    domContentLoadedEventEnd: 1411307463391
    domContentLoadedEventStart: 1411307463391
    domInteractive: 1411307463391
    domLoading: 1411307463365
    domReadyTime: 46 // New
    domainLookupEnd: 1411307463080
    domainLookupStart: 1411307463032
    fetchStart: 1411307463030
    initDomTreeTime: 56 // New
    loadEventEnd: 1411307463445
    loadEventStart: 1411307463437
    loadEventTime: 8 // New
    loadTime: 558 // New
    lookupDomainTime: 48
    navigationStart: 1411307462887
    readyStart: 143 // New
    redirectEnd: 0
    redirectStart: 0
    redirectTime: 0 // New
    requestStart: 1411307463185
    requestTime: 150 // New
    responseEnd: 1411307463335
    responseStart: 1411307463333
    secureConnectionStart: 1411307463130
    unloadEventEnd: 0
    unloadEventStart: 0
    unloadEventTime: 0 // New
    


    Horizonal.js



    Ужасно непривлекательный лэндинг и незаслуженно маленькой количество звезд на GitHub. Но скрипт позволяет создавать очень красивые эффекты с контентом со множество различным вариаций анимации.
    horizonal.init({
        onPageTransition: function(type, page, animator) {
            // Use whatever JavaScript you like to transform the node
        }
        onNodeTransition: function(type, node, animator) {
            // Use whatever JavaScript you like to transform the node
        }
    });
    


    Melchior.js — цепочного определения модулей(CMD)


    image
    // create module
    melchiorjs.module('yourModule')
    
    // define dependencies
    .require('dependencyUno')
    .require('dependencyDuo', 'duo')
    
    // define module body
    .body(function () {
        // `dependencyUno` is available here!
        dependencyUno.doSomething();
    
        // aliased `dependencyDuo` is available as `duo`!
        duo.doSomething();
    
        // return methods for other modules
        return {
            method: function () { ... },
            anotherMethod: function () { ... }
        };
    });
    


    Hook.js



    Hook.js реализует в вебе типичный для мобильных устройств UX сценарий «Pull to refresh»: подгрузка/обновление контента при тяги вниз. Весьма юзабельно и может многим пригодиться для асинхронных проектов.

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




    Книги




    Познавательные видео и презентации




    Говорит и показывает Хабр:




    Напоследок:


    • awesome-shell
    • A Scalable CSS Reading List
    • Physical Web — открытые стандартны для интернета вещей (подробная статья).
    • Basil.js — недостающий уровень абстракции для хранения и обработки данных в локальном кэшэ.
    • Verb — CAD библиотека для веба.
    • 6to5 — переводит ECMAScript 6 в ES5.
    • min — самый маленький CSS фреймворк в мире (995 байт).
    • Brototype — «Bro, do you even javascript?»
    • Transducers.js — generalized transformation of data (inspired by Clojure's transducers).
    • Takana — автообновление страницы в браузере при работе с SCSS.
    • N — менеджер версий для Node.
    • Nightmare — «high level wrapper for Phantomjs».
    • Python Prompt Toolkit — библиотека для создания интерактивных CLI.
    • T и Twitter — CLI клиенты для твиттера на Ruby и Python соответственно.
    • Upmin Admin Ruby — фреймворк для построения админок.
    • Katon — Autostart your Node, Ruby, Python, Go,… development servers.
    • AngularJS Tutorial — изучаем Angular, создавая клон Gmail.
    • Data Brace — используем Google Spreadsheets как CMS.
    • The Ultimate Guide To iPhone Resolutions.
    • Pritunl — «Enterprise VPN Server».
    • windows_98.css — верстаем в стиле Windows 98.


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

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

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

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

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

    • 93.2%Да705
    • 6.8%Нет51
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 13

      +7
      Шикарная подборка, спасибо.
        +3
        И вам спасибо, рад быть полезным.
        +8
        Sweet Alerts — прекрасная штука. Вроде ничего особенного, идея элементарная, функционал минимальный — но какое впечатление производит!

        P.S. От Horizontal.js получил визуальный оргазм.
        P.P.S. Извините, что рассказал.
          +1
          согласен про sweetalerts Только имейте ввиду, что она не блокирует исполнение, в отличие от встроенной alert('x'); Ваш код спокойно работает дальше.

          PS. кстати она весит почти 30кб, есть более легковесная альтернатива 5кб github.com/al0p/wow-alert
          0
          Ой. Дюже гарно!
            0
            Cloudtunes один из тех проектов, глядя на которые я не понимаю мотивации разработчиков выкладывать такие наработки в открытый доступ. Не сочтите меня за сугубо меркантильную личность, но данный проект — это грубо говоря клон iTunes в облаке и это просто великолепный сервис.
            Судя по тому, что написано на Гитхабе, проект (сайд-проект) был начат в 2012 году, но затем заброшен из-за того, что на него не было времени. Осенью 2014 года исходный код был открыт, но, по сути, это alpha. Как видно, разработчик просто решил не «жучить» то, что всё равно не смог бы развивать дальше. Очень похвально.
              0
              К слову, качество анимаций Horizonal.js подстать демо-странице.
                +1
                Понравилась тема Material Design. Минут десять на кнопочки тыкал и смотрел на эффект. Слайдеры еще там шикарные.
                  0
                  Ну не знаю. По мне так очередная кнопочная тема для бутстрапа, каких навалом в инете. Бывают и получше.
                  +3
                  Автор, по моему, пересмотрел презентаций Стива Джобса. Эти «потрясающий» и «великолепный» просто давят на меня, навязывая уже готовое мнение.
                    0
                    Улыбнуло =) Презентации конечно смотрел и книгу читал, но пишу так интуитивно, честно.
                    0
                    Спасибо! Всегда с нетерпением жду ваши подборки.
                      0
                      Всегда пожалуйста. Буду писать, пока будут читать.

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