Intervju za posao Front-end Developer-a

Intervju za posao Front-end Developer-a

@version 0.0.1

Ovaj repo sadrži mnogobrojna pitanja za intervju iz oblasti front-end develpment-a koja možete koristiti u proceni mogućih kandidata.
Ne preporučuje se korišćenje svih pitanja jer bi intervju trajao dugo. Izbor od nekoliko pitanja sa ove liste bi Vam pomogao.

Pre intevjua, preporučujemo da proučite članak: Rebecca Murphey Baseline For Front-End Developers.

Napomena: Uzmite u obzir da veliki broj dole navedenih pitanja može biti korisna tema za razgovor koja će Vam možda reći vise o sposobnostima osobe nego direktni odgovori.

Autori originalne liste

Većina pitanja je preuzeta sa oksoclap tj. rasprave koju je originalno pokrenuo Paul Irish (@paul_irish) i kojoj su doprineli:

Opšta pitanja:

  • Opišite Vaš omiljeni radni prostor. (OS, Editor, Browseri, Alati itd.)
  • Opišite Vaš proces izrade web stranice?
  • Možete li opisati razliku između progresivnog poboljšanja i neprimjetne degradacije?
    • Bonus bodovi ako se opiše detektovanje mogućnosti browsera
  • Objasnite šta je to “Semantički HTML”.
  • Kako biste optimizirali infrastrukturu i resurse web stranice?
    • Traže se više rešenja, na primer:
      • Spajanje datoteka
      • Minifikacija datoteka
      • Korišćenje CDN-a
      • Keširanje (Caching)
      • itd.
  • Zbog čega je bolje preuzimati delove stranice sa više domena?
    • Koliko resursa browser može preuzeti istovremeno sa jednog domena?
  • Navedite tri načina za smanjivanje vremena učitavanja strane. (uočeno ili stvarno vrieme učitavanja)
  • Ako bi došli na projekt gde se koriste tabovi a Vi koristite razmake, šta biste uradili?
    • Preporučili korištenja EditorConfig-a (http://editorconfig.org)
    • Prilagodili se postojećoj praksi (zadržavanje konzistentnosti)
    • koristili :retab! naredbu
  • Napravite jednostavnu stranicu za prezentacije
    • Bonus bodovi ako se ne koristi JavaScript.
  • Koje alate koristite za testiranje performansi koda?
    • Profiler, JSPerf, Dromaeo
  • Kada bi ste odabrati jednu tehologiju koju ćete naučiti ove godine, koja bi to bila?
  • Objasnite važnost standarda i organizacija za standardizaciju
  • Šta je to FOUC? Kako možete izbeći FOUC?

HTML pitanja:

  • Koja je funkcija doctype?
  • Koja je razlika između standardnog i quirks moda?
  • Koja su ograničenja u obsluživanju XHTML standarda?
    • Postoje li problemi kod obsluživanju stranica sa header-om application/xhtml+xml?
  • Kako biste obslužili stranicu sa višejezičnim sadržajem?
    • Na što morate obratit pažnju prilikom dizajna ili razvoja višejezične stranicu?
  • Čemu služe data- atributi?
  • Posmatrajte HTML5 kao platformu otvorenog koda. Koji su gradivni elementi HTML-a 5?
  • Objasnite razliku između kolačića, podataka sesije (sessionStorage) i lokalnog snimanja.

CSS pitanja:

  • Objasnite čemu služi “reset” CSS i zašto je koristan.
  • Opišite šta su i kako rade Float-ovi.
  • Koje su tehnike clearing-a i u kojim slučajevima bi ste ih koristili?
  • Objasnite CSS sprite-ove i kako se koriste na stranici ili site-u.
  • Koje su Vaše omiljene tehnike zamene slike i kada ih koristite?
  • Koje su Vaše omiljene tehnike: CSS hack-ovi property-a, kondicionalno uključivanje .css datoteka, ili … nešto drugo?
  • Kako obslužujete sadržaj za browser-e slabijih mogućnosti?
    • Koje tehnike/procese koristite?
  • Koji su mogući načini za vizualno sakrivanje sadržaja (vidljivi su samo za screen reader-e)?
  • Da li ste ikada koristili grid system, i ako jeste koji Vam je omiljeni?
  • Da li ste koristili ili implementirali media querie-je ili layout/CSS specifične za mobilne?
  • Imate li iskustva u stilizovanju SVG slika?
  • Kako prilagođavate stranicu za štampu?
  • Šta se podrazumeva pod dobrom praksom za pisanje efikasnog CSS-a?
  • Koje su prednosti/nedostatci korišćenja CSS pred-procesora? (SASS, Compass, Stylus, LESS)
    • Opišite što vam se sviđa ili ne sviđa kod CSS pred-procesora koje ste koristili.
  • Objasnite kako bi ste napravili stranicu čiji dizajn ne koristi standardne fontove?
    • Webfont-ovi (font servisi poput: Google Webfonts, Typekit itd.)
  • Objasnite kako browser utvrđuje koji elementi odgovaraju CSS selector-u.
  • Objasnite Vaše razumevanje “box model”-a i na koji način bi ste naveli browser da prikaže (render) izgled vaše strane?

JavaScript pitanja:

  • Objasnite delegaciju događaja
  • Objasnite kako se u Javascriptu koristi this
  • Objasnite nasleđivanje prototype-a
  • Kako testirate JavaScript?
  • AMD ili CommonJS?
  • Šta je to hash tabela?
  • Objasnite zašto sledeća funkcija neće raditi kao IIFE: function foo(){ }();?
    • Šta treba izmeniti da bi radila kao IIFE?
  • U čemu je razlika između null, undefined i undeclared?
    • Kako bi ste promenili ova stanja?
  • Šta je closure, kako i zašto se koristi?
  • Koja je uobičajena primena anonimne funkcije?
  • Objasnite “JavaScript module pattern” i kada biste ga koristili.
    • Bonus bodovi za predlog namespacing-a
    • Šta ako su moduli bez namespacing-a?
  • Kako organizujete Vaš kod? (module pattern, klasično nasleđivanje?)
  • Koja je razlika između host i native objekta?
  • Koja je razlika između function Person(){}, var person = Person(), i var person = new Person()?
  • Koja je razlika između .call i .apply?
  • Objasnite Function.prototype.bind
  • Kada optimizirate Vaš kod?
  • Možete li objasniti nasleđivanje u JavaScriptu?
  • Kada koristite document.write()?
    • Većina oglasa još uvijek koristi document.write() iako se to ne preporučuje.
  • Koja je razlika između detekcije mogućnosti (feature detection), pretpostavljanje mogućnosti (feature inference) i korišćenja UA string-a?
  • Objasnite AJAX sa što više detalja
  • Objasnite kako radi JSONP (i u čemu se razlikuje od pravog AJAX-a)
  • Da li ste ikad koristili JavaScript template?
    • Ako da, koje ste koristili? (Mustache.js, Handlebars etc.)
  • Objasnite “hoisting”.
  • Objasnite propagaciju događaja (event bubbling).
  • Koja je razlika između “attribute”-a i “property”-a?
  • Zašto proširivanje ugrađenih JavaScript objekata nije najbolja ideja?
  • Zašto je proširivanje ugrađenih JavaScript objekata dobra ideja?
  • Koja je razlika između document load i document ready događaja?
  • Koja je razlika između == i ===?
  • Objasnite kako bi ste pročitali parametar URL adrese
  • Objasnite pravilo jednog izvora gledano sa staništa JavaScript-a.
  • Opišite načine nasleđivanja u JavaScript-u.
  • Popravite: [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Objasnite memoization strategiju (izbegavanje ponavljanja računanja) u Javascript-u.
  • Zašto se Ternarni operator zove Ternarni?
  • Šta je arity funkcije?
  • Šta radi "use strict";? Koje su mane, koje prednosti?

jQuery pitanja:

  • Objasnite “chaining”.
  • Objasnite “deferreds”.
  • Navedite koje optimizacije korišćenja jQuery-a znate?
  • Čemu služi .end() ?
  • Kada i zašto bi vezani (bound) događaj stavili u namespace?
  • Navedite četri vrednosti koje možete poslati jQuery metodu.
    • Selektor (string), HTML (string), Callback (funkcija), HTMLElement, object, array, element array, jQuery Object itd.
  • Čemu služi red efekata (fx)?
  • Koja je razlika između .get(),[], i.eq()`?
  • Koja je razlika između .bind(),.live(), i.delegate()`?
  • Koja je razlika između $ i $.fn? Ili samo što je $.fn.
  • Optimirajte selektor: $(".foo div#bar:eq(0)")
  • Razlika između ‘delegate()’ i ‘live()’?

Kod vežbe:

modulo(12, 5) // 2

Pitanje: Napišite modulo funkciju koja daje rezultat prikazan iznad

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

Pitanje: Šta će biti vraćeno iz funkcije prikazane iznad?

Odgovor: “goh angasal a m’i”

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

Pitanje: Koja je vrednost window.foo?

Odgovor: “bar”

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

Pitanje: Šta će se desiti kao rezultat 2 alerta iznad?

Odgovor: “Hello World” i ReferenceError: bar is not defined

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

Pitanje: Koja je vrednost foo.length?

Odgovor: 2

Zanimljiva pitanja:

  • Šta je najzanimljivije što ste napravili do sad? na čemu ste najponosniji?
  • Šta Vam je najinteresantnije u alatima koje koristite za rad?
  • Imate li neke hobi projekte? Koje?
  • Šta Vam se najviše sviđa kod Internet Explorer?

Dodatni clanci

Edit this page