Front End Developer Interview Questions

Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ

ယခုဖိုင်တွင် Front-end developer အလုပ်အတွက် အလုပ်လျှောက်ထားသူများအား အင်တာဗျူးများပြုလုပ်ရာတွင် အထောက်အကူပြုနိုင်သည့် မေးခွန်းများပါဝင်ပါသည်။ အလုပ်လျှောက်ထားသူတစ်ဦးစီတိုင်းကို ရှိသမျှမေးခွန်းတိုင်းမေးရန် အကြံပြုခြင်းမဟုတ်ပါ။ (ဖြေရလွန်း၍ လျှာထွက်နိုင်ကိန်းရှိသည်။) မိမိခန့်အပ်လိုသောအလုပ်နှင့်သက်ဆိုင်သည့် အလုပ်တာဝန်၊ လိုအပ်ချက်များနှင့်သက်ဆိုင်သည့် မေးခွန်းများကိုသာရွေးချယ်ကာမေးရန် ရည်ရွယ်ပါသည်။

မှတ်ချက်။ ။ မေးခွန်းအများစုမှာ open-ended မေးခွန်းများြဖစ်ြပီး ဒဲ့ဒိုးအဖြေတစ်ခု အတိအကျရယ် မရှိချေ။ ထိုမေးခွန်းနှင့် ပါတ်သက်၍ ဆွေးနွေးစကားပြောဆိုရာမှ လျှောက်ထားသူ၏ အစွမ်းအဆကို ပိုမိုခန့်မှန်းနိုင်မည်ြဖစ်သည်။

မာတိကာ

  1. ယေဘုယျ မေးခွန်းများ
  2. HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ
  3. CSS နှင့်သက်ဆိုင်သော မေးခွန်းများ
  4. JS နှင့် သက်ဆိုင်သော မေးခွန်းများ
  5. Network နှင့် သက်ဆိုင်သော မေးခွန်းများ
  6. Coding နှင့်သက်ဆိုင်သော မေးခွန်းများ
  7. အပျော်မေးခွန်းများ

Getting Involved

  1. Contributors
  2. How to Contribute
  3. License

