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

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

Cloudtunes ^[1]

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

SweetAlert ^[2]

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

//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 ^[3]

^[3]

Timing.js ^[4]

Библиотека добавляет дополнительные метрики для Navigation Timing API ^[5]. Теперь о загрузке страницы мы с вами будем знать все. Результат, который получаем на выходе от 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 ^[6]

^[6]
Ужасно непривлекательный лэндинг и незаслуженно маленькой количество звезд на 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) ^[7]

^[7]

// 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 ^[8]

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

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

108 byte CSS Layout Debugger ^[9]

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Which Browser is Best? Chrome vs. Firefox vs. Internet Explorer ^[10]
Training the CMS ^[11]
Introducing Universal SSL ^[12]
JavaScript hacks explained ^[13]
CSS Development at Large-Scale Websites ^[14]
Deep dive into the murky waters of script loading ^[15]
Touch/pointer events test results ^[16]
Async vs defer attributes ^[17]
Creating a Folded Paper Effect with OriDomi ^[18]
Creating Your First Node.js Command-line Application ^[19]
PHP Dependency Injection Container Performance Benchmarks ^[20]
Configuring an ‘all-in-one’ WebPageTest Private Instance ^[21]
Sci-Fi, Frustrations, Flash And Forms: The Typeform Story ^[22]
Size Matters: Balancing Line Length And Font Size In Responsive Web Design ^[23]
E-Commerce Sites Need Multiple of These 5 'Search Scope' Features ^[24]
Making Modal Windows Better For Everyone ^[25]
Design Principles: Connecting And Separating Elements Through Contrast And Similarity ^[26]
How Limitations Led To My Biggest App Store Success and Failure ^[27]
Doomed to Repeat It ^[28]

Напоследок:

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

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

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

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

Автор: ilusha_sergeevich

Источник ^[111]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/71468

Ссылки в тексте:

[1] Cloudtunes: https://github.com/jakubroztocil/cloudtunes

[2] SweetAlert: https://github.com/t4t5/sweetalert

[3] Bootstrap тема в стилистике Google Material Design: https://github.com/FezVrasta/bootstrap-material-design

[4] Timing.js: https://github.com/addyosmani/timing.js

[5] Navigation Timing API: https://developer.mozilla.org/en-US/docs/Navigation_timing

[6] Horizonal.js: https://github.com/michaelbromley/horizonal/

[7] Melchior.js — цепочного определения модулей(CMD): https://github.com/voronianski/melchior.js

[8] Hook.js: https://github.com/jordansinger/hook.js/

[9] 108 byte CSS Layout Debugger: https://gist.github.com/addyosmani/fd3999ea7fce242756b1

[10] Which Browser is Best? Chrome vs. Firefox vs. Internet Explorer: http://www.pcmag.com/article2/0,2817,2365692,00.asp

[11] Training the CMS: http://alistapart.com/article/training-the-cms

[12] Introducing Universal SSL: https://blog.cloudflare.com/introducing-universal-ssl/

[13] JavaScript hacks explained: http://blog.mdnbar.com/javascript-common-tricks

[14] CSS Development at Large-Scale Websites: http://sixrevisions.com/css/css-development-at-large-sites/

[15] Deep dive into the murky waters of script loading: http://www.html5rocks.com/en/tutorials/speed/script-loading/

[16] Touch/pointer events test results: http://patrickhlauke.github.io/touch/tests/results/

[17] Async vs defer attributes: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

[18] Creating a Folded Paper Effect with OriDomi: http://www.sitepoint.com/creating-folded-paper-effect-oridomi/?utm_content=bufferc7d3b&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[19] Creating Your First Node.js Command-line Application: http://tutorialzine.com/2014/09/creating-your-first-node-js-command-line-application/

[20] PHP Dependency Injection Container Performance Benchmarks: http://www.sitepoint.com/php-dependency-injection-container-performance-benchmarks/?utm_content=bufferd2751&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[21] Configuring an ‘all-in-one’ WebPageTest Private Instance: http://andydavies.me/blog/2012/09/18/how-to-create-an-all-in-one-webpagetest-private-instance/

