История одного рефакторинга, или о сказ о том как не надо разрабатывать на PHP…

Началось все как всегда, откуда-то появляется заказчик весь в слезах и трансе, орет не своим голосом: «Спасите, помогите, мой проект тормозит, от меня пользователи бегут. У вас неделя…»

Развернули проект на нашем сервере — н-да уж… Дальше был анализ сего творения фирмы «Q» (кто следит за мной, знает о какой украинской фирме речь), смех сквозь слезы, и истерика в течении недели. Ну для начала был взят XDEBUG и посмотрели профайлером что там и как (кликабельно):

Такую клевую штуку рисует Webgrind, удобно и наглядно

Т.е. у нас страница, которая выводит приветствие + выбор языка + выбор категории для просмотра (захардкоденных кстати) генерировалась за 4,6 секунды на сервере с Core2 Quad CPU Q6600@2.40GHz/16Gb (истерика и лучи ненависти конторе «Q»).

Куда более жутка картина ожидала нас на главной странице:

До применения Zend Framework’a нас отделяло еще несколько недель оптимизации г..кода…

FastTemplate такой «Fast»

Если присмотреться, то на предыдущем скрине видно, что очень дорого нам обходится некая функция parse_body:

Внутри нас ждет:

• вызов strtoupper — 56560 раз
• вызов str_replace — 56560 раз

Смотрим на код:

// $content - шаблон
// $rec - переменные
$content = preg_replace("/\\$([A-Z][A-Z0-9_]+)/", "@\\1@", $content);
if (is_array($rec)) {
    foreach ($rec as $key => $value) {
        $name = strtoupper($key);
        $content = str_replace("@$name@", "$value", "$content");
    }
}
return $content;

Т.е. в самом начале мы ищем в шаблонах что-то вроде $HTTP_PATH, заменяем это на @HTTP_PATH@, потом перебором пытаемся заменить все известные переменные. Есть одна проблема — шаблонов у нас много, в них используется совсем чуть-чуть из пары сотен переменных. Простая замена str_replace на preg_replace_callback дала прирост в пару секунд (т.е. около 10%).

Примеры кода

Слабонервным лучше пропустить данный абзац.

Классика плохого PHP кода, встречается у индусов и наших студентов:

function n() {
   global $db, $CONSTANTS, $user, ...; // много одним словом

   echo $CONSTANTS[HOMEPAGE_BANNER1_ID];  // думаете это константа?
   echo $CONSTANTS[HOMEPAGE_BANNER2_ID];  // а знаете, что внутри?
   echo $CONSTANTS[HOMEPAGE_BANNER3_ID];  // 1, 2, 3, которые меняются совсем не там где объявляются О_о
}

Использование файловой системы вместо системы контроля версий:

