H5BP Front-end Developer Interview Questions

Pytania oglne:
1. Czego nauczye si wczoraj/w tym tygodniu?React Higher Order Components Sequelize ORM dla
NodeJs
2. Co pobudza lub interesuje ci w programowaniu?Oglnie swoboda w tworzeniu. Moliwo
automatyzacji i rozwizywania codziennych czynnoci / problemw. Wyzwania, lubi duba w
problemach i je rozwizywa. Zmusza do cigego samodoskonalenia si. Cigej nauki. Jest te
form rywalizacji w deniu do doskonaego kodu.
3. Jakie jest Twoje preferowane rodowisko programistyczne? (system operacyjny, edytor,
przegldarki, narzdzia itd.)Systemem operacyjny: Linuks Edytor: dla drobnych zmian Vim, do
projektw Visual Studio Code / Webstorm, czasami uywam Spacemacs Przegldarki: Chromium,
Firefox, Google Chrome (Unstable) Narzdzia: Webpack, Gulp, konsola, tiling window manager,
ag, grep
4. Opisz kolejne zadania podczas tworzenia strony internetowej?Najpierw zbieranie wymaga
klienta, funkcjonalnych i niefunkcjonalnych. Tworzenie rodowiska - skrypty suce do
budowania w rodowisku developerskim i produkcyjnym - webpack, gulp. Szkielet strony i
semantyka, wypenienie kontentem + poprawa semantyki, stylowanie, animacje, dodawanie
interaktywnoci,
5. Opisz rnic midzy stopniowym ulepszaniem (progressive enhancement) i wdziczn
degradacj (graceful degradation)?Graceful degradation - oprogramowanie / strona jest
tworzona dla uytkownikw uywajcych nowszych przegldarek, obsugujcych nowe
technologie, zapewniajc im pene user expirience. Stopniowo zmniejsza si user expirience dla
uytkownikw uywajcych starsze wersje przegldarek, wci zapewniajc im funkcjonalno
aplikacji / strony na podstawowym poziomie.Progressive enhancement - tworzenie aplikacji
strony zapewniajcej pewien poziom funkcjonalnoci dla wszystkich przegldarek, nastpnie
rozbudowuje si j o nowe funkcjonalnoci / features dla nowszych przegldarek.
6. Dodatkowe punkty za opisanie wykrywania obsugi cech (feature detection)

Z uyciem js : modernizr, detekcja zmiennych / funkcji dostpnych tylko w niektrych

przegldarkach (jak ie)

var elem = document.createElement( "canvas" );

if ( elem.getContext && elem.getContext( "2d" ) ) {

showGraph();
} else {
showTable();
}

Bez uycia js: tagi

1. Wyjanij, co kryje si za terminem "semantyczny HTML".Semantyczny HTML - jest to uywanie

znacznikw / tagw HTML zgodnie z ich przeznaczeniem i znaczeniem semantycznym, a nie tylko
do prezentowania danych. Znaczniki nadaj sens i w rnym kontekcie mogn oznacza do
innego. Np i i , section, aside, nav. Jest to wane dla robotw indeksujcych google, dla
czytnikw przeznaczonych dla osb niepenosprawnych etc.[HTML5 Element
Flowchart][http://html5doctor.com/downloads/h5d-sectioning-flowchart.png] [Semantic HMTL
 Tags][https://www.thoughtco.com/why-use-semantic-html-3468271]
2. Jak optymalizowaby zasoby strony internetowej? Mylc o wielu rozwizaniach, ktre zawieraj:

czenie plikw
Zmniejszenie rozmiaru plikw uglifyjs, minification, uywanie SVG, css sprites (jeden obrazek,
uywany wiele razy)
Zasoby CDN - mog by serwowane w zalenoci od odlegoci od uytkoniwka, response time etc
Buforowanie cachowanie

1. Dlaczego serwowanie zasobw strony przez wiele domen jest lepsze?

Przegldarka ma ustalony limit konkurencyjnych pocze dla jednej domeny. Uywajc wikszej
iloci domen mona obej to ograniczenie. Natomiast powoduje to opnienia (odpytywanie
serwerw dns etc.)

1. Ile zasobw pobiera przegldarka z danej domeny w jednej chwili?

To zaley od konkeretnej przegldarki, od wersji przegldarki, od ustawienia ile moe obsugiwa

pocze jednoczenie, od tego czy skrypty adowane s synchronicznie (defer) czy asynchronicznie
(async). Startsze przeglraki jak IE6 - 2, nowsze 6 / 8.

1. Podaj 3 sposoby na zmniejszenie czasu adowania strony. (postrzeganego lub rzeczywistego

czasu adowania)

Postrzegane: - Critical CSS - Unikanie FOUC - Ograniczenie iloci fontw - jeeli fonty s adowane z
CDN (jak gogole fonts) - moe to spowodowa zaadowanie najpierw defaultowych / systemowych
fontw - Preloadowanie obrazkw poprzez ajax

Rzeczywiste: - Odpowiednia wielko plikw z obrazami, minifikacja css i js, czenie plikw css / js w
jeden - Serwer: cachowanie i gzip contentu

1. Jeli doczasz do projektu, w ktrym uywa si tabulacji, a ty uywasz spacji, co wtedy zrobisz?

Sugerowanie uycia narzdzi w stylu EditorConfig (http://editorconfig.org)

Zgodnie z konwencjami (pozosta konsekwentny)
issue :retab! command

1. Napisz prosty pokaz slajdw (Dodatkowe punkty, jeli nie uywasz JS)
2. Jakich narzdzi uywasz do sprawdzenia wydajnoci swojego kodu? (Profiler, JSPerf, Dromaeo)

Gwnie narzdzi dostarczanych z przegldark Chrome - timeline, profilera. JSPerf do

porwnywania wydajnoci rozwiza takich jak bezporednie przypisanie wartoci do obiektu, a
Object.assign etc.

1. Gdyby mg opanowa jedn technologi w tym roku, jaka byaby to technologia?

Podnie swj poziom znajomoci i uywania functional programming, nauczy si React Native

1. Wyjanij znaczenie standardw sieciowych i ich twrcw.

2. Czym jest FOUC? Jak unikasz FOUC?
Flash of unstyled content jest to wywietlenie uytkownikowi nieostylowanej strony (jej zawartoci).
Zarwno CSS jak i znaczniki HTML s elementami blokujcymi renderowanie. Pojawia si gdy CSS
jest wolno adowany lub gdy JS powoduje wielokrotne renderowanie strony / manipuluje
elementami drzewa DOM lub stylami elementw. Aby unikn FOUC naley serwowa
uytkownikowi jak najbardziej zoptymalizowany CSS (zminifikowany, w jednym pliku), oraz uywa
jak najmniej javascriptu powodujcego faz render przegldarki. Uywanie Critical CSS (czyli
wrzucanie najwaniejszych regu css inline w znaczniku head). Uywanie media queries i
serwowanie CSS zoptymalizowanego dla urzdze o mniejszej rozdzielczoci.

Pytania HTML:
1. Co robi doctype i jakie znasz przykady?

Doctype w dokumencie HTML daje zna przegldarce z jakiego standardu renderowania

dokumentu ma korzysta, aby zachowa jednolito parsowania i renderowania danego
dokumentu midzy rnymi przegldrakmi.

Obecnie jest uywane gwnie ze wzgldu na zaszoci historyczne i zgodno ze starszymi

przegldarkami.

HTML5 uywamy tylko

HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE
presentational or deprecated elements (like font). Framesets are not allowed.

HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). Framesets are not allowed.

HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset
content.

XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE
presentational or deprecated elements (like font). Framesets are not allowed. The markup must
also be written as well-formed XML.

...

XHTML 1.1 This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to
provide ruby support for East-Asian languages).

1. Jaka jest rnica midzy trybem standardw a trybem dziwactw (quirks mode)?

quirks mode - dla starych przegldarek navigator i ie 5 standards mode - zgodne ze wspczenymi
specyfikacjami CSS i HTML application/xhtml+xml - jest zawsze w standards mode, nie potrzebuje
doctype

1. Jakie s ograniczenia w serwowaniu stron XHTML?

All elements must have a start tag. Non-void elements with a start tag must have an end tag (p and
li, for example). Any element may be self-closed using />. Tags and attributes are case sensitive,
typically lowercase. Attribute values must be enclosed in quotes. Empty attributes are forbidden
(checked must instead be checked="checked" or checked="true"). Special characters must be
escaped using character entities. 2

1. Czy istniej problemy z serwowaniem stron jako application/xhtml+xml?

Obsugiwany od ie9, w ie8 otwiera dialog pobierania. Serwery kaszujce przy zapytaniu z
content-type ... mog zwrci przegldarce nie obsugujcej tego typu (jak ie6) przy zapytaniu o
stron. Przegldarki wywietl bdy xml (jeli jakie bd) na stronie.

When a browser reads XML it uses an XML parser, not an HTML parser.

Unfortunately, up to and including version 8, Internet Explorer doesn't support files served as XML,
although a number of other browsers do. To get around the fact that not all browsers support
content served as XML, many XHTML files are actually served using the text/html MIME type. In this
case, the user agent will read the file as if it were HTML, and use the HTML parser.

Since the browser considers the XML to actually be HTML, you need to take into account some of
the differences between the two formats when writing your XHTML code, to ensure that the
differences between XML and HTML syntax do not trip up the browser. This includes different ways
of declaring the character encoding or language declarations inside the document. 3

1. Jak serwujesz stron z treci w wielu jzykach?

Use lang (or xml:lang for XHTML) in tags. Also metadata and Content-Language HTTP header can be
used.

1. Co jest wane przy projektowaniu i tworzeniu stron wielojzycznych?

hreflang attr in link

dir attr indicating language direction, such as rtl
font-size for :lang({language_code}) selectors in CSS
difference in word langth for each language

1. Jaka jest przydatno atrybutw data-

Atrybuty data- pozwalaj na przechowywanie danych w tagach HTML, umoliwiaj przekazywanie

danych przy wykorzystaniu JS,

1. Rozpatrujemy HTML5 jako otwart platform internetow. Jakie skadniki tworz HTML5?

more semantic text markup new form elements vedio and audio new javascript API canvas and SVG
new communication API geolocation API web worker API new data storage

1. Opisz rnice midzy cookies, sessionStorage i localStorage.

Cookie:
Max size of 4093 bytes Can set expiration date Sent on every request

sessionStorage:

Max size of 2.5MBs+ depending on browser Stored in browser and not sent with every request If
you close a tab using sessionStorage, open a new tab, or exit the browser - you'll lose that specific
sessionStorage data.

localStorage:

Max size of 2.5MBs+ depending on browser Stored in browser and not sent with every request Will
persist if browser/tabs are closed.

Pytania JS JS Questions:

1. Explain event delegation

Delegacja zdarze / eventw polega na przypiciu obsugi zdarzenia (event handler) do elementu
nadrzdnego, zamiast do elementu ktry chcemy obsuy. Po klikniciu na element wewntrzny,
event bubbles up (bbluje do gry) dochodzc do elementu z przypisanym handlerem. Nastpnie
za pomoc event.target moemy sprawdzi gdzie zdarzy si event i wykona go na odpowiednim
elemencie. Dziki temu moemy obsuy zdarzenia wystpujce na wielu elementach, za pomoc
jednego handlera.

1. Explain how this works in JavaScript

Waciwo this oglnie wskazuje na kontekst w jakim dana funkcja zostaa wywoana. Przechowuje
warto obiektu w kontekcie jakiego dana funkcja zostaa uruchomiona. This jest definiowane /
ustawiane nie w momencie deklarowania w kodzie, ale w momencie wywoania funkcji.

function ab() { this } - window (poniewa window.ab) var obj = { fun: ab }; obj.fun(); - obj var obj = {
fun: function() { ab(); }} - window ab.call(obj) - obj const a = ab.bind(obj) - obj

1. Explain how prototypal inheritance works

Kady obiekt w JS jest wewntrznie poczony z innym obiektem, z ktrego "dziedziczy", za pomoc
prototypu. acuch prototypw koczy si, gdy ostatni z obiektw w acuchu ma prototyp o
wartoci null. Wyszukujc waciwoci w danym obiekcznie, jeli ich nie znajdzie, interpreter JS
przeszukuje obiekty, ktre s w acuchu prototypw.

1. What do you think of AMD vs CommonJS?

Obie specyfikacje opisuj format i sposb w jaki moduy i ich zalenoci powinnyby definiowane;

AMD: - uywane jest w przegldarkach, umoliwia asynchroniczne adowanie moduw -

define('module', [dependencies], function module() { return contents }); CommonJS: - na backendzie
- w node - exports / module.exports | require
1. Explain why the following doesn't work as an IIFE: function foo(){ }();.

Poniewa jest to deklaracja funkcji, a nie function expression. // wyraenie funkcyjne? Mona to
zapisa jako

function foo(){}; ();

1. What needs to be changed to properly make it an IIFE?

Naley otoczy deklaracj w nawiasy ( function foo() {}() )

co tworzy wyraenie funkcyjne, function expression

1. What's the difference between a variable that is: null, undefined or undeclared?

undeclared jest to zmienna, ktra nie zostaa stworzona za pomoc var/let/const, a wic zostaa
stworzona na obiekcie globalnym window/global.

undefined jest to zmienna, ktra zostaa zadeklarowana, ale nie zostaa do niej przypisana adna
warto

null jest to typ, ktry ma przypisan tylko jedn warto null, zmienna zostaa zadeklrowana i
przypisny do niej obiekt typu Null

undefined jest typem, null jest obiektem

1. How would you go about checking for any of these states?

if (typeof var === "undefined") if (var === null)

1. What is a closure, and how/why would you use one?

Closure - domknicie - pozwala na dostp do wewntrznego scope funkcji, nawet po jej wykonaniu.
Osiga si to poprzez zwrcenie funkcji po wywoaniu fukncji nadrzdnej.

1. What's a typical use case for anonymous functions?

S uywane jako callbacks IFFE's Uywanie ich jako domkni (closures)

1. How do you organize your code? (module pattern, classical inheritance?)

Uywam module pattern, IEEF's

1. What's the difference between host objects and native objects?

Host objects s to obiekty dostarczane przez przegldark - rodowisko - mog si one rni
pomdzy rodowiskami. Natomiast native objects s to obiecty opisane w specyfikacji ECMAScript,
jak Array.

1. Difference between: function Person(){}, var person = Person(), and var person = new Person()?
 jest to deklaracja funkcji, przypisyje nazw do funkcji
przypisuje do zmiennej person warto zwracan przez funkcj person, w tym przypadku
undefined
przypisuje do zmiennej person obiekt typu Person, z this przypisanym do obiektu person

1. What's the difference between .call and .apply?

Call przymuje argumenty funkcji normalnie, natomiast apply w postaci tablicy

1. Explain Function.prototype.bind.

Bind pozwala przypisa this do kontektu jaki chcemy, zwracajc now funkcj z przypisanym
kontektem. Pozwala on take przypisa domylne argumenty dla zwracanej funkcji.

1. When would you use document.write()?

2. What's the difference between feature detection, feature inference, and using the UA string?

Feauture detection jest to wykrywanie, czy dany ficzer / waciwo / funkcjonalno / jest dostpny
w rodowisku wykonywalnym

Feauture inference polega na zaeniu, e jeli dana funkcjonalno jest dostpna w danej wersji
przegldarki, to caa reszta funkcjonalnoci take. Uywa si ich wtedy bez sprawdzania czy istniej,
co moe prowadzi do bdw.

UA string czyli User Agent string domylnie zwraca wersj przegldarki jaka wykonuje zapytanie,
jaka uruchamia danych skrypt js. UA string moe by zmieniany przez klienta.

1. Explain Ajax in as much detail as possible.

2. What are the advantages and disadvantages of using Ajax?
3. Explain how JSONP works (and how it's not really Ajax).

JavaScript Object Notation with Padding - zdalny AJAX spoza domeny

pozwala na pobieranie danych z serwerw znajdujcych si w innej domenie, ni domena w ktrej

uruchamiany jest skrypt.js Pomaga omina Same-origin policy. JSONP umoliwa pobieranie danych
JSON poprzez opakowanie danych w funkcj JS, co umoliwia uruchomienie zewntrznego skryptu
js poprzez dodanie go za pomoc tagu script. W celu uruchomienia funkcji zwracajcej JSON
musimy w urlu poda callback taki sam jak funkcja opakowujca JSON.

mona uywa tylko z zapytaniami GET

1. Have you ever used JavaScript templating? If so, what libraries have you used?

Uywaem jedynie Handlebars do prostych skryptw wymagajcych wypeniania duej iloci danych
w ptli.

1. Explain "hoisting".

Hoisting jest to "wynoszenie" przez lexer / interpreter JS zmiennych i funkcji zadeklarowanych jako
var oraz przez uzycie function. Zmienne maj nadan nazw, ale nie maj przypisanej wartoci,
wic s to zmienne undefined.

1. Describe event bubbling.

Bubbling jest to wynoszenie / przechodzenie eventu do gry drzewa DOM. Jeli uytkownik wykona
jak akcj na elemencie zagniedonym w drzewie dom, wszyscy rodzice tego elementu s o tym
powiadmiani.

1. What's the difference between an "attribute" and a "property"?

Atrybut jest to warto w samym HTML, ktra jest zawsze stringiem Property jest przypisana do
obiektu w drzewie DOM, moe mie rne typy jak String, Number

1. Why is extending built -in JavaScript objects not a good idea?

Poniewa obiekty te zostay stworzone wedug pewnej dobrze udokumentowanej i przemylanej

specyfikacji. Jeli dodamy swoje metody do wbudowanego obiektu, mog one zosta nadpisane
przez niewiadomego developera uywajcego naszego kodu, twrcy przegldarki mog
zaimplementowa metod o takiej samej nazwie, uytkownik nie bdzie wiedzia ktrej uywa itp.

1. Difference between document load event and document DOMContentLoaded event?

event DOMContentLoaded jest uruchamiany, gdy HTML zosta zaadowany i drzewo DOM
zbudowane natomiast event load, gdy caa strona, wcznie z css, grafik zostay zaadowane.

1. What is the difference between == and ===?

== porwnuje wartoci, dokonujc koercji jeli typy zmiennych nie s jednakowe === porwnuje
wartoci jak i typy zmiennych, nie dokonujc koercji

1. Explain the same-origin policy with regards to JavaScript.

Jest to fundamentalny mechanizm bezpeiczestwa przegldarki. Mechanizm ten zapobiega

dostpowi skryptw js do drzew DOM znajdujcych si na rnych originach. Same origin zachodzi
wtedy, gdy zgodne s protok port i host stron, z ktrych wywoywane s skrypty.

1. Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

function duplicate(arr) { if (!arr) return []; return arr.concat(arr); }

1. Why is it called a Ternary expression, what does the word "Ternary" indicate?

Ternary expression nazywa si tak poniewa skada si / przyjmuje trzy argumenty. Wyraenie
zwracajce Boolean, warto dla true i warto dla false.

1. What is "use strict";? what are the advantages and disadvantages to using it?

Cig znakw "use strict"; na pocztku skryptu przecza interpeter JS w strict mode. Jest to bardziej
restrykcyjny tryb, posiadajcy wicej restrykcji ni tryb zwyky, pozwalajcy na wyeliminowanie
niektrych bdw, jak np ustawianie this na globalny kontekst wewntrz funkcji etc.

1. Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at
multiples of 5 and "fizzbuzz" at multiples of 3 and 5

for(let i = 0; i < 100; i++) {

if (i % 3 == 0 && i % 5 == 0) console.log('fizzbuzz');
else if (i % 3 == 0) console.log('fizz');
else if (i % 5 == 0) console.log('buzz');
else console.log(i);
}

1. Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

Poniewa moemy zmieni warto, nadpisa zmienne uywane przez inne skrypty.

1. Why would you use something like the load event? Does this event have disadvantages? Do you
know any alternatives, and why would you use those?

Load event pozwala na powiadomienie skryptu, e wszystkie zasoby strony zostay zaadowane. Po
odpaleniu takiego eventu moemy by pewni, e zdjcia oraz css zostay zaadowane, oraz drzewo
DOM zostao zbudowane. Uybym load gdyby od razu po zaadowaniu strony chcia np pobra
wielko obrazkw, sprawdzi styl danego elementu.

1. Explain what a single page app is and how to make one SEO-friendly.
2. What is the extent of your experience with Promises and/or their polyfills?
3. What are the pros and cons of using Promises instead of callbacks?
4. What are some of the advantages/disadvantages of writing JavaScript code in a language that
compiles to JavaScript?

Plusy: Zalenie od jzyka w jakim piszemy. Jzyk moe zawiera static typing, co pomaga w
programowaniu i wyapywaniu bdw ju na etapie kodowania etc. Moe on eliminowa wszystkie
dziwactwa JS jak scope, hoisting.

Minusy: gwnie to, e trzeba kompilowa js po kadej zmianie, kod wynikowy jest inny ni kod,
ktry piszemy kod, mimo e jest optymalizowany musi zawiera sporo boilerplate i polyfillw, co
zwiksza jego objto

1. What tools and techniques do you use debugging JavaScript code?

console.log w miejscach, w ktrych spodziewam si e wystpi bd, jeli to nie pomoe to

ustawiam breakpoint i debuguj w debuggerze

1. What language constructions do you use for iterating over object properties and array items?

object properties: for i in object Object.keys(obj) Object.values(obj)

array: for() forEach map

1. Explain the difference between mutable and immutable objects.

Objekty mutable pozwalaj na zmian swoich waciwoci, czyli moemy zmieni warto danej
waciwoci w obiekcie. Immutable nie pozwalaj na to. Moemy zwrci jedynie kopi obiektu ze
zmienionymi wartociami.

1. What is an example of an immutable object in JavaScript?

Obiekt mona zamrozi przez Object.freeze(), ale jest to zamraanie pytkie

1. What are the pros and cons of immutability?pros

bez mutacji ledzenie wykonywania programu jest atwiejsze

atwiej debuggowa programy

nie potrzeba lockw w do synchronizacji wielu wtkw
sprawdzenie czy zmieni si stan aplikacji moe polega jedynie na porwnaniu referencji do
danych obiektw
ich uywanie nie powoduje efektw ubocznych
atwiej je cachowa
zawsze zwracaj zmieniony obiekt, czyli unikamy zwracania null

2. cons:
wiksze zuycie zasobw, gwnie pamici z powodu kopiowania obiektw (structural sharing

zmniejsza wykorzystanie)
ciko budowa struktury cykliczne jak grafy

3. How can you achieve immutability in your own code?

Uywajc biblioteki jak immutable.js uywajc programowania funkcyjnego, pure funkctions

1. Explain the difference between synchronous and asynchronous functions.

2. What is event loop?
3. What is the difference between call stack and task queue?
4. Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

Testing Questions:

1. What are some advantages/disadvantages to testing your code?

Testowanie kodu (testy jednostkowe) zapewniaj, e kod dziaa tak jak powinien, pozwala
prowadzi refaktoryzacj kodu i sprawdza, czy nic nie zostao zepsute.

Minusem jest to, e testy take potrzebuj refaktoryzacji oraz jest to znacznie wicej kodu do
konserwacji.

1. What tools would you use to test your code's functionality?

jasmine - tdd framework, karma - tests runner selenium driver - testowanie funkcjonowania strony
/ aplikacji

1. What is the difference between a unit test and a functional/integration test?

unit test s to testy jednostkowe, sprawdzajce czy poszczeglne funkcje dziaaj poprawnie
natomiast functional / integration tests sprawdzaj dziaanie wikszych czci systemu, lub systemu
jako caoci, jak komponenty systemu funkcjonuj midzy sob etc.

1. What is the purpose of a code style linting tool?

Eliminacja prostych bdw ju podczas pisania kodu. Zapewnia jednakowe, konsekwentne

formatowanie kodu dla wszystkich czonkw zespou.

Performance Questions:

1. What tools would you use to find a performance bug in your code?

Chrome profiler

1. What are some ways you may improve your website's scrolling performance?

grafiki powinny by w wielkoci konenerw w jakich si znajduj, powinny by zoptymalizowane, nie

za due unikanie duej iloci box-shadow i innych styli wymagajcych duej iloci skomplikowanego
rysowania unikanie metod js ktre powoduj reflow / repaint jak offsetTop , pobieranie wielkoci
kontenerw uywanie debounce do eventw scrollowania

1. Explain the difference between layout, painting and compositing.

layout - jest to faza, w ktrej przegldarka sprawdza ile miejsca potrzeba dla kadego komponentu
na stronie painting - wypenianie pixeli, rysowanie tekstw, kolorw, grafiki compositing - skadanie
komponentw i wywieltanie ich we waciwej kolejnoci, na waciwym miejscu - renderowanie
caej strony

Network Questions:

1. Traditionally, why has it been better to serve site assets from multiple domains?
2. Do your best to describe the process from the time you type in a website's URL to it finishing
loading on your screen.
3. What are the differences between Long-Polling, Websockets and Server-Sent Events?
4. Explain the following request and response headers:

Diff. between Expires, Date, Age and If-Modified-...

Expires - definiuje dat w ktrej wano cachowanego zasobu traci wano. Po tej dacie
przegldarka zarzda wieej kopi danych. Jeli ustawione jest max-age, max-age jest waniejsze od
Expires, wyraane w sekundach.

If-Modified-Since - jeli zasb nie by zmieniany od daty, serwer zwrci kod 304 - not changed

Do Not Track - request header zaznaczajcy, e uytkownik nie yczy sobie ledzenia Cache-Control
- "wcza" cachowanie w przegldarce, bez tego headeru przegldarka za kadym razem bdzie
daa nowych / wiezych danych Transfer-Encoding - ustala w jakiej formie zwracane bd dane
(chunked, compres, deflate, gzip) ETag - najczciej jest to suma kontrolna zasobw, jeli jest rna
ni najwiesza, uytkownik otrzymuje nowe dane / zasoby X-Frame-Options - ustala, czy strona
powinna (lub z jakimi restrykcjami) wywietla strony w iframe

1. What are HTTP methods? List all HTTP methods that you know, and explain them.

Coding Questions:

1. Question: What is the value of foo?

var foo = 10 + '20'; '1020'

1. Question: How would you make this work?

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

function add(a, b) {
if (a && b) return a + b;
return function add2(b) {
return a + b;
}
}

1. Question: What value is returned from the following statement?

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

1. Question: What is the value of window.foo?

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

1. Question: What is the outcome of the two alerts below?

var foo = "Hello";

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

1. Question: What is the value of foo.length?

var foo = [];

foo.push(1);
foo.push(2);

1. Question: What is the value of foo.x?

var foo = {n: 1};

var bar = foo;
foo.x = foo = {n: 2};
 foo
Object {n: 2} n: 2__proto__: Object
foo.x
undefined
bar
Objectn: 1 x: Object n: 2__proto__: Object__proto__: Object

1. Question: What does the following code print?

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

one three two

Fun Questions:

What's a cool project that you've recently worked on? What are some things you like about the
developer tools you use? Who inspires you in the front-end community? Do you have any pet
projects? What kind? What's your favorite feature of Internet Explorer? How do you like your coffee?

Pytania jQuery:
Wyjanij termin "chaining".

Chaining polega na tym, e wikszo metod jquery po wywoaniu, zwraca nowy obiekt jQuery, na
ktrym moemy uy kolejnych metod.

Wyjanij termin "deferreds".

Deffereds jest to implementaca Promises w jQuery. Pozwalaj one na rejestrowanie

zagniedonych callbackw w kolejki callbackw, ktre mog si wykona poprawnie resolve, lub
niepoprawnie reject. Mona w ich uywa zarwno do funkcji synchronicznych jak i
asynchronicznych. Deffered w jQuery posiadaj metody znane z Promises czyli: catch, then, reject,
resolve; jak i swoje:

always - wykonuje si zawsze niezalenie czy deffered zwrcio reject, czy resolve done - gdy
deffered zwrci resolved fail - gdy deffered zwrci rejected pipe - suy do filtrowania i czenia
deffereds w acuchy

Jakie przykady optymalizacji jQuery potrafisz wykona?

.detach() - usunicie elementu z drzewa DOM, gdy na nim intensywnie pracujemy, nastpnie
.append()
 unikanie zbyt duej specyficznoci selektorw
uywanie #id w selektorach
uywanie for, zamiast each
dodawanie kontekstu do selectorw (np selector .class kontekst #id)
cachowanie cachowanie obiektw / selectorw w zmiennych
uywanie css zamiast width height - unikanie reflow w przegldarce
uywanie find
event delegation - uywanie on na elementcie nadrzdnym i podawanie elementw na ktrych
ma by wywoany event, uywanie this
nie uywanie append w ptlach

Co robi .end()?

end() przywraca poprzedni obiekt (czy stan obiektu) w acuchu wywoa (chain), tzn jeli
utworzymy obiekt jQuery z selectora (np p - paragraf) nastpnie uyjemy find do wyszukania
wszystkich spanw w paragrafie, zmienimy ich kolor za pomoc metody css na czerwony, to
uywajc end wrcimy do obiektu z pierwszego selectora (p) i na nim bdziemy operowa, nie na
obiektach z wywoanai find.

Jak i dlaczego uyjesz przestrzeni nazw przy obsudze wizania zdarze?

Podaj 4 rne wartoci, jakie moesz przekaza do metody jQuery.

selector
DOM Element
obiekt jQuery do sklonowania
tablica elemetw DOM
obiekt js

Co to jest kolejka effects (lub fx)?

Jest do przypisana do elementu kolejka funkcji jakie zostan na nim wywoane. Funkcje s
wywoywane asynchronicznie. Element moe mie wiele przypisanych kolejek, identyfikowanych po
nazwie, defaultowa nosi nazw fx.

Jakie s rnice midzy .get(), [], i .eq()?

eq(index) zwraca object jQuery get(index?) zwraca element / tablic elementw DOM [] zwraca
element DOM, natomiast nie moe uywa negatywnych indeksw

Jakie s rnice midzy .bind(), .live(), i .delegate()?

.bind() - dodaje event bezporednio do elementu w drzewie DOM, jak addEventListener .live() -
dodaje event handler do root elementu w dokumencie razem z selectorem, dziaa na zasadzie
delegacji eventw, czyli przypina si tylko raz, moe wykona si na kilku elementach, deperecated
od 1.7 .delegate() - robi to samo co metoda live, natomiast moemy poda element do ktrego
handler ma by przyczepiony .on() - w zalenoci od tego jak zostanie wywoana, stosuje te same
metody obsugi eventw jak bind i delegate

Jakie s rnice midzy $ i $.fn? Czym jest $.fn?

$ jest funkcj - aliasem do funkcji jQuery $.fn jest waciwoci tej funkcji wskazujc na prototyp
wewntrznej funkcji init w jQuery (suy do tworzenia instancji obiektu jQuery). Jeli dodamy
waciwo / funkcj do $.fn bdzie ona dostpna we wszystkich instancjach stworzonych przez $ /
jQuery. Suy do tworzenia pluginw.

Zoptymalizuj selektor: $(".foo div#bar:eq(0)") $('#bar')

Pytania CSS:
Jaka jest rnica midy klas a id

ID: jeden element moe posiada tylko jedno id id musi by unikatowe w caym dokumencie
specificity id jest wiksze od specificity klasy

class: jeden element moe posiada wiele klas, jedna klasa moe by przypisana do wielu
elementw klasa nie musi by unikatowa w caym dokumencie

Opisz, czym jest plik "reset" dla CSS i dlaczego jest uyteczny.

Reset jest to specjalny zestaw regu usuwajcych wszystkie domylne style ze wszystkich elementw.

Normalize.css jest to zestaw stylw ujednolicajcy wygld podstawowych elementw midzy

rnymi przegldarkami. Zawiera wiele usprawnie, usuwajcych powszechne bdy (elementy
HTML5, font-size)

Opisz jak dziaa waciwo float.

Waciwo float "wyjmuje" element z normal document flow, i przesuwa go do lewej lub prawej
krawdzi zawierajcego go kontenera, w zalenoci od parametru. Jeli jest miejsce w kontenerze
nadrzdnym pozostaa tre bdzie opywa kontener z float. Kilka elementw z float s ustawiane
obok siebie (jeli maj podan ten sam kierunek i jeli jest miejsce w nadrzdnym kontenerze). Jeli
element jest opisany waciwoci float, zachowuje si jak element block, float nie wspgra z
position: fixed i position: absolute,

Jakie znasz techniki kasowania (clearing) i kiedy wskazane jest ich stosowanie?

clear: left right both - oznacza, e grna krawd elementu powinna znajdowa si pod elementem
z float left, right, lub obojtnie jakim float w nadrzdnym elemencie

.clearfix - dodaje pseudo elementy przed i po elementem i ustawia na nich clear both

Wyjanij technik "CSS sprites" oraz sposb jej wdroenia na stronie.

CSS Sprites jest to uywanie jednego pliku graficznego, do przedstawienia wielu grafik, w celu
optymalizacji wielkoci zasobw. Aby css sprites dziaao uywa si obrazka jako background i
przesuwa si go za pomoc background-position.

Jakie s Twoje ulubione techniki zastpowania obrazw i kiedy je stosujesz?

display: none for a span

negative / ujemny margines negative / ujemny text-indent

How do you serve your pages for feature-constrained browsers?

Gwnie chodzi o vendor-prefixed, wykrywanie funkcjonalnoci przegldarki za pomoc modernizr,

wchodzi @suppor, uywam caniuse eby sprawdzi jaki procent przegldarek obsuguje dane
stylowanie

How do you serve your pages for feature-constrained browsers?

CSS clip position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px,
1px, 1px);

Positioning content off-screen The following are the recommended styles for visually hiding content
that will be read by a screen reader. .hidden {position:absolute; left:-10000px; top:auto; width:1px;
height:1px; overflow:hidden;}

How would you approach fixing browser-specific styling issues?

using reset or normalize.css

How is responsive design different from adaptive design?

Responsive: There is one basic layout, and it changes responsively to screen changes Adaptive: For
each possible screen size, there is a distinct layout.

What are some of the "gotchas" for writing efficient CSS?

chodzi gwnie o uywanie odpowiednich selektorw, jak najbardziej specyficznych unikanie

oglnego selectora (gwiazdki *), preferowanie id jeli to moliwe

Explain how a browser determines what elements match a CSS selector.

Przegldarka kolejno znajduje elementy pasujce do selektora od prawej do lewej. Ze wzgldu na

efektywno.

box-sizing: content-box - width okrela content + padding + border + margin padding-box - width
okrela content i padding + border + margin border-box - width okrela content i padding i border +
margin
Haczyki waciwoci CSS, warunkowe doczanie plikw .css lub... co innego?

Block formatting context

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which
the layout of block boxes occurs and in which floats interact with each other.

A block formatting context is created by one of the following:

the root element or something that contains it floats (elements where float is not none) absolutely
positioned elements (elements where position is absolute or fixed) inline-blocks (elements with
display: inline-block) table cells (elements with display: table-cell, which is the default for HTML
table cells) table captions (elements with display: table-caption, which is the default for HTML table
captions) block elements where overflow has a value other than visible display: flow-root

Jak serwujesz strony dla przegldarek z ograniczonym wsparciem funkcji? Jakie techniki stosujesz?
Jakie istniej sposoby wizualnego ukrycia treci (uczynienia ich dostpnymi tylko dla czytnikw
ekranu)? Czy kiedykolwiek uywae systemw siatek, a jeli tak, to jakie preferujesz? Czy uywae
'media queries' lub tworzye konkretne ukady i arkusze dla urzdze mobilnych? Czy miae
styczno ze stylizacj SVG? Jak optymalizujesz swoje strony do druku? Jakie stosujesz "sztuczki"
przy pisaniu efektywnych CSS? Czy uywasz narzdzi do przetwarzania CSS? (SASS, Compass, Stylus,
LESS) Jeli tak, opisz cechy, ktre lubisz i nie lubisz w uywanych narzdziach. Jak tworzysz i
wdraasz projekt uywajcy niestandardowych czcionek? Czcionki sieciowe (serwisy czcionek jak:
Google Webfonts, Typekit itd.) Wyjanij jak przegldarka okrela elementy pasujce do selektora
CSS?

Z-index: jeli element znajduje si w innym elemencie i si pokrywaj, element wewntrzny jest na
wierzchu jeli elementy nastpuj kolejno po sobie, element kolejny jest na wierzchu

position: absolute i fixed zmieniaj to, pokazujc si zawsze ponad elementami static i relative

jeli chcemy uywa z-index, element musi mie position relative, fixed lub absolute

Pytania dodatkowe (zabawne):

Opowiedz o najfajniejszej rzeczy jak kiedykolwiek zakodowae. Z czego jeste najbardziej dumny?
Jakie s Twoje ulubione czci narzdzi programistycznych, ktrych uywasz? Czy masz jaki swj
wasny projekt na boku? Jaki? Jaka jest Twoja ulubiona funkcja w Internet Explorer?

stops rendering process, and download and run a script. don't stop rendering process while
asynchronously downloading a script. When finishing download, it stops rendering and runs the
script. don't stop rendering process while asynchronously downloading a script. When finishing
rendering, it runs the script.

defer order, async no order