Мы живем в прек­расном мире, где прог­раммис­ты не стес­няют­ся вык­ладывать раз­личные вкус­ности в паб­лик — нуж­но лишь знать, где их искать. Дос­таточ­но поб­родить по GitHub и дру­гим пло­щад­кам для раз­мещения кода, и ты най­дешь решение для любой проб­лемы. Даже для той, которой у тебя до это­го момен­та и не было.
 

Face detection

https://github.com/jaysalvat/jquery.facedetection

Суть это­го замеча­тель­ного скрип­та, в прин­ципе, понят­на из наз­вания. Facedetection поз­воля­ет с помощью JavaScript опре­делять челове­чес­кие лица не толь­ко на фотог­рафи­ях, но еще на видео и canvas-объ­ектах. Биб­лиоте­ка сущес­тву­ет как пла­гин к jQuery и Zepto. Facedetection мак­сималь­но прост в при­мене­нии:

<script>
$('#picture').faceDetection({
complete: function (faces) {
console.log(faces);
}
});
</script>
 

Pixi.js

https://github.com/GoodBoyDigital/pixi.js

Очень мощ­ный и одновре­мен­но эко­номич­ный 2D-дви­жок для JavaScript. Авто­ры про­екта позици­они­руют его как 2D-ана­лог Three.js, и, хотя основной акцент при раз­работ­ке делал­ся на даль­нейшее при­мене­ние в игро­вой сфе­ре, Pixi.js оста­ется дос­таточ­но низ­коуров­невым, что­бы его мож­но было исполь­зовать вез­де, где тре­бует­ся насыщен­ная 2D-ани­мация. Биб­лиоте­ка авто­мати­чес­ки опре­деля­ет спо­собы рен­дерин­га, перек­люча­ясь на Canvas в слу­чае отсутс­твия под­дер­жки WebGL. Для пущей уве­рен­ности при выборе Pixi.js рекомен­дую взгля­нуть на стра­ницу с про­екта­ми, осно­ван­ными на этом движ­ке, где ты встре­тишь мас­су уди­витель­ных при­меров от мировых брен­дов.

 

Gridforms

https://github.com/kumailht/gridforms

Как‑то сло­жилось так, что каж­дый бэкен­дер пыта­ется написать свою собс­твен­ную CMS, а каж­дый фрон­тендер — свой собс­твен­ный CSS-фрей­мворк. И того и дру­гого сущес­тву­ет огромное мно­жес­тво. Но Gridform при­меча­телен тем, что он сфо­куси­рован толь­ко на отзывчи­вых фор­мах и пред­став­ляет собой изящ­ное UI/UX-решение в виде клас­сичес­ких бумаж­ных форм для запол­нения.

 

Sharedrop

https://github.com/cowbell/sharedrop

Дан­ная раз­работ­ка, воз­можно, не име­ет осо­бой прак­тичес­кой цен­ности, но в любом слу­чае зас­лужива­ет вни­мания в этой под­борке как реали­зация. Дело в том, что Sharedrop — это веб‑клон яблочно­го AirDrop — P2P-сер­виса для переда­чи фай­лов. Про­ект пос­тро­ен на тех­нологии WebRTC и Firebase. Работа­ет в дес­ктоп­ных и мобиль­ных вер­сиях Chrome 33+, Opera 20+, Firefox 28+.

 

Nunjuck

https://github.com/mozilla/nunjucks

От­личный шаб­лониза­тор от ком­пании Mozilla. Фак­тичес­ки это JavaScript-порт популяр­ного Jinja2 из Python. Основные фичи: механизм нас­ледова­ния, поз­воля­ющий изба­вить­ся от излишней дуб­ликации, филь­тры для обра­бот­ки вывода, асин­хрон­ный вызов, мак­росы и модуль­ность биб­лиоте­ки. Говоря о про­изво­дитель­нос­ти, сто­ит пом­нить, что все тес­ты дос­таточ­но условны и зависят от кон­крет­ных шаб­лонов и динами­чес­ких дан­ных. Но Nunjuck чаще встре­чает­ся в пер­вой трой­ке с Dust и Swig.

 

Turf.js

https://github.com/Turfjs/turf

Мо­дуль­ный геоп­рос­транс­твен­ный дви­жок для Node.js и бра­узе­ров. Turf работа­ет бла­года­ря GeoJSON и сос­тоит из нес­коль­ких десят­ков мини‑ком­понен­тов, поз­воля­ющих про­изво­дить раз­личные опе­рации над Open Street Map: прок­ладывать мар­шру­ты, опре­делять рас­сто­яние меж­ду точ­ками на кар­те, отри­совы­вать области по коор­динатам в фор­ме раз­личных фигур, объ­еди­нять их, находить цен­траль­ные позиции и так далее.

При­мер выделе­ния области на кар­те:

<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.ey...8OEerk74AYCLduMZQ';
var polygon = turf.polygon([
[
[-97.42675781249999, 33.82023008524739], [-97.2125244140625, 33.89321737944089 ],
...
[-97.646484375, 33.97980872872457], [-97.42675781249999, 33.82023008524739]
]
], {
"fill": "#6BC65F",
"stroke": "#6BC65F",
"stroke-width": 5
});
var map = L.mapbox.map('map', 'morganherlocker.kgidd73k')
.setView([35.463453, -97.514914], 6)
.featureLayer.setGeoJSON(polygon);
</script>
 

TremulaJS

https://github.com/garris/TremulaJS

Picture Streams + Momentum Engine + Bézier Paths + Multi-Device. Пот­ряса­ющий скрипт галереи, а точ­нее даже UI-ком­понент, обес­печива­ющий ани­мацию Безье для потоко­вого кон­тента при скрол­линге, кли­ках или тач‑событи­ях. Tremula по прин­ципу Velocity син­хро­низи­рует DOM и кеширу­ет зап­росы, что обес­печива­ет высокую про­изво­дитель­ность для боль­ших наборов визу­аль­ных дан­ных. Под­держи­вает­ся все­ми сов­ремен­ными бра­узе­рами. Для кор­рек­тной работы необ­ходимы jQuery, Hammer.js и jsBezier. А еще для Tremula есть онлайн‑конс­трук­тор с демонс­тра­цией воз­можнос­тей биб­лиоте­ки. Выг­лядит все дей­стви­тель­но впе­чат­ляюще.

 

Snabbt.js

https://github.com/daniel-lundin/snabbt.js

Еще одна при­меча­тель­ная ани­маци­онная биб­лиоте­ка в сегод­няшней кол­лекции. Snabbt.js — очень мини­атюр­ный (4 Кб минифи­циро­ван­ный и в gzip), быс­трый (60 FPS даже на мобиль­никах) инс­тру­мент, который поз­воля­ет тво­рить уди­витель­ные вещи, базиру­ющиеся на воз­можнос­тях CSS. То есть вся ани­мация осно­вана на манипу­ляции со свой­ства­ми translate, rotate, scale, skew и resize. Работа­ет так­же во всех сов­ремен­ных бра­узе­рах.

snabbt(element, {
position: [100, 0, 0],
easing: 'ease'
}).then({
fromRotation: [0, 0, -2*Math.PI],
easing: 'spring',
springConstant: 0.2,
springDeaccelaration: 0.95,
});
 

PSI

https://github.com/addyosmani/psi

Удоб­ная command line ути­лита для Page Speed Insights, написан­ная на ноде зна­мени­тым раз­работ­чиком Эдди Осма­ни (Addy Osmani). Для тех, кто не в кур­се, Page Speed Insights — это инс­тру­мент от Google для оцен­ки про­изво­дитель­нос­ти тво­его сай­та на дес­кто­пе и мобиль­ных устрой­ствах. В эпо­ху постПК и мобиль­ного интерне­та тема про­изво­дитель­нос­ти очень важ­на не толь­ко для самих поль­зовате­лей, но так­же с точ­ки зре­ния индекси­рова­ния поис­ковыми машина­ми.

npm install --save psi
psi example.com

или

var psi = require('psi');
// get the PageSpeed Insights report
psi('html5rocks.com', function (err, data) {
console.log(data.score);
console.log(data.pageStats);
});
// output a formatted report to the terminal
psi.output('html5rocks.com', function (err) {
console.log('done');
});
 

Focusable

https://github.com/zzarcon/focusable

Прос­той скрипт, который выпол­няет одну прос­тую задачу — про­изво­дит фокус на эле­мент. Воз­можно, кому‑нибудь при­годит­ся, дабы сос­редото­чить взгляд поль­зовате­ля на кон­крет­ной области. А для соз­дания пол­ноцен­ных пошаго­вых инс­трук­ций к интерфей­су наилуч­шим решени­ем будет Intro.js, который соб­рал более 8000 ста­ров (https://github.com/usablica/intro.js/).

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

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

    Подписаться

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