Обо мне

4X_Pro
4X_Pro
Живу в Сети с 25 ноября 2000 г.
Веду блог с 8 января 2011 г.

Контакты

Немного рекламы

Xpro.Su: заметки о жизни в Интернете

Настройка suexec под Debian

Администрирование Оставить отзыв »

Недавно потребовалось на своем VDS с Debian 7 создать отдельного пользователя и предусмотреть для него возможность запуска скриптов от его имени. Как выяснилось, это не особо сложно:

Читать далее »

SEO для форума: участие в конкурсе

Сообщества Оставить отзыв »

Решил поучаствовать в конкурсе на форуме WebMasters и написал статью по теме "SEO для форумов", собрав в одно место все свои идеи по улучшению форумов с точки зрения SEO. К сожалению, по правилам конкурса копирование статьи запрещается, поэтому приходится ограничиться ссылкой.

UPD: по итогам конкурса занял 14-ое место (всего призовыми являются первые пятнадцать) и выиграл 50 WMZ.

Инструменты для оптимизации скорости загрузки сайта

Инструменты веб-мастера, Ускорение сайтов 5 отзывов »
Недавно узнал о нескольких полезных сервисах, которые могут помочь при оптимизации скорости загрузки сайта. Вот они:
  • CSS Sprites Generator — отличный генератор CSS-спрайтов (то есть файлов изображений, которые объединяют в себе несколько фоновых картинок для уменьшения количества обращений к Web-серверу). Поддерживает форматы GIF, JPEG, PNG, позволяет задавать отступы между спрайтами. Имеется собственная API. Единственный недостаток — нет возможности задать горизонтальное расположение картинок в спрайте вместо вертикального.
  • TinyPNG — онлайн-сервис преобразование полноцветных PNG в 8-битные с минимальной потерей качества изображений. Во многих случаях позволяет уменьшить размер файлов на 60-70%. Также доступна собственная API.
  • WebPageTest — измерение скорости загрузки Web-страницы с построением графиков загрузки файлов, измерением времени первой отрисовки, события DomContentReady, полной загрузки. Есть возможность измерения для различных броузеров и различных местоположений.

В частности, эти инструменты пригодились при оптимизации сайта Островные павильоны.

Бороться с прокрастинацией поможет... Яндекс

Личная эффективность Оставить отзыв »

Есть у меня привычка начинать свой день с просмотра главной страницы Яндекса: куда выведены показатели посещаемости основных моих сайтов по данным Метрики, да и прогноз погоды и курсы валют можно узнать там же. Долгое время я эту привычку считал вредной, потому что она часто приводила к прокрастинации: вместо того, чтобы посмотреть посещаемость, закрыть страницу и приступить к работе, я начинал читать новости и комментарии к ним, причем зачастую выбирал самые негативные. Мотивации на работу это не способствовало совершенно, скорее наоборот, приводило к самооправданию "зачем что-то делать, если вокруг все равно все плохо". И часто я терял на такую прокрастинацию несколько часов.

Но однажды я зачем-то заглянул в настройки главной страницы Яндекса, и обнаружил, что новости, как и любой другой виджет, можно легко убрать и заменить на что-то другое. (Чтобы это сделать, нужно войти под своим логином и щелкнуть по ссылке "Личные настройки", расположенной в верхнем правом углу главной страницы). Для себя я на то место поставил виджеты Новости.Наука и Новости.Hi-Tech. Кроме этого, решил наконец-то начать пользоваться RSS для чтения блогов (давно хотел это сделаь, но все как-то не получалось) с помощью того же Яндекса, и вывел на главную страницу виджет Яндекс-Подписок, подписавшись на ряд блогов по SEO, Web-программированию и копирайтингу.

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

Так что вот так иногда с помощью простого изменения настроек, делаемого десятком щелчков мышью, можно существенно изменить свою жизнь к лучшему и уменьшить потери времени на прокрастинацию.

Полезные советы при работе над сайтами

