لقد صممت تطبيقًا يجعل تعلم الخوارزميات وهياكل البيانات أكثر متعة

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

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

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

أدخل CS-Playground-React ، وهي عبارة عن صندوق رمل جافا سكريبت بسيط في المتصفح لتعلم وممارسة الخوارزميات وهياكل البيانات.

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

اسمحوا لي أن أقر صراحة أن هذا التطبيق لا شيء مبتكر. (أعلم أنك كنت تفكر في ذلك!) هناك الكثير من التطبيقات التي تعلم مهارات مماثلة وتمنحك القدرة على كتابة وتشغيل التعليمات البرمجية مباشرة في متصفحك.

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

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

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

إذا كنت مهتمًا بالكود ، فلا مزيد من البحث.

الباقي هو كل الأشياء المملة حول لماذا وكيف :-)

لماذا بنيت هذا

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

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

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

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

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

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

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

فرز الفقاعات ، وفرز التحديد ، وفرز الإدراج ، وفرز الدمج ، والفرز السريع ، وفرز الكومة ، والمكدسات ، وقوائم الانتظار ، والقوائم المرتبطة ، وجداول التجزئة ، وأشجار البحث الثنائية. Phwewf ...

لقد شعرت بالخوف الشديد من هذه المجموعة من المشاكل ، وكنت أؤجل معالجتها لبعض الوقت.

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

مع ذلك ، مع مرور الوقت ، بدأت بعض المفاهيم في التراجع. ولكن كانت هناك مشكلتان:

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

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

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

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

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

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

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

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

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

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

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

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

Tech Stack & المأجورون

إذا كنت مهتمًا ، فقد صممت هذا التطبيق باستخدام React & React-Redux (على الرغم من أن الإصدار الأول كان Vanilla JS و CSS و HTML). كما أنه يستخدم CodeMirror و React-Codemirror2 لتضمين محرر في المتصفح (ملاحظة: لم يعد يتم الاحتفاظ بـ React-CodeMirror الأصلي ولا يعمل بشكل جيد مع الإصدارات الأحدث من React ، لذا اذهب ، امنح مستودع Scniro نجمًا على GitHub للاختيار حتى الركود!).

وحدة تحكم وهمية

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

الكود المستمر

أردت أن أجعل هذا التطبيق سهل الاستخدام للغاية. لذلك ، بدلاً من تنفيذ قاعدة بيانات ومطالبة المستخدمين بتسجيل الدخول ، اخترت طريقة أبسط لحفظ التقدم. يدير Redux حالة التطبيق أثناء كل جلسة ، وأنا أستخدمه localStorageلاستمرار التعليمات البرمجية عبر الجلسات. يسترد التطبيق هذه الحالة المحفوظة في زيارتك القادمة ، ويعيد ترطيب متجر Redux معها. بهذه الطريقة يمكنك المتابعة من حيث توقفت.

إذا كنت تريد ، لسبب ما ، محو كل تقدمك ، يمكنك الركض resetState()في أي وقت في المحرر. إذا كنت لا ترغب في ربط التعليمات البرمجية الخاصة بك بالتخزين المحلي ، فاترك // DO NOT SAVEتعليقًا في التعليمات البرمجية الخاصة بك قبل الانتقال بعيدًا. سيؤدي هذا إلى منع حفظ أي رمز ، ليس فقط لهذا الملف.

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

أجزاء يمكن تغيير حجمها

كانت الحيلة الأخيرة التي حصلت عليها في كمي هي جعل مساحة العمل مرنة وسهلة الاستخدام. أردت أن تعطي المستخدمين القدرة على تغيير حجم كل من رئيس تحرير وحدة، لذلك أنا استخدم النصي القليل لقد وجدت دعا simpleDrag.js، تتفاعل refs، وسحر حول flexbox لجعل هذا ممكنا.

شكرا للقراءة ، والقرصنة سعيدة!