You are on page 1of 17

H5BP Front-end Developer Interview Questions

Pytania ogólne:

1. Czego nauczy e si wczoraj/w tym tygodniu?React Higher Order Components Sequelize ORM dla NodeJs

2. Co pobudza lub interesuje ci w programowaniu?Ogólnie swoboda w tworzeniu. Mo liwo

automatyzacji i rozwi zywania codziennych czynno ci / problemów. Wyzwania, lubi d uba w problemach i je rozwi zywa . Zmusza do ci g ego samodoskonalenia si . Ci g ej nauki. Jest te form rywalizacji w d eniu do doskona ego kodu.

3. Jakie jest Twoje preferowane rodowisko programistyczne? (system operacyjny, edytor, przegl darki, narz dzia itd.)Systemem operacyjny: Linuks Edytor: dla drobnych zmian Vim, do projektów Visual Studio Code / Webstorm, czasami u ywam Spacemacs Przegl darki: Chromium, Firefox, Google Chrome (Unstable) Narz dzia: 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 s u ce do budowania w rodowisku developerskim i produkcyjnym - webpack, gulp. Szkielet strony i semantyka, wype nienie kontentem + poprawa semantyki, stylowanie, animacje, dodawanie interaktywno ci,

5. Opisz ró nic mi dzy stopniowym ulepszaniem (progressive enhancement) i wdzi czn degradacj (graceful degradation)?Graceful degradation - oprogramowanie / strona jest tworzona dla u ytkowników u ywaj cych nowszych przegl darek, obs uguj cych nowe technologie, zapewniaj c im pe ne user expirience. Stopniowo zmniejsza si user expirience dla

u ytkowników u ywaj cych starsze wersje przegl darek, wci zapewniaj c im funkcjonalno

aplikacji / strony na podstawowym poziomie.Progressive enhancement - tworzenie aplikacji strony zapewniaj cej pewien poziom funkcjonalno ci dla wszystkich przegl darek, nast pnie rozbudowuje si j o nowe funkcjonalno ci / features dla nowszych przegl darek.

6. Dodatkowe punkty za opisanie wykrywania obs ugi cech (feature detection)

Z u yciem js : modernizr, detekcja zmiennych / funkcji dost pnych tylko w niektórych

przegl darkach (jak ie)

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

if ( elem.getContext && elem.getContext( "2d" ) ) { showGraph(); } else { showTable();

}

Bez u ycia js: tagi

1. Wyja nij, co kryje si za terminem "semantyczny HTML".Semantyczny HTML - jest to u ywanie znaczników / tagów HTML zgodnie z ich przeznaczeniem i znaczeniem semantycznym, a nie tylko do prezentowania danych. Znaczniki nadaj sens i w ró nym kontek cie mogn oznacza do

innego. Np i

i , section, aside, nav. Jest to wa ne dla robotów indeksuj cych google, dla

czytników przeznaczonych dla osób niepe nosprawnych 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 optymalizowa by zasoby strony internetowej? My l c o wielu rozwi zaniach, które zawieraj :

czenie plików

Zmniejszenie rozmiaru plików uglifyjs, minification, u ywanie SVG, css sprites (jeden obrazek,

u ywany wiele razy)

Zasoby CDN - mog by serwowane w zale no ci od odleg o ci od u ytkoniwka, response time etc

Buforowanie cachowanie

1. Dlaczego serwowanie zasobów strony przez wiele domen jest lepsze?

Przegl darka ma ustalony limit konkurencyjnych po cze dla jednej domeny. U ywaj c wi kszej

ilo ci domen mo na obej to ograniczenie. Natomiast powoduje to opó nienia (odpytywanie

serwerów dns etc.)

1. Ile zasobów pobiera przegl darka z danej domeny w jednej chwili?

To zale y od konkeretnej przegl darki, od wersji przegl darki, od ustawienia ile mo e obs ugiwa

