Русский
Русский
English
Статистика
Реклама

Из песочницы День и ночь в интернете, или открытое письмо веб-разработчикам

Я веб-разработчик со стажем, и мне приходится подолгу сидеть за компьютером. Поэтому, чтобы к вечеру глаза не уставали, мне пришлось перепробовать все возможные способы снижения нагрузки на зрение от защитных экранов, специальных очков и упражнений для глаз до различных режимов eye saver и прочих манипуляций с настройками монитора.


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


Как известно, операционная система не позволяет управлять содержимым веб-сайта. Решение о том, как оформить веб-страницу, принимает дизайнер, а не пользователь, и большинство страниц светлые. Конечно, существуют плагины типа Dark Reader, которые пытаются решить эту проблему. Но, к сожалению, все они так или иначе искажают содержимое страниц и, кроме того, могут нарушать работу скриптов сайта.


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


Это было последней каплей, и я сказал себе: все, хватит! Пусть сам посетитель выбирает, в каком режиме показывать страницу, в соответствии со своими личными предпочтениями.


Дальше было все просто. Техническая реализация идеи заняла у меня максимум пол-дня, включая тесты и размышления о том, где бы в коде лучше разместить переключатель. Я просто вынес все упоминания цвета из основного CSS-файла в файл light.css, потом скопировал его в файл dark.css и изменил некоторые (даже не все) цвета. Вот что получилось в итоге:


image


Детали реализации (на примере aiohttp)
main.py:    async def create_app():        ...        jinja_setup(            app,            context_processors=[BaseHandler().context_processor])views.py:    class BaseHandler:        async def context_processor(self, request):            ...            return {                'theme': 'dark'                    if request.cookies.get('theme') == 'dark' else 'light'}base.html:    <head>        ...        <link rel="stylesheet"            href="{{ static_root_url }}/css/{{ theme }}.css">    </head>    <body>        ...        <div class="nav-block nav-item nav-theme">            {% if theme == 'dark' %}                <a href="javascript:void(0)" class="js-theme"                    data-theme="light">                    Дневной режим                </a>            {% else %}                <a href="javascript:void(0)" class="js-theme"                    data-theme="dark">                    Ночной режим                </a>            {% endif %}        </div>        ...    </body>base.js:    ...    $('.js-theme').on('click', function () {        $.setCookie('theme', $(this).data('theme'));        location.reload();    });

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


А теперь давайте помечтаем о том, как это могло бы быть, если бы было веб-стандартом. Предположим, в настройках ОС одним из первых пунктов идет что-то вроде Look and feel, который предоставляет выбор между темными и светлыми темами. ОС передает эту настройку браузеру, а тот, в свою очередь, веб-странице. Адаптивный сайт (или, если угодно, ресурс с персонализированным интерфейсом), получив такую инструкцию, должен отреагировать на нее переключением цветовой схемы и предоставить посетителю выбор: использовать текущую схему или переключить день на ночь (или наоборот).


И в заключение: уважаемые коллеги-разработчики, давайте будем уважать себя и наших пользователей и начнем внедрять подобные решения в наших проектах уже сейчас! Это совсем не сложно.


Мы ведь делаем сайты для людей, да?

Источник: habr.com
К списку статей
Опубликовано: 30.07.2020 16:13:15
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Разработка веб-сайтов

Python

Aiohttp

Категории

Последние комментарии

© 2006-2021, personeltest.ru