front-end

Rekrutacja na Front-End Developera - porady, zagadnienia, zadania

W końcu nadszedł w Waszym życiu ten moment - szukacie nowej pracy. Pewnie teraz przeglądacie Internet w poszukiwaniu porad i otuchy, a więc mam dla was zestaw zagadnień oraz zadań specjalnie na tę okazję :) Nie jestem w stanie w jednym wpisie przekazać Wam całej wiedzy, więc nawet nie próbuję, to tylko pchnięcie w dobrym kierunku.

Najważniejsze na rozmowie: Nie denerwujcie się. Najczęściej zjada nas stres! Sama zostałam kilka razy pożarta przez tego potwora :)

Dowiedz się jak najwięcej o firmie, produktach i ludziach

Lokalne środowisko IT nie jest aż tak duże, jeśli nie mieszkasz w Warszawie, Krakowie lub Wrocławiu. Warto wyszukać firmę na linkedIn, zobaczyć czy któryś z twoich znajomych tam nie pracuje. W moim przypadku zawsze znajdę kogoś w firmie do której się rekrutuje.

O co powinieneś zapytać:

  • jaki robią produkt/produkty?
  • w jakich technologiach pracują?
  • jak mają tryb pracy? Scrum, Kanban, Waterfall? Jak długie są sprinty i jak częste release'y?
  • jak wygląda przeciętny team? Ile jest w nim osób? Back-end + Front-End + PO/PM +  testerzy?
  • ogólną opinię na temat ludzi, sprzętu i zarządzania

Podobne pytania możesz zadać na rozmowie kwalifikacyjnej :)

Przygotuj się technicznie

Czasem jest tak, że czegoś używasz a nie wiesz jak się nazywa i nie możesz pochwalić się wiedzą. Albo rozwiązywanie problemów jest twoją mocną stroną, ale teoria zupełnie leży. Na rozmowę wypadałoby odświeżyć trochę terminów.

Poniżej lista ciekawych zagadnień. Moim zdaniem własne opracowanie ich pozwoli na dodatkowe przygotowanie do rozmowy. Opcje z gwiazdką są na stanowiska dla bardziej doświadczonych juniorów i wyżej :)

HTML

Jeśli sądzisz, że znasz HTML to prawdopodobnie masz rację :) Ale istnieje wiele API, które powinieneś kojarzyć oraz wiele tematów na które trzeba umieć się wypowiedzieć.

  1. Semantyka tagów - co to jest; czy wiesz który tag co oznacza; wiesz jak powinna wygląda prawidłowa budowa strony i dlaczego
  2. Nowe tagi HTML5 - znasz większość nowych tagów; wiesz dlaczego weszły i co wprowadziły; potrafisz ich użyć
  3. API tagów audio i video - jak uruchomić na stronie internetowej film czy audio; jak wygląda budowanie dedykowanego playera
  4. Lokalne przechowywanie danych: LocalStorage/Session Storage/Cookies - co to jest; jak się tego używa w JavaScript; czym się różnią;
  5. Geolokalizacja - co to jest; jak się tego używa w JavaScript
  6. (*) Web Workers - co to jest; przykłady użycia; typy web workerów
  7. (*) Server-Sent Events - co to jest; przykłady użycia;
  8. Nowości z Web API - ogólne pojęcie co to jest, czym to się różni od JavaScript; jakieś przykłady nowości z WebAPI i ich użycie
  9. DOM - co to jest; budowa; sposób działania

CSS

Z tym stylowaniem to jest zawsze problem, szczególnie gdy rozmowa odbywa się bez komputera. Ale są tematy, które każdy front-end powinien znać :)

Poniższe tematy powinny być opracowane w trybie: co to jest, jak się tego używa, jakie problemy rozwiązanie, ograniczenia i najpopularniejsze zastosowania

  1. Flex
  2. Float/Clear
  3. CSS Grid
  4. Pseudoklasy z szczególnym uwzględnieniem after i before
  5. Position
  6. CSS Animations
  7. CSS Filters
  8. CSS Specificity
  9. CSS selectors level 4 - zwrócić uwagę na przyszłość CSS, znać parę nowych selektorów
  10. SASS/LESS - zmienne, mixiny, modularność styli
  11. Media Queries

JavaScript

JavaScript jest najszybciej rozwijającym się językiem na świecie pod względem uczących się go programistów. Jest to język skryptowy, interpretowany, słabotypowany, który posiada mnóstwo ciekawych własności, które trzeba rozumieć. Konieczne jest też posiada wiedzy z podstaw działania stron internetowych i operacjach na DOMie.

  1. Słowa kluczowe: var, let, const; zakres zmiennych, hoisting;
  2. Typy danych, typy prymitywne i złożone
  3. Referencje w JavaScript
  4. Domknięcia
  5. ES6 (polecam moją serię artykułów - tutaj macie linki cz. 1 i cz. 2)
  6. ES7
  7. AJAX - natywne wsparcie, statusy HTTP, rodzaje odpowiedzi
  8. Eventy - jakie istnieją, jak działają?
  9. Transpilacja - co to jest? Dlaczego się to stosuje?

Pytania

Zagadnienia były banalne lub przerobiliście już wcześniej? To teraz etap pytań :) Starałam się, żeby łączyły banały i trudniejsze rzeczy, teorie i praktykę.

  1. (*) Co to są Web Workery? Jakie znasz rodzaje Web Workerów? Jakie znasz zastosowania Web Workerów?
  2. Co to jest CSS Specifity? Wyjaśnij jak się je liczy dla poszczególnej właściwości?
  3. Jak ustawić dwa elementy obok siebie? Jakie są charakterystyczne sposoby dla bloków a jakie dla elementów liniowych?
  4. Jak wycentrować poziomo i pionowo element? Jakie sposoby są najlepsze dla elementów blokowych a jakie dla liniowych?
  5. Co to jest REST? Jak pobrać dane z RESTowego API? Jak wysłać dane do RESTowego API? Jakie znasz funkcje, metody, biblioteki które mogą ci w tym pomóc? Omów funkcję fetch.
  6. Co w CSS oznaczają symbole +,  ~, >? Podaj przykłady użycia.
  7. Opisz działanie :first-child, :first-of-type, :focus, :hover, `:checked.
  8. Filtry w CSS. Jakie znasz? Jak się ich używa, jaka jest składnia? Jakie mają ograniczenia?
  9. Bubbling i capturing - Co to jest? Jak to działa? Czy istnieją na wszystkich zdarzeniach?
  10. Jakie znasz wzorce projektowe? Czy któreś są charakterystyczne dla JavaScript?
  11. (*) Singleton w JavaScript - metody, koncepcje wykonania, problemy?
  12. Module Pattern i jego wariacje. Jak wygląda, na czym się opiera, jakie ma zalety i wady? Czy są dla niego alternatywy?
  13. Frontowy stack. Z czego lubisz korzystać? Wady i zalety poszczególny rozwiązań? Webpack, grunt, gulp, less, sass, npm, yarn.
  14. (*) Interfejsy związane z Document Object Model. Czy jakieś znasz? Wymień, opisz je, działanie oraz przykładowy przypadek użycia.
  15. W jaki sposób dodać czerwone kółko po każdym liniowym elementcie? Napisz style dla elementu o klasie .item.
  16. Jak wygląda pisanie animacji w CSSie a jak w Javascript? Podaj przykłady w obu przypadkach. Omów problemy oraz ograniczenia obu opcji.

Mam nadzieje, że się podobało i że udało się Wam odpowiedzieć na wszystkie pytania. Pochwalcie się wynikami w komentarzach, ile na 16 pytań było dla was banalnych?

Jeśli wpis się podoba przygotuję opracowanie pytań, ale na razie zostawiam was z sporą ilością pracy :)

Komentujcie śmiało!

Kamila

Dziękuję za poświęcony czas, będzie mi bardzo miło jak zostawisz komentarz :)