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

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

Tydzień 38

Zakończyłem szkolenie WTF Co ten frontend. To chyba najważniejsze wydarzenie tego tygodnia. Grubo po terminie, za to zainspirowany i naprowadzony na wiele ciekawych wątków. Dzięki tematom poruszanym w ramach szkolenia WTF zanurzyłem się bardziej w CSS i JS. Próbowałem nawet Reacta, ale po trzech tygodniach uznałem, że za mało jeszcze wiem o JS.

No comments
Krzysztof NyrekTydzień 38
read more