Web-программирование, Личная эффективность Оставить отзыв »
Давно накапливаются мелкие советы по увеличению производительности при работе над сайтами при верстке или HTML-программировании, и вот наконец-то решил собрать их в одно сообщение.
  1. Если вы часто редактируете по FTP какой-либо сайт, не поленитесь прописать в настройках FTP-клиента тот каталог, в котором находятся непосредственно файлы сайта в качестве remote directory (чаще всего таковым бывает public_html или www). В этом случае при подключении к серверу вы сразу будете оказываться в нем, а не в корне, как это бывает по умолчанию, и сэкономите пару секунд.
  2. Если вы используете Filezilla, то в нем есть очень удобная опция Use syncronized browsing (задается в настройках соединения на вкладке Advanced), которая приводит к одновременной смене локального каталога и каталога на сервере. Если правильно настроить local и remote directory, использование этой опции упростит перемещение по каталогам и синхронизацию файлов.
  3. Также для удобства выгрузки исправленных файлов на сайт полезно поставить сортировку по времени последнего изменения, в этом случае те файлы, которые были изменены и должны быть выгружены на сайт, окажутся в начале списка.
  4. При верстке под Linux очень удобно использовать два рабочих стола: на одном помещается броузер, а на другом -- HTML-редактор, и переключаться между ними по быстрым клавишам (в LXDE это Alt+Shift+Left и Alt+Shift+Right соответственно). В отличие от Alt+Tab, где лишнее нажатие или переключение в другую программу меняет порядок окон, рабочие столы всегда остаются в одном и том же порядке. В Windows тоже возможно сделать несколько виртуальных рабочих столов, но это потребует дополнительного программного обеспечения.
  5. В Google Chrome есть функция "Просмотр кода элемента" (для этого нужно щелкнуть по любому элементу правой кнопкой и выбрать одноименный пункт в меню). Откроется просмотр структуры HTML, в котором можно менять свойства CSS "на ходу", без перезагрузки страницы. Это очень удобно при подборе margin, padding, top, left и тому подобных свойств: не нужно каждый раз переключаться в HTML-редактор, сохранять файл и обновлять страницу, чтобы посмотреть, что получилось, а можно сначала попробовать разные значения, выбрать их, а потом уже исправить CSS-файл.
  6. Почти все современные двухпанельные файл-менеджеры наподобие Total Commander поддерживают работу с несколькими вкладками. И этим можно пользоваться при внесении правок в сайт со сложной структурой: на одной вкладке открывается каталог с кодом, на другой -- с CSS или JavaScript, на третьей -- с шаблонами. Это оказывается гораздо удобнее, чем постоянно ходить из каталога в каталог. (Ну или как вариант -- поставить программистский редактор с поддержкой проектов, например, jEdit с соответствующим plugin).
  7. Не лишним будет либо освоить жесты мышью, особенно часто требуются "Назад" и "Обновить", так как при верстке они требуются чаще всего. Обычно "Назад" -- это движение влево, а "Обновить" -- вверх-вниз, оба жеста выполняются при зажатой правой кнопке мыши. В Opera эти жесты встроенные, для других броузеров придется ставить специальные расширения, например, Smooth Gestures. Другой вариант -- купить пятикнопочную мышь и переназначить дополнительные кнопки с помощью специальной программы.
  8. Также хорошей идеей будет расположить Панель задач не снизу, а слева, особенно на мониторах с соотношением сторон 16:9 и 16:10. Во-первых, это даст больше места по вертикали (в том числе и для просмотра Web-страниц), во-вторых, сократится путь курсора мыши для переключения между окнами, а в сами кнопки окон будет легче попасть.
Вот и все на сегодня, надеюсь эти советы помогут при работе!

Checkbox большого размера

Web-программирование 1 отзыв »

Недавно потребовалось сверстать страницу, на которой у элемента checkbox был бы увеличен размер. Варианты с рисованным checkbox, который переключался бы с помощью JavaScript для меня изначально были неприемлемы Сначала пытался воздействовать на него с помощью font-size, line-height, padding и border, но ничего из перечисленного не помогло. Потом обнаружил, что свойства height и width, выставленные одновременно, позволяют добиться желаемого. Но увы, оказалось, что только в Google Chrome. В результате пришлось воспользоваться воспользоваться свойством transform из CSS 3: <input type="checkbox" style="transform: scale(2)" />, но при этом сам checkbox становится размытым.

Поэтому тем, кому валидность CSS не критична, посоветовал бы делать несколько иначе:

.bigbox { -ms-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); height: 28px; width: 28px }

Такой подход позволит отрисовывать checkbox в Google Chrome нужного размера, а в остальных броузерах -- масштабировать с размытием.

Majento Position Meter -- программа для отслеживания поисковых позиций

Полезный софт Оставить отзыв »
Полгода назад я писал обзор сервисов для отслеживания поисковых позиций. Однако за прошедшее время Яндекс ужесточил условия проверки, поэтому в большинстве из этих сервисов бесплатные тарифы либо отменили вообще, либо ограничили настолько, что мне стало не хватать их возможностей. Стало ясно, что вместо онлайн-сервисов нужно искать desktop-приложение. И в итоге я нашел такое, которое устраивает меня полностью. Называется эта программа Majento Position Meter.

Читать далее »

Как раскрутить форум

Сообщества 1 отзыв »

Все форумы можно разделить на две категории: куда приходят за решением проблем (например, SEO-форум или форум поддержки программного продутка) и куда приходят за общением. Но деление это достаточно условное, и на самом деле на любом форуме есть обе составляющие, но какая-то одна преобладает. Но в зависимости от того, какая важнее для владельца форума, часть способов раскрутки может и не подходить.

В частности, на мой взгляд, идеальная раскрутка форума выглядит следующим образом:

Читать далее »

Неочевидные особенности сравнения в PHP

Web-программирование Оставить отзыв »

Однажды делал постраничный вывод сообщений в форуме. Делался он следующим образом: через параметр запроса start передавалось смещение от начала темы, или all, если нужно было показать всю тему, или параметр p, если требовалось показать конкретное сообщение. При этом при передаче p переменная start бралась не из запроса, а рассчитывалась на основе смещения этого сообщения от начала темы минус несколько сообщений. При этом если оно было в начале, то start мог получиться отрицательным, и для этого случая делалась дополнительная проверка с присвоением sstart=0. Далее у меня в коде была проверка if ($start!='all'), по которой к SQL-запросу добавлялась LIMIT-часть. Но обнаружилось, что в некоторых ситуациях LIMIT-часть не добавляется, и вся тема выводится целиком (что серьезно нагружало сервер, если тема была длинная).

Стал разбираться, в чем дело, и обнаружилось, что ошибка проявляется тогда, когда в start присваивается 0 в результате расчетов. Происходило следующее: в результате проверки в левой части сравнения оказывалась переменная типа integer, и правая часть приводилась также к integer, в результате чего из 'all' получался ноль, и условие оказывалось ложным (то есть по сути проверялось 0!=0). Избавиться от этого оказалось очень просто: заменить тип сравнения на сравнение без приведения типов, т.е. $startl!=='all', после чего все заработало.

А вывод простой: нужно всегда использовать сравнение без приведения типа (т.е. === или !===), если нет явных причин поступать иначе. Оно и выполняется быстрее, и позволяет избежать подобных ошибок (которые, кстати, могут сказаться и на безопасности.)

Особенности обработчика отправки формы при использовании addEventListener

Web-программирование, Сайтостроительство Оставить отзыв »

Чтобы провести проверку формы перед ее отправкой, нужно повесить обработчик на событие onsubmit для тега форм и вернуть false в случае ошибки. Если делать это прямо в HTML-коде (т.е. <form action="" onsubmit="">) или с помощью свойства onsubmit через JavaScript, то все работает без проблем. Но если попытаться сделать то же самое через addEventListener, то без дополнительных мер форма отправляется в любом случае.

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

Читать далее »