CodeEurope 2017 – konferencja programistyczna

W tą środę byłam na konferencji CodeEurope w Krakowie i chciałam się podzielić moimi wrażeniami.

Ogólnie muszę powiedzieć, że jestem zadowolona z udziału w tym wydarzeniu. Z konferencji było można na prawdę sporo wyciągnąć, myślę tutaj głównie nie pod kątem nauki programowania, ale raczej inspiracji, poszerzenia horyzontów, poznania nowych ludzi.

Było wiele wykładów z różnych dziedzin programowania, dlatego myślę, że każdy znalazł coś dla siebie. Do tego była możliwość udziału w warsztatach (rejestracja w dniu wydarzenia). Miejsca były ograniczone, więc trzeba było wcześniej zadbać o odebranie biletu.

Microsoft Cognitive Service

Mi najbardziej podobał się wykład pod tytułem „Keyboards? Where we’re going, we don’t need keyboards!”, wygłoszony przez pana: Don Wibier. Podczas prezentacji poruszane były tematy związane z mashine learning oraz sztucznej inteligencji. Prelegent pokazywał jak w prosty sposób można samemu korzystać z Microsoft Cognitive Service.  Okazuję się, że można założyć konto w tym serwisie i samemu poeksperymentować z ich API.  Nie trzeba mieć ogromnych umiejętności programistycznych, aby samodzielnie stworzyć narzędzie do bookowania lotów samolotowych przy pomocy poleceń głosowych! Koniecznie zerknij na stronę Language Understanding Intelligent Service (LUIS).  A tutaj jest krótkie wideo z ich strony, wyjaśniające jak to działa:

To co parę lat temu wydawało się skomplikowane i nie dostępne teraz staje się prostsze i będzie coraz bardziej popularne. Mogę powiedzieć,  jest to ciekawe narzędzie, ale sporo mu jeszcze brakuje do doskonałości. Tempo uczenia się maszyn jest bardzo szybkie, więc z miesiąca na miesiąc LUIS będzie działał coraz lepiej.

IoT Service Kit

Byłam również na warsztatach „Make the magic happen: the human part”, prowadzącymi byli: Dennis Schaaf i Ricardo Brito. Podczas warsztatów korzystaliśmy z bardzo ciekawego narzędzia, a właściwie to gry: IoT Service Kit pozwalającej na projektowanie interakcji ludzi (klientów) z IoT (Internet of Things). Sama koncepcja jest dość uniwersalna i polega na rozrysowaniu środowiska, stworzenie persony (przykładowego użytkownika usługi), przejściu przez ścieżkę, którą podąża klient, zauważeniu problemów jakie napotyka on po drodze oraz znalezienie rozwiązań problemów (może być przy pomocy IoT, ale nie musi). Mamy do tego różne karty, pionki, figurki które umożliwiają zobrazowanie powstawianych pomysłów. Głównym założeniem tej gry jest komunikacja ludzi z różnych branż, w celu przedyskutowania ciekawych rozwiązań i stworzenia lepszego user experience i przyciągnięcia większej ilości klientów. Pod spodem zamieszczam, krótką wideo prezentację tego produktu. Sam projekt jest open sourceowy i można go znaleźć na GitHubie tutaj.

Podsumowując, uważam, że warto było wziąć udział w konferencji Code Europe. Rezerwuj już teraz termin w swoim kalendarzu na rok 2018, może się spotkamy na tym wydarzeniu? Kto wie 😉 Jeśli masz jakieś pytania, zostaw komentarz.

Małe ogłoszenie: do 09.05 jestem na wakacjach i uwaga(!) nie będę mieć dostępu do internetu! Niestety nie mam żadnych postów zaplanowanych na ten okres.

 

Projekt AB Testing – ciąg dlaszy

W tym tygodniu, udało mi się dodać kawałki kodu, które zapisują wynik jednego testu w localStorage. Zapisuję czy test został wykonany, który element na stronie jest testowany oraz która z opcji została wylosowana. Dodatkowo, mam uniwersalną funkcję, która nasłuchuje na kliknięcia na elemencie o danym ID. Gdy dany element zostaje kliknięty, dodaję o tym informację w localStorage. Na poniższym screen shotcie, możemy zobaczyć wynik jednego z testów.

local-storage-ABtesting

Docelowo, funkcja testująca będzie egzekwowana tylko raz w jednej sesji. Dlatego, będę też musiała pobierać informacje z localStorage, gdy np. użytkownik zamknie kartę. W tym tygodniu zaczęłam pisać funkcję, która wykrywa przeglądarkę z której korzysta użytkownik strony. Wymaga ona jeszcze dopracowania. Dodatkow chcę napisać fukcję wykrywającą system operacyjny i zapisywać te wyniki w obiekcie z informacjami o użtykowniu. Będę to wykorzysywać do egzekwowania testów warunkowych.

 

Pytania techniczne na rozmowie na stanowisko 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
  2. Moderator może pomóc zespołowi osiągnąć więcej w krótkim czasie
  3. Praca z personami pozwala na więcej empatii
  4. Machine learning może być przyszłością projektowania oraz ulepszania produktów
  5. Testujmy i ulepszajmy MVP (minimum value product)
  6. Istotne jest projektowanie badań – najlepiej w interdyscyplinarnym teamie
  7. Obserwowanie użytkownika podczas badań może zaburzać wyniki
  8. Komputery i urządzenia mobilne mogą rozpoznawać emocje użytkownika w głosie – szansa na rozwój UX?
  9. Konflikt UX/UI vs Developer – umiejętność przyjmowania krytyki, umiejętność dawania konstruktywnego feedbacku, otwartość na inne rozwiązania oraz edukacja
  10. Developer ma wpływ na UX!

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.