Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

Может возникнуть вопрос, сколько символов можно записать в URL и как много кода таким образом можно закодировать? У разных браузеров максимальная длина URL-строки отличается. Но 2000 символов поддерживают все современные браузеры. В такую строку можно закодировать довольно много кода, причем степень сжатия увеличивается с объёмом кода.

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

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

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

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

▎Проблема

Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px.  При максимальной ширине (1440px), размер шрифта должен быть 40px. 

Для решения этой задачи мы можем использовать специальный онлайн калькулятор:

Min-Max-Value Interpolation

Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)

В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.

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

▎Зачем нужен Long Press?

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

▎Стандартное решение

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