Сегодня мы поговорим, как сделать на базе ExtJS красивый (и функциональный) список каких-либо данных, например, список пользователей или групп. Я применяю такой список в одном из текущих проектов (правда, там уже не настолько красивый и удобный) Такой виджет можно использовать при выводе любых данных, которые характеризуются не только тестовой строкой, но и расширенными данными, а также необходимо сопоставить какие-то действия каждому набору. Допускается динамическое обновление данных (через Store), а также сортировка и группирование — в общем, все возможности, предоставляемые компонентом Grid из ExtJS. Сразу скажу, что я буду использовать версию ExtJS 3.0, но и в предыдущем релизе, 2.3.х пример также должен быть работоспособным. Приведенный компонент является примером и никак не готовым для использование кодом, а лишь демонстрацией возможностей, вы в своих проектах можете как угодно менять и дорабатывать под свои возможности. По этой же причине к статье намеренно нет исходного кода.

Последнее время оживилась публика с вопросом случайной выборки из таблицы. Решений по оптимизации полно, и нового сейчас я вам наверное ничего не покажу, просто напомню про основные методы оптимизации — упрощение запроса и индексацию. Без предисловий про фриленсеров, сразу к делу ;)

Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 1 и в максимальном разрешении – его определили как 1600, приступил к работе.

Хочу поделиться одной полезной утилиткой, написанной на pure JavaScript, — URL. По сути это небольшой парсер URL'ов, работающий почти как window.location, но не перезагружающий страницу браузера при манипуляциях.

А заодно скажу пару слов про getters & setters в JavaScript.

UPD1: по просьбам трудящихся, вынесу сюда примеры:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href // my.site.com/somepath/relative/path/index.html
u.href = '/absolute/path.php?a=8#some-hash'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.hash // #some-hash
u.protocol = 'https:'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.host = 'another.site.com:8080'
u.href // another.site.com:8080/absolute/path.php?a=8#some-hash
u.port // 8080
// и так далее, и тому подобное

* This source code was highlighted with Source Code Highlighter.

Работает в FF3+ (может и в 2+, не пробовал) и в IE6+ ( и это — моё ноу-хау :-) ).
Разобрана в статье также полностью кросс-браузерная реализация, но в использовании — немного более громоздкая:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href() // my.site.com/somepath/relative/path/index.html
u.href('/absolute/path.php?a=8#some-hash')
u.href() // my.site.com/absolute/path.php?a=8#some-hash
// и т.д.

* This source code was highlighted with Source Code Highlighter.

Да, и я привожу свой листинг полностью, извиняйте, так надо.

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

Siege – это утилита для нагрузочного тестирования веб-серверов. Она была создана для того чтоб дать разработчикам возможность проверить ресурсоёмкость своего кода в условиях, максимально приближенных к реальным. Так же Siege может имитировать обращения к сайту сразу нескольких пользователей. Это позволяет держать сервер как бы «под осадой» долгое время. Количество запросов, произведённых при «осаде», рассчитывается из общего количества пользователей и количества их обращений к серверу. Например 20 пользователей, обратившись по 50 раз, создают в общей сложности 1000 запросов. Результат, выводимый программой после тестирования, включает в себя время затраченное на проверку, общее количество переданной информации ( включая заголовки ), среднее время ответа сервера, его пропускную способность и число запросов на которые пришёл ответ с кодом 200. Эти данные формируются и выдаются при каждой проверке. Подробно они описываются ниже. Siege имеет 3 основных модели работы – режим регрессионного тестирования, режим имитации Интернета и режим грубой силы. Программа считывает порцию ссылок из конфигурационного файла и обращается к ним по очереди ( режим регрессионного тестирования ) или случайно ( имитация интернета ). Или же пользователь может указать один единственный адрес к которому будут производиться все обращения – режим грубой силы.

UPD: спасибо за плюсы, перенес в тематический блог.

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

UsabilityLab участвовала в съёмках выпуска телепрограммы Прогресс (Пятый Канал Петербург), посвященного использованию технологии регистрации движений глаз. В эфир выпуск вышел в субботу, 27 июня 2009 года.


Фотографии со съёмок
UPDATE: RuTube иногда подглючивает, резервная ссылка на Яндекс.Видео video.yandex.ru/users/dmitrysatin/view/34

Наверно всем знакомо контекстное меню оперы.
Я хочу рассказать как настроить это меню для более удобного перевода.
Сам я пользуюсь 2-я сервисами для перевода в интернете — это Яндекс.Словари и Google.Translate их и будем интегрировать =) Хотя вы сможете прикрутить любой другой онлайн переводчик.

