Otázky k pohovoru; front-end vývojár

Otázky k pohovoru: front-end vývojár

Tento repozitár obsahuje rad otázok, ktoré môžete položiť pri pohovore kandidátovi na pozíciu front-end vývojár a overiť si tak jeho znalosti v tomto odbore. Nie je zamýšľané položiť všetky tieto otázky (ich korektné zodpovedanie by trvalo hodiny), bohato postačí len určitú časť vyhovujúcu vašim potrebám.

Za prečítanie stojí tiež Baseline For Front-End Developers (anglicky) od Rebecci Murphey.

Poznámka: Majte na pamäti, že tieto otázky majú viesť skôr k diskusii na danú tému a prezradiť tak niečo viac o schopnostiach daného vývojára, než aby boli zodpovedané jedným slovom alebo vetou.

Obsah

  1. Pôvodní prispievatelia
  2. Všeobecné otázky
  3. HTML otázky
  4. CSS otázky
  5. JS otázky
  6. jQuery otázky
  7. Otázky z kódu
  8. Zábavné otázky
  9. Ďalšie zaujímave referencie

[⬆] Pôvodní prispievatelia:

Väčšina otázok bola prevzatá z oksoclap pôvodne vytvoreného Paulom Irishom (@paul_irish) a následne doplnená týmito osobami:

[⬆] Všeobecné otázky:

  • Čo ste sa naučili včera/minulý týždeň nové?
  • Čo vás vzrušuje alebo zaujíma na kódovaní?
  • Povedzte niečo o vašom obľúbenom vývojovom prostredí (operačný systém, editor, prehliadač, nástroje, …).
  • Opíšte ako postupujete pri vytváraní novej webovej stránky.
  • Dokážete vysvetliť rozdiel medzi pozvoľným degradovaním (graceful degradation) a postupným vylepšovaním (progressive enhancement)?
      * Body navyše za opis detekcie pokročilej funkcionality
  • Vysvetlite pojem “sémantické HTML”.
  • Ako by ste optimalizovali zdroje (obrázky, JS, CSS, …) webovej stránky?
      * K dispozícii je celý rad optimalizácií napr.:
        * spájanie súborov
        * minifikácia súborov
        * CDN hosťovanie
        * caching, …
  • Prečo je lepšie posielať zdroje webovej stránky z viacerých domén?
      * Koľko súborov môže z danej domény sťahovať prehliadač naraz?
  • Vymenujte tri spôsoby ako znížiť dobu nahrávania webovej stránky (vnímanú alebo skutočnú dobu nahrávania).
  • Ak nastúpite do projektu, kde sa namiesto odsadzovania tabulátormi používajú medzery, čo urobíte?
      * Navrhnutie, že projekt by mohol využívať niečo ako EditorConfig (http://editorconfig.org)
      * Prispôsobenie sa konvencii (ale zostať konzistentný).
      * issue :retab ! command
  • Napíšte jednoduchú stránku so slideshow.
      * Body navyše pokiaľ nepoužíva JS.
  • Aké nástroje používate pre testovanie rýchlosti vášho kódu?
      * Profiler, JSPerf, Dromaeo
  • Ak by ste sa chcel/chcela tento rok naučiť jednu novú technológiu, ktorá by to bola?
  • Vysvetlite dôležitosť štandardov a štandardizačných orgánov.
  • Čo to je FOUC? Ako je možné sa vyhnúť FOUC?

[⬆] HTML otázky:

  • Čo robí doctype?
  • Aký je rozdiel medzi štandardným a tkz. quirks módom?
  • Aké sú obmedzenia pri poskytovaní XHTML stránok?
      * Existuje nejaký problém pri poskytovaní stránok ako application/xhtml+xml?
  • Ako poskytujete stránku s viacjazyčným obsahom?
      * Na čo všetko si musíte dať pozor pri vytváraní viacjazyčnej stránky?
  • K čomu sú dobré atribúty data-?
  • Uvažujte o HTML5 ako o otvorenej platorme. Aké sú základné stavebné kamene HTML5?
  • Opíšte rozdiel medzi cookies, sessionStorage a localStorage.

[⬆] CSS otázky:

  • Opíšte čo robí a na čo je dobrý “reset” CSS súbor.
  • Opíšte obtekanie (floats) a ako funguje.
  • Popíšte rôzne techniky pre zastavenie obtekania (clear fixing) a povedzte, ktoré sa hodia v ktorom kontexte.
  • Vysvetlite, čo to sú CSS sprites a ako by ste ich implementovali.
  • Aká je vaša obľúbená technika pre nahrádzanie obrázkov a ktorú a kedy používate?
  • CSS property hacks, podmienené vkladanie .css súborov alebo niečo ďalšie?
  • Ako poskytujete stránky pre funkcionálne/vlastnosťami obmedzený prehliadač?
      * Akú techniku​/proces používate?
  • Aké sú spôsoby pre zneviditeľnie obsahu (a zachovanie jeho dostupnosti pre čítačky)?
  • Použili ste niekedy grid systém a ak áno, ktorý uprednostňujete?
  • Použili ste niekedy mediálne selektory (media query) alebo špecifický layout/CSS pre mobilné zariadenia?
  • Máte nejaké skúsenosti so štýlovaním SVG?
  • Ako optimalizujete stránky pre tlač?
  • Aké sú zásady pre písanie efektívneho CSS?
  • Aké sú výhody/nevýhody použítia CSS preprocesorov (SASS, Compass, Stylus, LESS)?
      * Popíšte, čo sa Vám na CSS preprocesoroch, ktoré ste použili, páči/nepáči.
  • Ako by ste implementovali návrh webovej stránky, ktorá používa neštandardné rezy písma?
      * Webfonts (služby typu: Google Webfonts, Typekit, …)
  • Vysvetlite ako prehliadač určuje, ktorý element zodpovedá CSS selektoru.
  • Vysvetlite vaše chápanie box modelu a ako poviete pomocou CSS prehliadaču, aby váš layout vykreslil v odlišnom box modele

[⬆] JS otázky:

  • Vysvetlite delegáciu udalostí.
  • Vysvetlite ako funguje this v JavaScripte.
  • Vysvetlite ako funguje prototypová dedičnosť.
  • Ako testujete JavaScript?
  • AMD vs. CommonJS?
  • Čo je hashovacia tabuľka?
  • Vysvetlite, prečo nasledujúce volanie nebude fungovať ako IIFE : function foo(){ }();.
      * Čo musíte zmeniť, aby volanie zafungovalo ako IIFE?
  • Vysvetlite rozdiel medzi premennou, ktorá je null, undefined alebo undeclared?
      * Akým spôsobom by ste overili tieto jednotlivé stavy?
  • Čo to je “closure” a ako/prečo by sme ich mali používať?
  • Aké je typické využitie pre anonymné funkcie?
  • Vysvetlite “JavaScript module pattern” a kedy by ste ho mali použiť.
      * Body navyše za zmienku o čistých menných priestoroch.
      * Čo ak sú vaše moduly bez menného priestora?
  • Ako organizujete váš kód? (module pattern, klasická dedičnosť?)
  • Aký je rozdiel medzi natívnymi a hostiteľskými objektami?
  • Rozdiel medzi:
function Person(){}
var person = Person()
var person = new Person()
  • Aký je rozdiel medzi .call a .apply?
  • Aký je rozdiel medzi undefined a null?
  • Vysvetlite Function.prototype.bind.
  • Kedy optimalizujete váš kód?
  • Vysvetlite, ako funguje dedičnosť v JavaScripte.
  • Kedy by ste použili document.write()?
      * Väčšina generovaných reklám stále používa tento prístup aj napriek tomu, že je to dlhodobo odsudzované.
  • Aký je rozdiel medzi detekciou vlastností, odvodením vlastností a použitím UA reťazca?
  • Vysvetlite AJAX čo najpodrobnejšie to ide.
  • Vysvetlite, ako funguje JSONP (a prečo to nie je naozajstný AJAX).
  • Použili ste niekedy JavaScriptové šablóny?
      * Ak áno, ktoré knižnice ste použili (mustache.js, Handlebars, …)?
  • Vysvetlite “hoisting”.
  • Vysvetlite prebublávanie udalostí.
  • Aký je rozdiel medzi atribútom (attribute) a vlastnosťou (property)?
  • Prečo nie je dobrý nápad rozširovať natívne JavaScriptové objekty?
  • Prečo je dobrý nápad rozširovať natívne JavaScriptové objekty?
  • Aký je rozdiel medzi udalosťami “document load” a “document ready”?
  • Aký je rozdiel medzi == a ===?
  • Vysvetlite, akým spôsobom získate parameter z URL zadaného v okne prehliadača.
  • Vysvetlite JavaScriptové pravidlo rovnakého pôvodu (same-origin policy).
  • Opíšte prístupy dedenia v JavaScripte.
  • Nasledujúci kód upravte tak, aby fungoval:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Opíšte stratégiu pre memorizáciu (odstránenie opakovaných výpočtov) v JavaScripte.
  • Prečo sa hovorí ternárny operátor, čo označuje slovo ternárny?
  • Čo je označované ako “arita” funkcie?
  • Čo znamená "use strict";? Aké sú výhody a nevýhody použitia?

[⬆] jQuery otázky:

  • Vysvetlite reťazenie (chaining).
  • Vysvetlite odkladanie (deferreds).
  • Aké poznáte a viete implementovať optimalizácie špeciálne pre jQuery?
  • Čo robí .end()?
  • Ako a prečo by ste váš “event handler” zaopatrili menným priestorom?
  • Vymenujte štyri rôzne typy hodnôt, ktoré môžete odovzdať ako vstupný parameter metód v jQuery.
      * selektor (reťazec), HTML (reťazec), callback (funkcia), HTMLElement, object, polia, polia elementu, jQuery Object, …
  • Čo to je fronta efektov (alebo fx front)?
  • Aký je rozdiel medzi .get(), [] a .eq()?
  • Aký je rozdiel medzi .bind(), .live() a .delegate()?
  • Aký je rozdiel medzi $ a $.fn? Alebo len, čo je $.fn?
  • Zoptimalizujte tento selektor :
$(".foo div#bar:eq(0)");
  • Aký je rozdiel medzi .delegate() a .live()?

[⬆] Otázky z kódu:

modulo(12, 5) // 2

Otázka: Implementujte funkciu modulo tak, aby splnila zadanie.

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

Otázka: Akú hodnotu vráti uvedený výraz?

Odpoveď:" goh angasal a m’i"

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

Otázka: Akú hodnotu má window.foo?

Odpoveď: “bar” (iba ak window.foo bolo false, inak vráti svojou hodnotu)

var foo = "Hello";

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

alert(foo + bar);

Otázka: Čo zobrazia uvedené dva alerty?

Odpoveď: “Hello World” a ReferenceError: bar is not defined

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

Otázka: Aká je hodnota foo.length?

Odpoveď: 2

[⬆] Zábavné otázky:

  • Aká je najúžasnejšia vec, ktorú ste kedy nakódovali, alebo na ktorú ste najviac pyšní?
  • Aké sú vaše obľúbené časti vývojárskych nástrojov, ktoré používate?
  • Máte nejaký vlastný hobby projekt?
  • Aká je Vaša obľúbená vlastnosť Internet Exploreru?

[⬆] Ďalšie zaujímavé referencie:

Edit this page