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

Казалось бы, что может быть проще, чем вывести ссылку в HTML? Однако если создавать сайт, наполнением которого будут заниматься сами пользователи, обнаруживается множество тонкостей в плане юзабилити, которые нужно учитывать. Во-первых, ссылки, вставленные пользователями, могут быть слишком длинными из-за большого «хвоста» параметров (типичный пример — ссылка на страницы Интернет-магазинов с настроенными фильтрами) и переноситься на несколько строк, и в таких случаях их нужно визуально сокращать. Во-вторых, если в ссылке есть кириллица, она при копировании через буфер обмена преобразуется либо в punycode, либо в url encoding и становится нечитаемой. Пример подобного — ссылки на Wikipedia, глядя на которые, нельзя сказать до перехода, на какую статью они ведут. В-третьих, если ссылка ведёт на корневую страницу сайта, желательно показывать только доменное имя, без http или https в начале и / в конце.
Читать далее…

Несколько лет назад я писал заметку о том, как определить мобильный броузер с помощью регулярного выражения для User Agent. Однако в современных броузерах на основе Chrome появился дополнительный и более простой механизм: при обращении к сайту эти броузеры передают специальные заголовки Sec-CH-UA-Mobile и Sec-CH-UA-Platform. В первом приходит значение ?0 для desktop-версии и ?1 для мобильной, во втором — платформа в виде одной из строк: "Android", "Chrome OS", "Chromium OS", "iOS", "Linux", "macOS", "Windows" или "Unknown". В PHP эти заголовки можно получить как $_SERVER['HTTP_SEC_CH_UA_MOBILE'] и $_SERVER['HTTP_SEC_CH_UA_PLATFORM'] соответственно. (Буквы должны быть именно заглавными.) Данный механизм поддерживается с 89 версии Chrome, но всё ещё имеет статус экспериментального. В Firefox и Safari поддержка на данный момент, по данным CanIUse, отсутствует.
Читать далее…

Есть в Яндекс.Вебмастере такая функция как индексация на основе обхода по счётчикам Метрики. На первый взгляд, достаточно безобидная, и Вебмастер активно уговаривает её включить. Но, на самом деле для качественно сделанного сайта она скорее вредна, чем полезна. Во-первых, из-за неё может проиндексироваться то, что для индексации вовсе не предназначено, если забыть закрыть это в robots.txt. Например, на этом сайте таким объектом могли бы стать прикреплённые в закрытых разделах форума файлы, так как доступ к ним осуществляется по URL с секретной частью.
Читать далее…

Как известно, любой текст, который вводится пользователем и затем отображается на сайте, нужно обезопасить от XSS-атак — вставок JavaScript, которые могут украсть идентификатор сессии или совершить какие-либо нежелательные действия от имени пользователя. Если текст не предполагает сложного форматирования, то сделать это достаточно легко: пропустить его через функцию htmlspecialchars, которая экранирует все небезопасные символы и превратит HTML в обычный текст. Но как быть, если пользователю нужно разрешить использовать форматирование текста, например, вставку картинок, ссылок, текста с курсивом и жирным начертанием, видео? Первое, что приходит в голову — это воспользоваться функцией strip_tags со списком разрешённых тегов. Увы, эта функция имеет существенный недостаток: если тег разрешён, то она позволяет использовать в нём любые атрибуты, в том числе и атрибуты обаботчиков событий (onclick, onmouseover и так далее), на которые легко можно повесить вредоносный код.
Читать далее…

