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

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

Unheap ^[1]

^[1]
Огромная коллекция реально качественных и нужных jQuery плагинов, грамотно расфасованная по области применения. В Unheap 5 основных разделов UI, Inputs, Media, Nav, Other и каждый из них содержит еще с десяток подкатегорий. В общей сложности на данный момент каталог содержит более 1000 различных плагинов.

Datecropper ^[2]

^[2]
Да, это еще один jQuery плагин для выбора дат. Но реализация шедевральна с точки зрения UI/UX. Скрипт легко подключается и кастомизируется. Datecropper в любом случае заслуживает внимания за дизайн самого сайта с проектом. Это самая красивая страничка с описанием JavaScript библиотеки, которую я когда либо видел.

Mixture ^[3]

^[3]
Генератор вашего рабочего окружения. Многие, возможно, уже слышали об Yeoman ^[4], который позволяет буквально в несколько команд собрать все необходимые инструменты и библиотеки для вашего проекта. Mixture в принципе делает тоже самое, но существует как десктопное приложение.

Isso ^[5]

^[5]
Сервер для комментариев похожий на Disqus написанный на Python. Поддерживает аватарки, ветви, голоса, а вместо визуального редактора используется Mardown. Проект предусматривает импортирт данных из Disqus и WordPress. Сами комментарии подключаются также с помощью JavaScript.

Awesomplete ^[6]

^[6]
Замечательное решение для автозаполнения форм от известной «разработчицы» Lea Verou. Awesomplete весит всего 2кб и для базового использования даже не требуется писать JavaScript, достаточно указать варианты в дата-атрибуте. Для задач посложнее библиотека содержит ряд необходимых опций и методов, но продолжает оставаться максимально простой в использовании. Стоит упомянуть, что проект за несколько дней собрал более 2000 звезд ни GitHub.

<input class="awesomplete"
       data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />

// No extra JS needed for basic usage!

Pico CMS ^[7]

^[7]

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

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

«localForage – храним данные offline без головной боли. Удобная абстракция над IndexedDB, WebSQL и localStorage.» ^[25] от HTML5.by.
«Наследование и композиция с Polymer» ^[26] от Frontender.info.
«Обеспечение лучшей резервной поддержки SVG и управление оформлением с помощью элемента <picture>» ^[27] от CSS Live.
«Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса» ^[28] от belitsky ^[29]
«Как и зачем мы делаем TLS в Яндексе» ^[30] от kyprizel ^[31]
«Недостатки WordPress — техническая сторона» ^[32] от lkart ^[33]
«Игровой мир WebGL или Three.js vs Babylon.js» ^[34] от Alex10 ^[35]
«Wallaby.js — маленький зверь с большим будущим» ^[36] от Artem_Govorov ^[37]
«Получение участников сообщества vk.com за считанные секунды» ^[38] от dooza ^[39]
«Как писать отличные пулл-реквесты» ^[40] от olegafx ^[41]
«Как мы реализовали HTTPS на главной странице портала Mail.Ru» ^[42] от madimp ^[43]
«Буфер вывода в PHP» ^[44] от AloneCoder ^[45]
«WSGI/Rack для PHP» ^[46] от WST ^[47]
«Авторинг Perl модулей» ^[48] от powerman ^[49]
«XSS-уязвимость нулевого дня в Internet Explorer позволяет атаковать любые сайты» ^[50] от ptsecurity ^[51]
«Кросс-компиляция в Go» от divan0 ^[52].
«BattleGIS — JavaScript-движок для игры в Танчики» ^[53] от Diokuz ^[54]

Напоследок:

HTML/CSS
- Transformicons ^[55] — коллекция анимационный SVG и HTML/CSS иконок.
- Tint UI ^[56] — таблицы цветов для конкретных направлений в дизайне.
- Shade ^[57] — генератор потрясающих CSS градиентов.
JavaScript
- BrowserSync ^[58], о котором я уже писал обновился до версии 2.0 и обзавелся веб-интерфейсом:
- react-canvas ^[59] — высоко производительный <canvas> для React компонентов.
- Recorder.js ^[60] — записывает и экспортирует данные полученные с помощью Web Audio API.
- Plyr ^[61] — простой и легкий HTML5 видео плеер с Accessibility, семантикой и прочим.
- Gator.js ^[62] — миниатюрная библиотека без зависимостей для работы с событиями.
- Curl.js ^[63] — для управления модулями и интервью ^[64] раразботчика библиотеки с David Walsh.
- Enb ^[65] — сборщик для BEM проектов.
- Clui ^[66] — Command Line UI toolkit для Node.js.
PHP
- Glide ^[67] — библиотека для различных манипуляций с изображениями.
- FoundationPress ^[68] — крутой стартовый шаблон для WordPress тем.
- Pagoda Box ^[69] — PAAS для PHP.
Python
- Blockstore ^[70] — key-value store for name registration and data storag
- Vim Hackernews ^[71] — просмотр постов от Hackernews с помощью Vim.
- Icdiff ^[72] — альтернатива diff tool с улучшенной подсветкой изменений.
Ruby
- Awesome Ruby ^[73]
- Pretty Backtrace ^[74] – сообщения об ошибках еще никогда не были так прекрасны.
- Pronto ^[75] — позволяет запускать утилиты для автоматического code review только для изменившихся файлов, есть интеграция с Github и Gitlab.
- Fastimage ^[76] — определение типа и размеров изображений по ссылке без выкачивания всего изображения.
- Ruby Hunt ^[77] – ProductHunt для Ruby.
- Маленький tutorial ^[78] по парсингу страниц с использованием mechanize — очень хорош для быстрого старта.
- Бесплатный e-book ^[79] про написание DSL в ruby
- Heroku рекоммендует ^[80] использовать Puma вместо Unicorn.
Go
- GoSMS ^[81] – свой СМС шлюз «за 5 минут».
- Go Web Frameworks Benchmark ^[82]
- GoForCPPProgrammers ^[83] – Go для разработчиков C++.
Разное
- jQuery плагины в npm ^[84]
- server-configs-apache ^[85] — шаблон конфигурации Apache от команды HTML5 Boilerplate.
- Статья про Docker 1.5 ^[86], с поддержкой IPv6, контейнеров только для чтения, статистикой и многим другим.
- Panasonic SmartTV теперь будет на FirefoxOS ^[87].

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

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

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

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

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

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

Автор: ilusha_sergeevich

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

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

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

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

[1] Unheap: http://www.unheap.com/

[2] Datecropper: http://felicegattuso.com/projects/datedropper/

[3] Mixture: http://mixture.io/

[4] Yeoman: http://yeoman.io/

[5] Isso: https://github.com/posativ/isso

[6] Awesomplete: https://github.com/LeaVerou/awesomplete

[7] Pico CMS: http://picocms.org/

[8] The (80-storey) Elevator Pitch: https://github.com/w3c/frame-timing/wiki/Explainer

[9] 5 functions of the Console object you didn’t know: https://shellycloud.com/blog/2014/11/five-functions-of-the-console-object-you-didnt-know

[10] Polylion: https://css-tricks.com/polylion/

[11] Favicon and App Icon Template: http://littlewebgiants.com/favicon-and-app-icon-template/

[12] Enduring CSS: writing style sheets for rapidly changing, long-lived projects: http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/

[13] Single Div Drawings with CSS: https://hacks.mozilla.org/2014/09/single-div-drawings-with-css/

[14] Smartphone Remote Control with Node.js and Socket.io: http://tutorialzine.com/2015/02/smartphone-remote-control-for-presentations/

[15] Build Your Own Product Hunt With Telescope And Meteor: http://www.smashingmagazine.com/2015/02/26/build-your-own-product-hunt-with-telescope-and-meteor/

[16] How to Give Your Logo the “Slip Scroll” Effect: http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274

[17] An Introduction To Unit Testing In AngularJS Applications: http://www.smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/

[18] Learn Regular Expressions in 20 Minutes: http://tutorialzine.com/2014/12/learn-regular-expressions-in-20-minutes/

[19] How to Make Your WordPress Site Blazing Fast: http://www.onextrapixel.com/2015/02/21/how-to-make-your-wordpress-site-blazing-fast/

[20] Accessibility Originates With UX: A BBC iPlayer Case Study: http://www.smashingmagazine.com/2015/02/23/bbc-iplayer-accessibility-case-study/

[21] FLIP Your Animations: http://aerotwist.com/blog/flip-your-animations/

[22] Design Principles: Dominance, Focal Points And Hierarchy: http://www.smashingmagazine.com/2015/02/27/design-principles-dominance-focal-points-hierarchy/

[23] 8 Psychological Triggers to Optimize Your Pricing Page: https://blog.kissmetrics.com/pricing-page-psychological-triggers/

[24] Is This Psychedelic iOS Keyboard The Craziest UI In Design History?: http://www.fastcodesign.com/3039755/is-this-psychedelic-ios-keyboard-the-craziest-ui-in-design-history

[25] «localForage – храним данные offline без головной боли. Удобная абстракция над IndexedDB, WebSQL и localStorage.»: http://html5.by/blog/localforage/

[26] «Наследование и композиция с Polymer»: http://frontender.info/inheritance-and-composition-with-polymer/#nasledovanieikompozitsiyaspolymer

[27] «Обеспечение лучшей резервной поддержки SVG и управление оформлением с помощью элемента <picture>»: http://css-live.ru/articles/obespechenie-luchshej-rezervnoj-podderzhki-svg-i-upravlenie-oformleniem-s-pomoshhyu-elementa-picture.html

