Уже второй год я участвую в JS1k, в прошлом году был пробный скрипт, сейчас я решил подойти основательно. Приложения я уже написал и отправил. В статье я хочу поделиться своим опытом: как стоит писать приложение для JS1k, чем сжимать, как сократить код в 4 раза и вообще как впихнуть что-то интересное в 1 Кб.

Тема текущего JS1k «Oregon Trail» — классическая игра для Apple II (что это можно нагуглить). Поэтому рекомендуется написать что-то в этом духе, но это не обязательно.

Начало

Вам необходимо придумать небольшое приложение или демку, которое по вашему мнению может влезть в 1кб (продумать детали и управление). Если вы сомневаетесь в своих прикидках, то можно посмотреть, что впихнули в прошлом году: Legend Of The Bouncing Beholder, Tiny chess. Прочитайте правила и используйте html шаблон — тогда ваше приложение будет 100% работать в демо среде.
Начните писать скрипт, без каких-либо оптимизаций, но следите за его размером. Если он стал больше 4-5Кб — вам стоит придумать другую тему или в будущем придется попотеть (у меня было 4393 байт).

Первичная упаковка кода

Ваш код должен быть в замыкании, иначе ничего не получится. Из всех существующих упаковщиков лучший — UglifyJS на все остальные можно не смотреть. Если вам лень ставить UglifyJS, то используйте веб-интерфейс.
Упакуйте ваш код, если он получился в пределах 1024 байт — отлично — можно дальше не читать, а сразу отправить приложение. То, что ваш код сразу влез в 1024 байт говорит о том, что ваше приложение не достаточно интересное или не детализированное. Если ваш ужатый код стал в пределах 2Кб — все нормально не стоит делать таких глаз «о_О», уверяю вас его можно сократить ещё в 2 раза (у меня было около 1600 байт).

Ручное сжатие или сжимаем несжимаемое

Эта часть об ручном сжатии тех моментов, которые не умеет UglifyJS. Сейчас важен каждый байт!
Каждый раз когда вы что-то исправили упаковывайте код UglifyJS и смотрите размер. Проверяйте, чтобы все работало.

0. Не стоит делать работу за минификатор — срочно дайте понятные названия всем свойствам/функциям! Пишите читаемый код, минификатор удалит лишние скобки и точки с запятой за вас.
1. Если вы точили под IE — удалите все хаки — он не участвует (ch9+, o11+, fx3.6+, sa5+).
2. Удалите все хаки (дописанные функции bind, forEach), да прямо сейчас.
3. Вам надо избавиться от зарезервированных слов — удаляйте лишние var, typeof. Сократите число функций до минимума (объедините если возможно).
4. Весь HTML, созданный через DOM, перепишите на ручное создание(строки).
5. Найдите часто употребляемые имена методов свойств (2 и более раза) и строковые и числовые константы — составьте словарь и замените точечный вызов на скобочный.

// Было:
var canvas, div1, div2;
canvas.moveTo(150, 150);
canvas.moveTo(153, 151);
canvas.moveTo(11, 151);
canvas.moveTo(153, 120);
canvas.moveTo(153, 1);
div1 = '<div style="width:150px;height:200px;color:red"></div>';
div2 = '<div style="width:150px;height:200px;color:blue"></div>';

// Стало:
var canvas, div1, div2,
      __moveTo__ = 'moveTo';
      __width_height__ = 'width:150px;height:200px;';
canvas[__moveTo__](150, 150);
canvas[__moveTo__](153, 151);
canvas[__moveTo__](11, 151);
canvas[__moveTo__](153, 120);
canvas[__moveTo__](153, 1);
div1 = '<div style="' + __width_height__ + 'color:red"></div>';
div2 = '<div style="' + __width_height__ + 'color:blue"></div>';

Формула показывающая на сколько сократится код
Для методов: (N * (L+1)) - (N * (2 + V) + V + 4 + L)
L — длина метода без точки
N — число вызовов
V — длина переменной после уменьшения минификатором (обычно 1)
В нашем случае мы получим 9 байт

