Несколько интересностей и полезностей для веб-разработчика #27
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.Highcharts.js
В последнее время я зачастил с библиотеками предназначенными для построения графиков и диаграмм. Но против трендов на GitHub с 2500+ звезд не попрешь, да и когда есть из чего выбирать — всегда хорошо. Highcharts.js — это мощный инструмент, основанный на SVG и VML рендеринге со множеством плагинов. Минус этого проекта — лицензия, которая позволяет использовать скрипт только в некоммерческих целях. Хочу обратить также ваше внимание, что именно этот проект выбрали такие компании как Яндекс, Facebook, Twitter, Yahoo, AT&A, Nokia и др.Chartist.js
И еще одна похожая библиотека с отзывчивыми чартами. Простой синтаксис, CSS анимации, Jasmine тесты и подробная документация благодаря JSDoc.
/* Добавляем набор данных */
var data = {
labels: ['1', '2', '3', '4', '5', '6'],
series: [
{
data: [1, 2, 3, 5, 8, 13]
}
]
};
/* Указываем базовые опции */ var options = { axisX: { labelInterpolationFnc: function (value) { return 'Calendar Week ' + value; } } };
/* Корректируем отображения в зависимости от разрешения экрана */ var responsiveOptions = [ ['screen and (min-width: 641 px) and (max-width: 1024 px)', { showPoint: false, axisX: { labelInterpolationFnc: function (value) { return 'Week ' + value; } } }], ['screen and (max-width: 640 px)', { showLine: false, axisX: { labelInterpolationFnc: function (value) { return 'W' + value; } } }] ];
/* Инициализируем */
Chartist.Line ('#my-chart', data, options, responsiveOptions);
Senna
Замечательный скрипт для создания молниеносных одностраничных сайтов. Важно подчеркнуть, что разработчики уделили много внимания роутингу и разрешили характерные проблемы для типичных библиотек связанные с SEO, передачей ссылок, историей и кешем в браузере. Senna.js весит всего 8 кб и предоставляет простой и понятный API разделенный на три категории: Routes, Screens и Data attributes.Timesheet
Этот замечательный инструмент позволяет отображать информацию на временной шкале.
new Timesheet ('timesheet', 2002, 2013, [
['2002', '09/2002', 'A freaking awesome time', 'lorem'],
['06/2002', '09/2003', 'Some great memories', 'ipsum'],
['2003', 'Had very bad luck'],
['10/2003', '2006', 'At least had fun', 'dolor'],
['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
['07/2005', '09/2005', 'Bad luck again', 'default'],
['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);
UIlang
Язык для быстрого прототипирования созданный для веб-дизайнеров: clicking on ».try-it» toggles class «hidden» on ».info-box»
Западные мысли или что стоило бы перевести на Хабре: Говорит и показывает Хабр: Напоследок: The best of awesomeness and usefulness for web developers for year. jQuery Focuspoint — плагин для «отзывчивой фокусировки» изображений. Page Monitor — diff tool для DOM построенный на PhantomJS. Type Rendering Mix — применение CSS в зависимости он рендеринга браузера. style-guide — руководство по стилю для веб-компонентов от Google. Phred — продвинутое ООП для PHP. Mailpile — поисковой движок по электронной почте на Python. Aesop Core — движок для создания интерактивных историй на WordPress. Kite — крутой веб email клиент на Python. Slap — Sublime подобный редактор в вашем терминале. Syncthing — непрерывная синхронизация для Go. iBrute — AppleID брутер на Python. Gooey — GUI почти для всех программ из командной строки. Dockersh — изолирует user shell с помощью докер контейнеров. От команды Yelp. »20 лет веб-дизайну и сообществу» — видео с Джеффри Зельдманом, основателем A List Apart и множества других проектов, одного из первых и самых знаменитых веб-разработчиков.[embedded content] Предыдущая подборка (Выпуск 26)
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.
Спасибо всем за внимание.
