По-моему, я тут уже был

Недавно мы писали про кэширование контента web-страниц, а сегодня поговорим о кэшировании статических файлов: JS, CSS, изображений, шрифтов и т.д.

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

Для того чтобы браузер закэшировал файл на необходимое время, используются заголовки Cache-control, Expires и Vary, которые сервер может прислать вместе с файлом.

Чтобы сбросить кэш браузера для этих файлов, нужно изменить URL-адрес либо с помощью GET-параметра (например, /js/script.js?v=2), либо изменив путь до самого файла, как это делает asset-менеджер Yii 2.

Настроить кэширование статики несложно. Вот, например, конфигурация для nginx:
https://bitbucket.org/snippets/OlegChulakovStudio/qeLrEg

А так можно?

Недавно мы рассказали о нашем подходе к работе с CSS при верстке писем. Некоторые подписчики написали нам на [email protected] вопросы о том, что можно использовать в письмах, а что — нет.

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

Не использовать float и flex. Если нужно расположить элементы в строку, то, чтобы работало в Outlook, придется делать это с помощью таблиц.

Не использовать position, transform и отрицательные margin. Многие почтовые сервисы удаляют такие свойства, защищаясь от того, что контент письма может «залезть» на их интерфейс.

Во многих почтовых клиентах не работает и background-image. Это исправляется с помощью различных «костылей», но лучше к ним не прибегать и добавлять изображения с помощью тэга img.

Не подключать SVG-изображения, шрифты, JS- и CSS-файлы. Если в тексте есть, например, заголовок, написанный нестандартным шрифтом, то лучше вставить его картинкой.

Не пользоваться в теле письма тэгами, кроме div, span, a, table, tr, td, span, strong/b, em/i и img. Например, применение тэга p может привести к конфликту со стандартными стилями отступов этого элемента у почтового сервиса, а тэги вроде video, audio, form, input будут удалены или не будут выполнять свои функции.

Все течет, все меняется

Кэширование на стороне браузера применимо и к динамическому контенту. Когда загружаемые данные web-страницы изменятся, кэш будет сброшен.

В одной из предыдущих заметок мы рассмотрели кэширование с применением заголовков Last-Modified и If-Modified-Since из спецификации HTTP 1.0.

В спецификации HTTP 1.1 появились более универсальные заголовки Etag и If-None-Match.
При первом запросе контента web-страницы браузеру возвращается заголовок Etag с уникальным идентификатором ресурса в виде хеша. При последующих запросах этого же ресурса серверу передается уникальный хеш с помощью заголовка If-None-Match. Если контент ресурса не поменялся, то сервер вернет HTTP-статус 304 Not Modified и браузер отдаст контент из своего кэша. В противном случае сервер вернет обновленный контент со статусом 200 OK.

Вместе с заголовкамиEtag можно использовать заголовок Expires, в котором задается время максимального хранения кэша.

Следите за выражениями

При составлении регулярных выражений мы часто пользуемся специальными сервисами и только потом переносим эти выражения в свой код.

Иногда даже проверенные регулярные выражения могут работать не так, как ожидалось. Конечно, большинство проблем решается с помощью применения флагов или дополнительного изучения справочной информации.
Но бывают случаи, когда локальные тесты проходят успешно, а при переносе на промышленные серверы поведение «регулярки» меняется не в лучшую сторону.

Работа с кириллицей может стать корнем проблем. Вот такое регулярное выражение отказалось работать с русскими буквами на промышленном сервере заказчика:

$string = preg_replace('/[^\d\w\s\.\:-]+/u', '', $string);

Изучив проблему, мы поняли, что в старых версиях PHP-модуля pcre стандартный перечень \w не охватывает кириллические символы даже с модификатором u. Именно этот модуль реализует работу Perl-совместимых регулярных выражений в PHP.

Для того чтобы ваши регулярные выражения корректно работали с русскими символами, необходимо, чтобы версия pcre была не ниже 8.38. Проверить это можно, выполнив консольную команду

$ php -i | grep PCRE

Разметка? Нет, не слышали

Телеграм дает много возможностей для создания ботов. Часто их используют для публикации новостей в каналах. Публиковать свои сообщения очень просто: метод sendMessage принимает текст в трех форматах — text, markdown и html. А вот парсинг и отображение сообщения (например, на сайте) имеют одну большую проблему — получаемый из Телеграма текст не содержит разметки. В нем никак не обозначены ссылки, курсив и т.д.

Однако вместе с ним передается список объектов MessageEntity, в которых хранится тип, позиция и длины размеченных частей текста. Мы не нашли библиотек, которые могли бы формировать на основе этих данных, например, markdown-код. При этом любое внесение изменений в исходный текст приводит к несовпадению индексов у последующих MessageEntity. Если начать вставлять теги разметки, то текст начнет смещаться с позиций, указанных в MessageEntity, и будет размечаться не тот контент.

Как мы решили проблему?

Шаг 1: Собрать необходимые данные
Мы собрали все части в один список. В него попали входные и закрывающие индексы.
https://bitbucket.org/snippets/OlegChulakovStudio/Beok58

