Немного о 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 и брейкпойнтах»

Подбор значения 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»

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

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

Найдено тут.

Вертикальное выравнивание — универсальный метод.

Наконец-то я его нашел. И почему мне раньше это не приходило в голову? Постоянно приходилось изобретать какие-то шаманские штуки с line-height, display: table, vertical-align, top: 50%; margin-top: -XXXpx и прочая и прочая.

И вот недавно, когда мне для одного проекта понадобилось сделать модальные окна произвольной ширины/высоты, я снова озаботился. И как-то сразу мне пришел в голову transform. Не, серьезно, translateY — это именно то, что нужно. Эту штуку поддерживает 83% браузеров (с префиксами, IE — начиная с 9.0).

Продолжение «Вертикальное выравнивание — универсальный метод.»

Резервное копирование Parallels Plesk на Amazon S3

В MUSTdigital существует необходимость хостить сайты некоторых клиентов у себя. В качестве контрольной панели управления хостингом мы используем Plesk и до недавнего времени мы довольствовались встроенной системой резервного копирования на собственный же сервер, однако со временем стало понятно, что это как-то глуповато. Опыт показывает, что необходимо хранить бэкапы глубиной как минимум 2 недели, а забивать для этих целей половину дискового пространства сервера совсем не хочется — да и смысла нет, если сервер умрет, то бэкапы пойдут на дно вместе с ним. Решение очевидно — Amazon S3. Насколько я могу судить, это самое дешевое, стабильное и надежное хранилище данных на настоящий момент.

Мои исходные данные

ОС: CentOS 6.3
Версия Panel: 11.5.30
Руки: кривые
Знания системного администрирования: примерно на нуле

Продолжение «Резервное копирование Parallels Plesk на Amazon S3»

Как вывести на одной странице записи, отсортированные по рубрикам

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

Родительская категория
---Дочерняя категория 1
------Товар 1
------Товар 2
------Товар 3
---Дочерняя категория 2
------Товар 4
Родительская категория 2
------Товар 5

Продолжение «Как вывести на одной странице записи, отсортированные по рубрикам»

Отправка сообщения автору поста.

В обсуждении вот этого вопроса на сайте n-wp.ru была поставлена следующая задача:

  1. Простая форма отправки сообщения из текстового поля и кнопки «Отправить».
  2. Кому: автору поста
  3. От кого: от зарегистрированного пользователя

Элементарно, Ватсон!

Продолжение «Отправка сообщения автору поста.»

Безопасная передача клиенту логинов/паролей с помощью WordPress

Сегодня на хабре увидел интересный пост «А как Вы передаете клиентам логины/пароли?»

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

Среди плюсов числятся AES-шифрование базы, вход по https и возможность добавления пароля для просмотра.

Среди минусов — сам факт того, что это сторонний сервис. В записи «WordPress как собственный сервис закладок» я уже говорил, что, если есть возможность реализовать какой-то сервис на собственном сервере — нужно это делать.

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

Продолжение «Безопасная передача клиенту логинов/паролей с помощью WordPress»