Несколько интересностей и полезностей для веб-разработчика #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: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    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"

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

• Advanced objects in JavaScript
• What you should know about JavaScript regular expressions
• JavaScript Memory Management Masterclass
• Animating Without jQuery
• Favicons, Touch Icons, Tile Icons, etc. What All Do You Need?
• Centering in CSS: A Complete Guide
• Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL
• Running Code Reviews with Confidence
• Git: The Safety Net for Your Projects
• How to Manipulate and Animate SVG With Snap.svg
• Nerd Using the :target pseudo-selector for alternative layouts
• Using SVG stroke Attributes
• 7 Reasons to Develop Your Next Web App with Meteor
• The Beginner's Guide to Type Coercion: A Practical Example
• Bubble.js: A 1.6K Solution to a Common Problem
• Mobile Onboarding: A Beginner’s Guide
• Write better walkthroughs with the 3x3 Method
• Material Design exploration: NBA scores
• Four Design Lessons from Material Design Documentation
• How One Cold Email Landed Me A $15K Consulting Project
• Braden Kowitz: Why You Should Listen to the Customer
• Ways To Avoid Overwhelming Users: Lessons Learned From My High-School Teachers

Говорит и показывает Хабр:

• «Масштабирование наоборот: БЭМ-методология Яндекса на небольших проектах» от ingdir
• «Параллакс на чистом CSS» от alspaladin
• «Ractive.js — бриллиантовый век web-разработки» от setdvd
• «JavaScript метод insertAdjacentHTML и beforeend» от jojo97
• «GitHub's CSS» от mckalech
• «Атом — минимальный кирпичик FRP приложения» от vintage
• «Заметка про проверку PHP» от SvyatoslavMC
• «Как Docker помог нам достичь (почти) невозможного» от rkononov
• «Оптимизация образов Docker» от silentvick
• «Небольшие полезности для CoffeeScript разработчика» от SerafimArts
• «Разработка своей системы биллинга на Django» от akamoroz
• «Django 1.7» от KestL
• «HHVM 3.3 — первый релиз с долгосрочной поддержкой (LTS)»
  «Вышел финальный релиз PHP 5.6.0» от kriptomen
• «Релиз WordPress 4.0 Benny» от Scorpion97
• «RabbitMQ — отложенные сообщения» от ivanych
• "[Перевод] Новости из мира Node: Tint, Redbird" от vba
• «Эдди Османи: Паралич выбора» от john_samilin
• «Небольшая японская хитрость по организации своей записной книжки» от @alexandfox

Напоследок:

• 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 и множества других проектов, одного из первых и самых знаменитых веб-разработчиков.
  
  
  

                                                         Предыдущая подборка (Выпуск 26)

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

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