🏭 💺 👨🏿‍🤝‍👨🏼 ليل نهار على الإنترنت ، أو خطاب مفتوح لمطوري الويب 🕺🏾 👌🏾 👨🏽‍✈️

أنا مطور ويب ذو خبرة ، ولا بد لي من الجلوس على الكمبيوتر لفترة طويلة. لذلك ، حتى لا تتعب عيني بحلول المساء ، كان علي أن أجرب كل الطرق الممكنة لتقليل العبء على الرؤية - من الشاشات الواقية والنظارات الخاصة وتمارين العين إلى أوضاع "حماية العين" المختلفة والتلاعبات الأخرى باستخدام إعدادات الشاشة.

في رأيي ، أحد أكثر الطرق فعالية للقتال من أجل صحتك هو اختيار المظاهر المظلمة أو "الليلية" في إعدادات نظام التشغيل. ومع ذلك ، لا بد لي من التبديل باستمرار بين محرر النصوص والمستعرض ، وهنا يحدث تأثير غير سار للغاية.

كما تعلم ، فإن نظام التشغيل لا يسمح لك بإدارة محتوى الموقع. الأمر متروك للمصمم ، وليس المستخدم ، ليقرر كيفية تصميم صفحة ويب ، وتكون معظم الصفحات ذات ألوان فاتحة. بالطبع هناك مكونات إضافية مثل "Dark Reader" تحاول حل هذه المشكلة. لكن ، للأسف ، كلهم بطريقة أو بأخرى يشوهون محتوى الصفحات ويمكنهم ، بالإضافة إلى ذلك ، تعطيل عمل البرامج النصية للموقع.

وهكذا ، أثناء العمل في أحد المشاريع ، كتب لي رئيس التحرير وطلب مني استخدام موضوع مظلم ، في إشارة إلى حقيقة أن الضوء يؤذي عينيه. لكن المشروع ينشر ، من بين أشياء أخرى ، محتوى للأطفال ، لذلك لم يكن هناك طريقة للقيام بذلك.

كانت هذه القشة الأخيرة ، وقلت لنفسي: "هذا يكفي"! دع الزائر يختار في أي وضع لعرض الصفحة ، وفقًا لتفضيلاته الشخصية.

ثم كان كل شيء بسيطًا. استغرق التنفيذ الفني للفكرة نصف يوم على الأكثر ، بما في ذلك الاختبارات والتفكير في المكان الذي سيكون من الأفضل وضع المفتاح فيه في الكود. لقد قمت للتو بنقل جميع المراجع إلى اللون من ملف CSS الرئيسي إلى ملف light.css ، ثم قمت بنسخه إلى ملف dark.css وقمت بتغيير بعض الألوان (وليس كلها). إليكم ما حدث في النهاية:

تفاصيل التنفيذ (باستخدام 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», . , , , -. (, , ), , : «» «» ( ).

وفي الختام: أعزائي المطورين ، دعونا نحترم أنفسنا ومستخدمينا ونبدأ في تنفيذ مثل هذه الحلول في مشاريعنا الآن! إنه ليس صعبًا على الإطلاق.

نصنع مواقع للناس ، صحيح؟

ليل نهار على الإنترنت ، أو خطاب مفتوح لمطوري الويب

More articles: