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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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