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ć.

Nazewnictwo w programowaniu – 20 cennych wskazówek

nazewnictwo w programowaniu

nazewnictwo w programowaniu

Czas na lekcję dobrych praktyk w programowaniu, dzisiaj będzie konkretnie o nazewnictwie. Post ten powstał na podstawie 2 rozdziału książki Roberta C. Martina “Czysty Kod” oraz moich własnych przemyśleń.

Nazewnictwo klas, funkcji, metod, zmiennych plików jest NIEZWYKLE ważne. To tak jak pisanie instrukcji obsługi, ale bez obrazków. Musimy dokładnie wyrazić o co nam chodzi. Warto poświęcić trochę więcej czasu na przemyślenie nazwy, to naprawdę pozwoli nam i innym programistom zaoszczędzić sporo czasu i nerwów.

  1. Nie bagatelizuj nazewnictwa.
  2. Postaw się w sytuacji programisty który będzie utrzymywał Twój kod. Wykrzesaj z siebie chociaż odrobinę empatii.
  3. Spójność to podstawa – warto przyjąć jedną konwencję i być konsekwentnym np. BEM
  4. KISS – Zasada Keep it Simple Stupid – czyli najprościej jak się da, bez zbędnych słów.
  5. Jeśli nazwa wymaga komentarza jest to zła nazwa.
  6. Nie używaj skrótów. Mogą one powodować nieporozumienia, ponieważ skróty często mają więcej niż jedno rozwinięcie.
  7. Uważaj na dwuznaczności słów, one też mają często więcej niż jedno znaczenie.
  8. Liczby też można nazywać! Nie każdy będzie wiedział skąd się wzięła i co robi cyfra “4” w Twoim kodzie. Będzie też łatwiej ją zlokalizować.
  9. Żarty, kolokwializmy, metafory – daruj sobie, jak wrócisz do kodu za dwa miesiące nie będziesz wiedział/a o co chodzi.
  10. Nie używaj jednoliterowych nazw. Są one trudne do wyszukania oraz nie wskazują na żaden kontekst. Wyjątek: jako zmienne lokalne w małych kawałkach kodu np. w liczniku pętli zmienna “i”.
  11. Nie mieszaj różnych języków! Polecam angielski, jest uniwersalny.
  12. Pamiętaj, że w niektórych czcionkach litery małe L i O łatwo pomylić z 1 i 0.
  13. Jeśli masz pomysł na lepszą nazwę, nie zastanawiaj się tylko ją zmień (ale nie w jednym miejscu – we wszystkich!).
  14. Unikaj nazw ze słowami jak “data”, “info”, “message” – sprecyzuj!
  15. Nazwy metod, funkcji to zwykle czasowniki (w stronie czynnej) lub wyrażenia czasownikowe. Czyli zwykle odpowiada na pytanie “co to robi”? Pomocne słowa: getSomething, setSomething, isSomething.
  16. Nazwy klas to zwykle rzeczowniki lub wyrażenia rzeczownikowe. Czyli zwykle odpowiada na pytanie “co to jest”?
  17. Jedno słowo na jedno abstrakcyjne pojęcie. Skąd będziesz wiedzieć jaka jest różnica pomiędzy: get, fetch albo retrieve?
  18. Jedno słowo na jedno zagadnienie. “Należy unikać używania tego samego słowa do dwóch celów”.
  19. Podczas code review zwracaj uwagę na nazewnictwo.
  20. Nie każdy element potrzebuje nazwy, jeśli jej nigdzie nie używasz nie zaśmiecaj nią kodu.
  21. Bonus: LITERÓWKI – bardzo na nie uważaj!

Zwracaj uwagę na nazewnictwo np. w popularnych bibliotekach. Zerknij na API jQuery i zobacz jakich oni nazw używają.  Po za tym ćwicz, ćwicz, ćwicz i proś innych o code review 

i pamiętaj:  

“Profesjonaliści piszą kod zrozumiały dla innych” Robert C. Martin

Losowanie jednego z dwóch kolorów, nagłówków i obrazków

Jak to czasami z projektami bywa, często nie wiemy jak się za nie zabrać, dlatego zwlekałam parę dni z napisaniem jakiejkolwiek linii kodu. Kontuzja kostki skutecznie mnie unieruchomiła i zmusiła do siedzenia (przed monitorem). Odpaliłam Codepena i zaczęłam się zastanawiać. Zdecydowałam, że spróbuję stworzyć skrypt, który będzie losował jeden z dwóch danych kolorów. Pisałam już kiedyś program, który randomowo losował kolor na kliknięciu, ale cel mojego skryptu był inny. Poprosiłam wujka Googla o podpowiedź.

Jak wylosować jedną z dwóch liczb używając JavaScriptu?

How to decide between two numbers randomly using JavaScript?

