Pytania techniczne na rozmowie na stanowisko Junior Frontend Developer

Pytania techniczne junior frontend developer

Pytania techniczne junior frontend developer

Pytania techniczne, które pojawiły się na moich rozmowach kwalifikacyjnych na stanowisko Junior Frontend Developer:

  • Rozwiń skrót HTML i CSS
  • Co to jest box model?
  • Jakie korzyści daje Sass?
  • Jaka jest różnica pomiędzy mixin a funkcją w Sass?
  • Czy w CSS są funkcje?
  • Do czego służy tag data w HTML?
  • Czym różni się null od undefined?
  • Czym się różni “==” i “===”?
  • Czy korzystałaś/korzystałeś z repozytorium?
  • Jak dostaniesz plik .psd to co robisz żeby zacząć pracę? Jak wygląda proces?
  • Co robimy z kodem przed wrzuceniem na produkcję?
  • Co to są pseudo selektory? Jakie znasz? Jakie dają możliwości
  • Z jakiego edytora korzystasz?
  • Czy korzystałaś/korzystałeś z task runnera?
  • Jakie znacz rodzaje display? Omów różnice
  • Czym różni się id od classy?
  • Czym różni się position relative od absolute?
  • Co to jest position fixed?
  • Czy miałaś/miałeś do czynienia z Wodrpressem?
  • Czy korzystałaś/korzystałeś z flexbox?
  • Jakie są różnice między Bootsrap 3 a 4?
  • Czy miałaś do czynienia z walidacją formularza?
  • Z jakich systemów operacyjnych korzystasz?
  • Jak wybrać jakiś element w jQuery?
  • Ile elementów może mieć taką samą klasę?
  • Jakich narzędzi używasz do debugowania kodu?
  • Jak wybrać w jQuery elementy input typu text?
  • Jak rozwiążesz konflikt powstały podczas mergowania branchów?
  • Czy znasz jakiś preprocesor HTMLa?
  • Co to są media
  • Co to jest W3C?
  • Co to jest branch?
  • Co to jest GIT?
  • Co to jest Gulp? Do czego służy?
  • Co to jest npm?  Do czego służy?
  • Co to jest JSON? Gdzie się z tego korzysta?
  • Co to jest API?
  • Co to jest AJAX?
  • Co to jest RWD?

Pytania z rozmowy ogólnej:

  • Nad jakimi projektami procowałaś? Jak to wyglądało?
  • W którą stronę chciałabyś się rozwijać jeśli chodzi o frontend dewelopment?
  • Czy pracowałaś/pracowałeś w zespole podczas projektu programistycznego?
  • Jak się uczyłaś/uczyłeś  programowania?
  • Czy byłaś/byłeś na jakiś kursach programistycznych?
  • Z jakich źródeł korzystasz?
  • Czy możesz się pochwalić swoimi projektami?
  • Wymień swoje trzy zalety
  • Jesteś ołówkiem, zostałaś/zostałeś wrzucony do wiadra z wodą, jak się wydostaniesz?

Uzyskiwanie infomracji o użytkowniku JS

W moim projekcie AB Testing udało mi się wprowadzić  funkcjonalność pozwalającą na zaciąganie danych o użytkowniku i jego przeglądarce. Nigdy wcześniej tego nie robiłam, dlatego wymagało to początkowego researchu. Wynik na razie loguję w konsoli w postaci obiektu. Dzięki temu możemy sprawdzić kiedy użytkownik otworzył naszą stronę, jaki jest jego język w przeglądarce oraz jakie wymiary ma jego okno przeglądarki. Możemy też sprawdzić z jakiej przeglądarki korzysta. Na razie sprawdzam czy jest to Chrome, Firefox czy Safari.

infomration about user

Dodatkowo mam już wstępną wersję funkcji, która pozwoli na losowanie testowanych elementów tylko raz w podczas jednej sesji, a nie na odświeżeniu karty. Z kolei informacje o kliknięciach będę musiała zapisywać w local storage, ponieważ te dane nie są usuwane po zamknięciu sesji. Pomyślałam, że fajna byłaby możliwość testowania pewnych elementów na stronie, jeśli zostanie spełniony określony warunek np. tylko na użytkownikach Androida, albo na użytkownikach, których ekran ma większą rozdzielczość niż X pixeli. Do tych celów będę korzystać z danych, które zaciągam o użytkowniku. Będzie to kolejna rzecz, którą chciałabym zrealizować w tym projekcie.

 

 

Środowisko deweloperskie – czego potrzebuje developer do pracy?

Tak się akurat złożyło, że na laptopie mam świeżo zainstalowany nowy system operacyjny – Ubuntu 16.04, dlatego muszę od początku skonfigurować środowisko deweloperskie, stąd powstał pomysł napisania o tym posta.

Czego potrzebuje frontend developer do pracy?

  1. Ruby – np. do pisania w Sass
  2. Edytor – do pisania kodu
  3. Node.js – a dokładniej potrzebny jest Node Package Manager
  4. Git – system kontroli wersji
  5. Przeglądarka – najlepiej Google Chrome

Zaczynamy od znalezienia konsoli, inaczej terminala. Alternatywnie można użyć skrótu Ctrl + Alt + T.

terminal-ubuntu

Ruby 

Otworzyliśmy terminal i możemy zająć się instalacją. Tutaj wpisujemy polecenia tekstowe. Dokładny opis oraz komendy dla Ubuntu i innych systemów operacyjnych znajdują się w dokumentacji Ruby. Korzystamy tutaj z sudo oraz apt-get

i przytoczę definicje z Wikipedii:

sudo (z ang. substitute user do) – program stosowany w systemach operacyjnych GNU/Linux, Unix i podobnych, w celu umożliwienia użytkownikom uruchomienia aplikacji, jako inny użytkownik systemu. Najczęściej służy ono do uruchamiania aplikacji zarezerwowanych dla administratora zwanego rootem.”

apt-get– prosty interfejs linii poleceń służący do pobierania i instalacji pakietów.”

Wpisujemy komendę „sudo apt-get install ruby-full” i wciskamy Enter.

Następnie musimy wpisać nasze hasło użytkownika. Tutaj mała uwaga: przy wpisywaniu hasła nie pokazują się znaki ani kropki, w celu zachowania bezpieczeństwa. Nie przejmujemy się tym, wpisujemy nasze hasło i wciskamy Enter.

W konsoli pojawia się sporo informacji oraz na samym dole pytanie czy chcemy kontynuować. Aby zatwierdzić  wpisujemy „T” i wciskamy Enter.

Instalują nam się wszystkie pakiety Ruby.

Super, możemy przejść do następnej potrzebnej rzeczy, czyli edytora.

VS Code – edytor

Jest wiele edytorów kodu, a wybór zależy od osobistych preferencji. Przykładowe edytory to Atom, UltraEdit, Brackets i Visual Studio Code. Ja wcześniej korzystałam z Atom, teraz chcę wypróbować VS Code.

Aby zainstalować VS Code klikamy na ten link.

i w zależności od naszego systemu operacyjnego wybieramy odpowiednią opcję. Ja wybrałam opcję na Ubuntu.

Następnie pojawia nam się okno instalacji. Możemy zobaczyć tutaj krótki opis oraz numer wersji.

Jeśli instalacja przebiegnie prawidłowo możemy się cieszyć z takiego widoku.

Node.js

Podaję linka do dokumentacji. A tutaj jest artykuł dokładnie na temat instalacji Node.js na Ubuntu 16.04.

Na samym początku wpisujemy komendę „sudo apt-get update”.

Pojawia się sporo tekstu, a na samym końcu „Gotowe”, czyli możemy przejść do następnego kroku.

Wpisujemy komendę „sudo apt-get install nodejs”, a następnie potwierdzamy literą „T”, że chcemy kontynuować.

Super, mamy Node.js. Teraz potrzebujemy node package manager. Wpisujemy „sudo apt-get istnall npm”.

Ponownie potwierdzamy literą „T” i gotowe.

Git

Aby zainstalować Gita na Ubuntu wpisujemy komendę „apt-get install git”. Gdyby ktoś miał problemy odsyłam do dokumentacji, tutaj są również instrukcje instalacji na inne systemy operacyjne.

W moim przypadku Git się już zainstalował wcześniej, w sumie sama nie wiem kiedy. Proces instalacji nie powinien się różnić od tych wcześniejszych.

Przeglądarka – Chrome

Oprócz tego potrzebujemy przeglądarki, tutaj zapomniałam zrobić screenów podczas instalacji, ale proces jest podobny do instalacji edytora. Nie potrzebujemy wpisywać żadnych komend w terminalu. Tu jest link skąd możemy pobrać potrzebne pliki:

Podsumowanie

To jest podstawowy set up, ale to nie jest koniec. Każdy projekt ma indywidualne potrzeby i będziemy musieli zainstalować dodatkowe dependencje. W zależności od wymagań projektowych dependencje będą się różnić dlatego instalujemy je nie globalnie, ale w konkretnym projekcie. O tym postaram się napisać kolejny post.

Daj znać czy post był przydatny, a razie pytań zostaw komentarz.

Kolejne kroki związane z projektem – Testy A/B

Na stronie wszystkie elementy są testowane niezależnie od siebie. Testuje kolor buttona, display buttona, tekst, obraz, kolor tekstu oraz film. Losowanie odbywa się na odświeżeniu karty.

AB testing - wynik losowania
Wynik losowania
AB testing - wynik losowania
Wynik losowania
AB testing - wynik losowania
Wynik losowania

Wreszcie udało mi się znaleźć błąd w kodzie. Poprawiłam obydwie uniwersalne funkcje. Jedna pozwala na wybranie CSS property i testowanie dwóch wariantów np. jeden z dwóch kolorów czcionki, jednego z kolorów tła, display. Druga funkcja pozwala na np. losowanie jednej z dwóch ścieżek do obrazka bądź filmu, a także na testowanie treści tekstu na stronie.

function drawOneCssProperty(whatToTest, optionA, optionB, elementId) {
  const testedElement = document.getElementById(elementId);
  var randomNumber = Math.random();
  if (randomNumber < 0.5) {
    testedElement.style[whatToTest] = optionA;
  } else {
    testedElement.style[whatToTest] = optionB;
  }
}

function drawOneOption(whatToTest, optionA, optionB, elementId) {
  const testedElement = document.getElementById(elementId);
  var randomNumber = Math.random();
  if (randomNumber < 0.5) {
    testedElement[whatToTest] = optionA;
  } else {
    testedElement[whatToTest] = optionB;
  }
}

A tutaj poniżej wywołuje funkcje. Testowane argumenty są przekazywane w osobnym pliku.

function testColor(colorA, colorB, elementId) {
    drawOneCssProperty('backgroundColor', colorA, colorB, elementId);
}

function testTextColor(colorA, colorB, elementId) {
    drawOneCssProperty('color', colorA, colorB, elementId);
}

function testDisplay(elementId) {
    drawOneCssProperty('display', 'none', 'inline-block', elementId);
}

function testTekst(textA, textB, elementId) {
    drawOneOption('innerHTML', textA, textB, elementId);
}

function testImage(imageSrcA, imageSrcB, elementId) {
    drawOneOption('src', imageSrcA, imageSrcB, elementId);
}

function testIframe(iframeSrcA, iframeSrcB, elementId) {
    drawOneOption('src', iframeSrcA, iframeSrcB, elementId);
}

function testVideo(videoSrcA, videoSrcB, elementId) {
    drawOneOption('src', videoSrcA, videoSrcB, elementId);
}

export { testColor,  testTekst, testImage, testDisplay, testTextColor, testIframe, testVideo};

