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

a Object. w którym używa się tabulacji. (postrzeganego lub rzeczywistego czasu ładowania) Postrzegane: . Czym jest FOUC? Jak unikasz FOUC? .Odpowiednia wielkość plików z obrazami. minifikacja css i js.thoughtco. jaka byłaby to technologia? Podnieść swój poziom znajomości i używania functional programming. Wyjaśnij znaczenie standardów sieciowych i ich twórców. Natomiast powoduje to opóźnienia (odpytywanie serwerów dns etc.może to spowodować załadowanie najpierw defaultowych / systemowych fontów . Tags][https://www.Ograniczenie ilości fontów .org) ● Zgodnie z konwencjami (pozostań konsekwentny) ● issue :retab! command 1. Napisz prosty pokaz slajdów (Dodatkowe punkty. co wtedy zrobisz? ● Sugerowanie użycia narzędzi w stylu EditorConfig (http://editorconfig. Gdybyś mógł opanować jedną technologię w tym roku. Dromaeo) Głównie narzędzi dostarczanych z przeglądarką Chrome . od wersji przeglądarki. które zawierają: ● Łączenie plików ● Zmniejszenie rozmiaru plików uglifyjs. 2. Ile zasobów pobiera przeglądarka z danej domeny w jednej chwili? To zależy od konkeretnej przeglądarki. response time etc ● Buforowanie cachowanie 1.Unikanie FOUC . minification.2. Podaj 3 sposoby na zmniejszenie czasu ładowania strony.jeżeli fonty są ładowane z CDN (jak gogole fonts) . profilera.mogą być serwowane w zależności od odległości od użytkoniwka. Jeśli dołączasz do projektu. Używając większej ilości domen można obejść to ograniczenie. 1.) 1. łączenie plików css / js w jeden .com/why-use-semantic-html-3468271] 2. Startsze przegląraki jak IE6 .Serwer: cachowanie i gzip contentu 1. używanie SVG. nauczyć się React Native 1. nowsze 6 / 8.assign etc. JSPerf. JSPerf do porównywania wydajności rozwiązań takich jak bezpośrednie przypisanie wartości do obiektu. od tego czy skrypty ładowane są synchronicznie (defer) czy asynchronicznie (async).Critical CSS .Preloadowanie obrazków poprzez ajax Rzeczywiste: . jeśli nie używasz JS) 2. a ty używasz spacji. css sprites (jeden obrazek. od ustawienia ile może obsługiwać połączeń jednocześnie. Dlaczego serwowanie zasobów strony przez wiele domen jest lepsze? Przeglądarka ma ustalony limit konkurencyjnych połączeń dla jednej domeny.timeline. 1. Jakich narzędzi używasz do sprawdzenia wydajności swojego kodu? (Profiler. Jak optymalizowałbyś zasoby strony internetowej? Myśląc o wielu rozwiązaniach. używany wiele razy) ● Zasoby CDN .

01 Frameset This DTD is equal to HTML 4. 1. HTML 4. w jednym pliku). Co robi doctype i jakie znasz przykłady? Doctype w dokumencie HTML daje znać przeglądarce z jakiego standardu renderowania dokumentu ma korzystać.0 Strict This DTD contains all HTML elements and attributes.. INCLUDING presentational and deprecated elements (like font). The markup must also be written as well-formed XML. but allows you to add modules (for example to provide ruby support for East-Asian languages).jest zawsze w standards mode. Framesets are not allowed. but allows the use of frameset content. Zarówno CSS jak i znaczniki HTML są elementami blokującymi renderowanie.01 Strict This DTD contains all HTML elements and attributes.01 Transitional This DTD contains all HTML elements and attributes.Flash of unstyled content jest to wyświetlenie użytkownikowi nieostylowanej strony (jej zawartości).dla starych przeglądarek navigator i ie 5 standards mode . Pytania HTML: 1. XHTML 1.1 This DTD is equal to XHTML 1. Obecnie jest używane głównie ze względu na zaszłości historyczne i zgodność ze starszymi przeglądarkami. . Pojawia się gdy CSS jest wolno ładowany lub gdy JS powoduje wielokrotne renderowanie strony / manipuluje elementami drzewa DOM lub stylami elementów. Jaka jest różnica między trybem standardów a trybem dziwactw (quirks mode)? quirks mode . oraz używać jak najmniej javascriptu powodującego fazę render przeglądarki. but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. Framesets are not allowed. nie potrzebuje doctype 1. XHTML 1.zgodne ze współczenymi specyfikacjami CSS i HTML application/xhtml+xml .0 Strict. HTML5 używamy tylko HTML 4. Aby uniknąć FOUC należy serwować użytkownikowi jak najbardziej zoptymalizowany CSS (zminifikowany. but does NOT INCLUDE presentational or deprecated elements (like font). Używanie media queries i serwowanie CSS zoptymalizowanego dla urządzeń o mniejszej rozdzielczości.01 Transitional.. Używanie Critical CSS (czyli wrzucanie najważniejszych reguł css inline w znaczniku head). Jakie są ograniczenia w serwowaniu stron XHTML? . aby zachować jednolitość parsowania i renderowania danego dokumentu między różnymi przeglądrakmi. HTML 4.

w ie8 otwiera dialog pobierania. Non-void elements with a start tag must have an end tag (p and li. Empty attributes are forbidden (checked must instead be checked="checked" or checked="true"). you need to take into account some of the differences between the two formats when writing your XHTML code. Since the browser considers the XML to actually be HTML. up to and including version 8. umożliwiają przekazywanie danych przy wykorzystaniu JS. Jaka jest przydatność atrybutów data- Atrybuty data. 3 1. In this case. Special characters must be escaped using character entities. and use the HTML parser. the user agent will read the file as if it were HTML. not an HTML parser. to ensure that the differences between XML and HTML syntax do not trip up the browser. Tags and attributes are case sensitive. Any element may be “self-closed” using />. Unfortunately. mogą zwrócić przeglądarce nie obsługującej tego typu (jak ie6) przy zapytaniu o stronę. Internet Explorer doesn't support files served as XML.pozwalają na przechowywanie danych w tagach HTML. Also metadata and Content-Language HTTP header can be used. for example). Co jest ważne przy projektowaniu i tworzeniu stron wielojęzycznych? ● hreflang attr in link ● dir attr indicating language direction.. sessionStorage i localStorage. 1. 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. many XHTML files are actually served using the text/html MIME type. Czy istnieją problemy z serwowaniem stron jako application/xhtml+xml? Obsługiwany od ie9. Jak serwujesz stronę z treścią w wielu językach? Use lang (or xml:lang for XHTML) in tags. although a number of other browsers do. Opisz różnice między cookies. typically lowercase. Cookie: . To get around the fact that not all browsers support content served as XML. 1. 2 1. Serwery kaszujące przy zapytaniu z content-type . This includes different ways of declaring the character encoding or language declarations inside the document. Przeglądarki wyświetlą błędy xml (jeśli jakieś będą) na stronie. Attribute values must be enclosed in quotes.. Rozpatrujemy HTML5 jako otwartą platformę internetową.All elements must have a start tag. When a browser reads XML it uses an XML parser. such as rtl ● font-size for :lang({language_code}) selectors in CSS ● difference in word langth for each language 1.

1. Explain how prototypal inheritance works Każdy obiekt w JS jest wewnętrznie połączony z innym obiektem. localStorage: Max size of 2. or exit the browser . 1. za pomocą prototypu.target możemy sprawdzić gdzie zdarzył się event i wykonać go na odpowiednim elemencie.używane jest w przeglądarkach. }} .exports | require .na backendzie . open a new tab. gdy ostatni z obiektów w łańcuchu ma prototyp o wartości null. AMD: . event bubbles up (bąbluje do góry) dochodząc do elementu z przypisanym handlerem.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. obj. za pomocą jednego handlera.w node . Dzięki temu możemy obsłużyć zdarzenia występujące na wielu elementach.obj const a = ab. 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. umożliwia asynchroniczne ładowanie modułów - define('module'. CommonJS: .bind(obj) . Wyszukując właściwości w danym obiekcznie.fun(). This jest definiowane / ustawiane nie w momencie deklarowania w kodzie. Przechowuje wartość obiektu w kontekście jakiego dana funkcja została uruchomiona. Łańcuch prototypów kończy się. function module() { return contents }).obj 1. zamiast do elementu który chcemy obsłużyć.exports / module.you'll lose that specific sessionStorage data.call(obj) . Explain event delegation Delegacja zdarzeń / eventów polega na przypięciu obsługi zdarzenia (event handler) do elementu nadrzędnego. function ab() { this } . które są w łańcuchu prototypów.window ab. jeśli ich nie znajdzie.window (ponieważ window. Po kliknięciu na element wewnętrzny. ale w momencie wywołania funkcji.5MBs+ depending on browser Stored in browser and not sent with every request Will persist if browser/tabs are closed. z którego "dziedziczy". [dependencies].ab) var obj = { fun: ab }.obj var obj = { fun: function() { ab(). interpreter JS przeszukuje obiekty. Explain how this works in JavaScript Właściwość this ogólnie wskazuje na kontekst w jakim dana funkcja została wywołana. Następnie za pomocą event. Pytania JS JS Questions: 1.

