تحطيم البودكاست الحلقة 32: مراجعة العام 2020

في هذه الحلقة ، نلقي نظرة على عام 2020. إلى من تحدثنا في حلقاتنا هذا العام ، وماذا تعلمنا؟ دعنا نستمع إلى بعض المقاطع لمعرفة ذلك.

وتظهر الملاحظات

يمكنك العثور على جميع حلقاتنا السابقة ، بما في ذلك نسخة كاملة من كل مقابلة على podcast.smashingmagazine.com.

نراكم في 2021 الجميع!

نسخة طبق الأصل

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

إيمي هوب: لقد بدأنا مبكرًا حقًا. لذلك قبل أن يكون لدينا نوع من نظام التصميم العام ، بدأنا في التعامل مع الأشخاص الذين اعتقدنا أنهم سيكونون مساهمين مهتمين نوعًا ما. يجب أن أذكر هنا أنه كان لدينا مصمم خدمة رائع في الفريق. انضمت إلينا في ... لن أحصل على التواريخ بشكل صحيح بأي شكل من الأشكال في الوقت الحالي ، لكنني أعتقد أنها عملت معنا طوال عام 2018 بأكمله ، واسمها Ignacia. لقد قامت للتو بعمل رائع يتمثل في التنقل وإشراك الناس. لذا كان أحد الأشياء التي فعلتها هو تحديد كل الأنماط المختلفة في الحكومة وجميع الأنواع المختلفة من تلك الأنماط. لذا الخروج وقول نوعًا ما ، "حسنًا. هناك 10 طرق مختلفة لطلب عنوان في الحكومة. دعونا نلقي نظرة عليها جميعًا معًا ونقرر أيها نعتقد أنه الأنسب. كيف يمكننا دمجها في واحدة؟ "

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

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

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

درو: انضم إلينا ستيفاني ستيماك من Microsoft وآرون جوستافسون للحديث عن اعتماد Edge لـ Chromium كمحرك عرض خاص بها. سألت آرون عن المشهد التنافسي بين المتصفحات والمكان الذي تتحد فيه المتصفحات المتعددة على نفس محرك العرض من شأنه القضاء على تلك المنافسة الصحية وبالتالي يكون سيئًا للويب المفتوح.

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

آرون جوستافسون: لكني أعتقد أن الشيء المختلف الآن هو أنه في حروب المستعرض الأصلية ، كان لديك كل هذه المحركات المسجلة الملكية ، وكان الجميع نوعًا ما في لعبة فردية من حيث محاولة شحن ميزات منصة جديدة و ميزات JavaScript الجديدة أو في حالة الهندسة العكسية لـ JavaScript من Microsoft من أجل إنشاء JScript ومحاولة معرفة كيفية ملاءمتها جميعًا معًا.

آرون جوستافسون: لكن الآن لدينا القدرة على العمل معًا في الواقع في مشاريع مفتوحة المصدر وما زلنا نمتلك الحوار وما زلت ... لا أعرف. القتال ليس الكلمة الصحيحة ، ولكن لإجراء مناقشات جادة حول تأثير الأساليب المختلفة والاختلاف مع بعضها البعض والعمل حقًا على جعل المواصفات جيدة حقًا ولديك أيضًا مناهج منافسة للشفرة الأساسية في سياق ، على سبيل المثال Chromium مشروع أو WebKit أو شيء من هذا القبيل أو Missoula في مساحة Firefox.

آرون جوستافسون: نعم. من ناحية ، فقدنا محرك عرض آخر ، وشعرت بنفس الألم عندما قررت الأوبرا الذهاب إلى Chromium. لكنني أشعر بالارتياح إلى حد ما لكوني داخل Microsoft ورؤية مدى التزامنا بالمشاركة الفعلية في مشروع Chromium بطريقة هادفة وليس مجرد الجلوس بعيدًا وقبول كل ما يأتي من Chromium ، ولكن في الواقع نوع من فحص ما يجري المنصة والمشاركة في ذلك… نعم.

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

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

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

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

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

درو: في مارس ، تحدثت إلى إدواردو بوكاس حول أداة مفتوحة المصدر تسمى Sourcebit تجمع المحتوى من مصادر مختلفة وتجعله متاحًا لمولد الموقع الثابت الخاص بك. سألت إدواردو عما إذا كان هذا يمكن أن يحسن تجربة المستخدم للترخيص لـ SSG من خلال تمكين التكامل مع أدوات مثل CMS مقطوعة الرأس.

إدواردو بوكاس: بالضبط. نعم. الطريقة التي يمكن بها ... أرى نوعًا ما طريقتين مختلفتين لاستخدام الأداة التي يمكن أن تساعد المطورين. الأول هو جعل Sourcebit جزءًا من روتين النشر الخاص بك. لذلك إذا كنت تستخدم نظامًا أساسيًا للاستضافة ، مثل Netlify ، على سبيل المثال ، وقمت بتهيئة أوامر النشر الخاصة بك ، لا أعرف ، Hugo build ، هل هو أمر الإنشاء لـ Hugo أو شيء ما ، نوع الأمر الذي يولد الملفات الثابتة لـ Hugo. سيكون لديك أيضًا أمر آخر كجزء من هذا الروتين. سيكون هذا شيئًا مثل جلب Sourcebit. لذلك في وقت الإنشاء ، ستعمل Sourcebit على سحب جميع البيانات الأخرى ، وإنشاء جميع الملفات التي يحتاجها Hugo ، وبعد ذلك سيستخدم النشر بالكامل هذه الملفات بالفعل وينشر كل المحتوى الذي يأتي من CMS.

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

إدواردو بوكاس: ما يعنيه ذلك بالنسبة للمطور الذي يعمل محليًا هو أنه يمكنك تشغيل نافذة CMS بجوار موقع Hugo محليًا ، ومن ثم يمكنك رؤية التغييرات التي تحدث في الوقت الفعلي. يمكنك تغيير شيء ما على نظام إدارة المحتوى ، ومن ثم يمكنك رؤية هذا التغيير ينعكس على الموقع المحلي ، والذي أجده مفيدًا للغاية. فهذان نوعان من الطريقتين اللتين يمكنك استخدام Sourcebit فيهما.

درو: تحسين التحويل كان موضوع اليوم. عندما تحدثت إلى خبير البث الصوتي والمستشار بول بواج. تحدثنا عن بعض الأساليب التي تستخدمها المواقع لتحويل الزوار إلى عملاء. لكنني أردت أن أسأل بول كيف تقيس تأثير التغييرات التي تجريها. أوضح بول.

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

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

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

درو: في أبريل ، تحدثت مع Laura Kalbag من Better Blocker حول الخصوصية عبر الإنترنت. تحدثنا عن الحدود المتضائلة باستمرار بين ما يعتبر عامًا وما هو خاص وكيف أن الأشياء التي نعتبرها خاصة قد لا تُرى بهذه الطريقة من قبل الشركات التي نعهد إليها ببياناتنا. هنا لورا.

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

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

درو: من الواقعي ، أليس كذلك ، التفكير في أن التكنولوجيا تتخذ هذه القرارات نيابةً عنا ، والتي تؤثر في الواقع على الأشخاص الذين يحتمل أن يكونوا في هذا المثال وقتًا حساسًا أو ضعيفًا؟

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

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

راشيل آن درو: بسرعة كبيرة جدًا ، بمجرد أن أدركنا أنه سيتعين علينا تأجيل سان فرانسيسكو ، من الواضح أن لدينا ورش عمل ، أقوم أنا و Vitaly بتشغيل ورش عمل في smash and comp ، وتم بيعهما في سان فرانسيسكو ، كلاهما ورش العمل لدينا. من الواضح أن لدينا الكثير من الأشخاص الآخرين الذين يأتون ويديرون ورش عمل لنا ، الأشخاص الذين عملنا معهم لفترة طويلة ، وكانوا يجدون أن جميع ورش العمل الخاصة بهم ، وبالنسبة لأولئك منا ينظمون ورش عمل ، لديهم بالفعل جزء أساسي من دخلنا.

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

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

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

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

