Итоги 2013

xtpl.ru — Simple. Easy. Quickly. (draft)
Pilot — multifunction JavaScript router
FileAPI 2.0 — Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.
jQuery.FileAPI  — jquery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)
Sortable — is a minimalist JavaScript library for modern browsers and touch devices (No jQuery).
callStack — JavaScript call stack controller.
Error.stack — Interface for analyzing the stack.
jquery.classList.js — jQuery extension, add support `classList`.
jquery.event.scroll.js — jQuery extension, add support `scrollstart` and `scrollend` events.
jquery.leaks.js — Watcher leaks for jQuery.

Sortable — is a minimalist JavaScript library for modern browsers and touch devices. No jQuery.


Features
  • Support touch devices
  • Built using native HTML5 drag and drop API
  • Simple API
  • Lightweight, 2KB gzipped
  • No jQuery


Error.stack

Собрали ошибки с клиента, но что делать дальше?
http://rubaxa.github.io/Error.stack/ — это простой инструмент, для анализа стека.

Pilot: a multifunctional JavaScript router

With every passing day websites are becoming increasingly complex and dynamic and simply making the interface live is usually not enough – we often need to create a full-fledged one-page application. A great example of such application is any webmail (take Mail.Ru. for example), where clicking on a link doesn’t reload the page, but rather changes representation. This means that the task of data retrieval and display, depending on the route, which has always been the prerogative of the server, is now the responsibility of the client. This problem is usually solved with a simple router, based on regular expressions, and isn’t developed any further, while at the back-end this topic is paid a lot more attention. In this article I’ll make an attempt to fill this gap.


The controller of callStack

A highly specialized tool for micro management and organization flows. It can be useful :]

https://github.com/RubaXa/callStack

Pilot v1.3.0: access permission for "route"

Finally got around to Pilot. Now you can set the access rights for the route, all very comfortable and intuitive.

http://rubaxa.github.io/Pilot/?#ru/Pilot.Route.accessPermission

A noisy background

/**
 * @param  {HTMLElement}  el    target element
 * @param  {String}      color       background color
 * @param  {Number}   width      noise pattern width
 * @param  {Number}   height     noise pattern height
 * @param   {Number}   opacity    noise opacity
 */
function setNoiseBackground(el, color, width, height, opacity){
var canvas   = document.createElement("canvas");
  var context  = canvas.getContext("2d");

canvas.width = width;
canvas.height = height;

for( var i = 0; i < width; i++ ){
  for( var j = 0; j < height; j++ ){
    var val = Math.floor(Math.random() * 255);
    context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
    context.fillRect(i, j, 1, 1);
  }
}

el.style.backgroundColor = color;
el.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}

// Usage
setNoiseBackground(document.body, "#F4F5EC", 50, 50, 0.01);

Simple. Easy. Quickly.


Полностью переработан движок, компиляция стала быстрей (в разы), улучшен биндинг, разработан альтернативный синтаксис и ещё много чего!

jQuery.FileAPI — v0.1.0

jQuery plugin для FileAPI, умеет:

  1. Грузить сразу много файлов, либо по одному
  2. Загружать изображения и обрабатывать их на клиенте (например кроп)
  3. Гибкие настройки (их очень много)
  4. Это очень крутая штука

Demo — rubaxa.github.io/jquery.fileapi/
GitHub — https://github.com/RubaXa/jquery.fileapi/

Возможностей и правду много, посмотрите примеры, вам понравится.


P.S. Есть возможность сделать снимок с помощью WebCamera, кадрировать, повернуть и  всё это на клиенте, с поддержкой старых браузеров, а результат загрузить на сервер.