Tydzień 47

Ile można pisać console.log tu i console.log tam? Na początku nie przeszkadzało mi sprawdzanie stanu aplikacji za pomocą tej komendy dopisywanej tu i tam do kodu, ale zaczynam pisać bardziej rozbudowane apki i postanowiłem poszukać jakieś alternatywy.

No comments
Krzysztof NyrekTydzień 47
read more

Tydzień 46

Powrót do poznawania Java Script w wersji ES6. Do tej pory uczyłem się pisania kodu w wersji ES5. Wiem, że to stara wersja kodu i wiem, że nikt jej nie wykorzystuje obecnie, bo ES6 wprowadziło dużo fajnych ułatwień w pisaniu kodu, ale pomimo to ciągle można spotkać aplikacje napisane w ES5 i warto wiedzieć, jak je utrzymać, albo przepisać na nowo.

No comments
Krzysztof NyrekTydzień 46
read more

Tydzień 45

Szlifowanie aplikacji Fronend Quiz i wypuszczenie jej na świat, a później zabawa z serwerem na maszynie wirtualnej. To nie był tydzień poświęcony zgłębieniu wiedzy, a raczej pogłębianiu już zdobytych umiejętności. Czyszczenie błędów wyłapanych przez Eslint i walka o uruchomienie serwera Apache2 na wirtualnym serwerze Ubuntu.

No comments
Krzysztof NyrekTydzień 45
read more

Tydzień 44

W życiu każdego programisty przychodzi taki moment, w którym poznajemy nową wiedzę i okazuje się, że jakiś projekt można napisać lepiej. Oczywiście zaraz potem pojawia się drugie pytanie: czy na pewno chcę się za to zabierać, przecież działa dobrze. W moim przypadku działało, ale pojawiło się kilka błędów, których nie wyłapałem wcześniej oraz pojawiło się kilka uwag co do odbioru aplikacji, więc postanowiłem dopracować wersję 1.0.

Mowa o FrontEnd Quiz, który postanowiłem poprawić tak, żeby działał jak aplikacja webowa, bez konieczności przeładowywania strony w trakcie działania aplikacji. Wydawało mi się, że to nie będzie nic trudnego, bo przecież mechanizm działania aplikacji nie zmieni się mocno. Jedyne co się zmieni, to układ kodu, a dokładnie upakowanie dotychczasowego kodu w komponentach i ich odpowiednie spięcie za pomocą kontenera sterującego. Na własnej skórze przekonałem się, że jak coś brzmi niegroźnie, to na pewno zajmie więcej czasu niż zaplanowałem.

Początkowo miałem kłopoty z ogarnięciem logiki przepływu danych w aplikacji i ustawieniem kontrolera, tak żeby wszystko działało bez zarzutu. Tego akurat się spodziewałem, bo wcześniej robiłem to tylko raz w trakcie kursu i to nie samodzielnie, a jedynie naśladując prowadzącego. Na szczęście nic tak nie uczy, jak praktyka. W końcu poradziłem sobie z tym wyzwaniem. Następnie przyszła kolej na dystrybucję danych w aplikacji. Tu pojawiły się kolejne wyzwania. Dane pomiędzy komponentami przesyłane są jako obiekty. To wymusza inny sposób ich przywoływania i pracy z nimi. Później, okazało się, że chcąc wyciągnąć z htmla, który checkbox jest zaznaczony, trzeba zagłębić się w parametry przekazywane przez event. Na szczęście w trakcie kursu JS nauczyłem się kilku przydatnych tricków, które pozwoliły mi przeglądnąć logikę zdarzeń i się do niej podpiąć.

W zasadzie co element aplikacji, to nowe problemy. Na szczęście każdy z nich udało się rozwiązać. Na ten moment w aplikacji brakuje mi tylko dwóch elementów: podsumowania wyników i informacji o tym, co poszło nie tak, czyli na które pytania można było odpowiedzieć lepiej. To do zrobienia w przyszłym tygodniu i będę gotowy, do podmiany testu na stronie.

Przy okazji tworzenia aplikacji w JS kilka razy skorzystałem z Code Sandbox w celu przyspieszenia pracy z kodem, a w zasadzie wyłapania błędów. Przy tej okazji okazało się, że jest coś takiego jak ESLint. Jest to nic innego jak narzędzie, które z jednej strony pomaga wyłapać błędy w kodzie, a z drugiej strony podpowiada jak poprawić kod, żeby spełniał ogólnie przyjęte zasady.

Zainstalowanie Eslint nie należy do trudnych, ale warto wiedzieć o kilku tematach. Poniżej przedstawię, jak można zainstalować Eslint dla projektu pisanego w JavaScript.

Zaczynamy od zainstalowania pakietu NPM Eslint w naszym projekcie. W głównym katalogu projektu instalujemy pakiet za pomocą komendy:

Npm i eslint –save-dev

Kolejnym krokiem jest inicjalizacja pakietu ESlint za pomocą komendy:

./node_modules/.bin/eslint –init