Для строк (в худшем случае): N * L - (N * (4 + V) + V + 4 + L)
L — длина строки
N — число замен
V — длина переменной после уменьшения минификатором (обычно 1)
В нашем случае мы получим 13 байт

6. Вынесите часто используемые глобалы в переменную var __document__ = document;
7. Не используйте with
8. Используйте только глобальные переменные вашего замыкания
9. Замените циклы for на while, избавьтесь от оптимизаций счетчиков c = smth.length

// Было:
for (i = 0;i<smth.length; i++)do(i);

// Стало:
i=smth.length;while(i--)do(i);

Ещё минус 6*N байт
10. Если вы создаете функции через Function Expression var blabla= function (){}; переделайте их в Function Defination function blabla(){} Ещё минус пара байт.
11. Вместо getElementById, getElementsByTagName используйте querySelector, querySelectorAll
12. Вместо Math.round(num) используйте ~~num
13. Удалите двойные и одинарные кавычки из атрибутов вашего HTML кода <div id="aaa"> - <div a=aaa>
14. Замените строки в id элементов на числа <div id=aaa> - <div a=1>
15. Сократите цвета до 3-4 символов. Не стоит использовать точные цвета их можно всегда заменить идентичными для восприятия. '#ff0000' -> 'red', '#fedc52' -> '#fd5'
16. js1k предоставляет нам 3 переменные for free, используйте их и внесите их в своё замыкание в порядке a, b, c

var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
(function (ctx, __document__body__, canvas) {
// Ваш код
}(a,b,c))

Порядок a,b,c важен потому, что минифиикатор переделает ваш код в такой вид:

(function(a,b,c){
// Ваш код
}(a,b,c))

И вам не нужно будет парься об сопоставлении имен внутренних переменных с внешними и можно будет убрать глобальное замыкание. Минус целых 26 байт!
17. Используйте короткое сравнение e.keyCode^27||e.preventDefault() вместо e.keyCode==27&&e.preventDefault()
18. Если ваш код все ещё больше 1024 — начинайте удалять не важные блоки (детали), если это возможно.
19. Если у вас не демка и не игра, то вам нужно намекнуть пользователю как ей пользоваться не читая описание.

Пример, того, что может у вас получиться после ручной оптимизации

В этом году я решил создать sticky notes приложение с сохранением данных в localStorage. Вот такой код получился у меня после оптимизации:

// Creating closure to compile with UglifyJS
// After compile remove global closure manually
(function (ctx, __document__body__, canvas) {

    // Dictionary for some frequently used method names and strings
    var __fillStyle__ = 'fillStyle',
        __addEventListener__ = 'addEventListener',
        __dblclick__ = 'dblclick',
        __setAttribute__ = 'setAttribute',
        __background_and_left__ = 'position:absolute;left:',
        __fillRect__ = 'fillRect',
        __addColorStop__ = 'addColorStop',
        __innerHTML__ = 'innerHTML',
        __textarea__ = 'textarea',
        __ffe__ = '#ffe',

    // Other shorthands
        __document__ = document,
        __localStorage__ = localStorage,
        i,j,c,imageData,
        width = 200,
        height = 250,
        paperGradient = ctx.createLinearGradient(width, height/2, width, 0);

    // Making fixed canvas size
    canvas[__setAttribute__]('width', 202);
    canvas[__setAttribute__]('height', 275);

    // Binds keydown event - "remove note by Esc button" to all divs
    function bindEvents() {
        c = __document__.querySelectorAll('div');
        i=c.length;while(i--)c[i][__addEventListener__]('keydown', function(e){e.keyCode^27||__document__body__.removeChild(this),save()},0);
    }

    // Creates note at e.clientX e.clientY
    function createPaper(e) {
        __document__body__[__innerHTML__] += '<div style=' + __background_and_left__ + e.clientX + 'px;top:' + e.clientY + 'px;><img src=' + imageData + '><' + __textarea__ + ' onkeyup=this.'+__innerHTML__+'=this.value style=' + __background_and_left__ + '28px;top:33px;background:transparent;width:170px;height:200px;border:0;line-height:20px;overflow:hidden>Esc</' + __textarea__ + '></div>';
        bindEvents();
        save();
    }

    // Saves document.body to localStorage
    function save() {
        __localStorage__[__dblclick__] = __document__body__[__innerHTML__];
    }

    // Making sexy paper
    // Gradient
    paperGradient[__addColorStop__](0, '#ff9');
    paperGradient[__addColorStop__](1, __ffe__);

    ctx[__fillStyle__] = paperGradient;
    ctx.strokeStyle = '#aa7';

    // Draw paper body
    ctx.strokeRect(1,1, width,height);
    ctx[__fillRect__](1,1, width,height);

    // Creating paper texture
    i = width;
    ctx[__fillStyle__] = __ffe__;
    while(--i) {
        while(--j) {
            Math.random()>.7&&ctx[__fillRect__](i,j,1,1);
        }
        j = height;
    }

    // 2 Vertical red lines
    ctx[__fillStyle__] = '#a51';
    ctx[__fillRect__](20, 1, 1, height);
    ctx[__fillRect__](22, 1, 1, height);

    // Some horizontal gray lines
    ctx[__fillStyle__] = '#aaa';
    for (i = 50; i < height; i += 20) ctx[__fillRect__](0, i, width, 1);

    // Grabbing image source
    imageData = canvas.toDataURL();

    // Print "Hello message" or load localStorage content
    __document__body__[__innerHTML__]=__localStorage__[__dblclick__] || __dblclick__+', uses ' + __localStorage__;
    bindEvents();
    // Some action events
    __document__[__addEventListener__](__dblclick__, createPaper, 0);
    // Opera haven't onbeforeuload event
    // I must save document.body content on each keyup and each keyCode=27 keydown
    // Sorry... :3
    __document__body__[__addEventListener__]('keyup', save, 0);

}(a,b,c)) // Vars must be in a, b, c order