1. która nie została stworzona za pomocą var/let/const.domknięcie .środowisko . What's the difference between a variable that is: null. zmienna została zadeklrowana i przypisny do niej obiekt typu Null undefined jest typem. undefined or undeclared? undeclared jest to zmienna. a więc została stworzona na obiekcie globalnym window/global. What is a closure. undefined jest to zmienna. How would you go about checking for any of these states? if (typeof var === "undefined") if (var === null) 1. nawet po jej wykonaniu.1. która została zadeklarowana. classical inheritance?) Używam module pattern. Ponieważ jest to deklaracja funkcji. What's a typical use case for anonymous functions? Są używane jako callbacks IFFE's Używanie ich jako domknięć (closures) 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. Difference between: function Person(){}. jak Array. 1. (). and how/why would you use one? Closure . który ma przypisaną tylko jedną wartość null.mogą się one różnić pomędzy środowiskami. ale nie została do niej przypisana żadna wartość null jest to typ. 1. // wyrażenie funkcyjne? Można to zapisać jako function foo(){}. null jest obiektem 1. How do you organize your code? (module pattern. a nie function expression. var person = Person(). function expression 1.pozwala na dostęp do wewnętrznego scope funkcji. Natomiast native objects są to obiecty opisane w specyfikacji ECMAScript. Osiąga się to poprzez zwrócenie funkcji po wywołaniu fukncji nadrzędnej. What's the difference between host objects and native objects? Host objects są to obiekty dostarczane przez przeglądarkę .. IEEF's 1. and var person = new Person()? . Explain why the following doesn't work as an IIFE: function foo(){ }().

