Вступление

Забавно, но когда программист разрабатывает какой-либо продукт, он редко задумывается над вопросом могут ли на одну кнопку в один момент времени нажать одновременно 2000 человек. А зря. Оказывается могут. Как ни странно но большинство движков, написанных такими программистами, очень плохо ведут себя под большими нагрузками. Кто бы подумал, а всего один лишний INSERT, не проставленный index, или кривая рекурсивная функция могут поднять load averages чуть ли не на порядок.

В этой статье я опишу как мы, разработчики проекта, сумели выжать из одного сервера с Pentium 4 HT / 512Mb RAM, максимум, держа одновременно 700+ пользователей на форуме и 120,000 на трекере. Да, проект этот — торрент трекер. Предлагаю сразу оставить в стороне разговоры о копирайтах и правах, мне это не интересно, что действительно интересно — это HighLoad.

По поводу перспектив Веб 2.0 существует множество мнений и часто диаметрально противоположных, однако едва ли кто-либо станет спорить с тем, что эта концепция заметно сказалась на современном Интернете. В этой связи нам разработчикам имеет смысл следовать новым тенденциям, новым веяниям рынка. Веб 2.0 диктует нам свои новые требования. В целом о требованиях к веб-разработке в эпоху Web Next Generation я расскажу через две недели на PHPConf (www.phpconf.ru), но о новых требованиях к разработке систем управления контентом мы поговорим сейчас.

Завершился IX Всероссийский открытый интернет конкурс Золотой сайт 2008.



Конкурс проводится аж с 1997 года (если мне не изменяет память). С каждым годом в конкурсе участвует все больше проектов, появляются заметные нововведения, без которых не обошлось и на этот раз. В этом году помимо главного приза — Гран При конкурса, Гран при вручалось также и по всем федеральным округам нашей необъятной Родины. В целом конкурс имеет регионально-социальную направленность, при этом в качестве основных критериев оценки сайта выступает не уровень графического исполнения его страниц, а дизайн сайта в целом, успешность решения задач, стоящих перед конкретным сайтом, и другие качественные характеристики сайта, что, в общем-то, по моему мнению, хорошо.

Безусловно, проблем у конкурса тоже достаточно. На лицо сложная и затянутая система голосования. К сожалению, сам сайт конкурса вряд ли получил бы какую-либо премию…

Но! Результаты все равно примечательны, часть из которых и публикую.

Гран-При Конкурса в 2008 г.
"Элементы" — популярный сайт о фундаментальной науке
Разработчик: Defa Studio, Ultratool, Stars Interactive

Гран-При "Дизайн 2008"
Студия дизайна ONY
Разработчик: Студия дизайна ONY

Гран-При "За общее качество работ" 
"ADV/web-engineering"
(Viera in the City ; Независимость Форд ; Независимость LandRover 
Фотоаппараты Lumix ; Интач ; Страховой интернет-магазин РОСНО)
Разработчик: "ADV/web-engineering"

Результаты прочих номинаций.

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение

jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.

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

Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.

Содержание

1. Загружайте фреймворк с Google Code
2. Используйте «шпаргалку» (cheat sheet)
3. Соединяйте все ваши скрипты и уменьшайте размер файла
4. Используйте возможности Firebug для ведения логов
5. Минимизируйте операции выборки в пользу кэширования
6. Сводите манипуляции с DOM-деревом к минимуму
7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
8. Используйте «id» вместо классов, где это возможно
9. Задайте контекст своим селекторам
10. Используйте последовательности вызовов методов с умом
11. Научитесь правильно использовать анимацию
12. Научитесь назначать и делегировать события
13. Используйте классы для сохранения состояния
14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
15. Пишите собственные селекторы
16. Подготавливайте HTML и модифицируйте его, когда страница загружена
17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
18. Используйте служебные функции jQuery
19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
20. Как узнать что картинки загружены?
21. Всегда используйте последнюю версию
22. Как проверить, что элемент существует?
23. Добавляйте класс «JS» в элемент «html»
24. Возвращайте «false» для отмены поведения по-умолчанию
25. Короткая запись для события готовности документа

Вице-президент Google, Марисса Мейер, на конференции Web 2.0 поведала историю об одном пользовательском тестировании. Группа пользователей Google была опрошена на предмет, сколько результатов поиска они хотели бы видеть на одной странице. Те просили показать побольше, больше чем те 10 штук что поисковик выдаёт обычно. «Много не мало», говорили они.

Специально для них, Гугл увеличил выдачу до 30 результатов. Объём трафика и доходность сократились на 20%.

Почему им не понравилось? Ведь всё было сделано именно так как они сами хотели.

Оказалось, изменилось кое-что ещё. На генерацию страницы с десятью результатами у сервера уходило 0,4 секунды, на страницу с тридцатью — 0,9.

Всего лишь полсекунды разницы уменьшило трафик на 20% и испортило впечатление пользователей о сайте.

Такой вывод может стать сюрпризом — разве люди заметят задержку в полсекунды? — но в Amazon.com мы получали похожие данные. В порядке тестирования, мы понемногу задерживали отдачу страницы сервером и обнаружили что даже небольшие задержки приводят к значительному и дорогостоящему падению прибыли.

Потом Марисса рассказала что после того как, в своей новой версии, страницы Google Maps стали весить меньше, а карты отрисовываться быстрее, объём трафика незамедлительно вырос, как и использование сервиса вообще.

Урок в том, сказала Марисса, что скорость имеет значение. Люди не любят ждать, так что не заставляйте их делать это.

Via Fresh GUI.

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

Первым делом, перед версткой, веб-мастер, понятное дело, должен определиться со структурой макета – то ли это будет стандартный шаблон с боковой колонкой справа, то ли это будет совсем уж уникальный макет не похожий по своей структуре ни на что. В первом случае, обычно, у опытных верстальщиков уже есть свои заготовки, что б ускорить процесс и не придумывать велосипед. Но не у всех же эти заготовочки есть, правда?

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


Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.

Ни разу не слышал, чтобы наши (читай: совковые) вендоры коробочных CMS заказывали usability тестирование своих продуктов. Напрашивается два основных вывода:

1. Usability этих систем и так на высоте! В каждой компании есть свои usability специалисты, которые принимают участие в разработке на всех стадиях развития продукта – организуют тестирования, дают рекомендации, экспертную оценку и т.д. В таком случае это UDD – User-Driven Development.
2. Usability этих систем по-взрослому сосет. Программеры делают функционал. Дизайнеры делают дизайн. Маркетинг делает продажи. Программер думает об эклипсе. Дизайнер думает о фотошопе. Маркетолог думает о пауерпоинте. Ну а конечный пользователь периодически задумывается обо всех трех сразу – об их интеллекте, сексуальной ориентации и месте произрастания их передних конечностей. Это методология AUDD – Anti-User-Driven Development или Angry User Driven Development.

Если вам известны компании, которые работают по первой схеме, то дайте знать. На ребят, делающих все по второй схеме, я насмотрелся вдоволь, поэтому считаю полезной для всеобщего ознакомления публикацию «11 usability principles for CMS products» за авторством James Robertson. Далее позволю себе привести вольный пересказ списка из одиннадцати принципов CMS usability, которые выделяет Джеймс, с моими комментариями.

Сделал простенький сервис для проверки минимальных PHP-требований, необходимых для работы скрипта.

Можно загружать как один PHP-файл, так и архив (zip, tar.gz, tar.bz, tar)
www.webtask.ru/phpversioning

Например, phpMyAdmin-3.1.1-english.tar.gz:

PHP version:
5.2 or higher

PECL extension modules:
fileinfo:0.1

Extension modules:
mysql
mysqli
curl
mbstring
gmp
bz2
mcrypt
zip

Как известно, недавно вышла бета версия jQuery 1.3. Пока она сырая, тестируется, и в ней еще есть неприятные баги. Но знакомится с нововведениями стоит и я хотел бы кратко рассказать об одном из них.

Функция «live» представляет собой аналог функции bind, по синтаксису и сути они идентичны, но между ними есть одно огромное различие, которое лучше всего демонcтрирует следующий пример.

Попробовать демо. Пояснения под катом.

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

Часть V

Очевидно, что в сфере высоких технологий развитие зачастую происходит быстро и бурно. Так произошло и со средствами отображения информации. В течении каких-то двух-трёх лет обычные ЭЛТ-мониторы почти целиком и полностью были вытеснены стремительно дешевеющими ЖК-собратьями. Что позволило существенно улучшить как геометрию отображения, так и цветопередачу, а также снизить утомляемость глаз за счёт отсутствия вредного мерцания. И если несколько лет назад подобное утверждение в пользу TFT-панелей можно было бы оспорить, то теперь этот факт не вызывает ни у кого сомнений: ЖК-дисплеи намного лучше для повседневной работы рядового пользователя. В связи с этим фактором возникла необходимость поиска качественно новых алгоритмов отображения шрифтов. Одно из таких решений пусть не сразу, но всё же получило определённое признание в среде пользователей, и на сегодняшний день является чуть ли не самым популярным на современных платформах. Речь, конечно же, о технологии рендеринга ClearType, которая послужила причиной разработки новых веб-ориентированных шрифтов…

«Совершенный Ajax» — новый подход к построению web-приложений, при котором web-сервер не генерирует ни строчки HTML-кода и взаимодействует с внешним миром только посредством web-служб; а клиентский интерфейс реализуется только на основе клиентских HTML, CSS, JavaScript.

Статья состоит из двух частей. В первой части — более живой и провокационной я постараюсь заинтересовать проблемой, рассказать о технологии «Совершенный Ajax» и показать ее применение на примере нашего проекта «Система Интерактивного Тестирования Знаний “Синтез”» (который имеет ряд интересных особенностей, таких, как использование серверного JavaScript на платформе Mozilla Rhino, прототипно-ориентированная ORM и поддержка SPARQL — языка запросов к Semantic Web).

