#статья дня
#css #js #mediaqueries #width #adaptive

Мы говорим “медиа-запросы” или “media queries” и обычно подразумеваем только часть с CSS. А когда дело касается JavaScript, во многих примерах, курсах и учебниках до сих пор используется сравнение window.innerWidth с желаемым значением на каждое событие изменения размера окна.

Конечно же, это неправильно и устарело. Уже давно существуют медиа-запросы для скриптов:

mediaQuery = window.matchMedia('(min-width: 768px)')

if (mediaQuery.matches) {
alert('Media Query Matched!')
}

Самое прекрасное в этом, что не надо слушать событие изменения размера окна. Достаточно лишь срабатывания самого медиа-запроса!

mediaQuery.addEventListener(function(e) {
if (e.matches) {
// your code
}
});

Подробнее и сравнение разных подходов в статье от Марко Илик (Marco Ilic) на CSS-Tricks: https://css-tricks.com/working-with-javascript-media-queries/

#библиотека дня

Ладно, раз уж подняли тему адаптивных таблиц, есть ещё большое количество применимых техник.

Один из наиболее полных сборников таких техник, это jQuery-плагин https://github.com/filamentgroup/tablesaw

1. Stack aka "вытягивание" таблиц в колонку.
2. Отображение только выбранных колонок
3. "Карусель" по колонкам, которые помещаются в экран.

Ну и в качестве бонуса, сортировка и "карта" отображаемых колонок, чтобы хоть как-то сориентироваться по ним.

Этот плагин официально неактивен с 2018 года, хоть и всё ещё работает. Это же веб, камон.

Но создатели вдохновили автора веб-компонента table-saw на свою реализацию stack-режима: https://github.com/zachleat/table-saw

И вот эта штука уже очень интересная и современная Ну и, из определения веб-компонентов, фреймворконезависимая. И именно ей мы звание библиотеки дня и присуждаем. Интересный вариант для тех, кто хочет написать свой первый веб-компонент.

Есть поддержка медиазапросов, есть — контейнерных.

Впрочем, я в любом случае предпочту предложенный мной в предыдущем посте вариант. Но я же не один на свете.

#css #table #adaptive

#такое дня

На правах субботнего бреда, не более того.

Помните, когда только начали появляться первые принципы адаптивного дизайна, ходил популярный мем про адаптивную змею?

Нет? Ну вот, напомню: https://www.reddit.com/r/ProgrammerHumor/comments/vqb2l2/responsive_snake/

Дизайнеру Анатолию Зенкову этого показалось мало! И... вашему вниманию — адаптивный доллар!

Вот: https://anatolyzenkov.com/resizabill

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

#adaptive #design

#статья дня

Сегодня у нас, прости господи, статья с Хабра. Там нынче много странного контента и плохих переводов, но эта — хорошая.

Автор — Карен Ананян, продуктовый дизайнер — предлагает новый (?) метод адаптивного дизайна, объединяющий принципы отзывчивого дизайна, адаптивного дизайна и масштабирования.

Я поставил вопрос после «новый», потому что, по факту, автор перепридумал clamp(). Но не то чтобы совсем.

Существующие подходы:

Responsive design (отзывчивый дизайн): Элементы интерфейса адаптируются к размерам экрана, сохраняя общую композицию и функциональность. Однако при значительном увеличении размеров экрана элементы могут чрезмерно растягиваться, ухудшая удобочитаемость и внешний вид.

Adaptive design (адаптивный дизайн): Структура блоков и элементов перестраивается в зависимости от устройства. Это требует разработки и поддержки нескольких макетов для разных типов устройств, что может быть трудоемким процессом.

Проблемы существующих подходов:

В Responsive design элементы могут чрезмерно растягиваться на больших экранах, что снижает удобство использования.

Adaptive design требует значительных ресурсов для разработки и поддержки множества макетов под разные устройства.

Предлагаемое решение: Stretch, Scale, Switch (SSS):

Автор предлагает трехэтапный подход к адаптивному веб-дизайну:

Stretch (Растяжение): Использование принципов отзывчивого дизайна для гибкого изменения размеров элементов по ширине или высоте, что обеспечивает адаптацию интерфейса к различным размерам экранов.

Scale (Масштабирование): При значительном изменении размеров экрана применяется пропорциональное масштабирование всего макета, включая шрифты, отступы и размеры блоков, с использованием выбранного множителя (scale-фактора).

Switch (Переключение): Если масштабирование достигает предела своей эффективности, происходит переключение на другой макет, оптимизированный для текущего разрешения экрана.

На самом деле, статья является действительно сборником хороших примеров и техник. Я сам пытался на эту территорию заходить с своё время, но не делал попыток свести всё к какому-то названию.

А вот собственно, ссылка: https://habr.com/ru/companies/simpleone/articles/881168/

#css #adaptive #responsive