// ЫЕ любит так
obj.colSpan = "3";
// Делать нужно так
obj.setAttribute("colspan", "3");

James Padolsey забецал клёвейший квиз, подумать пришлось, жаль ответы прям в коде.

Поехали

//1: логическое И, в итоге 3
1 && 3
//2: И даёт "foo" из ИЛИ тоже "foo"
1 && "foo" || 0
//3: тут из логического ИЛИ почему-то отвалилось "фуу", правильный ответ 1 - не понял
1 || "foo" && 0

//4: последний в списке через запятые, получим 3
(1,2,3)
//5: пустой шифтуй-не-шифтуй, всё равно количество 0
x = {shift:[].shift};

x.shift();
x.length;
//6: будет масив с [0], почему? не ясно
{foo:1}[0]

//7: получаем true
[true, false][+true, +false]
//8: '52'.split('') = [5,2], [5,2][0] = 5, ++5 = 6, ответ 6

++'52'.split('')[0]

//9:
a: b: c: d: e: f: g: 1, 2, 3, 4, 5; тут типо ответ 5, что и как мне не ясно

//10: нет объекта ["b"], error
{a: 1, b: 2}[["b"]]
//11: "b45"
"b" + 45

//12: у меня [обжект Обжект], автор говорит что "2"
{a:{b:2}}
//13: лишняя пара скобок, undefined
(function(){}())
//14: 0. - число, число в строку "0", длина этого 1, [1,2,3,4,5][1] = 2
[1,2,3,4,5][0..toString.length]

//15: "[Обжект]бе" больше "[Обжект]а"
({} + 'b' > {} + 'a')
//16: false -> this всегда обжект

Number.prototype.x = function(){ return this === 123; };
(123).x();

//17: "," -> массив из 2ух пустых, после джоин
Array(2).join()
//18: vars не определён
vars: var vars = vars;

//19: 123
{ foo = 123 }
//20: внутри "х" не определён, undef
x = 1; (function(){return x; var x = 2;}())

//21: delete от строки вернёт false
delete [].length;
//22: тут "1", почему пока не разобрался 
RegExp.prototype.toString = function() {return this.source};

/3/-/2/;
//23: error - ошибка синтаксиса
{break;4;}
//24: строка == обжект, в итоге фелс
'foo' == new function(){ return String('foo'); };

//25: [f,o,o]
'foo'.split('') + []

Проскала статья на хабре, а красивой кнопке, сделанной на css3.

Нам нужен html:

<a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>

И сам css:

a.button {
	text-decoration: none;
	border-color: transparent transparent #ECECEC; /** rgba fallback **/
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
	cursor: pointer;
	outline: none;
}
a.button:hover {
	text-decoration: none;
}
a.button,
a.button b.o,
a.button b.m {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	display: block;
}
a.button b.o {
	border-color: #5A5A5A; /** rgba fallback **/
	border-color: rgba(0, 0, 0, 0.56);
}
a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;
	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover b.m {
	background-position: 0 -80px;
}
a.button:active b.m {
	background-position: 0 -160px;
	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button b.m b {
	display: block;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 0 1px 0 #DDD;
	color: #262626;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}

• Посмотреть кнопку
• How-to кнопочное и оригинал

ps: работает только в ФФ3.6 и вебкитах последних ;)

Есть чудный «лайтбокс» под названием shadowbox. Всё хорошо, но для работы нужно много файлов:

• джаваскритп,
• стиль,
• 5 картинок;

Возникла идея сунуть всё в один джс:

1. Засовываем вместо ссылок на фон, base64-картинки, сделать их можно с помощью утилиты Сергея Чикуёнка. Не забываем, вставлять нужно без каких либо скобок;
2. С помощью импорта стиля, просто сразу добавляем стиль перед </head>;
3. засовываем всё это в начале скрипта, стиль строкой, строку импортим, а после самого скрипта шадовбокса, инициилизируем его-же;
4. ...
5. Профит!

ps: на старючие браузеры откровенно уже пофик, нужно это принять ;)

• Посмотреть Пример
• Инструкция к полётам на shadowbox

То что было в ИЕ всегда, хоть кривое, но было, в правильных браузерах появилось только сейчас