ယေဘုယျ မေးခွန်းများ<a name="general-questions"></a>

  • ဒီရက်ပိုင်းအတွင်း (သို့) ဒီတစ်ပါတ်အတွင်း ဘာတွေသင်ယူ လေ့လာြဖစ်ပါသနည်း။
  • Coding နဲ့ပါတ်သက်လို့ ဘယ်လိုအရာမျိုးက သင့်ကို စိတ်လှုပ်ရှားအောင်၊ စိတ်ဝင်စားအောင်လုပ်နိုင်ပါလဲ။
  • အခုလောလောဆယ်ပိုင်းမှာ ဘယ်လို technical challenge တွေများတွေ့ခဲ့သလဲ၊ ပြီးတော့ အဲ့ဒီ့ challenge တွေကို ဘယ်လိုအောင်ြမင်စွာ ကျော်ြဖတ်ခဲ့ပါသလဲ။
  • Web application တစ်ခု သို့ web site တစ်ခုကိုလုပ်ရာမှာ မည်သည့် User Iterface၊ Security (လုံခြုံရေး)၊ Performance၊ Search Engine Optimization (မိမိ၏ site/application အား search engine များမှ လွယ်ကူစွာ ရှာဖွေနိုင်ရေး)၊ Maintainability (နောင်မှာပြုပြင်မှုလွယ်ကူရေး)၊ Technology (နည်းပညာရွေးချယ်မှု) စသည်တို့နှင့်ပါတ်သက်၍ မည့်သည့်အချက်များကို စဉ်းစားပါသလဲ။
  • Development လုပ်ရာတွင် သင့်အကြိုက်ဆုံးြဖစ်မည့် computer set-up အကြောင်းပြောပါ။
  • မည့်သည့် Version control system တွေကို သုံးဖူး၊ စမ်းဖူးပါသလဲ။
  • Web page တစ်ခုကို ပြုလုပ်ရာတွင် သင်၏ လုပ်ငန်းစဉ်အဆင့်ဆင့် (workflow) ကိုပြောပြပါ။
  • သင့်မှာ stylesheet ၅ခုရှိသည်ဆိုပါစို့၊ သင်၏ webpage အတွင်းသို့ ဘယ်လိုအကောင်းဆုံးြဖစ်အောင် ထည့်သွင်းမည်နည်း။
  • Progressive enhancement (ဆီလျော်စွာ ကောင်းမွန်စေနည်း) နှင့် graceful degradation (ဟန်မပျက် နှိမ့်ချနည်း) တို့ကို ရှင်းြပပေးပါ။
  • Website တစ်ခု၏ assets များ resource များကို ဘယ်လို optimize လုပ်ပါမည်နည်း။
  • Browser တစ်ခုသည် domain တစ်ခုမှ resource ဘယ်နှစ်ခု တစ်ပြိုင်တည်း download လုပ်နိုင်ပါသနည်း
    • ဘယ်လိုချွင်းချက်များရှိပါသနည်း။
  • Page load လုပ်သည့်အချိန်အား လျှော့ချနိုင်သည့် နည်း၃မျိုးပြောပါ။ (တကယ် load လုပ်သည့်အခိျန် သို့ load လုပ်သည်ဟုထင်ရချိန်)
  • လုပ်လက်ဆ Project တစ်ခုကို ဝင်ရောက်လုပ်ကိုင်ရာမှာ၊ နဂို developer များက Tab ကိုသုံးကာ code ကို format လုပ်ထားပြီး သင့်အနေနှင့် space များနှင့် format လုပ်သူတစ်ယောက်ဖြစ်သည်ဆိုပါစို့။ သင်မည်သို့ ဝင်ရောက်လုပ်ကိုင်မည်နည်း။
  • ရိုးရှင်းတဲ့ Slideshow page တစ်ခုကို သင်ဘယ်လိုပြုလုပ်ပါမည်နည်း။
  • ဘယ်လို tools များကို အသုံးပြု၍ သင်ရေးထားသော code ၏ performance ကို ြကည့်ပါမလဲ။
  • သင်သည် ဒီနှစ်ထဲတွင် technology တစ်ခုကို ကျွမ်းကျင်စွာလေ့လာနိုင်မည်ဆိုပါက မည်သည့် technology ကိုလေ့လာမည်နည်း။
  • Standard များ၏ အရေးပါပုံနှင့် standard များကို သတ်မှတ်သည့် အဖွဲ့အစည်းများ၏ အရေးပါပုံကို ပြောပါ။
  • Flash of unstyled content ဆိုတာဘာလဲ။ ဘယ်လိုရှောင်ကွင်းနိုင်ပါသလဲ။
  • ARIA နှင့် screenreader များအကြောင်း၊ accessible ြဖစ်သည့် website ကို လုပ်ပုံလုပ်နည်းအကြောင်း ပြောပါ။
  • CSS animation များနှင့် Javascript animation များ၏ အားနည်းချက်၊ အားသာချက်များအကြောင်းရှင်းပြပါ။

HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ <a name="html-questions"></a>

  • doctype ဆိုတာဘာလဲ။ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Standard mode နှင့် quirks mode ကွာခြားချက်များကို ပြောပါ။
  • HTML နှင့် XHTML ကွာခြားချက်များကို ပြောပါ။
  • Page များကို application/xhtml+xml နှင့် ချပေးပါက မည်သည့်ပြဿနာများရှိသနည်း။
  • ဘာသာစကားတစ်ခုထက်မကပါသော page တစ်ခုကို ဘယ်လိုချပြမည်နည်း။
  • ဘာသာစကားတစ်ခုထက်မကပါသော website တစ်ခုကို ဒီဇိုင်းလုပ်ရာ၊ develop လုပ်ရာတွင် မည်သို့စဥ်းစားကိုပြုလုပ်မည်နည်း။
  • data- attributes တွေသည် မည်သည့် ကိစ္စအတွက် ကောင်းသနည်း။
  • HTML5 ကို open platform တစ်ခုအနေစဥ်းစားကြည့်ပါစို့။ HTML5 ၏ အခြေခံအုပ်မြစ်များသည် အဘယ်နည်း။
  • cookie, sessionStorage နှင့် localStorage တို့၏ ကွာခြားချက်များကိုပြောပါ။
  • <script>, <script async> နှင့် <script defer> တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • ဘာကြောင့် CSS ၏ <link> tag များကို <head></head> အတွင်း၊ ဘာကြောင့် Javascript ၏ <script> tag များကို </body> မတိုင်ခင်ထည့်သည့်သည်ဟု ယေဘုယျအားဖြင့် အကြံပြုကြပါသလည်း။ ဘယ်လိုချွင်းချက်များ ရှိပါလဲ။

