HTML CSS JS Pytania rekrutacyjne

H5BP Front-end Developer Interview Questions Pytania ogólne: 1. Czego nauczyłeś się wczoraj/w tym tygodniu?React Higher Order Components Sequelize ORM dla NodeJs 2. Co pobudza lub interesuje cię w programowaniu?Ogólnie swoboda w tworzeniu. Możliwość automatyzacji i rozwiązywania codziennych czynności / problemów. Wyzwania, lubię dłubać w problemach i je rozwiązywać. Zmusza do ciągłego samodoskonalenia się. Ciągłej nauki. Jest też formą rywalizacji w dążeniu do doskonałego kodu. 3. Jakie jest Twoje preferowane środowisko programistyczne? (system operacyjny, edytor, przeglądarki, narzędzia itd.)Systemem operacyjny: Linuks Edytor: dla drobnych zmian Vim, do projektów Visual Studio Code / Webstorm, czasami używam Spacemacs Przeglądarki: Chromium, Firefox, Google Chrome (Unstable) Narzędzia: Webpack, Gulp, konsola, tiling window manager, ag, grep 4. Opisz kolejne zadania podczas tworzenia strony internetowej?Najpierw zbieranie wymagań klienta, funkcjonalnych i niefunkcjonalnych. Tworzenie środowiska - skrypty służące do budowania w środowisku developerskim i produkcyjnym - webpack, gulp. Szkielet strony i semantyka, wypełnienie kontentem + poprawa semantyki, stylowanie, animacje, dodawanie interaktywności, 5. Opisz różnicę między stopniowym ulepszaniem (progressive enhancement) i wdzięczną degradacją (graceful degradation)?Graceful degradation - oprogramowanie / strona jest tworzona dla użytkowników używających nowszych przeglądarek, obsługujących nowe technologie, zapewniając im pełne user expirience. Stopniowo zmniejsza się user expirience dla użytkowników używających starsze wersje przeglądarek, wciąż zapewniając im funkcjonalność aplikacji / strony na podstawowym poziomie.Progressive enhancement - tworzenie aplikacji strony zapewniającej pewien poziom funkcjonalności dla wszystkich przeglądarek, następnie rozbudowuje się ją o nowe funkcjonalności / features dla nowszych przeglądarek. 6. Dodatkowe punkty za opisanie wykrywania obsługi cech (feature detection) Z użyciem js : modernizr, detekcja zmiennych / funkcji dostępnych tylko w niektórych przeglądarkach (jak ie) var elem = document.createElement( "canvas" ); if ( elem.getContext && elem.getContext( "2d" ) ) { showGraph(); } else { showTable(); }

