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

Версия протокола TLS 1.3 позволяет загружать сайты быстрее, чем TLS 1.2, за счёт того, что на этапе установки шифрованного соединения нужен только один обмен данными (round-trip) вместо двух. Поэтому по возможности следует включить её поддержку. Для этого нужно, чтобы на сервере была установлена библиотека openssl версии 1.1.1 или выше. Тогда в nginx это можно сделать с помощью директивы:

См. код в полном сообщении.

Проверить поддержку версии 1.3 можно с помощью TLS checker или с помощью более продвинутого сервиса SSL server test от SSL Labs.

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

Как известно, в PHP есть функция date_default_timezone_set, которая устанавливает часовой пояс, который будет использоваться по умолчанию при работе с датами. На вход она принимает строки вида "Europe/Moscow", "Africa/Algiers". Полный список этих строк есть в мануале, но каждый раз переписывать его оттуда (или хотя бы выбирать те, которые используются среди целевой аудитории сайта) — напрасная трата сил и времени. Кроме того, если нужно хранить в базе часовой пояс каждого пользователя, то лучше сохранять его как число, а не как строку.

Оказалось, что в PHP предусмотрена функция для решения этой проблемы. Называется она DateTimeZone::listIdentifiers. По умолчанию выводит вообще все имеющиеся идентификаторы временных зон. Но можно получить список часовых поясов для отдельного региона или даже нескольких, передав их в качестве первого параметра:
См. код в полном сообщении.

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

Недавно решил написать клиент для протокола IndieAuth. Для этого потребовалось сделать возможность находить на произвольной Web-странице все ссылки с атрибутом rel="me", причём ссылки могут быть как обычные (тег a), так и скрытые (тег link).

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

Пришлось вспомнить про такое расширение как PHP DOM. Оно позволяет работать с XML и HTML с помощью API, аналогичной той, которая есть для работы с DOM в броузерном JavaScript, а также делать запросы с помощью XPath. Вот им-то я и решил воспользоваться.
Итак, для начала создаём объект DOMDocument и загружаем в него HTML. Вместо обычного load, предназначенного для работы с правильно отформатированным XML, используем loadHTMLFile:

"Смотреть пример кода"

Я уже не раз писал о разных способах улучшить время загрузки сайта, но за последнее время нашёл ещё несколько приёмов:

1. Выносите подключение шрифтов (директива @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' для минимальной прокрутки до попадания в зону видимости.

Тогда ссылка для прокрутки к нужному элементу будет выглядеть так:

См. код в полном сообщении.

На этом пока всё. Возможно, позже, в отдельном сообщении распишу, как сделать загрузку в iframe preview-изображения для видео и обеспечить его работу даже в том случае, если JavaScript отключен.

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

В одном из прежних сообщений я уже описывал, как добавить на сайт ReCAPTCHA для защиты от спама. Но скрипт ReCAPTCHA имеет увеличивает время загрузки сайта и ухудшает показатели в Google Page Insights. Если она нужна на одной странице (скажем, только регистрации пользователя), то это не страшно. Но вот если нужно защитить форму, которая есть на каждой странице сайта (например, форма обратной связи или записи на какое-нибудь мероприятие), загрузку приходится делать всё время.

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

Каждый, кто когда либо сталкивался с версткой, знает, сколько времени уходит на постоянное обновление страницы, чтобы увидеть результаты изменений. Но, как выяснилось, существует несколько решений для этой проблемы: LiveReloadX для Node.js и дополнение LiveReload для Visual Studio Code. Также есть LiveReload для Python. Все они работают так: отслеживают изменения в файловой системе и запускают на localhost Websocket-сервер, через который отправляют уведомления, что нужно перезагрузить страницу. А в редактируемый HTML нужно добавить простой скрипт, который и будет получать эти уведомления и перезагружать страницу.
"Перейти к описанию установки и использования"

Часто при верстке мобильных версий сайта возникает необходимость сделать ссылки на различные мессенджеры так, чтобы нужное приложение открывалось сразу же по щелчку на этой ссылке. Хотя эта информация легко находится в сети, я решил собрать все необходимое в одном месте.
Смотреть примеры кода