Немного о media-queries и брейкпойнтах

Бонус: Breakpoints как в SASS, но только в LESS

Одна из самых часто встречающихся ошибок в использовании media-queries — это жесткое задание трех-четырёх точек перелома (или брейкпойнтов, как угодно). Понятно, откуда она возникает — большинство популярных фреймворков работает именно так. Более того, большинство популярных сеток работает именно так. И дело даже не в количестве этих точек, а в самом принципе — вот есть n точек, их и используй. Но ведь сам подход в корне неверен. Что, если какую-то часть страницы для оптимального отображения нужно изменять не от 700px, например, а от 600? Добавлять еще одну переменную? Нет, чаще верстальщик меняет элемент от 700px, и даже не думает о том, что некоторые пользователи, у которых ширина браузера, скажем, 680px (половина от горизонтального размера одного из самых популярных разрешений), будут видеть мешанину.

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

Недавно был впечатлён возможностями библиотечки breakpoint для SASS. Если коротко — она делает процесс написания media queries в разы проще. Передаешь один параметр — получаешь @media (min-width: %параметр%). Передаешь два — получаешь min-width и max-width. Ну и так далее. Быстрый гуглинг не показал ничего похожего для LESS.

К счастью, LESS умеет в JS (и это то самое главное в LESS, что делает его, как мне кажется, гораздо более полезным для фронтендера, чем SASS), поэтому написать собственный миксин не составит труда.

Сам миксин (там же есть развернутая версия с комментариями):

Опишу примеры использования. По сути миксин умеет всё то же, что и breakpoint-sass, кроме того, что описано в последнем абзаце. То есть никаких дефолтных значений (почти), никакой особой поддержки device-pixel-ratio (ребята, это умеет делать Post CSS).

Продолжение «Немного о media-queries и брейкпойнтах»

Зачем терпеть это вранье? Зачем смотреть в стол? Жизнь слишком коротка, чтобы в стол смотреть. […] Мы можем гордиться только моментами, когда мы можем честно смотреть в глаза друг другу, когда мы делаем что-то достойное.
Алексей Навальный, 2014-12-19

Подбор значения CSS matrix3d transforms в браузере

Это, конечно, что-то невероятное.
Franklin Ta написал функцию, позволяющую вычислять необходимое значение css-свойства transform: matrix3d(…) прямо в браузере. Не то чтобы это прям было так жизненно необходимо, но приятно знать, что если такой инструмент понадобится — он уже существует. Суть в том, что благодаря функции определять необходимые значения матрицы становится элементарно:

See the Pen Drag to transform by Franklin Ta (@fta) on CodePen.


Продолжение «Подбор значения CSS matrix3d transforms в браузере»

Производительность window.onscroll

Событие window.onscroll бывает крайне полезным. Оно незаменимо для создания эффекта параллакса, отслеживания положения на странице и многого другого. Но если использовать его неправильно, можно радикально снизить производительность страницы, и, как следствие, сделать пребывание на ней невыносимым для посетителя.
Итак, каким образом можно полностью использовать возможности события и при этом не терять драгоценные фреймы в секунду? Один из ответов: совместное использование window.onscroll и setInterval.

window.onscroll = doThisStuffOnScroll;

function doThisStuffOnScroll() {
    console.log('You scrolled');
}

Главная проблема вышеприведенного кода (как и window.onscroll в целом) заключается в том, что он срабатывает слишком часто. При включенной функции плавного скроллинга в браузере, событие будет срабатывать до нескольких десятков и даже сотен раз в секунду, в зависимости от скорости прокрутки, и даже если вы не используете никаких сложных расчетов, на слабых компьютерах это может привести к существенному падению FPS. Поэтому решением становится ограничение частоты срабатывания события.
Продолжение «Производительность window.onscroll»

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

А еще понравилось про Валдайскую резню тупизной.

Дебаггер CSS-макета, умещающийся в твит (еще и для хеш-тегов место останется).

for(i=0;A=$$("*")[i++];)A.style.outline="solid hsl("+(A+A).length*9+",99%,50%)1px"

Найдено тут.