Под­борки при­ятных полез­ностей для раз­работ­чиков!
 

CamanJS

https://github.com/meltingice/CamanJS/

Пот­ряса­ющая биб­лиоте­ка для работы с изоб­ражени­ями. В бук­валь­ном смыс­ле CamanJS (ca)nvas (man)ipulation поз­воля­ет соз­давать фото­эффекты не хуже, чем в Instagram, толь­ко в бра­узе­ре на кли­ент­ской сто­роне бук­валь­но парой стро­чек JS!

Про­ект написан на CoffeeScript и вов­сю исполь­зует HTML5 Canvas. Обширный API, под­разуме­вающий под собой сис­тему пла­гинов, пре­дос­тавля­ет раз­работ­чикам неог­раничен­ные воз­можнос­ти для обра­бот­ки изоб­ражений. Уже на дан­ный момент дос­тупны опе­рации с яркостью, кон­трас­том, насыщен­ностью и мно­жес­тво все­го осталь­ного. Репози­торий соб­рал поч­ти 2000 звезд на GitHub.

Caman('#my-image', function () {
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render(
console.log('Done!');
);
});
 

Materialize

https://github.com/Dogfalo/materialize

Сов­ремен­ный отзывчи­вый фрон­тенд‑фрей­мворк, где все эле­мен­ты и интерфей­сные ани­мации выпол­нены стро­го в соот­ветс­твии с трен­довым Google Material Design.

Важ­но под­чер­кнуть, что это не оче­ред­ная сти­лизо­ван­ная тема для Bootstrap, а пол­ностью самос­тоятель­ный про­ект со сво­им набором CSS (SASS) или JS-вид­жетами. В нем есть прак­тичес­ки все необ­ходимые ком­понен­ты: Typography, Grid, Forms, Buttons, Navbar, Cards, Tooltips, Modals, Dropdowns и дру­гие. А отли­читель­ными осо­бен­ностя­ми будут фир­менные Wave-эффект на кноп­ках, MediaBox (лай­тбокс) и Parallax из короб­ки.

 

Interact.js

https://github.com/taye/interact.js

Мощ­ней­шая биб­лиоте­ка для работы с drag and drop, resizing и муль­титач‑жес­тами на дес­ктоп­ных и мобиль­ных устрой­ствах. Дроп­зоны, коор­динаты при­тяже­ния эле­мен­тов, отска­кива­ющие эффекты, мно­жес­тво методов, куча опций и обра­бот­чики событий на любое дей­ствие. И самое глав­ное — для это­го тебе не пот­ребу­ется под­клю­чать сто­рон­ние скрип­ты и теперь мож­но при­лич­но сэконо­мить на связ­ке jQuery + jQuery UI. Interact.js работа­ет во всех сов­ремен­ных бра­узе­рах: Chrome, Firefox, Opera и Internet Explorer 8+.

 

PerfMap

https://github.com/zeman/perfmap

Те­ма про­изво­дитель­нос­ти веб‑стра­ниц была акту­аль­на всег­да, но вви­ду рос­та мобиль­ной интернет‑ауди­тории и совер­шенс­тво­вания поис­ковых алго­рит­мов эта тема ста­ла еще популяр­нее сре­ди раз­работ­чиков. PerfMap — замеча­тель­ный инс­тру­мент, который поз­воля­ет с помощью теп­ловых карт и Resource Timing API визу­али­зиро­вать дли­тель­ность заг­рузки раз­личных эле­мен­тов на стра­нице. Так­же PerfMap может работать как бук­мар­клет и рас­ширение для Chrome.

 

JuliusJS

https://github.com/zzmp/juliusjs

Биб­лиоте­ка для рас­позна­вания речи в режиме реаль­ного вре­мени, JavaScript-порт open source про­екта Julius. Без зависи­мос­тей, прос­той и понят­ный API, не тре­бует никаких допол­нитель­ных решений на сер­вере. На дан­ный момент под­держи­вает толь­ко англий­ский язык. Приз­нать­ся, я не вос­хищен резуль­татами тес­тов, но если на то пош­ло, то и Siri ред­ко уда­ется рас­познать фра­зы с моим рус­ским акцентом. Но даже как кон­цепт про­ект опре­делен­но зас­лужива­ет вни­мания в нашей под­борке.

var julius = new Julius();
julius.onrecognition = function(sentence) {
console.log(sentence);
};
// say "Hello, world!"
// console logs: `> HELLO WORLD`
 

ICEcoder

https://github.com/mattpass/ICEcoder

Ве­лико­леп­ный бра­узер­ный редак­тор с под­дер­жкой более 60 язы­ков: HTML, CSS, LESS, SASS, JS, Coffee, PHP, RonR, Python, C/C++/C#, Java, Lua, Rust, SQL, Markdown и дру­гих! Гра­мот­ный интерфейс и ряд удоб­ных UX-решений, Emmet, авто­обновле­ние стра­ницы, абсо­лют­но бес­плат­ная воз­можность сов­мес­тной работы над кодом, интерфейс для работы с БД, колопи­кер, лин­теры, diff tool и мно­гое дру­гое. Вооб­ще есть вер­сии под Linux, Mac и Windows, но я сде­лал акцент на веб, потому что теперь есть воз­можность пос­тавить ICEcoder на свой сер­вер и редак­тировать что угод­но отку­да угод­но.

 