JavaScript Object Notation with Padding . What's the difference between . niż domena w której uruchamiany jest skrypt.prototype. JSONP umożliwa pobieranie danych JSON poprzez opakowanie danych w funkcję JS.● jest to deklaracja funkcji. ● można używać tylko z zapytaniami GET 1. What's the difference between feature detection. Explain Function. natomiast apply w postaci tablicy 1. co może prowadzić do błędów.write()? 2. czy dany ficzer / właściwość / funkcjonalność / jest dostępny w środowisku wykonywalnym Feauture inference polega na załżeniu. zwracając nową funkcję z przypisanym kontektem. 1. jaka uruchamia danych skrypt js. W celu uruchomienia funkcji zwracającej JSON musimy w urlu podać callback taki sam jak funkcja opakowująca JSON. Bind pozwala przypisać this do kontektu jaki chcemy. Pozwala on także przypisać domyślne argumenty dla zwracanej funkcji.call and . co umożliwia uruchomienie zewnętrznego skryptu js poprzez dodanie go za pomocą tagu script. UA string czyli User Agent string domyślnie zwraca wersję przeglądarki jaka wykonuje zapytanie. 2.apply? Call przymuje argumenty funkcji normalnie. Have you ever used JavaScript templating? If so. feature inference. Explain how JSONP works (and how it's not really Ajax). 1. What are the advantages and disadvantages of using Ajax? 3. and using the UA string? Feauture detection jest to wykrywanie. UA string może być zmieniany przez klienta. Explain "hoisting". Hoisting jest to "wynoszenie" przez lexer / interpreter JS zmiennych i funkcji zadeklarowanych jako .bind. Używa się ich wtedy bez sprawdzania czy istnieją. When would you use document.zdalny AJAX spoza domeny pozwala na pobieranie danych z serwerów znajdujących się w innej domenie. że jeśli dana funkcjonalność jest dostępna w danej wersji przeglądarki. 1. Explain Ajax in as much detail as possible. z this przypisanym do obiektu person 1. przypisyje nazwę do funkcji ● przypisuje do zmiennej person wartość zwracaną przez funkcję person. what libraries have you used? Używałem jedynie Handlebars do prostych skryptów wymagających wypełniania dużej ilości danych w pętli.js Pomaga ominać Same-origin policy. to cała reszta funkcjonalności także. w tym przypadku undefined ● przypisuje do zmiennej person obiekt typu Person.

1. 1.2. grafiką zostały załadowane.5] function duplicate(arr) { if (!arr) return [].concat(arr). 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.3. wszyscy rodzice tego elementu są o tym powiadmiani.4. Zmienne mają nadaną nazwę. What is "use strict". 1. Jeśli dodamy swoje metody do wbudowanego obiektu. pozwalający na wyeliminowanie . posiadający więcej restrykcji niż tryb zwykły.5. Bubbling jest to wynoszenie / przechodzenie eventu do góry drzewa DOM. // [1. twórcy przeglądarki mogą zaimplementować metodę o takiej samej nazwie. } 1. Why is it called a Ternary expression. Wyrażenie zwracające Boolean. z których wywoływane są skrypty. Mechanizm ten zapobiega dostępowi skryptów js do drzew DOM znajdujących się na różnych originach. What is the difference between == and ===? == porównuje wartości.4.1.2. Same origin zachodzi wtedy. 1. what does the word "Ternary" indicate? Ternary expression nazywa się tak ponieważ składa się / przyjmuje trzy argumenty. Jeśli użytkownik wykona jakąś akcję na elemencie zagnieżdżonym w drzewie dom. nie dokonując koercji 1. Jest to fundamentalny mechanizm bezpeiczeństwa przeglądarki. return arr.3. użytkownik nie będzie wiedział której używa itp. Make this work: duplicate([1. Explain the same-origin policy with regards to JavaScript. ale nie mają przypisanej wartości. dokonując koercji jeśli typy zmiennych nie są jednakowe === porównuje wartości jak i typy zmiennych. 1.4.3. na początku skryptu przełącza interpeter JS w strict mode.? what are the advantages and disadvantages to using it? Ciąg znaków "use strict". Describe event bubbling. gdy HTML został załadowany i drzewo DOM zbudowane natomiast event load. włącznie z css.5]).2. What's the difference between an "attribute" and a "property"? Atrybut jest to wartość w samym HTML. Number 1. wartość dla true i wartość dla false. może mieć różne typy jak String. gdy cała strona. Difference between document load event and document DOMContentLoaded event? event DOMContentLoaded jest uruchamiany. gdy zgodne są protokół port i host stron. więc są to zmienne undefined. mogą one zostać nadpisane przez nieświadomego developera używającego naszego kodu. 1.var oraz przez uzycie function. która jest zawsze stringiem Property jest przypisana do obiektu w drzewie DOM. Jest to bardziej restrykcyjny tryb.

który piszemy kod. else if (i % 3 == 0) console. oraz drzewo DOM zostało zbudowane.keys(obj) Object. 2. Why is it. 1. nadpisać zmienne używane przez inne skrypty. else console. w których spodziewam się że wystąpił błąd. Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3.niektórych błędów. co pomaga w programowaniu i wyłapywaniu błędów już na etapie kodowania etc. 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. 1. hoisting. What language constructions do you use for iterating over object properties and array items? object properties: for i in object Object. Explain the difference between mutable and immutable objects. Użyłbym load gdyby od razu po załadowaniu strony chciał np pobrać wielkość obrazków.values(obj) array: for() forEach map 1. jeśli to nie pomoże to ustawiam breakpoint i debuguję w debuggerze 1. . że trzeba kompilować js po każdej zmianie. a good idea to leave the global scope of a website as-is and never touch it? Ponieważ możemy zmienić wartość.log(i).log w miejscach. kod wynikowy jest inny niż kod. Język może zawierać static typing. and why would you use those? Load event pozwala na powiadomienie skryptu. else if (i % 5 == 0) console. Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives.log('fizzbuzz'). Explain what a single page app is and how to make one SEO-friendly. } 1. "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5 for(let i = 0. Po odpaleniu takiego eventu możemy być pewni. What are the pros and cons of using Promises instead of callbacks? 4. Może on eliminować wszystkie dziwactwa JS jak scope. Minusy: głównie to. że wszystkie zasoby strony zostały załadowane. jak np ustawianie this na globalny kontekst wewnątrz funkcji etc. i++) { if (i % 3 == 0 && i % 5 == 0) console. mimo że jest optymalizowany musi zawierać sporo boilerplate i polyfillów.log('fizz'). What is the extent of your experience with Promises and/or their polyfills? 3. że zdjęcia oraz css zostały załadowane. co zwiększa jego objętość 1. i < 100. 1.log('buzz'). sprawdzić styl danego elementu. What tools and techniques do you use debugging JavaScript code? console. in general.