Этот код сжимается Углифаером до 1048 байт, потом удаляется глобальное замыкание и он сокращается ещё до 1022 байт. При оптимизации мне пришлось сократить некоторые детали.

Ссылки на мою демку

Оригинал — то, что было в начале (двойной клик создает заметку, Esc по заметке — удаляет, данные красиво лежат в localStorage) JS — 4393 байт: azproduction.ru/labs/1kjs-ios-javascript-notes/index.original.html
Демка на JS1k (управление аналогично оригиналу) JS — 1022 байт: js.gd/1hn

Если сравнить эти 2 приложения, то фактически они ничем не отличаются. Из второго убран скотч и нет числа создания.

То, что не вошло в советы, но пригодится в будущем

-1. Используя bind можно значительно сократить длину вызова метода. FF 3.6 не умеет bind поэтому такой способ нам пока не подходит.

// Без изменений
c.lineTo(150,150);c.lineTo(150,200);c.lineTo(150,250);c.lineTo(250,350);c.lineTo(450,350);
// Оптимизация со словарем
var a='lineTo';c[a](150,150);c[a](150,200);c[a](150,250);c[a](250,350);c[a](450,350);
// Оптимизация с контекстом
var a=z.lineTo.bind(z);a(150,150);a(150,200);a(150,250);a(250,350);a(450,350);

Если вы захотели участвовать, то не стоит откладывать все на последний момент — придумывайте демки, уменьшайте код. До дедлайна JS1k ещё очень далеко — 24 апреля 2011. Удачи!

Критика, пожелания, советы по уменьшению кода приветствуются!

Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки

Начнем с того, что у нас есть список отдельных файлов:

$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

• — 1.png
• — 2.gif
• — dot.png
• — phoney.gif
• — tw.gif

Сделаем из них спрайт:

$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

Подробнее

Команда imagemagick обычно выглядит так:

$ convert image1.png image2.png image3.png -append result/result-sprite.png

Мы можем заменить список картинок звездочкой:

$ convert * -append result-sprite.png

Или как в предыдущем случае маской *.gif и *.png.
А как насчет горизонтального спрайта? Все что нужно — заменить -append на +append:

$ convert *png *gif +append result/result-sprite-horizon.png

Результат:

Также заметьте, что исходные картинки могут быть любого формата — GIF, PNG, JPEG, на выходе получаем PNG. Я бы рекомендовал начинать с PNG8:

$ convert *png *gif -append PNG8:result/result-sprite-horizon.png

CSS

Так как это все ручные операции, CSS автоматически не генерируется. Но это также довольно просто. Возьмем вертикальный спрайт:

Все картинки будут иметь свойство background-position-x равным 0px.
У первой картинки 16×16 координата background-position-y также 0px. Тогда:

.first {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 0;
}

… где координаты 0 0 необязательны и их можно опустить.
Вторая картинки также 16×16, так удобнее. Ее X координата равна 0, а Y — высота предыдущей картинки с противоположным знаком:

.second {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 -16px;
}

И так далее. Y координата = Y предыдущего элемента — высота предыдущего.
Но… но… каждый раз выяснять размеры и отслеживать высоту? Вы шутите?
Imagemagick приходит на помощь. ‘identify’ позволяет получить основную информацию о картинке:

$ identify 1.png

1.png PNG 16x16 16x16+0+0 DirectClass 8-bit 260b

‘identify’ также имеет опцию ‘-format’ и поддерживает маску *. Поэтому получить всю информацию в приятной форме легко:

$ identify -format "%g - %f\n" *

16x16+0+0 - 1.png
16x16+0+0 - 2.gif
6x6+0+0 - dot.png
10x16+0+0 - phoney.gif
16x16+0+0 - tw.gif

%f — имя файла, %g — геометрия.
\n — перенос строки для удобства вывода на экран.
Поэтому если вы хотите получить Y координату 5 элемента, просуммируйте высоты предыдущих: 16+16+6+16

.last {
  width: 16px;
  height: 16px;
  background: url(result-sprite.png) 0 -54px
}

Немного оптимизаций

Imagemagick не генерирует оптимизированные PNG, поэтому немного оптимизаций необходимы. Вы можете использовать pngout, optipng и др. Или web инструменты, как smush.it или punypng.com.
Или как насчет… smush.it в командной строке:

$ curl http://www.smushit.com/ysmush.it/ws.php?img=http://www.phpied.com/files/sprt/result/result-sprite.png

Резульат — JSON объект:

{"src":"http:\/\/www.phpied.com\/files\/sprt\/result\/result-sprite.png",
 "src_size":1759,
 "dest":"http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png",
 "dest_size":1052,
 "percent":"40.19",
 "id":""}

Экономия почти вдвое. Скопируйте поле «dest»

$ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png

Вот и все.

Подведем итог

1. Создаем спрайт:

$ convert *png *gif -append PNG8:result/result-sprite.png

2. Получаем размеры:

$ identify -format "%g - %f\n" *png *gif

3. И оптимизируем:

$ curl http://www.smushit.com/ysmush.it/ws.php?img=http://url... 

Перевод статьи Стояна Стефанова Command-line CSS spriting.

P. S. Тема ImageMagick уже упоминалась на хабре, но вторая часть этой статьи мне показалась полезной и я решил перевести ее целиком.

Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки

Начнем с того, что у нас есть список отдельных файлов:

$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

• — 1.png
• — 2.gif
• — dot.png
• — phoney.gif
• — tw.gif

Сделаем из них спрайт:

$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

Подробнее

Команда imagemagick обычно выглядит так:

$ convert image1.png image2.png image3.png -append result/result-sprite.png

Мы можем заменить список картинок звездочкой:

$ convert * -append result-sprite.png

Или как в предыдущем случае маской *.gif и *.png.
А как насчет горизонтального спрайта? Все что нужно — заменить -append на +append:

$ convert *png *gif +append result/result-sprite-horizon.png

Результат:

Также заметьте, что исходные картинки могут быть любого формата — GIF, PNG, JPEG, на выходе получаем PNG. Я бы рекомендовал начинать с PNG8:

$ convert *png *gif -append PNG8:result/result-sprite-horizon.png

CSS

Так как это все ручные операции, CSS автоматически не генерируется. Но это также довольно просто. Возьмем вертикальный спрайт:

Все картинки будут иметь свойство background-position-x равным 0px.
У первой картинки 16×16 координата background-position-y также 0px. Тогда:

.first {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 0;
}

… где координаты 0 0 необязательны и их можно опустить.
Вторая картинки также 16×16, так удобнее. Ее X координата равна 0, а Y — высота предыдущей картинки с противоположным знаком:

.second {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 -16px;
}

И так далее. Y координата = Y предыдущего элемента — высота предыдущего.
Но… но… каждый раз выяснять размеры и отслеживать высоту? Вы шутите?
Imagemagick приходит на помощь. ‘identify’ позволяет получить основную информацию о картинке:

$ identify 1.png

1.png PNG 16x16 16x16+0+0 DirectClass 8-bit 260b

‘identify’ также имеет опцию ‘-format’ и поддерживает маску *. Поэтому получить всю информацию в приятной форме легко:

$ identify -format "%g - %f\n" *

16x16+0+0 - 1.png
16x16+0+0 - 2.gif
6x6+0+0 - dot.png
10x16+0+0 - phoney.gif
16x16+0+0 - tw.gif

%f — имя файла, %g — геометрия.
\n — перенос строки для удобства вывода на экран.
Поэтому если вы хотите получить Y координату 5 элемента, просуммируйте высоты предыдущих: 16+16+6+16

.last {
  width: 16px;
  height: 16px;
  background: url(result-sprite.png) 0 -54px
}

Немного оптимизаций

Imagemagick не генерирует оптимизированные PNG, поэтому немного оптимизаций необходимы. Вы можете использовать pngout, optipng и др. Или web инструменты, как smush.it или punypng.com.
Или как насчет… smush.it в командной строке:

$ curl http://www.smushit.com/ysmush.it/ws.php?img=http://www.phpied.com/files/sprt/result/result-sprite.png

Резульат — JSON объект:

{"src":"http:\/\/www.phpied.com\/files\/sprt\/result\/result-sprite.png",
 "src_size":1759,
 "dest":"http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png",
 "dest_size":1052,
 "percent":"40.19",
 "id":""}

Экономия почти вдвое. Скопируйте поле «dest»

$ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png

Вот и все.

Подведем итог

1. Создаем спрайт:

$ convert *png *gif -append PNG8:result/result-sprite.png

2. Получаем размеры:

$ identify -format "%g - %f\n" *png *gif

3. И оптимизируем:

$ curl http://www.smushit.com/ysmush.it/ws.php?img=http://url... 

Перевод статьи Стояна Стефанова Command-line CSS spriting.

P. S. Тема ImageMagick уже упоминалась на хабре, но вторая часть этой статьи мне показалась полезной и я решил перевести ее целиком.

В этой статье раскрыто, как можно сделать очень простой аплоадер, с кодом только на клиенте, используя API хостинга картинок. Если вас интересует более продвинутый аплоадер с такими штуками, как ресайз, кроп, рисование и т.п. — читайте статью How to develop a HTML5 Image Uploader. Содержимое статьи примечательно использованием FormData() и Cross-Domain XHR.

Представляю Вашему вниманию аплоадер картинок, работающий в Chrome и Firefox 4, состоящий из нескольких строчек Javascript! Базируется он на imgur.com API, используя Drag’n Drop support и Cross-Domain XMLHttpRequest. То есть, Вы можете использовать API создателя Imgur.com для загрузки изображений на сайт со своей html-странички, не используя код на сервере.

Вот пример того, что можно сделать с его помощью (полный код):

function upload(file) {

  // файл из тега <input> или из Drag'n Drop
  // Является ли файл изображением?

  if (!file || !file.type.match(/image.*/)) return;

  // Это оно!
  // Создаём объект FormData

  var fd = new FormData();
  fd.append("image", file); // Append the file
  fd.append("key", "6528448c258cff474ca9701c5bab6927");
  // Получите собственный ключ: http://api.imgur.com/

  // Сделайте XHR (Cross-Domain XH, чёрт побери!!!)
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
  xhr.onload = function() {
    // Победа!
    // URL изображения:
    JSON.parse(xhr.responseText).upload.links.imgur_page;
   }
   // Я не рассматривал ошибки, чтобы пример был короче.
   // А сейчас отправляем formdata
   xhr.send(fd);
 }

Вот и всё!