Bez użycia js: tagi 1. Wyjaśnij, co kryje się za terminem "semantyczny HTML".Semantyczny HTML - jest to używanie znaczników / tagów HTML zgodnie z ich przeznaczeniem i znaczeniem semantycznym, a nie tylko do prezentowania danych. Znaczniki nadają sens i w różnym kontekście mogną oznaczać do innego. Np i i , section, aside, nav. Jest to ważne dla robotów indeksujących google, dla czytników przeznaczonych dla osób niepełnosprawnych etc.[HTML5 Element Flowchart][http://html5doctor.com/downloads/h5d-sectioning-flowchart.png] [Semantic HMTL

Tags][https://www.thoughtco.com/why-use-semantic-html-3468271] 2. Jak optymalizowałbyś zasoby strony internetowej? Myśląc o wielu rozwiązaniach, które zawierają: ●

Łączenie plików

●

Zmniejszenie rozmiaru plików uglifyjs, minification, używanie SVG, css sprites (jeden obrazek, używany wiele razy)

●

Zasoby CDN - mogą być serwowane w zależności od odległości od użytkoniwka, response time etc

●

Buforowanie cachowanie

1. Dlaczego serwowanie zasobów strony przez wiele domen jest lepsze? Przeglądarka ma ustalony limit konkurencyjnych połączeń dla jednej domeny. Używając większej ilości domen można obejść to ograniczenie. Natomiast powoduje to opóźnienia (odpytywanie serwerów dns etc.) 1. Ile zasobów pobiera przeglądarka z danej domeny w jednej chwili? To zależy od konkeretnej przeglądarki, od wersji przeglądarki, od ustawienia ile może obsługiwać połączeń jednocześnie, od tego czy skrypty ładowane są synchronicznie (defer) czy asynchronicznie (async). Startsze przegląraki jak IE6 - 2, nowsze 6 / 8. 1. Podaj 3 sposoby na zmniejszenie czasu ładowania strony. (postrzeganego lub rzeczywistego czasu ładowania) Postrzegane: - Critical CSS - Unikanie FOUC - Ograniczenie ilości fontów - jeżeli fonty są ładowane z CDN (jak gogole fonts) - może to spowodować załadowanie najpierw defaultowych / systemowych fontów - Preloadowanie obrazków poprzez ajax Rzeczywiste: - Odpowiednia wielkość plików z obrazami, minifikacja css i js, łączenie plików css / js w jeden - Serwer: cachowanie i gzip contentu 1. Jeśli dołączasz do projektu, w którym używa się tabulacji, a ty używasz spacji, co wtedy zrobisz? ●

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

●

Zgodnie z konwencjami (pozostań konsekwentny)

●

issue :retab! command

1. Napisz prosty pokaz slajdów (Dodatkowe punkty, jeśli nie używasz JS) 2. Jakich narzędzi używasz do sprawdzenia wydajności swojego kodu? (Profiler, JSPerf, Dromaeo) Głównie narzędzi dostarczanych z przeglądarką Chrome - timeline, profilera. JSPerf do porównywania wydajności rozwiązań takich jak bezpośrednie przypisanie wartości do obiektu, a Object.assign etc. 1. Gdybyś mógł opanować jedną technologię w tym roku, jaka byłaby to technologia? Podnieść swój poziom znajomości i używania functional programming, nauczyć się React Native 1. Wyjaśnij znaczenie standardów sieciowych i ich twórców. 2. Czym jest FOUC? Jak unikasz FOUC?

Flash of unstyled content jest to wyświetlenie użytkownikowi nieostylowanej strony (jej zawartości). Zarówno CSS jak i znaczniki HTML są elementami blokującymi renderowanie. Pojawia się gdy CSS jest wolno ładowany lub gdy JS powoduje wielokrotne renderowanie strony / manipuluje elementami drzewa DOM lub stylami elementów. Aby uniknąć FOUC należy serwować użytkownikowi jak najbardziej zoptymalizowany CSS (zminifikowany, w jednym pliku), oraz używać jak najmniej javascriptu powodującego fazę render przeglądarki. Używanie Critical CSS (czyli wrzucanie najważniejszych reguł css inline w znaczniku head). Używanie media queries i serwowanie CSS zoptymalizowanego dla urządzeń o mniejszej rozdzielczości.

Pytania HTML: 1. Co robi doctype i jakie znasz przykłady? Doctype w dokumencie HTML daje znać przeglądarce z jakiego standardu renderowania dokumentu ma korzystać, aby zachować jednolitość parsowania i renderowania danego dokumentu między różnymi przeglądrakmi. Obecnie jest używane głównie ze względu na zaszłości historyczne i zgodność ze starszymi przeglądarkami. HTML5 używamy tylko HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content. XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. ... XHTML 1.1 This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). 1. Jaka jest różnica między trybem standardów a trybem dziwactw (quirks mode)? quirks mode - dla starych przeglądarek navigator i ie 5 standards mode - zgodne ze współczenymi specyfikacjami CSS i HTML application/xhtml+xml - jest zawsze w standards mode, nie potrzebuje doctype 1. Jakie są ograniczenia w serwowaniu stron XHTML?

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

hreflang attr in link

●

dir attr indicating language direction, such as rtl

●

font-size for :lang({language_code}) selectors in CSS

●

difference in word langth for each language

1. Jaka jest przydatność atrybutów dataAtrybuty data- pozwalają na przechowywanie danych w tagach HTML, umożliwiają przekazywanie danych przy wykorzystaniu JS, 1. Rozpatrujemy HTML5 jako otwartą platformę internetową. Jakie składniki tworzą HTML5? more semantic text markup new form elements vedio and audio new javascript API canvas and SVG new communication API geolocation API web worker API new data storage 1. Opisz różnice między cookies, sessionStorage i localStorage. Cookie:

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

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

●

jest to deklaracja funkcji, przypisyje nazwę do funkcji

●

przypisuje do zmiennej person wartość zwracaną przez funkcję person, w tym przypadku undefined