tdd framework. karma . że testy także potrzebują refaktoryzacji oraz jest to znacznie więcej kodu do konserwacji. pozwala prowadzić refaktoryzację kodu i sprawdzać. cons: większe zużycie zasobów. Explain the difference between synchronous and asynchronous functions. pure funkctions 1. czyli unikamy zwracania null ❍ 2. czyli możemy zmienić wartość danej właściwości w obiekcie. ale jest to zamrażanie płytkie 1. What tools would you use to test your code's functionality? jasmine . czy nic nie zostało zepsute. What is event loop? 3.js używając programowania funkcyjnego. 1. What is the difference between call stack and task queue? 4.tests runner selenium driver . głównie pamięci z powodu kopiowania obiektów (structural sharing ❍ zmniejsza wykorzystanie) ciężko budować struktury cykliczne jak grafy ❍ 3. Immutable nie pozwalają na to. How can you achieve immutability in your own code? Używając biblioteki jak immutable. Minusem jest to. What is the difference between a unit test and a functional/integration test? unit test są to testy jednostkowe.testowanie funkcjonowania strony / aplikacji 1.freeze(). 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. że kod działa tak jak powinien. sprawdzające czy poszczególne funkcje działają poprawnie . What are some advantages/disadvantages to testing your code? Testowanie kodu (testy jednostkowe) zapewniają. 1. What is an example of an immutable object in JavaScript? Obiekt można zamrozić przez Object. 2.Objekty mutable pozwalają na zmianę swoich właściwości. Możemy zwrócić jedynie kopię obiektu ze zmienionymi wartościami. Explain the differences on the usage of foo between function foo() {} and var foo = function() {} Testing Questions: 1.

why has it been better to serve site assets from multiple domains? 2.request header zaznaczający. lub systemu jako całości. What is the purpose of a code style linting tool? Eliminacja prostych błędów już podczas pisania kodu. What are some ways you may improve your website's scrolling performance? grafiki powinny być w wielkości konenerów w jakich się znajdują.. Jeśli ustawione jest max-age. Expires .najczęściej jest to suma kontrolna zasobów. jak komponenty systemu funkcjonują między sobą etc. czy strona . jeśli jest różna niż najświeższa. Websockets and Server-Sent Events? 4. between Expires. grafiki compositing . Explain the difference between layout. że użytkownik nie życzy sobie śledzenia Cache-Control .not changed Do Not Track .jeśli zasób nie był zmieniany od daty. 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 . bez tego headeru przeglądarka za każdym razem będzie żądała nowych / świezych danych Transfer-Encoding . Performance Questions: 1. pobieranie wielkości kontenerów używanie debounce do eventów scrollowania 1.ustala. What are the differences between Long-Polling.renderowanie całej strony Network Questions: 1. Age and If-Modified-. layout . konsekwentne formatowanie kodu dla wszystkich członków zespołu.definiuje datę w której ważność cachowanego zasobu traci ważność.wypełnianie pixeli. compres.ustala w jakiej formie zwracane będą dane (chunked. na właściwym miejscu . What tools would you use to find a performance bug in your code? Chrome profiler 1. painting and compositing. If-Modified-Since ."włącza" cachowanie w przeglądarce. rysowanie tekstów.. Date. 3. 1. Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen. powinny być zoptymalizowane. gzip) ETag . wyrażane w sekundach.składanie komponentów i wyświeltanie ich we właściwej kolejności. max-age jest ważniejsze od Expires. Po tej dacie przeglądarka zarząda świeżej kopi danych. Explain the following request and response headers: Diff. kolorów. Traditionally. w której przeglądarka sprawdza ile miejsca potrzeba dla każdego komponentu na stronie painting . użytkownik otrzymuje nowe dane / zasoby X-Frame-Options . serwer zwróci kod 304 . Zapewnia jednakowe. deflate.jest to faza.natomiast functional / integration tests sprawdzają działanie większych części systemu.

