Однажды столкнулся с дизайном, который был сделан так, что минимальная ширина составляла около 1350 пикселей. Естественно, на экранах с разрешением 1280px и ниже он не влезал по ширине, что не устраивало заказчика, при этом на вариант с переменной шириной, где меню и некоторые другие элементы выводились бы в две строки, заказчик также не соглашался. Пришлось воспользоваться масштабированием с помощью свойства CSS 3 transform: scale, сделав небольшой Javascript, который рассчитывал необходимый масштаб:
Читать далее…
- Перово, Москва, Россия
- me@4xpro.ru
- x4_pro
- XXXXPro
Новости сайта в Telegram
t.me/4x_proКомпьютерное
Как увеличить время работы телефона с Android

Некоторое время назад решил заняться настройками своего телефона на Android (Sony Ericsson Neo V) для того, чтобы увеличить время работы без подзарядки. Удалось достичь весьма неплохих результатов: вместо двух суток работы в режиме ожидания телефон стал выдерживать пять-шесть дней (при условии переключения на ночь в полетный режим), и решил описать, как я этого добился. Читать далее…
Настройка suexec под Debian

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

Решил поучаствовать в конкурсе на форуме WebMasters и написал статью по теме "SEO для форумов", собрав в одно место все свои идеи по улучшению форумов с точки зрения SEO. К сожалению, по правилам конкурса копирование статьи запрещается, поэтому приходится ограничиться ссылкой.
UPD: по итогам конкурса занял 14-ое место (всего призовыми являются первые пятнадцать) и выиграл 50 WMZ.
Инструменты для оптимизации скорости загрузки сайта

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

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

Недавно потребовалось сверстать страницу, на которой у элемента 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 нужного размера, а в остальных броузерах — масштабировать с размытием.
Обновлено в мае 2018: теперь свойства height и width работают во всех броузерах, включая Firefox. Можно ограничиться ими:
.bigbox { height: 28px; width: 28px }
Majento Position Meter -- программа для отслеживания поисковых позиций

Читать далее…
Как раскрутить форум

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

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