🧛🏽 👨🏼‍⚕️ 😡 Tag und Nacht im Internet oder ein offener Brief an Webentwickler 👩🏼‍💼 🚮 🌵

Ich bin ein erfahrener Webentwickler und muss lange am Computer sitzen. Damit meine Augen bis zum Abend nicht müde werden, musste ich alle möglichen Möglichkeiten ausprobieren, um die Belastung des Sehvermögens zu verringern - von Schutzschirmen, speziellen Brillen und Augenübungen bis hin zu verschiedenen „Augenschoner“ -Modi und anderen Manipulationen mit Monitoreinstellungen.

Meiner Meinung nach ist eine der effektivsten Methoden, um für Ihre Gesundheit zu kämpfen, die Auswahl von dunklen oder "Nacht" -Themen in den Betriebssystemeinstellungen. Ich muss jedoch ständig zwischen dem Texteditor und dem Browser wechseln, und hier tritt ein sehr unangenehmer Effekt auf.

Wie Sie wissen, können Sie mit dem Betriebssystem den Inhalt der Website nicht verwalten. Es ist Sache des Designers und nicht des Benutzers, zu entscheiden, wie eine Webseite gestaltet werden soll. Die meisten Seiten sind hell. Natürlich gibt es Plugins wie "Dark Reader", die versuchen, dieses Problem zu lösen. Leider verzerren alle auf die eine oder andere Weise den Inhalt der Seiten und können außerdem den Betrieb von Site-Skripten stören.

Während ich an einem der Projekte arbeitete, schrieb mir unser Chefredakteur und bat mich, ein dunkles Thema zu verwenden, das sich auf die Tatsache bezog, dass das Licht seine Augen verletzt. Das Projekt veröffentlicht jedoch unter anderem Inhalte für Kinder, sodass es keine Möglichkeit gab, dies zu tun.

Dies war der letzte Strohhalm und ich sagte mir: "Das reicht"! Lassen Sie den Besucher entsprechend seinen persönlichen Vorlieben auswählen, in welchem Modus die Seite angezeigt werden soll.

Dann war alles einfach. Die technische Umsetzung der Idee dauerte höchstens einen halben Tag, einschließlich Tests und Überlegungen, wo im Code der Schalter besser platziert werden sollte. Ich habe gerade alle Verweise auf Farbe aus der CSS-Hauptdatei in die Datei light.css verschoben, sie dann in die Datei dark.css kopiert und einige (nicht alle) Farben geändert. Folgendes ist am Ende passiert:

Bild

Implementierungsdetails (am Beispiel von 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», . , , , -. (, , ), , : «» «» ( ).

Und zum Schluss: Liebe Entwicklerkollegen, respektieren wir uns selbst und unsere Benutzer und beginnen sofort mit der Implementierung solcher Lösungen in unseren Projekten! Es ist überhaupt nicht schwierig.

Wir machen Websites für Menschen, oder?

Tag und Nacht im Internet oder ein offener Brief an Webentwickler

More articles: