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

Docpad

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

/>Hammer.js

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

Пример:

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

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

List.js

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

Пример поиска по списку:

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

Напоследок:

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

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

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

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