Co dalej? 

  1. Będę przechowywać informacje o wynikach losowania w local storage.
  2. Zamierzam pobrać informacje o użytkowniku, który wejdzie na testowaną stronę.
  3. Testowanie nie na odświeżeniu strony, ale na jednej sesji
  4. Będę nasłuchiwać na eventy – czyli sprawdzać czy użytkownik podjął akcje na stronie np. kliknął na button, odtworzył wideo za pomocą uniwersalnej funkcji, która pozwoli na nasłuchiwanie na dowolnym elemencie strony.
  5. Będę badać jak wpływa zmiana jednego elementu na inny, czyli np. jak zmiana obrazu na stronie będzie wpływać na klikalność buttona. Do tego będzie potrzebna funkcja, w której będzie trzeba podać id testowanego elementu oraz id elementu na którym badamy ilość eventów.

Konferencja UX oczami developera – czyli Ciemna Strona UX #3

Dzisiaj miałam okazję uczestniczyć w konferencji organizowanej przez ITberries pod tytułem „Break the Rules! – Ciemna Strona UX #3”. Było to ciekawe doświadczenie, ponieważ mogłam słuchać prelekcji i patrzeć przez pryzmat Frontend Developera. W sumie było 12 prelekcji, pod tym linkiem możesz zobaczyć agendę oraz dowiedzieć się więcej o prelegentach. Zebrałam 10 wniosków, które udało mi się zapisać w postaci notatki wizualnej (ang. sketchnote).

1. Badania i burze mózgów przynoszą nowe pomysły i pozwalają na doskonalenie produktów

Badania UX-owe (UX – User Experience) pomagają w dostosowaniu produktu do potrzeb użytkownika. Ich przeprowadzanie oraz analizowanie może prowadzić do odkrywania nowych problemów i potrzeb. W rzeczywistości firmy rzadko dysponują budżetem na takie badania.

2. Moderator może pomóc zespołowi osiągnąć więcej w krótkim czasie

Moderator – tutaj jako osoba zewnętrzna, która przychodzi do firmy na kilka godzin, bądź dni i wchodzi w interakcje z pracownikami firmy (często z różnych działów) i pomaga im w rozwoju / znalezieniu rozwiązań na problemy i ustaleniu konkretnych działań.

3. Praca z personami pozwala na więcej empatii

„Persony to swoisty archetyp użytkownika danego produktu przedstawiony w postaci perswazyjnego, „uczłowieczonego” opisu cech, umiejętności, potrzeb, celów (zarówno życiowych jak i realizowanych przy użyciu produktu). Zadaniem tych modeli jest przybliżenie zespołowi pracującemu nad projektem różnych typów użytkowników, tak, aby ułatwić podjęcie decyzji związanych z koncepcją, funkcjonalnościami projektu oraz grafiką.”

źródło: http://uxbite.com/2010/08/tworzenie-person/

Poznawanie i pracowanie z personami pozwala na przybliżenie potencjalnego użytkownika produktu czy usługi. Zamiast abstrakcyjnych użytkowników mamy do czynienia z profilami osób, co pozwala twórcom na więcej empatii.

4. Machine learning może być przyszłością projektowania oraz ulepszania produktów

Sztuczna inteligencja rozwija się z niebywałą prędkością, jest w stanie tworzyć muzykę, pomagać w rozpoznawaniu chorób. Również zagadnienie self-driving cars jest bardzo fascynujące. Jaka będzie przyszłość projektowania i developmentu w erze maszyn? Przekonany się za pewne w przeciągu dekady.

5. Testujmy i ulepszajmy MVP (minimum value product)

Dzięki testowaniu MVP możemy w szybki sposób zweryfikować czy pomysł produktu / usługi jest trafny, a dzięki analizie będziemy mogli sprecyzować oczekiwania użytkowników i wyjść im na przeciw z skrojonymi na miarę rozwiązaniami.

6. Istotne jest projektowanie badań – najlepiej w interdyscyplinarnym teamie

