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

Strony WWW wyglądają ładnie, ale koszmarnie długo się ładują. Problem polega na tym, że ludzie są niecierpliwi, a do tego przyzwyczajeni, żeby dostawać wszystko tu i teraz. Jeżeli mają na coś czekać, to rezygnują. Wybierając między ładnym wyglądem, a szybkością wczytywania się strony, zawsze należy wybierać szybkość.

Jakiś czas temu stworzyłem stronę promującą Błędne Skały i generalnie strona jest bardzo ładna wizualnie, ale miała taki mankament, że ładowała się nieznośnie długo. Na szczęście narzędzia developerskie w Google Chrome pomagają w tym zadaniu. Pierwsze z nich to narzędzie „Network” w zakładce dla developerów, które pokazuje wagę każdego z ładowanych plików strony WWW i czas potrzebny do jego załadowania.

Drugie narzędzie to Audits, również dostępne w zakładce dla developerów. Narzędzie to bada nie tylko szybkość ładowania się strony, ale ocenia również SEO i pokazuje jak strona wyświetla się w trakcie ładowania. Te dwa narzędzia dają już bardzo dużą wiedzę na temat tego, jak szybko ładuje się strona i jakie oceny otrzyma w badaniu przez najbardziej popularną przeglądarkę w sieci. Warto mieć dobre oceny w tym rankingu.

Błędne Skały przeszły przede wszystkim kurację odchudzającą zdjęć. https://tinypng.com/ to świetne narzędzie do kompresji zdjęć bez znaczącej utraty ich jakości. Nie wiem na czym polega algorytm „odchudzania” zdjęć, ale ważne że działa. Poza tym zauważyłem, że część dodanych na stronę zdjęć miało wyższą rozdzielczość niż wyświetlana na stronie. Patrząc na to obiektywnie, to zupełnie niepotrzebne spowalnianie ładowania się strony. Co gorsza, jest to niepotrzebne marnowanie transferu klienta, który szczególnie w przypadku połączeń komórkowych jest ograniczona.

Drugim przedmiotem optymalizacji była aplikacja HydroApp. Docelowo zaprojektowana dla użytkowników urządzeń mobilnych. Najwięcej kodu w tej aplikacji jest po stronie Java Scriptu. Trudno zoptymalizować kod html, ale okazało się, że można wykonać optymalizację za pomocą funkcji oferowanych przez Serwice Worker. Serwice Worker, to skrypt który uruchamia się w sposób niezauważalny dla użytkownika, a web developerowi pozwala uruchomić kod w tle. Jedną z ciekawych opcji na jaką pozwala Serwice Worker, to możliwość ściągnięcia niezbędnych elementów strony do pamięci cache na urządzeniu. Dzięki temu witryna może ściągnąć ciężkie pliki tylko raz, bez konieczności ściągania tych samych plików za każdym razem, kiedy użytkownik zechce odwiedzić stronę. Można również ściągnąć do pamięci cache całą witrynę, dzięki czemu będzie ona działała offline w takim zakresie, jaki jest dostępny bez konieczności wykonania interakcji z serwerem. Hydro App nie jest dużą witryną, więc zdecydowałem się na ściągnięcie całości do pamięci cache przy pierwszym uruchomieniu, a następnie synchronizowanie z serwerem kiedy sieć jest dostępna. Praktycznie jednak, aplikacja nie komunikuje się z serwerem, bo ilość wypitych szklanek wody przechowywana jest w pamięci podręcznej przeglądarki. Dzięki takiemu zabiegowi użytkownik zyskuje możliwość korzystania z aplikacji nawet wtedy, kiedy nie ma dostępu do sieci.

Na koniec ciekawostka z tego tygodnia React View. Jeżeli chcesz pozwolić ludziom od designu pobawić się komponentami w React, to powstało do tego świetne narzędzie. Po polsku można by to nazwać generatorem kodu online. https://baseweb.design/blog/introducing-react-view/ narzędzie daje dużo swobody w modyfikowaniu zachowania się komponentów, co wpływa na interakcję aplikacji z użytkownikiem. W fazie projektowej takie narzędzie znacznie przyspiesza pracę.

W tym tygodniu na optymalizację stron poświęciłem dwanaście i pół godziny.

No comments
Krzysztof NyrekTydzień 37
read more

Tydzień 33

Hello Java Script, the most popular programing language in the IT word, according to GitHub news. Nie, blog nadal będzie w języku polskim i tak według najnowszych wyników badań opublikowanych przez GitHub, Java Script jest najczęściej wykorzystywanym językiem programowania na ten moment.

No comments
Krzysztof NyrekTydzień 33
read more