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

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

Firefox для iOS ^[1]

Пока это еще только наработки, но затея просто великолепная.

^[2]
Отлиный инструмент для редактирования SVG прямо в браузере. Вообще с распространением дисплеев с высоким разрешением, сообщество веб-разработчики все чаще и чаще обсуждает всевозможные способы взаимодействия с SVG. Идея еще одного простого и открытого редактора очень даже уместна, а функционал способен удовлетворить все потребности фронтендеров. Исходники тут ^[3]. Также хочу добавить, что проект не стоит на месте и постоянно развивается.

PhotoSwipe ^[4]

Качественный скрипт для создания адаптивных галерей. Поддерживает все уже привычные нам жесты зума, перелистывания и закрытие лайтбокса свайпом вверх (отличное UX решение, которое первыми стали использовать в Facebook если я не ошибаюсь). Поддержка History API, управление клавиатурой, индикатор загрузки, умная ленивая подгрузка и кнопки для расшаривания.

var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'https://placekitten.com/600/400',
            w: 600,
            h: 400
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];
    
    // define options (if needed)
    var options = {
			 // history & focus options are disabled on CodePen        
      	history: false,
      	focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0

ProgressBar.js ^[5]

^[5]
Хорошее решение для создания красивых и отзывчивых индикаторов загрузки. ProgressBar.js предоставляет 3 основных вида индикатора (линия, круглый и квадратный) и множество опций для анимации: цвет, толщина, функция смягчения, продолжительность и тд. Все максимально просто:

var circle = new ProgressBar.Circle('#example-circle-container', {
    color: '#FCB03C',
    strokeWidth: 2,
    fill: '#aaa'
});

circle.animate(1, function() {
    circle.animate(0);
})

WordPress Plugin Boilerplate ^[6]

^[6]

Astral ^[7]

Удобный сервис для агрегирования интересностей и полезностей ~~смайл~~. Astral синхронизируется с GitHub и позволяет создавать теги для всех ваших ~~застареных~~ звезданутых проектов.
^[7]

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

Creating Animations and Interactions with Physical Models ^[8]
Pricing the Web ^[9]
A Dive Into Plain JavaScript ^[10]
Performance Budget Metrics ^[11]
requestAutocomplete — take my money, not my time ^[12]
(More Than) Doubling SVG FPS Rates at Khan Academy ^[13]
A Box of Tricks for Building Responsive Email ^[14]
My five promise patterns ^[15]
Grouping related classes in your markup ^[16]
For and against `let` ^[17]
Making A Complete Polyfill For The HTML5 Details Element ^[18]
Divi: the Drag and Drop WordPress Theme ^[19]
Digging in to Laravel's IoC Container ^[20]
Destroying Your Enemies Through the Magic of Design ^[21]
Cultivating the Next Generation of Web Professionals ^[22]
Framing Effective Messages To Motivate Your Users ^[23]
UX for the Enterprise ^[24]
The State Of Animation 2014 ^[25]

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

«Код, которого нет» ^[26] от NikitaKA ^[27]
«Как Composer на 70% ускорили» ^[28] от HotWaterMusic ^[29]
«Раскол nodejs» ^[30] от rumkin ^[31]
«Web-разработка на Python глазами PHP-программиста» ^[32] от Ostrovski ^[33]
«Node.js в огне» ^[34] от codefo ^[35]
«Рушим капчу SilkRoad» ^[36]
«Рушим капчу SilkRoad 2.0» ^[37] от alexandfox ^[38]
«Краткий конспект по языку JavaScript» ^[39] от Razoomnick ^[40]
«Фреймворк AngularJS не для сайтов» ^[41] от CSS Live.
«Математика разметки с помощью CSS: разбираемся с calc» ^[42] от @hodic
«AngularJS – перевод курса от CodeSchool» ^[43] от non4me ^[44]
«Поиск на сайте своими руками» ^[45] от axilirator ^[46]
«Inversion of Control: Методы реализации с примерами на PHP» ^[47] от andrewnester ^[48]
«Руководство хакера по нейронным сетям. Схемы реальных значений (Часть 1 ^[49], 2 ^[50], 3 ^[51])»
«Отзывчивые изображения на практике (Часть 1 ^[52], 2 ^[53], 3 ^[54]) » от Irina_Ua ^[55]
«Оптимизируем производительность веб-страницы: CSS» ^[56] от andrew-r ^[57]
«Meteor. Разрабатываем TODO List» ^[58] от movl ^[59]
ObjectManager в API Яндекс.Карт. Как быстро отрисовать 10 000 меток на карте и не затормозить всё вокруг ^[60] от Kukabarra ^[61]
«Краткая история хакерства. Рассказ от руководителя информационной безопасности Яндекса» ^[62] от tokza ^[63]
«Как мы измеряем скорость загрузки Яндекс.Почты» ^[64] от doochik ^[65]

Напоследок:

Gifify ^[66] — конвертирует видео в оптимизированные .gif.
^[66]
Yosemite San Francisco Font ^[67]
io.js ^[68] — форк NodeJS.
Awesome Public Datasets ^[69]
txt.js ^[70] — стилизуем шрифты с помощью JavaScript и Canvas.
perfBar ^[71] — аналитический инструмент для оценки производительности проекта.
Laroux.js ^[72] еще один компактный аналог jQuery для современных браузеров.
Flexie ^[73] — полифил для поддержки flex-box.
Charted.js ^[74] — еще одна библиотека с графиками.
SVG Morpheus ^[75] — скрипт для анимации SVG при деформации.
Flow ^[76] — статический анализ типов в JS от Facebook.
Format.js ^[77] — библиотека для локализации от Yahoo.
CSSplot ^[78] — графики на CSS.
Yumpu ePaper ^[79] — WordPress плагин, которые генерирует из вашего блога электронную книгу в формате ePub.
http2 ^[80] — поддержка HTTP2 для Go.
Comcast ^[81] — в рамках тестирования создает искусственные подключения к серверу.
Kuma ^[82] — проект от Mozilla на Django, на котором построена MDN.
Rocket ^[83] — App Container runtime.
youtube-dl ^[84] — утилита для скачивания видео из Youtube и других аналогичных сайтов.
Detekt ^[85] — lalware triaging tool на Python.
Spider ^[86] — новый язык программирования или JavaScript без сюрпризов.
Очень прикольный ролик от ФРИИ — «Будни стартапера».

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

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

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

Автор: ilusha_sergeevich

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

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

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

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

[1] Firefox для iOS: https://github.com/mozilla/firefox-ios

[2] SVG Edit: http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

[3] тут: https://code.google.com/p/svg-edit/

[4] PhotoSwipe: https://github.com/dimsemenov/photoswipe/

[5] ProgressBar.js: https://github.com/kimmobrunfeldt/progressbar.js

[6] WordPress Plugin Boilerplate: https://github.com/tommcfarlin/WordPress-Plugin-Boilerplate/

[7] Astral: http://astralapp.com/

[8] Creating Animations and Interactions with Physical Models: http://iamralpht.github.io/physics/

[9] Pricing the Web: http://alistapart.com/column/pricing-the-web

[10] A Dive Into Plain JavaScript: http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/

[11] Performance Budget Metrics: http://timkadlec.com/2014/11/performance-budget-metrics/

[12] requestAutocomplete — take my money, not my time: http://www.html5rocks.com/en/tutorials/forms/requestautocomplete/

[13] (More Than) Doubling SVG FPS Rates at Khan Academy: http://www.princeton.edu/~crmarsh/svg-performance/

[14] A Box of Tricks for Building Responsive Email: http://www.sitepoint.com/tricks-building-responsive-email/

[15] My five promise patterns: https://remysharp.com/2014/11/19/my-five-promise-patterns

[16] Grouping related classes in your markup: http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/

[17] For and against `let`: http://davidwalsh.name/for-and-against-let

[18] Making A Complete Polyfill For The HTML5 Details Element: http://www.smashingmagazine.com/2014/11/28/complete-polyfill-html5-details-element/

[19] Divi: the Drag and Drop WordPress Theme: http://www.sitepoint.com/divi-the-drag-and-drop-wordpress-theme/

[20] Digging in to Laravel's IoC Container: http://code.tutsplus.com/tutorials/digging-in-to-laravels-ioc-container--cms-22167

[21] Destroying Your Enemies Through the Magic of Design: http://alistapart.com/blog/post/destroying-your-enemies-through-the-magic-of-design/

[22] Cultivating the Next Generation of Web Professionals: http://alistapart.com/article/cultivating-the-next-generation-of-web-professionals

[23] Framing Effective Messages To Motivate Your Users: http://www.smashingmagazine.com/2014/11/11/framing-effective-messages-to-motivate-your-users/

[24] UX for the Enterprise: http://alistapart.com/article/ux-for-the-enterprise

[25] The State Of Animation 2014: http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/

[26] «Код, которого нет»: http://habrahabr.ru/post/243351/

[27] NikitaKA: http://habrahabr.ru/users/nikitaka/

[28] «Как Composer на 70% ускорили»: http://habrahabr.ru/post/244825/

[29] HotWaterMusic: http://habrahabr.ru/users/hotwatermusic/

[30] «Раскол nodejs»: http://habrahabr.ru/post/245013/

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

[32] «Web-разработка на Python глазами PHP-программиста» : http://habrahabr.ru/post/243961/

[33] Ostrovski: http://habrahabr.ru/users/ostrovski/

[34] «Node.js в огне»: http://habrahabr.ru/post/243945/

[35] codefo: http://habrahabr.ru/users/codefo/

[36] «Рушим капчу SilkRoad»: http://habrahabr.ru/post/241145/

[37] «Рушим капчу SilkRoad 2.0»: http://habrahabr.ru/post/241263/

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

[39] «Краткий конспект по языку JavaScript»: http://habrahabr.ru/post/243403/

[40] Razoomnick: http://habrahabr.ru/users/razoomnick/

[41] «Фреймворк AngularJS не для сайтов»: http://css-live.ru/articles/frejmvork-angularjs-ne-dlya-sajtov.html

[42] «Математика разметки с помощью CSS: разбираемся с calc»: http://habrahabr.ru/post/243821/

[43] «AngularJS – перевод курса от CodeSchool»: http://habrahabr.ru/post/244925/

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

[45] «Поиск на сайте своими руками»: http://habrahabr.ru/post/244561/

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

[47] «Inversion of Control: Методы реализации с примерами на PHP»: http://habrahabr.ru/post/244517/

[48] andrewnester: http://habrahabr.ru/users/andrewnester/

[49] 1: http://habrahabr.ru/company/paysto/blog/244723/

[50] 2: http://habrahabr.ru/company/paysto/blog/244935/

[51] 3: http://habrahabr.ru/company/paysto/blog/245051/

[52] 1: http://habrahabr.ru/company/paysto/blog/244175/

[53] 2: http://habrahabr.ru/company/paysto/blog/244177/

[54] 3: http://habrahabr.ru/company/paysto/blog/244241/

[55] Irina_Ua: http://habrahabr.ru/users/irina_ua/

[56] «Оптимизируем производительность веб-страницы: CSS»: http://habrahabr.ru/post/244815/

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

[58] «Meteor. Разрабатываем TODO List»: http://habrahabr.ru/post/242943/

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

[60] ObjectManager в API Яндекс.Карт. Как быстро отрисовать 10 000 меток на карте и не затормозить всё вокруг: http://habrahabr.ru/company/yandex/blog/243665/

[61] Kukabarra: http://habrahabr.ru/users/kukabarra/

[62] «Краткая история хакерства. Рассказ от руководителя информационной безопасности Яндекса»: http://habrahabr.ru/company/yandex/blog/244559/

[63] tokza: http://habrahabr.ru/users/tokza/

[64] «Как мы измеряем скорость загрузки Яндекс.Почты»: http://habrahabr.ru/company/yandex/blog/244243/

[65] doochik: http://habrahabr.ru/users/doochik/

[66] Gifify: https://github.com/vvo/gifify

[67] Yosemite San Francisco Font: https://github.com/wellsriley/YosemiteSanFranciscoFont

[68] io.js: https://github.com/iojs/io.js

[69] Awesome Public Datasets: https://github.com/caesar0301/awesome-public-datasets

[70] txt.js: https://github.com/diverted247/txtjs

[71] perfBar: https://github.com/lafikl/perfBar

[72] Laroux.js: https://github.com/larukedi/laroux.js

[73] Flexie: https://github.com/doctyper/flexie

[74] Charted.js: https://github.com/mikesall/charted

[75] SVG Morpheus: https://github.com/alexk111/SVG-Morpheus

[76] Flow: https://github.com/facebook/flow

[77] Format.js: http://formatjs.io/

[78] CSSplot: https://github.com/asciimoo/cssplot

[79] Yumpu ePaper: https://wordpress.org/plugins/yumpu-epaper-publishing/installation/

[80] http2: https://github.com/bradfitz/http2

[81] Comcast: https://github.com/tylertreat/Comcast

[82] Kuma: https://github.com/mozilla/kuma

[83] Rocket: https://github.com/coreos/rocket

[84] youtube-dl: https://github.com/rg3/youtube-dl

[85] Detekt: https://github.com/botherder/detekt

[86] Spider: https://github.com/alongubkin/spider

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

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

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

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

Firefox для iOS [1]

SVG Edit [2]

PhotoSwipe [4]

ProgressBar.js [5]

WordPress Plugin Boilerplate [6]

Astral [7]