Deerua about Coding

DocumentRoot /webhosts/
[...]
<VirtualHost *>
ServerAlias www.yourdomain.com
ServerName www.yourdomain.com
RewriteEngine  on
RewriteCond    %{HTTP_HOST}  ^yourdomain.com
RewriteRule    ^(.*)$        /www/$1 [L]
RewriteCond    %{HTTP_HOST}  ^www.*
RewriteRule    ^(.*)$        /www/$1 [L]
RewriteCond    %{HTTP_HOST}  ^(.*)\.yourdomain\.com
RewriteRule    ^(.*)$        /%1/$1 [L]
</VirtualHost>

// ЫЕ любит так
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 с

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