Содержание статьи
ExpandJS
Если ты еще не в курсе того, что такое веб-компоненты, то рекомендую срочно загуглить. Благо уже и русскоязычных статей по этому поводу написано немало. Если вкратце, это стандарт, который позволяет создавать собственные изоморфные HTML-элементы, со своей логикой работы.
Вернемся к ExpandJS. Это большой проект, который содержит в себе более 80 подобных элементов и свыше 350 JavaScript-функций для работы с ними. Плюс ко всему все они оформлены в стиле популярного Material Design, хотя также существуют как абстрактные объекты.
Пример разметки в соответствии с типом устройства:
Пример разметки страницы с выпадающим сайдбаром:
...
...
...
...
Electron
В прошлых выпусках мы писали про NativeScript и React Native для разработки аппов для мобильных операционных систем средствами на веб-технологиях. Сегодня речь пойдет об Electron, который позволяет писать кросс-платформенные десктопные приложения также с помощью HTML, CSS и JavaScript. Electron, ранее известный как Atom Shell, разработан командой GitHub. Проект автоматически обновляется, сообщает об ошибках, обеспечивает набор инструментов для дебаггинга и профилирования, предоставляет доступ к нативным меню операционных систем и центру уведомлений. В его основе лежит io.js и движок Chromium. Помимо того, что на нем написан гитхабовский редактор Atom, проект активно используется такими компаниями, как Docker, Slack, Facebook, Microsoft. Кстати, о последней: для Electron есть и Windows-инсталлер.
Globalize
https://github.com/jquery/globalize
Функциональная библиотека, предназначенная для интернационализации и локализации проектов для Node.js и браузеров. Globalize удобным способом позволяет форматировать и парсить дату, валюты и непосредственно сам контент. Все данные предоставляются в формате Unicode CLDR JSON, а код содержится отдельно от i18n.
Ramjet
https://github.com/rich-harris/ramjet
Потрясающий скрипт, который производит плавную трансформацию элементов из одного состояния в другое. Причем это не только для SVG, но еще изображения и DOM-узлы со всеми дочерними элементами. Ramjet содержит коллекцию easing-функций и максимально прост в использовании:
a
b
Vault
https://github.com/hashicorp/vault
Секьюрное хранилище твоих данных, написанное на Go. Vault защищает и хранит токены, пароли, сертификаты, API и другие секреты и управляет всем этим. Проект предоставляет унифицированный API для доступа к серверной части: HSMs, AWS IAM, SQL и другие. Хочу обратить твое внимание на то, что, помимо подробнейшей документации, разработчики создали краткий интерактивный курс, обучающий работе с Vault.
Clusterize.js
https://github.com/NeXTs/Clusterize.js
Миниатюрный скрипт для быстрой отрисовки огромного количества данных. Представь таблицу с 500 тысячами строчек и подвисания браузера при ее рендеринге. С Clusterize не будет никаких лагов. А достигается это все за счет разбиения элементов на кластеры, которые показываются на определенной позиции скроллинга, и создания искусственных отступов сверху и снизу. Ограничения:
- WebKit/Blink 134 217 726 px;
- Gecko 10 737 418 px;
- Trident 17 895 697 px.
// JavaScript
var data = ['… ', '… ', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});Playcanvas
Весьма интересный проект. Во-первых, Playcanvas — это игровой движок для JavaScript c качественным WebGL 3D рендерингом, светотенями, грамотной физикой и поддержкой моделей из Maya, 3ds Max, Blender. Во-вторых, это еще целая игровая платформа для игроков и разработчиков. Гейм-девелоперы могут форкать, старить понравившиеся наработки по аналогии с GitHub.
JSON Server
https://github.com/typicode/json-server
Превосходная разработка в помощь фронтендерам, которые нуждаются в быстром прототипе серверной части для получения ответов в формате JSON. Проект позволяет создать полноценный REST API без кода буквально за полминуты.
Создаем файл db.json:
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
]
}Запускаем JSON-сервер:
$ json-server --watch db.jsonИ теперь если мы перейдем на localhost:3000/posts/1, то получим:
{ "id": 1, "title": "json-server", "author": "typicode" }Egg.js
http://thatmikeflynn.com/egg.js
Пасхальные яйца — это различные приколы от разработчиков, встраиваемые в игры, программы и сайты. UX-эксперты достаточно часто описывают пасхалки в положительном ключе. В общем, Egg.js — это миниатюрная библиотека для создания пасхалок, которая следит за различными клавиатурными событиями.
var egg = new Egg();
egg
.addCode("up,up,down,down,left,right,left,right,b,a", function() {
jQuery('#egggif').fadeIn(500, function() {
window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000);
}, "konami-code");
})
.addHook(function(){
console.log("Hook called for: " + this.activeEgg.keys);
console.log(this.activeEgg.metadata);
})
.listen();jQuery.my
https://github.com/ermouth/jQuery.my
jQuery.my — плагин для дата-биндинга форм в режиме реального времени. Скрипт преобразовывает объект, переданный как источник данных, отражая взаимодействие пользователя с интерфейсом. jQuery.my прекрасно работает и не конфликтует с Query UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile и многими другими библиотеками.
var data = {
name: "Luke Skywalker",
age: 46
};
$("#form").my({ui:{
"#name": "name",
"#age": "age"
}}, data);
