Несколько интересностей и полезностей для веб-разработчика (выпуск 9)

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

Docpad ^[1]

^[1]
«Нашумевший» проект в Twitter и GitHub. По заявлению разработчиков «Docpad снимает ограничения и убирает разрыв между профессионалами и новичками. Теперь дизайнеры и разработчики могут создавать веб-сайты быстрее, чем когда-либо прежде». Docpad — это статический генератор сайтов написанный на Node.js. Он позволяет с легкостью создавать шаблоны и блоки. Работает c PHP, Ruby, CoffeeScript и др. В нем есть file wathing, live reload и самое главное «amazing plugin system». Большим плюсом является обучающее видео (хоть и на английском).

Hammer.js ^[2]

Очень функциональный скрипт для работы с touch событиями. Существует как самостоятельная библиотека и как jQuery плагин. Поддерживает Tap, DoubleTap, Swipe, Drag, Pinch и Rotate. Более 6000 GitHub старов за месяц.

Пример:

Hammer(el).on("swipeleft", function() {
    alert('you swiped left!');
});

Полезнейшая CSS шпаргалка для верстки писем ^[3]

^[3]

List.js ^[4]

Слова от автора проекта Jonny: «Крошечная, незаметная, простая, но все же очень мощная и невероятно быстрая библиотека на vanilla JavaScript, которая добавляет поиск, фильтры, сортировку к HTML спискам, таблицам и чему либо другому ».

Пример поиска по списку ^[5]:

JavaScript

var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

Все!

HTML

  <div id="users">
    <input class="search" placeholder="Search" />
    <button class="sort" data-sort="name">
      Sort by name
    </button>
  
    <ul class="list">
      <li>
        <h3 class="name">Jonny Stromberg</h3>
        <p class="born">1986</p>
      </li>
      <li>
        <h3 class="name">Jonas Arnklint</h3>
        <p class="born">1985</p>
      </li>
      <li>
        <h3 class="name">Martina Elm</h3>
        <p class="born">1986</p>
      </li>
      <li>
        <h3 class="name">Gustaf Lindqvist</h3>
        <p class="born">1983</p>
      </li>
    </ul>
  
  </div>

Bearder WordPress Theme ^[6]

^[6]

Напоследок:

^[7]
22 ноября прошло ровно 50 лет со дня смерти Джона Кеннади. К этому событию в National Geographic разработали сайт Killing Kennedy ^[8]. Поскольку в правилах хабра сказано, что это не место для политики, то скажу пару слов только про этот сайт. Во-первых: он очень информативный и содержит множестве интересных фактов. Во-вторых: это «идеальный» пример того, как и когда нужно использовать Parallax Scrolling. В последнее время параллакс стал неким трендом и разработчики стараются его использовать там где не нужно.

Очень интересный тест для front-end разработчиков. ^[9]

• Kraken-js ^[10] — express-based Node.js web application bootstrapping module by PayPal
• JavaScript API для Gmail ^[11]
• jQuery Auto Fix Anything ^[12]
• AutoJS ^[13] — простой скрипт для автозаполнения
• Webcode ^[14] — приложение на Mac для создания и анимирования вектороной графики с экспортов в SVG или JS Canvas
• Ionic Framework ^[15] — CSS фреймворк для мобильных устройств
• Videoconverter.js ^[16]

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

Автор: ilusha_sergeevich

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