Осознанная практика: что я узнал из чтения headspace
Что такое свободное пространство?
Судя по его README, headspace - это библиотека, которая предоставляет удобный для UX заголовок.
Поиграйте с демо. Прокрутите страницу вверх и вниз. Что вы заметили в заголовке?
Традиционно заголовки прикрепляются к верхней части экрана. Фиксированный заголовок хорош тем, что обычно содержит информацию, которая нужна пользователю немедленно, например, навигацию. Единственное, что здесь не хорошо, так это то, что он занимает много места на экране. Это особенно заметно на экранах меньшего размера, например на мобильных устройствах.
headspace предлагает решение этой проблемы. В демо прокрутите страницу вниз. Обратите внимание, как заголовок прокручивается вне поля зрения. Он больше не занимает драгоценное пространство на экране.
Но теперь, что, если пользователь хочет получить доступ к некоторой части навигации в заголовке. Обычно вам придется прокручивать до самого верха экрана. Это может быть не очень хорошо для пользователей, которые много прокручивают вниз. Но с headspace, когда пользователь немного прокручивает вверх, BAM, заголовок возвращается в поле зрения, чтобы поприветствовать его.
На мой взгляд, это отличное решение. Заголовок не занимает ненужного места на веб-странице, но легко доступен.
headspace README перечисляет medium.com и romper.com как веб-сайты, заголовки которых имеют схожее поведение. На момент написания этой статьи на этих веб-сайтах больше не использовался такой заголовок (хотя Medium действительно делает нечто подобное со своим нижним колонтитулом). Интересно, провели ли они несколько A / B-тестов и обнаружили, что он не работает. Я все еще чувствую, что это чистое решение. Дайте мне знать, что вы думаете!
Как использовать свободное пространство
Я обнаружил, что использовать headspace просто. Вот как я использовал его в простом компоненте React.
headspace принимает два аргумента. Первый - это фактический элемент DOM вашего заголовка. В React я могу получить это с помощью ref.
Второй аргумент, который вы можете передать, - это объект options. Некоторые вещи, которые вы можете настроить, - это то, как быстро пользователь должен прокручивать заголовок, чтобы появиться / исчезнуть (tolerance), и должен ли заголовок отображаться, когда пользователь достигает самой нижней части документа HTML (showAtBottom). См. README для дополнительных опций.
Обратите внимание, как я также импортирую файл CSS. Вот как это выглядит.
Этот файл CSS нужен для отображения и скрытия заголовка.
headspace - простая библиотека. Все, что он делает, это добавляет имя класса (которое вы можете настроить), когда заголовок должен быть в поле зрения, и добавляет имя класса, когда заголовок должен быть скрыт. Эти имена классов - то, что вы будете использовать для настройки внешнего вида и анимации вашего заголовка.
Вещи, которые я узнал
requestAnimationFrame
Https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
https://www.html5rocks.com/en/tutorials/speed/animations/ < br /> https://css-tricks.com/using-requestanimationframe/
Ознакомьтесь с этими замечательными ресурсами о requestAnimationFrame. Это метод, который сообщает браузеру, что вы хотите нарисовать что-то в своем браузере (например, анимацию), и запустить функцию обратного вызова (возможно, для выполнения некоторых вычислений для вашей анимации) перед ее следующей перерисовкой.
requestAnimationFrame позволяет браузерам оптимизировать вашу анимацию, обеспечивая более плавное взаимодействие с пользователем. Он также останавливает анимацию на неактивных вкладках, поэтому вы не тратите ресурсы ЦП и экономит заряд батареи.
Мне нравится думать об этом как о дросселировании для ваших анимационных функций.
Работа с DOM
Моим основным инструментом был React, и я жил в его абстракциях, которые он мне предоставил. Глядя на некоторые из используемых headspace API DOM, я вспомнил. Такие вещи, как pageYOffset и offsetHeight.
Многие студенты обучаются на курсах для начинающих по кодированию, которых сразу же бросают в изучение интерфейсных библиотек, таких как React. Я думаю, что фундаментальное понимание того, что делает React, очень важно для вашей карьеры.
Ознакомьтесь с моим аннотированным исходным кодом здесь