Часто при поисковой оптимизации сайта возникает задача избавиться от URL, кончающихся на ?, например, http://4xpro/profblog/?. С точки зрения поисковых систем такие адреса воспринимаются как дубли. На первый взгляд, это кажется простой задачей: нужно прописать в .htaccess правило для mod_rewrite. Но при попытке это сделать вас ждёт неприятный сюрприз: этот знак вопроса не входит ни в ту часть URL, которая проверяется по RewriteRule, ни в переменную %{QUERY_STRING}, которую можно проверить с помощью RewriteCond. К счастью, решение всё же есть: использовать %{THE_REQUEST}, куда Apache помещает полную строку HTTP-запроса. Тогда получаем вот такое условие: Здесь первая строка проверяет на то, что знак вопроса вообще присутствует в запросе, вторая — на то, что QUERY_STRING пуста (то есть после знака вопроса ничего нет), и третья выполняет редирект на URL без этого знака (за это отвечает флаг QSD).
Читать далее…

Я уже писал о том, как отслеживать медленные запросы с помощью MySQL. Но не всегда причина бывает в базе данных. Поэтому имеет смысл применять и другой способ — использовать логи Web-серверов. В современных версиях Apache и NGinx есть возможность выводить в лог время выполнения запроса с точностью до миллисекунд. В NGinx это делается так: сначала объявляем формат лога с помощью директивы log_format и придумываем ему имя, например, logtimed. Возьмём за основу формат по умолчанию, и добавим к нему время выполнения и длину запроса. А потом объявим использование этого формата в директиве access_log: Директива может использоваться на любом уровне (http, server, location), но в документации сказано, что следует использовать тот же, на котором прописана директива root.
Читать далее…

Я уже не раз писал о разных способах улучшить время загрузки сайта, но за последнее время нашёл ещё несколько приёмов:Выносите подключение шрифтов (директива @font-face) из внешних CSS в тег style в HTML до их подключения. Это незначительно увеличит объём кода страницы, зато позволит уменьшить длину критических цепочек. Если изначально броузер сначала скачивал CSS, разбирал его и уже потом начинал загружать шрифты, то теперь загрузка шрифта и файла CSS будет идти одновременно. Кроме того, нужно учитывать, что популярные шрифты уже могут быть установлены у пользователя локально. В частности, это касается шрифтов Roboto, которые изначально предустановлены в Android. Поэтому в src прописываем сначала директиву local, а уже потом url:
Читать далее…

У начинающих верстальщиков часто возникает вопрос, как отцентрировать текст в блоке по горизонтали и вертикали. С горизонталью всё достаточно просто: используем свойство text-align. А вот для вертикали раньше приходилось прибегать ко всяческим ухищрениям. Но с появлением flex-верстки всё стало намного проще. Зададим в CSS класс, для которого пропишем выравнивание по центру по главной и вспомогательной оси:
.centered { display: flex; justify-content: center;  align-items: center; text-align: center }
И просто применим его к нужному блоку:
<div class="centered">Немного текста <br /> и дополнительного <br />содержимого</div>

Посмотреть пример

Во многих Интернет-магазинах можно встретить эффект, когда при нажатии кнопки «Добавить» фотография товара летит в направлении изображения корзины. Обычно его реализуют на jQuery с помощью метода transfer, но можно обойтись и чистым JavaScript. Это делается за несколько шагов:

1. Определяем координаты фотографии товара и корзины на экране
2. Создадим новый DOM-элемент с копией фотографии товара и задаём ему начальные координаты
3. Рассчитаем расстояние, на которое нужно переместить фотографию
4. Добавляем соответствующие transform и transition, после чего добавляем копию в документ.

"Реализация описанного на чистом JavaScript"

Плавная прокрутка к нужному элементуРаньше самым популярным способом сделать плавную прокрутку до нужного элемента было использование функции animate из JQuery. Но в современных броузерах есть более простой способ, не требующий сторонних библиотек: через функцию scrollIntoView, которая есть у каждого DOM-элемента. Чтобы прокрутка была плавной, ей нужно передать объект с параметром behavior: 'smooth'. Также есть параметр block, который задаёт, где окажется элемент после прокрутки: сверху ('start') области просмотра, посередине ('center') или внизу ('end'). Также можно указать 'nearest' для минимальной прокрутки до попадания в зону видимости. Тогда ссылка для прокрутки к нужному элементу будет выглядеть так:
Читать далее…