tpl
|-- index.tpl
|-- index2.tpl
|-- index3.tpl
|-- index__.tpl
`-- index.44.tpl

С базой данных тот же номер — таблицы categories_old, items_1 и т.д.

Если мальчик любит труд
тычет в книжку пальчик,
про такого пишут тут:
он хороший мальчик.

Это, как вы понимаете, не про наших «мальчиков», у наших 9 000 notices на главной. Да и manual’ами пользуются только слабаки:

// мы не читаем мануалов
while ($row = mysql_fetch_array($res)) {
      if ($row) {
            foreach ($row AS $key => $field) {
                if (ereg("^[0-9]+", $key)) {
                    unset($row[$key]);
                }
            }
      }
      $rows[] = $row;
}
// если чуть-чуть допилить
// мелочь, конечно, но прирост ~0,1 сек т.к. имеет место 23162 вызовов
while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) {
      $rows[] = $row;
}

Далее просто гениальное решение, тайный смысл этого творения я не осилил:

$sqls[] = $sql;
if (is_array($sqls)) {
    foreach ($sqls AS $ssql) {
        if ($ssql) {
            $res = mysql_db_query($db['name'], $ssql, $db['id']);
            if (!$res) {
                return 0;
            }
        }
    }
} else {
    return 0;
}

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

// перед выполнением запроса можно подсчитать кол-во результатов
// воспользовавшись функцией db_count (вызывается в 96 разных местах)
function db_count($sql) {
    global $db;
    $res = mysql_db_query($db['name'], $sql, $db['id']);
    $result = mysql_num_rows($res);
    return $result;
}

Постраничная навигация, и это тоже можем:

// пошел запрос к БД
$res = mysql_db_query($db['name'], $sql, $db['id']);
// подсчитали итого (хотя до этого уже был вызван db_count)
$row_count = mysql_num_rows($res);
// подсчитали сколько у нас страниц получается
$page_count = floor($row_count / $pager['per_page'] + 1);

// это offset
$bi = ($pos - 1) * $pager['per_page'];

// теперь выбираем только нужные записи
for ($i = $bi; $i < $bi + $pager["per_page"]; $i++) {
    if ($i >= $row_count) {
        break;
    }

    if (!mysql_data_seek($res, $i)) {
        break;
    }

    if (!($row = mysql_fetch_assoc($res))) {
        break;
    }
    // складируем результат
    $new_rows[] = $row;
}

Повторение строк — мы не ищем легких путей (str_repeat):

// в файле categories.sql.php
// функция которая строит select для HTML
$offset_string  = '';
for ($i = 1; $i < $rec['level']; $i++) {
    $offset_string .= '&nbsp;&nbsp;&nbsp;&nbsp;';
}

Если нам надо обрезать строку на 100 символов, и при этом не кромсать слова то вот оно решение:

$data['row']['description'] = substr($description, 0, 100);

$i = 100;
while (!($description[$i] == " " || $description[$i] == "_") && $i < strlen($description)):
    $data['row']['description'] .= $description[$i];
    $i++;
endwhile;

if ($i < strlen($description)) {
    $data['row']['description'] .= "...";
}

У нас так много глобальных переменных, там есть конечно $db, и она же передается во все функции которые работают с БД:

function db_query($db, $sql) {}
function db_sql_query($db, $sql) {}
function db_count($db, $sql) {}
// и т.д.
// но почему не так, ведь у нас одна БД
function db_query($sql) {
    global $db;
}

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

$sql = "SELECT id, name, pasw from users where name = '$_POST[username]'";

Про агрегирование в SQL мы не знаем:

// $rows - записи из БД
foreach ($rows as $value) {
      $total += $value["price"];
}

Необходимо SEO URL? Не проблема:

switch ($params[1]):
       case "usageagreement":
            $page_id = 13;
       break;
       case "privacypolicy":
            $page_id = 14;
       break;
       case "termsandconditions":
            $page_id = 15;
       break;
       case "affiliates":
            $page_id = 22;
       break;
       case "aboutus":
            $page_id = 19;
       break;
endswitch;

Ладно с PHP, но HTML то можно было подучить:

<!-- id такой id -->
<div id="banner">...</div>
<div id="banner">...</div>
<div id="banner">...</div>
<div id="banner">...</div>

<!-- class это почти style -->
<li class="padding-left:15px;">...</li>

<!-- табличная верстка -->
<!-- хотя не стоит 10 вложенных таблиц расписывать -->

<!-- margin, что такое margin? -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Применение Zend_Cache

Кеш спасет мир, подумали мы и прикрутили его для всех SQL запросов (благо кто-то догадался написать единую функцию db_sql_query) и всех вызовов parse_body. Для начала попробовали кешировать в файлы, на тестовом сервере это помогло, на живом — нет. Причина — у нас так много мелких шаблонов (~200 для главной), что операции с файловой системой свели на нет прирост кеширования.

Вторая попытка оказалась более удачной, решили применить memcache — прирост скорости ~180%. Какой клевый показатель, но верен лишь в 100% попадании в кеш, таким образом перед нами вырисовывалась перспектива полного рефакторинга системы.

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

Ну что тут можно рассказать, простое добавление следующих правил в .htaccess сильно облегчило навигацию пользователям, которые хоть раз заходили на сайт:

FileETag MTime Size

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

А далее все по порядку:

• Оптимизация изображений для web (есть такой пункт в Photoshop) — 40% на всех JPEG фалах
• Спрайты — кропотливая работа, десятки обращений к серверу можно свести к единицам
• Жмем JavaScript и CSS — ~50%
• И последним пунктом — nginx для всего этого добра

Zend Framework

А теперь расскажу о том, как проект медленно переезжает на Zend Framework. Начинается всё с простой проверки в index.php (о да в нашей системе одна точка входа):

// список модулей, которые уже отрефакторили
$modules = array (
    '/search/',
    '/about/'
);

$path = $_SERVER['REQUEST_URI'];

// нас устроила такая простая проверка,
// но запрос вида /search/?... уже не будет обрабатываться
if(in_array($path, $modules)) {
    // подключаем ZF (внутри стандартный код из сгенерированного public/index.php)
    require 'loader.php';
    exit();
}

// а эта будет
foreach ($modules as $module) {
    if (strpos($path, $module) === 0) {
        require 'loader.php';
        exit();
    }
}

Если у нас не одна точка входа, то в каждом файле, которые были затронуты делаем простую вставку:

$_SERVER['REQUEST_URI'] = str_replace($_SERVER['PHP_SELF'], '/admin/', $_SERVER['REQUEST_URI']);
require 'loader.php';
exit();

Что-бы забыть «глобальный» ужас, жизненно-необходимые переменный были закинуты в Zend_Registry (а в дальнейшем закинуты в конфигурационный файл application.ini, где им самое место).

Так же Zend_Translate была скормлена таблица с переводами (см. адаптер array)

Результат

Сложно судить о результате, проект находится в разработке, но вот несколько сравнительных замеров:

Еще наглядный скриншот среднего/максимального времени генерации страниц по датам: http://screencast.com/t/NDY1NGE5

Другие посты на эту тему

• Под впечатлением от ZFConf
• Пишем свой провайдер для Zend_Tool
• ZFCore – CMF на Zend Frameworkе
• Первая в России конференция по Zend Framework
• Пишем свой PHP Framework
• Юнит тестирование приложений на Zend Framework’е
• Zend Framework hacks
• Zend_Dojo: первые шаги

Дабы не было непоняток — nook я уже перепрошил прошивкой от mynook.ru и было бы правильно отблагодарить их за старания

Обзор железки

Тут много можно рассказывать, лучше приведу ссылку на техническую спецификацию на официальном сайте, лучше чем они никто не расскажет.

От себя добавлю:

• девайс очень приятно держать в руках, тяжеленький, но не в напряг (не так как iPad)
• сборка на отлично — не люфтит, не скрипит
• кнопки для перелистывания таки надо нажимать, что очень радует
• сенсорный экран нормально реагирует на нажатия, с клавиатурой проблем не возникало

Из недостатков:

• бедная комплектация
• свой формат mini-USB — дежавю
• не со всеми micro-SD карточками все гладко, могут быть проблемы (отформатируйте их в FAT32 в обязательном порядке)
• SIM карточку просто так не вытащить (но ее и не часто будете менять)
• при включенном 3G достаточно быстро разряжается девайс (по крайней мере вне зоны покрытия оператором), но его можно легко выключить (авиарежим)

Поддержка 3G

Есть и работает, пробовал с UTel. Вот только надо поддержку операторов добавлять ручками.

Инструкция проста:

1. Устанавливаем Android SDK 1.5
2. Подключаем nook по wi-fi к сети и запоминаем IP
3. Включаем ADB в программах на nook’е
4. Используя adb утилиту из SDK выполняем следующее

# соединяемся с nook'ом
adb connect %IP%:5555
# it's shell cap
adb shell
# база данных с настройками
sqlite3 /data/data/com.android.providers.telephony/databases/telephony.db
# просматриваем текущий список
SELECT * FROM carriers;
# добавляем UTel
INSERT INTO carriers (name, numeric, mcc, mnc, apn, current) VALUES ('Ukrtelecom', '25507', '255', '07', '3g.utel.ua', 1);
# проверяем
SELECT * FROM carriers;

Если у вас другой другой оператор, то необходимо посмотреть MCC и MCN код оператора, а так же его APN (точку доступа можно найти на сайте оператора):

# Beeline
INSERT INTO carriers (name, numeric, mcc, mnc, apn, current) VALUES ('Beeline', '25502', '255', '02', 'internet.beeline.ua', 1);
# Kyivstar
INSERT INTO carriers (name, numeric, mcc, mnc, apn, current) VALUES ('Kyivstar', '25503', '255', '03', '3g.kyivstar.net', 1);
# UTel
INSERT INTO carriers (name, numeric, mcc, mnc, apn, current) VALUES ('Ukrtelecom', '25507', '255', '07', '3g.utel.ua', 1);

В новой версии прошивки от mynook.ru обещают программу для настройки 3G

Nook и его софт

Скорость работы не вызывает с моей стороны нареканий, не моментально, но и не утомляет ожиданием. Открывал журнал Фотомастерскую на 50 метров, достаточно быстро.
О форматах:

• Родной формат – epub (есть много софта, который перегонит в epub всю вашу библиотеку)
• Fb2 читается FBReader’ом — в следующей версии еще меньше багов
• PDF поддерживается — вот только журналы особо не почитаешь — не позумишь
• MP3 — это хорошо, аудиокниги тоже
• Картинки это тоже хорошо: JPG, GIF, PNG

Хотелось бы:

• Приложение для заметок
• Калькулятор
• Twitter клиент
• Нормальную RSS читалку, или лучше отдельного клиента для Google Reader’a
• Shell (о да)

Поскольку девайс на android’e то в скором времени появится очень много различного полезного софта.

Есть конечно нарекания на прошивку, но дождемся обновления. И да, с кнопок в меню я бы убрал глянец, хватает блеска экрана, зачем еще этот псевдо-объем.

Работа с магазином

Тут у меня возникло две проблемы:

1. Они не принимают к оплате мою карточку, не с США
2. Gift Card тоже не получилось использовать

Итог — я огорчен…

Немного о цене

Мне nook+обложка обошелся в 314 долларов, без доставки (девайс привезли знакомые). Сейчас цена упала на $50 и появилась более дешевая Wi-Fi версия. Таким образом можно заполучить хорошую читалку меньше чем за $200 (так что меня жабо то давит, не смотря на Gift Card на $50, которой я не могу воспользоваться):

• Nook Wi-Fi — $149
• Налог штата Калифорния 9.75% — $14.5
• Доставка через shipito — ~$22

Обложка Tupper Quote Cover in Leaf

Чуть-чуть расскажу еще о обложке Tupper Quote Cover in Leaf. Книжка покупалась для супруги, для нее же выбрал зелёненькую обложку, и вот что я получил:

• Качественная кожа молодого дермантина (пережила купание в вине)
• На ощупь просто прелесть
• Предусмотрены кармашки
• Таки не лучший способ крепления
• Никак нельзя зафиксировать в закрытом состоянии – ни веревочки, ни резиночки, ни магнитика
• Слишком мягкий «переплет» выглядит не очень эстетично

Другие посты на эту тему

• No Related Post

switch (true) {
    case (0x7FFF > (int)(0x7FFF+1)): // 2^15-1
        define('PHP_OS_BIT', 16);
        break;
    case (0x7FFFFFFF > (int)(0x7FFFFFFF+1)): // 2^31-1
        define('PHP_OS_BIT', 32);
        break;
    case (0x7FFFFFFFFFFFFFFF > (int)(0x7FFFFFFFFFFFFFFF+1)): // 2^63-1
        define('PHP_OS_BIT', 64);
        break;
    case (0x7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF > (int)(0x7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF+1)): // 2^127-1
        define('PHP_OS_BIT', 128);
        break;
    default:
        define('PHP_OS_BIT', 8);
        break;
}
var_dump(PHP_OS);
var_dump(PHP_OS_BIT);

Можно использовать константу PHP_INT_MAX, но есть зависимость от версии PHP:

switch (PHP_INT_MAX) {
    case (0x7FFF): // 2^15-1
        define('PHP_OS_BIT', 16);
        break;
    case (0x7FFFFFFF): // 2^31-1
        define('PHP_OS_BIT', 32);
        break;
    case (0x7FFFFFFFFFFFFFFF): // 2^63-1
        define('PHP_OS_BIT', 64);
        break;
    case (0x7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF): // 2^127-1
        define('PHP_OS_BIT', 128);
        break;
    default:
        define('PHP_OS_BIT', 8);
        break;
}

Другие посты на эту тему

• No Related Post

В ближайшем времени, в Харькове и Киеве, а также Екатеринбурге и Москве пройдут мастер-классы по JavaScript’у. Ведущий — Илья Кантор, создатель http://javascript.ru и http://algolist.manual.ru, в прошлом один из разработчиков фреймворка Dojo Toolkit, человек с большим опытом в создании сложных javascript-приложений.

Темы

• Профессиональное javascript-программирование
• Сложный AJAX и COMET: тонкости Web 2.0
• Мастер-класс по клиентской оптимизации
• Секреты jQuery

Расписание

• Харьков — 19 и 20 июня
• Екатеринбург — 26 и 27 июня
• Москва — 17 и 18 июля
• Киев — 24 и 25 июля

Мероприятия платные, но стоимость не кусается. Узнать больше можете на странице http://javascript.ru/mk. И да, коль накладок не будет — встретимся в Харькове ;)

Другие посты на эту тему

• No Related Post

Прежде чем приступить к прочтению данной статьи, стоит определиться, что из себя представляют события — для web-странички, событиями будут являться любые действия пользователя – это и ввод данных с клавиатуры, и передвижения мышки, и конечно же “клики” – всё это и есть события. К событиям можно еще отнести события создаваемые скриптами, т.н. триггеры.

Базовые события

Начнем с азов. jQuery работает практически со всеми событиями в JavaScript’е, приведу список функции с небольшими пояснениями:

• change — измение значения элемента (значение, при потери фокуса, элемента отличается от изначального, при получении фокуса)
• click — клик по элементу (порядок событий — mousedown, mouseup, click)
• dblclick — двойной клик по элементу
• resize — изменение размеров элементов
• scroll – скроллинг элемента
• select — выбор текста (актуален только для input[type=text] и textarea)
• submit — отправка формы
• focus — фокус на элементе – актуально для input[type=text], но в современных браузерах работает и с другими элементами
• blur — фокус ушел с элемента – актуально для input[type=text] — срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab’у)
• focusin — фокус на элементе, данное событие срабатывает на предке элемента, для которого произошло событие focus
• focusout — фокус ушел с элемента, данное событие срабатывает на предке элемента, для которого произошло событие blur
• keydown — нажатие клавиши на клавиатуре
• keypress — нажатие клавиши на клавиатуре (порядок событий — keydown, keypress, keyup)
• keyup — отжатие клавиши на клавиатуре
• load — загрузка элемента (img)
• unload — выгрузка элемента (window)
• mousedown — нажатие клавиши мыши
• mouseup — отжатие клавиши мыши
• mousemove — движение курсора
• mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
• mouseleave — вывод курсора из элемента, не срабатывает при переходе фокуса на дочерние элементы
• mouseover — наведение курсора на элемент
• mouseout — вывод курсора из элемента

Опробовать события можно на примере с событиями мышки и элементами формы.

Большинство из перечисленных событий можно имитировать непосредственно из самого скрипта:

<script lang="javascript"> $('#menu li').click(); </script>

Триггеры

Для работы с триггерами в jQuery предопределены следующие функции:

• bind (type, data, fnc) — добавляет обработчик событий
• one (type, data, fnc) — добавляет обработчик событий, который сработает лишь раз
• trigger (event, data) — вызывает обработчики событий
• triggerHandler( event, data) — вызывает обработчики событий, без вызова события браузера
• unbind (type, fnc) — удаляет все обработчики событий с элемента

$('.class').bind('click', function(){
    // что-то делаем
});

// вызываем обработчик
$('.class').trigger('click');

// отключаем обработчик
$('.class').unbind('click');

Можно повесить триггер почти на любой объект:

var obj = {
    test:function() {
        console.log('obj.test');
    }
}

$(obj).bind('someEvent', function(){
   console.log('obj.someEvent');
   this.test();
});

$(obj).trigger('someEvent');

Пространство имен

Обычно, когда мы хотим создать/удалить свой обработчик событий, мы пишем следующий код (чуть выше я об этом уже писал):

// создаем свой обработчик
$('.class').bind('click', function(){
    // что-то делаем
});
// удаляем все обработчики
$('.class').unbind();

Но как всегда, есть ситуации когда нам необходимо отключить не все обработчики (как пример, надо отключить обработку какого-то контрола определенным плагином), в этом случае нам на помощь приходят пространства имен, использовать их достаточно легко:

// создаем обработчик
$('.class').bind('click.namespace', function(){
    // что-то делаем
});

// вызываем обработчик
$('.class').trigger('click.namespace');

// удаляем все обработчики в данном пространстве имен
$('.class').unbind('click.namespace');

Еще примерчик, вешаем обработчик, который выводит текст в консоль.

$('.class').bind('click.namespace', function(){
    console.log('bang');
});
$('.class').trigger('click.namespace'); // вызываем событие, наш обработчик сработает
$('.class').trigger('click');           // тоже работает
$('.class').trigger('click.other');     // событие из другого пространства имен, наш обработчик не будет вызван

Так же, есть поддержка нескольких пространств имен (с версии 1.3, если быть точным):

$('.class').bind('click.a.b', function(){
    // для пространств a и b
});
$('.class').trigger('click.a'); // вызываем обработчик из пространства a
$('.class').unbind('click.b');  // отменяем обработчик для пространства b

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

$('.class').bind('click.namespace', function(){}); // обработчик клика
$('.class').bind('blur.namespace', function(){});  // обработчик фокус
$('.class').unbind('.namespace'); // передумали, и все отменили

• Пример использование триггеров и пространства имен
• Официальная документация по пространствам имен

Работа с live

Очень часто при генерации страниц AJAXом возникает необходимость повесить обработчики событий на новые элементы в DOMе, для этой цели служит метод live (первый параметр — имя события, второй — обработчик).

Приведу пример — есть следующая задача:

1. все внутренние ссылки на страницы должны подгружать контент AJAXом в элемент с id=content
2. правило №1 верно для ссылок из подгруженного контента

Реализовать первое требование достаточно просто:

$('a[href^=/]').click(function(event){
    $('#content').load($(this).attr('href'));
    return false; // эквивалентно вызову event.preventDefault(); и event.stopPropagation();
});

Выполнить второе правило тоже легко, достаточно слегка модифицировать предыдущий пример:

$('a[href^=/]').live('click', function(event){
    $('#content').load($(this).attr('href'));
    event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам
});

Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change (1.4), submit (1.4), focusin (1.4), focusout (1.4), mouseenter (1.4), mouseleave (1.4)
Нет поддержки: blur, focus, change, submit

В противовес функции live существует функция die — она убирает отслеживание событий для вновь появившихся элементов.

Touch события

Смартфоны с большим сенсорным экраном — это уже не редкость, вот и web-индустрия начинает адаптироваться под пользователей того же iPhone, если же вам понадобилось подобная адаптация, то вам пригодится следующая информация:

События в JavaScript’е:

• touchstart &mdash аналогично mousedown
• touchmove &mdash mousemove
• touchend &mdash mouseup
• touchcancel &mdash аналогии нет

О том как с ними работать, можно подчерпнуть из статей iPhone Touch Events in JavaScript и Touching and Gesturing on the iPhone

Если же вернутся к CSS, то для того же iPhone подключение внешнего CSS файла будет выглядеть следующим образом:

<link rel="stylesheet" href="iphone.css" type='text/css' media='only screen and (max-device-width: 480px)' />

Или в самом CSS:

@media only screen and (max-device-width: 480px) {
  .sidebar {
    display: none;
  }
}

Подробнее читайте в статье iPhone Development: 12 Tips To Get You Started (перевод был тут)

Цикл статей

1. jQuery для начинающих
2. jQuery для начинающих. Часть 2. JavaScript Меню
3. jQuery для начинающих. Часть 3. AJAX
4. jQuery для начинающих. Часть 4. Селекторы
5. jQuery для начинающих. Часть 5. Эффекты
6. jQuery для начинающих. Часть 6. События

Другие посты на эту тему

• (a) Sexy Images jQuery плагин
• jQuery для начинающих. Часть 5. Эффекты
• jQuery iPhone UI
• 10 jQuery Datagrid плагинов
• jQuery для начинающих. Часть 4. Селекторы
• (a) Slideshow плагин для Wordpress
• (a) Slideshow – jQuery плагин для организации слайд-шоу
• jQuery-PHP обновление до версии 0.8

Анонс конференции по Symfony PHP Framework, которая состоится 3 июля 2010 года в г.Киев. Участие в конференции – бесплатное.

Конференция ориентирована как на профессиональных веб-разработчиков, так и начинающих. Мероприятие будет интересным местом для общения программистов и руководителей интернет-проектов, которые используют или планируют использовать фреймворк Symfony, где можно будет пообщаться, поделиться своим опытом, получить новые знакомства. Зарегистрироваться на мероприятие.

Планируемые доклады

• Перевод боевого сайта с ветки 1.0 на ветку 1.4 — Руслан Ханов (Россия, Новосибирск)
• Как мы делали langwhich.com и unique-shopper.com? — Денис Пищенко, Дмитрий Одуло (Украина, Харьков)
• Symfony как платформа для open-source проектов (Sympal, Apostrophe, Diem) — Александр Демченко (Украина, Харьков)
• Многоязычные сайты на Symfony. Проблемы и их решения — Игорь Бровченко (Украина, Киев)
• Сontinuous Integration для Symfony — Игорь Бровченко (Украина, Киев)
• LESS, SASS, HAML: 4 буквы, изменившие frontend development — Константин Кудряшов (Белоруссия, Минск)
• Symfony Task – задачи батча (пакетной обработки). Как использовать, как улучшить — Александр Безрученко (Россия, Таганрог)
• Кастомизация генераторов в Symfony 1.3/1.4. Эффективное управление функционалом и структурой плагинов — Николай Зык (Украина, Киев)
• Философия сервисов. Практическое применение в Symfony 1.3/1.4 — Николай Зык (Украина, Киев)
• Symfony 2 – перезагрузка? — Александр Демченко (Украина, Харьков)
• Этапы разработки реального проекта на Symfony 2 + Doctrine 2 — Александр Скорней (Украина, Киев)
• Внедрение компонента templating в существующий проект — Станислав Сметанин (Россия, Ижевск)

Подробности и новости

• Сайт конференции: symfonycamp.org.ua
• Twitter: @SymfonyCampUa

Другие посты на эту тему

• No Related Post

В качестве инструмента я взял тест SlickSpeed и установил на свой хостинг, в списке испытуемых оказались следующие фреймворки:

• Dojo 1.4.3
• JQuery 1.4.2
• MooTools 1.2.4
• Prototype 1.6.1 и 1.7.2
• ExtJS Core 3.1
• YUI 3.1.1

А так же браузеры, установленные на моей системе:

• Mozilla Firefox 3.6.3
• Opera 10.53
• Google Chrome 5.0.375.55 beta
• Safari 4.0.3
• Internet Explorer 8.0

Результаты тестирования

Все тесты проводил 5 раз — для достоверности (т.е. с учетом алгоритма тестирование, результат — среднее значение от 30 запусков). Все расширения браузеров были отключены. Результаты приведены в миллисекундах.

Сводный график полученных данных:

Отбросим IE, а то он сильно портит картину:

Выводы

Самым быстрым фреймворком оказывается jQuery:

1. jQuery 1.4.2 — 42,24 мс
2. Prototype 1.7.2 — 47,88 мс
3. Dojo 1.4.3 — 48,68 мс
4. ExtJs Core 3.1.0 — 113,16 мс
5. MooTools 1.2.4 — 127,72 мс
6. YUI 3.1.1 — 129,32 мс
7. Prototype 1.6.1 — 143,56 мс

И в «медальном зачете» картина та же — Prototype совсем чуть-чуть отстает:

А среди самых быстрых браузеров — Google Chrome, на пятки наступает Safari:

1. Google Chrome 5.0 — 27,71 мс
2. Safari 4.0.3 — 29,51 мс
3. Opera 10.53 — 45,31 мс
4. Mozilla Firefox 3.6.3 — 68,51 мс
5. Internet Explorer 8.0 — 295,06 мс

А в «медальном зачете» они обменялись местами:

P.S. Если хотите – добавлю еще фреймворки для сравнения, оставляйте ссылку и название функции для тестирования…

Другие посты на эту тему

• Производительность JavaScript фреймворков

Когда ездишь в метро и читаешь «Ководство», то в голову лезут интересные мысли…

Начинаешь всматриваться в окружающих людей, в дизайн рекламных объявлений, и конечно же обращаешь внимание на схему метрополитена.

Схема

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

• необходимо убрать «строящийся и перспективные станции» – не стоит себе льстить – маловато в Харькове станций
• хватит привязываться к географии города, я 10 лет живу в Харькове и мне она не помогает ориентироваться
• надо тщательней выбирать носитель – прозрачная пленка на стекле не фонтан
• убрать подписи транслитом – шума от них больше чем толку, да и каждый турист использует путеводитель, а не пытается изучать схемы в вагоне (это касается схем конкретных линий метрополитена)

От слов к делу – у меня получилась следующая схема (на линч лучше не отправлять :):

Еще один вариант с иконками:

Иконки

Как дополнение к названиям станций предлагаю добавить иконки, благо станций у нас не так уж и много, и рядовому горожанину не составит труда их запомнить. Приведу несколько примеров, постарайтесь угадать станции:

Если носитель позволяет – то предыдущую схему можно совместить с иконками…

Нумерация выходов

Это улучшение просто жизненно необходимо, т.к. наверное каждый житель города ошибался с выходами из метро, и это с учетом того, что к ним есть указатели с именами улиц и районов. Пора этот бедлам остановить, давайте просто пронумеруем выходы — так легко и главное — однозначно:

Если же есть какие-либо еще выходы:

Совмещаем это с иконками:

Такую иконку можно использовать на схемах проезда подхода к чему-либо — очень удобно.

Информационное табло

Не знаю как у вас, но у нас в метро над туннелем висит табло, на котором отображается текущее время, и сколько времени прошло с предыдущей электрички, как по мне — там должно отображаться время до следующей электрички, да и само табло лучше повесить (продублировать) не в начале платформы, а в конце — ведь все ожидающие все время заглядывают в туннель — «Ах, не видать, а сколько там времени то» — вот так стоит толпа и крутит головой туда-обратно…

P.S. Фотография позаимствована с официального сайта КП «Харьковский метрополитен»

Другие посты на эту тему

• Законы, которые мы нарушаем
• Мой город будет чистым!
• 9/31 Ukraine
• Украина сегодня

Материальчик на моём блоге от родной компании – обзор приложения uBooks…

Анонс бесплатной версии я уже давненько публиковал на Хабре, с тех пор прошло уже много времени – много чего изменилось внутри приложения, да и выход нового SDK подбросил новых задач…

Пока обновленная бесплатная версия ждет своего часа, эта версия без рекламы и ограничений уже продается за $4.99

Но все-же о изменениях – основная задача, поставленная перед командой разработчиков – это поддержка как можно большего числа форматов в рамках публичного фреймворка, сейчас это: epub, fb2, html, txt, fb2 in zip.

Поскольку у нас читалка – то много внимания уделено настройке текста:

• дневной/ночной режим
• размер шрифта
• тип шрифта
• цвет шрифта/фона
• кодировка

Еще чуть-чуть настроек и фич приложения:

• плавная автопрокрутка
• анимация при листании
• язык приложения
• настраиваимые тап зоны
• поиск по книге
• ручной поврот экрана
• книжная полка
• поиск по книжной полке
• папки
• перемещение в книге по проценту

Книги можно заливать одним из следующих способов:

• http сервер
• ftp сервер
• web browser
• public storage

Для тех, кто забыл пополнить свой аккаунт на AppStore прилагаются промокоды (отпишитесь, если взяли какой):

M33RY7FYA4LF
7J7RE9RXAW97
MYFELA4RY4L3
YTRELYEJEMKT
76YJMKJYEPR6
TM79EHFJW7PE
EMFHW3YFWYF6
LYFJLAPPXY6E
NRFFKRTFLX43
HTA3KEN4PT6K

P.S. Коль вам понравилось данное приложение, то оставьте свой отзыв в AppStore.

Другие посты на эту тему

• jQuery iPhone UI

Спонсор поста: LTD-студия – разработка сайтов

На этот раз я не буду просто перечислять все фичи темы, я расскажу о том, как быстро создать свою уникальную тему. Для начала я бы посоветовал все же определится с тематикой сайта, а так же желательно с палитрой цветов. С тематикой – выберу что-то нейтральное – ведь лучше гор могут быть только горы…

Затем следует заняться поиском клипарта для сайта, но поскольку наш бюджет ограничен $0.00, то будем использовать свободные источники – предпочитаю flickr – т.к. есть возможность поиска картинок под CC лицензией:

Из всего многообразия выбрал следующую картинку (слегка ее причесал, по-полам разделил, но особо не заморачивался):

Разрезав – залил в тему:

Для формировании палитры можно использовать один из следующих сайтов (за основу палитры брал картинку выше):

• http://www.degraeve.com/color-palette/
• http://www.colorhunter.com/

У меня получилась следующая:

Переносим ее в настройки темы:

Немного шаманим с CSS:

/* увеличиваем шрифт в заголовке, и чуть-чуть смещаем вниз */
#name {
    margin-top:40px !important;
    font-size:112px !important;
    text-shadow: 0px 0px 4px #777;
}
#description {
    font-size:24px !important;
    font-weight:900;
    text-indent:24px;
}
/* добавляем к ссылкам навигации по паре полосок */
.navigation div {
    margin:0 0 8px;
}
.navigation div a {
    height:24px;
}
.navigation .alignright a {
    border-left: 4px solid #147dbe;
    margin:0 16px 0 0;
    padding-left:8px;
}
.navigation .alignleft a {
    border-right: 4px solid #147dbe;
    margin:0 0 0 16px;
    padding-right:8px;
}
/* изменяем шрифт в футере, чтобы не терялся текст на цветном фоне */
#footer .widget h3,
#footer .widget a {
    color:#fff;
    font-weight:900;
    text-shadow: 0px 0px 1px #333;
}

Применяем изменения. После получения удовлетворения от проделанной работы, лучше сохранить тему под своим именем:

Всё. У вас своя уникальная тема:

Еще полезные сайты – тут можно скачать текстуры и шаблоны:

• Free Pattern and Texture Resources For Web Designers – список ресурсов
• COLOURlovers – генератор текстурок

Другие посты на эту тему

• Тема-Конструктор для Wordpress (обновление)
• Тема-Конструктор для Wordpress