Предыстория

Как известно, перед тем, как выложить сайт в нет, мы его разрабатываем. И делаем мы это, как ни странно, на машине разработчика. И давно замечено, что javascript, а в некоторых случаях и css удобнее при разработке держать в нескольких файлах.Проблема в том, что, согласно принципам, описанным в статье Best Practices for Speeding Up Your Web Site (перевод доступен на сайте webo.in), для ускорения загрузки сайта нам нужно произвести следующие манипуляции над javascript и css файлами:

1. Слить весь javascript в один файл, причем, желательно так, чтобы сохранился нужный порядок — т.е., скажем, библиотека jQuery — была ближе к началу, а функции и объекты, которые ее используют — после нее.
2. Слить весь css в один файл
3. Сжать эти большие файлы с помощью какой-нибудь утилиты вроде yui-compressor (за исключением css-файлов, название которых начинается, скажем, с префикса ie_, которые содержат data:URL, и поэтому критично относятся к переходам со строки на строку, так что их для собственного спокойствия лучше не сжимать)
4. Расположить их в таком порядке — css-файл как можно ближе к открывающему тэгу head, а js-файл — как можно ближе к закрывающему тэгу body.
5. Выставить HTTP-заголовок expires на подольше, чтобы браузер пользователя их закешировал. Ну а для того, чтобы при следующем билде у пользователя обновился js и css надо этим файлам дать какое-нибудь уникальное имя.
6. Перед отдачей файлов клиенту сжимать их с помощью gzip

К чему это я?

Пункты 5 и 6 уже подробно расписаны в других местах.
Я же хочу рассмотреть в этой статье вопрос автоматизации пунктов 1,2,3,4. А точнее, я хочу предложить инструмент, с помощью которого одним (ну, максимум — двумя-тремя :) нажатием кнопки можно выполнить пункты 1, 2, 3, 4 настоящего списка и получить готовые к заливке на сервер javascript и css файлы.

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

Сложность здесь в том, что разное окружение (доступ к БД, расположение файлов и проч.), будучи «жестко» прописанным в файле конфигурации, заставляет нас постоянно этот файл править. Кроме того, файлы настроек часто заливаются в репозиторий, и после очередного обновления кода у вас всё перестаёт работать.

Для решения проблемы я использовал два метода.

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

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

Много было про то написано, да не суть…

Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.

Заметка Выносим CSS в пост-загрузку была посвящена исследованию наиболее быстрого способа добавить стилевые правила в исходный документ динамически, не затрагивая при этом стадию предзагрузки (когда у нас еще белый экран в браузере). В ней, однако, не был рассмотрен следующий вопрос: какой метод использовать для добавления массива CSS-правил в сам HTML.

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

Тестовое окружение

Поскольку скорость загрузки отдельного CSS-файла достаточна велика, а требуется рассмотреть, как его содержимое может повлиять на скорость его динамического применения к документу, то нам нужны сотни или даже тысячи правил. В качестве отправной точки была опять взята главная страница Яндекса, стили которой были вынесены в отдельный файл и скопированы 10 раз. Это дало необходимую задержку (которая существенно больше погрешности, вносимой браузерами) и не сильно увеличило сжатый с помощью gzip файл.

Все варианты представлены на тестовой странице, вкратце опишу основные подходы.

Читать дальше yа webo.in →.

Поводом для написания данной статьи послужили некоторые дебаты в одной из групп linkedin, связанной с MySQL, а также общение с коллегами и хабролюдьми :-)

В данной статье хотел написать что такое вообще JOINы в MySQL и как можно оптимизировать запросы с ними.

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



Скачать архив с пээсдэшником (49 kb)

UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари

Ссылка от niker
designerstoolbox.com/designresources/elements/

Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/

Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners

Ссылка от 3fonov
Yahoo Design Stencil Kit

Проблема

На многих сайтах я наблюдаю следующий процесс:

1. Пользователь заходит на сайт
2. Пользователь находит что-то, что он хочет купить/скачать/сохранить
3. Пользователь переходит на страницу регистрации
4. Пользователь вводит свою информацию и ждёт письма с ссылкой активации
5. Пользователь получает письмо и переходит по ссылке
6. Пользователь попадает либо на страницу активации, либо на страницу логина, либо на страницу, откуда он начал регистрацию
7. Пользователь снова находит то что он хотел купить/скачать/сохранить
8. Пользователь покупает/скачивает/сохраняет

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