●

przypisuje do zmiennej person obiekt typu Person, z this przypisanym do obiektu person

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

można używać tylko z zapytaniami GET

1. Have you ever used JavaScript templating? If so, 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. 1. Explain "hoisting". Hoisting jest to "wynoszenie" przez lexer / interpreter JS zmiennych i funkcji zadeklarowanych jako

var oraz przez uzycie function. Zmienne mają nadaną nazwę, ale nie mają przypisanej wartości, więc są to zmienne undefined. 1. Describe event bubbling. Bubbling jest to wynoszenie / przechodzenie eventu do góry drzewa DOM. Jeśli użytkownik wykona jakąś akcję na elemencie zagnieżdżonym w drzewie dom, wszyscy rodzice tego elementu są o tym powiadmiani. 1. What's the difference between an "attribute" and a "property"? Atrybut jest to wartość w samym HTML, która jest zawsze stringiem Property jest przypisana do obiektu w drzewie DOM, może mieć różne typy jak String, Number 1. Why is extending built -in JavaScript objects not a good idea? Ponieważ obiekty te zostały stworzone według pewnej dobrze udokumentowanej i przemyślanej specyfikacji. Jeśli dodamy swoje metody do wbudowanego obiektu, mogą one zostać nadpisane przez nieświadomego developera używającego naszego kodu, twórcy przeglądarki mogą zaimplementować metodę o takiej samej nazwie, użytkownik nie będzie wiedział której używa itp. 1. Difference between document load event and document DOMContentLoaded event? event DOMContentLoaded jest uruchamiany, gdy HTML został załadowany i drzewo DOM zbudowane natomiast event load, gdy cała strona, włącznie z css, grafiką zostały załadowane. 1. What is the difference between == and ===? == porównuje wartości, dokonując koercji jeśli typy zmiennych nie są jednakowe === porównuje wartości jak i typy zmiennych, nie dokonując koercji 1. Explain the same-origin policy with regards to JavaScript. Jest to fundamentalny mechanizm bezpeiczeństwa przeglądarki. Mechanizm ten zapobiega dostępowi skryptów js do drzew DOM znajdujących się na różnych originach. Same origin zachodzi wtedy, gdy zgodne są protokół port i host stron, z których wywoływane są skrypty. 1. Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5] function duplicate(arr) { if (!arr) return []; return arr.concat(arr); }

1. Why is it called a Ternary expression, what does the word "Ternary" indicate? Ternary expression nazywa się tak ponieważ składa się / przyjmuje trzy argumenty. Wyrażenie zwracające Boolean, wartość dla true i wartość dla false. 1. What is "use strict";? what are the advantages and disadvantages to using it? Ciąg znaków "use strict"; na początku skryptu przełącza interpeter JS w strict mode. Jest to bardziej restrykcyjny tryb, posiadający więcej restrykcji niż tryb zwykły, pozwalający na wyeliminowanie

niektórych błędów, jak np ustawianie this na globalny kontekst wewnątrz funkcji etc. 1. Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5 for(let i = 0; i < 100; i++) { if (i % 3 == 0 && i % 5 == 0) console.log('fizzbuzz'); else if (i % 3 == 0) console.log('fizz'); else if (i % 5 == 0) console.log('buzz'); else console.log(i); }

1. Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it? Ponieważ możemy zmienić wartość, nadpisać zmienne używane przez inne skrypty. 1. Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those? Load event pozwala na powiadomienie skryptu, że wszystkie zasoby strony zostały załadowane. Po odpaleniu takiego eventu możemy być pewni, że zdjęcia oraz css zostały załadowane, oraz drzewo DOM zostało zbudowane. Użyłbym load gdyby od razu po załadowaniu strony chciał np pobrać wielkość obrazków, sprawdzić styl danego elementu. 1. 2. 3. 4.

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

Plusy: Zależnie od języka w jakim piszemy. Język może zawierać static typing, co pomaga w programowaniu i wyłapywaniu błędów już na etapie kodowania etc. Może on eliminować wszystkie dziwactwa JS jak scope, hoisting. Minusy: głównie to, że trzeba kompilować js po każdej zmianie, kod wynikowy jest inny niż kod, który piszemy kod, mimo że jest optymalizowany musi zawierać sporo boilerplate i polyfillów, co zwiększa jego objętość 1. What tools and techniques do you use debugging JavaScript code? console.log w miejscach, w których spodziewam się że wystąpił błąd, jeśli to nie pomoże to ustawiam breakpoint i debuguję w debuggerze 1. What language constructions do you use for iterating over object properties and array items? object properties: for i in object Object.keys(obj) Object.values(obj) array: for() forEach map 1. Explain the difference between mutable and immutable objects.