[28] «Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса»: http://habrahabr.ru/company/yandex/blog/251473/

[29] belitsky: http://habrahabr.ru/users/belitsky/

[30] «Как и зачем мы делаем TLS в Яндексе»: http://habrahabr.ru/company/yandex/blog/249771/

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

[32] «Недостатки WordPress — техническая сторона»: http://habrahabr.ru/post/251257/

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

[34] «Игровой мир WebGL или Three.js vs Babylon.js»: http://habrahabr.ru/post/246259/

[35] Alex10: http://habrahabr.ru/users/alex10/

[36] «Wallaby.js — маленький зверь с большим будущим»: http://habrahabr.ru/post/249473/

[37] Artem_Govorov: http://habrahabr.ru/users/artem_govorov/

[38] «Получение участников сообщества vk.com за считанные секунды»: http://habrahabr.ru/post/248725/

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

[40] «Как писать отличные пулл-реквесты»: http://habrahabr.ru/post/248527/

[41] olegafx: http://habrahabr.ru/users/olegafx/

[42] «Как мы реализовали HTTPS на главной странице портала Mail.Ru»: http://habrahabr.ru/company/mailru/blog/249719/

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

[44] «Буфер вывода в PHP»: http://habrahabr.ru/company/mailru/blog/248573/

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

[46] «WSGI/Rack для PHP»: http://habrahabr.ru/post/250055/

[47] WST: http://habrahabr.ru/users/wst/

[48] «Авторинг Perl модулей»: http://habrahabr.ru/post/249767/

[49] powerman: http://habrahabr.ru/users/powerman/

[50] «XSS-уязвимость нулевого дня в Internet Explorer позволяет атаковать любые сайты»: http://habrahabr.ru/company/pt/blog/249809/

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

[52] divan0: http://habrahabr.ru/users/divan0/

[53] «BattleGIS — JavaScript-движок для игры в Танчики»: http://habrahabr.ru/company/2gis/blog/251283/

[54] Diokuz: http://habrahabr.ru/users/diokuz/

[55] Transformicons: https://github.com/grayghostvisuals/transformicons

[56] Tint UI: http://tintui.com

[57] Shade: http://jxnblk.com/shade/

[58] BrowserSync: https://github.com/BrowserSync/browser-sync

[59] react-canvas: https://github.com/Flipboard/react-canvas

[60] Recorder.js: https://github.com/mattdiamond/Recorderjs

[61] Plyr: https://github.com/selz/plyr

[62] Gator.js: https://github.com/ccampbell/gator

[63] Curl.js: https://github.com/cujojs/curl

[64] интервью: http://davidwalsh.name/unscriptable

[65] Enb: https://github.com/enb-make/enb

[66] Clui: https://github.com/nathanpeck/clui

[67] Glide: https://github.com/thephpleague/glide

[68] FoundationPress: https://github.com/olefredrik/FoundationPress

[69] Pagoda Box: https://pagodabox.com/

[70] Blockstore: https://github.com/openname/blockstore

[71] Vim Hackernews: https://github.com/ryanss/vim-hackernews

[72] Icdiff: https://github.com/jeffkaufman/icdiff

[73] Awesome Ruby: http://awesome-ruby.com

[74] Pretty Backtrace: https://github.com/ko1/pretty_backtrace

[75] Pronto: https://github.com/mmozuras/pronto

[76] Fastimage: https://github.com/sdsykes/fastimage

[77] Ruby Hunt: http://rubyhunt.org

[78] Маленький tutorial: https://www.chrismytton.uk/2015/01/22/advanced-web-scraping-with-mechanize/

[79] Бесплатный e-book: http://clean-ruby.com/dsl

[80] Heroku рекоммендует: https://devcenter.heroku.com/changelog-items/594

[81] GoSMS: https://github.com/haxpax/gosms

[82] Go Web Frameworks Benchmark: https://quip.com/Ha0bAfeh1ZVY

[83] GoForCPPProgrammers: https://github.com/golang/go/wiki/GoForCPPProgrammers

[84] jQuery плагины в npm: http://blog.npmjs.org/post/111385956875/welcome-jquery-developers

[85] server-configs-apache: https://github.com/h5bp/server-configs-apache/blob/master/dist/.htaccess

[86] Статья про Docker 1.5: http://blog.docker.com/2015/02/docker-1-5-ipv6-support-read-only-containers-stats-named-dockerfiles-and-more/

[87] Panasonic SmartTV теперь будет на FirefoxOS: http://www.dailydot.com/technology/firefox-panasonic-smart-tv-ces-2015/

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

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

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

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

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

Unheap [1]

Datecropper [2]

Mixture [3]

Isso [5]

Awesomplete [6]

Pico CMS [7]