[22] Sci-Fi, Frustrations, Flash And Forms: The Typeform Story: http://www.smashingmagazine.com/2014/09/26/sci-fi-frustrations-flash-and-forms-the-typeform-story/

[23] Size Matters: Balancing Line Length And Font Size In Responsive Web Design: http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/

[24] E-Commerce Sites Need Multiple of These 5 'Search Scope' Features: http://baymard.com/blog/search-scope

[25] Making Modal Windows Better For Everyone: http://www.smashingmagazine.com/2014/09/15/making-modal-windows-better-for-everyone/

[26] Design Principles: Connecting And Separating Elements Through Contrast And Similarity: http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/

[27] How Limitations Led To My Biggest App Store Success and Failure: http://www.smashingmagazine.com/2014/07/28/my-biggest-app-store-success-and-failure/

[28] Doomed to Repeat It: https://medium.com/message/doomed-to-repeat-it-fb03757dfcca

[29] High-Performance Browser Networking (O'Reilly): https://www.igvita.com/

[30] Eloquent JavaScript: http://eloquentjavascript.net/

[31] Speaking JavaScript: http://speakingjs.com/es5/

[32] 500 Lines or Less: https://github.com/aosabook/500lines

[33] Web UI Design Patterns 2014: http://uxpin.com/web-design-patterns.html

[34] Discover Meteor: http://ru.discovermeteor.com/

[35] Паттерны для масштабируемых JavaScript-приложений: http://largescalejs.ru/

[36] Сюрреализм на JavaScript: http://bakhirev.biz/book/

[37] Инлайновый контекст форматирования: http://css-live.ru/articles/obzor-inlajnovyj-kontekst-formatirovaniya.html

[38] Аппаратное ускорение в жизни верстальщика. Семинар в Яндексе: http://habrahabr.ru/company/yandex/blog/239169/

[39] ihanky: http://habrahabr.ru/users/ihanky/

[40] Как мы тестируем CSS-регрессии с Gemini. Доклад на BEMup в Яндексе: http://habrahabr.ru/company/yandex/blog/238323/

[41] Infernal: http://habrahabr.ru/users/infernal/

[42] Сборка проектов с помощью Gulp.js. Семинар в Яндексе: http://habrahabr.ru/company/yandex/blog/239993/

[43] justboris: http://habrahabr.ru/users/justboris/

[44] Видео докладов с FrontTalks: http://habrahabr.ru/post/239353/

[45] immchenko: http://habrahabr.ru/users/immchenko/

[46] Edge: Layout Performance Panel Intro by Paul Lewis: https://speakerdeck.com/paullewis/edge-layout-performance-panel-intro

[47] Paul Irish — Advanced Debugging Techniques with Chrome: https://www.youtube.com/watch?v=B63jNjSVEbQ

[48] Hakim El Hattab — Visual JavaScript Experiments: https://www.youtube.com/watch?v=02ilIJdI5ZI

[49] Tim Brown — Universal Typography: http://vimeo.com/106504574

[50] Tim Kadlec — Reaching Everyone, Fast: https://www.youtube.com/watch?v=kylciFbrwcY&noredirect=1

[51] Aarron Walter — Connected UX (SmashingConf NYC 2014): http://vimeo.com/103953447

[52] «Создание приложений OS X с помощью JavaScript»: http://habrahabr.ru/post/239635/

[53] john_samilin: http://habrahabr.ru/users/john_samilin/

[54] «Logbroker: сбор и поставка больших объемов данных в Яндексе»: http://habrahabr.ru/company/yandex/blog/239823/

[55] aozeritsky: http://habrahabr.ru/users/aozeritsky/

[56] «Sqimitive.js — Frontend Primitive или «Backbone без фантиков»»: http://habrahabr.ru/post/239149/

[57] ProgerXP: http://habrahabr.ru/users/progerxp/

[58] «Анимирование Flexbox с помощью CSS Transition»: http://habrahabr.ru/post/238607/

[59] radyno: http://habrahabr.ru/users/radyno/

[60] Часть 1: http://habrahabr.ru/post/239951/

[61] Часть 2: http://habrahabr.ru/post/240055/

[62] ilya42: http://habrahabr.ru/users/ilya42/

[63] «Разбираемся с монадами с помощью Javascript»: http://habrahabr.ru/post/238171/

[64] maxatwork: http://habrahabr.ru/users/maxatwork/

[65] «jQuery.viewport или как я искал элементы на экране»: http://habrahabr.ru/post/240083/

[66] xobotyi: http://habrahabr.ru/users/xobotyi/

[67] «JavaScript. Вопросы на собеседовании»: http://habrahabr.ru/post/239065/

[68] AvrGavr: http://habrahabr.ru/users/avrgavr/

[69] «Мобильная версия для Django-проекта»: http://habrahabr.ru/company/mailru/blog/239343/

[70] bekbulatov: http://habrahabr.ru/users/bekbulatov/

[71] «Настройка Guard для автоматизации Ruby on Rails разработки»: http://habrahabr.ru/post/238667/

[72] cbrwizard: http://habrahabr.ru/users/cbrwizard/

[73] «Деплой Go-серверов с помощью Docker»: http://habrahabr.ru/post/238473/

[74] prg: http://habrahabr.ru/users/prg/

[75] «Не стоит бояться использовать HandlerSocket»: http://habrahabr.ru/post/239637/

[76] KonstantinKuklin: http://habrahabr.ru/users/konstantinkuklin/

[77] «PHP-фреймворк Badoo»: http://habrahabr.ru/company/badoo/blog/238987/

[78] Treg: http://habrahabr.ru/users/treg/

[79] Взлом с помощью поиска, невнимательность и мой подельник GitHub": http://habrahabr.ru/post/239567/

[80] xjukebox: http://habrahabr.ru/users/xjukebox/

[81] «Приглашаем на лекцию и семинар Виталия Фридмана»: http://habrahabr.ru/company/mailru/blog/239671/

[82] TeamMRG: http://habrahabr.ru/users/teammrg/

[83] «YaC 2014: главная технологическая конференция Яндекса для тех, кому она действительно нужна»: http://habrahabr.ru/company/yandex/blog/239663/

[84] bobuk: http://habrahabr.ru/users/bobuk/

[85] «Руководство для дизайнера по DPI»: http://habrahabr.ru/post/237931/

[86] st_dev: http://habrahabr.ru/users/st_dev/

[87] awesome-shell: https://github.com/alebcay/awesome-shell

[88] A Scalable CSS Reading List: https://github.com/davidtheclark/scalable-css-reading-list

[89] Physical Web: https://github.com/google/physical-web

[90] подробная статья: http://thenextweb.com/google/2014/10/02/google-publishes-physical-web-open-standard-using-urls-beacons-smart-devices/

[91] Basil.js: https://github.com/Wisembly/basil.js

[92] Verb: https://github.com/pboyer/verb

[93] 6to5: https://github.com/sebmck/6to5

[94] min: https://github.com/owenversteeg/min

[95] Brototype: https://github.com/letsgetrandy/brototype

[96] Transducers.js: https://github.com/jlongster/transducers.js

[97] Takana: https://github.com/mechio/takana

[98] N: https://github.com/visionmedia/n

[99] Nightmare: https://github.com/segmentio/nightmare

[100] Python Prompt Toolkit: https://github.com/jonathanslenders/python-prompt-toolkit

[101] T: https://github.com/sferik/t

[102] Twitter: https://github.com/sixohsix/twitter

[103] Upmin Admin Ruby: https://github.com/upmin/upmin-admin-ruby

[104] Katon: https://github.com/typicode/katon

[105] AngularJS Tutorial: http://www.thinkful.com/learn/angularjs-tutorial-build-a-gmail-clone/

[106] Data Brace: http://data.brace.io/

[107] The Ultimate Guide To iPhone Resolutions.: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

[108] Pritunl: https://github.com/pritunl/pritunl

[109] windows_98.css: https://github.com/contra/windows_98.css

[110] Предыдущая подборка (Выпуск 29): http://habrahabr.ru/post/237697/

[111] Источник: http://habrahabr.ru/post/238755/

Нажмите здесь для печати.

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

Cloudtunes [1]

SweetAlert [2]

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

Timing.js [4]

Horizonal.js [6]

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

Hook.js [8]