Итоги 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

http://rubaxa.github.com/Sortable/

Error.stack

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

FileAPI 2.0: Загрузка файлов на сервер год спустя

http://habrahabr.ru/company/mailru/blog/201010/

• FileAPI: примеры  |  исходники  |  issues
• jQuery.FileAPI: примеры  |  исходники  |  issues

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.

http://xtpl.ru/

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

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, кадрировать, повернуть и  всё это на клиенте, с поддержкой старых браузеров, а результат загрузить на сервер.

xtpl: первые наброски полноценного синтаксиса

1. Цветовая схема — http://t.co/zz7nixbVMZ
2. Теги и управляющие конструкции — http://t.co/MoEbaxHc1k
3. Атрибуты — http://t.co/us7Co4coIE
4. События — http://t.co/nrDJiUPOZ8

jQuery extension, add support `classList`.

GitHub — https://gist.github.com/RubaXa/5575339
jsPerf — http://jsperf.com/classlist-jquery/2

Pilot: v1.2.0

New features

• req — now the instance of Pilot.Request.
• Added Pilot.utils
• each(el/**Object|Array*/, fn/**Function*/[, thisArg/**Mixed*/])
• extend(a/**Object*/, b/**Object*/)/**Object*/
• qs.parse(queryString/**String*/)/**Object*/
• qs.stringify(params/**Object*/)/**String*/

http://rubaxa.github.io/Pilot/

jQuery extension, add support `scrollstart` and `scrollend` events.

/**
 * @flags
 * $.isScrolled; // boolean
 *
 * @binding
 * $(window).bind('scrollstart scrollend', function (evt){
 *     if( evt.type == 'scrollstart' ){
 *         // logic
 *     }
 * });
 */
https://gist.github.com/RubaXa/5569075

Pilot: Now in English

Multifunctional JavaScript router solves the problem of routing your application, providing full control over the route. It can work either by itself or as a part of other framework, such as Backbone, in which it could be an excellent substitute for the standard Backbone.Router and even Backbone.View. Just try it.


npm — https://npmjs.org/package/pilotjs
GitHub — https://github.com/RubaXa/Pilot
Documentation — http://rubaxa.github.com/Pilot/#en/

Все проще, чем кажется

function foo(el/**Mixed*/){

    if( el && el.jquery ){

        // это jQuery коллекция

        el = el[0];

    }

   /*__*/

}

Pilot: многофункциональный javascript роутер

http://habrahabr.ru/company/mailru/blog/172333/
http://rubaxa.github.com/Pilot/
https://github.com/rubaxa/Pilot/

jQuery: memory leaks

Думаю, для многих не секрет, что при назначении обработчика события, в `jQuery.cache` добавляется ссылка на этот элемент. И если вовремя не снять слушателя, это приведет к утечке памяти.

Чаще всего, такая проблема возникает, если работать с DOM напрямую, минуя методы jQuery, например, используя innerHTML.         

<div id=”layout”>
        <button>click me</button>
</div>

<script>
        // Вешаем обработчик
        $(‘button’).click(function (){
                    // Загружаем какой-то html
                    $.get(‘/layout’, function (content){
                                // Заменяем текущие содержание на новое
                                $(‘#layout’).prop(‘innerHTML’, content );
                    });

});

</script>

В примере содержимое `#layout` заменяется и ссылка на элемент `button` «застревает» в `jQuery.cache`. Если перед заменой, вызвать `$(‘#layout’).empty()`, то утечки не будет.

Причина использования `innerHTML` в медленной работе jQuery методов. Случается, что при вызове $.fn.html/append (и подобных), браузер подвисает намертво.

Однако использование методов jQuery, для работы с DOM, не гарантирует, что утечки не будет.

Проблемы можно получить даже в достаточно просто коде:

$(new Image)
.attr(“src”, “http://domain.com/fail.png”)
.one(“load”, function (){ /*__*/ })

;

На первый взгляд, код безопасен, но происходит ошибка и событие `load` не отрабатывает — код “потек”.

В полной мере, проблему можно прочувствовать при разработке одностраничного приложения, где даже незначительная утечка, со временем приводит к краху браузера.

Чтобы избежать таких ситуаций, я разработал маленькую утилиту, которая следит за объектом `jQuery.cache` и элементами, находящимися в нем. Если элемент не находиться в DOM, то он считается “утёкшим”.

Утилита содержит всего четыре метода:

• $.leaks.get() — получить список “утёкших” элементов;
• $.leaks.watch() — начать слежение за утечками, если они возникают в console будет выведено количество “утёкших” элементов (“jQuery leaks: XX”);
• $.leaks.unwatch() — остановить слежение;
• $.leaks.remove() — удалить “утечки” (вызов `$.clearData($.leaks.get())`).

Надеюсь данная утилита будет вам полезна.

Исходник — jquery.leaks.js

jQuery: Global EventEmitter

// Подписываемся
$(document).on('my-event-name', function (evt, arg1, arg2, etc){
    console.log('foo:', arg1);
    console.log('bar:', arg2);
    console.log('etc:', etc);
});


// Испускаем
$.event.trigger('my-event-name', 'FOO', 'BAR', 'QUX');

FileAPI: version 1.2.3

// Support:
//   +  Chunked file upload (HTML5)
https://github.com/mailru/FileAPI#chunked

Opera 12.14, Mac: onDrop fail

// А перед тем, как мы перейдем на WebKit, сломаем всё к хуям!
http://jsfiddle.net/RubaXa/Ga8QQ/

xtpl.ru

// А теперь танцы (добавил описание api)
http://xtpl.ru/

xtpl

Я знаю, что этого не нужно делать в субботу вечером, но не удержался, первый черновик, первая радость :]

Встречайте, xtpl — http://rubaxa.github.com/xtpl.ru/

P.S. Глючи, хуйючит — это нормально :]
P.S.S. Последний раз проверял только в Chrome :] Но должно работать и в IE6.