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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful