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

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

Learn X in Y minutes ^[1]

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

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

Joint.js ^[3]

^[3]

Шедевральная библиотека для разработки диаграмм с массой примеров и огромным API. Что есть в Joint:

Различные элементы: прямоугольники, круги, овалы, изображение, произвольные фигуры
Возможность привязать элементы друг к другу
Magnets — специальные ссылки для привязки
Сериалиция/десерализация данных из/в JSON
Продуманная событийная модель
Поддержка зума
Адаптация под трогательные устройства
MVC архитектура, плагинная система и многе другое.

NodeGit ^[4]

^[4]
В принципе, суть этого проекта уже ясна из название — автоматизация работы Git с помощью NodeJS. Корректно работает на Windows, Mac, Linux и поддерживает IO.js.

var Git = require("nodegit");

var getMostRecentCommit = function(repository) {
  return repository.getBranchCommit("master");
};

var getCommitMessage = function(commit) {
  return commit.message();
};

Git.Repository.open("nodegit")
  .then(getMostRecentCommit)
  .then(getCommitMessage)
  .then(function(message) {
    console.log(message);
  });

Wavesurfer.js ^[5]

^[5]
Кажется, что буквально недавно я изучал как привнести звуки в браузер и существовало 3 способа: Flash, Java апплет и чудный тег <bgsoung&gt. Сейчас уже всем рулит JavaScript, а Wavesurfer.js на основе Web Audio API круто отрисовывывает звуковые волны.

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
    container: document.querySelector('#wave'),
    waveColor: 'violet',
    progressColor: 'purple'
});

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

wavesurfer.load('example/media/demo.mp3');

Theater.js ^[6]

Прикольный эффект имитирующий человеческое поведение при переписке.
^[6]

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

The State of Web Type ^[7]
Getting Git Right ^[8]
JavaScript Fetch API in action ^[9]
Side Effects in CSS ^[10]
Harnessing Flexbox For Today’s Web Apps ^[11]
Quantity Queries for CSS ^[12]
Script-injected «async scripts» considered harmful ^[13]
A Few Different Ways To Use SVG Sprites In Animation ^[14]
Browser Input Events: Can We Do Better Than The Click? ^[15]
Tradeoffs in server side and client side rendering ^[16]
More Transparent UI Code with Namespaces ^[17]
An inline-block intervention ^[18]
Transform your illustration into smart SVG ^[19]
Optimizing the Usability of Online Forms ^[20]
The best interface is no interface: why we don't always need An App for That ^[21]
The best icon is a text label ^[22]
80/20 Practitioners Make Better Communicators ^[23]
15 SEO Best Practices for Structuring URLs ^[24]

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

Состояние веб-анимации в 2014 году ^[25]
Потрясающая отзывчивая вёрстка с использованием CSS-областей ^[26]
«Искусство Node» ^[27] от Frontender Magazine.
«8 правил для улучшения вашего CSS» ^[28] от Forwebdev.ru.
«Развлечения с line-height!» ^[29] от CSS Live.
«Material Design: на Луну и обратно» ^[30] от desyatykh ^[31]
«Не учите фреймворки, учите архитектуру» ^[32] от rboots ^[33]
«Разбор вызовов функций в PHP» ^[34] от AloneCoder ^[35]
«Точки соприкосновения JavaScript и Reverse Engineering» ^[36] от d1g1 ^[37]
«Нестандартная оптимизация проектов на PHP» ^[38] от ollisso ^[39]
«Что именно происходит, когда пользователь набирает в адресной строке google.com? (Часть 1 ^[40], 2 ^[41])» от SLY_G ^[42]
«Очень быстрые классы на JavaScript с красивым синтаксисом» ^[43] от kogarashisan ^[44]
«Почему я не испытываю неприязни к Git: скрытая целостность» ^[45] от ptsecurity ^[46]

Напоследок:

HTML/CSS
- Primer ^[47] — фреймворк от команды GitHub.
- Styleguide & Boilerplate Patterns ^[48].
- Apple Watch Dials ^[49].
  CodePen Collector #1 ^[50].
JavaScript
- Passport.js ^[51] — отличная библиотека для работы с аутентификацией.
- Lodash.js ^[52] — серьезный конкурент для Underscore.js.
- react-primer-draft ^[53] — наработки проекта основанного на React и новоиспеченном Primer (смотрите выше).
- Fastdom ^[54] — устраняет передергивания верстки при загрузки.
- iframe-resizer ^[55] — удобный способ изменить размеры фрейма.
- Reapp ^[56] — next gen hybrid apps.
- ExcelJS ^[57] — Excel Workbook Manager.
- essential-react ^[58] — шаблон для React проекта.
- angular-yandex-map ^[59] — модуль для работы с Яндекс картами с помощь Angular.js.
- JSON API ^[60] — стандарт для построения API на JSON.
PHP
- php-facedetection ^[61] — определяет человеческие лица на изображениях.
- Polr ^[62] — минималистичный и модульный «сокращатель ссылок».
- Baun ^[63] — еще одна простая и гибкая CMS.
Python
- PyTricks ^[64] — коллекция лучших решений и трюков.
- Yapf ^[65] — форматирование Python файлов от Google.
- Ajenti ^[66] — the web admin panel everyone wants.
- reverse-geocoder ^[67]
Ruby
- ruby-nlp ^[68] — подборка библиотек и программ для обработки естественного языка (NLP).
- Pippi ^[69] — находит не оптимальное использование встроенных функций и сообщает об этом.
- Swift Rubyists ^[70] — Swift для рубистов.
- Artoo.io ^[71] — Ruby для роботов.
- Материал ^[72] по созданию нейронной сети для распознавания цифр на изображении.
- 10 способов улучшить (или нет) свой код на Ruby ^[73].
- Vim Monster ^[74] — «умное» автодоплнение для Ruby в Vim (осторожно, японский :)).
- Что нового в Rails 5.0 ^[75].
- Релиз Rails 4.2.1 и 4.1.0 ^[76].
Go
- Подборка видео по Google Go ^[77].
- Gin ^[78] — LiveReload для web-приложений.
- httpdiff ^[79] — perform the same request against two HTTP servers and diff the results.
- NES ^[80] — NES эмулятор на Go.
Разное
- Let’s Encrypt ^[81]
- Pterosaur ^[82] — Firefox плагин, которые обеспечивает поддержку Vim в вашем любимом браузере.
- ArchieML ^[83] — язык разметки от разработчиков The New York Times.
- Duet ^[84] — крутое приложение для Mac, которое делает из вашего iPad второй экран.

Автор: ilusha_sergeevich

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

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

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

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

[1] Learn X in Y minutes: http://learnxinyminutes.com/

[2] Hyperpolyglot: http://hyperpolyglot.org

[3] Joint.js: https://github.com/DavidDurman/joint

[4] NodeGit: https://github.com/nodegit/nodegit

[5] Wavesurfer.js: https://github.com/katspaugh/wavesurfer.js

[6] Theater.js: https://github.com/Zhouzi/TheaterJS

[7] The State of Web Type: https://dev.opera.com/articles/state-of-web-type/

[8] Getting Git Right: https://www.atlassian.com/git/

[9] JavaScript Fetch API in action: http://blog.gospodarets.com/fetch_in_action/

[10] Side Effects in CSS: http://philipwalton.com/articles/side-effects-in-css/

[11] Harnessing Flexbox For Today’s Web Apps: http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/

[12] Quantity Queries for CSS: http://alistapart.com/article/quantity-queries-for-css

[13] Script-injected «async scripts» considered harmful: https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

[14] A Few Different Ways To Use SVG Sprites In Animation: http://www.smashingmagazine.com/2015/03/17/different-ways-to-use-svg-sprites-in-animation/

[15] Browser Input Events: Can We Do Better Than The Click?: http://www.smashingmagazine.com/2015/03/20/better-browser-input-events/

[16] Tradeoffs in server side and client side rendering: https://medium.com/@cramforce/tradeoffs-in-server-side-and-client-side-rendering-14dad8d4ff8b

[17] More Transparent UI Code with Namespaces: http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

[18] An inline-block intervention: https://medium.com/@drewisthe/an-inline-block-intervention-6ce18a3f7edf

[19] Transform your illustration into smart SVG: https://medium.com/@benev/transform-your-illustration-into-smart-svg-51b505f908f0

[20] Optimizing the Usability of Online Forms: http://designmodo.com/optimizing-online-forms/

[21] The best interface is no interface: why we don't always need An App for That: http://www.theverge.com/2015/3/17/8103593/golden-krishna-best-interface-is-no-interface-excerpt

[22] The best icon is a text label: http://thomasbyttebier.be/blog/the-best-icon-is-a-text-label

[23] 80/20 Practitioners Make Better Communicators: http://alistapart.com/article/80-20-practitioners-make-better-communicators

[24] 15 SEO Best Practices for Structuring URLs: http://moz.com/blog/15-seo-best-practices-for-structuring-urls

[25] Состояние веб-анимации в 2014 году: http://frontender.info/the-state-of-animation-2014/

[26] Потрясающая отзывчивая вёрстка с использованием CSS-областей: http://frontender.info/killer-responsive-layouts-with-css-regions/

[27] «Искусство Node»: http://frontender.info/art-of-node/

[28] «8 правил для улучшения вашего CSS»: http://forwebdev.ru/css/8-rules-to-improve-css/

[29] «Развлечения с line-height!»: http://css-live.ru/articles/razvlecheniya-s-line-height.html

[30] «Material Design: на Луну и обратно»: http://habrahabr.ru/company/redmadrobot/blog/252773/

[31] desyatykh: http://habrahabr.ru/users/desyatykh/

[32] «Не учите фреймворки, учите архитектуру»: http://habrahabr.ru/post/253297/

[33] rboots: http://habrahabr.ru/users/rboots/

[34] «Разбор вызовов функций в PHP»: http://habrahabr.ru/company/mailru/blog/250861/

[35] AloneCoder: http://habrahabr.ru/users/alonecoder/

[36] «Точки соприкосновения JavaScript и Reverse Engineering»: http://habrahabr.ru/company/dsec/blog/253309/

[37] d1g1: http://habrahabr.ru/users/d1g1/

[38] «Нестандартная оптимизация проектов на PHP»: http://habrahabr.ru/post/250985/

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

[40] 1: http://habrahabr.ru/post/251373/

[41] 2: http://habrahabr.ru/post/251501/

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

[43] «Очень быстрые классы на JavaScript с красивым синтаксисом»: http://habrahabr.ru/post/250311/

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

[45] «Почему я не испытываю неприязни к Git: скрытая целостность»: http://habrahabr.ru/company/pt/blog/253211/

[46] ptsecurity: http://habrahabr.ru/users/ptsecurity/

[47] Primer: https://github.com/primer/primer

[48] Styleguide & Boilerplate Patterns: https://docs.google.com/spreadsheet/ccc?key=0AiN0QfBTPpOCdDFjWlM0eU1ra21XanZkekxGbjA2WWc#gid=0

[49] Apple Watch Dials: https://cssanimation.rocks/watch/

[50] CodePen Collector #1: http://ipestov.com/codepen-collector-1/

[51] Passport.js: https://github.com/jaredhanson/passport

[52] Lodash.js: https://github.com/lodash/lodash/

[53] react-primer-draft: https://github.com/mikechau/react-primer-draft

[54] Fastdom: https://github.com/wilsonpage/fastdom

[55] iframe-resizer: https://github.com/davidjbradshaw/iframe-resizer

[56] Reapp: https://github.com/reapp/reapp

[57] ExcelJS: https://github.com/guyonroche/exceljs

[58] essential-react: https://github.com/pheuter/essential-react

[59] angular-yandex-map: https://github.com/tulov/angular-yandex-map

[60] JSON API: https://github.com/json-api/json-api

[61] php-facedetection: https://github.com/mauricesvay/php-facedetection

[62] Polr: https://github.com/Cydrobolt/polr

[63] Baun: https://github.com/BaunCMS/Baun

[64] PyTricks: https://github.com/brennerm/PyTricks

[65] Yapf: https://github.com/google/yapf

[66] Ajenti: https://github.com/Eugeny/ajenti

[67] reverse-geocoder: https://github.com/thampiman/reverse-geocoder

[68] ruby-nlp: https://github.com/diasks2/ruby-nlp

[69] Pippi: https://github.com/tcopeland/pippi

[70] Swift Rubyists: http://adamdelong.com/swift-rubyists/

[71] Artoo.io: http://artoo.io/

[72] Материал: http://www.rubylab.io/2015/03/18/simple-neural-network-implenentation-in-ruby/

[73] 10 способов улучшить (или нет) свой код на Ruby: http://samurails.com/ruby/ruby-tricks-improve-code/

[74] Vim Monster: https://github.com/osyo-manga/vim-monster

[75] Что нового в Rails 5.0: https://intercityup.com/blog/upcoming-changes-in-rails-5-0.html

[76] Релиз Rails 4.2.1 и 4.1.0: http://weblog.rubyonrails.org/2015/3/19/Rails-4-2-1-and-4-1-10-have-been-released/

[77] Подборка видео по Google Go: https://www.youtube.com/user/gocoding

[78] Gin: https://github.com/codegangsta/gin

[79] httpdiff: https://github.com/jgrahamc/httpdiff

[80] NES: https://github.com/fogleman/nes

[81] Let’s Encrypt: https://letsencrypt.org/howitworks/

[82] Pterosaur: https://github.com/ardagnir/pterosaur

[83] ArchieML: http://archieml.org/

[84] Duet: http://www.duetdisplay.com/

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

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

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

Learn X in Y minutes [1]

Joint.js [3]

NodeGit [4]

Wavesurfer.js [5]

Theater.js [6]