Projektowanie badań jest samo w sobie ciekawym zagadnieniem. Tutaj również możemy starać się aby UX był jak najlepszy. Nie dość, że trzeba dbać o jasno sformułowane pytania, odpowiednie pola do odpowiedzi, to możemy również użyć kreatywności aby zaangażować osobę, która bierze udział w badaniu.

7. Obserwowanie użytkownika podczas badań może zaburzać wyniki

Ludzie, który są świadomi, że biorą udział w badaniu mogą zachowywać się zupełnie inaczej niż w rzeczywistości. Przy organizacji testów wato o tym pamiętać.

8. Komputery mogą rozpoznawać emocje użytkownika w głosie – szansa na rozwój UX?

Komputery mają coraz większy wpływ na nasze życie, są one już w stanie rozpoznawać emocje na podstawie głosu bądź mimiki twarzy. Jest to szansa na rozwój UX, ponieważ znając emocje użytkownika, jako twórcy, projektanci i developerzy możemy na nie odpowiednio reagować.

9. Konflikt UX/UI vs Developer – umiejętność przyjmowania krytyki, umiejętność dawania konstruktywnego feedbacku, otwartość na inne rozwiązania oraz edukacja

W pracy osobiście spotkałam się z sytuacją, w której Designer kłócił się z Developerem. Każdy miał swoją rację i nie dopuszczał innego rozwiązania. Czasami warto się zastanowić dlaczego dana osoba tak myśli. Zastanowić czy moje rozwiązanie jest na pewno najlepsze? Szanujmy siebie nawzajem i uczmy się od siebie.

10. Developer ma wpływ na UX!

Developerzy mają ostateczny wpływ na wygląd i działanie stron / aplikacji / oprogramowania. Powinniśmy to brać pod uwagę podczas wdrażania funkcjonalności.

Serdecznie polecam branie udał w podobnych wydarzeniach. Zdecydowanie to poszerza horyzonty oraz  pozwala na zaczerpnięcie wiedzy z pokrewnych dziedzin, a w rezultacie lepsze zrozumienie innych ludzi.

Projekt jakoś ciężko idzie…

To już piąty tydzień blogowania. Szczerze mówiąc, projekt idzie trochę opornie, nie ma za bardzo czym się chwalić w tym tygodniu… Zdecydowanie łatwiej przychodzi mi pisanie postów nie związanych z projektem. Często przychodzą mi go głowy nowe na tematy artykułów – zapisuję je i powoli realizuję.

Co z projektem? Ameryki nie odkryłam, ale zrobiłam mały krok do przodu.

  1. Napisałam kawałek kodu do testowania filmów. Wcześniej nie miałam jeszcze okazji wstawiać filmów na stronę, więc jest to dla mnie mała nowość, dowiedziałam się kilku ciekawych rzeczy. Na początku skorzystałam z tagu <iframe>, który pozwala na wstawienie kawałka innej strony internetowej do naszej strony. YouTube w łatwy sposób udostępnia już gotowe kawałki kodu (udostępnij -> umieść na stronie -> gotowy kawałek kodu). Drugim sposobem na wstawienia filmu jest użycie tagu <video>.  Tutaj nie korzystamy z linka tylko podajemy ścieżkę do naszego pliku wideo. Dodatkowo, mamy też kilka opcji: możemy zapętlić, wyciszyć, a także odtworzyć film automatycznie.
  2. Co do uniwersalnej funkcji, która ma służyć optymalizacji – mam wrażenie, że mnie blokuje – miałam moment oświecenia w tym tygodniu (w czasie powtarzania wiedzy na rozmowę kwalifikacyjną), próbowałam innego podejścia, ale dalej mi coś nie trybi. Obiecuję, że posiedzę nad tym w przyszłym tygodniu.

 

Praca developera – najważniejsze pojęcia

praca developera

praca developera

Asana – uniwersalna aplikacja do zarządzania projektami.