درو: مع بدء إجهاد Zoom وبدأ العالم في التكيف مع ما كان يُطلق عليه سريعًا الوضع الطبيعي الجديد ، تحدثت إلى Phil Smith حول كيف يمكن للتكنولوجيا أن تساعدنا في الاستجابة لمواقف مثل COVID-19. بناء تطبيق React Native ، CardMedic في 10 أيام فقط. سألت فيل كيف يعمل على تحقيق التوازن بين اختيار أفضل تقنية للوظيفة مقابل التقنيات التي يعرفها والتي يمكنه العمل فيها بسرعة.

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

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

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

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

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

درو: والمسافة الطويلة هي ما حصلنا عليه. شيء آخر موجود على المدى الطويل هو دروبال. في يونيو ، تحدثت مع أنجي بايرون عن التغييرات التي طرأت على دروبال 9. 20 عامًا منذ إصدارها الأول ، قطعت دروبال شوطًا طويلاً. سألت Angie كيف كانت عملية ترقية موقع Drupal موجود عند الانتقال إلى Drupal 9 وما إذا كان من المحتمل أن يمثل عبئًا كبيرًا على أولئك الذين لديهم مواقع تعمل لفترة طويلة.

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

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

أنجي بايرون: من دروبال 8 إلى 9 ، أود أن أقول إن هذا الجزء مغطى جيدًا. إذا كنت قادمًا من إصدار سابق من دروبال ، لنقل دروبال 7 أو أقل إلى دروبال 9 ، فإن ذلك يبدو أصعب قليلاً. من بين التغييرات التي أجريناها في دروبال 8 ، حيث على سبيل المثال ، انتقلنا بالكامل إلى لغة PHP الموجهة للكائنات ، وبدأنا في استخدام أنماط التصميم التي تم العثور عليها في مشروع برمجي آخر ، وهو أمر ذكي حقًا للقيام به من الناحية المعمارية ، ولكنه كذلك يعني أنه إذا كان لديك الكثير من الرموز المخصصة في حياتك القديمة ، في دروبال 9 ، فستحتاج إلى إيجاد بدائل لذلك.

أنجي بايرون: لذا فإن Acquia هو منتج وتطوير يسمى Acquia Migration Accelerator والذي يهدف إلى حل هذه المشكلة ، حيث نقوم بإنشاء تطبيق جميل محدد بواسطة React ، والذي يقرأ في بياناتك القديمة Drupal 7 ، وينشئ لك بيانات Drupal 8 مكافئة جنبًا إلى جنب مع جميع الوحدات التي ستحتاج إليها تلك الخريطة لوحدات دروبال 7 القديمة الخاصة بك حيثما كان ذلك ممكنًا لمحاولة تسريع هذه العملية قليلاً لأننا نريد التأكد من أن كل من يستخدم الإصدارات الأقدم يمكنه الاستمرار في الانتقال إلى نظام عالمي جديد ، حيث يكون الجميع على نفس الإصدار ، وكلنا نعمل معًا.

أنجي بايرون: ثم بالإضافة إلى ذلك ، قمنا أيضًا بتوسيع دروبال 7 ... مجتمع المصدر المفتوح لدروبال ، نهاية حياتهم في دروبال 7 اعتبارًا من نوفمبر من العام المقبل. في الوقت الحالي ، على أي حال ، نحتاج إلى مناقشة ما إذا كان COVID يؤثر على ذلك أم لا. ولكن هناك عددًا من الشركات المختلفة ، وشركة Acquia واحدة منها تقدم دعمًا ممتدًا لـ Drupal 7 بعد ذلك ، حتى عام 2024 على الأقل. لذا فإن هذا النوع يجعل الأشخاص الذين لديهم ترقية سهلة لديهم عام ونصف لإنجازها ، ويكون لدى الأشخاص ترقية أقل سهولة ، ويحتمل أن يكون لديهم ثلاث سنوات ونصف لإنجازها أو أكثر إذا احتاجوا إلى ذلك ، ونحاول جاهدًا أن نجعل من الممكن للجميع الانتقال ثم بناء أدوات مثل Acquia Migrate Accelerator للمساعدة في تسريع العملية.

درو: كان موقع Learning React موضوع حوار مع Mina Markham. كنت أنا ومينا في وضع يتيح لنا تعلم React لأول مرة. بالتفكير في مقدار العبء الذي تضعه أطر عمل مثل React على المتصفح ، سألت مينا إذا كان وضع قدر كبير من التحكم في أيدي العميل خطأً.

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

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

درو: لقد تحدثت إلى آندي بيل عن CUBE CSS ، وهي منهجية تصميم بأسلوب BEM و SMACSS و OOCSS. تحاول العديد من أساليب CSS العمل ضد الخصائص الطبيعية لـ CSS مثل المتتالية. CUBE يحتضن هذا السلوك كثيرًا. هذا آندي.

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

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

آندي بيل: لدينا الآن أشياء مثل Grid و Flexbox تجعل ذلك أكثر قابلية للتحقيق ، ويمكنك بشكل أساسي وضع كل ما تريد داخل التخطيط الهيكلي. لا يهم. ثم يجب أن تتصرف المكونات ، في هذه المرحلة ، بالطريقة التي تريدها أن تتصرف بها ، مع أو بدون استعلامات الحاوية.

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

مارسي ساتون: نعم. أود أن أقول أن أكبر جزء من ذلك هو التوجيه من جانب العميل. لذلك يستخدم Gatsby الآن retreader تحت الغطاء. انها مجرد نوع من التنفيذ الخاص بها. لكن هذه هي القطعة التي عندما تقوم بتحميل موقعك الثابت لأول مرة ، هناك ملفات HTML هناك. لذلك إذا قام المستخدم بإيقاف تشغيل JavaScript لسبب ما ، فلا يزال موقعك موجودًا ، ولا يزال يحتوي على محتوى. ولكن إذا تم تمكين JavaScript ، فهذا عندما تحدث خطوة الترطيب هذه ، حيث عندما تستخدم الروابط في موقع Gatsby الخاص بك ، فسيتم جلب الموارد مسبقًا من تلك الصفحة. لذلك سوف يتم تحميله بشكل أسرع. لذلك يتم تمكين كل ذلك مع طبقة JavaScript التي يمنحك إياها Gatsby.

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

درو: عندما أفكر في كيفية عمل منشئ الموقع الثابت عادةً ، أفكر في المحتوى في ملفات التخفيضات المحتملة ويعمل المولد عبر هذا المحتوى ويدمجه مع القوالب وينشئ عشرات ومئات وآلاف من ملفات HTML ، وهي ملفات صفحات موقع الويب الخاص بك. عندما أفكر في موقع أو تطبيق React ، أفكر أكثر في تجربة الصفحة الواحدة ، حيث يتم إنشاء الواجهات بواسطة React on the fly. إذن أنت تقول أن غاتسبي يفعل كلا الأمرين؟ هل تقوم بإنشاء جميع الصفحات وتحسينها أيضًا باستخدام JavaScript؟

مارسي ساتون: نعم. سيستخدم Gatsby Node.js في وقت الإنشاء ، وسيتخطى مكونات React الخاصة بك ويجمعها في ملفات HTML ، والتي بصراحة ، في المرة الأولى التي نظرت فيها إلى Gatsby ، لن أوقف تشغيل JavaScript وكان مثل ، "حسنًا ، هل هناك صفحات أخرى هنا؟ ما هذا؟" كنت سعيدًا جدًا لأن غاتسبي يعمل بهذه الطريقة افتراضيًا. ستنشئ ملفات مبنية من مكونات React الخاصة بك ، وهو أمر رائع.

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

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

درو: أثناء حديثي مع كريس فرديناندي في يوليو ، سألت عما إذا كانت أفضل الممارسات الحديثة سيئة للويب. Chris backs a movement known as the Lean Web, and I asked him what that entailed. Here's Chris.

Chris Ferdinandi: When I look at the way we build for the web today, it feels a little bit like a bloated over-engineered mess. لقد توصلت إلى الاعتقاد بأن الكثير مما نعتقد أنه أفضل الممارسات اليوم قد يؤدي في الواقع إلى جعل الويب أسوأ. The Lean Web is an approach to web development that is focused on simplicity, on performance, and the developer experience over… I'm sorry, not the developer experience, the user experience rather, over the developer experience and the ease of building things from a team perspective, which is what I think where we put a lot of focus today.

Chris Ferdinandi: As we'll probably get into in our conversation, I've actually come to find that a lot of these things we think of as improving the developer experience do so for a subset of developers but not necessarily everybody who's working on the thing you're building. So there's a whole bunch of kind of issues with that too that we can kind of dig into. ولكن في الحقيقة ، تتمحور Lean Web حول التركيز على البساطة والأداء للمستخدم وتحديد الأولويات حقًا أو التركيز على الأشخاص الذين يستخدمون الأشياء التي نصنعها بدلاً من الأشخاص الذين يصنعونها.

Drew: In August, Chris Coyier joined us to talk about all things serverless. I asked him what sort of the tasks they were putting serverless to over at CodePen?

Chris Coyier: Well, there's a whole bunch of things. One of them is, I think, hopefully fairly obvious is, I need… The point of CodePen is that you write each HTML, CSS, and JavaScript in the browser, and it renders it in front of you, right? ولكن يمكنك أيضًا اختيار لغات ما قبل المعالج. لنفترض أنك تحب ساس. تقوم بتشغيل Sass في CSS ، وتكتب Sass. حسنًا ، يجب أن يقوم شيء ما بمعالجة Sass. هذه الأيام ، ساس مكتوب بلغة دارت أو شيء من هذا القبيل. Theoretically, you could do that in the client. لكن هذه المكتبات التي تقوم بمعالجة مسبقة كبيرة جدًا. لا أعتقد أنني أريد أن أشحن مكتبة Sass بأكملها إليك ، فقط لتشغيل هذا الشيء. I don't want to. That's not the right architecture for this necessarily. Maybe it is down the road. I mean, we could talk about offline crap, yada, yada, web workers.

Chris Coyier: There's a million architectural things we could do. ولكن إليكم كيف تعمل الآن ، هل هناك لامدا. يعالج ساس. لديها وظيفة واحدة صغيرة ، صغيرة ، صغيرة ، صغيرة. You send it this blob of Sass, and it sends you stuff back, which is the processed CSS, maybe a site map, whatever. It has one tiny little job, and we probably pay for that lambda like four cents or something. Because lambdas are just incredibly cheap, and you can hammer it too. لا داعي للقلق بشأن الحجم. You just hit that thing as much as you want, and your bill will be astonishingly cheap.

Chris Coyier: There is moments where serverless starts to cross that line of being too expensive. I don't know what that is. I'm not that master of stuff like that. But generally, any serverless stuff we do, we basically all nearly count as free, because it's that cheap. ولكن هناك واحد لساس. هناك واحد مقابل أقل. هناك واحد لبابل. هناك واحد لـ TypeScript. هناك واحد من أجل ... كل تلك حيوانات لامبدا فردية نديرها. Here's some code, give it to the lambda. It comes back, and we do whatever we're going to do with it. لكننا نستخدمه لأكثر من ذلك بكثير ، حتى في الآونة الأخيرة.

Chris Coyier: Here's an example. كل قلم على CodePen لديه لقطة شاشة. هذا رائع نوعًا ما ، أليس كذلك؟ So the people make a thing, and then we need a PNG or a JPEG, or something of it, so that we can… that way when you tweet it, you get the little preview of it. إذا قمت بمشاركتها في Slack ، فستحصل على معاينة صغيرة لها. We use it on the website itself to render… Instead of an iframe, if we could detect that the Pen isn't animated, because an iframe's image is much lighter, so why not use the image? إنه ليس متحركًا على أي حال. مجرد أداء مكاسب من هذا القبيل.

Chris Coyier: So each of those screenshots has a URL to it, obviously. We've architected it so that that URL is actually a serverless function. إنه عامل. So if that URL gets hit, we can really quickly check if we've already taken that screenshot or not. That's actually enabled by CloudFlare Workers, because CloudFlare Workers are not just a serverless function, but they have a data store too. They have this thing called key-value store. So the ID of that, we can just check really quick, and it'll be, “True or false, do you have it or not?”

Chris Coyier: If it's got it, it serves it, and it serves it over CloudFlare, which is super fast to begin with and then gives you all this ability too because it's an image CDN, you can say, “Well, serve it in the optimal format. تخدمها مثل هذه الأبعاد ". لست مضطرًا لجعل الصورة بهذه الأبعاد. You just put the dimensions in the URL, and it comes back as that size, magically.

Drew: I talked to Next.js co-creator, Guillermo Rauch about the features on offer in Next.js and asked about its automated code splitting functionality. As the size of our JavaScript bundles can have quite an impact on performance, I was interested to know if Next had ways to tackle that. Here's Guillermo.

Guillermo Rauch: Yeah. Your observation is 100% right. So one of the biggest things with the web and one of the biggest weights on the web is JavaScript. Just like different materials have different densities and weights, irrespective of the actual physical volume, JavaScript tends to be a very dense, heavy element. Even small amounts of JavaScript compared to, for example, images that can be processed asynchronously and off the main thread, JavaScript tends to be particularly bothersome.

Guillermo Rauch: So Next.js has invested a tremendous amount of effort into automatically optimizing your bundles. So the first one that was my first intuition when I first sort of came up with the idea for Next.js was, okay, you're going to define, for example, 10 routes. In the Next.js world you create a pages directory, and you drop your files in there, index.js, about.js, settings.js, dashboard.js, terms-of-service.js, signup.js, login.js. تصبح هذه نقاط دخول لتطبيقك يمكنك مشاركتها عبر جميع أنواع الوسائط.

Guillermo Rauch: When you enter those, we want to give you JS that is relevant for that page, first and foremost, and then perhaps a common bundle so that subsequent navigations within the system are very snappy. Next.js أيضًا ، وهو لطيف جدًا جدًا ، يقوم تلقائيًا بجلب باقي الصفحات المتصلة بنقطة الدخول هذه مسبقًا ، بحيث يبدو وكأنه تطبيق من صفحة واحدة. So a lot of people say like, “Why not just use Create React app if I know that I have maybe a couple routes?” I always tell them, “Well, look. You can define those as pages, and because Next.js will automatically pre-fetch ones that are connected, you end up getting your single-page application, but it's better optimized with regards to that initial paint, that initial entry point.”

Drew: In September, I had the pleasure of talking to Cassie Evans about SVG animation. We talked about the approachability of SVG for developers who are already familiar with HTML. Here's Cassie.

Cassie Evans: I think that that's what I love the most about SVG is I'm really into creative coding and also teaching people, and I found that teaching people who are more of a creative leaning, they sometimes get a little thrown off when you immediately jump in with JavaScript or Python or something like that for creative coding. But without fail, I've managed to get anyone that I taught on board with SVG because there some really approachable entry points because it does look like HTML.

Cassie Evans: So you can give someone with an understanding of HTML and how to build websites SVG, and it looks the same, but it's the graphics instead of documents, and then you can animate that with CSS to start off with, which is also a little bit more comfortable, and then you can kind of progress to animating it with JavaScript. So it's a really good learning curve.

