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

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

Buzz.js ^[1]

^[1]
В последнее время в интернете все чаще и чаще встречаются проекты, где различные интерфейсные элементы сопровождаются определенными звуками. Я бы даже сказал, что UX/UI в вебе переходит на новую ступень эволюции. А Buzz.js одним из первых готов помочь вам в озвучке вашего интерфейса. Это библиотека для работы с HTML5 Audio API с рядом подходящих обработчиков событий.

var mySound = new buzz.sound( "/sounds/myfile", {
    formats: [ "ogg", "mp3", "aac" ]
});

mySound.play()
    .fadeIn()
    .loop()
    .bind( "timeupdate", function() {
       var timer = buzz.toTimer( this.getTime() );
       document.getElementById( "timer" ).innerHTML = timer;
    });

Snabbt.js ^[2]

^[2]
Snabbt.js — крошечная (всего 4кб в gzip) и очень быстрая (60FPS) библиотека библиотека для обработки CSS анимаций. Позволяет взаимодействовать со свойствами translate, rotate, scale, skew и resize. Работает во всех современных браузерах.

	snabbt(element, {
	  position: [100, 0, 0],
	  easing: 'ease'
	}).then({
	  fromRotation: [0, 0, -2*Math.PI],
	  easing: 'spring',
	  springConstant: 0.2,
	  springDeaccelaration: 0.95,
	});

Cachet ^[3]

^[3]
Система статусных оповещений, первый из подобных открытых и бесплатных проектов. Бывают случаи когда ваш сайт не работает из за сторонних сервисов. Дабы не отпугнуть посетителя, нужно правильно проинформировать его, а именно в режиме реального времени показать ему сообщение об ошибки. Cahet следит за используемыми вами сервисами (компонентами) и выводит статусные сообщение, в случае каких-либо неисправностей. Написан на PHP с Laravel, обладает RESTful API, модульный и простой в кастомизации.

PageKit CMS ^[4]

^[4]

Blessed Contrib ^[5]

^[5]
Mозговзрывающая JavaScript библиотека для дашбордов в терминале с использованием ascii/ansi символов. В основе лежать Blessed ^[6] и Drawille ^[7].

   var blessed = require('blessed')
     , contrib = require('blessed-contrib')
     , screen = blessed.screen()
     , line = contrib.line(
         { style: 
           { line: "yellow"
           , text: "green"
           , baseline: "black"}
         , xLabelPadding: 3
         , xPadding: 5
         , label: 'Title'})
     , data = {
         x: ['t1', 't2', 't3', 't4'],
         y: [5, 1, 7, 5]
      }
   screen.append(line) //must append before setting data
   line.setData(data.x, data.y)

   screen.key(['escape', 'q', 'C-c'], function(ch, key) {
     return process.exit(0);
   });

   screen.render()

Также хочу еще оставить ссылочку на cli-dashboard ^[8] для визуализации логов graylog.

Minimap.js ^[9]

^[9]
jQuery плагин, который позволяет отображать мини карту текущей страницы рядом со скроллбаром. Вероятно, это решение знакомо многим благодаря Sublime Text. Пока не могу представить явного примера, где необходимо применение этого плагина, но реализация явно заслуживает места в этой подборке за свою неординарность.

Slate ^[10]

Красивый статический документатор вашего кода, с поддержкой более 60 языков программирования и отзывчивыми шаблонами на выходе.
^[10]

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

A Case Study in JavaScript Code Improvement ^[11]
Introduction to HTML Imports ^[12]
How Browsers Work: Behind the scenes of modern web browsers ^[13]
The 2014 CSS Report ^[14]
JavaScript slideshows: an introduction ^[15]
How To Migrate To HTTPS ^[16]
A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 ^[17]
A Beginner's Guide to HTTP Cache Headers ^[18]
Using Go to improve your Ruby application's performance ^[19]
Getting Started with Microservices using Ruby on Rails and Docker ^[20]
The Chrome CSS Bug That Crashed Our Site ^[21]
Cross-tab Communication ^[22]
Why AJAX Isn’t Enough ^[23]
Flexbox adventures ^[24]
(Ab)using CSS3's :nth-child selector to invent new ones ^[25]
Introducing the JavaScript Internationalization API ^[26]
Tweaking the Moral UI ^[27]
Live Font Interpolation on the Web ^[28]
The Core Model: Designing Inside Out for Better Results ^[29]
5 UX KPIs You Need To Track ^[30]
How To Have Users Spread Your Innovation Like Wildfire ^[31]

Говорят и показывают отечественные ИТ ресурсы:

«Про аутлайны» ^[32] от Dizaina.net.
«Производительность CSS-анимаций» ^[33] от Forwebdev.ru.
«Интернационализация на основе CSS с использованием JavaScript» от Frontedner.info.
Фёдор Индутный, io.js и столовые приборы ^[34] от CodeHipseters.com.
«Свершилось! io.js Version 1.0.1 (Beta stability) released!» ^[35] от m0sk1t ^[36]
«14 вопросов об индексах в SQL Server, которые вы стеснялись задать» ^[37] от dude_sam ^[38]
«Что нового в CSS селекторах 4-го уровня?» ^[39] от saggid ^[40]
«Список YouTube-каналов для обучения веб-разработке» ^[41] от andrew-r ^[42]
"" от
«Все способы перебора массива в JavaScript» ^[43] от xmeoff ^[44]
Трёхмерный фон для сайта в реальном времени на JavaScript при помощи three.js ^[45]
«Пишем быстрый и экономный код на JavaScript» ^[46] от SLY_G ^[47]
«Простой парсинг сайтов с помощью SlimerJS» ^[48] от Tur1st ^[49]
«Введение в машинное обучение с помощью Python и Scikit-Learn» ^[50] от akrot ^[51]
«Как Битрикс чуть Новый Год не погубил» ^[52] от komandakycto ^[53]
«Как мы научили Почту Mail.Ru склеивать письма в треды» ^[54] от antigona ^[55]
«Docker: интересные особенности базовых образов» ^[56] от amartynov ^[57]
«Docker в продакшене — чему мы научились, запустив более 300 миллионов контейнеров» ^[58] от rkononov ^[59]
«Будни багхантинга: еще одна уязвимость в Facebook» ^[60] от BlackFan ^[61]
«Расследование Яндекса: full disclosure о вирусе на Facebook» ^[62] от L1kvID ^[63]

Напоследок:

HTML/CSS
- Hover.css ^[64] — удивительная коллекция анимаций.
- Sass Guidelines ^[65]
- Vanilla Bootstrap — Bootstrap фреймворк для Vanilla форумов.
- HTML Now ^[66] — генератор базового HTML шаблона.
JavaScript
- Autopolyfiller ^[67] — используйте последние возможности ECMAScript и не беспокойтесь о совместимости.
- Riot.js 2.0 ^[68] — вторая версия реакт-подобного MV* фремворка весом в 2.5кб, который уже упоминался в моих подборках.
- Gitlet ^[69] — Git реализация в JavaScript.
- Videogular ^[70] — видео плеер для Angular.js.
- Insignia ^[71] — jQuery плагин для кастомизация инпута с метками/тегами.
- Lovefield ^[72] — кроссбраузерный SQL-подобный движок от Google, основанный на IndexedDB.
- GifW00t ^[73] — pure javascript web recorder .
- Vegas ^[74] — jQuery плагин для создания фоновых слайдеров.
- PSI ^[75] — CL утилита для PageSpeed Insights от Google.
PHP
- Openbay ^[76] — исходники самого The Pirate Bay.
- clearPHP ^[77] — руководство по написанию кода.
- iDict ^[78] — iCloud Apple iD BruteForcer.
Python
- Hamms ^[79] — malformed servers to test your HTTP client.
- Dataquest.io ^[80] — изучение data science в браузере.
- Notejam ^[81] — The easy way to learn web frameworks.
Ruby
- Pundit ^[82] – авторизация без магии, на базе plain ruby объектов («убийца» cancan/cancancan).
- Ginatra ^[83] — быстрый и простой в разворачивании веб-просмотрщик git репозиториев.
- Formatador ^[84] — цвета, таблицы и прогресс-бары для форматирования текста в терминале.
- Spyke ^[85] — работа с REST сервисами в стиле ActiveRecord.
Go
- SSH Tron ^[86] — сервер для игры в Tron по SSH.
- Fanout ^[87] – удобная библиотека для простого распараллеливания задач.
- vim-go ^[88] — многофункциональный и активно-развивающийся vim плагин для работы с Go.
Разное
- Joe ^[89] — быстрое и простое создание .gitignore из консоли.
- country-list ^[90] — перечень всех стран в соответствии со стандартом SO 3166-1 для всех языков и форматов данных.
- Chartspree.io ^[91] — очень удобный сервис генерации графиков как src для картинки
- Elevatorsaga ^[92] – затягивающая игра про программирование лифтов.
- Всем стартапам стартап — инфографика ^[93] с большими цифрами от PornHub.

За помощь в подготовке материала выражаю огромную благодарность Александру Маслову drakmail ^[94].

