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

в 19:55, , рубрики: css, html, javascript, веб-дизайн, Веб-разработка

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

Highcharts.js

Несколько интересностей и полезностей для веб разработчика #27
В последнее время я зачастил с библиотеками предназначенными для построения графиков и диаграмм. Но против трендов на GitHub с 2500+ звезд не попрешь, да и когда есть из чего выбирать — всегда хорошо. Highcharts.js — это мощный инструмент, основанный на SVG и VML рендеринге со множеством плагинов. Минус этого проекта — лицензия, которая позволяет использовать скрипт только в некоммерческих целях. Хочу обратить также ваше внимание, что именно этот проект выбрали такие компании как Яндекс, Facebook, Twitter, Yahoo, AT&A, Nokia и др.

Chartist.js

Несколько интересностей и полезностей для веб разработчика #27
И еще одна похожая библиотека с отзывчивыми чартами. Простой синтаксис, 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

Несколько интересностей и полезностей для веб разработчика #27
Замечательный скрипт для создания молниеносных одностраничных сайтов. Важно подчеркнуть, что разработчики уделили много внимания роутингу и разрешили характерные проблемы для типичных библиотек связанные с SEO, передачей ссылок, историей и кешем в браузере. Senna.js весит всего 8кб и предоставляет простой и понятный API разделенный на три категории: Routes, Screens и Data attributes.

Timesheet

Несколько интересностей и полезностей для веб разработчика #27
Этот замечательный инструмент позволяет отображать информацию на временной шкале.

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
Несколько интересностей и полезностей для веб разработчика #27
Язык для быстрого прототипирования созданный для веб-дизайнеров:
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 и множества других проектов, одного из первых и самых знаменитых веб-разработчиков.

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

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

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

Автор: ilusha_sergeevich

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js