po cze jednocze nie, od tego czy skrypty adowane s synchronicznie (defer) czy asynchronicznie

(async). Startsze przegl raki 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 ilo ci fontów - je eli fonty s adowane z

CDN (jak gogole fonts) - mo e to spowodowa za adowanie najpierw defaultowych / systemowych

fontów - Preloadowanie obrazków poprzez ajax

Rzeczywiste: - Odpowiednia wielko plików z obrazami, minifikacja css i js, czenie plików css / js w

jeden - Serwer: cachowanie i gzip contentu

1. Je li do czasz do projektu, w którym u ywa si tabulacji, a ty u ywasz spacji, co wtedy zrobisz?

Sugerowanie u ycia narz dzi w stylu EditorConfig (http://editorconfig.org)

Zgodnie z konwencjami (pozosta konsekwentny)

issue :retab! command

1. Napisz prosty pokaz slajdów (Dodatkowe punkty, je li nie u ywasz JS)

2. Jakich narz dzi u ywasz do sprawdzenia wydajno ci swojego kodu? (Profiler, JSPerf, Dromaeo)

G ównie narz dzi dostarczanych z przegl dark Chrome - timeline, profilera. JSPerf do

porównywania wydajno ci rozwi za takich jak bezpo rednie przypisanie warto ci do obiektu, a

Object.assign etc.

1. Gdyby móg opanowa jedn technologi w tym roku, jaka by aby to technologia?

Podnie swój poziom znajomo ci i u ywania functional programming, nauczy si React Native

1. Wyja nij znaczenie standardów sieciowych i ich twórców.

Flash of unstyled content jest to wy wietlenie u ytkownikowi nieostylowanej strony (jej zawarto ci). Zarówno CSS jak i znaczniki HTML s elementami blokuj cymi renderowanie. Pojawia si gdy CSS jest wolno adowany lub gdy JS powoduje wielokrotne renderowanie strony / manipuluje elementami drzewa DOM lub stylami elementów. Aby unikn FOUC nale y serwowa

u ytkownikowi jak najbardziej zoptymalizowany CSS (zminifikowany, w jednym pliku), oraz u ywa

jak najmniej javascriptu powoduj cego faz render przegl darki. U ywanie Critical CSS (czyli wrzucanie najwa niejszych regu css inline w znaczniku head). U ywanie media queries i serwowanie CSS zoptymalizowanego dla urz dze o mniejszej rozdzielczo ci.

Pytania HTML:

1. Co robi doctype i jakie znasz przyk ady?

Doctype w dokumencie HTML daje zna przegl darce z jakiego standardu renderowania dokumentu ma korzysta , aby zachowa jednolito parsowania i renderowania danego dokumentu mi dzy ró nymi przegl drakmi.

Obecnie jest u ywane g ównie ze wzgl du na zasz o ci historyczne i zgodno ze starszymi przegl darkami.

HTML5 u ywamy 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 ró nica mi dzy trybem standardów a trybem dziwactw (quirks mode)?

quirks mode - dla starych przegl darek navigator i ie 5 standards mode - zgodne ze wspó czenymi specyfikacjami CSS i HTML application/xhtml+xml - jest zawsze w standards mode, nie potrzebuje doctype

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?

Obs ugiwany od ie9, w ie8 otwiera dialog pobierania. Serwery kaszuj ce przy zapytaniu z

content-type

stron . Przegl darki wy wietl b dy xml (je li jakie b d ) na stronie.

mog zwróci przegl darce nie obs uguj cej tego typu (jak ie6) przy zapytaniu o

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 tre ci w wielu j zykach?

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

1. Co jest wa ne przy projektowaniu i tworzeniu stron wieloj zycznych?

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 atrybutów data-

Atrybuty data- pozwalaj na przechowywanie danych w tagach HTML, umo liwiaj przekazywanie danych przy wykorzystaniu JS,

1. Rozpatrujemy HTML5 jako otwart platform internetow . Jakie sk adniki 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 ró nice mi dzy 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 / eventów polega na przypi ciu obs ugi zdarzenia (event handler) do elementu nadrz dnego, zamiast do elementu który chcemy obs u y . Po klikni ciu na element wewn trzny, event bubbles up (b bluje do góry) dochodz c do elementu z przypisanym handlerem. Nast pnie za pomoc event.target mo emy sprawdzi gdzie zdarzy si event i wykona go na odpowiednim elemencie. Dzi ki temu mo emy obs u y zdarzenia wyst puj ce na wielu elementach, za pomoc jednego handlera.

1.

Explain how this works in JavaScript

W

a ciwo this ogólnie wskazuje na kontekst w jakim dana funkcja zosta a wywo ana. Przechowuje

warto obiektu w kontek cie jakiego dana funkcja zosta a uruchomiona. This jest definiowane / ustawiane nie w momencie deklarowania w kodzie, ale w momencie wywo ania 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

Ka dy obiekt w JS jest wewn trznie po czony z innym obiektem, z którego "dziedziczy", za pomoc prototypu. a cuch prototypów ko czy si , gdy ostatni z obiektów w a cuchu ma prototyp o warto ci null. Wyszukuj c w a ciwo ci w danym obiekcznie, je li ich nie znajdzie, interpreter JS przeszukuje obiekty, które s w a cuchu prototypów.

1. What do you think of AMD vs CommonJS?

Obie specyfikacje opisuj format i sposób w jaki modu y i ich zale no ci powinnyby definiowane;

AMD: - u ywane jest w przegl darkach, umo liwia asynchroniczne adowanie modu ów - 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. // wyra enie funkcyjne? Mo na to zapisa jako

function foo(){}; ();

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

Nale y otoczy deklaracj w nawiasy ( function foo() {}() )

co tworzy wyra enie funkcyjne, function expression

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

undeclared jest to zmienna, która nie zosta a stworzona za pomoc var/let/const, a wi c zosta a stworzona na obiekcie globalnym window/global.

undefined jest to zmienna, która zosta a zadeklarowana, ale nie zosta a do niej przypisana adna warto

null jest to typ, który ma przypisan tylko jedn warto null, zmienna zosta a 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 - domkni cie - pozwala na dost p do wewn trznego scope funkcji, nawet po jej wykonaniu. Osi ga si to poprzez zwrócenie funkcji po wywo aniu fukncji nadrz dnej.

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

S u ywane jako callbacks IFFE's U ywanie ich jako domkni (closures)

1.

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

U

ywam module pattern, IEEF's

1.

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

Host objects s to obiekty dostarczane przez przegl dark - rodowisko - mog si one ró ni pom dzy rodowiskami. Natomiast native objects s to obiecty opisane w specyfikacji ECMAScript, jak Array.

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, zwracaj c now funkcj z przypisanym

kontektem. Pozwala on tak e przypisa domy lne 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 / w a ciwo / funkcjonalno / jest dost pny

w rodowisku wykonywalnym

Feauture inference polega na za eniu, e je li dana funkcjonalno jest dost pna w danej wersji

przegl darki, to ca a reszta funkcjonalno ci tak e. U ywa si ich wtedy bez sprawdzania czy istniej ,

co mo e prowadzi do b dów.

UA string czyli User Agent string domy lnie zwraca wersj przegl darki jaka wykonuje zapytanie,

jaka uruchamia danych skrypt js. UA string mo e 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 serwerów znajduj cych si w innej domenie, ni domena w której

uruchamiany jest skrypt.js Pomaga omina Same-origin policy. JSONP umo liwa pobieranie danych

JSON poprzez opakowanie danych w funkcj JS, co umo liwia uruchomienie zewn trznego skryptu

js poprzez dodanie go za pomoc tagu script. W celu uruchomienia funkcji zwracaj cej JSON

musimy w urlu poda callback taki sam jak funkcja opakowuj ca JSON.

1.

mo na u ywa tylko z zapytaniami GET

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

ywa em jedynie Handlebars do prostych skryptów wymagaj cych wype niania du ej ilo ci danych

U

w p tli.

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 warto ci,

wi c s to zmienne undefined.

1. Describe event bubbling.

Bubbling jest to wynoszenie / przechodzenie eventu do góry drzewa DOM. Je li u ytkownik wykona jak akcj na elemencie zagnie d onym 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, która jest zawsze stringiem Property jest przypisana do obiektu w drzewie DOM, mo e mie ne typy jak String, Number

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

Poniewa obiekty te zosta y stworzone wed ug pewnej dobrze udokumentowanej i przemy lanej specyfikacji. Je li dodamy swoje metody do wbudowanego obiektu, mog one zosta nadpisane przez nie wiadomego developera u ywaj cego naszego kodu, twórcy przegl darki mog zaimplementowa metod o takiej samej nazwie, u ytkownik nie b dzie wiedzia której u ywa itp.

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

event DOMContentLoaded jest uruchamiany, gdy HTML zosta za adowany i drzewo DOM zbudowane natomiast event load, gdy ca a strona, w cznie z css, grafik zosta y za adowane.

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

== porównuje warto ci, dokonuj c koercji je li typy zmiennych nie s jednakowe === porównuje warto ci jak i typy zmiennych, nie dokonuj c koercji

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

Jest to fundamentalny mechanizm bezpeicze stwa przegl darki. Mechanizm ten zapobiega dost powi skryptów js do drzew DOM znajduj cych si na ró nych originach. Same origin zachodzi wtedy, gdy zgodne s protokó port i host stron, z których wywo ywane 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 sk ada si / przyjmuje trzy argumenty. Wyra enie zwracaj ce Boolean, warto dla true i warto dla false.

1.

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

Ci

g znaków "use strict"; na pocz tku skryptu prze cza interpeter JS w strict mode. Jest to bardziej

restrykcyjny tryb, posiadaj cy wi cej restrykcji ni tryb zwyk y, pozwalaj cy na wyeliminowanie

niektórych b dów, jak np ustawianie this na globalny kontekst wewn trz 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 mo emy zmieni warto , nadpisa zmienne u ywane 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 zosta y za adowane. Po

odpaleniu takiego eventu mo emy by pewni, e zdj cia oraz css zosta y za adowane, oraz drzewo

DOM zosta o zbudowane. U y bym load gdyby od razu po za adowaniu strony chcia np pobra

wielko obrazków, 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: Zale nie od j zyka w jakim piszemy. J zyk mo e zawiera static typing, co pomaga w

programowaniu i wy apywaniu b dów ju na etapie kodowania etc. Mo e on eliminowa wszystkie

dziwactwa JS jak scope, hoisting.

Minusy: g ównie to, e trzeba kompilowa js po ka dej zmianie, kod wynikowy jest inny ni kod,

który piszemy kod, mimo e jest optymalizowany musi zawiera sporo boilerplate i polyfillów, co

zwi ksza jego obj to

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

console.log w miejscach, w których spodziewam si e wyst pi b d, je li to nie pomo e 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

Objekty mutable pozwalaj na zmian swoich w a ciwo ci, czyli mo emy zmieni warto danej

w a ciwo ci w obiekcie. Immutable nie pozwalaj na to. Mo emy zwróci jedynie kopi obiektu ze

zmienionymi warto ciami.

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

Obiekt mo na zamrozi przez Object.freeze(), ale jest to zamra anie p ytkie

1.

What are the pros and cons of immutability?pros

bez mutacji ledzenie wykonywania programu jest atwiejsze

atwiej debuggowa programy

nie potrzeba locków w do synchronizacji wielu w tków

sprawdzenie czy zmieni si stan aplikacji mo e polega jedynie na porównaniu referencji do

 

danych obiektów

 

ich u ywanie nie powoduje efektów ubocznych

atwiej je cachowa

zawsze zwracaj zmieniony obiekt, czyli unikamy zwracania null

2.

cons:

 

wi ksze zu ycie zasobów, g ównie pami ci z powodu kopiowania obiektów (structural sharing

 

zmniejsza wykorzystanie)

 

ci

ko budowa struktury cykliczne jak grafy

3.

How can you achieve immutability in your own code?

U

ywaj c biblioteki jak immutable.js u ywaj c 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 dzia a tak jak powinien, pozwala

prowadzi refaktoryzacj kodu i sprawdza , czy nic nie zosta o zepsute.

Minusem jest to, e testy tak e potrzebuj refaktoryzacji oraz jest to znacznie wi cej 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, sprawdzaj ce czy poszczególne funkcje dzia aj poprawnie

natomiast functional / integration tests sprawdzaj dzia anie wi kszych cz ci systemu, lub systemu

jako ca o ci, jak komponenty systemu funkcjonuj mi dzy sob etc.

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

Eliminacja prostych b dów ju podczas pisania kodu. Zapewnia jednakowe, konsekwentne

formatowanie kodu dla wszystkich cz onków zespo u.

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 wielko ci konenerów w jakich si znajduj , powinny by zoptymalizowane, nie

za du e unikanie du ej ilo ci box-shadow i innych styli wymagaj cych du ej ilo ci skomplikowanego

rysowania unikanie metod js które powoduj reflow / repaint jak offsetTop , pobieranie wielko ci

kontenerów u ywanie debounce do eventów scrollowania

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

layout - jest to faza, w której przegl darka sprawdza ile miejsca potrzeba dla ka dego komponentu

na stronie painting - wype nianie pixeli, rysowanie tekstów, kolorów, grafiki compositing - sk adanie

komponentów i wy wieltanie ich we w a ciwej kolejno ci, na w a ciwym miejscu - renderowanie

ca ej 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 której wa no cachowanego zasobu traci wa no . Po tej dacie

przegl darka zarz da wie ej kopi danych. Je li ustawione jest max-age, max-age jest wa niejsze od

Expires, wyra ane w sekundach.

If-Modified-Since - je li zasób nie by zmieniany od daty, serwer zwróci kod 304 - not changed

Do Not Track - request header zaznaczaj cy, e u ytkownik nie yczy sobie ledzenia Cache-Control

- "w cza" cachowanie w przegl darce, bez tego headeru przegl darka za ka dym razem b dzie

da a nowych / wiezych danych Transfer-Encoding - ustala w jakiej formie zwracane b d dane

(chunked, compres, deflate, gzip) ETag - najcz ciej jest to suma kontrolna zasobów, je li jest ró na

ni naj wie sza, u ytkownik otrzymuje nowe dane / zasoby X-Frame-Options - ustala, czy strona

powinna (lub z jakimi restrykcjami) wy wietla 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?

foo Object {n: 2} n: 2 proto : Object foo.x undefined bar Objectn: 1 x:
foo Object {n: 2} n: 2 proto : Object foo.x undefined bar Objectn: 1 x:
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:

Wyja nij termin "chaining".

Chaining polega na tym, e wi kszo metod jquery po wywo aniu, zwraca nowy obiekt jQuery, na którym mo emy u y kolejnych metod.

Wyja nij termin "deferreds".

Deffereds jest to implementaca Promises w jQuery. Pozwalaj one na rejestrowanie zagnie d onych callbacków w kolejki callbacków, które mog si wykona poprawnie resolve, lub niepoprawnie reject. Mo na w ich u ywa zarówno 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 niezale nie czy deffered zwróci o reject, czy resolve done - gdy deffered zwróci resolved fail - gdy deffered zwróci rejected pipe - s u y do filtrowania i czenia deffereds w a cuchy

Jakie przyk ady optymalizacji jQuery potrafisz wykona ?

.detach() - usuni cie elementu z drzewa DOM, gdy na nim intensywnie pracujemy, nast pnie .append()

unikanie zbyt du ej specyficzno ci selektorów

ywanie #id w selektorach

ywanie for, zamiast each

dodawanie kontekstu do selectorów (np selector .class kontekst #id)

cachowanie cachowanie obiektów / selectorów w zmiennych

ywanie css zamiast width height - unikanie reflow w przegl darce

u

u

u

u

ywanie find

event delegation - u ywanie on na elementcie nadrz dnym i podawanie elementów na których ma by wywo any event, u ywanie this

nie u ywanie append w p tlach

Co robi .end()?

end() przywraca poprzedni obiekt (czy stan obiektu) w a cuchu wywo a (chain), tzn je li utworzymy obiekt jQuery z selectora (np p - paragraf) nast pnie u yjemy find do wyszukania wszystkich spanów w paragrafie, zmienimy ich kolor za pomoc metody css na czerwony, to

u ywaj c end wrócimy do obiektu z pierwszego selectora (p) i na nim b dziemy operowa , nie na obiektach z wywo anai find.

Jak i dlaczego u yjesz przestrzeni nazw przy obs udze wi zania zdarze ?

Podaj 4 ró ne warto ci, jakie mo esz przekaza do metody jQuery.

selector

DOM Element

obiekt jQuery do sklonowania

tablica elemetów DOM

obiekt js

Co to jest kolejka effects (lub fx)?

Jest do przypisana do elementu kolejka funkcji jakie zostan na nim wywo ane. Funkcje s wywo ywane asynchronicznie. Element mo e mie wiele przypisanych kolejek, identyfikowanych po nazwie, defaultowa nosi nazw fx.

Jakie s nice mi dzy .get(), [], i .eq()?

eq(index) zwraca object jQuery get(index?) zwraca element / tablic elementów DOM [] zwraca element DOM, natomiast nie mo e u ywa negatywnych indeksów

Jakie s nice mi dzy .bind(), .live(), i .delegate()?

.bind() - dodaje event bezpo rednio do elementu w drzewie DOM, jak addEventListener .live() - dodaje event handler do root elementu w dokumencie razem z selectorem, dzia a na zasadzie delegacji eventów, czyli przypina si tylko raz, mo e wykona si na kilku elementach, deperecated od 1.7 .delegate() - robi to samo co metoda live, natomiast mo emy poda element do którego

handler ma by przyczepiony .on() - w zale no ci od tego jak zostanie wywo ana, stosuje te same metody obs ugi eventów jak bind i delegate

Jakie s nice mi dzy $ i $.fn? Czym jest $.fn?

$ jest funkcj - aliasem do funkcji jQuery $.fn jest w a ciwo ci tej funkcji wskazuj c na prototyp wewn trznej funkcji init w jQuery (s u y do tworzenia instancji obiektu jQuery). Je li dodamy

w a ciwo / funkcj do $.fn b dzie ona dost pna we wszystkich instancjach stworzonych przez $ /

jQuery. S u y do tworzenia pluginów.

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

Pytania CSS:

Jaka jest ró nica mi dy klas a id

ID: jeden element mo e posiada tylko jedno id id musi by unikatowe w ca ym dokumencie specificity id jest wi ksze od specificity klasy

class: jeden element mo e posiada wiele klas, jedna klasa mo e by przypisana do wielu elementów klasa nie musi by unikatowa w ca ym dokumencie

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

Reset jest to specjalny zestaw regu usuwaj cych wszystkie domy lne style ze wszystkich elementów.

Normalize.css jest to zestaw stylów ujednolicaj cy wygl d podstawowych elementów mi dzy ró nymi przegl darkami. Zawiera wiele usprawnie , usuwaj cych powszechne b dy (elementy HTML5, font-size)

Opisz jak dzia a w a ciwo float.

W a ciwo float "wyjmuje" element z normal document flow, i przesuwa go do lewej lub prawej

kraw dzi zawieraj cego go kontenera, w zale no ci od parametru. Je li jest miejsce w kontenerze nadrz dnym pozosta a tre b dzie op ywa kontener z float. Kilka elementów z float s ustawiane obok siebie (je li maj podan ten sam kierunek i je li jest miejsce w nadrz dnym kontenerze). Je li element jest opisany w a ciwo ci float, zachowuje si jak element block, float nie wspó gra z position: fixed i position: absolute,

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

clear: left right both - oznacza, e górna kraw d elementu powinna znajdowa si pod elementem

z float left, right, lub oboj tnie jakim float w nadrz dnym elemencie

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

Wyja nij technik "CSS sprites" oraz sposób jej wdro enia na stronie.

CSS Sprites jest to u ywanie jednego pliku graficznego, do przedstawienia wielu grafik, w celu optymalizacji wielko ci zasobów. Aby css sprites dzia a o u ywa si obrazka jako background i przesuwa si go za pomoc background-position.

Jakie s Twoje ulubione techniki zast powania obrazów 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?

G ównie chodzi o vendor-prefixed, wykrywanie funkcjonalno ci przegl darki za pomoc modernizr,

wchodzi @suppor, u ywam caniuse eby sprawdzi jaki procent przegl darek obs uguje 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

height:1px; overflow:hidden;}

reader.

.hidden {position:absolute; left:-10000px; top:auto; width:1px;

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 g ównie o u ywanie odpowiednich selektorów, jak najbardziej specyficznych unikanie ogólnego selectora (gwiazdki *), preferowanie id je li to mo liwe

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

Przegl darka kolejno znajduje elementy pasuj ce do selektora od prawej do lewej. Ze wzgl du na efektywno .

box-sizing: content-box - width okre la content + padding + border + margin padding-box - width okre la content i padding + border + margin border-box - width okre la content i padding i border + margin

Haczyki w a ciwo ci CSS, warunkowe do czanie plików .css lub

Block formatting context

co innego?

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 przegl darek z ograniczonym wsparciem funkcji? Jakie techniki stosujesz? Jakie istniej sposoby wizualnego ukrycia tre ci (uczynienia ich dost pnymi tylko dla czytników ekranu)? Czy kiedykolwiek u ywa e systemów siatek, a je li tak, to jakie preferujesz? Czy u ywa e 'media queries' lub tworzy e konkretne uk ady i arkusze dla urz dze mobilnych? Czy mia e styczno ze stylizacj SVG? Jak optymalizujesz swoje strony do druku? Jakie stosujesz "sztuczki" przy pisaniu efektywnych CSS? Czy u ywasz narz dzi do przetwarzania CSS? (SASS, Compass, Stylus, LESS) Je li tak, opisz cechy, które lubisz i nie lubisz w u ywanych narz dziach. Jak tworzysz i wdra asz projekt u ywaj cy niestandardowych czcionek? Czcionki sieciowe (serwisy czcionek jak:

Google Webfonts, Typekit itd.) Wyja nij jak przegl darka okre la elementy pasuj ce do selektora

CSS?

Z-index: je li element znajduje si w innym elemencie i si pokrywaj , element wewn trzny jest na wierzchu je li elementy nast puj kolejno po sobie, element kolejny jest na wierzchu

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

je li chcemy u ywa z-index, element musi mie position relative, fixed lub absolute

Pytania dodatkowe (zabawne):

Opowiedz o najfajniejszej rzeczy jak kiedykolwiek zakodowa e . Z czego jeste najbardziej dumny? Jakie s Twoje ulubione cz ci narz dzi programistycznych, których u ywasz? Czy masz jaki swój

w asny 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