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?
  • 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?

Pertanyaan HTML:

  • Apa yang doctype lakukan?
  • Apa perbedaan antara modus standar dan modus quirks?
  • Apa perbedaan antara HTML dan XHTML?
  • Apakah ada masalah dengan melayani halaman sebagai aplikasi/xhtml+xml?
  • 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-?
  • Katakan 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?
  • Jelaskan perbedaan antara GET danPOST.

Pertanyaan CSS:

  • Apa perbedaan antara class dan id dalam CSS?
  • 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.
  • Apa saja teknik-teknik kliring, dan yang mana sesuai untuk konteks apa?
  • Jelaskan sprite CSS, dan bagaimana Anda implementasikan pada suatu halaman atau situs.
  • Apa teknik pengganti gambar favorit Anda? Dan yang mana akan Anda gunakan, lalu kapan digunakan?
  • 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?
  • Bagaimana Anda mengoptimalkan halaman web Anda untuk dicetak?
  • 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 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 mencoba CSS Flexbox yang baru atau Grid specs?
  • Bagaimana desain responsif berbeda dari desain adaptif?
  • 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?

Pertanyaan JS:

  • Jelaskan event delegation.
  • Jelaskan bagaimana cara kerja this dalam JavaScript.
  • Jelaskan cara kerja inheritance prototype.
  • Apa pendapat Anda mengenai AMD dan CommonJS?
  • Jelaskan mengapa berikut ini tidak bekerja sebagai IIFE: function foo () {} ();.
    • Apa yang perlu diubah untuk membuatnya sebagai IIFE?
  • Apa perbedaan antara variabel: null,undefined dan undeclared?
    • Bagaimana Anda menguji status-status variabel ini?
  • Apa itu closure, dan bagaimana / mengapa Anda akan menggunakannya?
  • Bagaimana biasanya fungsi anonim (anonymous function) digunakan?
  • Bagaimana Anda mengatur kode Anda? (pola modul, warisan klasik?)
  • Apa perbedaan antara host object dan native object?
  • Apa perbedaan antara: function Person(){}, var person = Person(), dan var person = new Person()?
  • Apa perbedaan antara .call dan.apply?
  • Jelaskan Function.prototype.bind.
  • Kapan saja document.write () digunakan?
  • Kapan saja Anda mengoptimalkan kode Anda?
  • Apa perbedaan antara fitur deteksi, fitur inferensi, dan penggunaan string UA?
  • Jelaskan AJAX sedetail mungkin.
  • Apa keuntungan dan kerugian menggunakan AJAX?
  • Jelaskan bagaimana cara kerja JSONP (dan bagaimana itu bukan AJAX).
  • Apakah Anda pernah menggunakan JavaScript template?
    • Kalau ya, library apa yang pernah Anda gunakan? (Mustache.js, Handlebars dll.)
  • Jelaskan “hoisting”.
  • Jelaskan event bubbling.
  • Apa perbedaan antara “atribut” dan “properti”?
  • Mengapa tidak baik meng-extend object Javascript built-in?
  • Apa perbedaan antara document load dan document ready?
  • Apa perbedaan antara == dan ===?
  • Jelaskan kebijakan same-origin dalam konteks JavaScript.
  • Kerjakan ini :
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Mengapa disebut ekspresi Ternary, dan apa maksud “Ternary”?
  • Apa itu "use strict";? Apa keuntungan dan kerugian dalam penggunaannya?
  • Buatkan loop yang beriterasi sampai 100, dan print “fizz” pada kelipatan 3, “buzz” pada kelipatan 5 dan “fizzbuzz” pada kelipatan 3 dan 5.
  • Kenapa pada umumnya, lebih baik membiarkan scope global dalam suatu website sebagai apa adanya dan jangan diutak-atik?
  • Kenapa load event digunakan? Apakah event ini mempunyai kerugiannya? Apakah Anda tau cara alternatif lain, dan kenapa Anda menggunakan cara itu?
  • Jelaskan apa itu single page app, dan bagaimana membuatnya ramah SEO?
  • Sejauh apa pengalaman Anda dengan promise dan / atau polyfills?
  • Apakah pro dan kontrak menggunakan promise dibandingkan callback?
  • 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?

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?
  • Apakah tujuan program lint?

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.

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?
  • Apakah Anda mempunyai proyek yang anda sukai? Apa saja?
  • Apa fitur favorit Anda di Internet Explorer?
  • Apa tipe kopi favorit Anda?

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.