Шаг 2: Разрезать на части!
По существующим индексам мы порезали сообщение на части, начиная с конца. В результате получили маркированный список отрезков исходного текста.
https://bitbucket.org/snippets/OlegChulakovStudio/pey7p6

Шаг 3: Разметить
Имея маркеры и кусочки текста, можно легко преобразовать их с учетом любой верстки и смещений.
https://bitbucket.org/snippets/OlegChulakovStudio/9ekL9j

Шаг 4: Склеить
Теперь текст можно собрать обратно, уже с внесенными изменениями.

$text = implode('', $parts);

Движение вбок

Один из наших подписчиков решил наглядно показать принципы работы современных библиотек для DOM-анимаций. Для этого он написал простую библиотеку и попросил нас ею поделиться:
codepen.io/OlegChulakovStudio/pen/JpYWXX

Так, с ее помощью можно переместить блок по диагонали:

animation($block, .3, 
  {
    transform: "translate3d({0}px, {0}px, 0px)"
  },
  {
    transform: "translate3d({50}px, {50}px, 0px)"
  }
);

Несмотря на небольшой размер, здесь предусмотрена даже поддержка vw, % и т.д. Если вам интересна тема анимаций, рекомендуем поизучать код.

Напоминаем, что интересные идеи или вопросы вы можете присылать нам на [email protected].

Вы знаете, с какой скоростью вы ехали?

Что делать, если требуется автоматически отображать пользователю медиаконтент в качестве, подходящем скорости его интернет-соединения? Например, если у вас на сайте собственный видеоплеер и вы хотите показать пользователю ролик в максимально хорошем качестве, но чтобы при этом воспроизведение не прерывалось из-за загрузки.

Сперва, разумеется, вам потребуется сделать несколько версий медиафайла разного веса/качества. Затем нужно определить скорость скачивания и на ее основе отобразить подходящий вариант.

Готовится спецификация Network Information API, которая позволит определить параметры сети, но сейчас ее еще рано использовать в production-среде.

В суровом мире кроссбраузерности порой приходится прибегать к менее изысканным решениям. Для этой задачи наиболее популярным является замер времени скачивания заранее известного объема данных (например, изображения):
https://bitbucket.org/snippets/OlegChulakovStudio/6ey8MR

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

Есть кто дома?

Нам на [email protected] пришел вопрос: «Как сервисы почтовой рассылки вроде MailChimp собирают статистику о прочтении писем?» Рассказываем.

Перед отправкой в HTML-код письма автоматически добавляется тэг img. Он ссылается на маленькое прозрачное GIF- или PNG-изображение. Перед отправкой backend генерирует уникальный URL этого изображения для каждого адресата. Когда пользователь откроет письмо в своем почтовом клиенте, изображение начнет скачиваться с сервера, этот запрос будет зафиксирован и факт открытия письма адресатом запишется в базу данных.

Разумеется, точность такой статистики снижается из-за блокировки изображений в зависимости от настроек почтовых клиентов у пользователей и политик безопасности используемых ими сервисов.

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

Пропустите! Мне только лайк поставить

При разработке сайтов важно не забывать о том, что у посетителей могут быть заблокированы API встраиваемых сервисов. Например, виджетов VK или Facebook, скриптов Google Analytics. Если не учесть эти блокировки, то от части пользователей будут поступать сообщения о том, что в работе сайта есть ошибки.

Чаще всего причиной являются установленные в браузере AdBlock-плагины, но также проблемы бывают связаны с ограничениями доступа (например, у пользователей из Украины сейчас полностью заблокирован VK).

Что делать?

Тестировщику нужно настроить как минимум один браузер на абсолютно беспощадный режим блокировки: установить AdBlock, Ghostery и другие подобные плагины. Включить в них все преднастроенные ограничения, полностью заблокировать обращения к доменам социальных сетей и популярных сервисов.

Frontend-разработчику нужно внимательно проверять все места, где он использует сторонние API. Необходимо обработать все исключения и не допустить возникновения ошибок, которые прервут выполнение кода.

Например, если вы разместили на сайте кнопку Like, а Facebook JS SDK у пользователя не скачался, то он не должен об этом узнать: верстка не должна поехать, а функционал сайта — сломаться.

Социальное чтиво

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

Эти данные VK и Facebook получают, посылая запрос на страницу и анализируя ее HTML-код. Если разработчик хочет добиться предсказуемого поведения и контролировать содержимое виджетов, то ему необходимо использовать специальные метатеги.

Например, для указания изображения используется метатег <meta property="og:image" content="URL" />. Если его не разместить, то картинки в виджете либо не будет вообще, либо краулер соцсети сам возьмет первую подходящую из кода страницы. А это может быть что угодно, даже какой-нибудь рекламный баннер, не имеющий отношения к содержимому, которым делился пользователь.

В метатеге og:image нужно указывать абсолютный URL изображения с протоколом и доменом. Чтобы картинка загрузилась, при самом первом шейре страницы нужно добавить метатеги og:image:width и og:image:height с соответствующими размерами изображения.

