Daftar Pertanyaan Wawancara Kerja Front-End

Daftar Pertanyaan Wawancara Kerja Front-End

File ini berisi sejumlah pertanyaan teknis yang dapat digunakan saat mewawancarai calon pekerja. Namun, bukan berarti anda dianjurkan untuk bertanya kepada si calon pekerja dengan semua pertanyaan dari daftar di bawah ini (karena itu akan memakan waktu beberapa jam). Dengan cukup memilih beberapa pertanyaan dari daftar ini akan membantu anda mengenal kemampuan yang anda cari dari si calon pekerja.

Catatan: Perlu diingat bahwa kebanyakan pertanyaan-pertanyaan ini bersifat terbuka dan mungkin dapat mengarah menjadi diskusi menarik yang bisa memberikan gambaran lebih lanjut mengenai kemampuan seseorang.

Daftar Isi

  1. Pertanyaan Umum
  2. Pertanyaan HTML
  3. Pertanyaan CSS
  4. Pertanyaan JS
  5. Pertanyaan Pengujian
  6. Pertanyaan Kinerja
  7. Pertanyaan Jaringan
  8. Pertanyaan Koding
  9. Pertanyaan Seru / Sampingan

Cara Partisipasi

  1. Kontributor
  2. Cara Kontribusi
  3. Lisensi

Pertanyaan Umum:

  • Apa yang baru Anda pelajari kemarin / minggu ini?
  • Apa yang membuatmu tertarik dengan coding?
  • Tantangan teknis apa yang baru-baru ini Anda hadapi, dan bagaimana Anda mengatasinya?
  • Bisakah anda menjelaskan teknik apa yang anda gunakan untuk meningkatkan performa ketika membangun atau memelihara sebuah website?
  • Jelaskan teknik SEO yang kamu gunakan belakangan ini.
  • Bisakah anda menjelaskan teknik - teknik umum atau masalah terkini yang sudah dipecahkan terkait keamanan front-end?
  • Tindakan apa yang anda lakukan pada projek terbaru anda untuk meningkatkan kinerja anda dalam merawat sebuah kode?
  • Pertimbangan-pertimbangan apa yang Anda ambil dari sisi UI, Keamanan, Kinerja, SEO, Maintainability maupun Teknologi saat Anda membangun aplikasi web atau situs?
  • Jelaskan tentang lingkungan coding yang Anda sukai. (OS, Editor atau IDE, Browser, Tools, dll)
  • Sistem kontrol versi apa saja yang Anda kenali?
  • Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat sebuah situs?
  • Katakan Anda memiliki 5 stylesheet yang berbeda, bagaimana cara terbaik untuk mengintegrasikannya ke situs Anda?
  • Dapatkah Anda menjelaskan perbedaan antara progressive enhancement dan graceful degradation?
  • Bagaimana Anda mengoptimalkan aset / resource sebuah website?
  • Berapa banyak resource yang didownload oleh browser dari domain pada suatu waktu?
    • Apa saja pengecualiannya?
  • Sebutkan 3 cara untuk mengurangi beban halaman (waktu yang dirasakan maupun waktu loading yang sebenarnya).
  • Jika Anda mendapatkan sebuah proyek, dan dalam proyek ini mereka menggunakan tab dan Anda menggunakan space, apa yang akan Anda lakukan?
  • Jelaskan bagaimana Anda membuat halaman slideshow sederhana.
  • Jika Anda bisa mempelajari satu teknologi tahun ini, apakah itu?
  • Jelaskan pentingnya standar dan badan-badan standar.
  • Apa itu Flash of Unstyled Content alias FOUC? Bagaimana Anda menghindari FOUC?
  • Jelaskan apa itu ARIA dan screenreader, dan bagaimana membuat sebuah website dapat diakses.
  • Jelaskan beberapa pro dan kontra animasi CSS dibandingkan animasi JavaScript.
  • Apa arti CORS dan tujuannya?
  • Bagaimana anda menyikapi perbedaan pendapat antara bos anda atau kontributor anda?
  • Sumber mana yang kamu pakai untuk belajar front-end development dan desain?
  • Apa Skill yang dibutuhkan untuk menjadi front-end developer yang baik?
  • Peran apa yang anda lihat dalam diri anda?
  • Jelaskan perbedaan antara cookies, penyimpanan session, dan penyimpanan lokal.

Pertanyaan HTML:

  • Apa yang doctype lakukan?
  • Bagaimana Anda melayani halaman dengan konten dalam berbagai bahasa?
  • Apa saja hal yang harus Anda waspadai ketika mendesain atau mengembangkan situs multibahasa?
  • Apa kegunaan atribut data-?
  • Katakanlah HTML5 adalah platform web terbuka, apa saja yang membentuk HTML5?
  • Jelaskan perbedaan antara cookie, sessionStorage dan localStorage.
  • Jelaskan perbedaan antara <script>, <script async> dan <script defer>.
  • Mengapa meletakkan <link> CSS di antara <head></head> dan meletakkan <script> JS sebelum <body></body> dianggap baik pada umumnya? Apakah ada pengecualiannya?
  • Apa itu progressive rendering?
  • Apakah Anda pernah menggunakan bahasa HTML templating yang berbeda?

Pertanyaan CSS:

  • Apa itu CSS selector specifity dan bagaimana cara kerjanya?
  • Apa perbedaan antara reset dan normalisasi dalam CSS? Apa yang Anda pilih, dan kenapa?
  • Jelaskan float dan cara kerjanya.
  • Jelaskan z-index dan bagaimana susunan konteks terbentuk.
  • Jelaskan BFC (Block Formatting Context) dan bagaimana cara kerjanya?
  • Apa saja teknik-teknik clearing, dan yang mana sesuai untuk konteks apa?
  • Bagaimana anda menghadapi masalah styling yang spesifik pada browser?
  • Bagaimana Anda melayani halaman untuk browser dengan fitur terbatas?
    • Teknik / contents apa yang Anda gunakan?
  • Apa saja cara-cara untuk menyembunyikan suatu konten secara visual (dan membuatnya tersedia hanya untuk pembaca layar / screenreader)?
  • Apakah Anda pernah menggunakan sistem grid, dan jika pernah, apa yang lebih Anda sukai?
  • Apakah Anda pernah menggunakan atau menerapkan media query atau layout / CSS khusus untuk mobile?
  • Apakah Anda fasih dengan styling SVG?
  • Bisakah anda menjelaskan contoh properti @media selain screen?
  • Apa saja yang perlu diwaspadai dalam menulis CSS yang efisien?
  • Apa keuntungan / kerugian dari menggunakan precontentsor CSS? (Sass, Compass, Stylus, LESS)
    • Jelaskan apa yang Anda sukai dan tidak sukai dari precontentsor CSS yang pernah Anda gunakan.
  • Bagaimana Anda akan menerapkan desain web comp yang menggunakan font non-standar?
  • Jelaskan bagaimana browser mencocokan suatu elemen dengan selector CSS.
  • Jelaskan apa itu pesudo-element dan bagaimana penggunaannya.
  • Jelaskan pemahaman Anda tentang model kotak, dan bagaimana Anda memberitahu suatu browser dalam CSS untuk menggunakan layout model kotak yang mana.
  • Apa yang terjadi dengan ini : { box-sizing: border-box; }? Apa keuntungannya?
  • Sebutkan sebanyak mungkin value untuk properti display yang anda ingat.
  • Apa perbedaan antara inline dan inline-block?
  • Apa perbedaan antara selektor ‘nth-f-type()’ dan ‘nth-child()’?
  • Apa perbedaan antara elemen yang diposisikan secara relative, fixed, absolute, dan static?
  • Huruf ‘C’ dalam CSS adalah singkatan dari Cascading. Bagaimana cara kerja prioritas dalam menentukan stylenya (berikan beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?
  • Framework CSS apa yang pernah Anda gunakan secara lokal, maupun dalam produksi? (Bootstrap, PureCSS, Foundation dll). Dan kalau bisa, bagaimana Anda ingin mengubah / memperbaikinya?
  • Apakah anda pernah menggunakan CSS grid?
  • Bisakah anda menjelaskan perbedaan antara memprogram website agar resposive vs strategi mobile-first?
  • Apakah Anda pernah bekerja dengan grafis retina? Jika ya, kapan dan teknik apa yang Anda gunakan?
  • Apakah Anda mempunyai alasan untuk menggunakan translate() dibandingkan posisi absolute, ataupun sebaliknya? Kenapa?
  • Bagaimana properti clearfix css bisa berguna?

Pertanyaan JS:

  • Jelaskan event delegation.
  • Jelaskan bagaimana cara kerja this dalam JavaScript.
    • Bisakah anda memberikan contoh cara kerja this yang berubah di ES6?
  • Jelaskan cara kerja inheritance prototype.
  • Apa perbedaan antara variabel: null,undefined dan undeclared?
    • Bagaimana Anda menguji status-status variabel ini?
  • Apa itu closure, dan bagaimana / mengapa Anda akan menggunakannya?
  • Konstruksi bahasa apa yang anda gunakan untuk pengulangan object properties dan array items?
  • Bisakah anda menjelaskan perbedaan antara pengulangan ‘Array.forEach()’ dan metode ‘Array,map()’? Mana yang kamu pilih? dan kenapa?
  • Bagaimana biasanya fungsi anonim (anonymous function) digunakan?
  • Apa perbedaan antara host object dan native object?
  • Apa perbedaan antara: function Person(){}, var person = Person(), dan var person = new Person()?
  • Apa perbedaan penggunaan foo dalam function foo() dan var foo = function()?
  • Jelaskan Function.prototype.bind.
  • Apa perbedaan antara fitur deteksi, fitur inferensi, dan penggunaan string UA?
  • Jelaskan “hoisting”.
  • Jelaskan event bubbling.
  • Apa perbedaan antara “atribut” dan “properti”?
  • Mengapa tidak baik meng-extend object Javascript built-in?
  • Apa perbedaan antara == dan ===?
  • Jelaskan kebijakan same-origin dalam konteks JavaScript.
  • Mengapa disebut ekspresi Ternary, dan apa maksud “Ternary”?
  • Apa itu "use strict";? Apa keuntungan dan kerugian dalam penggunaannya?
  • Apa keuntungan / kerugian menulis kode JavaScript dalam bahasa yang kompile ke JavaScript?
  • Program dan teknik apa yang Anda gunakan dalam mendebug kode Javascript?
  • Konstruksi bahasa apa yang Anda gunakan untuk mengiterasi properti objek dan array?
  • Jelaskan perbedaan antara object mutable dan immutable
    • Apa contoh objek immutable dalam JavaScript?
    • Apa pro dan kontra immutability?
    • Bagaimana Anda mencapai immutability dalam kode Anda?
  • Jelaskan perbedaan antara fungsi synchronous dan asynchronous.
  • event loop itu apa?
    • Perbedaan antara call stack dan task queue itu apa?
  • Apa perbedaan variabel yang dibuat dengan ‘let’, ‘var’ dan ‘const’?
  • Apa perbedaan antara kelas ES6 dan fungsi kontruktor ES5?
  • Bisakah anda memberikan contoh penggunaan syntax fungsi arrow ‘=>’? dana apa perbedaan syntax ini dengan syntax lain?
  • Apa keuntungan dalam menggunaakn syntax arrow pada methods di sebuah kontruktor?
  • Apa definisi dari higher-order function?
  • Bisakah anda memberikan contoh untuk destructuring sebuah objek maupun array?
  • Bisakah anda memberikan contoh deklarasi sebuah string dengan template literal ES6?
  • Bisakah anda memberikan contoh fungsi curry dan kenapa syntax ini lebih unggul dibanding syntac lain?
  • Apa keuntungan dari penggunaan ‘spread syntax’? jelaskan perbedaanya dengan ‘rest syntax’.
  • Bagaimana anda membagi kode anda dalam beberapa file?
  • Kenapa anda mungkin akan membuat member kelas static?
  • Apa perbedaan antara pengulangan ‘while’ dan ‘do-while’ dalam JavaScript?

Pertanyaan Pengujian

  • Apakah keuntungan / kerugian menguji kode Anda?
  • Program apa yang Anda gunakan untuk menguji kinerja kode Anda?
  • Apa saja perbedaan antara tes unit dan tes fungsi/integrasi?
  • apa tujuan dari alat ‘code style linting’?
  • Sebutkan beberapa testing practices terbaik.

Pertanyaan Kinerja

  • Tool apa yang Anda gunakan untuk mencari masalah kinerja dalam kode Anda?
  • Apa saja cara-cara yang dapat meningkatkan kinerja scrolling dalam website Anda?
  • Jelaskan perbedaan antara layout, painting, dan compositing.

Pertanyaan Jaringan:

  • Secara tradisional, mengapa lebih baik untuk melayani aset situs dari beberapa domain?
  • Jelaskan semampu Anda, bagaimana contents kerja dari saat Anda mengetikkan URL situs web sampai saat halamannya selesai tampil di layar Anda.
  • Apakah perbedaan antara Long-Polling, Websockets dan Server-Sent Events (SSE)?
  • Jelaskan request dan response header berikut ini:
    • Perbedaan antara Expires, Date, Age dan If-Modified-…
    • Do Not Track (DNT)
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • aksi HTTP itu apa? Sebutkan aksi-aksi HTTP yang Anda tahu, dan jelaskan.
  • Apa itu domain pre-fetching dan bagaimana hal itu bisa menambah performa?
  • Apa itu CDN dan apa keuntungannya jika kita menggunakannya?

Pertanyaan koding:

Pertanyaan: Apakah hasil foo?

var foo = 10 + '20';

Pertanyaan: Bagaimana Anda akan membuat fungsi berikut ini bekerja?

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

Pertanyaan: Apakah hasil yang akan dikembalikan dari pernyataan berikut?

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

Pertanyaan: Apakah nilai window.foo?

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

Pertanyaan: Apakah hasil dari dua alert di bawah ini?

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

Pertanyaan: Apakah hasil foo.length?

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

Pertanyaan: Apakah hasil foo.x?

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

Pertanyaan: Apakah hasil yang akan diprint dalam kode berikut ini?

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

Pertanyaan Seru / Sampingan:

  • Apa saja proyek menarik yang baru-baru ini Anda kerjakan?
  • Apa sajakah hal-hal yang Anda sukai tentang alat pengembang yang Anda gunakan?
  • Siapa yang menginspirasi anda di komunitas front-end?
  • Apakah Anda mempunyai proyek yang anda sukai? Apa saja?
  • Apa fitur favorit Anda di Internet Explorer?

Contributors:

Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi dari @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed dan @iansym.

Dari sejak itu, dokumen ini sudah menerima kontribusi lebih dari 100 developers.

Edit this page