Objekty mutable pozwalają na zmianę swoich właściwości, czyli możemy zmienić wartość danej właściwości w obiekcie. Immutable nie pozwalają na to. Możemy zwrócić jedynie kopię obiektu ze zmienionymi wartościami. 1. What is an example of an immutable object in JavaScript? Obiekt można zamrozić przez Object.freeze(), ale jest to zamrażanie płytkie 1. What are the pros and cons of immutability?pros bez mutacji śledzenie wykonywania programu jest łatwiejsze ❍

❍

łatwiej debuggować programy

❍

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

❍

sprawdzenie czy zmienił się stan aplikacji może polegać jedynie na porównaniu referencji do danych obiektów

❍

ich używanie nie powoduje efektów ubocznych

❍

łatwiej je cachować

zawsze zwracają zmieniony obiekt, czyli unikamy zwracania null 2. cons: większe zużycie zasobów, głównie pamięci z powodu kopiowania obiektów (structural sharing ❍

❍

zmniejsza wykorzystanie) ciężko budować struktury cykliczne jak grafy 3. How can you achieve immutability in your own code? ❍

Używając biblioteki jak immutable.js używając programowania funkcyjnego, pure funkctions 1. 2. 3. 4.

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

Testing Questions: 1. What are some advantages/disadvantages to testing your code? Testowanie kodu (testy jednostkowe) zapewniają, że kod działa tak jak powinien, pozwala prowadzić refaktoryzację kodu i sprawdzać, czy nic nie zostało zepsute. Minusem jest to, że testy także potrzebują refaktoryzacji oraz jest to znacznie więcej kodu do konserwacji. 1. What tools would you use to test your code's functionality? jasmine - tdd framework, karma - tests runner selenium driver - testowanie funkcjonowania strony / aplikacji 1. What is the difference between a unit test and a functional/integration test? unit test są to testy jednostkowe, sprawdzające czy poszczególne funkcje działają poprawnie

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

powinna (lub z jakimi restrykcjami) wyświetlać strony w iframe 1. What are HTTP methods? List all HTTP methods that you know, and explain them. Coding Questions: 1. Question: What is the value of foo? var foo = 10 + '20'; '1020'

1. Question: How would you make this work? add(2, 5); // 7 add(2)(5); // 7

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

1. Question: What value is returned from the following statement? "i'm a lasagna hog".split("").reverse().join("");

1. Question: What is the value of window.foo? ( window.foo || ( window.foo = "bar" ) );

1. Question: What is the outcome of the two alerts below? var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); // reference Error

1. Question: What is the value of foo.length? var foo = []; foo.push(1); foo.push(2);

1. Question: What is the value of foo.x? var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2};

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

1. Question: What does the following code print? console.log('one'); setTimeout(function() { console.log('two'); }, 0); console.log('three');

one three two

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

Pytania jQuery: Wyjaśnij termin "chaining". Chaining polega na tym, że większość metod jquery po wywołaniu, zwraca nowy obiekt jQuery, na którym możemy użyć kolejnych metod. Wyjaśnij termin "deferreds". Deffereds jest to implementaca Promises w jQuery. Pozwalają one na rejestrowanie zagnieżdżonych callbacków w kolejki callbacków, które mogą się wykonać poprawnie resolve, lub niepoprawnie reject. Można w ich używać zarówno do funkcji synchronicznych jak i asynchronicznych. Deffered w jQuery posiadają metody znane z Promises czyli: catch, then, reject, resolve; jak i swoje: always - wykonuje się zawsze niezależnie czy deffered zwróciło reject, czy resolve done - gdy deffered zwrócił resolved fail - gdy deffered zwrócił rejected pipe - służy do filtrowania i łączenia deffereds w łańcuchy Jakie przykłady optymalizacji jQuery potrafisz wykonać? ●

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

●

unikanie zbyt dużej specyficzności selektorów

●

używanie #id w selektorach

