io.js

https://github.com/iojs/io.js

В мире JavaScript не так давно произошло знаковое событие, о котором мы не можем не упомянуть: группа разработчиков Node.js, недовольная политикой Joyent, вышла из проекта и создала форк io.js. Основной причиной к принятию такого решения послужило то, что Node.js почти не развивался с 2013 года (версия 0.10) и работал на старой версии V8. Плюс система версионирования была запутанной и не соответствовала общепринятой модели semver. Io.js уже успел сформировать свою аудиторию и собрать более 4000 звезд на GitHub. Первый стабильный релиз платформы запланирован на 13 февраля 2015 года, по заявлениям разработчиков, он будет совместимым с Node.js и npm.

io-js

Nightrain

https://github.com/naetech/nightrain

Хоть разработчики частенько и ругают PHP, но он по-прежнему остается популярным. Настолько популярным, что теперь на нем можно делать приложения для OS Х, Windows и Linux. Не то чтобы подобных проектов не было раньше, но именно nightrain выглядит довольно проработанным, да и вдобавок сильно приглянулся комьюнити. Проект написан на Python и по своей сути является упаковщиком PHP/HTML/CSS/JS-проектов в десктопные версии. В качестве БД используется SQLite 3. А если говорить о фреймворках, то тут нет абсолютно никаких ограничений, ни на клиентские, ни на серверные. В целом получился достаточно интересный проект, который открывает совершенно новые возможности для веб-разработчиков.

nightrain

Mermaid

https://github.com/knsv/mermaid

Обучение практически любого разработчика начинается с изучения языка блок-схем. А Mermaid является JavaScript-библиотекой, интерпретирующей очень лаконичный синтаксис для генерации блок-схем:

<div class="mermaid">
    CHART DEFINITION GOES HERE
</div>

graph LR;
    A[Hard edge]-->|Link text|B(Round edge);
    B-->C{Decision};
    C-->|One|D[Result one];
    C-->|Two|E[Result two];

В итоге получается такая вот схема:

mermaid

PhotoSwipe

https://github.com/dimsemenov/PhotoSwipe

Качественный скрипт для создания галерей с поддержкой мобильных устройств. Почти 3000 звезд на гитхабе. В PhotoSwipe грамотно реализована навигация с помощью HTML5 History API и присвоения идентификатора к каждому слайду, умный индикатор загрузки, благодаря которому контент не дергается, клавиатурное управление и плавные анимации при зуме.

var pswpElement = document.querySelectorAll('.pswp')[0];

// build items array
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];

// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // start at first slide
};

// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

photoswipe

Clappr

https://github.com/globocom/clappr

Clappr — это удобный «масштабируемый медиаплеер для веба». В Clappr можно настроить буквально все: размеры, цвета панели управление и иконок на ней, прелоадер и даже прикрутить Google аналитику. Ну и плюс ко всему Clappr максимально прост в использовании.

<body>
  <div id="player"></div>
  <script>
    var playerEl = document.getElementById("player");
    var player = new Clappr.Player({source: "http://your.video/here.mp4"});
    player.attachTo(playerEl);
  </script>
</body>
clappr

ClockPicker

https://github.com/weareoutman/clockpicker

Изящное UI/UX-решение, альтернатива традиционному datetime-picker’у. Идея очень проста — вместо традиционного hours-поля со стрелками вверх и вниз ты выбираешь время на настоящих часах, перетягивая стрелки. Выглядит и работает все очень здорово.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

ClockPicker работает как плагин для jQuery.

clockpicker

Handsontable

https://github.com/handsontable/handsontable

Вероятно, лучшая библиотека для реализации Excel-подобного редактора в вебе. Даже сам автор проекта перечислил все похожие библиотеки и убеждает в том, что в них нет ничего, чего бы не было в Handsontable. Библиотека предоставляет огромный API, который позволит сделать и настроить что угодно и как угодно. Только событийная модель состоит более чем из 50 обработчиков. Модульная архитектура и ряд существующих плагинов c Backbone, Angular, тепловыми картами, графиками, комментариями и прочим.

handsontable

Front-end Job Interview Questions

https://github.com/h5bp/Front-end-Developer-Interview-Questions

Бесценная шпаргалка для соискателей на позицию фронтендера. Репозиторий от команды HTML5 Boilerplate с большим перечнем основных вопросов как по веб-разработке в целом, так и по HTML, CSS, JS отдельно. Если ты ответишь на все эти вопросы для самого себя, вероятность того, что ты пройдешь интервью, увеличится в разы.

front-end-job-interview-questions

SVG Morpheus

https://github.com/alexk111/SVG-Morpheus

C распространением retina-дисплеев, обсуждений на тему SVG среди веб-разработчиков и самого SVG значительно прибавилось. SVG Morpheus — это небольшая библиотека, которая производит эффектные анимации деформирования SVG-объектов. Скрипт поддерживает почти все возможные функции смягчения и предоставляет несколько вариантов анимаций.

svg-morpheus

Flexie

https://github.com/doctyper/flexie

У W3C достаточно много хейтеров, которые критикуют систему дистрибуции стандартов в браузеры. Да и текущая ситуация с версткой далеко не идеальна. Но значительно упростить процесс верстки способны флексбоксы. Flexie — один из самых ценных полифилов для верстальщиков, который полностью вводит поддержку спецификации CSS3 Flexible Box Model для IE 6-9, Opera 10.0+, Firefox 3.0+, Safari 3.2+ и Chrome 5.0+.

flexie

Илья Пестов

Постоянный автор подборок лучших опенсорных тулз для веб-разработчиков.

Теги:

1 комментарий

  1. 08.05.2015 at 21:15

Оставить мнение

Check Also

Я у мамы инженер! Как перестать бояться паяльника и начать творить

Ты наверняка встречал в интернете потрясающие проекты вроде оркестра из дисководов, макета…