branch – gałąź projektu. Wyróżniamy gałąź główną, deweloperską i gałęzie boczne. Gałąź deweloperska to tzw. develop w której znajduje się najbardziej aktualna wersja kodu. Gałąź boczna to taka na której rozwijana jest konkretna funkcjonalność. Gałęzi bocznych może być kilka. Tworzenie gałęzi pozwala na kontrolowanie wersji projektu, przykładowym narzędziem do tego jest GIT.

bug – błąd w kodzie

call – rozmowa z klientem odbywająca się przez komunikator tj. Skype, Google Hangouts

CLI – command-line interface – sposób komunikowania się użytkownika z programem za pomogą tekstowych poleceń wpisywanych do konsoli

code review – proces sprawdzania kodu przez innego programistę/programistkę,  zazwyczaj przed połączeniem kodu z głównym branchem deweloperskim

develop – gałąź deweloperska, w której znajduje się najbardziej aktualna wersja kodu

commit – zapis aktualnego stanu kodu w danym momencie

critical – najważniejszy task w danym momencie

feature – funkcjonalność w aplikacji / na stronie internetowej

GUI – Graphical User Interface – sposób komunikowania się użytkownika z programem za pomogą interfejsu graficznego.

JIRA – aplikacja do zarządzania projektami dedykowana dla software developmentu. Pomaga w organizacji pracy zespołu, usprawnia proces naprawiania bugów

JSON – JavaScript Object Notation – uniwersalny format przesyłania danych

master – główna gałąź projektu

merge – połączenie jednej gałęzi z drugą

repozytorium – miejsce w którym trzymane są wszystkie pliki związane z projektem oraz przetrzymywane są informacje na temat historii rozwoju projektu.  Pozwala to w łatwy sposób na śledzenie zmian w kodzie.

standup – spotkanie członków zespołu dotyczące danego projektu. Stundupy odbywają się codziennie, każdy członek zespołu określa co udało mu się zrobić dnia poprzedniego, jakie napotkał trudności oraz co zamierza zrobić danego dnia. Mogą się obywać w biurze bądź przez komunikator tj. Skype, Google Hangouts. Project Manager określa priorytety oraz przekazuje dodatkowe informacje ze strony klienta.

taski – pojedyncze zadania wyznaczone przez np. Project Managera, Tech Leada, Testera. Powinny one znaleźć się w aplikacji do zarządania projektem tj. Trello, Asana, Jira. Mogą polegać na stworzeniu konkretnej funkcjonalności, naprawieniu konkretnego buga. Idealnie taski powinny być małe, najlepiej aby czas przeznaczony na ich sfinalizowanie nie przekraczał kilku godzin. W Scrumie maksymalny czas jaki może być przypisany do jednego taska to 2 dni. Jeśli na etapie planningu okazuje się, że dana rzecz ma zając więcej niż dwa dni, to koniecznie trzeba ją podzielić na więcej niż jeden task.

Trello – uniwersalna aplikacja do zarządzania projektami.

Jeśli masz jakieś uwagi lub propozycje pojęć – proszę napisz w komentarzu, postaram się uzupełnić posta.

Rozwój projetku AB-Testing

W tym tygodniu:

  1. Napiałam dwa kolejne kawałki kodu służące do testowania display elementu oraz koloru czcionki
  2. Odizolowałam kod biblioteki do oddzielnego pliku
  3. Zdecydowałam się pisać kod w czystym JS, żeby mój program był bardziej uniwersalny
  4. Zaczęłam stosować elementy ES6
  5. Pracuję jeszcze nad optymalizacją kodu – sporo rzeczy się w nim powtarza, dlatego chciałabym napisać jedną ogólną i uniwersalną funkcję, którą będzie można wykorzystać we wszystkich metodach.
  6. Postawiłam środowisko deweloperskie na moim drugim komputerze. Na Ubuntu zainstalowałam Node.js, Ruby, Git oraz nowy edytor VS Code (wcześniej korzystałam z Atoma).

Setup projektu „AB Testing”- Webpack i Webpack DevServer