●

używanie for, zamiast each

●

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

●

cachowanie cachowanie obiektów / selectorów w zmiennych

●

używanie css zamiast width height - unikanie reflow w przeglądarce

●

używanie find

●

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

●

nie używanie append w pętlach

Co robi .end()? end() przywraca poprzedni obiekt (czy stan obiektu) w łańcuchu wywołań (chain), tzn jeśli utworzymy obiekt jQuery z selectora (np p - paragraf) następnie użyjemy find do wyszukania wszystkich spanów w paragrafie, zmienimy ich kolor za pomocą metody css na czerwony, to używając end wrócimy do obiektu z pierwszego selectora (p) i na nim będziemy operować, nie na obiektach z wywołanai find. Jak i dlaczego użyjesz przestrzeni nazw przy obsłudze wiązania zdarzeń? Podaj 4 różne wartości, jakie możesz przekazać do metody jQuery. ●

selector

●

DOM Element

●

obiekt jQuery do sklonowania

●

tablica elemetów DOM

●

obiekt js

Co to jest kolejka effects (lub fx)? Jest do przypisana do elementu kolejka funkcji jakie zostaną na nim wywołane. Funkcje są wywoływane asynchronicznie. Element może mieć wiele przypisanych kolejek, identyfikowanych po nazwie, defaultowa nosi nazwę fx. Jakie są różnice między .get(), [], i .eq()? eq(index) zwraca object jQuery get(index?) zwraca element / tablicę elementów DOM [] zwraca element DOM, natomiast nie może używać negatywnych indeksów Jakie są różnice między .bind(), .live(), i .delegate()? .bind() - dodaje event bezpośrednio do elementu w drzewie DOM, jak addEventListener .live() dodaje event handler do root elementu w dokumencie razem z selectorem, działa na zasadzie delegacji eventów, czyli przypina się tylko raz, może wykonać się na kilku elementach, deperecated od 1.7 .delegate() - robi to samo co metoda live, natomiast możemy podać element do którego

handler ma być przyczepiony .on() - w zależności od tego jak zostanie wywołana, stosuje te same metody obsługi eventów jak bind i delegate Jakie są różnice między $ i $.fn? Czym jest $.fn? $ jest funkcją - aliasem do funkcji jQuery $.fn jest właściwością tej funkcji wskazującą na prototyp wewnętrznej funkcji init w jQuery (służy do tworzenia instancji obiektu jQuery). Jeśli dodamy właściwość / funkcję do $.fn będzie ona dostępna we wszystkich instancjach stworzonych przez $ / jQuery. Służy do tworzenia pluginów. Zoptymalizuj selektor: $(".foo div#bar:eq(0)") $('#bar')

Pytania CSS: Jaka jest różnica międy klasą a id ID: jeden element może posiadać tylko jedno id id musi być unikatowe w całym dokumencie specificity id jest większe od specificity klasy class: jeden element może posiadać wiele klas, jedna klasa może być przypisana do wielu elementów klasa nie musi być unikatowa w całym dokumencie Opisz, czym jest plik "reset" dla CSS i dlaczego jest użyteczny. Reset jest to specjalny zestaw reguł usuwających wszystkie domyślne style ze wszystkich elementów. Normalize.css jest to zestaw stylów ujednolicający wygląd podstawowych elementów między różnymi przeglądarkami. Zawiera wiele usprawnień, usuwających powszechne błędy (elementy HTML5, font-size) Opisz jak działa właściwość float. Właściwość float "wyjmuje" element z normal document flow, i przesuwa go do lewej lub prawej krawędzi zawierającego go kontenera, w zależności od parametru. Jeśli jest miejsce w kontenerze nadrzędnym pozostała treść będzie opływać kontener z float. Kilka elementów z float są ustawiane obok siebie (jeśli mają podaną ten sam kierunek i jeśli jest miejsce w nadrzędnym kontenerze). Jeśli element jest opisany właściwością float, zachowuje się jak element block, float nie współgra z position: fixed i position: absolute, Jakie znasz techniki kasowania (clearing) i kiedy wskazane jest ich stosowanie? clear: left right both - oznacza, że górna krawędź elementu powinna znajdować się pod elementem z float left, right, lub obojętnie jakim float w nadrzędnym elemencie .clearfix - dodaje pseudo elementy przed i po elementem i ustawia na nich clear both Wyjaśnij technikę "CSS sprites" oraz sposób jej wdrożenia na stronie.