Решение

Дружественная компания Тематические Медиа поручила нам нарисовать макеты для сайта сообщества любителей футбола Дрибблер. На сайте пользователь может публиковать мультимедийный контент, участвовать в комментировании матчей, обсуждать и рейтинговать профили игроков любимой команды, делать прогнозы на матчи и многое другое.

Не­дав­но ком­па­ния Qlikworld вы­ло­жи­ла не­боль­шой сер­вис рас­ста­нов­ки «мяг­ких» пе­ре­но­сов. Он на­хо­дит­ся по ад­ре­су — www.plazoo.com/ru/tools.asp

В прин­ци­пе, в нем нет ни­че­го не­обыч­но­го, но, учи­ты­вая до­воль­но огра­ни­чен­ное пред­ло­же­ние по­доб­ных услуг в се­ти, я ре­шил его об­на­ро­до­вать. Воз­мож­но, ко­му-то он ока­жет­ся по­ле­зен.

Сер­вис рас­став­ля­ет пе­ре­но­сы с уче­том воз­мож­но­го из­ме­не­ния раз­ме­ра ок­на вы­во­да.

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

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

Эта статья уже со­дер­жит рас­став­лен­ные пе­ре­но­сы. Из­ме­няя раз­мер ок­на бра­у­зе­ра, мож­но уви­деть, как ра­бо­та­ет сер­вис.

Сегодня решил сделать то, что собирался уже давно — поставить таки кеширование скриптов у себя на сайте. Все скрипты перед отдачей пользователю собираются в один файл и сжимаются GZIP'ом — все вроде по-уму, но есть проблемка… Браузер отчаянно не хотел кешировать этот выходной скрипт.

Опытным путем было установлено, что PHP устанавливает хидеры запрета кеширования при использовании функции session_start();

Примечание: ниже расположен перевод заметки Image Optimization, Part 3: Four Steps to File Size Reduction от Stoyan Stefanov. В ней рассматриваются наиболее популярные консольные утилиты для минимизации изображений. Мои комментарии далее курсивом.
Об авторе: Stoyan Stefanov работает веб-разработчиком в команде Yahoo! по исключительной производительности и руководит разработкой инструмента для анализа производительности — YSlow. Он также внес значительный вклад в программы, разрабатываемые с открытым исходным кодом, выступает на конференциях и является техническим писателем: его последняя книга озаглавлена Объектно-ориентированный JavaScript.

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

• Оптимизация изображений, часть 1: важность картинок
• Оптимизация изображений, часть 2: выбираем нужный формат файлов

Текущая заметка посвящена некоторым наиболее часто используемым инструментам, которые можно применить для уменьшения размера изображений. Идея заключается в следующем: мы можем получать все изображения от дизайнера, но не оставлять их в исходном виде, а немного уменьшать в размере, используя указанные ниже инструменты. Это позволит автоматизировать процесс без необходимости глубокого анализа структуры изображения.
Читать дальше на webo.in →

Критерии проектирования — соответствие стандартам, производительность, надежность и безопасность — ограничивают как новые, так и существующие возможности браузера. В результате CSS-выражения (CSS expressions) больше не поддерживаются в стандартном режиме IE8. Это изменение уже анонсировалось в блоге IE, но разработчики решили поделиться дополнительными подробностями о своем решении. Они ответили на вопросы о том, что это было, почему от этого отказались и чем это нам грозит.

Добрый день. Вот мой стартап: teachmate.org
Этот сервис я сделал, чтобы помочь людям, когда у них возникают примерно такие проблемы:

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

Суть

Преподавание не всегда обязано содержать в себе экономические отношения. Почему бы не попробовать учить друг друга чему-нибудь в обмен? Это могут быть совсем разные вещи (например я могу научить человека программировать, а он меня — играть на фортепиано), а могут быть очень близкие (например я могу научить человека программировать на Ruby, а он меня — на c++). Второй случай — это очень реальное применение этой идеи и я надеюсь, что люди ей воспользуются, чтобы обмениваться бесценным опытом друг с другом.

Детали о проекте

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

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

P.S. Большая просьба тем, кто хорошо знаком с пунктуацией в английском языке, указать на ошибки.

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов...

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

