Get best of the week

مطورو CSS - لماذا يحتاجهم العالم؟

النسخة الصوتية باللغة الروسية (Yandex.Music) / iTunes

على مدى السنوات العشر الماضية ، نمت CSS بشكل كبير من خلال إضافة المزيد والمزيد من الميزات ، وبالتالي أصبحت معقدة للغاية ومربكة. إن CSS لعصرنا مختلف تمامًا عن CSS للعقد 2001-2010.

قبل أن أشرح لماذا يحتاج العالم إلى مطوري CSS ، نحتاج إلى العودة وإلقاء نظرة على تاريخ CSS.

غطاء بطة صفراء

Disclaimer:
.
 .
 , , .


CSS


في العقد 2001-2010 ، عندما كانت الإنترنت تغزو العالم ، ظلت CSS ثابتة. كان Internet Explorer 6-7-8 المتصفح الرئيسي. لم تولي شركة Microsoft في ذلك الوقت اهتمامًا كبيرًا لمواصفات CSS ، ولم تُظهر أي اهتمام بإضافة ميزات جديدة إليها. ظلت CSS في الإصدار 2.1 طوال هذه السنوات.

منذ عام 2007 ، بدأت المتصفحات الحديثة Firefox و Chrome في الظهور. حتى في هذا الوقت ، كان لا يزال يتعين علينا دعم Internet Explorer. هذا أعاق تطورنا. بصفته المتصفح الرئيسي الحاكم في ذلك الوقت ، قام IE بتثبيت سرعة تطوير CSS غير موجودة تقريبًا. لقد كان "العصر المظلم" للإنترنت.

Dark Times CSS توضيح

الأحداث الأساسية في العصر الجديد لـ CSS


كنت مطورًا في ذلك الوقت ، وبالتالي شاهدت حدثين مهمين غيّرا عالم CSS والويب ككل:

  1. بداية عصر الهواتف الذكية (29 يونيو 2007) - بدأ كل شيء مع إصدار iPhone الأول. استلزم هذا الإصدار دعم ميزات CSS الجديدة التي تناسب الفئة الجديدة من أجهزة الويب.
  2. إصدار متصفح Chrome (2 سبتمبر 2008) - كان Chrome متصفحًا جديدًا بدأ كتطبيق سطح مكتب. حتى ذلك الحين ، كان Internet Explorer هو الحاكم الرئيسي للإنترنت وأمل تطويره.

متصفح Chrome و Steve Jobs مع iPhone في مؤتمر عام 2007 ، ملصقة

لماذا يتعامل مطورو Frontend مع كل من CSS و JavaScript


في ذلك الوقت ، كانت فكرة أنه يجب على مطوري Frontend إدارة جميع إمكانات العميل شائعة جدًا. ثم لم يكن هناك سوى عدد قليل من قواعد CSS. توسعت CSS الآن ، ولم تعد مثل هذه الرؤية ذات صلة.

CSS 3 و HTML 5 وجافا سكريبت: عهد جديد


من الصعب تحديد وقت ظهور CSS 3 بالضبط ، حيث تم تطويره منذ عام 1999. بدأ الدعم الحقيقي على الإنترنت في عام 2011. كان Chrome و Firefox يزيدان من حصتهما السوقية في ذلك الوقت. أصبحت الهواتف الذكية تحظى بشعبية كبيرة. وباستخدام المتصفحات الخاصة بهم ، بدأوا جميعًا في دعم أول ميزات CSS 3.

هذه التغييرات قللت من شعبية Internet Explorer. في ذلك الوقت ، كان لا يزال متصفحًا مهمًا ، ومع ذلك ، أدركت Microsoft أنه يجب أن تبدأ في الاهتمام بالمواصفات وتطوير CSS. أطلقوا Internet Explorer 9.

CSS جديد


يبلغ عمر CSS 3 الآن 10 سنوات ، فلماذا لا يكون CSS 4؟ CSS 3 ، على عكس CSS 2.1 ، معيار مفتوح. بفضل هذا ، يتم تحديثه باستمرار. ليست هناك حاجة لتسمية الإصدار الجديد "CSS 4" ، لأن CSS 3 هو تطوير مستمر ، إصدار لكل الأوقات.
صورة

منذ عام 2011 ، يتضمن كل تحديث للمتصفح ميزات CSS جديدة. في السنوات القليلة الماضية ، يتم تحديث معظم المتصفحات - Chrome و Firefox و Opera و Edge - كل شهر تقريبًا (يتم تحديث Safari مرة واحدة في السنة بشكل أساسي). هذا التردد يعني أننا نحصل على ميزات CSS الجديدة بمجرد ظهورها.

ما هو الجديد في CSS على مدى السنوات العشر الماضية


على مدى السنوات العشر الماضية ، ظهرت العديد من المواصفات الجديدة لأنواع مختلفة
من وحدات CSS ، على سبيل المثال:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

قد تلاحظ أن العديد من الميزات الجديدة تقع تحت مسؤولية مطور الواجهة الأمامية. هذا يعني أنه يجب أن يكتسب الخبرة في كل منهم. لكن هذه ليست قائمة كاملة.

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

خطأ كبير في صناعة الويب


هذه الحالة ، التي لم يتمكن فيها مطورو الواجهة الأمامية من التعامل مع التعقيد الجديد في CSS ، خلقت حركة جديدة تسمى "كيف لا تتعلم CSS".
حركة جديدة تسمى "لا تعلم CSS"

أطر CSS الأولى


بدأ هذا الخطأ مع أطر مثل Bootstrap و Foundation. تم إطلاق الإصدار الأول من كل منهم في عام 2011. هذا التاريخ بالذات ليس مصادفة - كانت هذه هي السنوات الأولى لـ CSS3 ، والتصميم سريع الاستجابة ، ومواقع الويب للجوال والتنضيد عبر المتصفحات.

لم أحاول أبدًا التعمق في Bootstrap ، نظرًا لأنني لم أحب أبدًا اصطلاح تسمية CSS غير الدلالي. بمساعدة مطوري الويب الآخرين في المجتمع ، أدركت بسرعة أن Bootstrap مناسب فقط لتلك الحالات عند استخدامه كما هو ، دون محاولة تخصيصه لنفسك.

لقطة شاشة ترميز Bootstrap
Bootstrap HTML - معظم الفصول غير دلالية.

الزاوي 2: إطار العمل الأول المتوافق مع جافا سكريبت


كان Angular الجديد أول من أدخل أنماطًا مغلفة. كانت طريقة لتخليص مطور الويب عديم الخبرة من الحاجة إلى فهم CSS المتتالية. باستخدام هذه الطريقة ، يمكنك إنشاء أنماط عامة ولا يزال لديك أنماط محلية لكل مكون.

من بين جميع أفكار التطوير المختلفة ، فإن فكرة الأنماط المغلفة ، في رأيي ، جيدة لأنه لا يزال بإمكانك إنشاء أنماط عالمية وكذلك أنماط مغلفة للمكونات. بالإضافة إلى ذلك ، لا يزال لدينا فصل بين المخاوف بخصوص CSS / SASS و HTML و JavaScript. يمكننا الاستمتاع بطريقة بسيطة لتنزيل الأنماط الضرورية فقط.

لقطة شاشة لبنية الملف في مشروع باستخدام الزاوي

رد فعل - وفاة دلالات!


يتفاعل React مع هذه الفكرة ويكتب كل HTML و CSS داخل JavaSscript. مات هدف إنشاء أنماط قابلة لإعادة الاستخدام مع تفاعل. يقوم تلقائيًا بإنشاء أسماء فئة CSS ؛ وبالتالي ، يصبح الرمز غير قابل للقراءة ويستحيل فهمه ، سواء بسبب أسماء فئة CSS وبسبب HTML غير الدلالي. من وجهة نظري ، يشبه هذا كيفية كتابة CSS و HTML في بداية الإنترنت عندما لا يهم كيف كان يبدو CSS أو HTML أثناء العمل.

تفاعل لقطة شاشة ترميز الرمز
رد فعل - أسماء فئة css غير قابلة للقراءة

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

استيقظ!


لا يسحب مطورو الواجهة الأمامية CSS! شخص ما يجب أن يقولها بصوت عال! نعم ، أعلم أن هذا هو تعميم عام وبالتالي ليس صحيحًا بنسبة 100 ٪ ، لكنني لا أحاول أن أكون صحيحًا بنسبة 100 ٪.
قبل أن أكمل ، يجب أن تعرف المزيد عني.

الديك على خلفية شروق الشمس ، صورة
استيقظ - مطورو الواجهة الأمامية لا يسحبون في CSS!

من أنا


لقد بدأت كمطور الواجهة الأمامية في أوائل عام 2007.
في بداية عام 2012 ، توقفت تمامًا عن كتابة JavaScript ، والسبب الرئيسي هو أنني أحببت CSS كثيرًا ، وكانت JavaScript أقل بكثير.

من عام 2012 حتى الوقت الحاضر ، بما أنني ركزت فقط على CSS ، فقد طورت ميزة في هذا المجال. على مر السنين ، كتبت العديد من المقالات حول CSS ، وأسست مجتمع CSS المحلي مع 5000 عضو ، وعقدت محادثات لا حصر لها في الاجتماعات والندوات والمؤتمرات.

أنا مع ميكروفون في مؤتمر ، صورة فوتوغرافية
أتحدث في ConFrontJS 2019 في وارسو ، بولندا ، لماذا أخبرك

بكل هذا؟لأنني ما زلت نوعًا من يونيكورن في بلدي وفي صناعة الويب. نعم ، أحصل على الكثير من الشكر ، ولكن هناك واحدة كبيرة ولكن! على الرغم من أن هذا يناسبني لأنني معروف جيدًا في صناعة الويب في بلدي ، إلا أنه من الصعب على الآخرين أن يصبحوا نفس الشيء لأن صناعة الويب لا تزال تحاول الحفاظ على "الاسم القديم لمطور الواجهة الأمامية" (مما يعني محاولة كتابة JavaScript و CSS من الدرجة الأولى) .

في بلدي ، أعرف أفضل مطوري Frontend. نظرًا لأنني مهتم بفهم صناعة الويب ، فأنا أسأل دائمًا مواهب الواجهة الأمامية هذه إذا كانوا يعتقدون أنهم جيدون في CSS. تستمر إجابتهم في إدهاشي - يشعر معظمهم بعدم الأمان بشأن CSS ، وهم متفاجئون دائمًا من المطورين مثلي الذين يحبون CSS.

تحتاج صناعة الويب إلى التغيير


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

أرقام 2020 خط جميل ، التوضيح

ما هي مصلحة الشركات؟


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

ما يمكن أن يكون ألقاب وظيفية جديدة؟


على مدى السنوات الثماني الماضية ، قمت بتغيير المواقف عدة مرات. فعلت ذلك لشرح قدراتي للأشخاص الذين يرون ملفي الشخصي على LinkedIn .

في البداية اتصلت بنفسي CSS Master (باسم المجتمع الذي أسسته - CSS Masters Israel ). كان من الممتع أن نرى بعد فترة وجيزة من هذا الإعلان عن العمل مع مثل هذا العنوان. أدركت أن هناك شركات تحتاج إلى مطور CSS ، ولكن لا تعرف كيفية تسميتها بشكل مناسب.

صورة لقطعة من نموذج طلب عمل ، صورة لا معنى لها

في وقت لاحق ، قمت بتغيير اسم مشاركتي عدة مرات (UI / CSS - المطور / مطور الواجهة / مهندس / مهندس معماري / خبير) ، محاولاً ملاءمة قدراتي مع اسم العمل.

لا تكن مجرد مطور CSS


في هذه الأيام لدينا عدة أنواع من المطورين المتخصصين في الجزء المرئي ، مثل CSS ، على سبيل المثال ، SVG. سأحاول تحديد هذه الأنواع هنا :

CSS Developer - هذا الاسم مخصص لمحترفي CSS من المستوى المتوسط. هؤلاء هم المطورين الذين يمكنهم أخذ التصميم وتحويله بسهولة إلى CSS.

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

بطة مطاطية صفراء مختلفة تعرض مجموعة متنوعة من المهن والرسوم التوضيحية
التنوع رائع!

مطور الرسوم المتحركة CSS - في الوقت الحاضر ، يمكننا تحسين تجربة المستخدم بدون جهد تقريبًا باستخدام الرسوم المتحركة CSS أو الرسوم المتحركة SVG ، وبالتالي تحويل مشروع جيد إلى مشروع رائع. قد يكون هذا العمل مناسبًا للشركات الكبيرة.

هذه هي الاحتياجات الأكثر شيوعًا لعام 2020 ، ولكن هناك أنواع أخرى من المطورين المتخصصين ، مثل:


قد يكون هناك المزيد - الاحتمالات لا حصر لها!

أخيرا


في هذه المقالة ، سعيت إلى رفع مستوى الوعي حول موضوع يبدو لي أنه لم يتم تناوله بعد. هدفي هو جعل صناعة الويب على المسار الصحيح.

بالإضافة إلى مقالتي ، هناك أيضًا مقالات حول هذا الموضوع من وجهات نظر أخرى:


فى النهاية


إذا أعجبك هذا المقال ، سأكون ممتنًا إذا شاركته مع الآخرين حتى تتمكن هذه الفكرة من رفع مستوى الوعي الجديد في صناعة الويب.

من أنا؟


اسمي Elad Shechter ، أنا مطور ويب متخصص في هندسة CSS و HTML. أنا أعمل في موقع Investing.com .

بلدي تغريد وموقع الويب .

أنا على خلفية جهاز العرض ، أتحدث عن المشروع ، والتصوير الفوتوغرافي

More articles:


All Articles