.gradient {
	/* for new webkit browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
	/* for firefox 3.6+ */
	background: -moz-linear-gradient(top,  #ccc,  #000);
	/* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
}
.gradient_sample {
	background: #999; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
	background: -moz-linear-gradient(top,  #ccc,  #000); 
}

Сам яндекс жадная сволочь, прямой ссылки не даёт на состояние пробок. Зато у него есть выджет для вин7, в котором я нашёл ссылку на нужный мне xml.

http://export.yandex.ru/bar/reginfo.xml

Дальше что нам нужно? :)

1. открываем наш файл
2. конвертируем в нашу любимую кодировку
3. xml бахаем в масив
4. ...
5. Профит

ps: местоположение определяется автоматически, по айпи, что бы выбрать другой город, нужно пользоваться анонимными проксями, скорее всего ;)

pps: немного покопавшись, секунд 5 :D нарыл всё нужное.
Для определения региона нужна переменная ncrnd

http://export.yandex.ru/bar/reginfo.xml?ncrnd=8412

Что бы получить код региона, у шмяндекса есть форма

http://tune.yandex.ru/region/

• Посмотреть Пример
• Содрать исходник

Все знают, что в JS констант нет, но с помощью супер-мега-гибкого ООП даже их можно реализовать:

"use strict";
var constant = (function () {
    var constants = {};
    return {
        define: function (name, value) {
            if (!name in constants) {
                constants[name] = value;
                return true;
            }
            return false;
        },
        defined: function (name) {
            return name in constants;
        },
        get: function (name) {
            return constants[name];
        }
    };
}());

Пример использования:

// check if defined
constant.defined("lol"); // false
// define
constant.define("lol", "ok!"); // true
// check again
constant.defined("lol"); // true
// attempt to redefine
constant.define("lol", "lolok"); // false
// was it constant or it changed?
// get da, get da, get da value
constant.get("lol"); // "ok!"

• Оригинал статьи с jspatterns
• Голосуем за «Ускоряем сайт в космос ;)»

Конкурс закончился, теперь идёт голосование :)
Если вам не сложно, выберете лучший вариант, предварительно просмотрев другие варианты, на страничке голосования :)

Так же обновил свой топик о оптимизации Аткрытки, читайте, будет интересно. Добавил новые полезные замечания, и ПейджСпид стал ещё выше, 96 (из 100)

У нас с ребятами есть замечательный проект, который ест %)

atkritka.com

Сайт сделан на движке битрикса, и уже начал работу. Кушал он довольно много ресурса, как серверного так и клиентского. Обусловлено было множеством картинок. Оптимизация нужна, и это был факт.

Что бы измерить результаты воспользуемся известным сайтом webo.in. Изначально результаты были не очень впечатляющими, оптимизация проводилась только серверная. Был установлен eAccelerator, который ускорил генерацию php в 3-5 раз.

Первоначальные результаты по webo.in:

оценк: 51/100
интегральная оценка:     30/100
число файлов: 66
суммарный размер файлов: 1264212
время загрузки (33,6kbps): 430 с
время загрузки (100 KB/s): 12.35 с
WEBO Site SpeedUp: ускорит в 4.26 раза
возможное ускорение: 326% 

Основные замечания:

• Более одного js
• Большие js
• Более одного css
• Большие css
• 1 хост
• не сжатый html
• Не включено кеширование для статических файлов.
• Не оптимизированы картинки

Ну что же, раз WEBO Site SpeedUp, дальше WSS, ускорит в 4.26, попробуем. Скачав продукт, сразу устанавливаем на битрикс. Установка проходит быстро и гладко.

WWS сразу сказал о недостающих ему модулях апача (mod_filter и mod_deflate), которые мы включаем и продолжаем настройки. Вбиваем временный ключ, который можно получить на его сайте, включаем оптимизацию.

Поигравшись стандартными пакетами оптимизации, приходим к выводу что безопасная и базовая конфигурации маловаты, и дают всего лишь 14% и 31% ускорения.

Смотрим в сторону оптимальных настроек. После включения получилось сразу 81%.

• css грузится раньше html, нет никаких моргания у сайта
• все фоновые картинки оказались в css (минус много конектов + они оптимизированы)
• весь css одним сжатым файлом
• все скрипты одним сжатым файлом
• грузится молниеносно :)

Казалось счастью нет предела. Но сломались скрипты, и кое-что начало работать не так.

Сдаваться рано. Лезем в саму конфигурацию. Так как на сайте используется jquery и другие скрипты, нужно было изменить метод упаковки скриптов. Проверяем есть ли на сервере java и выбираем YUI Compressor. Он сжал все скрипты лучше всех, и в итоге они все заработали.

Смотрим дальше, проблемы с css. Используемый метод сжатия и чистки css-Tidy, немного перестарался, и поубивал много незнакомых ему правил, такие как @font-face, @media. Написав баг-репорт на проект в google-code, баги были исправлены очень оперативно и всё стало на круги своя.

Смотрим опять на webo.in:

• он нам подсказывает, что лучше добавить несколько саб.доменов, что бы сделать загрузку ещё быстрее. Прописываем алиасы в апаче, и конфигурируя настройки «Множественные хосты», скорость загрузки очень сильно возрастает.
• ещё сказал что лучше использовать другой метод кэширования и сжатия. Идём в настройки «.htaccess», включаем mod_deflate + mod_filter и mod_headers.
• сжимаем html в одну строку и убираем внутренние комментарии.

В итоге WWS говорит что ускорение уже 84%. Итоговые результаты webo.in

оценка: 68/100
интегральная оценка: 36/100
число файлов:  22 (было 66)
суммарный размер файлов: 421054
время загрузки (33,6kbps): 146.41 с
время загрузки (100 KB/s): 7.3 с
WEBO Site SpeedUp: ускорит в 1.33 раза
возможное ускорение: 40% 

Можно сказать, что мы добились желаемого результата, сайт стал реактивным! Много из возможностей WSS осталось не востребованным, так как у сайта сложная вёрстка и картинки должны быть в максимальном качестве. Но на других проектах эти фичи дадут жару!

Есть ещё и известные пузомерки скорости от Google и Yahoo, они меня очень порадовали:

• Page Speed Score: 95/100
• Grade «A» Overall performance score 92% (YSlow V2)

Осталось пожелать дальнейшего развития проекту, а мне монитор :D Наше сотрудничество будет продолжаться, в версии для битрикса.

UPD: Основная проблема, которая осталась, это были картинки. В WSS уже интегрирован замечательные оптимизатор картинок от Yahoo, который называется SmushIt. Он уменьшает размеры картинок (оставляя оригинал рядом) без потери качества, что очень важно для проекта.

Что бы стало ещё быстрее, в ручную пришлось:

• убрать объявление favicon.ico (грузится и сам, главное в корень положить)
• почистить неиспользуемые селекторы
• убрать лишнее из некоторых спрайтов
• оптимизировать всевозможные картинки
• убрать 404 фоновые картинки

В итоге стало ооооооочень быстро и горячо :)
И да, конечная оценка стала ух и ах:

оценка: 77/100
интегральная оценка: 44/100
дата проверки: 8 Апреля 2010, 09:04
число файлов: 18
суммарный размер файлов: 324500
время загрузки (33,6kbps): 112.95 с
время загрузки (100 KB/s): 5.74 с

Спасибо за прочтение!

Сутра был удивлён, css хорошо для всех величин понимает простые математические операции.

.menu div div{
	width: 1000px-28px;
}

зы: работает на ура даже в ИЕ6 и ниже.
ззы: думал что есть только деление для фонтов ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <link rel="stylesheet" type="text/css" href="css/base.css">

  <title>New demo</title>
  <style type="text/css">
  	html, body {
  		margin: 0;
  		padding: 0;
  		width: 100%;
  	}
  </style>

  <script type="text/javascript"></script>
</head>
<body>

</body>

</html>

echo implode(".",array_slice(explode (".", $bigtext), 0, 3))

• Делим текст через точки на массив
• Отрезаем первые 3 элемента массива
• Делаем из массива обратно текст используя точку %)

Для того что бы конвертить неведомые символы, мы должны их отCharCodить, но функция конвертит всё подряд, поэтому мы предварительно составляем массив наших символов, и если не наши, мы их через ASCII-код выдаём :)

cp1251 = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,48,49,50,51,52,53,54,
	55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,
	76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,93,94,95,96,97,
	98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,
	114,115,116,117,118,119,120,121,122,123,125,126,1025,1028,1030,
	1031,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,
	1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,
	1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,
	1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,
	1091,1092,1093,1094,1095,1096,1097,1098,1099,1100,1101,1102,1103,
	1108,1110,1111,8470];
function in_array(myValue,myArray){
	function equals(a,b){return (a === b);}
	for (var i in myArray) if (equals(myArray[i],myValue)) return true;
	return false;
}
function fetchAscii(){
	var obj = document.getElementById("converter").value,
  convertedObj = '', converted = document.getElementById("converted");
  var _length = obj.length;
  
  for(i = 0; i < _length; i++)
    convertedObj += (in_array(obj.charCodeAt(i),cp1251) ? '&#' : '&amp;#') 
    	+ obj.charCodeAt(i) + ';';
  converted.innerHTML = convertedObj;
  return false;
}  

• Посмотреть Пример

зы: прикрутил сразу туда же ZeroClipboard :)

var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('mouseOver', 
	function(clip){
		clip.setText(
			document.getElementById("converted")
			.innerHTML
			.split("&")
			.join("&"))
	}
);
clip.glue("copy");

Особенность в том, что текст, который копируется, постоянно изменяется, то есть динамический %)

Нужно на хомяк сайта права поставть 755 ;) ага, ок!

// значения
$first = reset($array);
$last = end($array);
// ключи
$first = reset(array_keys($array));
$last = end(array_keys($array));

var myVar   = "3.14159",  
    str     = ""+ myVar,//  в стринг     (string)
    int     = ~~myVar,  //  в интеджер   (integer)
    float   = 1*myVar,  //  во флоат     (float)
    bool    = !!myVar,  //  в булен - все непустые строки и числа кроме 0 будут true
    array   = [myVar];  //  в массив

• Посмотреть больше

var nums = '1,2,3,4,5,6,7,8,9,10'.split(','); 

С утра твитор порадовал интересной викториной.

Немного подумав над ней, оказалось что решил я её без ошибок \m/, в отличии от многих других ;) (если бы на время, то наверное бы слил)...

По просьбам трудящихся, небольшие объяснения (в комментариях к викторине их можно частями найти)

1. (function(){
     return typeof arguments;
   })();

   Вернёт object, потому что arguments всегда задана, и выводит все переменные которые приходят в функцию

2. var f = function g(){ return 23; };
   typeof g();

   Получим ошибку, фугкция g() не объявлена. Если запустить f() получим «number»

3. (function(x){
   delete x;
   return x;
   })(1);

   Небольшой подвох ;) Delete внутри функций не работает ;) Ответ 1

4. var y = 1, x = y = typeof x;
   x;

   Объявление в «колоне» идёт слева на право, получаем в итоге строку «undefined»

5. (function f(f){ 
   return typeof f(); 
   })(function(){ return 1; });

   функция выполняется вконце, возвращает 1, она же идёт в начало аргументом функции f(), и тип 1 — «number»

6. var foo = { 
   bar: function() { return this.baz; }, 
   baz: 1
   };
   (function(){ 
   return typeof arguments[0]();
   })(foo.bar);

   Есть объект foo с методом bar, и функция которой в качестве аргумента передаём наш метод. Почему в итоге не «function»? this в обжекте ;) Лол! ок!

7. var foo = {
   bar: function(){ return this.baz; },
   baz: 1
   }
   typeof (f = foo.bar)();

   А ну как конструкция, гибкость? :) смотрим выше

8. var f = (function f(){ return "1"; }, function g(){ return 2; })();
   typeof f;

   исполняется последняя в списке функция g() — потому «number»

9. var x = 1;
   if (function f(){}) {
   x += typeof f;
   }
   x;

   Опять функция в условии (смотри 2), в итоге получаем «1undefined»

10. var x = [typeof x, typeof y][1];
    typeof typeof x;

    типоф от типоф всегда стринг ;)))

11. (function(foo){
    return typeof foo.bar;
    })({ foo: { bar: 1 } });

    у нас просто получилось foo.foo.bar = 1, обжект в обжекте — масло масляное, потому «undefined»

12. (function f(){
    function f(){ return 1; }
    return f();
    function f(){ return 2; }
    })();

    Последняя объявленная нижняя, потому получаем 2 %)

13. function f(){ return f; }
    new f() instanceof f;

    инстансоф буллевый оператор, и итог функции f() не может быть в «движении» функции f.

14. with (function(x, undefined){}) length;

    оператор with поиска находит оба аргумента, получаем 2 %)

• Flawless victory.

Math.round(num* 100,2)/100

После 1.4 сразу выходит 1.4.1 и скоро будет 1.4.2 :)
Такая активность подтолкнула много других людишек, и было создано много полезных ресурсов и обновлено старых:

• jQuery souse viewer — каждую функцию теперь быстро и удобно можно найти
• jQuery API — теперь в удобном формате
• jQuery UI — скоро 1.8 и новые плюшки
• jQuery Documentation — теперь с человеческим лицом
• jQuery Meetups Ukraine — милости просим, вопросы, предложения. Когда будет много людишек, можно будет организовать конференцию

ps: больше инфы о новом Jq тут