Самый простой метод — это некая унификация веб-форм в целом, будь то цветовые решения или стандартизированные иконки. Я решил предложить вам на суд расцветку для текстовых полей веб-форм. Она вполне может подойти и к спискам, но даже Internet Explorer 7 не разрешает расставлять какие-либо стили на свои любимые select'ы. Недолго думая над названием, я решил, что слово «Светофор» лучше всего отражает смысл этой унификации.

Привет.
Думаю, среди читателей хабра найдется немало тех, кто имеет stand-alone blog на движке wordpress.

Так вот, для вас, дорогие мои, у меня есть две новости, как водится, плохая и хорошая.
Плохая состоит в том, что wordpress — довольно-таки тормознутая штука.
Виноваты в этом в основном криворукие производители тем и, особенно, криворукие производители плагинов. Особенно кривой плагин, на мой вкус, wp-ajax-edit-comments, который является образцом быдлокодинга.

Хорошая — в том, что это можно поправить.

Эта небольшая статья навеяна топиком «Золотые горы стартапу, или не живем бесплатно, даже если назвался 'free'», где автор пишет о том, что, несмотря на то, что его сайт посещает много людей, прибыльность этого сайта составляет «МИНУС 5.22$ в день».
Все стартапы я делю на два вида – «виртуальные» – то есть те, которые связаны с «виртуальной» жизнью человека (всевозможные он-лайн игры, сайты закладок, сайты он-лайн встреч, чаты и т.д.) и «реальные» – те, которые нужны человеку в его реальной жизни.
Конечно, на самом деле нужны оба вида стартапов, иначе бы их и не было. Но, на мой взгляд, те стартапы, которые непосредственно связаны с реальной жизнью людей, дают возможность заработать их создателям гораздо большие деньги. Хотя при этом далеко не все стартапы, созданные для реальной жизни, могут принести доход. Для этого стартапы должны создаваться еще и в «денежной» сфере.

После того, как я опубликовал давече тему о создании макета страницы, нам с тов. CurlyBrace пришла в голову одна интересная мысль: а не сделать ли того, что мы умеем делать лучше всего?

Да, вы правы! Денис любезно сверстал данный макет валидным и семантичным XHTML. Он — молодец, а я ему немного в этом подсобил, доделав небольшую деталь. Он большое внимание уделил размеру страницы и её исходного кода.

Внимание: топик не содержит WYSIWYG!

В результате одной дискуссии на тему безопасных форумов/CMS на PHP мне пришла в голову идея: давайте вместе составим список безопасных веб-приложений! Задача списка — помогать при выборе приложения для установки и предоставить обзор текущей ситуации с безопасностью веб-приложений.

Изначально речь шла о форумах и CMS, но, думаю, ограничиваться этими двумя приложениями не обязательно. Для добавления приложения в список оно должно соответствовать нескольким критериям:

1. Вы его либо используете (использовали), либо знаете лично того, кто использует.
2. Это не должно быть узкоспециализированное приложение.
3. Бесплатное.
4. Open source.
5. Ну и самое главное: безопасное!

Я предлагаю определять безопасное приложение по следующим критериям:

• Первый публичный релиз был не менее двух лет назад.
• Для последней стабильной версии нет известных уязвимостей.
• В базе Common Vulnerabilities and Exposures (CVE) нет записей по этому приложению минимум за последний год (уязвимости в плагинах можно не учитывать, при условии что приложение вполне юзабельно без этих плагинов и в типовую инсталляцию они не входят).
• В случае отсутствия приложений, полностью подходящих под эти критерии, можно включать в список наиболее безопасное из существующих (отдельно для каждого ЯП).

Форум	Проверить	ЯП
YaBB	cve sf seclab milw0rm exploit ps secunia	Perl
phpBB 3	cve sf seclab milw0rm exploit ps secunia	PHP
Snitz Forum 2000	cve sf seclab milw0rm exploit ps secunia	ASP
CMS	Проверить	ЯП
papaya CMS	cve sf seclab milw0rm exploit ps secunia	PHP
eZ Publish	cve sf seclab milw0rm exploit ps secunia	PHP
Блог	Проверить	ЯП
Serendipity	cve sf seclab milw0rm exploit ps secunia	PHP
e-commerce	Проверить	ЯП
osCommerce	cve sf seclab milw0rm exploit ps secunia	PHP

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