ما تعلمته عن تطوير الواجهة الأمامية من عمر 12 إلى 22 عامًا

الصورة من تيدي كيلي على Unsplash

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

وصبي ، كان الغوص.

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

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

عمره 12

اسمحوا لي أن تعيين مكان الحادث. كان عام 2007. قد قدم ستيف جوبز للتو iPhone. الجميع كان يستخدم MSN Messenger. لا أحد يحب ويندوز فيستا. كانت هذه أشياء أتذكرها ، لكنني لا أتذكر عندما قررت بالضبط إنشاء موقع على شبكة الإنترنت.

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

موقع الويب الأول الخاص بي - رحلة من ألف خطوة ... تبدأ مع خوابير وأدوات فلاش؟

كنت مخطئا. كان صعبا. لم يكن لدي أي فكرة عما كنت أفعله.

في مرحلة ما ، لم أستطع حتى معرفة كيفية استخدام علامة
، والتي تنشئ فاصل أسطر. لقد كنت مرتبكًا بسبب عدم ظهور فاصل أسطر منتظم في الشفرة في صفحة الويب. لقد حاولت استخدام العلامات

التي تنشئ فقرات ، لكنني لم أفهم مفهوم الالتفاف. حاولت حتى إعداد جدول فقط لبدء خط جديد.

ومما زاد الطين بلة ، على الرغم من كل هذا العمل الشاق ، كان لا يزال البشعة (حتى 2000s). أتذكر أن زملائي في الفصل يسخرون منه عندما شاركت الرابط معهم عبر MSN Messenger. ثم مرة أخرى ، هل يمكن أن ألومهم؟ كان لديه كل فظائع الويب 1.0: gif ، الخيام ، الخلفيات سيئة البلاط ، فلاش الحاجيات ... سمها ما شئت. لقد شعرت بالإحباط. وهكذا ، تعلمت الدرس الأول.

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

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

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

إذا كان بإمكان شخص آخر فعل ذلك ، فبإمكانه

في مكان ما على طول الطريق ، توقف زملائي عن السخرية مني.

عرض المصدر. كلما رأيت شيئًا رائعًا على أحد مواقع الويب ، اسأل نفسك عما إذا كان بإمكانك إعادة إنتاجه. هل يمكن أن تفعل ذلك مع CSS فقط؟ جافا سكريبت؟ إذا لم يكن كذلك ، فانقر بزر الماوس الأيمن فوقها> انقر فوق "فحص" (Chrome) أو أدوات> Web Developer> Inspector (Firefox) وحاول إجراء هندسة عكسية للرمز. أضف إشارة مرجعية أو احتفظ بقائمة من التأثيرات الرائعة التي ترغب في تجربتها يومًا ما.

العمر 14 سنة

قبل Snapchat و Instagram ، كان لدى الأطفال مدونات. كان كل أصدقائي واحد. كان الكثير منهم سعداء بتخصيص مدوناتهم بموضوعات مميزة. ولكن لا سيري ، وليس لي. لا لا

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

حصلت حقا في المشارب

وهكذا بدأت عملي الحقيقي في HTML. كان كل موضوع مستند HTML من صفحة واحدة مع CSS مضمن. باستخدام العلامات الزائفة مثل <$ BlogItemTitle $> ، يمكنني التحكم في كيفية ومكان كل عنصر. سيتم استبدال العلامات الزائفة لاحقًا بالمحتوى الفعلي بواسطة مزود الخدمة. أخيرًا ، كنت خالية من قيود محرري WYSIWYG!

طويل جدا ، tripod.com!

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

موقع التمرير الأفقي ، منفعل جدا!

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

لقد كان سطحًا تفاعليًا حيًا.

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

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

16 عاما

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

يكبرون بسرعة

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

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

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

بعمر 18 سنة

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

اتضح ، كنت مخطئا. ولكن مهلا ، بحلول ذلك الوقت ، لم أكن أترك نقص الخبرة أو المؤهلات يمنعني.

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

قضيت أيامًا على Google و StackOverflow ، أسأل مئات من الأسئلة الأساسية مثل "كيف أقوم بإنشاء حقل نصي" أو "كيف أقوم بعمل زر". قضيت أسابيع في ضرب رأسي على لوحة المفاتيح عبر NullPointerExceptions. على بشرة أسناني ، تمكنت من إخراج شيء لائق في منتصف الطريق.

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

سوف يستغرق الأمر عدة سنوات حتى قرأت حول كيفية كتابة رمز أمامي قابل للتطوير ونظيف. ولكن عندما فعلت ، فهمت سبب أهميته.

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

عمري 20 سنه

في يونيو 2016 ، نشرت تطبيقًا على متجر Google Play. إنه يساعد الطلاب على التعلم عن الفيزياء ، وهو موضوع أحببته دائمًا. في اليوم الأول ، كان لديه 3 تنزيلات. في اليوم الثاني ، كان عندها 5. في اليوم الثالث ، كان بها 1000. لم ألاحظ ذلك في البداية ، لكن الأرقام استمرت في النمو. في الشهر الأول ، تلقى 7000 التنزيلات. بحلول شهر سبتمبر ، نمت عمليات التثبيت الشهرية إلى 15000.

ماذا؟ لم أقم بأي تسويق على الإطلاق.

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

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

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

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

22 سنة

واصلت استكشاف الأفكار والتقنيات الجديدة ، والعمل في مشاريع شعرت بها. بعض هذه كانت صعبة للغاية ، لكنني تعلمت الاستفادة من ما أعرفه. تطوير الواجهة الأمامية مليء بالمهارات القابلة للنقل.

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

أصبح نظام Android الآن متعة للعمل. تم الاعتناء بالعديد من نقاط الألم ، ويسعد Kotlin الكتابة. تعمل بعض أفضل العقول في العالم على جعل تطوير الواجهة الأمامية للهاتف المحمول أفضل ، باستخدام React Native و Flutter وغيرها الكثير.

إنه وقت رائع أن تكون مطورًا متقدمًا.

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

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

لقد مرت 10 سنوات رائعة ، ولا يمكنني الانتظار حتى الآن.

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

أحب هذه القصة؟ أحب أن أتواصل!
قل مرحباً على Twitter أو LinkedIn أو راجع موقع الويب الخاص بي.