W konsoli pojawi się kilka pytań o konfigurację, po udzieleniu odpowiedzi narzędzie będzie wstępnie skonfigurowane do działania.

To jeszcze nie wszystko, warto doinstalować zewnętrzne rozszerzenie, które pomoże nam utrzymać kod w jednym z powszechnie uznawanych standardów np.: Airbnb, Google, Facebook. W moim przypadku zastosowałem standard Airbnb. Doinstalowanie go wymaga skorzystania z komendy:

npx install-peerdeps –dev eslint-config-airbnb-base

Po zainstalowaniu pakietu, otwieramy plik .eslintrc.js i w miejscu „extend” podmieniamy eslint:recommended na Airbnb-base.

Do pliku package.json trzeba dodać kod pozwalającą nam uruchamiać eslint z linii komend:

„scripts”:
{
„eslint: „eslint .”
}

Teraz możemy już korzystać z pakietu uruchamiając program komendą npm run eslint.

W wyniku pracy rozszerzenia otrzymamy listę problemów i błędów w konsoli. Pozostaje jedynie usunąć znalezione błędy.

W tym tygodniu na programowaniu spędziłem prawie siedemnaście godzin w całości pracując nad nowym kodem do aplikacji FrontEnd Quiz.

No comments
Krzysztof NyrekTydzień 44
read more

Tydzień 43

„So you think you know Java Script” to tytuł jednej z biblii JS dostępnej w internecie i chyba wiem skąd taki pomysł na tytuł książki. W tym tygodniu pracowałem nad pierwszą większą aplikacją napisaną w JS i zrozumiałem jedno: JS to potężne narzędzie, a ja wiem o nim tyle co nic.

No comments
Krzysztof NyrekTydzień 43
read more

Tydzień 42

Jak skomplikować sobie życie? Wystarczy zrobić coś więcej niż proponuje wykładowca w trakcie kursu. W trakcie kursu Modern Java Script miałem zrobić prosty quiz w consoli, ale stwierdziłem, że jak mam robić quiz, to musi się on normalnie wyświetlać w przeglądarce. Finalnie to co miało mi zająć pół godziny, zajęło niemal 18 godzin.

Oczywiście nauczyłem się przy tym kilku nowych rzeczy, głównie związanych z logiką w Java Script. Dopóki skrypt wykonuje się raz na stronie, to nie napotykamy problemów związanych z obróbką i przechowywaniem danych pomiędzy przeładowaniami strony. Przy tej okazji pierwszy raz zatęskniłem za React.JS. Tam wszystkie elementy odświeżają się wielokrotnie na stronie i nie martwisz się o aktualność danych na których pracuje kod. W Vanilia JS komponenty nie aktualizują się dopóki nie przeładujesz strony. W związku z tym konieczne było wykorzystanie sessionStorage do trzymania gdzieś informacji na temat bieżącego wyniku i ilości zadanych pytań.

Kolejnym wyzwaniem w projekcie było zapewnienie, aby pytania w trakcie quizu nie powtarzały się. Niby prosta pętla sprawdzającą czy w obiekcie znajdują się już numer pytania, który chcemy zadać, ale finalnie trochę się namęczyłem z tym tematem. Kod trzeba było ustawić w pętli, żeby wykonywał się zawsze wtedy, kiedy pytanie się dubluje. Z drugiej strony potrzeba było zabezpieczyć kod przed wykonywaniem się bez końca. Ostatecznie wyszło to tak:

do{
    randomNumber = Math.round(Math.random() * 19);
    testValue = 0;
    for (i=0; i<questionStorageNbr.length; i++){
      if(randomNumber === questionStorageNbr[i]){
        testValue = -1;
      }
    }
    i += 1;
  } while (testValue < 0 && i < 10);
  questionStorageNbr.push(randomNumber);
  sessionStorage.setItem(“QuestionHistory”, questionStorageNbr);
}

Sporym wyzwaniem okazało się również przekazanie wartości z formularza do Java Script. Wcale nie dlatego, że to jakaś skomplikowana funkcja, ale głównie dlatego, że w internecie pełno jest sprzecznych ze sobą informacji na ten temat i musiałem kilka sposobów przetestować, żeby wyłonić ten, który działa:


let answerValue = document.querySelector(‘input[name=”answerX”]:checked’).value;
  if (answerValue == correctAnswerNumber){
    totalScore += 1;
    sessionStorage.setItem(‘SessionTotalScore’, totalScore);
    sessionStorage.setItem(‘TemporaryAnswer’, 1);
  }else{
    sessionStorage.setItem(‘TemporaryAnswer’, 0);
  }
});

Pod względem graficznym projekt nie jest skomplikowany i jedynym know-how jest użycie dodatkowej klasy w CSS ustawiającej właściwość display: none; w powiązaniu z kodem JS dodającym i usuwającym ta klasę z pliku css.

W tym tygodniu na programowaniu spędziłem w sumie 20 godzin, z czego 18 godzin zajęło mi przygotowanie quizu, który jest dostępny pod adresem: FrontendQuiz

No comments
Krzysztof NyrekTydzień 42
read more