Pull to refresh

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

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

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.25% Да 705
6.75% Нет 51
756 users voted. 100 users abstained.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+67
Comments 13
Comments Comments 13

Articles