Na StackOverflow (portal na którym programiści publikują swoje problemy, a inni pomagają im w ich rozwiązaniach) znalazłam dokładnie to co było mi potrzebne. Plan był taki:

  1. Wylosuj randomową liczbę [0, 1) używając Math.random()
  2. Przypisz ją do zmiennej
  3. Jeśli wylosowana liczba będzie mniejsza od 0,5 wybierz wartość 1.
  4. W pozostałych przypadkach wybierz wartość 2.

Udało mi się na początku napisać skrypt w jQuery, następnie w czystym JavaScript. Cóż za satysfakcja! Tego samego dnia udało mi się napisać skrypt losujący treść nagłówka oraz obrazek. Przyjęłam założenie, że w tym samym czasie może być testowany tylko jeden element danego rodzaju. Wybierany on jest za pomocą odpowiedniego ID. Będę jeszcze usprawniać ten kod. Jeśli chcesz zerknąć na najnowszą wersję tego kodu zapraszam na razie na mojego Codepena.

screenshot from Codepen
Każdy element losuje się osobno na odświeżeniu przeglądarki

 

screenshot from Codepen
Wynik kolejnego losowania

Problemy:  

Nie wiem jeszcze jak połączyć Gita z Githubem, dlatego zaczęłam programować w Codepenie. Jeszcze większy problem mam z komputerem, ponieważ mam za mało pamięci i nie mogę niczego zainstalować, co utrudnia całą sprawę.

 

 

Mój program do testów A/B – faza przygotowania i planowania

A/B tests image

W ramach konkursu Daj się Poznać 2017 zdecydowałam się napisać swój własny opensourcowy program, który umożliwi przeprowadzanie testów A/B na stronach internetowych. Zaczęłam od przeczytania pełnej interesujących przykładów książki pt. “Testy A/B od kliknięcia do klienta”, której autorami są: Dan Siroker i Pete Koomen.

Następnie wypisałam elementy które można testować na stronach internetowych:

  1. tekst
  2. kolor tekstu, buttonów, linków
  3. display
  4. większe elementy layoutu
  5. obrazy
  6. wideo
  7. ilość pól w formularzu
  8. kolejność elementów
  9. położenie elementu
  10. inne: font-size, font-family, border-radius itd.

Założyłam również konto i repozytorium na GitHubie (po raz pierwszy sama!). Zaczęłam się zastanawiać co będę potrzebować do dalszej pracy. Zamierzam używać JavaScript oraz jQuery. Żeby przeprowadzać testy będę musiała losowo wybierać jeden z testowanych wariantów.

Testowanie testów – czyli jak będę sprawdzać czy mój program działa dobrze?

Z książki pt. “Testy A/B od kliknięcia do klienta” wyciągnęłam bardzo cenną radę. Jak sprawdzić czy mój program działa prawidłowo? Będę musiała przeprowadzić Test A/A – czyli testować dwa takie same warianty. Jeśli wyniki będą do siebie zbliżone będzie to oznaczać, że kod działa prawidłowo.

Testy A/B – co to takiego?

Testy A/B zaczynają się od prostego pytania:

W jaki sposób mogę poprawić konwersję na mojej stronie internetowej / aplikacji?

Innymi słowy: 

Jak zwiększyć odsetek ludzi, którzy na naszej stronie np. wypełnią formularz, zapiszą się na newsletter, kupią nasz produkt, przekażą darowiznę?

W rozwiązaniu tego problemu przychodzą testy A/B. Polegają one na wyświetlaniu użytkownikom w tym samym czasie różnych wersji poszczególnych elementów strony internetowej i porównywaniu wyników określonego wcześniej współczynnika. Ważne jest aby użytkownicy byli z tej samej grupy docelowej, aby wyniki były jak najmniej zaburzone.

Ciekawostka: Zespół Baracka Obamy korzystał z testów A/B podczas kampanii prezydenckich, oczywiście jak wszystkim wiadomo końcowy rezultat był pozytywny.

A/B tests image
Frangemnt książki „Testy A/B od kliknięcia do klineta”

Istnieje wiele platform, które umożliwiają przeprowadzanie testów A/B np.: https://www.optimizely.com. Ja natomiast w ramach nauki programowania JavaScript i jQuery postanowiłam napisać swój program, który będzie do tego służył. Przez najbliższe kilka tygodni będziecie mogli śledzić moje postępy w pracy.

Blog SowaProgramuje – 3… 2… 1… start!

Tradycyjne Hello World – czyli mój pierwszy post na blogu SowaProgramuje.

Będę pisać o:

  • zdobywaniu doświadczenia jako programistka (JavaScript),
  • dobrych praktykach kodowania,
  • wyzwaniach i realizacji projektu w ramach konkursu “Daj się Poznać 2017”,
  • testach A/B na stronach internetowych,
  • freelancingu,
  • rozmowach kwalifikacyjnych w branży IT
  • i wiele więcej 😉

DajSiePoznać - logo