ExpandJS

http://www.expandjs.com

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

Вернемся к ExpandJS. Это большой проект, который содержит в себе более 80 подобных элементов и свыше 350 JavaScript-функций для работы с ними. Плюс ко всему все они оформлены в стиле популярного Material Design, хотя также существуют как абстрактные объекты.

Пример разметки в соответствии с типом устройства:

<!-- Import elements -->
<link rel="import" href="../xp-device/xp-device.html">

<!-- Detecting the device -->
<xp-device type="{{type}}" mobile="{{mobile}}"></xp-device>

<!-- Output -->
<div>Form factor: {{type}}</div>
<div>Mobile device: {{mobile ? 'yes' : 'no'}}</div>

Пример разметки страницы с выпадающим сайдбаром:

<!-- Import elements -->
<link rel="import" href="../mat-content.html">
<link rel="import" href="../mat-drawer.html">
<link rel="import" href="../mat-header-panel.html">
<link rel="import" href="../mat-shell.html">

<!-- Application scaffold -->
<mat-shell theme="...">

    <mat-drawer>...</mat-drawer>

    <mat-header-panel>
        <mat-header>...</mat-header>
        <mat-content>...</mat-content>
    </mat-header-panel>

    <mat-drawer right>...</mat-drawer>

</mat-shell>
 

Electron

http://electron.atom.io

В прошлых выпусках мы писали про 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-функций и максимально прост в использовании:

<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
<div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>

<script src='ramjet.js'></script>
<script>
    // to repeat, run this from the console!
    ramjet.transform( a, b );
</script>
 

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 = ['<tr>…</tr>', '<tr>…</tr>', …];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});
 

Playcanvas

https://playcanvas.com/

Весьма интересный проект. Во-первых, Playcanvas — это игровой движок для JavaScript c качественным WebGL 3D рендерингом, светотенями, грамотной физикой и поддержкой моделей из Maya, 3ds Max, Blender. Во-вторых, это еще целая игровая платформа для игроков и разработчиков. Гейм-девелоперы могут форкать, старить понравившиеся наработки по аналогии с GitHub.

<script>
    // Create a PlayCanvas application
    var canvas = document.getElementById("application-canvas");
    var app = new pc.Application(canvas, {});
    app.start();

    // Fill the available space at full resolution
    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    app.setCanvasResolution(pc.RESOLUTION_AUTO);

    // Create box entity
    var cube = new pc.Entity();
    cube.addComponent("model", {
        type: "box"
    });

    // Create camera entity
    var camera = new pc.Entity();
    camera.addComponent("camera", {
        clearColor: new pc.Color(0.1, 0.1, 0.1)
    });

    // Create directional light entity
    var light = new pc.Entity();
    light.addComponent("light");

    // Add to hierarchy
    app.root.addChild(cube);
    app.root.addChild(camera);
    app.root.addChild(light);

    // Set up initial positions and orientations
    camera.setPosition(0, 0, 3);
    light.setEulerAngles(45, 0, 0);

    // Register an update event
    app.on("update", function (deltaTime) {
        cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
    });
</script>
 

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 и многими другими библиотеками.

<div id="form">
 <input type="text" id="name" />
 <input type="range" id="age" />
</div>

var data = {
 name: "Luke Skywalker",
 age: 46
};

$("#form").my({ui:{
 "#name": "name",
 "#age": "age"
}}, data);

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