#Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ
ယခုဖိုင်တွင် Front-end developer အလုပ်အတွက် အလုပ်လျှောက်ထားသူများအား အင်တာဗျူးများပြုလုပ်ရာတွင် အထောက်အကူပြုနိုင်သည့် မေးခွန်းများပါဝင်ပါသည်။ အလုပ်လျှောက်ထားသူတစ်ဦးစီတိုင်းကို ရှိသမျှမေးခွန်းတိုင်းမေးရန် အကြံပြုခြင်းမဟုတ်ပါ။ (ဖြေရလွန်း၍ လျှာထွက်နိုင်ကိန်းရှိသည်။) မိမိခန့်အပ်လိုသောအလုပ်နှင့်သက်ဆိုင်သည့် အလုပ်တာဝန်၊ လိုအပ်ချက်များနှင့်သက်ဆိုင်သည့် မေးခွန်းများကိုသာရွေးချယ်ကာမေးရန် ရည်ရွယ်ပါသည်။
မှတ်ချက်။ ။ မေးခွန်းအများစုမှာ open-ended မေးခွန်းများြဖစ်ြပီး ဒဲ့ဒိုးအဖြေတစ်ခု အတိအကျရယ် မရှိချေ။ ထိုမေးခွန်းနှင့် ပါတ်သက်၍ ဆွေးနွေးစကားပြောဆိုရာမှ လျှောက်ထားသူ၏ အစွမ်းအဆကို ပိုမိုခန့်မှန်းနိုင်မည်ြဖစ်သည်။
- ယေဘုယျ မေးခွန်းများ
- HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ
- CSS နှင့်သက်ဆိုင်သော မေးခွန်းများ
- JS နှင့် သက်ဆိုင်သော မေးခွန်းများ
- Testing နှင့် သက်ဆိုင်သော မေးခွန်းများ
- Performance နှင့် သက်ဆိုင်သော မေးခွန်းများ
- Network နှင့် သက်ဆိုင်သော မေးခွန်းများ
- Coding နှင့်သက်ဆိုင်သော မေးခွန်းများ
- အပျော်မေးခွန်းများ
- ဒီရက်ပိုင်းအတွင်း (သို့) ဒီတစ်ပါတ်အတွင်း ဘာတွေသင်ယူ လေ့လာြဖစ်ပါသနည်း။
- 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 တစ်ခုကို သင်ဘယ်လိုပြုလုပ်ပါမည်နည်း။
- သင်သည် ဒီနှစ်ထဲတွင် technology တစ်ခုကို ကျွမ်းကျင်စွာလေ့လာနိုင်မည်ဆိုပါက မည်သည့် technology ကိုလေ့လာမည်နည်း။
- Standard များ၏ အရေးပါပုံနှင့် standard များကို သတ်မှတ်သည့် အဖွဲ့အစည်းများ၏ အရေးပါပုံကို ပြောပါ။
- Flash of unstyled content ဆိုတာဘာလဲ။ ဘယ်လိုရှောင်ကွင်းနိုင်ပါသလဲ။
- ARIA နှင့် screenreader များအကြောင်း၊ accessible ြဖစ်သည့် website ကို လုပ်ပုံလုပ်နည်းအကြောင်း ပြောပါ။
- CSS animation များနှင့် Javascript animation များ၏ အားနည်းချက်၊ အားသာချက်များအကြောင်းရှင်းပြပါ။
- CORS ဆိုတာဘာလဲ၊ ဘယ်လိုအခက်အခဲမျိုး ဘယ်လို issue မျိုးအတွက် အသုံးပြုပါသလဲ။
doctype
ဆိုတာဘာလဲ။ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။- Full standards mode၊ almost 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>
မတိုင်ခင်ထည့်သည့်သည်ဟု ယေဘုယျအားဖြင့် အကြံပြုကြပါသလည်း။ ဘယ်လိုချွင်းချက်များ ရှိပါလဲ။ - Progressive Rendering ဆိုတာဘာလဲ။
- တခြား HTML template လုပ်ပေးနိုင်တဲ့ templating engine မျိုးဘာသုံးဖူးလဲ။
- CSS တွင် class တွေနှင့် ID တွေ၏ ကွာခြားချက်များကို ပြောပါ။
- CSS တွင် "resetting" နှင့် "normalizing" တို့၏ ကွာခြားချက်များကို ပြောပါ။
- Float တွေအကြောင်းနှင့် ဘယ်လိုအလုပ်လုပ်ကြောင်း ပြောပါ။
- z-index နှင့် stacking အလုပ်လုပ်ပုံကို ရှင်းပါ။
- BFC(Block Formatting Context) အကြောင်းရှင်းပါ၊ ဘယ်လိုအလုပ်လုပ်လဲ ပြောပါ။
- 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 လုပ်ပါသနည်း။
- Pseudo-element တွေအကြောင်း ပြောပါ။ ဘယ်လိုနေရာမှာသုံးလဲ ပြောပါ။
- 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()
ကို ဘယ်လိုအချိန်မျိုးမှာ သုံးနိုင်ပါသလဲ။ အဲ့ဒါမဟုတ်ပြောင်းပြန် ဆိုရင်ရော။ ဘာကြောင့်လဲ။
- Event delegation အကြောင်းရှင်းပြပါ။
this
က Javascript မှာ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။- Prototypal inheritance က ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
- AMD နှင့် CommonJS ကိုယှဉ်ပြပါ။
- ဘာကြောင့် IIFE မှာ
function foo(){}();
; အလုပ်မလုပ်တာလည်း။- ဘာကိုပြောင်းလိုက်ရင် အလုပ်လုပ်ပါမည်နည်း။
- Variable တစ်ခု၏
null
,undefined
orundeclared
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 ကို အသေးစိတ်ကျကျ ရှင်းပါ။
- Ajax သုံးခြင်းရဲ့ အားသာချက်၊ အားနည်းချက်များကို ရှင်းပါ။
- JSONP က ဘယ်လိုအလုပ်လုပ်သလဲပြောပါ။ (AJAX နှင့် ဘယ်လို မတူကြောင်းရှင်းပါ)
- Javascript templating သုံးဖူးပါသလား၊
- ဘယ် Library တွေသုံးဖူးပါသလဲ။
- "hoisting" ကိုရှင်းပြပါ။
- Event bubbling အကြောင်းရှင်းပါ။
- "attribute" နှင့် "property" ဘယ်လိုကွာပါသလဲ။
- နဂိုကတည်းကရှိသည့် JavaScript object တွေကို extend လုပ်ခြင်းသည် ဘာ့ကြောင့် မလုပ်သင့်တာလဲ။
- Document load event နဲ့ document DOMContentLoaded event က ဘယ်လိုကွာသလဲ။
==
နှင့်===
ကွာခြားပုံကိုပြောပါ။- Javascript ၏ same-origin policy အကြောင်းရှင်းပါ။
- အောက်ပါကုဒ်ကို အလုပ်လုပ်အောင် လုပ်ပါ။
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 တွေနဲ့ပါတ်သက်ြပီး အတွေ့အကြုံအကြောင်းပြောပြပါ။
- Promise တွေကိုသုံးြခင်းနှင့် Callback တွေကိုသုံးခြင်းတို့၏ အားနည်းချက်၊ အားသာချက်များကို ရှင်းပါ။
- Javascript ကို တခြား language တစ်ခုနှင့် develop လုပ်ပြီး Javascript သို့ compile လုပ်ခြင်းနှင့်ပါတ်သက်ပြီး အားနည်းချက် အားသာချက်များကို ပြောပြပါ။
- ဘယ်လို tools တွေ၊ technique တွေကို သုံးပြီး javascript ကို debug လုပ်ပါသလဲ။
- ဘယ်လို language construction ကိုသုံးပြီး object တစ်ခုရဲ့ properties တွေနှင့် array item တွေကို iterate လုပ်ပါသလဲ။
- Mutable နှင့် immutable object တွေဘယ်လိုကွာခြားပါသလဲ။
- Javascript မှာ ဘယ်လို object မျိုးသည် immutable object ဖြစ်ပါသလဲ။
- Immutability ရဲ့ အားနည်းချက်၊ အားသာချက်များက ဘာတွေလဲ။
- ကိုယ့်ရဲ့ code ထဲမှာ immutability ကို ဘယ်လို ရအောင်လုပ်နိုင်သလဲ။
- Synchronous နဲ့ asynchronous function တွေရဲ့ ကွာခြားချက်ကိုပြောပါ။
- Event loop ဆိုတာဘာလဲ။
- Call stack နဲ့ task queue က ဘာကွာလဲ။
function foo() {}
နှင့်var foo = function() {}
မှာfoo
ရဲ့ကွာခြားချက်ကိုပြောပါ။
- ကိုယ်ရေးတဲ့ code ကို test လုပ်ခြင်းအားဖြင့် ဘယ်လိုအားနည်းချက်၊ အားသာချက်များရှိပါသလဲ။
- ကိုယ်ရေးတဲ့ code ရဲ့ functionality ကို test လုပ်ဖို့အတွက် ဘယ်လို tool တွေ သုံးမှာလဲ။
- Unit test နဲ့ function/integration test တို့ ဘယ်လိုကွာခြားပါသလဲ။
- Code style linting tool ရဲ့ ရည်ရွယ်ချက်ကို ပြောပါ။
- ဘယ်လို tools တွေကို သုံးပြီး performance bug တွေကို ရှာရမှာလဲ။
- Website တစ်ခုရဲ့ scrolling နဲ့ပါတ်သက်ပြီး performance ဘယ်လိုကောင်းအောင်လုပ်ရမှာလဲ
- Layout, painting နှင့် compositing ရဲ့ကွာခြားချက်ကိုပြောပါ။
- သာမန်ရိုးကျအားဖြင့်၊ ဘာကြောင့် 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
- HTTP Methods တွေကဘာတွေလဲ။ သူတို့ရဲ့ ကွာခြားချက်များကိုရှင်းပါ။
Question: foo
၏ value ကိုပြောပါ။
var foo = 10 + '20';
Question: အောက်ပါ code ကို ဘယ်လိုအလုပ်လုပ်အောင်လုပ်မည်နည်း။
add(2, 5); // 7
add(2)(5); // 7
Question: အောက်ပါ statement မှ ဘာကို return ပြန်မည်နည်း။
"i'm a lasagna hog".split("").reverse().join("");
Question: window.foo
၏ value ကို ပြောပါ။
( window.foo || ( window.foo = "bar" ) );
Question: အောက်ပါ alert နှစ်ခုက ဘာပြမည်နည်း။
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);
Question: foo.length
၏ value ကိုပြောပါ။
var foo = [];
foo.push(1);
foo.push(2);
Question: foo.x
၏ value ကိုပြောပါ။?
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
Question: အောက်ပါ ကုဒ်က ဘာ print ထုတ်မည်နည်း။?
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');
- သင်လတ်တလောလုပ်ဖူးတဲ့ project များထဲက cool ဖြစ်တဲ့ project တစ်ခုအကြောင်းပြောပါ။
- သင်သုံးတဲ့ developer tools တွေထဲက ဘယ်လိုအရာမျိုးတွေကို ကြိုက်ပါသလဲ။
- Front-end community ထဲမှာ ဘယ်သူတွေကို စံနမူနာယူပါသလဲ။
- အပျော်တမ်း၊ အားလပ်ချိန်မှာ လုပ်နေတဲ့ project တွေရှိပါသလား။ ဘယ်လိုမျိုးတွေလဲ။
- Internet Explorer ရဲ့ အကြိုက်ဆုံး feature တစ်ခုပြောပါ။
- ကော်ဖီကို ဘယ်လိုသောက်ပါသလဲ။
This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.
It has since received contributions from over 100 developers.
Burmese translation provided by @mmhan.