Вторая часть – более занудная будет содержать много технических деталей и выйдет в следующий раз.

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


Попробуйте угадать: к какой архитектуре относятся web-приложения?

К клиент-серверной говорите? Я ожидал, что Вы так ответите :-)

Что ж, давайте разберемся. В клиент-серверной архитектуре выделяют:

• Сервер — отвечает за хранение данных и реализацию бизнес-логики приложения.
  
  
• Клиент — отвечает за взаимодействие с пользователем ^[1].
  
  

Реализация бизнес-логики на сервере и взаимодействие с пользователем на клиенте четко разделены.

Преимущества клиент-серверной архитектуры очевидны; мы их все знаем:

1. Бизнес-логика не смешивается с пользовательским интерфейсом.
2. Можно реализовать несколько клиентов с разными пользовательскими интерфейсами: интерфейс командной строки, оконный Windows-интерфейс, Flash, web-интерфейс, мобильный интерфейс и т.д.
3. Клиентский компьютер не требователен к ресурсам;
4. И т.д.

Но, относятся ли web-приложения к клиент-серверной архитектуре?

Действительно, в web-приложениях есть сервер, отвечающий за бизнес логику приложения.

Но! За реализацию интерфейса отвечает не клиент, а тоже сервер. На сервере происходит обработка клиентской формы. Сервер генерирует HTML-код пользовательского интерфейса.

Клиент, т.е. браузер лишь визуализирует уже готовый HTML-код интерфейса. Это, фактически, то же самое, что прицепить к серверу монитор и объявить этот монитор клиентом…

Довольно часто (постоянно) мне приходиться проводить собеседование людей желающих устроитсья в мой отдел на должность «junior PHP developer» и «PHP developer». И, с завидным постоянством, я и team-lead отдела задаем одни и те же вопросы…

Много нового и просто хорошего:

• Поддержка части CSS2/3.
• Ускорение в 2 раза: быстрее последних Sizzle и Peppy.
• Размер кода (min.gz): 1066 байтов.
• Google Code SVN: code.google.com/p/yeasss .
• Дизайн для yass.webo.in .

Зачем это?

• Очень много постов попадают в первый попавшийся блог, что, на мой взгляд, неправильно. Наверняка, таким авторам как alizar сразу ясно, куда отправится пост, но многие топики попадают не туда, например, в стартапы пишут о бизнесе (о котором есть несколько очень похожих блогов), когда тема поста — продюсирование или менеджмент. То есть, посты мимо блога — нехорошо.
• Надеюсь, получится полезная штука как ХабраРедактор и Source Code Highlighter.
• И для хабраленты может пригодится — остается только выбрать интересующие разделы и подключиться или подписаться по RSS. К тому же бывают закрытые записи, в который может быть больше нужной информации чем в среднестатистической оной.

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

Как уже писали на Хабре, Гугл предложил пользователям Интернета постить свои идеи о том, как можно улучшить мир. Запостить свою идею можно до 20 октября. А 27 января 2009 г. начнется голосование пользователей за размещенные идеи, затем те проекты, которые наберут самое большое количество голосов пользователей, рассмотрят эксперты Гугла, и пять лучших идей получат $10 млн., которые пойдут на их реализацию. Проект некоммерческий, и человек, предложивший идею, не получает ничего, кроме осознания того факта, что он помог сделать мир немного лучше.

У меня тоже есть идея, которая, на мой взгляд, поможет сделать мир лучше. В принципе, я ее по-любому рано или поздно реализую (в общем-то для ее реализации я и зарабатываю деньги), но решил предложить ее Гуглу — у него наверняка получится ее хорошо сделать. А поскольку она реально поможет улучшить мир, то пусть лучше она будет реализована раньше Гуглом, чем позже мной.

Вот ее краткое изложение:

Надеюсь многие из вас помнят журналы «юный техник», «сделай сам», «техника молодежи», «радио» и другие. К сожалению с развалом советского союза культура технического творчества молодежи практически умерла (впрочем вместе с многими кружками «юный техник». Даже у нашей радиошколы при РОСТО (бывшая ДОСААФ) отобрали помещение и сделали офис. Но к счастью есть интернет!

Я большой любитель собирать списки разных необходимых вещей. В этот раз это список видео-проигрывателей на флэше, жаль, но получилось всего 3 проигрывателя получилось 7 проигрывателей.

Надеюсь уважаемые комментаторы помогут дополнить список и выявить абсолютного лидера среди проигрывателей.
Уже помогли. Отдельные спасибы Elected, atri, rmb. Кармы всем за мой счет ^_^

— Кросс-пост из моего блога
Всем известный IE PNG Fix, который был всем хорош, но который не умел работать с background position и background repeat, наконец — таки исправил этот изъян.

Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше.
Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений.