مقابلة مطور الواجهة الأمامية
عملية المقابلة
يمكن أن تختلف عمليات المقابلة الأمامية كثيرًا حسب الشركة. لكن بشكل عام يتبعون أحد هذين التدفقين:
المقابلة في المنزل
شاشة الهاتف الأولية مع مسؤول التوظيف أو مدير التوظيف.
تحدٍ منزلي تكمله في وقتك الخاص.
يتكون الموقع من مقابلتين أو ثلاث مقابلات شخصية. من المحتمل أن تغطي أو تتوسع في منزلك.
المقابلة القياسية
شاشة الهاتف الأولية مع مسؤول التوظيف أو مدير التوظيف.
شاشة هاتف مع مهندس في الفريق.
موقع يتكون من أربع أو خمس مقابلات شخصية.
يمكن أن تتراوح تحديات الاستلام من إنشاء تطبيق أمامي كامل إلى تحدي خوارزمية نمط HackerRank. في بعض الأحيان ، يكون أخذ المنزل إلى المنزل محاصرًا لفترة زمنية محددة. أحد الجوانب السلبية لتحديات أخذها إلى المنزل هو الالتزام بالوقت الإضافي. أيضًا ، إذا لم يكن الوقت محددًا ، فأنت تتنافس بشكل أساسي لتكون الشخص الذي يقضي معظم الوقت في إتقان إجابته. الجانب الإيجابي هو أن معظم الأماكن التي تجري مقابلات منزلية تنشئ مقابلات متابعة حول المشروع الذي أكملته بالفعل.
هذا يعني ، عند التحضير لمقابلات مطور الواجهة الأمامية ، سترغب في ممارسة كل من المهارات اللينة التي ستحتاجها لأداء جيد على شاشة مسؤول التوظيف أو مدير التوظيف ، بالإضافة إلى مهارات الترميز التي ستحتاجها لاتخاذ- المنزل وفي الموقع.
ما الذي يبحث عنه القائم بإجراء المقابلة
عند التحضير للمقابلة ، من المهم أن تضع نفسك مكان المحاور! إذا كنت على الجانب الآخر من الطاولة ، فاستند إلى تلك التجارب. من المحتمل أن يكونوا في منتصف يوم عمل مع "مقابلة" في التقويم الخاص بهم. نأمل أن يكونوا قد اطلعوا على سيرتك الذاتية وحصلوا على بعض التعليمات من مدير التوظيف.
تسمح بعض الشركات لكل القائم بإجراء المقابلة أن يطلب أي شيء يريده. يحتفظ آخرون بقوائم الأسئلة "المقبولة" أو "المحظورة". حتى أن البعض ينظم عملية المقابلة بأكملها ، ويعين لكل شخص موضوعًا محددًا ليغطيه.
في كلتا الحالتين ، لديهم 45 دقيقة (عادةً) لمقابلتك ، وتقديم أنفسهم ، والتعرف عليك ، والعمل من خلال أي تحديات قد يجلبونها في البرمجة. سيحدد المحاور الجيد العملية في البداية ، لكن غالبًا ما يتم تقسيمها على النحو التالي:
المحاور يتحدث عن نفسه (دقيقتان)
تطلب منك المقابلة الاطلاع على سجل عملك الحديث (5 دقائق)
أسئلة فنية عالية المستوى (7 دقائق).
تحدي البرمجة (٢٥ دقيقة)
لدى الشخص الذي تتم مقابلته فرصة لطرح الأسئلة (5 دقائق)
ضع في اعتبارك أن بعض الشركات تفعل الأشياء بشكل مختلف تمامًا. غالبًا ما تكون فكرة رائعة أن تطلب من المجند الخاص بك أي معلومات يمكنهم تقديمها فيما يتعلق بعملية المقابلة. في بعض الأحيان سيخبرونك بالهيكل العام ، وفي أحيان أخرى سوف يعطونك قائمة بالموضوعات المراد دراستها!
كيف تقترب من أسئلة مقابلة مطور الواجهة الأمامية
يمكن أن تكون المقابلات مخيفة. يجب على الضيف أن يسحب سؤالاً عشوائيًا من الهواء ، وعليك أن تعمل على حله! ضع في اعتبارك أن هناك العديد من الأشياء التي يمكنك القيام بها لتحسين تجربتك بغض النظر عن السؤال المطروح. فيما يلي بعض النصائح التي أحاول دائمًا وضعها في الاعتبار:
لا تبدأ البرمجة بسرعة كبيرة دعهم يشرحون السؤال. توقف لحظة للتأكد من أنك تفهمها حقًا. اطرح أسئلة توضيحية. ربما تكتب بعض "حالات الاختبار" ، حتى لو كانت مجرد كود زائف. على سبيل المثال ، "إذا مررت بالرقم 19837 ، فسيعود الرقم 13789"؟
لا تخف من طرح الأسئلة. قد تكون هناك بعض الأسئلة التي لن يجيب عنها القائم بإجراء المقابلة ، ولكن طرح الأسئلة سيحسب في صالحك في معظم الأوقات
قسّم المشكلة إلى أجزاء أصغر. غالبًا ما تأتي تحديات البرمجة في قصة كبيرة. لكن في جوهرها ، عادة ما تكون مباشرة نسبيًا.
استخدم الوظائف السحرية! من الشائع أيضًا أنك ستواجه جزء منفصل لا تعرف كيفية حله أثناء حل تحدي الترميز. ربما تكتب رمزًا للوصول إلى واجهة برمجة تطبيقات ، وقد نسيت بناء جملة `window.fetch`. لا تقلق كثيرا حيال ذلك! أنشئ وظيفة "سحرية" مثل "getDataFromAPI" واستمر في المضي قدمًا. من الأفضل دائمًا الحصول على شيء يعمل بدلاً من لا شيء على الإطلاق. يمكن لوظيفة سحرية معروفة أن تقطع شوطًا طويلاً. يمكن أن تسمح لك أشياء مثل "turnStringIntoArray" أو "iterateThroughObject" أو "fetchChildDOMNode" بالعودة إلى الجزء الذي تفهمه من المشكلة.
أسئلة مقابلة JavaScript
ما هي الكلمة الأساسية `this` في JavaScript؟
هذا صعب بعض الشيء في JavaScript. يتم تحديد قيمتها من خلال ما يسمى بالوظيفة التي أنت بداخلها. في الحالة العالمية ، يتم تعيين هذا على كائن النافذة. تعتمد قيمة هذا أيضًا على ما إذا كنت في الوضع المتشدد أم لا. داخل دالة المستوى الأعلى ، سيكون الوضع المتشدد غير محدد ، في حين أن الوضع غير المقيد سيكون كائن النافذة. من الجدير أيضًا معرفة أنه يمكن الكتابة فوق قيمة هذا باستخدام طريقة الربط.
ما الفرق بين let و const و var؟
في الأصل ، كان var هو الخيار الوحيد المتاح في JavaScript لتحديد المتغيرات. في ES6 ، حصلنا على const ودعناها كخيارات إضافية. النقاط المهمة هي:
لا يمكن إعادة تعيين المتغيرات المعرفة بـ const.
المتغيرات Const و let هي ذات نطاق الكتلة.
المتغيرات Var هي دالة على نطاق.
يتم رفع المتغيرات المعرفة بـ var.
ما الفرق بين == و ===؟
الزوجي يساوي الشيكات للقيمة فقط. قبل التحقق ، يقوم بأي نوع من أنواع الإكراه الضرورية. على سبيل المثال ، ستكون السلسلة "1" == للعدد الصحيح 1 ، لكنها لن تكون ===. تفضل العديد من المشاريع هذه الأيام استخدام === دائمًا. على الرغم من أن بعض الأشخاص يؤيدون كتابة رمز يعمل بشكل جيد مع الإكراه من النوع ==.
كيف يمكنك الوصول إلى عناصر HTML باستخدام JavaScript؟
تعرف على getElementById و querySelector و querySelectorAll.
ما هي الخيارات المتوفرة لدينا لتخزين البيانات؟
يمكنك تخزين بيانات المستخدم في التخزين المحلي أو ملفات تعريف الارتباط أو تخزين الجلسة.
كيف يمكنك اجتياز DOM باستخدام JavaScript؟
يمكنك الحصول على عقدة DOM إما باستخدام getElementById أو querySelector. يمكنك بعد ذلك الحصول على جميع توابعه عن طريق استدعاء .childNodes (ملاحظة: تُرجع childNodes NodeList ، وليس Array). يمكنك بعد ذلك اجتياز DOM من خلال التكرار خلال childNodes واستدعاء .childNodes على كل منها. يمكنك السير في طريقك احتياطيًا عن طريق التحقق من العقدة الأم لأي عقدة.
لمزيد من المعلومات ، تحقق من جميع الخصائص المخزنة على عقد DOM.
ما هي البرمجة الوظيفية في JavaScript؟
تشير البرمجة الوظيفية إلى استخدام وظائف خالصة. في سياق JavaScript ، يعني هذا التعرف على الخريطة والتصفية والتقليل. من الجدير أيضًا فهم مفهوم الثبات.
أسئلة مقابلة CSS
ما هو نموذج الصندوق؟(flexbox)
يشير نموذج مربع CSS إلى الطريقة التي يتعامل بها CSS مع التخطيط. يتكون كل عنصر من محتواه ، والحشو ، والحد ، والهامش الخاص به.
تعرف على محددات CSS الخاصة بك!
ستتطلب منك العديد من أسئلة المقابلة معرفة محددات الفصل مثل محددات .foo و id مثل #bar. من الجيد أيضًا معرفة أنه يمكنك تحديد الأشقاء div + p و Descendents div p و children div> p.
خصوصية CSS
إذا كان CSS لديك به محددان متضاربان ، فمن سيفوز؟ على سبيل المثال ، إذا كنت تكتب
الأنواع الأخرى. العلامات المهمة هي الأقوى ، والمحدد العام هو الأضعف. للحصول على رسم توضيحي ممتع لمساعدتك على تعلم خصوصية
CSS ، تحقق من specifishity.com.
ما هي العناصر الزائفة؟
يمكنك تحديد :: السطر الأول لعنصر أو تحديد :: قبل العنصر. ما هو فليكس بوكس؟ Flexbox هو نظام تخطيط محدد W3 لـ CSS. يسمح لك بوضع العناصر بسهولة داخل الحاوية حتى لو كان حجم تلك الحاوية ديناميكيًا.
يجب أن تتعرف على بعض تخطيطات Flexbox الأساسية. تتضمن بعض الموارد المجانية ما يلي:
ما هي شبكة CSS الشبكة هو نظام W3 لعمل تخطيطات صفحة كاملة. تعد CSS Grid رائعة للشبكات الحرفية والصفحات الكاملة ، بينما تعد Flexbox
رائعة لمجموعات العناصر على الصفحة. تتضمن بعض الموارد المجانية ما يلي:
أسئلة مقابلة HTML
ماذا يعني HTML الدلالية؟ يعني HTML الدلالي استخدام العلامة الأكثر ملاءمة للمهمة قيد البحث. وهو يعني استخدام عناصر ذات مغزىمثل <form> و <article> و <table> بدلاً من استخدام <div> و <span> فقط.
ما هي ولوجية الويب؟ تعني إمكانية الوصول إلى الويب التأكد من إمكانية استخدام الويب من قبل الأشخاص الذين يعانون من مجموعة واسعة من الإعاقات.
ويتضمن ذلك التأكد من أن المستخدمين الذين يستخدمون لوحة المفاتيح فقط يمكنهم التنقل في موقعك مع تمكين بعض الأشخاص الذين
يواجهون صعوبات في السمع أو الرؤية من استخدامه أيضًا.
ما هو الفرق بين العلامة والسمة؟ علامات HTML هي عناصر. فكر في <a> و <زر> و <قسم>. صفات HTML تصف خصائص العناصر. فكر في src ، والطبقة والمعرف.
ما هو الفرق بين العناصر المضمنة والكتلة؟
لا يمكن أن يكون للعناصر المضمنة ارتفاع أو عرض. تتضمن أمثلة العناصر المضمنة span و a و img. تحصل عناصر الكتلة على
خطها الخاص وتستهلك العرض الكامل المتاح. من أمثلة عناصر الكتلة div و p و h1. عرض لا شيء مقابل الرؤية مخفية كلاهما لا يعرض أي شيء والرؤية المخفية ستخفي العنصر من الصفحة. الفرق هو أنه مع عدم عرض أي مساحة ، لن يتم تخصيصمساحة للعنصر ، بينما مع إخفاء الرؤية ، ستظهر مساحة فارغة على الصفحة.
أسئلة الخوارزمية عادة لا تكون المقابلات الأمامية ثقيلة على هياكل البيانات والخوارزميات مثل المقابلات العامة لهندسة البرمجيات. ومع ذلك ،
لا يزال من المهم معرفة كيفية إنجاز بعض المهام اليومية. المصفوفات يجب أن تعرف كيفية الدفع والفرقعة والتغيير وعدم التغيير. يجب أن تعرف أيضًا كيفية التعيين والتقليل والتصفية. أشياء يجب أن تعرف كيفية التكرار من خلال مفاتيح الكائن. للحصول على رصيد إضافي ، تعرف على القليل عن المجموعات والخرائط
ومتى تستخدمها! هياكل البيانات الأقل استخدامًا في بعض الأحيان ، ستظهر هياكل بيانات أخرى أثناء المقابلة. قد تحصل على أسئلة حول القوائم المرتبطة والأكوام وقوائم الانتظار والأشجار.
للحصول على دليل دراسة سريع حول هذه الأشياء ، تحقق من هياكل البيانات الصغيرة. فرز أهم شيء يجب تعلمه هو بعض السلوكيات الغريبة لطريقة الفرز في JavaScript. تأكد من أنه يمكنك استخدامه لفرز مجموعة من الأعداد
الصحيحة بدقة. في بعض الأحيان ، تسأل المقابلات الأمامية أيضًا عن خوارزميات الفرز المحددة. لصقل ذلك ، تحقق من هذه المقالة
على freeCodeCamp. تدوين Big-O يأتي تعقيد الزمان والمكان من وقت لآخر في المقابلات الأمامية. على أقل تقدير ، من الجيد أن تفهم أن أي خوارزمية تكتبها يمكن استخدامها
على مجموعة بيانات صغيرة جدًا أو كبيرة جدًا. هذا يعني أن أشياء مثل إضافة حلقة for متداخلة يمكن أن يكون لها تأثيرات عميقة على
نطاق واسع. إذا كنت تريد التعمق أكثر ، فمن الجدير أن تقرأ عن تدوين Big-O وفهم بعض الرموز الشائعة مثل الوقت الثابت والوقت
اللوغاريتمي. تعد هذه المقالة عن Digital Ocean مكانًا رائعًا للبدء. أسئلة النظام البيئي ما هي بعض أطر الواجهة الأمامية الشائعة؟ بالتأكيد لن تحتاج إلى معرفة كيفية استخدام أطر عمل متعددة للحصول على وظيفة الواجهة الأمامية. لكن قد يكون من المفيد أن تكون
على دراية بالاتجاهات الحالية. ألق نظرة على React و Vue و Angular و Svelte.
ما هي بعض البدائل لكتابة Pure CSS؟ تستخدم الكثير من الفرق معالج CSS المسبق مثل Less أو SASS. تستخدم بعض الفرق مكتبات css-in-js مثل المكونات المصممة.
لا يزال آخرون يستخدمون أطر عمل المرافق مثل Tailwind. مرة أخرى ، لا داعي لتعلم كيفية استخدام كل هذه الأشياء ، لكن من الجيد أن تكون على دراية بها على مستوى عالٍ!
ما الفرق بين اختبارات الوحدة والاختبارات الشاملة؟
إعطاء مدخلات محددة. تهدف الاختبارات الشاملة إلى إجراء الاختبارات على نطاق واسع
st موقع الويب نفسه ، وليس الرمز. إنهم يحاكيون النقرات والتمرير ويتأكدون من أن الموقع يتصرف وفقًا لذلك.
ما هي TypeScript و Flow؟
ثم تتحول إلى JS خالصة عند النشر. يمكنهم مساعدتك في التقاط الأخطاء وتوثيق التعليمات البرمجية بشكل أفضل.
ما هو المجمع؟
إجبار المستخدم على تحميل جميع الملفات التي يزيد عددها عن 100 ملف. لذلك نستخدم أداة مثل webpack لجمع كل الملفات وربطها
معًا. بهذه الطريقة ، يمكننا تقديم "حزمة" واحدة أو اثنتين من التعليمات البرمجية بدلاً من 100 ملف فردي.
ما هو CDN؟
بدلاً من أن يضطر الأشخاص في جميع أنحاء العالم إلى انتظار وصول الملفات من مسقط رأسك. ما هي الأدوات التي يمكنك استخدامها لتصحيح أخطاء تطبيقات الويب؟
أخطاء في وحدة التحكم أو اكتشاف تسرب للذاكرة أو اختناقات وحدة المعالجة المركزية.
أدوات مقابلة مطور الواجهة الأمامية هناك الكثير من الموارد الرائعة لمساعدتك على الاستعداد لمقابلة الواجهة الأمامية. جميعهم يغطون نفس الأشياء ، لذلك إذا كان لديك
واحد تفضله ، فاستخدمه بالتأكيد! ومع ذلك ، فإن بعض أدواتي المفضلة هي:
العملية مع واجهة المستخدم الخاصة بهم قبل أن تبدأ.
بوتيرة صحية. ضع أهدافًا واقعية ومهلة زمنية عندما تبدأ في التقدم للوظائف. إذا أمكن ، تدرب دائمًا باستخدام أدوات حقيقية مثل السبورة البيضاء أو محرر hackerrank. تدرب ليس فقط على حل المشكلات
ولكن تعلم التحدث أثناء البرمجة. تذكر ، لا تتسرع في البرمجة! اطرح الأسئلة حتى تفهم المشكلة تمامًا. أيضًا ، ضع في اعتبارك أنه
يمكنك أن تفشل في أي سؤال ولا يزال بإمكانك الحصول على عرض! فقط ابذل قصارى جهدك ، وتواصل مع ما تستطيع ، وكن
منفتحًا على أي تعليقات من المحاور. حظا طيبا وفقك الله!
تعليقات
إرسال تعليق