Доброго времени суток. Недавно я задался вопросом о том, как делать горячие BackUp`ы MySQL-серверов — ниже компиляция из прочитанного. Заранее хочу сказать, что данный пост является скорее большой заметкой, чем полноценной статьёй. Я намеренно уклоняюсь от описания синтаксиса — на эту тему уже немало написано — я же ставил перед собой другую цель — составить краткий обзор основных методов с характерными особенностями:

Простой плагин для jQuery, позволяющий закэшировать работу селекторов.
По наводке tenshi в камментах к habrahabr.ru/blogs/javascript/63119

InfoVis Toolkit — предоставляет инструменты для создания интерактивных представлений данных в Веб с помощью JavaScript. Распространяется с открытым исходным кодом под лицензией BSD. Поддерживаются основные браузеры: IE6+, Firefox2+, Safari3+, Opera9.5+

Перевод занятной статьи On diacritics (David Březina) из блога I love typography.

Проблема диакритических знаков, используемых в центральной Европе, не очень то и актуальна для большинства из нас (со своими чёрточками и точечками над «Й» и «Ё» вроде бы нормально разобрались), но для дизайнеров, работающих с зарубежными клиентами, будет весьма познавательно. Да и вообще, как говорится, для общего развития…

По поводу ошибок и прочего — ругайте переводчика (то бишь меня). Но не сильно. Пишу и перевожу как могу :)

Публикуется с разрешения автора.

Бродя по просторам PHP документации случайно наткнулся на две функции: imagegrabwindow и imagegrabscreen. Они умеют делать скриншоты в Microsoft Windows.
Заинтересовало. Кончилось дело тем, что был написан скриптик генерирующий полный скриншот любого сайта.
Итак нам необходимы:

• Internet Explorer ActiveX component и документация к нему.
• PHP 5.2.2+

Здрасти. Долго-долго я присматривался к замечательному фреймворку django, читал книгу, изучал статьи, пробовал писать hello world'ы (со встроенным в джангу сервером это было легко и приятно). А вчера я попробовал настроить от начала до конца боевой сервер, и как оказалось, это не так просто, и мне даже показалось, что будь я моложе и неопытнее, я бы плюнул на это дело. Вот я и решил поделиться с читателями полной инструкцией, снабдив её некоторыми рассуждениями и конфигами. Статья расчитана на начинающих, но будет интересно всем, обещаю.

Представляю вниманию общественности визуальный PHP-рефлектор.

Скрипт индексирует все .php-файлы в указанной директории, кэширует информацию о найденных классах. Разбор .php файлов осуществляется с помощью Tokenizer. Кэшируются имена найденных классов, кэшируется сопоставление имя файла — класс для последующего использования в автолоадере.

Список классов представляется в виде дерева. Для каждого класса доступен список методов, свойств. Доступен просмотре базового класса и имплементированных интерфейсов. Данные о «составе» классов получаются на ходу через PHP reflection API. Данные подгружаются через AJAX.

Интерфейс выполнен на ExtJS. Этим обусловлена поддержка браузеров — работает в IE6+, FF1.5+, Safari 3+, Opera 9+ (PC, Mac)


Посмотреть PHPReflector в действии.
UPD: Исходники

В исходниках отсутствует Ext
Теперь Ext с минимальным набором компонентов подгружается из внешних источников через CDN (CacheFly)

Планы на будущее:

• Причесать исходники;
• Сделать поиск;
• Сделать отображение не только базовых классов, но и классов, наследованных от данного;
• Отображение DocBlock'ов для классов, методов, свойств
• UPD: Добавить отображение штатных классов PHP

Со временем Sphinx оброс большой кучей режимов поиска и ранжирования. Регулярно возникают вопросы про разное (от «как вытащить документ на 1е место» до «как рисовать от 1 до 5 звездочек в зависимости от степени совпадения»), которые на самом деле суть вопросы про внутреннее устройство тех режимов. В этом посте расскажу все, что вспомню: как устроены режимы поиска и режимы ранжирования, какие есть факторы ранжирования, как в точности рассчитываются факторы, как финальный вес, все такое. И, конечно, про звездочки!

Система Restoranonline.ru — уникальный сервис, объединяющий все стороны удаленного заказа еды из ресторанов клиентам.

Уникальность системы Restoranonline.ru заключается в следующем:

• Ресторан получает абсолютно бесплатно персональный, полнофункциональный сайт службы доставки с собственным доменным именем (например — www.restoran-idzumo.ru ).
• В своей собственной рекламе, ресторан рекламирует только адрес сайта своего Ресторана, подключенный в систему, а не сайт Системы.
• Полная автоматизация всех внутренних процессов, документооборот, отчетность, биллинг
• В ресторане для приемки заказа вообще может не быть интернета!
• У системы собственный call-центр для обработки и согласования заявок
• В системе есть своя курьерская служба, но можно подключить и стороннюю

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

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Сегодня целый день читаю форумы, в которых обсуждается горячая тема последних дней: «3FN Blackout». Эта же тема пробежала и на страницах хабрасообщества.

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

Судя по прочитанным материалам, складывается ощущение, что рады такому развитию событий только те, у кого не было аккаунта на 3FN. Это больше похоже на смесь позиций «моя хата с краю» и «пусть у конкурента соседа корова сдохнет». Как некрасиво, а? А вот вы, умничающие сограждане, уверены что на 3FN «жили» исключительно спаммеры, вирусописатели и педофилы? А вы не задумывались что из более чем 15000 клиентов, большая часть вела вполне легальную деятельность и размещала контент, отвечающий американскому и международному законодательству? Я, и многие мои партнёры, выбрали этого хостера за быстрые сервера и грамотный саппорт. После украинских и российских хостеров, на 3FN мои сайты просто летали. За более чем год размещения — 15 минут разового простоя, связанного с падением жёсткого диска, сопровождаемые вежливыми извинениями саппорта в аське.