Рано или поздно многие крупные проекты сталкиваются с проблемами производительности при постраничной навигации по записям. Некоторые из них решают эту проблему ограничением количества доступных для просмотра записей (скажем, не больше 1000). Вполне приемлемое решение. Но в этом случаем могут возникнуть проблемы с индексированием сайта сторонними поисковиками, которые и представляют наибольшую угрозу. В этой статье я хотел бы отказаться от привычной для всех панели навигации вида «1..2..3..4..» в пользу простой «вперед… назад» (будет проще объяснить), но это не проблема реализовать подобное и с первым вариантом.
Более точно определить тему, назвав, какое количество записей считать достаточно большим для появления тормозов, не получится, так как эта цифра для всех разная и сильно зависит от того, насколько быстрые у Вас жесткие диски, сколько памяти, и какая часть Ваших данных уже закеширована в ней и тд. Но если Вы и Ваши сервера ощущают, что n-ная страница при выводе даётся тяжелее первой, и при этом не знаете, что с этим делать – статья для Вас. Но для начала, я хотел бы на пальцах объяснить, почему ОНО работает медленно.

Кстати, тест происходит на виртуальной машинке, работаю я с СУБД под рутом, версия MySQL – 5.0.32.

Да, я знаю, что такое синтаксический анализ. И знаю много разных библиотек для подсветки чего угодно. Только это всё не то, когда надо подсветить простенький примерчик, не содержащий всяких кодоизвращений. И уж совсем негоже тянуть для этого много-много байт _правильно_ разбирающих _любой_ код.

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

code = code
// ключевые слова (список неполон, написал, что в голову пришло)
.replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|switch|case)([^a-z0-9\$_])/gi,
'<span class="kwrd">$1</span>$2')
// всякие скобочки
.replace(/(\{|\}|\]|\[|\|)/gi,'<span class="kwrd">$1</span>')
// однострочные комментарии
.replace(/(\/\/[^\n\r]*(\n|\r\n))/g,'<span class="comm">$1</span>')
// строки
.replace(/('.*?')/g,'<span class="str">$1</span>')
// функции (когда после идентификатора идет скобка)
.replace(/([a-z\_\$][a-z0-9_]*)\(/gi,'<span class="func">$1</span>(')
// не люблю восьмизначные табы, пусть лучше будет 4 пробела
.replace(/\t/g,'    ');

Пару недель решил взяться за изучение PHP и спустя какое-то количество времени отлаживать скрипты через echo стало неудобно. Вспомнил о существовании такой вещи как firePHP, почитал документацию, скачал, поставил, обрадовался. Ведь так классно отлаживать скрипты через консоль!
Но увы, по непонятным мне причинам («X-Wf-» заголовки доходят, а все равно «no messages in Firebug Console»*), не заработал. Посмотрел в интернете — безуспешно, пришлось самому решать проблему.

Думаю, для многих не секрет, что xml является достаточно удобным способом хранения и передачи информации. Вот уже который раз натыкаюсь в литературе на утверждение, что в будущем xml должен заменить html, а появление xhtml является тому подтверждением. Но тут есть нюанс. все браузеры знают как отображать html-документы, но ни один из них не знает, как должны отображаться xml-документы. Это связано прежде всего с тем, что формируя xml-документ Вы можете ввести свои теги. Я хочу коротко (это очень большая тема, на самом деле) рассказать о так называемых «Таблицах преобразований xml-документов».
Думаю, что многие наверняка знакомы с ними, но надеюсь что кому-то это может быть полезно, а, учитывая мою любовь к практике, хочу показать всё на очень простом примере

С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.

Отсебятина

А вот и перевод третьего урока по Google Maps API. Этот урок — как видно из названия — посвящен созданию карт при помощи данных, хранящихся в БД. Как и предыдущие — кросс-пост из моего блога.

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

CSS sprites¹

Суть проста изображение с каптчей содержит 20–30 символов, только 4–5 из них идущие подряд являются кодом, начинаются они то с 1го символа то с 20го в общем с произвольного, остальное — мусор, с помощью позиционирования бекграунда в слое видны только нужные символы. Человек введёт их, бот распознает и введёт все 30. Вуаля! ;)

