أدوات الويب والتصميم

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

وهناك سبب ثانٍ، هو نفسه الذي وراء بقية الموقع. فـCSS الذي تلصقه في مصغّر غير مُصدَر. والصورة التي تضمّنها شعارٌ لم يُعلَن. ووسوم الميتا تصف صفحة لم يرها أحد. ولا شيء من ذلك مضطرّ إلى مغادرة جهازك، فلا شيء منه يغادره.

ولهذا أيضًا تعمل والشبكة مطفأة. اقطع الاتصال، وأعد التحميل، فيبقى محوّل الألوان والمولّدات والمصغّرات كلها تعمل. فلم يكن هناك خادم متورّط قط.

اللون

المحوّل يأخذ لونًا بأي صيغة تقبلها ورقة أنماط ويعطيك كلها — hex وrgb وhsl وhsv وcmyk، واسم CSS حيث يوجد. ومولّد اللوحات يبني مخطّطًا كاملًا من لون واحد، بما فيه سلّم الدرجات 50–900 الذي يقوم عليه نظام تصميم، ويحاكي كيف يبدو لمن عنده قصور في رؤية الألوان. وفاحص التباين يقيس النص مقابل خلفيته لمعيار WCAG ويعيد أقرب درجة من الصبغة نفسها تنجح.

CSS الذي كنت ستخمّنه

التدرّجات بصورها الثلاث، بما تشاء من محطّات. وظلال الصندوق مكدَّسةً طبقات، لأن الظلّ الواحد يبدو مسطّحًا دائمًا. ونصف قطر الحدود لكل زاوية، بما فيه الصورة الإهليلجية التي تنتج أشكالًا عضوية ولا يعرضها أي مولّد آخر تقريبًا.

الشفرة والترميز

مصغّر CSS يضغط ورقة أنماط أو يوسّعها دون كسر calc()، وهو الخطأ الذي يكلّف تخطيطًا في صمت. ومصغّر HTML يرفض حذف الفراغ بين العناصر السطرية، لأن ذلك الفراغ فجوة كلمات. ومرمّز الكيانات يهرّب الترميز ليُعرض نصًّا، ويفكّه رجوعًا.

شحن صفحة

وسوم الميتا للبحث والمشاركة، مع معاينة للبطاقة التي سيراها الناس فعلًا وتهريب تلقائي لعلامات الاقتباس التي تقتطع وصفًا في صمت. وعناوين البيانات لتضمين صورة صغيرة، مع تحذير صادق حين يكون الملف أكبر من أن يستحقّ ذلك. ونسب الأبعاد لضبط الأبعاد ضبطًا صحيحًا، ولخاصّية CSS التي توقف قفز صفحتك مع وصول الصور.