HTML هو الويب

ما الأمر مع HTML في الواجهة الأمامية؟ لقد تحدثت مؤخرًا مع العديد من المطورين. يبدو أن البعض لا يفهم حتى HTML. أقصد أنهم يفهمون شيئًا ما. إنهم يفهمون ما هي div وما span ، وعندما يبدو كل شيء جيدًا ويعمل بنقرة واحدة ، فهذا يكفيهم. إلى حد أن الكثير من الناس يجيبون على سؤال حول HTML: "أوه ، نعم ، أنا أفعل كل شيء في React أو Vue الآن." لكن لا يهم حقًا أن تكتب Javascript فقط. إذا كنت تقوم بتطوير مواقع ويب ، فإن HTML هو أهم شيء بالنسبة لك. هذه هي الويب.

إنه يتعلق بما يستهلكه المستخدم. هذه هي واجهة المستخدم و UX. هنا الحزمة بأكملها. بالترتيب التنازلي للأهمية: HTML و CSS والسلوك (والذي يمكن توفيره بواسطة Javascript - أو ربما لا).

أرى مشكلة في أسفل هذا الهرم التكنولوجي. أصغر قاسم مشترك على شبكة الإنترنت. الأساس. فرقة الإيقاع. Savoyards من جميع الحلويات على شبكة الإنترنت. هذا هو HTML. ويبدو لي أكثر وأكثر أن طبقة كاملة من المهندسين الأمامي لا يعرفون أو لا يفهمون التكنولوجيا الرئيسية للواجهة الأمامية.

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

ليس من الصعب تعلم HTML ، خاصة إذا كنت تعرف بالفعل أطر JavaScript. لم أفكر في ذلك ، لكنني متأكد تمامًا من أنه يوجد فقط حوالي 116 عنصرًا ، ولن تكون هناك حاجة لمعظمكم أبدًا. لماذا لا نتعلم منهم؟

أنا واحد من هؤلاء الرجال الذين يعملون على حافة النهاية الأمامية. أفعل HTML و CSS ، لذلك من السهل بالنسبة لي أن أشجع الجميع على معرفة ما أعرفه بالفعل (بالنسبة للسجل ، لا أعرف كل شيء - لا يزال لدينا الكثير من النقاش في مكتبنا حول أفضل طريقة لوضع علامة على مكون معين). ليس الأمر أن عملي أهم من عملك. إذا كتبت رمزًا يعرض شيئًا ما في المتصفح ، فهذا بالتأكيد عملك.

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

لكن إطاري يعتني بكل شيء. أنا فقط أكتب قوالب jsx »

لا. اكتب HTML الصحيح في JSX الخاص بك. يمكنك أن تفعل ذلك. لمجرد أنك تستخدم React أو Vue أو أي شيء آخر ، فلا يلزمك كتابة كل شيء باستخدام divs. غير مطلوب

"هذه المكتبة في كل مكان تضيف سمات WAI-Aria ، لذلك كل شيء على ما يرام مع إمكانية الوصول."

ممتاز. إذا كتبت HTML الصحيح ، فلن تكون هناك حاجة لمعظم هذه السمات على الإطلاق. يمكنك الحصول على مجموعة كاملة من وظائف إمكانية الوصول مجانًا ، فقط باستخدام button حقيقي بدلاً من div مع onClick أحداث onClick . مجانا إنها إمكانية الوصول والأداء وسهولة الاستخدام مجانًا. مجانا!

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

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

• تعرّف على كيفية وضع مستند بتنسيق HTML. جرّب تمرينات عقلية بسيطة عندما تنظر إلى ملصق حفل أو صفحة صحيفة - وتخيل كيف سيتم تنظيمها في HTML. إذا كان لديك وقت ، فاكتب HTML هذا. استخدم هذه المعرفة في العمل اليومي.
  
• تعد MDN مورداً رائعًا مع المدونات والبرامج التعليمية والروابط المفيدة.
  
• الوصول إلى الناس في المجتمع. اقرأ المدونات (على سبيل المثال ، منشور Andy Bell الأخير حول استخدام HTML الدلالي) وشاهد الفيديو .
  
• عندما كنت أدرس ، كان النظر إلى المصدر لا يزال مفيدًا. لقد اخترقنا هذا بشكل جماعي للأجيال الحالية والمستقبلية ، لكن يمكنني أن أبهرك بقوة "أدوات المطور" في المتصفح
  
• تعرف على كيفية عمل التكنولوجيا المساعدة على الويب
  
• انظر إلى مواصفات HTML أو حتى مجرد قائمة بعناصر HTML وأمثلة لاستخدامها.
  
• إذا كنت تعمل كفريق واحد ، ناقش الترميز. يجادل حقًا ، سيكون من الصحيح إدراج بعض العناصر في شكل table أو dl ( Description List Element ، MDN). سيكون الكثير من المرح ، أعدك.
  
• معرفة من هو أفضل خبير HTML في فريقك واطلب منهم مراجعة التعليمات البرمجية الخاصة بك. إذا كنت أنا سعيد دائمًا بالتحدث.