foo. Question: How would you make this work? add(2.x = foo = {n: 2}. What are HTTP methods? List all HTTP methods that you know.join("").length? var foo = [].push(2). Question: What is the value of window. and explain them. 1. })(). foo. b) { if (a && b) return a + b.foo? ( window. (function() { var bar = " World". var bar = foo. Question: What value is returned from the following statement? "i'm a lasagna hog". // 7 function add(a. alert(foo + bar). .push(1).x? var foo = {n: 1}.powinna (lub z jakimi restrykcjami) wyświetlać strony w iframe 1. 5).foo = "bar" ) ).reverse(). return function add2(b) { return a + b. Question: What is the value of foo. // 7 add(2)(5). alert(foo + bar). Question: What is the outcome of the two alerts below? var foo = "Hello". 1. } } 1. // reference Error 1. Coding Questions: 1. foo. Question: What is the value of foo? var foo = 10 + '20'. 1.split(""). Question: What is the value of foo.foo || ( window. '1020' 1.

jak i swoje: always . Deffered w jQuery posiadają metody znane z Promises czyli: catch. 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".detach() .wykonuje się zawsze niezależnie czy deffered zwróciło reject.append() . setTimeout(function() { console. Pozwalają one na rejestrowanie zagnieżdżonych callbacków w kolejki callbacków.służy do filtrowania i łączenia deffereds w łańcuchy Jakie przykłady optymalizacji jQuery potrafisz wykonać? ● . Deffereds jest to implementaca Promises w jQuery. Można w ich używać zarówno do funkcji synchronicznych jak i asynchronicznych.log('two').gdy deffered zwrócił resolved fail . Chaining polega na tym. console. resolve. }. lub niepoprawnie reject. gdy na nim intensywnie pracujemy.log('one').gdy deffered zwrócił rejected pipe .log('three'). reject. then. na którym możemy użyć kolejnych metod. Question: What does the following code print? console.usunięcie elementu z drzewa DOM. następnie .x undefined bar Objectn: 1 x: Object n: 2__proto__: Object__proto__: Object 1. czy resolve done . 0). foo Object {n: 2} n: 2__proto__: Object foo. Wyjaśnij termin "deferreds". że większość metod jquery po wywołaniu. zwraca nowy obiekt jQuery. które mogą się wykonać poprawnie resolve.

tzn jeśli utworzymy obiekt jQuery z selectora (np p . natomiast możemy podać element do którego . ● 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.paragraf) następnie użyjemy find do wyszukania wszystkich spanów w paragrafie. Jakie są różnice między .dodaje event bezpośrednio do elementu w drzewie DOM. Funkcje są wywoływane asynchronicznie. używanie this ● nie używanie append w pętlach Co robi . jak addEventListener . natomiast nie może używać negatywnych indeksów Jakie są różnice między . deperecated od 1. identyfikowanych po nazwie.delegate() . i .bind().class kontekst #id) ● cachowanie cachowanie obiektów / selectorów w zmiennych ● używanie css zamiast width height . czyli przypina się tylko raz.eq()? eq(index) zwraca object jQuery get(index?) zwraca element / tablicę elementów DOM [] zwraca element DOM. . jakie możesz przekazać do metody jQuery. Jak i dlaczego użyjesz przestrzeni nazw przy obsłudze wiązania zdarzeń? Podaj 4 różne wartości. defaultowa nosi nazwę fx. zamiast each ● dodawanie kontekstu do selectorów (np selector .live().live() - dodaje event handler do root elementu w dokumencie razem z selectorem. może wykonać się na kilku elementach. [].unikanie reflow w przeglądarce ● używanie find ● event delegation . zmienimy ich kolor za pomocą metody css na czerwony. nie na obiektach z wywołanai find.end()? end() przywraca poprzedni obiekt (czy stan obiektu) w łańcuchu wywołań (chain).● unikanie zbyt dużej specyficzności selektorów ● używanie #id w selektorach ● używanie for.get(). działa na zasadzie delegacji eventów. Element może mieć wiele przypisanych kolejek.bind() .używanie on na elementcie nadrzędnym i podawanie elementów na których ma być wywołany event.delegate()? . to używając end wrócimy do obiektu z pierwszego selectora (p) i na nim będziemy operować.robi to samo co metoda live. i .7 .

Jeśli dodamy właściwość / funkcję do $. stosuje te same metody obsługi eventów jak bind i delegate Jakie są różnice między $ i $. Normalize.handler ma być przyczepiony . Służy do tworzenia pluginów. Reset jest to specjalny zestaw reguł usuwających wszystkie domyślne style ze wszystkich elementów. lub obojętnie jakim float w nadrzędnym elemencie .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. zachowuje się jak element block. jedna klasa może być przypisana do wielu elementów klasa nie musi być unikatowa w całym dokumencie Opisz.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).w zależności od tego jak zostanie wywołana.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. 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). font-size) Opisz jak działa właściwość float.fn będzie ona dostępna we wszystkich instancjach stworzonych przez $ / jQuery.oznacza. Jeśli jest miejsce w kontenerze nadrzędnym pozostała treść będzie opływać kontener z float. Zawiera wiele usprawnień.css jest to zestaw stylów ujednolicający wygląd podstawowych elementów między różnymi przeglądarkami.on() .fn? Czym jest $.fn? $ jest funkcją . w zależności od parametru. float nie współgra z position: fixed i position: absolute. right. Zoptymalizuj selektor: $(". Jeśli element jest opisany właściwością float. i przesuwa go do lewej lub prawej krawędzi zawierającego go kontenera. że górna krawędź elementu powinna znajdować się pod elementem z float left. Jakie znasz techniki kasowania (clearing) i kiedy wskazane jest ich stosowanie? clear: left right both .aliasem do funkcji jQuery $. . usuwających powszechne błędy (elementy HTML5. Właściwość float "wyjmuje" element z normal document flow.clearfix . czym jest plik "reset" dla CSS i dlaczego jest użyteczny.

w celu optymalizacji wielkości zasobów.hidden {position:absolute. Positioning content off-screen The following are the recommended styles for visually hiding content that will be read by a screen reader. box-sizing: content-box . left:-10000px.width określa content i padding i border + margin . wchodzi @suppor.CSS Sprites jest to używanie jednego pliku graficznego. /* IE6.} How would you approach fixing browser-specific styling issues? using reset or normalize. preferowanie id jeśli to możliwe Explain how a browser determines what elements match a CSS selector. 1px. height:1px.width określa content i padding + border + margin border-box .width określa content + padding + border + margin padding-box . wykrywanie funkcjonalności przeglądarki za pomocą modernizr. What are some of the "gotchas" for writing efficient CSS? chodzi głównie o używanie odpowiednich selektorów. and it changes responsively to screen changes Adaptive: For each possible screen size. Aby css sprites działało używa się obrazka jako background i przesuwa się go za pomocą background-position. overflow:hidden. there is a distinct layout. top:auto. 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. width:1px. 1px). do przedstawienia wielu grafik. IE7 */ clip: rect(1px.css How is responsive design different from adaptive design? Responsive: There is one basic layout. jak najbardziej specyficznych unikanie ogólnego selectora (gwiazdki *). Przeglądarka kolejno znajduje elementy pasujące do selektora od prawej do lewej. 1px. clip: rect(1px 1px 1px 1px). Ze względu na efektywność. 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. .

don't stop rendering process while asynchronously downloading a script.) 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ą. 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.Haczyki właściwości CSS. które lubisz i nie lubisz w używanych narzędziach. Compass. async no order . element wewnętrzny jest na wierzchu jeśli elementy następują kolejno po sobie. it stops rendering and runs the script. When finishing download. element musi mieć position relative.. 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. opisz cechy. a jeśli tak. Jak tworzysz i wdrażasz projekt używający niestandardowych czcionek? Czcionki sieciowe (serwisy czcionek jak: Google Webfonts.. defer order. It is the region in which the layout of block boxes occurs and in which floats interact with each other. Z czego jesteś najbardziej dumny? Jakie są Twoje ulubione części narzędzi programistycznych. fixed lub absolute Pytania dodatkowe (zabawne): Opowiedz o najfajniejszej rzeczy jaką kiedykolwiek zakodowałeś. which is the default for HTML table cells) table captions (elements with display: table-caption.css lub. When finishing rendering. 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. it runs the script. don't stop rendering process while asynchronously downloading a script. LESS) Jeśli tak. warunkowe dołączanie plików . Typekit itd. Stylus. pokazując się zawsze ponad elementami static i relative jeśli chcemy używać z-index. element kolejny jest na wierzchu position: absolute i fixed zmieniają to. and download and run a script. 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. coś innego? Block formatting context A block formatting context is a part of a visual CSS rendering of a Web page.