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

в 13:20, , рубрики: css, html, javascript, веб-дизайн, Веб-разработка

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

Cloudtunes

Несколько интересностей и полезностей для веб разработчика #30
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

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

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

Несколько интересностей и полезностей для веб разработчика #30
Ужасно непривлекательный лэндинг и незаслуженно маленькой количество звезд на 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

Несколько интересностей и полезностей для веб разработчика #30
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)

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

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

Автор: ilusha_sergeevich

Источник

* - обязательные к заполнению поля

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js