CSS နှင့်ပါတ်သက်သော မေးခွန်းများ <a name='css-questions'></a>

  • CSS တွင် class တွေနှင့် ID တွေ၏ ကွာခြားချက်များကို ပြောပါ။
  • CSS တွင် "resetting" နှင့် "normalizing" တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • Float တွေအကြောင်းနှင့် ဘယ်လိုအလုပ်လုပ်ကြောင်း ပြောပါ။
  • z-index နှင့် stacking အလုပ်လုပ်ပုံကို ရှင်းပါ။
  • Clearing နည်းအမျိုးမျိုးနှင့် မည်သည့်နည်းသည် မည်သို့အခြေအနေနှင့်သင့်တော်ကြောင်းရှင်းပြပါ။
  • CSS sprites များအကြောင်းရှင်းပြပါ။ Page တစ်ခု၊ site တစ်ခုမှာ ဘယ်လိုလုပ်မလဲရှင်းပြပါ။
  • အကြိုက်ဆုံး Image replacement နည်းများကိုပြောပါ၊ ဘယ်နည်းကို ဘယ်အခါမှာသုံးပါသနည်း။
  • Browser တစ်ခု၊နှစ်ခုနှင့်သာ သက်ဆိုင်သည့် style ပိုင်း ပြဿနာမျိုးကို မည်သို့ရှင်းမည်နည်း။
  • သင်၏ page တစ်ခုကို feature အစုံမပါသည့် browser တစ်ခုအတွက် မည်သို့ style လုပ်မည်နည်း။
    • မည်သည့်နည်း၊ လုပ်ဆောင်မှုများကို သုံးမည်နည်း။
  • Content တစ်ခုကို မမြင်ရအောင် မည်သို့လုပ်နိုင်ပါသနည်း (Screen readers များနှင့်သာ ဖတ်နိုင်အောင်)
  • Grid system များသုံးဖူးပါသလား၊ ဘယ်တစ်ခုကို ပိုကြိုက်ပါသလဲ။
  • Media queries သို့ mobile ဖုန်းအတွက် ရည်ရွယ်တဲ့ layout တွေ styling တွေလုပ်ဖူးလား။
  • SVG ကို style လုပ်ဖူးလား။
  • Webpage တွေကို print ထုတ်ဖို့အတွက် ဘယ်လို optimize လုပ်ပါသလဲ။
  • Efficient ြဖစ်တဲ့ CSS တွေကိုရေးဖို့အတွက် ဘယ်လို အချက်များကို သတိထားရပါမလဲ။
  • CSS preprocessor များ၏ ကောင်းချက် ဆိုးချက်များကို ပြောပါ။
    • သုံးဖူးတဲ့ CSS preprocessor တွေရဲ့ ကြိုက်တဲ့အချက် မကြိုက်တဲ့အချက်များကို ပြောပြပါ။
  • Web design comp တစ်ခု၊ photoshop/illustrator နဲ့ဆွဲထားတဲ့ design တစ်ခုကို ဘယ်လို develop လုပ်ပါမည်နည်း။
  • Browser တစ်ခုက CSS selector တစ်ခုနှင့် ဘယ်လို match လုပ်ပါသနည်း။
  • Box model ကို နားလည်သလောက်ရှင်းပြပါ။ Browser တစ်ခုကို သင်လိုချင်သော box model တစ်ခုနှင့် render လုပ်အောင်မည်သို့ပြောရမည်နည်း။
  • * { box-sizing: border-box; } က ဘာလုပ်တာလည်း။ အဲ့ဒါရဲ့ အားသာချက်တွေက ဘာလဲ။
  • display property ရဲ့ value တွေထဲက မှတ်မိသမျှပြောပြပါ။
  • inline နှင့် inline-block ၏ ကွာခြားချက်များကို ပြောပါ။
  • relative, fixed, absolute နှင့် static position တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • CSS ထဲမှ 'C' သည် Cascading လို့ရည်ရွယ်ပါသည်။ မည်သည့် style ကို ဦးစားပေးအရေးယူမည်ဟု browser က သတ်မှတ်ပါသနည်း (ဥပမာနှင့်တကွ ဖြေရန်)။ အဲ့ဒီ့ system ကို ဘယ်လို အသုံးချမည်နည်း။
  • ဘယ် CSS framework ကို စမ်းသုံးဖူးပါသလဲ။ production မှာရော ဘာကိုသုံးဖူးပါလဲ။
  • CSS flexbox သို့ Grid specs တို့ကို စမ်းသုံးဖူးပါသလား။
  • Responsive design နှင့် adaptive design ဘယ်လိုကွာပါသလဲ။
  • Retina graphic တွေသုံးဖူးပါသလား။ သုံးဖူးပါက ဘယ်တုန်းကပါလည်း၊ ဘယ်နည်းတွေသုံးခဲ့ပါသလဲ။
  • absolute positioning မသုံးပဲ translate() ကို ဘယ်လိုအချိန်မျိုးမှာ သုံးနိုင်ပါသလဲ။ အဲ့ဒါမဟုတ်ပြောင်းပြန် ဆိုရင်ရော။ ဘာကြောင့်လဲ။

JS နှင့်ပါတ်သက်သော မေးခွန်းများ <a name='js-questions'></a>

  • Event delegation အကြောင်းရှင်းပြပါ။
  • this က Javascript မှာ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Prototypal inheritance က ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Javascript ကို ဘယ်လို test လုပ်နိုင်ပါသလဲ။
  • AMD နှင့် CommonJS ကိုယှဉ်ပြပါ။
  • ဘာကြောင့် IIFE မှာ function foo(){}();; အလုပ်မလုပ်တာလည်း။
    • ဘာကိုပြောင်းလိုက်ရင် အလုပ်လုပ်ပါမည်နည်း။
  • Variable တစ်ခု၏ null, undefined or undeclared value များသည် ဘယ်လိုကွာခြားပါသလဲ။
    • အဲ့ဒီ့မတူတဲ့ value တွေကို ဘယ်လို check မလဲ။
  • Closure ဆိုတာဘာလဲ၊ ဘယ်လို၊ ဘာကြောင့်သုံးမှာလဲ။
  • Anonymous function တစ်ခုရဲ့ use case တွေဘာတွေရှိသလဲ။
  • Code တွေကို ဘယ်လို organize လုပ်မှာလဲ။ (module pattern, classical inheritance?)
  • Host object တွေနဲ့ native object တွေနဲ့ ဘယ်လိုကွာသလဲ။
  • function Person(){}, var person = Person(), နှင့် var person = new Person() ဆိုတဲ့ သုံးခုက ဘယ်လိုကွာပါသလဲ။
  • .call နှင့် .apply က ဘာကွာပါသလဲ။
  • Function.prototype.bind အကြောင်းရှင်းပါ။
  • document.write() ကို ဘယ်လိုအချိန်မှာ သုံးမှာလဲ။
  • Feature detection, feature inference နှင့် UA string တို့ရဲ့ ကွာခြားချက်ကို ပြောပါ။
  • AJAX ကို အသေးစိတ်ကျကျ ရှင်းပါ။
  • JSONP က ဘယ်လိုအလုပ်လုပ်သလဲပြောပါ။ (AJAX နှင့် ဘယ်လို မတူကြောင်းရှင်းပါ)
  • Javascript templating သုံးဖူးပါသလား၊​ ဘယ် Library တွေသုံးဖူးပါသလဲ။
  • "hoisting" ကိုရှင်းပြပါ။
  • Event bubbling အကြောင်းရှင်းပါ။
  • "attribute" နှင့် "property" ဘယ်လိုကွာပါသလဲ။
  • နဂိုကတည်းကရှိသည့် JavaScript object တွေကို extend လုပ်ခြင်းသည် ဘာ့ကြောင့် မလုပ်သင့်တာလဲ။
  • Document load event နဲ့ document ready event က ဘယ်လိုကွာသလဲ။
  • == နှင့် === ကွာခြားပုံကိုပြောပါ။
  • Javascript ၏ same-origin policy အကြောင်းရှင်းပါ။
  • အောက်ပါကုဒ်ကို အလုပ်လုပ်အောင် လုပ်ပါ။
javascriptCopy to clipboard
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ternary expression လို့ ဘာကြောင့်ခေါ်တာလဲ, "Ternary" ဆိုတာ ဘာကိုဆိုလိုချင်တာလဲ။
  • "use strict"; က ဘာလဲ။ အားနည်းချက် အားသာချက်များကို ရှင်းပါ။
  • 100 အထိ loop ပါတ်ကာ 3 နှင့် စားလုိ့ပြတ်က "fizz" လို့ထုတ်ပြီး , 5 နှင့်စားလို့ပြတ်က "buzz" လို့ထုတ်ပါ။ 3 နှင့် 5 နှစ်ခုလုံးနှင့်စားလို့ပြတ်က "fizzbuzz" လို့ထုတ်ပါ။
  • Website တစ်ခု၏ global scope ကို များသောအားြဖင့် မထိတာအကောင်းဆုံးြဖစ်ပါသလဲ။
  • load event ကို ဘာကြောင့်သုံးပါသလဲ။ အဲ့ဒီ့ event မှာ အားနည်းချက်များရှိပါသလား။ တခြားနည်းလမ်းတွေသိလား၊ ဘာလို့ အြခားနည်းလမ်းတွေသုံးမှာလဲ။
  • Single page app ဆိုတာဘာလဲ ရှင်းပြပေးပါ၊ ပြီးတော့ အဲ့ဒီ့ app တွေကို ဘယ်လို SEO-friendly ြဖစ်အောင်လုပ်မလဲ။
  • Promises သို့မဟုတ် သူတို့ရဲ့ polyfills တွေနဲ့ပါတ်သက်ြပီး အတွေ့အကြုံအကြောင်းပြောပြပါ။

Network နှင့်ပါတ်သက်သော မေးခွန်းများ

<a name="network-questions"></a>

  • သာမန်ရိုးကျအားဖြင့်၊ ဘာကြောင့် website တစ်ခု၏ assets များကို domain တစ်ခုထက်ပိုပြီး ချပေးခြင်းက ဘာ့ကြောင့်ပိုကောင်းပါသလဲ။
  • Website တစ်ခု၏ url ကို ရိုက်ထည့်ပြီး load လုပ်ပြီးချိန်အထိ ဘာတွေဖြစ်သွားတယ်ဆိုတာကို ရှင်းပြပါ။
  • Long-polling, websocket နှင့် server-sent events တို့၏ ကွာခြားချက်များကိုရှင်းပါ။
  • အောက်ပါ request နှင့် response header များကို ရှင်းပါ။
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • GET နှင့် POST ၏ ကွာြခားချက်များကိုရှင်းပါ။
  • GET နှင့် HEAD ၏ ကွာခြားချက်များကိုရှင်းပါ။

Coding နှင့်ပါတ်သက်သော မေးခွန်းများ <a name='coding-questions'></a>

Question: foo ၏ value ကိုပြောပါ။

javascriptCopy to clipboard
var foo = 10 + '20';

Question: အောက်ပါ code ကို ဘယ်လိုအလုပ်လုပ်အောင်လုပ်မည်နည်း။

javascriptCopy to clipboard
add(2, 5); // 7
add(2)(5); // 7

Question: အောက်ပါ statement မှ ဘာကို return ပြန်မည်နည်း။

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

Question: window.foo ၏ value ကို ပြောပါ။

javascriptCopy to clipboard
( window.foo || ( window.foo = "bar" ) );

Question: အောက်ပါ alert နှစ်ခုက ဘာပြမည်နည်း။

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

Question: foo.length ၏ value ကိုပြောပါ။

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

အပျော်မေးခွန်းများ

<a name="fun-questions"></a>

  • သင်လတ်တလောလုပ်ဖူးတဲ့ project များထဲက cool ဖြစ်တဲ့ project တစ်ခုအကြောင်းပြောပါ။
  • သင်သုံးတဲ့ developer tools တွေထဲက ဘယ်လိုအရာမျိုးတွေကို ကြိုက်ပါသလဲ။
  • အပျော်တမ်း၊ အားလပ်ချိန်မှာ လုပ်နေတဲ့ project တွေရှိပါသလား။ ဘယ်လိုမျိုးတွေလဲ။
  • Internet Explorer ရဲ့ အကြိုက်ဆုံး feature တစ်ခုပြောပါ။
  • ကော်ဖီကို ဘယ်လိုသောက်ပါသလဲ။

Contributors:

This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

Burmese translation provided by @mmhan.

It has since received contributions from 100 developers.