Компьютерное

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

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

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

Давно накапливаются мелкие советы по увеличению производительности при работе над сайтами при верстке или 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 был бы увеличен размер. Варианты с рисованным 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 }

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

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

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

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

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

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

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

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

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

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

Когда я всерьез стал заниматься своими сайтами, возникла необходимость отслеживать их позиции в поисковиках. Когда-то давно я делал это вручную, но сайтов и запросов становилось все больше, и потребовалось как-то автоматизировать проверку. Я стал использовать программу Site Auditor. Сначала эта программа меня устраивала, но потом потребовалось сравнить позиции сайта сейчас с позициями трехмесячной давности, чтобы понять, как идет продвижение сайта, но оказалось, что такой возможности нет. Да и отсутствие графиков не очень нравилось...

Кроме того, иногда хотелось иметь возможность проверять позиции сайта и с планшетника или даже мобильника, поэтому я решил искать не desktop-приложение, а онлайн-сервис. Замечу, что отслеживать мне нужно было пять сайтов с общим количеством запросов примерно около 70. Читать далее…

Как известно, ВКонтакте есть несколько полезных виджетов, которые можно разместить на своем сайте, например, виджет группы или комментариев. Но есть у них недостаток: они вставляются обычным тегом script и подгружаются с сервера ВКонтакте, что ощутимо тормозит загрузку сайта целиком. А если вдруг у пользователя по каким-то причинам заблокирован домен vk.com, то он может и вообще не дождаться загрузки сайта. В результате я решил сделать загрузку асинхронной. Первое, что пришло в голову — это использовать свойства defer или async у тега script, но оказалось, что в этом случае ничего не работает вообще из-за того, что код инициализации пытается выполниться раньше, чем будет загружен скрипт и создан объект VK. Но это достаточно легко обойти: Читать далее…