Регистрация

[Разработка веб-сайтов] День и ночь в интернете, или открытое письмо веб-разработчикам

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
30-Июл-2020 18:30
Цитировать

Я — веб-разработчик со стажем, и мне приходится подолгу сидеть за компьютером. Поэтому, чтобы к вечеру глаза не уставали, мне пришлось перепробовать все возможные способы снижения нагрузки на зрение — от защитных экранов, специальных очков и упражнений для глаз до различных режимов «eye saver» и прочих манипуляций с настройками монитора.
На мой взгляд, одним из самых эффективных методов борьбы за свое здоровье является выбор темных, или «ночных» тем в настройках операционной системы. Однако, мне постоянно приходится переключаться между текстовым редактором и браузером, и вот тут происходит очень неприятный для зрения эффект.
Как известно, операционная система не позволяет управлять содержимым веб-сайта. Решение о том, как оформить веб-страницу, принимает дизайнер, а не пользователь, и большинство страниц — светлые. Конечно, существуют плагины типа «Dark Reader», которые пытаются решить эту проблему. Но, к сожалению, все они так или иначе искажают содержимое страниц и, кроме того, могут нарушать работу скриптов сайта.
И вот, во время работы над одним из проектов, мне написал наш главный редактор и попросил использовать темную тему, ссылаясь на то, что от светлой у него болят глаза. Но в проекте публикуется, в том числе, детский контент, поэтому сделать это было никак нельзя.
Это было последней каплей, и я сказал себе: «все, хватит»! Пусть сам посетитель выбирает, в каком режиме показывать страницу, в соответствии со своими личными предпочтениями.
Дальше было все просто. Техническая реализация идеи заняла у меня максимум пол-дня, включая тесты и размышления о том, где бы в коде лучше разместить переключатель. Я просто вынес все упоминания цвета из основного CSS-файла в файл light.css, потом скопировал его в файл dark.css и изменил некоторые (даже не все) цвета. Вот что получилось в итоге:

Детали реализации (на примере aiohttp)

SPL
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
===========
Похожие новости: Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_python, #_aiohttp, #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 23-Ноя 00:02
Часовой пояс: UTC + 5