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

Найдено тут.

Отзывчивый дизайн

Отзывчивый (или responsive, или адаптивный) дизайн — новый тренд в разработке веб-сайтов. Ему не исполнилось и двух лет. Нет, конечно, и раньше существовали сайты, способные изменять свой внешний вид в зависимости от размеров экрана устройства, на котором их просматривают, но именно сейчас это явление стало просто повальным. По запросу «responsive web design» Гугл выдает от 30 до 40 миллионов ссылок!

Собственно говоря, поводом для написания этого поста (как и многих последующих) стало обновление дизайна моего блога и планируемая «перезагрузка» ПРЕ. И сегодня я хочу рассказать об очень простом инструменте, с помощью которого я сделал дизайн ПРЕ адаптивным. Это простейший CSS-фреймворк Proportional Grids, позволяющий в считанные минуты очертить схему страницы и запрограммировать её изменение в зависимости от размеров экрана.

В числе его особенностей могу отметить отсутствие класса .first и использование свойства box-sizing. Последнее позволило создать сетку с изменяющейся шириной столбцов, но при этом фиксированным расстоянием между ними. В качестве классов колонок используются интуитивно понятные col-full, col-one-half, col-three-quarters и так далее. По аналогии легко создавать классы для колонок шириной в 1/5 (20%), 1/8 (12.5%) или даже 3/20 ширины страницы (15%). Ну и фиксы для IE 7/8 тоже прилагаются.

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

В общем, если кого-то заинтересовало, то здесь можно посмотреть демо-страницу, а на Гитхабе — скачать.
Продолжение «Отзывчивый дизайн»