Drew: Of course, it can be dynamic. It's not just a case of creating motion. You can actually make the properties of it dynamic. So one of the interesting things I've seen SVG used for, and it's a grand term, but data visualization, dataviz, and drawing graphs and charts and of course things like dashboards that we seem to have everywhere these days. SVG is sort of perfect for that, isn't it?

Cassie Evans: Yes, definitely. SVG is great for dataviz. All the way from kind of small dataviz up to D3 which is very well known dataviz library that uses SVG under the hood. But you could also just, if you've got a little bit of data that you wanted to show on a web page, you could create a chart in a graphics editing program, and then you could just use JavaScript to change those values and kind of change how your graph looks. So you don't have to go all in with a massive database library. You can kind of just start off small.

Drew: The Jamstack framework, RedwoodJS was the topic of conversation with Anthony Campolo. I asked Anthony what it meant to be a full-stack Jamstack framework in practical terms.

Anthony Campolo: Yeah, it's pushing the boundaries of what a Jamstack application can be. So by calling it full-stack Jamstack, it's about, how do we go beyond just the front end to having the same sort of deployment paradigm of just get pushed, getting your whole code deployed? How do we get that but also with our back end and have it all connected?

Drew: Vue.js version three was released in October, and I caught up with Natalia Tepluhina from the Vue core team. Discussing the new version, I was curious if the major version bump was just a result of a few backward incompatible modifications or if this was a very clear revisiting of Vue to make deeper changes to the framework.

Natalia Tepluhina: No. I think it was an idea to create a new version due to a few very important things. لذلك أولاً وقبل كل شيء ، كان هناك دافع لتغيير التفاعل. Previous one was built upon Object.defineProperty, and it had a few caveats. They're all documented, but still, even if you document something that people shouldn't do, they will do it anyway, and you would need to point them to the documentation. Nobody reads documentation, by the way. For some reason, it just happens. Until you point people out, it doesn't exist in docs, it does. لكن حسنا. سوف نعلمك على أي حال.

Natalia Tepluhina: So reactivity was one of the things. Performance was the next. Vue 2 still had and has not the worst performance, but we had a few ideas about how to make Vue faster, and also, there was one pain point for a particular part of our, let's say audience, people that use Vue. كان TypeScript. Vue 2 internally was written in Flow, which is still strongly typed one, but typing with TypeScript were a real nightmare especially if you were working with our state management Vuex.

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

درو: بعد ذلك غوصنا في TypeScript مع Stefan Baumgartner لمعرفة كيف يمكن أن تساعدنا في كتابة كود أفضل مع عدد أقل من الأخطاء. من خلال ملاحظة اتجاه المؤسسات إلى نقل أساس الكود الخاص بها بالكامل إلى JavaScript ، سألت ستيفان عما إذا كانت TypeScript هي شيء ستستفيد الفرق الأكبر منه أكثر من الأفراد.

ستيفان بومغارتنر: أنا حاليًا في نفس الفترة الانتقالية. لذلك لدينا الكثير من مطوري Java و C ++ الذين سيكتبون الكثير من JavaScript في المستقبل. يمكن أن يكون TypeScript نوعًا من الدليل لتلك المناطق المخيفة من لغة البرمجة الجديدة. تحتوي JavaScript على الكثير من المراوغات ، والكثير من التاريخ ، والكثير من الأحكام المسبقة إذا كنت من لغة برمجة مختلفة. لذلك يمكن أن يكون TypeScript دليلاً لأن هناك بعض المفاهيم التي تعرفها في نظام الكتابة.

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

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

درو: في تشرين الثاني (نوفمبر) ، تحدثت مع David Darnes حول مولد الموقع الثابت ، Eleventy. لقد تحدثنا عن القوالب وعدد مولدات المواقع الثابتة التي لها رأي كبير حول نوع القوالب التي يجب عليك استخدامها. تساءلت عما إذا كان لدى إيليفنتي نفس النوع من المعتقدات القوية. هنا ديف.

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

