Frontend developer interview list

# Frontend developer interview list #### Grasz w gry e-sportowe? #### Jakie masz inne hobby? (Dobre na rozgrzewkę i odstresowanie, można użyć w jakiejś przerwie) #### Opisz swoją dotychczasową karierę. #### Kodujesz coś hobbystycznie? ( projekty na githubie, gry, programiki utilsowe itd. ) # Pytania techniczne Główne zagadnienia / silosy - Async/await + promisy - React - Optymalizacja - Listy - Callbacki - Redux - Typy w javascripcie - Typy w typescripcie - Developer tools - Wzorce projektowe ## Internet #### Czym jest protokół HTTP? #### Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen. - [ ] wspomniał o dns'ach - [ ] wspomniał o nawiązaniu połączenia TCP i requestcie HTTP / HTTPS - [ ] wspomniał o parsowaniu HTML'a - [ ] wspomniał o zaciąganiu dodatkowych zasobach skrypty, style, obrazki, fonty etc. - [ ] wspomniał o parsowaniu skryptów i style sheetów - [ ] wspomniał o eventach DOMContentLoaded - event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading #### Czym różni się protokół TCP od UDP ? TCP is a connection-oriented protocol, whereas UDP is a connectionless protocol. A key difference between TCP and UDP is speed, as TCP is comparatively slower than UDP. Overall, UDP is a much faster, simpler, and efficient protocol, however, retransmission of lost data packets is only possible with TCP. #### What are the differences between Long-Polling, Websockets and Server-Sent Events ? Long polling is much more resource intensive on servers whereas WebSockets have an extremely lightweight footprint on servers. Long polling also requires many hops between servers and devices. And these gateways often have different ideas of how long a typical connection is allowed to stay open. #### What are HTTP methods? List all HTTP methods that you know, and explain them. #### What is domain pre-fetching and how does it help with performance ? dns-prefetch helps developers mask DNS resolution latency. The HTML <link> element offers this functionality by way of a rel attribute value of dns-prefetch. The cross-origin domain is then specified in the href attribute: #### What is a CDN and what is the benefit of using one ? Improving website load times - By distributing content closer to website visitors by using a nearby CDN server (among other optimizations), visitors experience faster page loading times. As visitors are more inclined to click away from a slow-loading site, a CDN can reduce bounce rates and increase the amount of time that people spend on the site. In other words, a faster a website means more visitors will stay and stick around longer. Reducing bandwidth costs - Bandwidth consumption costs for website hosting is a primary expense for websites. Through caching and other optimizations, CDNs are able to reduce the amount of data an origin server must provide, thus reducing hosting costs for website owners. Increasing content availability and redundancy - Large amounts of traffic or hardware failures can interrupt normal website function. Thanks to their distributed nature, a CDN can handle more traffic and withstand hardware failure better than many origin servers. Improving website security - A CDN may improve security by providing DDoS mitigation, improvements to security certificates, and other optimizations. #### Strony internetowe ładują się za pierwszym razem dłużej niż za kolejnym. Dlaczego? - Cache na poziomie HTTP - Cache na poziomie HTML5 ## HTML #### What are data- attributes good for? Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. However, one perfectly valid use of data attributes, is to add a hook for end to end testing frameworks such as Selenium and Capybara without having to create a meaningless classes or ID attributes. The element needs a way to be found by a particular Selenium spec and something like data-selector='the-thing' is a valid way to do so without convoluting the semantic markup otherwise. #### Consider HTML5 as an open web platform. What are the building blocks of HTML5 ? What are some features / browser api's that you have used recently ? pytanie zasadniczo bardzo otwarte, nie wiem czy nie za bardzo otwarte... wiec może byc trochę z dupy. tutaj można opisać wszelakie api które może dostarczać nam przeglądarka: all things related to: Device access - Allowing for the usage of various input and output devices, like gps location. Offline and storage - Allowing webpages to store data on the client-side locally and operate offline more efficiently. Multimedia - Making video and audio first-class citizens in the Open Web. 2D/3D graphics and effects - Allowing a much more diverse range of presentation options. Connectivity - Allowing you to communicate with the server in new and innovative ways ( WebSockets ) Performance and integration - Providing greater speed optimization and better usage of computer hardware. Semantics - Allowing you to describe more precisely what your content is. #### Describe the difference between a cookie, sessionStorage and localStorage. All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings. ![](https://i.imgur.com/v3laqnC.png) #### Describe the difference between ```<script>, <script async> and <script defer>``` ``` <script> - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed. <script async> - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use async when the script is independent of any other scripts on the page, for example, analytics. <script defer> - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encountered in the document. If a script relies on a fully-parsed DOM, the defer attribute will be useful in ensuring that the HTML is fully parsed before executing. Theres not much difference in putting a normal <script> at the end of <body>. A deferred script must not contain document.write. ``` #### Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute. You would use the srcset attribute when you want to serve different images to users depending on their device display width srcsets solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens. #### Why is it generally a good idea to position CSS ```<link>``` in between ```<head></head>``` and JS ```<scripts>``` just before ```</body>``` do you know any exceptions ? ``` Putting <link>s in the <head> is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously. Both are needed to create the visuals in a website, allowing for a quick "first meaningful paint" timing. without it there could be times there can be flash of unstyled content (FOUC), which show a webpage with no styling applied. <script> tags block HTML parsing while they are being downloaded and executed which can slow down your page. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first. ``` #### Czym jest DOM i dlaczego może się on różnić od źródła strony? #### Jaka jest zasadnicza różnica pomiędzy tagami div i span ? - div - element blokowy, span - inline-owy #### Czym jest semantyczny html ? - Nie liczy się tylko wygląd, ale też znaczenie elementów np. footer, article, header - Pozwala na lepsze przetwarzanie kodu strony przez roboty (np. boty wyszukiwarek) #### W jakim kontekście ważne jest świadome używanie tagów nagłówkowych - h1, h2, h3 itd. ? SEO #### Czym jest PWA (Progressive Web App)? SEO ## CSS #### What is CSS selector specificity and how does it work ? ``` The browser determines what styles to show on an element depending on the specificity of CSS rules. ``` #### What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why? #### What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why? Answer text - [ ] - lorem - [ ] - ipsum - [ ] - dolor #### Co to znaczy, że strona jest responsywna? Answer text - [ ] - lorem - [ ] - ipsum - [ ] - dolor #### Które css transitions są akcelerowane graficznie? opacity transform: translate, scale, rotate, matrix itd. #### What are the differences between visibility hidden and display none? #### Jak działa position: relative, absolute, fixed i sticky? absolute - pozycjonuje element poza flow dokumentu relatywnie do najbliższego parenta z position: relative fixed - pozycjonuje element poza flow dokumentu relatywnie do widoku okna sticky - pozycjonuje element we flow dokumentu, ale jeżeli element wystaje poza okno - “przykleja” element do okna #### Jaka jest główna różnica między display: flex i grid? Display: flex służy do ustawiania elementów w layoucie liniowym, grid - na siatce. #### W cyklu renderowania strony (pixel pipeline wg google) czym różnią się następujące kroki ? Layout / Reflow - obliczanie rozmiarów elementów według box model z uwzględnieniem render tree. Jest wywoływany tylko jeśli rozmiary elementów bądź układ się zmieniły Paint / Repaint - przerysowanie na nowo elementów strony. Ma miejsce po reflow, ale też wtedy kiedy zmieniły się czysto wizualne parametry np. zmiana jedynie background color Composite - render tree renderuje swoje elementy na warstwach, ten krok łączy je w jedno. Jeśli np. jedynie zmieni się opacity lub transform elementu to zostanie wykonany tylko ten krok. #### What are the some pseudo classes you have used? ## JS #### Explain how `this` works in JavaScript. Can you give an example of one of the ways that working with this has changed in ES6? lorem #### What are the differences between variables created using let, var or const ? Opisać czym jest zasięg leksykalny zmiennych lorem #### What is a closure, and how/why would you use one ? lorem #### Explain how prototypal inheritance works ? lorem #### Explain the differences on the usage of foo between ```function foo() {}``` and ```var foo = function() {}``` lorem #### Can you explain what Function.call and Function.apply do? What’s the notable difference between the two? lorem #### Explain Function.prototype.bind.? lorem #### What are the pros and cons of extending built-in JavaScript objects ? lorem #### What is the difference between == and === ? lorem #### Jak działa funkcja setTimeout, co się stanie jak wywołamy ją z parametrem 0 ? lorem #### Co daje użycie requestAnimationFrame vs setTimeout w animacji? Czy - poza animacjami - jest jeszcze jakaś sytuacja szczególna, w której użylibyśmy funkcji requestAnimationFrame? ? - RAF Zostanie wywołany wtedy kiedy przeglądarka jest gotowa przygotować kolejną klatkę animacji, setTimeout co ten sam interwał (mniej więcej) - RAF jako parametr dostarcza monotoniczny czas wysokiej rozdzielczości, który można wykorzystać do animacji #### Jak działa asynchroniczność w javascript? - Do czego służą promisy? - Opisz funkcje promisów: then, catch, finally - Opisz funkcje obiektu Promise: reject, resolve, all, race, any. #### [Zadanko] Zapisz poniższy fragment jako funkcję przy pomocy składni async/await: <summary>Code snippet</summary> ```javascript function() { return fetch('api').then(response=>response.json()) } ``` ```javascript async function() { const response = await fetch('api'); return response.json(); } ``` #### Jak działa multithreading w javascripcie ? - Web Workers - child\_process na node.js - W obu przypadkach zawsze jest to oddzielny process, nie współdzielący stanu z głównym procesem. #### Jak działają pętle for-in i for-of ? #### jesli zalozymy ze aktualnie jest środek lutego to funkcja new Date().getMonth() zwroci wartosc 1 czy 2 ## GIT #### Jakiego narzędzia najczęściej używasz do korzystania z repozytorium? #### Czy mieliście w poprzednim projekcie jakieś specyficzne rozwiązania związane z repo? - trunk-based - feature branche - jakieś specyficzne nazywanie branczy / commitów - w jakim celu? ##### (Follow up #1) Na czym polega GitFlow? Jakie problemy powoduje? - w teorii problemy podczas mergowania ficzer branczy, które długo żyją, jest dość skomplikowany z podejściem wykorzystującym release brancze #### Czym się różni merge branczy od rebase (np. podczas _pull)_ ? #### Do czego służy _git stash_ ? #### Co robi _git squash_ i jakie problemy może powodować ? ``` - zamyka wszystkie zmiany pomiędzy branczami w jednym commicie - ukrywa całą historię commitów, które były po drodze na merdżowanym branczu ``` #### Co robi amend commit ? #### **Sytuacja 1** : Przez przypadek skomitowałeś kod lokalnie do złego brancza **branch-a** zamiast **branch-b**. Co możesz zrobić? ``` - można zresetować lokalny stan commitów na _branch-a_ z zachowaniem lokalnego stanu kodu i po przełączeniu na _branch-b_ utworzyć nowy commit - można zrobić _cherrypick_ (tu też kandydat może nie wiedzieć co to) commita z _branch-a_ do _branch-b_. ``` #### **Sytuacja 2** : Zaciągasz zmiany i widzisz, że kolega puścił do developa kod, który nie powinien się na nim znaleźć (failuje build, niepoprawna wersja kodu która powinna trafić do innego release, etc). Jak można sobie z tym poradzić? ``` - obvious: poprawić kod jeśli się da ;-) - revert commit - cofnięcie HEAD brancza o 1 i _push --force_ ``` ## Typescript #### Define TypeScript and explain what sets it apart from JavaScript? ? TypeScript is regarded as the superscript of JavaScript. We use TypeScript to develop large applications. It comes with interfaces, classes, and optional static typing. It is regarded as a set of tools as well as a programming language. It assists developers in code refactoring. Also, developers can take advantage of tools which are highly productive. Now let’s take a look at the main differences between JavaScript and TypeScript below. #### Czym jest typ, czym jest interfejs ? lorem #### Czym jest type union a czym jest intersection ? lorem #### Czy znasz jakieś utility types ? Podać przykłady (Record, Partial, Readonly) #### Czy wiesz czym w typescriptcie jest Discriminating Unions, czy znasz jakiś przykład użycia ? ``` type NetworkLoadingState = { state: "loading"; }; type NetworkFailedState = { state: "failed"; code: number; }; type NetworkSuccessState = { state: "success"; response: { title: string; duration: number; summary: string; }; }; type NetworkState = | NetworkLoadingState | NetworkFailedState | NetworkSuccessState; - [ ] - switch w reducerze opiera sie na własności jaką daje typescript `Discriminating Unions`. ``` ## Programowanie funkcyjne #### Czym się różni programowanie funkcyjne od imperatywnego ? #### Co to jest funkcja wyższego rzędu ? #### Czym jest pure function ? #### Czym jest idempotentność ? #### Czym są efekty uboczne w FP ? # REACT ## React  posortowanie pytan od fundamentalnych do opcjonalnych: #### **Czym się różni state i props?** #### Czym jest Virtual DOM i jakie zalety daje? Pozwala na wyliczenie zmian w prawdziwym DOM-ie i zaaplikowanie ich efektywnie #### Opisz algorytm działania rekoncyliacji (aplikowania zmian do prawdziwego DOM-a). #### Opisac lifecycle typowego komponentu reactowego. #### Czym sie rozni PureComponent od Componentu ? ``` class Example1 extends PureComponent<IExampleProps> // vs class Example1 extends Component<IExampleProps> ``` #### Czego byś użył by zrobić focus na inpucie w Reactie ? chodzi oto by wspomnial o ` **ref** ie` #### Czym róznią się komponenty (pola formularza) controlled od uncontrolled ? lorem #### Dlaczego w reactcie trzeba dodawac key przy renderowaniu array'ow ? dodatkowe punkty jeśli powie że sama zmiana key'a dla normalnego komponentu resetuje jego stan.( moze moglo by to byc pytanie, na zasadzie czy znasz jakis trik by szybko zresetowac stan komponentu do 'inicjalnego' ? #### Jakie zagrożenie niosą za sobą poniższe konstrukcje. Podać przykładowe rozwiązanie tego problemu ? ``` <Component fn={(e) => doSomething(e)} /> <Component obj={{ a: 'b' }} /> ``` Przy każdym renderze rodzica przekazana jest nowa referencja funkcji bądź obiektu, co powoduje re-render dziecka #### Opisz różnicę w podejściu klasowym (wcześniej stateful) i funkcyjnym (wcześniej stateless) i najnowsze rozwiązania w Reakcie, które pozwalają na "przechowywanie" stanu w funkcyjnych komponentach. #### Aplikacja w React działa nieakceptowalnie wolno. Opisz jak podejdziesz do rozwiązania tego problemu. - Pytanie otwarte, niektóre sensowne odpowiedzi: - Debug tego które elementy są update'owane - Sprawdzenie czy reflow nie robi sie zbyt częstowhat - Lazy loading (przyspiesza tylko ładowanie) - Caching (tylko ładowanie) #### Opisz jakie sa **rulesy/dobre praktyki** hook'ow. - nie robic hookow w conditional expressions, nie uzywac hookow za early returnami - pamiętać o podawaniu dependencies jeśli hook od nich zależy. - używać konwencji nazwy zaczynać hook od ' **use** LoremIpsum()' - używać lintera. #### Co stosujesz by handleClick mialo kontekst wywołania **this** ustawione na parenta by przesłać do komponentu <Child onClick={this.handleClick}> - handleClick.bind(this) - albo deklaracja **funkcji / metody** w klasie ```handleClick = () => { // lorem }``` #### Czy moze powiedziec jakie sa techniki testowania w reactcie ? - nie chodzi o przejechanie goscia na grubo, odnosnie testowania, ale tak by sprawdzic czy mial stycznosc z czymkolwiek z tego 👇 - plus za to ze powie o renderowaniu komponentow w jsdom. - plus za to ze powie o shalow vs deep rendering. - plus za to ze powie o snapshotingu. - plus za wspomnienie o cypress'ie lub o innym toolu gdzie testuje się za pomocą przeglądarki przechodząc / robiąc interakcje po DOM'ie. #### Czy wiesz do czego stosuje się Suspense ? Suspense pozwala komponentowi "poczekać" na konkretne zdarzenie przed wyrenderowaniem. - Obecnie Suspense obsługuje tylko jeden przypadek użycia: - dynamiczne ładowanie komponentów przy użyciu React.lazy. - przyszłości będzie wspierał także inne przypadki użycia, jak na przykład pobieranie danych. #### What is prop drilling in React ? #### What are error boundaries ? ## Redux #### **Opisz pokrótce reduxa** powinien wspomnieć o akcjach, `actionCreatorach`, reducerach, i selektorach. #### Jakie sa najważniejsze zasady pracy z reduxem, tworzeniu aplikacji opierajacej sie o redux'a ? - Nie można mutowac stanu ( a juz zwlaszcza z zewnatrz stan reduxa moze sie zmieniac tylko za pomoca dispatchowania akcji, a reducery handlujace te akcje musza zawsze podmieniac stan) - reducery musza byc **pure as fuck** - nie używać typów które się źle serializują. - Przykłady rzeczy które się źle serializują: - JS Dates - Class Instances - Functions - Maps/Sets - jak powinien być przechowywany stan w redux'ie ? w sposób znormalizowany czy zdenormalizowany ? - a jesli odpowiedz `to zalezy` to od czego zalezy ? - [https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#designing-a-normalized-state](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#designing-a-normalized-state) plusy za info o tym: _This makes it easier to look up items based on their ID and update a single item in the store, and ultimately leads to better performance patterns._ #### czy możesz opisać jak w reduxie implementuje się operacje asynchroniczne, takie jak np. pobieranie danych z serwera ? powinien wspomnieć o akcjach, `actionCreatorach`, reducerach, i selektorach. ##### (Follow up) czy wiesz czym jest redux-saga lub redux-observable ? czy mozesz podac przyklady "real-life-scenarios" gdzie i kiedy można zastosować te biblioteki ? ## Przetwarzanie assetów #### **Do czego służy webpack?** #### Czym jest minifikacja? #### Czym jest transkompilacja? #### Co to są source mapy? #### Co to jest tree-shaking? ## Node.js #### Czym są operacje IO bound, a czym CPU bound? #### Czym jest Reactor Pattern i jakie oferuje zalety (oraz wady)? #### Jak w aplikacji Node.js radzić sobie z zadaniami CPU bound (np. przetwarzanie obrazów)? ## Bezpieczeństwo #### Czym jest atak Cross Site Request Forgery? Jak się przed nim zabezpieczyć? Nie trzymać tokenu sesji w cookie, albo użyć anty CSRF-tokena #### Czym jest atak Clickjacking? Jak się przed nim zabezpieczyć? Zabronić przeglądarkom wyświetlać stronę w ramce (utrudnia) #### Dlaczego siedząc w kafejce internetowej możemy się bezpiecznie zalogować do banku ? - Połączenie szyfrowane, ale jak wymieniane są klucze szyfrowania - Pełna odpowiedź to wspomnienie o kryptografii asymetrycznej i wyjaśnienie na czym polega ## Overall Software Development #### na jakie 3 kategorie dzielimy design patterny ( szablony projektowania ) ? #### jakie znasz design patterny, jakie używaleś ostatnio ? #### znasz SOLID ? - S - Single-responsibility principle - O - Open-closed principle - L - Liskov substitution principle - I - Interface segregation principle - D - Dependency inversion principle ### wiesz czym są akronimy DRY, KISS i YAGNI ? - DRY - Don't repeat yourself - co dla ciebie oznacza ten design principle ? - KISS - Keep it simple stupid - co dla ciebie oznacza ten design principle ? - YAGNI - You aren't gonna need it - co dla ciebie oznacza ten design principle ? ## Pytania końcowe #### W jakich kierunkach chcesz się rozwijać w ciągu najbliższych dwóch lat? #### Czy masz jakieś pytania do nas?

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.