Друзья бэкендеры! Я думаю всем известно, что свои подборки я делаю полностью на альтруизме. Я всегда прошаривал кучу сайтов, чтобы мне всегда было удобно работать. А в один момент я решил делиться найденным материалом. Со временем подборки обрели некую популярность и значительно расширились в плане содержания. Отныне я буду четко структурировать блок «Напоследок», дабы людям не приходилось искать нужное. Для того чтобы разделы не были голыми и всегда наполнялись актуальной информацией, мне требуется ваша помощь. И проблема не только во времени, но и в компетенции. В плане бэкенда я скорее теоретик, чем практик.

Пхпшник, ~~рубист~~, питонист, ~~гоущик~~, если ты уже мониторишь GitHub Trending, Reddit, HackerNews или Twitter в поисках интересностей и полезностей по своей теме, если найденное определенно имеет ценность, но не заслуживает внимание целого поста, если тебе не трудно раз в неделю/в две недели в зависимости от материала делиться парой килобайт ссылочной массы, то напиши мне в личку или любую соц. сеть из профиля. Писанина в основной раздел по желанию. Имя или контакты волонтеров в каждом посту обязательно будут указаны.

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

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

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

Автор: ilusha_sergeevich

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

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

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

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

[1] Buzz.js: https://github.com/jaysalvat/buzz

[2] Snabbt.js: https://github.com/daniel-lundin/snabbt.js

[3] Cachet: https://github.com/cachethq/Cachet

[4] PageKit CMS: http://pagekit.com/

[5] Blessed Contrib: https://github.com/yaronn/blessed-contrib

[6] Blessed: https://github.com/chjj/blessed

[7] Drawille: https://github.com/madbence/node-drawille

[8] cli-dashboard: https://github.com/Graylog2/cli-dashboard

[9] Minimap.js: https://github.com/princejwesley/minimap

[10] Slate: https://github.com/tripit/slate

[11] A Case Study in JavaScript Code Improvement: http://developer.telerik.com/topics/case-study-javascript-code-improvement/

[12] Introduction to HTML Imports: http://webcomponents.org/articles/introduction-to-html-imports/

[13] How Browsers Work: Behind the scenes of modern web browsers: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

[14] The 2014 CSS Report: http://reports.quickleft.com/css

[15] JavaScript slideshows: an introduction: http://gabrieleromanato.name/javascript-slideshows-an-introduction/

[16] How To Migrate To HTTPS: https://docs.google.com/document/d/1oRXJUIttqQxuxmjj2tgYjj096IKw4Zcw6eAoIKWZ2oQ/preview?sle=true#heading=h.kg09l4p1g4hj

[17] A Simple Performance Comparison of HTTPS, SPDY and HTTP/2: https://blog.httpwatch.com/2015/01/16/a-simple-performance-comparison-of-https-spdy-and-http2/

[18] A Beginner's Guide to HTTP Cache Headers: http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/

[19] Using Go to improve your Ruby application's performance: https://antoine.finkelstein.fr/go-in-ruby/

[20] Getting Started with Microservices using Ruby on Rails and Docker: http://blog.giantswarm.io/getting-started-with-microservices-using-ruby-on-rails-and-docker

[21] The Chrome CSS Bug That Crashed Our Site: http://hackingui.com/front-end/chrome-box-shadow-bug-that-crashed-our-site/

[22] Cross-tab Communication: http://ponyfoo.com/articles/cross-tab-communication

[23] Why AJAX Isn’t Enough: http://www.smashingmagazine.com/2015/01/13/why-ajax-isnt-enough/

[24] Flexbox adventures: http://chriswrightdesign.com/experiments/flexbox-adventures/#

[25] (Ab)using CSS3's :nth-child selector to invent new ones: https://grack.com/blog/2015/01/09/abusing-css3-selectors/

[26] Introducing the JavaScript Internationalization API: https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/

[27] Tweaking the Moral UI: http://alistapart.com/article/tweaking-the-moral-ui

[28] Live Font Interpolation on the Web: http://alistapart.com/article/live-font-interpolation-on-the-web

[29] The Core Model: Designing Inside Out for Better Results: http://alistapart.com/article/the-core-model-designing-inside-out-for-better-results

[30] 5 UX KPIs You Need To Track: http://designmodo.com/ux-kpi/

[31] How To Have Users Spread Your Innovation Like Wildfire: http://www.smashingmagazine.com/2015/01/21/how-to-have-users-spread-your-innovation-like-wildfire/

[32] «Про аутлайны»: http://wd.dizaina.net/internet-maintenance/on-outlines/

[33] «Производительность CSS-анимаций»: http://forwebdev.ru/css/css-transitions-perfomance/

[34] Фёдор Индутный, io.js и столовые приборы: http://codehipsters.com/2015/01/14/indutny-interview.html