CSS Sprites jest to używanie jednego pliku graficznego, do przedstawienia wielu grafik, w celu optymalizacji wielkości zasobów. Aby css sprites działało używa się obrazka jako background i przesuwa się go za pomocą background-position. Jakie są Twoje ulubione techniki zastępowania obrazów i kiedy je stosujesz? display: none for a span negative / ujemny margines negative / ujemny text-indent How do you serve your pages for feature-constrained browsers? Głównie chodzi o vendor-prefixed, wykrywanie funkcjonalności przeglądarki za pomocą modernizr, wchodzi @suppor, używam caniuse żeby sprawdzić jaki procent przeglądarek obsługuje dane stylowanie How do you serve your pages for feature-constrained browsers? CSS clip position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); Positioning content off-screen The following are the recommended styles for visually hiding content that will be read by a screen reader. .hidden {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} How would you approach fixing browser-specific styling issues? using reset or normalize.css How is responsive design different from adaptive design? Responsive: There is one basic layout, and it changes responsively to screen changes Adaptive: For each possible screen size, there is a distinct layout. What are some of the "gotchas" for writing efficient CSS? chodzi głównie o używanie odpowiednich selektorów, jak najbardziej specyficznych unikanie ogólnego selectora (gwiazdki *), preferowanie id jeśli to możliwe Explain how a browser determines what elements match a CSS selector. Przeglądarka kolejno znajduje elementy pasujące do selektora od prawej do lewej. Ze względu na efektywność. box-sizing: content-box - width określa content + padding + border + margin padding-box - width określa content i padding + border + margin border-box - width określa content i padding i border + margin

Haczyki właściwości CSS, warunkowe dołączanie plików .css lub... coś innego? Block formatting context A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other. A block formatting context is created by one of the following: the root element or something that contains it floats (elements where float is not none) absolutely positioned elements (elements where position is absolute or fixed) inline-blocks (elements with display: inline-block) table cells (elements with display: table-cell, which is the default for HTML table cells) table captions (elements with display: table-caption, which is the default for HTML table captions) block elements where overflow has a value other than visible display: flow-root Jak serwujesz strony dla przeglądarek z ograniczonym wsparciem funkcji? Jakie techniki stosujesz? Jakie istnieją sposoby wizualnego ukrycia treści (uczynienia ich dostępnymi tylko dla czytników ekranu)? Czy kiedykolwiek używałeś systemów siatek, a jeśli tak, to jakie preferujesz? Czy używałeś 'media queries' lub tworzyłeś konkretne układy i arkusze dla urządzeń mobilnych? Czy miałeś styczność ze stylizacją SVG? Jak optymalizujesz swoje strony do druku? Jakie stosujesz "sztuczki" przy pisaniu efektywnych CSS? Czy używasz narzędzi do przetwarzania CSS? (SASS, Compass, Stylus, LESS) Jeśli tak, opisz cechy, które lubisz i nie lubisz w używanych narzędziach. Jak tworzysz i wdrażasz projekt używający niestandardowych czcionek? Czcionki sieciowe (serwisy czcionek jak: Google Webfonts, Typekit itd.) Wyjaśnij jak przeglądarka określa elementy pasujące do selektora CSS? Z-index: jeśli element znajduje się w innym elemencie i się pokrywają, element wewnętrzny jest na wierzchu jeśli elementy następują kolejno po sobie, element kolejny jest na wierzchu position: absolute i fixed zmieniają to, pokazując się zawsze ponad elementami static i relative jeśli chcemy używać z-index, element musi mieć position relative, fixed lub absolute

Pytania dodatkowe (zabawne): Opowiedz o najfajniejszej rzeczy jaką kiedykolwiek zakodowałeś. Z czego jesteś najbardziej dumny? Jakie są Twoje ulubione części narzędzi programistycznych, których używasz? Czy masz jakiś swój własny projekt na boku? Jaki? Jaka jest Twoja ulubiona funkcja w Internet Explorer? stops rendering process, and download and run a script. don't stop rendering process while asynchronously downloading a script. When finishing download, it stops rendering and runs the script. don't stop rendering process while asynchronously downloading a script. When finishing rendering, it runs the script. defer order, async no order