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

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.

 

Nightrain

https://github.com/naetech/nightrain

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

 

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];

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

 

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();
 

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>
 

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.

 

Handsontable

https://github.com/handsontable/handsontable

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

 

Front-end Job Interview Questions

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

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

 

SVG Morpheus

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

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

 

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+.

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