Заметки об HTML, CSS, AJAX, DOM, PHP, MySQL и многом другом

Webo.In — еще один сайт для измерения времени загрузки. Примечателен тем, что кроме измерения и детального расписывания всех составляющих времени загрузки дает целый набор рекомендаций по повышению скорости загрузки сайта (включая как изменение самой Web-страницы, например, объединение/сжатие CSS, так и настройки Apache). Также содержит множество полезных статей по теме ускорения загрузки сайта.

DURIS — сайт, позволяющий сжимать CSS и применять в них технологию Data In URIs, с помощью которой можно помещать картинки в непосредственно в текст CSS, не получая их с сервера в виде отдельных файлов.

При тестировании скриптов иногда возникает необходимость тестирования и их почтовых функций. Из-за ограничений, имеющихся в PHP, наиболее простым решением оказывается установка локального почтового сервера (к тому же в ситуациях, когда нужно протестировать массовую рассылку, это избавляет от необходимости регистрировать десятки ящиков на внешних сервисах). Одним из наиболее удачных решений (для OS Windows) с точки зрения соотношения функциональность/удобство использования/легковесность является hMailServer, который является как SMTP, так и POP3/IMAP-сервером.

Иногда при использовании абсолютного позиционирования возникают ситуации, когда в Internet Explorer 6 элемент позиционируется не относительно контейнера, а относительно всей страницы в целом (точнее относительно элемента, в который вложен этот контейнер, но чаще всего таким элементом и оказывается страница). Чтобы избавиться от этой ошибки, нужно вложить в контейнер еще один элемент div с явно заданной шириной:

<div id="containter" style="position: relative; ....">
<div style="width:100%">
<div id="element" style="position: absolute; ...;...">Содержимое элемента</div>
</div>
</div>

Иногда возникает ситуация, когда какой-либо тяжелый, но трудно отслеживамый MySQL-запрос замедляет работу всего сайта . К сожалению, MySQL не содержит средств ограничения времени выполнения запроса, как PHP, но есть другая весьма полезная (в случае SELECT-запросов) опция: max_join_size

Эта опция позволяет задать максимальное количество строк (или их комбинаций или обращений к диску), которое может быть просмотрено за один запрос. Если количество строк превысит заданное, выполнение запроса прерывается с ошибкой.

Данную опцию следует прописывать либо в my.cnf (секция mysqld), либо задавать динамически с помощью запроса SET @@max_join_size = значение (требуются права суперпользователя).

Site Guard — система, позволяющая отслеживать появление на сайте вредоносных или подозрительных JavaScript. Работает следующим образом: запоминает скрипты на главной странице и в случае появления новых, содержащих подозрительные элементы, высылает уведомление на Email или SMS. Также высылает уведомления в случае недоступности сервера или окончания срока регистрации домена.

Если используется буферизация средствами PHP (т.е. в скрипте имеется конструкция вида ob_start), то при выдаче статуса 304 возникает следующая ситуация: после выдачи статуса происходит выдача тела документа, содержащегося в буфере (даже в том случае, если функция ob_start была вызвана, а какого-либо вывода не производилось, т.е. буфер имеет нулевую длину). Это является нарушением протокола HTTP, согласно которому после выдачи статуса 304 контента выдаваться не должно и вызывает негативную реакцию роботов поисковых систем (в частности, Яндекс такую ошибку интерпретирует как “Передано неверное количество данных” и может удалить соответствующие страницы из своего индекса).
Избежать этой ситуации можно следующим образом: после вызова функции header с выдачей заголовка очищать буфер вывода с помощью функции ob_end_clean.

В HTTP-протоколах версии 1.0 и 1.1 имеются специальные средства, позволяющие проверять, нужно ли обновить документ, который хранится в кеше у клиента. В случае если страница не изменялась, существует возможность выдать только заголовок со статусом 304 и тем самым сэкономить траффик, а в ряде случаев и разгрузить сервер за счет того, что выполнение скрипта в такой ситуации можно завершить раньше.
В HTTP 1.0 такими средствами является пара заголовков Last-modified/If-Modified-Since, в HTTP 1.1 к ним добавляются заголовки ETag/If-None-Match.
Работают эти средства следующим образом: при первом обращении клиента сервер выдает запрошенный документ и поле заголовка Last-Modified, в котором указывает дату последней модификации документа. (Для статики это время последнего изменения файла, которое хранится в файловой системе, для динамически генерируемого контента о хранении этой даты придется позаботиться разработчику скрипта.) При повторных обращениях к этому же документу клиент передает в заголовке поле If-Modified-Since, в котором указывает дату модификации копии документа в своем кеше. Скрипт, выполняющийся на сервере, сравнивает полученную дату с датой модификации данного документа на сервере, и если документ не изменился (т.е. дата на сервере меньше или равна дате на клиенте), может выдать статус 304 и завершить работу, не производя генерации документа заново.
Пара заголовков ETag/If-None-Match работает аналогично, только вместо даты используется заключенная в кавычки произвольная строка (метка), характеризующая документ. На практике в качестве такой строки для скриптов чаще всего берется MD5-хеш документа. Кроме того, в поле If-None-Match могут передаваться несколько меток, разделенных запятой.
Код для выполнения подобной проверки выглядит следующим образом (пояснение: глобальная переменная $GLOBALS['config']['nocache'] используется для отключения проверки кеша в отладочных целях, прочие параметры аналогичны описанным в предыдущем сообщении):
Далее »

Хотя выдача HTTP-заголовков на первый взгляд кажется очень простой задачей, в ней имеется ряд тонкостей:

1. Статусы кроме числового кода имеют еще и стандартизированное словесное описание, которое также следует отдавать в строке статуса.
2. Отдавать заголовок желательно в той же версии протокола, в которой был сделан запрос (в противном случае возможны проблемы с некоторыми старыми proxy-серверами).
3. Некоторые дополнительные поля (например, ETag или Expires) есть только в версии HTTP 1.1.

Ниже приведен пример кода, который реализует корректную выдачу основных HTTP-заголовков (статус передается в $GLOBALS['status'], адрес перехода, если требуется, в $GLOBALS['location'], MD5-хеш отдаваемого документа — в $hash, дата последней модификации — в $GLOBALS['lastmod']). Код возвращает true, если требуется выдача тела документа и false в противном случае.
Далее »

ExtJS — библиотека JavaScript, позволяющая легко создавать в броузере интерфейсы, не уступающие интерфейсам обычных EXE-программ. Распространяется по двум лицензиям: коммерческой и GPL 3. 

Несколько примеров.

Тем не менее, несмотря на все достоинства, библиотека имеет существенный недостаток: полное отсутствие graceful degradation. При выключенном JavaScript работа с сайтом, сделанным на этой библиотеке, становится невозможной.

Если контейнер содержит только элементы с аттрибутом float, то высота такого контейнера оказывается минимально-допустимой с точки зрения броузера. Для избежания этого обычно в конец контейнера помещается пустой div с clear:both, что нежелательно с точки зрения семантической верстки. Однако если контейнеру задать в свойствах ширину, отличающуюся от auto (например, width: 100%), его высота станет подбираться так, чтобы в нем умещались все плавающие элементы. В результате необходимость в пустом div с clear: both оптадает.

Добавлено (благодарности пользователю Шурик за уточнение): необходимо ещё установить свойство overflow (в auto, но из-за “некоторых” браузеров лучше в hidden).