sequelize-compass

https://github.com/finnishprince/sequelize-compass

Sequelize-compass — это авто­гене­риру­емая низ­коуров­невая админка для любого при­ложе­ния, работа­юще­го на свер­хпо­пуляр­ной ORM Sequelize. Логика работы sequelize-compass похожа на Django: в config-объ­екте ты крат­ко перечис­ляешь все модели с их атри­бута­ми и ассо­циациями, которые необ­ходимо редак­тировать, а sequelize-compass выс­тро­ит удоб­ный интерфейс со спис­ком инстан­сов каж­дой модели и поз­волит отре­дак­тировать атри­буты и ассо­циации каж­дого. На сегод­няшний день под­держи­вают­ся атри­буты STRING (and TEXT), INTEGER, TIMESTAMP WITH TIME ZONE, INTEGER[] для PostgreSQL, BOOLEAN и ENUM. Из ассо­циаций пока дос­тупны толь­ко hasMany и belogsTo, но ско­ро появит­ся и hasOne.

Sequelize-compass встра­ивает­ся в основное при­ложе­ние на базе Express 3/4 и добав­ляет в роутинг свои URL вида:

  • http://app.com/:admin/:model_name/add
  • http://app.com/:admin/:model_name/:id

По­луча­ется что‑то вро­де http://app.com/myadmin/book/34 для редак­тирова­ния инстан­са модели Book с id=34.

Те­кущая вер­сия сов­мести­ма уже толь­ко с самой новой Sequelize 2.0.0-rc2. Абсо­лют­ный must have для всех, кто работа­ет с Sequelize (PostgreSQL/MySQL) на Node.js!

 

Lazysizes

https://github.com/aFarkas/lazysizes

На мой взгляд, это луч­ший скрипт для ленивой под­груз­ки. Он мак­сималь­но прост в уста­нов­ке и может работать без каких‑либо кон­фигура­ций, дос­таточ­но ука­зать класс lazyload для тре­буемых эле­мен­тов. Авто­мати­чес­ки опре­деля­ет видимость эле­мен­та при скрол­ле, при CSS :hover, а так­же при любом дру­гом поведен­ческом фак­торе (карусель, бес­конеч­ный скрол­линг, AJAX). Под­держи­вает отзывчи­вые изоб­ражения с помощью picture, srcset и спе­циаль­ных data-атри­бутов. Ну и плюс ко все­му — очень лаконич­ный код, обес­печива­ющий мак­сималь­ную про­изво­дитель­ность.

<!-- responsive example with automatic sizes calculation: -->
<img data-sizes="auto"
src="lqip-src.jpg"
data-srcset="lqip-src.jpg 100w,
image2.jpg 300w,
image3.jpg 600w,
image4.jpg 900w" class="lazyload" />
<!-- iframe example -->
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
 

Walkway.js

https://github.com/ConnorAtherton/walkway

Очень кру­той эффект для ани­мации SVG-изоб­ражений, сос­тоящих из кон­туров. Гру­бо говоря, Walkway отри­совы­вает объ­екты, буд­то их кто‑то рису­ет рукой. Это надо уви­деть. При­мер исполь­зования:

// Create a new instance
var svg = new Walkway(options);
// Draw when ready, providing an optional callback
svg.draw(callback);
// Options passed in as an object, see options below.
var svg = new Walkway({ selector: '#test'});
// Overwriting defaults
var svg = new Walkway({
selector: '#test',
duration: '2000',
// can pass in a function or a string like 'easeOutQuint'
easing: function (t) {
return t * t;
}
});
svg.draw();
// If you don’t want to change the default options you can
// also supply the constructor with a selector string.
var svg = new Walkway('#test');
svg.draw(function() {
console.log('Animation finished');
});
 

SoundManager2

https://github.com/scottschiller/SoundManager2

Фун­кци­ональ­ный API для работы со зву­ком на JavaScript. Для пол­ной сов­мести­мос­ти со все­ми бра­узе­рами, в том чис­ле и мобиль­ными, в осно­ве про­екта лежит связ­ка тех­нологий Flash и HTML5. SoundManager под­держи­вает боль­шинс­тво ауди­офай­лов (MP3, MP4/AAC, WAV/OGG и дру­гие), потоко­вое вещание RTMP и раз­личные эле­мен­ты управле­ния. Биб­лиоте­ка исполь­зует­ся на таких про­ектах, как Songza, Last.fm, Earbits, Freesound, 8tracks.

soundManager.createSound({
id: 'mySound',
url: '/path/to/some.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
alert('The sound '+this.id+' loaded!');
},
volume: 50
});

  • Подпишись на наc в Telegram!

    Только важные новости и лучшие статьи

    Подписаться

    • Открыть комментарии
    Подписаться
    Уведомить о
    0 комментариев
    Межтекстовые Отзывы
    Посмотреть все комментарии