Все по-старому

В прошлой заметке мы говорили про публикацию ссылок в соцсетях и про то, что VK и Facebook получают метаданные страницы, посылая на нее запрос и анализируя HTML-код.

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

Если вы обновили og:image или другие поля, то, для того чтобы пользователи начали ими делиться, нужно сбросить кэш для страницы. Для этого можно использовать специальные инструменты или методы API:
https://developers.facebook.com/tools/debug
https://vk.com/dev/pages.clearCache

Это была ошибка!

Если вы собираетесь использовать React 16, советуем обратить внимание на новую политику обработки ошибок рендера.

В 15ой версии ошибка мешала перерендериваться компоненту и всему поддереву, но оставляло его последнее состояние:
https://codepen.io/OlegChulakovStudio/pen/BYYjya

В 16ом релизе команда разработчиков приняла решение не оставлять компонент в дереве рендеринга и, более того, исключать все вышестоящие компоненты из него, пока не будет встречен компонент с новым методом жизненного цикла componentDidCatch (в 15ой версии он назывался handle_unstableError).

Таким образом, отсутствие компонентов-обработчиков теперь может привести к полному размонтированию дерева компонетов:
https://codepen.io/OlegChulakovStudio/pen/yvveyg

Мы подготовили демонстрацию применения такого компонента-обработчика (ErrorBoundary), который умеет подменять сломанный компонент другим, подготовленным заранее.

Опять то же самое?

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

Например, если вы делаете какой-нибудь посещаемый блог, главная страница которого содержит список из 50 публикаций с числом просмотров и комментариев каждой, то запросы к БД могут сильно нагрузить сервер, а рост числа посетителей может привести к увеличению времени загрузки сайта.

Один из самых простых в настройке способов серверного кэширования — nginx proxy cache:
https://bitbucket.org/snippets/OlegChulakovStudio/ae8gbz

Когда веб-приложение сгенерирует страницу, nginx сохранит результат в указанной ему папке. Последующие запросы на этот же адрес не дойдут до приложения: пользователю будет передан сохраненный в кэше файл. За счет этого нагрузка на сервер может многократно снизиться.

Балансировка

Nginx удобно использовать и для другого типа оптимизации — распределения нагрузки между несколькими зеркалами веб-приложения, которые могут находиться на разных серверах.

Настроить load balancer, который будет равномерно распределять запросы, очень просто:
https://bitbucket.org/snippets/OlegChulakovStudio/7eg8eG

Порталы в React

В некоторых случаях приходится использовать сторонние плагины, создающие разметку собственными методами. Нетривиальной задачей становится попытка вставить в эту разметку интерактивные элементы, описанные в рамках React-экосистемы проекта.

Ранее подобную проблему решали с помощью компонента-обертки, где сам рендер необходимого компонента осуществлялся не в методе render, а в componentDidUpdate с помощью функции ReactDOM.unstable_renderComponentIntoSubtree().

В новой версии появился метод createPortal объекта ReactDOM, который позволяет отрендерить React-компонент в DOM-дереве, о котором React ничего не знает. Для этого ему надо передать первым аргументом сам компонент, а вторым — ссылку на нужный DOM-узел.

Мы подготовили интерактивный пример использования этого метода. В примере рассматривается случай с интерфейсом плеера Video.js, в панель которого мы добавили компонент Likes.

Полезные команды Git. Удаление из индекса

Если вы случайно закоммитили файл, который не должен был попасть в индекс репозитория (например, конфигурационный файл или лог), добавление его в .gitignore уже не поможет. Все будущие изменения этого файла будут фиксироваться Git-ом.

Чтобы убрать файл из индекса, не удаляя его из директории, можно использовать следующую команду:
git rm --cached path-to/file.txt

Полезные команды Git. Перенос коммита

Если вы сделали коммит не в той ветке, вы можете легко скопировать его в нужную, используя команду:
git cherry-pick <хэш коммита>

Эта команда создаст в ветке новый коммит, который будет содержать все изменения из указанного.

Полезные команды Git. Откат незакоммиченных изменений

Если вы внесли изменения в файлы, а теперь хотите вернуть их в изначальное состояние, можно воспользоваться командой:
git reset --hard HEAD

Полезные команды Git. Откат коммита

Если вы сделали коммит, но забыли внести в него некоторые файлы, вы можете отменить коммит, сохранив все ваши изменения на диске:
git reset --soft HEAD~1

Чтобы удалить последний коммит вместе с изменениями в файлах, вы можете воспользоваться командой:
git reset --hard HEAD~1

Вы также можете откатить несколько последних коммитов. К примеру:
git reset --hard HEAD~3

Полезные команды Git. Revert

Откат коммитов описанными ранее способами вынуждает всех участников работы с репозиторием либо откатывать их также и у себя, либо пересоздавать ветку из репозитория.

Если команда разработчиков большая, можно воспользоваться командой git revert. Это команда делает новый коммит, в котором отменяет все изменения из указанного:
git revert <хэш коммита>