ديفيد دارنز: بالنسبة لي ، لقد ذهبت مباشرة إلى nunjucks لأن nunjucks هي لغة القوالب الافتراضية داخل Eleventy. هذا يعني أنه يمكنني استخدام امتداد dot HTML وتركه كما هو. الآن ، سأربك الناس أكثر وأقول ، "يمكنك تسمية ذلك كما تريد على أي حال. يمكنك الحصول على متعة حقيقية معها ". ولكن يمكنك استخدام المقاود. أعتقد أنه يمكنك فقط استخدام قوالب جافا سكريبت العادية والتكرار من خلالها على هذا النحو. المقود مشهور جدا و سائل كذلك. لا يمكنني التفكير في كل منهم من أعلى رأسي ، ولكن إذا قمت بإعداده بالكامل في التكوين ، يمكنك فقط اختيار ما تريده.

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

درو: لقد تحدثت مع Leslie Cohn-Wein حول كيفية استخدام Netlify لمنصتها الخاصة لبناء Netlify وكيف تصبح وظيفة Deploy Preview منصة انطلاق فعالة لتغييرات الواجهة الأمامية.

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

ليزلي كوهن-وين: أحد الأشياء الرائعة الأخرى التي أعددناها هو أن لدينا بالفعل موقعين مختلفين على Netlify يتم سحبهما من نفس المستودع حيث يعيش تطبيقنا. لذلك لدينا كل من التطبيق لدينا. لدينا مثال من Storybook يحتوي على نوع من مكونات واجهة المستخدم الخاصة بنا للتطبيق. لذلك لدينا تطبيقنا نفسه. لدينا مكونات Storybook UI ، ولدينا أساسًا موقع Netlify يعرض واجهة مستخدم Storybook الخاصة بنا ، ومن ثم لدينا أيضًا موقعًا ثالثًا يدير محلل حزمة webpack. لذلك فهي نوع من واجهة المستخدم المرئية التي تمنحك تصورًا لخريطة متفرعة لجميع حزم التطبيقات ، ويمكننا نوعًا ما قياس حجمها ، وهذا مجرد تذكير لنا للتحقق مرة أخرى من كل مرة يتم فيها نشر التطبيق في الخارج ، يمكننا التحقق والتأكد من أننا لا نفعل أي شيء غريب مع حجم الحزمة لدينا هناك.

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

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

كريس مورفي: أعتقد أن هذا سؤال جيد حقًا ، درو ، وأعتقد أن الإجابة عليه تعتمد. أعتقد أن ذلك يعتمد على هذا الشخص ، ويعتمد على حجم الشركة. إذا ألقيت نظرة على Hiut Denim ، واستخدمت Hiut كثيرًا في تدريسي ، فهذا مثال جيد حقًا على شركة تقوم بعمل جيد ، وهذا هو نوع الجينز الضيق. أعتقد أنك إذا نظرت إلى ديفيد السابق ... ديفيد وكلير ، لأنهما شراكة. إذا نظرت إلى شركة David Hieatt و Clare Hieatt السابقة ، والتي كانت Howies ، فقد نمت تلك الشركة بشكل كبير ، كان هناك الكثير من الأشخاص المعنيين.

كريس مورفي: بمجرد أن يبدأ المقياس في التسلل ، يصبح من الصعب للغاية مراقبة جميع نقاط الاتصال الصغيرة المهمة في رحلة العميل. أعتقد أنه من المعقول حقًا أنه عندما غادروا Howies ، لأن Howies تم شراؤها بواسطة… الأمر معقد. اذهب لقراءتها على الانترنت لكنها كانت Timberland ، وتم شراء Timberland ، وهناك كل هذه القصة.

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

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

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

درو: كانت GraphQL موضوع الحلقة الأخيرة الكاملة لهذا العام ، وقد أجريت محادثة مع Eve Porcello وسألت عن المكان المناسب لـ GraphQL في حزمة التطوير.

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

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