W tym tygodniu byłam na wykładzie organizowanym przez IT Akademia j-labs pod tytułem “Webpack, czyli mniej znaczy więcej”. Prelegent, Jakub Pikoń, opowiadał o narzędziu deweloperskim Webpack oraz przeprowadził sesję live coding, podczas której zademonstrował jak z niego korzystać. 

Dowiedziałam się, co to jest bundle (duży plik, który powstaje po przez połączenie małych plików) oraz że Webpack jest narzędziem, który jest module bundlerem, czyli umożliwia automatyczne budowanie plików bundle.

Zdecydowałam się na skorzystanie z Webpacka w moim projekcie. Do jego instalacji użyłam NPM. Następnie trzeba było go skonfigurować. Było to dla mnie dość trudne zadanie, dlatego poprosiłam o pomoc mojego znajomego. Pobraliśmy też kompilator Babel, który umożliwia pisanie JS przy użyciu ES6 oraz kilka innych loaderów.

Zainstalowaliśmy również Webpack DevServer co umożliwiło śledzenie zmian w kodzie w czasie rzeczywistym. Teraz już wszystko jest gotowe i mogę już skupić się na tworzeniu mojej biblioteki do testów AB.

 

Słownik początkującego Frontend Developera

słownik frontend developera

słownik frontend developera

Tu powstaje słowniczek początkującego Frontend Developera. Podzielony jest on na kilka sekcji: pojęcia, technologie oraz narzędzia developerskie.

Pojęcia

BEM – Block Element Modifier – konwencja, która określa sposób nazywania CSS-owych klas, który pomaga w wprowadzeniu jednolitości w kodzie.

DRY – Don’t repeat yourself – konwencja, która zakłada, że w programowaniu powinniśmy unikać powtarzania kodu, który wykonuje takie samo zadanie. Najlepszym przykładem jest tworzenie re-używalnych funkcji. Pozwala to na optymalizację, zredukowanie ilości kodu oraz zwiększenie jego czytelności.

RWD – Responsive Web Design – konwencja, która zakłada, że układ strony powinien dostosowywać się do wielkości oraz orientacji ekranu użytkownika. Znaną biblioteką ułatwiającą kodowanie RWD jest Bootstrap.

Technologie

AJAX – Asynchronous JavaScript And XML – sposób komunikacji przeglądarki z serwerem, gdzie wysyłane zapytania są asynchroniczne, czyli nie musimy czekać aż przyjdzie odpowiedź z jednego zapytania, żeby wykonało się drugie. Przykładem użycia AJAXa jest dynamicznie ładujący się kontent na stronie.

ECMAScript 6, ES6 – jest najnowszą ustandaryzowaną wersją JavaScript z 2015 roku. Wprowadza ona dodatkowe funkcjonalności, skróty, słowa kluczowe oraz inne ulepszenia. Obecnie jeszcze nie wszystkie przeglądarki wspierają ES6, dlatego aby używać ES6 należy użyć kompilatora (np. Babel), który skompiluje nasz kod do ES5.

Sass – Syntactically Awesome Style Sheets – prepocesor języka CSS. Wprowadza większe możliwości niż CSS tj. zmienne, zagdzieżdżanie selekorów, mixiny.

Narzędzia developerskie

Babel – kompilator, który pozwala na używanie ECMAScript 6 i kompilowanie kodu do ECMAScript 5.

Webpack – module bundler, który dzięki szeregowi dodatkowych pluginów i loaderów może służyć do wielu do podstawowych tasków np. do kompilacji ES6 do ES5 (przy pomocy Babel loader), czy Sass do CSS. Dzięki dodatkowemu pluginowi Webpack DevServer dostajemy w prosty konfiguracji serwer deweloperski.

To nie jest ostateczna wersja posta, będzie on dalej aktualizowany. Jeśli masz jakieś propozycje pojęć, które powinny się znaleźć w słowniczku proszę napisz w komentarzu, postaram się uzupełnić.