أسئلة مقابله شخصية في تطوير واجهةالويب

أسئلة مقابله شخصية في تطوير واجهةالويب

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

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

قائمة المحتوى

  1. أسئلة عامة
  2. أسئلة HTML
  3. أسئلة CSS
  4. أسئلة JS
  5. أسئلة اختبار البرمجيات Testing
  6. أسئلة أداء البرمجيات Performance
  7. أسئلة شبكات Network
  8. أسئلة برمجة
  9. أسئلة مسلية

الدخول و المساهمة

  1. المساهمون
  2. كيف تساهم
  3. الرخصة

أسئلة عامة:

  • ماذا تعلمت بالأمس/هذا الأسبوع؟
  • ماذا يهمك ويثير اهتمامك في البرمجة؟
  • ماهو اخر تحدي تقني واجهته ,و كيف استطعت إصلاحه؟
  • اي من واجهة المستخدم, الامان, الاداء, قابلية الصيانه, SEO, او اي تقنية تضعها في الحسبان عند بناء تطبيق ويب او موقع؟
  • تكلم عن بيئة التطوير المفضلة لديك.
  • ماهو إصدار نظام التحكم المعتاد عليه؟
  • هل تستطيع وصف روتين عملك عند إنشاء صفحة ويب؟
  • لو كان لديك خمسة stylesheets مختلفة كيف لك دمجها في الموقع بأفضل طريقة؟
  • هل تستطيع شرح الفرق بين progressive enhancement و graceful degradation؟
  • كيف يمكنك تحسين assets/resources الموقع؟
  • كم عدد المصادر التي يحملها الموقع من domain في وقت واحد؟
    • ماهي الاستثناءت؟
  • سم ثلاث طرق لتخفيض تحميل الصفحة؟
  • لو دخلت الى مشروع و هم يستخدمون tabs وانت تستخدم spaecs, فماذا ستفعل؟
  • اشرح كيف تنشئ صفحة عرض شرائح.
  • لو كنت ستحترف تقنية واحده هذه السنه ماذا ستكون؟
  • اشرح اهمية standards و standards bodies.
  • ماهو Flash of Unstyled Content ؟وكيف تتفاداه
  • اشرح ما هو ARIA و screenreaders, وكيف تنشئ موقع accessible؟
  • اشرح الإيجابيات و السلبيات CSS animations مقابل JavaScript animations.
  • ماذا CORS يرمز الى ,و ماهي المشكلة التي يعالجها؟

أسئلة HTML:

  • ماذا تفعل doctype؟
  • ماهو الفرق بين full standards mode, almost standards mode و quirks mode؟
  • ماهو الفرق بين HTML و XHTML؟
  • هل هناك مشكلة في استضافة صفحاتapplication/xhtml+xml؟
  • كيف تستضيف صفحه بمحتوى متعدد اللغات؟
  • ماهي الاشياء التي يجب ان تحترس منها عند تصميم او تطور موقع متعدد اللغات؟
  • ماهي فائدة -data؟
  • اعتبر HTML5 منصة مفتوحة على شبكة الإنترنت ماهي أسس بناء HTML5؟
  • اشرح الفرق بين cookie, sessionStorage و localStorage.
  • اشرح الفرق بين <script>, <script async> و <script defer>.
  • لماذا من الأفضل وضع سي اس اس <link> بين <head></head> و جافاسكربت <script> قبل <body/>؟
  • ماهو progressive rendering؟
  • هل استخدمت HTML templating languages مختلفة من قبل؟