[35] «Свершилось! io.js Version 1.0.1 (Beta stability) released!»: http://habrahabr.ru/post/247837/

[36] m0sk1t: http://habrahabr.ru/users/m0sk1t/

[37] «14 вопросов об индексах в SQL Server, которые вы стеснялись задать»: http://habrahabr.ru/post/247373/

[38] dude_sam: http://habrahabr.ru/users/dude_sam/

[39] «Что нового в CSS селекторах 4-го уровня?»: http://habrahabr.ru/post/248187/

[40] saggid: http://habrahabr.ru/users/saggid/

[41] «Список YouTube-каналов для обучения веб-разработке»: http://habrahabr.ru/post/247893/

[42] andrew-r: http://habrahabr.ru/users/andrew-r/

[43] «Все способы перебора массива в JavaScript»: http://habrahabr.ru/post/247857/

[44] xmeoff: http://habrahabr.ru/users/xmeoff/

[45] Трёхмерный фон для сайта в реальном времени на JavaScript при помощи three.js: http://habrahabr.ru/post/247811/

[46] «Пишем быстрый и экономный код на JavaScript»: http://habrahabr.ru/post/248111/

[47] SLY_G: http://habrahabr.ru/users/sly_g/

[48] «Простой парсинг сайтов с помощью SlimerJS»: http://habrahabr.ru/post/247847/

[49] Tur1st: http://habrahabr.ru/users/tur1st/

[50] «Введение в машинное обучение с помощью Python и Scikit-Learn»: http://habrahabr.ru/post/247751/

[51] akrot: http://habrahabr.ru/users/akrot/

[52] «Как Битрикс чуть Новый Год не погубил»: http://habrahabr.ru/post/247769/

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

[54] «Как мы научили Почту Mail.Ru склеивать письма в треды»: http://habrahabr.ru/company/mailru/blog/247861/

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

[56] «Docker: интересные особенности базовых образов»: http://habrahabr.ru/post/247903/

[57] amartynov: http://habrahabr.ru/users/amartynov/

[58] «Docker в продакшене — чему мы научились, запустив более 300 миллионов контейнеров»: http://habrahabr.ru/post/247969/

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

[60] «Будни багхантинга: еще одна уязвимость в Facebook»: http://habrahabr.ru/company/pt/blog/247709/

[61] BlackFan: http://habrahabr.ru/users/blackfan/

[62] «Расследование Яндекса: full disclosure о вирусе на Facebook»: http://habrahabr.ru/company/yandex/blog/248225/

[63] L1kvID: http://habrahabr.ru/users/l1kvid/

[64] Hover.css: https://github.com/IanLunn/Hover

[65] Sass Guidelines: http://sass-guidelin.es/

[66] HTML Now: https://github.com/sanusart/html-now

[67] Autopolyfiller: https://github.com/azproduction/autopolyfiller

[68] Riot.js 2.0: https://github.com/muut/riotjs

[69] Gitlet: https://github.com/maryrosecook/gitlet

[70] Videogular: https://github.com/2fdevs/videogular

[71] Insignia: http://bevacqua.github.io/insignia/

[72] Lovefield: https://github.com/google/lovefield

[73] GifW00t: https://github.com/yaronn/GifW00t

[74] Vegas: https://github.com/jaysalvat/vegas

[75] PSI: https://github.com/addyosmani/psi

[76] Openbay: https://github.com/isohuntto/openbay

[77] clearPHP: https://github.com/dseguy/clearPHP

[78] iDict: https://github.com/Pr0x13/iDict

[79] Hamms: https://github.com/kevinburke/hamms

[80] Dataquest.io: https://dataquest.io/

[81] Notejam: https://github.com/komarserjio/notejam

[82] Pundit: http://bit.ly/VDYi1s

[83] Ginatra: https://github.com/NARKOZ/ginatra

[84] Formatador: https://github.com/geemus/formatador

[85] Spyke: https://github.com/balvig/spyke

[86] SSH Tron: https://github.com/jpillora/ssh-tron

[87] Fanout: https://github.com/sunfmin/fanout

[88] vim-go: https://github.com/fatih/vim-go

[89] Joe: http://karan.github.io/joe/

[90] country-list: https://github.com/umpirsky/country-list

[91] Chartspree.io: http://chartspree.io/

[92] Elevatorsaga: http://play.elevatorsaga.com/

[93] инфографика: http://www.pornhub.com/insights/2014-year-in-review/

[94] drakmail: http://habrahabr.ru/users/drakmail/

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

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

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

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

Buzz.js [1]

Snabbt.js [2]

Cachet [3]

PageKit CMS [4]

Blessed Contrib [5]

Minimap.js [9]

Slate [10]