Как известно, lazy loading — простой подход оптимизации загрузки страницы. Существуют различные варианты этого подхода: например, на стороне сервера таким образом можно организовать подключение компонентов веб-приложения или инициализацию подключения к БД. На стороне клиента — можно подключать только необходимый на данный момент JS-код или подгружать элементы страницы в тот момент, когда посетитель просмотрит ее целиком.

Практически ни один современный сайт не может обойтись без использования JavaScript. В 99% случаев используется jQuery и еще несколько других библиотек. Правда иногда для функционала сайта использование «тяжелых» библиотек может быть избыточным. В сети можно найти сотни микро-библиотек и микро-фреймворков, которые предназначены для решения каких-то определенных задач. Микро-библиотеки могут служить хорошей альтернативой обычным библиотекам с множеством настроек. Из-за того, что они созданы под конкретные задачи, их «вес» в среднем составляет 5 Кб.

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

Очень важно чтобы в процессе оформления заказа в интернет-магазине посетитель случайно не закрыл страницу или не перешел на другую страницу. Существует JS-скрипт, который может предотвратить эти нежелательные действия. Например, он используется на Яндекс.Маркете. Смысл его работы заключается в том, что при попытке закрыть окно или вкладку браузера, появляется стандартное всплывающее окно с 2 кнопками «закрыть окно» и «остаться на странице». Правда в нем есть небольшой недостаток, он срабатывает не только на закрытие вкладки в окне браузера, но и при клике по ссылкам на странице, а также при отправке формы.

Взаимодействовать с псевдоэлементами на странице не так просто, как с обычными HTML-элементами. До них невозможно «добраться» при помощи jQuery, а при необходимости изменить их содержимое приходиться делать различные трюки. Недавно мне понадобилось изменить фон псевдоэлемента :after. Сейчас я поделюсь с вами информацией о том, как это можно сделать.