أسئلة CSS:

  • ما الفرق بين class و id في CSS؟
  • ما الفرق بين "resetting" و "normalizing" في CSS؟ واي منهم ستختار, ولماذا؟
  • اشرح Floats, و كيف تعمل؟
  • اشرح z-index, و كيف stacking context شُكلت؟
  • اشرح (BFC(Block Formatting Context, و كيف تعمل؟
  • ماهي clearing techniques المختلفه و اي منها مناسب لأي سياق؟
  • اشرح CSS sprites, وكيف سوف تنفذعم في صفحه او موقع؟
  • ما هي طرق تبديل الصور "image replacement" المفضلة لديك و متى تسخدم اي منها؟
  • كيف تصلح مشكلة تنسيق في متصفح معين؟
  • كيف تجعل صفحاتك تعمل على متصفحات مقيدة بالميزات "قديمة"؟
    • ما هي الطرق/العمليات التي تستخدمها؟
  • ماهي الطرق المختلفة لكي تخفي المحتوى وتجعله فقط متوفر لقارء الشاشه فقط؟
  • هل استخدمت نظام grid من قبل, و لو كان كذكلك ماذا تفضل؟
  • هل استخدمت media queries او تنسيق محدد للهاتف؟
  • هل انت معتاد مع تصميم SVG؟
  • كيف تحسن صفحاتك لطٌباعة؟
  • ماهي بعض المعوقات في كتابة CSS جيد؟
  • ماهي الايجابيات/السلبيات في استخدام CSS preprocessors؟
    • اوصف ماذا يعجبك وما لايعجبك حول استخدام CSS preprocessors؟
  • كيف كيف لك تنفيذ web design comp باستخدام خطوط ليست أساسية؟
  • اشرح كيف يتسطيع المتصفح تحديد أي عنصر ينتمي إلى أي CSS selector.
  • اوصف pseudo-elements و ناقش في ماذا يستخدمون؟
  • اشرح ماهو box model و كيف ستخبر المتصفح تنسيق في box models مختلفة باستخدام CSS.
  • ماذا { ;box-sizing: border-box } * يفعل, وماهي ايجابياته؟
  • عدد كل قيم خاصية display التي تتذكرها.
  • ما هو الفرق بين inline و inline-block؟
  • ماهو الفرق بين قيم relative, fixed, absolute و statically في خاصية position؟
  • الحرف "C" في CSS يرمز الى Cascading. كيف تحدد الافضلية في تعيين التصميم , وكيف لك أن تستفيد من هذه الخاصية؟
  • أي من إطارات العمل CSS استخدمت في الانتاج أو محليا على جهازك, وكيف لك تغييرهم/تطورهم؟
  • هل جربت او استعملت قليلا CSS Flexbox او Grid؟
  • كيف يكون responsive design مختلفا عن adaptive design
  • هل عملت من قبل مع retina graphics, ولو كان كذلك متى و ماهي الطرق التي استعملتها؟
  • هل هناك سبب يجعلك من الممكن أن تستعمل ()translate بدلا من absolute positioning او vice-versa؟ ولماذا.

أسئلة JS:

  • اشرح event delegation.
  • اشرح كيف this تعمل في JavaScript.
  • اشرح كيف تعمل prototypal inheritance.
  • ما رأيك في AMD vs CommonJS؟
  • اشرح لماذا التالي ;(){ }{}function foo لا يعمل كـ IIFE؟
    • ما الذي يحتاجه من تصحيح لجعل IIFE بصوره صحيحة؟
  • ما الفرق بين المتغيرات: null, undefined، undeclared؟
    • ما الذي ستفعله لتتحقق من أي من هذه الحالات؟
  • ما هو closure وكيف/لماذا ستستخدم واحدًا؟
  • ما هي حالة الاستخدام الاعتيادية لـ anonymous functions؟
  • كيف تنظم برمجياتك؟ (module pattern, classical inheritance)؟
  • ما الفرق بين host objects و native objects؟
  • القرق بين {} ()function Person, ()var person = Person,و ()var person = new Person؟
  • ما الفرق بين call.و apply.؟
  • اشرح Function.prototype.bind.
  • متى تستخدم ()document.write؟
  • ما الفرق بين feature detection, feature inference , واستخدام الـ UA string؟
  • اشرح Ajax في أكبر قدر من التفاصيل .
  • ما هي المزايا والعيوب في استخدام Ajax ؟
  • اشرح كيف JSONP يعمل (وكيف أنها ليست حقا Ajax ).
  • هل سبق لك استخدام JavaScript templating؟
    • لو كان كذلك أي مكتبة استخدمت؟
  • اشرح "hoisting".
  • اوصف event bubbling.
  • ما الفرق بين "attribute" و "property"؟
  • لماذا extending built-in JavaScript objects فكرة سيئة؟
  • ما هو الفرق بين document load event و document DOMContentLoaded event؟
  • ما هو الفرق بين == و ===؟
  • اشرح سياسة same-origin فيما يتعلق بجافاسكربت.
  • اجعل هذا يعمل:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • لماذا "Ternary" سميت هكذا ,و ماذا تشير كلمة Ternary expression إلى؟
  • ماهو ;"use strict", وما هي إبجبايات و سلبيات استخدامه؟
  • اكتب for loop تكرر حتى 100 و تطبع "fizz" في مضاعفات 3 , و "buzz" في مضاعفات 5 و "fizzbuzz" في مضاعفات 5 و3.
  • لماذا بشكل عام ترك global scope للموقع كما هو و عدم لمسه فكرة جيدة
  • لماذا من الممكن تستخدم شي مثل load event, وهل هذا الـevent يملك سلبيات؟ وهل تعرف بدائل.و لماذا من الممكن ان تستخدمهم
  • اشرح ما هو single page app و كيفية صنع SEO-friendly.
  • ما مدى خبرتك في استعمال Promises و/او polyfills خاصتهم؟
  • ماهي بعض المزايا و العيوب في استخدام Promises بدلا من callbacks؟
  • ماهي بعض الاجابيات و السلبيات في كتابتة جافاسكرت كود في لغة يحدث لها compiles إلى جافاسكربت؟
  • ماهي الادوات و الطرق التي تستخدمها في البحث و التصحيح عن أخطاءك في الجافاسكربت كود؟
  • ماهي language constructions تستعمل لتكرار على خواص object و عناصر array؟
    • اشرح الفرق بين mutable و immutable objects.
    • ماذا يعتبر في الجافاسكربت لـ immutable object؟
    • ماهي الايجابيات و السلبيات الـ immutability؟
    • كيف يمكنك تحقيق immutability في الكود الخاص بك؟
  • اشرح الفرق بين synchronous و asynchronous functions.
  • ماهو event loop؟
    • ما هو الفرق بين call stack و task queue؟
  • اشرح الفرق في استخدام foo بين {} ()function foo و {} ()var foo = function.

أسئلة اختبار البرمجيات Testing:

  • ما هي المزايا والعيوب لاختبار برمجياتك؟
  • ما الأدوات التي تستخدمهافي اختبار وظائف برمجياتك؟
  • ما الفرق بين اختبار unit واختبار functional/integration؟
  • ما الغرض من code style linting tool؟

أسئلة أداء البرمجيات Performance:

  • ما الأدوات التي تستخدمها لإيجاد مشاكل في الأداء؟
  • ما هي الطرق التي من الممكن تحسن أداءالـ scrolling في موقعك؟
  • اشرح الفرق بين layout و painting و compositing.

أسئلة شبكات Network:

  • في العادة لماذا من الأفضل أن ترفع site assets من domains متعدده؟
  • افعل ما بوسعك لشرح ما يحدث من بداية كتابك عنوان الموقع الى انتهاء تحميله على شاشتك.
  • ما الفرق بين Long-Polling و Websockets و Server-Sent Events؟
  • اشرح request and response headers التاليه:
    • الفرق بين If-Modified-... , Expires, Date, Age
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • ما هي HTTP methods؟ و عدد كل HTTP methods التي تعرفها، واشرحها.

أسئلة برمجة:

سؤال: ماهي قيمة foo؟

var foo = 10 + '20';

سؤال: كيف يمكن جعل هذا الكود يعمل؟

add(2, 5); // 7
add(2)(5); // 7

سؤال: ماهي القيمة العائدة من الكود التالي؟

"i'm a lasagna hog".split("").reverse().join("");

سؤال: ماهي قيمة window.foo؟

( window.foo || ( window.foo = "bar" ) );

سؤال: ماهو ناتج التنبيهات التالية؟

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

سؤال: ماهي قيمة foo.length؟

var foo = [];
foo.push(1);
foo.push(2);

سؤال: ماهي قيمة foo.x؟

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

سؤال: ماذا يطبع الكود التالي؟

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

أسئلة مسلية:

  • ماذا عملت من مشروع رائع مؤخرا؟
  • ما هي الاشياء التي أعجبتك في أدوات التطوير التي تستعملها؟
  • من الذي يلهمك في مجتمع تطوير واجهة الويب؟
  • هل لديك اي من المشاريع الصغيرة؟ ما نوعها؟
  • ما هي الميزة المفضلة لديك في Internet Explorer؟
  • كيف تحب قهوتك؟

المساهمون:

بدأت هذه الوثيقة في عام 2009 بتعاون @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal.

ومنذ ذلك الحين تلقى مساهمات من أكثر من 100 مطور.

Edit this page