Kurs JavaScript nabierz wprawy od Codengi

Trafiłem ostatnio przypadkiem na Codengę. Stwierdziłem zatem, że w sumie mogę rzucić okiem na jakiś kurs. Padło na Kurs JavaScript nabierz wprawy

  • Zanim przejdzę do treści samego kursu, muszę zauważyć, że sam interfejs nie jest do końca dostępny, np. nie widać wskaźnika focusu na niektórych elementach (np. przyciskach). Przez to dość trudno rozwiązuje się poszczególne zadania, gdy używa się do tego wyłącznie klawiatury.

  • Cały kurs składa się z krótkich fragmentów teorii oraz następujących po nich zadań. Zadania sprowadzają się do uzupełniania fragmentów kodu albo wyboru poprawnej odpowiedzi. I choć tylko jedna odpowiedź jest zawsze poprawna, pytania i tak pozwalają na wybór więcej niż jednej odpowiedzi – co jest dość mylące.

  • Kurs jest podzielony na 12 modułów, z których każdy dotyczy innego tematu. Większość rozdziałów kończy się dłuższym zadaniem, w którym trzeba napisać więcej kodu. Problem polega na tym, że nie jest jasne, w jaki sposób kod jest sprawdzany, a komunikaty błędów mało pomagają. W jednym przypadku aplikacja uparcie powtarzała, że nie pobrałem elementu .main, mimo że to robiłem. Okazało się, że problemem są… spacje, które wstawiłem wokół parametru metody document.querySelector. Gdy je usunąłem, kod zaczął działać. To by sugerowało, że kod jest sprawdzany co do znaku, a nie choćby z zastosowaniem AST.

  • Przy okazji zauważyłem też, że przeładowanie strony z otwartym modułem przerzuca nas na sam początek modułu, zamiast do momentu, w którym skończyliśmy.

  • Warto także wspomnieć, że teksty alternatywne obrazków, które znajdują się w części teoretycznej kursu, nie są specjalnie informacyjne. W module poświęconym DOM można m.in. znaleźć taki obrazek:

    <img src="https://codenga-content.s3.eu-central-1.amazonaws.com/images/kurs-js-poziom-2/etap-5/button-dom.png" alt="zwykly przycisk">

    Nie przedstawia on jednak zwykłego przycisku, a przycisk, któremu właśnie zmieniono treść. Ten fakt powinien być odnotowany w [alt]:

    <img src="https://codenga-content.s3.eu-central-1.amazonaws.com/images/kurs-js-poziom-2/etap-5/button-dom.png" alt="Przycisk, którego treść po zmianie przy pomocy JS-a brzmi: [treść]">
  • Jako polonistę strasznie irytuje mnie pewna niedbałość językowa, zwłaszcza w dziedzinie interpunkcji. Rozumiem, że każdy popełnia błędy, ale w niektórych fragmentach brakuje całkowicie przecinków, np.:

    JavaScript w takiej sytuacji wykona konkatenację czyli połączy wartości w jeden wyjściowy string. Jeśli wartość zmiennej jest objęta apostrofami lub cudzysłowami to zawsze będzie traktowana jako string!

    W innych miejscach zdania brzmią dość nieforemnie, jak choćby:

    Sprawdzamy czy zmienna a ma wartość integer

    Sformułowanie wartość integer jest dość niefortunne, bo raczej zmienna nie tyle ma taką wartość, co może być integerem – czyli liczbą całkowitą.

  • W kursie pokrótce tłumaczony jest hoisting zmiennych. Pada tam sformułowanie, że wynoszona na górę jest jedynie deklaracja zmiennej, nie zaś – nadanie wartości. Jako równoznaczny z hoistingiem podany jest ten przykład kodu:

    console.log(a)
    var a;
    a = 1;

    Problem w tym, że gdyby hoisting działał w taki sposób, to otrzymalibyśmy w tym wypadku ReferenceError, ponieważ zmienna a nie byłaby dostępna w czasie wywołania console.log. W przypadku hoistingu deklaracje zmiennych są wynoszone na samą górę zasiegu. Zatem kod powinien wyglądać raczej tak:

    var a;
    console.log( a );
    a = 1;

    Wówczas jasno widać, skąd bierze się undefined w konsoli.

    W kursie zaznaczone jest także, że dla let i const hosting nie zachodzi (a przynajmniej nie wprost). To nieprawda. Hoisting jak najbardziej zachodzi, ale równocześnie pojawia się tzw. Temporal Dead Zone. Pomijanie tego mechanizmu w przypadku słów kluczowych let i const wydaje się zbytnim uproszczeniem.

  • Swoją drogą, dość dziwne jest to, że w kursie niemal w każdym wypadku są wykorzystywane jednoliterowe nazwy zmiennych. Nie jest to dobra praktyka – każda zmienna powinna mieć opisową nazwę.

  • Jeśli już jesteśmy przy zmiennych, przez niemal cały kurs jest wykorzystywane słowo kluczowe let, podczas gdy const jest jedynie pokrótce wspomniane (jako zmienna, która jest stałą). To też nie jest do końca zgodne z ogólnie przyjętymi dobrymi praktykami. Przyjęło się, że const jest używane zawsze wtedy, gdy nie zmienia się przypisanie do danej zmiennej.

  • Jeśli mówimy już o zasięgu zmiennych, to warto zauważyć, że brakuje opisu funkcyjnego zasięgu zmiennych, a mimo to zagadnienie to pojawia się w zadaniach.

  • Bardzo pobieżnie opisane są także różnice między funkcjami anonimowymi a deklaracjami funkcji. Warto tutaj wspomnieć choćby o tym, że w przypadku funkcji również występuje hoisting i podczas, gdy deklaracje funkcji są wynoszone na samą górę w całości, tak w przypadku funkcji anonimowych przypisanych do zmiennych obowiązują te same zasady, co w przypadku zmiennych. A to ma oczywiście swoje implikacje (np. funkcji strzałkowej de facto nie sposob użyć przed jej deklaracją, podczas gdy deklaracje funkcji można wrzucać pod głównym flow aplikacji i ich wywołania będą działać).

  • Jeszcze pobieżniej potraktowano standard ES, który sprowadzono do ES5 i ES6. Tylko że od ES6 minęło już 5 lat, w ciągu których pojawiło się pięć kolejnych wersji standardu. I wersje te wprowadzały często spore zmiany, jak choćby async/await czy asynchroniczne generatory.

  • W kursie pokazana jest obsługa zdarzeń przy pomocy własności on*. Co prawda jest to sposób jak najbardziej działający, ale – dający o wiele mniej możliwości niż standardowe addEventListener. Osobiście uważam, że w nowych kursach zdarzenia powinno się wprowadzać właśnie przy pomocy addEventListener, jedynie wspominając o możliwości wykorzystania własności on*.

    Brakuje także jakiegokolwiek wprowadzenia do przepływu zdarzeń, bąbelkowania i przechwytywania. tego typu rzeczy mimo wszystko są fundamentalne do zrozumienia, jak faktycznie działają zdarzenia w DOM.

  • W module poświęconym stringom pada stwierdzenie, że string w JavaScript to obiekt. To nie jest prawda. String w JS-ie jest typem prostym. Natomiast faktycznie, istnieje coś takiego jak String, która to klasa posiada odpowiednie metody do pracy ze stringami. I tak, da się wywołać metody ze Stringa z poziomu stringa:

    'a'.charAt( 0 );

    Niemniej dochodzi tutaj do operacji, którą można prosto nazwać „opakowaniem” typu prostego w obiekt. JS tworzy w tle nowy obiekt String i pozwala działać przy jego pomocy na zwykłym stringu. Niemniej obiekt ten jest „ulotny” i zostaje usunięty w momencie, gdy kończymy wykonywać operacje na danym ciągu.

  • W module poświęconym datom znaleźć można następujący przykład:

    let d = new Date('2019-07-21 09:23:45');

    Przykład ten jednak nie działa w Safari, które wyrzuca błąd, że podana data jest niepoprawna. Jak zaznacza MDN, przeglądarki mają różne wsparcie dla formatów daty. Najpewniejszy jest format ISO-8601, zatem:

    let d = new Date('2019-07-21T09:23:45');

    Moim zdaniem o wiele lepiej jest wywoływać konstruktor Date z poszczególnymi parametrami – wówczas mamy pewność, że otrzymamy odpowiednią datę:

    let d = new Date( 2019, 6, 21, 9, 23, 45 );
  • Z kolei w module poświęconym operacjom na tablicach pokazana została tylko jedna metoda – forEach. Równocześnie pokazano, jak wykorzystać ją jako zastępstwo dla map:

    values.forEach(function(v){
    	newValues.push(v * 2);
    });

    Ten fragment kodu powinien stosować właśnie wspomniane map:

    const newValues = values.map( value => value * 2 );

    Operacje na tablicach są jednymi z podstawowych operacji, z jakimi na co dzień się styka w JS-ie. I wypadałoby poruszyć przynajmniej wszystkie najpopularniejsze (forEach, map, filter, reduce).

  • Ukończenie kursu zajęło mi… 41 minut. Kurs ten kosztuje normalnie 79 zł (ja go dostałem za ok. 16 zł, w czasie blackfriday’owego szaleństwa) – a więc o 10 zł więcej niż kurs Samuraja. Podczas gdy z Codengą spędziłem niecałą godzinę, kurs Samuraja zawiera 37 godzin materiałów. Nawet jeśli założymy, ze ukończyłem kurs Codengi szybciej niż projektowany uczeń, to wciąż różnica jest porażająca. Zwłaszcza, ze Codenga – jeśli wierzyć suwakowi na stronie kursu – zakłada koniec nauki w 4 dni, jeśli będziemy uczyć się po 90 minut dziennie. To daje 360 minut, a więc 6 godzin (chociaż osobiście raczej bym obstawiał 2 godziny) – o 31 godzin mniej, przy wyższej cenie.

    A nie oszukujmy się: tutaj materiału jest bardzo mało i jest potraktowany mocno po łebkach. Samuraj swoje za uszami ma, ale wyczerpywania tematu (czasami aż za) mu odmówić nie można.