Наверное, многие, начинающие изучать XSLT, сталкивались с проблемой — textarea в режиме вывода XML выводится как одиночный закрытый тэг:
<textarea name="text" id="text"/>
, а не как пара тэгов с нулевым ребенком:
<textarea name="text" id="text"></textarea>

Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.

К делу

Внешне задумка выглядит так:

Сегодня Google объявила об открытии интерфейса Google AJAX Libraries API. Что это и для чего нужно я в кратце поясню.

Довольно интересная тема, особенно важная для интернет-магазинов, сайтов турагенств и прочих оператор-ориентированных сервисов. Стандартный подход в рунете такой: в шапке сайта указывается телефон, в подвале — е-мейл, в лучшем случае есть ICQ или форма обратной связи. Skype мне пока не встречался.

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

На западе решением этой проблемы было озадачено несколько компаний, разработавших всё, что можно найти в Google по запросу “Live Chat Software“, то есть программы для мгновенной связи оператора с посетителем сайта. По некоторым данным, такой механизм в хорошей реализации может увеличить конверсию и, соответственно, продажи более чем на 80% (!). Это вполне логично — задать вопрос специалисту проще, чем лазать по каталогу и легче, чем звонить, искать кого-то в ICQ или ждать ответа по e-mail.

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

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

Нет, я вполне понимаю когда у вас действительно приложение ориентировано на обработку и хранение больших массивов данных. Ну, ERP-системы, всякие хранилища, статистика там, «в прошлом месяце продали сто тыщ карандашей, в этом двести».

С другой стороны, в большинстве случаев, когда речь идет о десктопных (или веб-) приложениях, где не нужно ворочать миллионами примитивных записей,  а приложение работает с относительно высокоуровневыми, сложными объектами, суть «дизайна и проектирования баз данных» заключается в повторении двух действий:

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

Итак, какова ситуация в области современной веб-типографики и какими способами следует решать возникающие проблемы?

Британский сайт I Love Typography, посвящённый типографике, опубликовал список с примерами отличной типографики. Этот список составлен по итогам II кв. 2008 года. Предыдущие «хит-парады» можно найти здесь и здесь.

Каждый пример сопровождается кратким комментарием, а нажатие на скриншот ведёт на оригинальный сайт.

Seed Conference

Нет флэша, нет картинок, нет лишнего шума; просто хорошо стилизированный шрифт и хорошо написанный текст: реальное доказательство того, что с помощью только шрифта можно получить отличный результат. Хотелось бы увидеть ещё несколько примеров такого рода.

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

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

jQuery Autocomplete: автозаполнение
Если Вы пробовали что-то найти в Google, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно… © Gennady

Мне никогда не нравилась реализация кук в Яваскрипте. Объем ограничен (4х20 Кб на домен), хранить возможно только в строковом типе, синтаксис для установки и получения кук избыточно сложен.

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

Поэтому я написал маленький скрипт, который позволит вам использовать переменные сессии в Яваскрипте без установки кук. Он позволяет хранить до 2 Мб данных, что намного меньше ограничивает в возможностях, чем решение на основе кук.

Не так давно на Хабре был опубликован сей труд: «Еще раз о трекбаре», в котором описывается простой скрипт для создания таких вот ползунков:


Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались «на потом», т.к. требовали более серьезного вмешательства в код. И вот долгожданное «потом» настало и вышла четвертая версия JS-TrackBar.

Прочитал статью «Фрагментарное кэширование в MVC веб-фреймворках». Статья описывает проблему кеширования фрагмета отображения, а именно проблему полного разделения контроллера и отображения — контроллер отрабатывает полностью до вызова отображения. Если в отображении мы кешируем фрагмент, это ничего не меняет — контроллер-то уже отработал! В статье описан способ этого избежать: сделать запрос данных «ленивым».

Начав писать, как это должно быть сделано правильно, решил написать, как устроены шаблоны Django, чтобы не-джанговодам тоже было понятно.

Как это сделано в Django?

Flowplayer — Бесплатный видео-плеер для веба
FlowPlayer — это Flash медиа плеер. Вы можете использовать его нв ваших HTML страницах чтобы воспроизводить видео файлы. «Это ваш персональный YouTube».