Trudno mi ocenić kurs, który jest raczej zbiorem prostych ćwiczeń z kilkoma dodatkowymi informacjami teoretycznymi. Rozumiem, jaki był zamysł, ale równocześnie mam wrażenie, że mocno ucierpiała na tym jakość materiałów. Teorii jest za mało, jest potraktowana po macoszemu, a same ćwiczenia wydają się za łatwe – nie zmuszają do samodzielnego myślenia, a po prostu do zapamiętywania kodu na wyrywki. Jak to się mówi, pomysł dobry, tylko wykonanie kijowe.

2 myśli w temacie “Kurs JavaScript nabierz wprawy od Codengi”

  1. Cześć! Zgadzam się, że mówienie wprost, że hoisting nie zachodzi dla let i const to jest uproszczenie. Zastanawiam się tylko, czy wprowadzanie Temporal Dead Zone w podstawowym kursie JS nie jest zbytnim komplikowaniem i zaciemnianiem obrazu. Powiedziałbym nawet, że w początkującym kursie wprowadzałbym „var” później. Przy omawianiu funkcji albo zasięgów, a i tak nie spędzałbym na nim za dużo czasu.

    Podzielisz się Twoją opinią na ten temat?

    Dzięki

    1. Hej. Osobiście chyba też zacząłbym od wprowadzenia let i const, a var wyrzucił może nawet do dodatkowego materiału. Prawdopodobnie podobnie zrobiłbym z TDZ, bo jednak sam hoisting prędzej czy później musiałby się pojawić (bo podlegają mu także funkcje).

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.