Strona na JavaScript - prośba o ocenę kodu

0

Witam.
Na wstępie chciałbym się z Wami gorąco przywitać. Jestem (moim zdaniem) wciąż laikiem w sferze programowania. Swoją przygodę zacząłem dopiero na uczelni z językami Microsoftu. Obecnie chciałbym stale kształcić się w kierunku front-end'u.

Na pierwszy rzut poszedł JavaScript. Postawiłem na nim stronę, i chciałbym w tym miejscu zaznaczyć, że CSS robiony był z doskoku, czyli jeżeli rozwiązanie działało, to używałem go. Gdy skończę naukę JavaScript (oczywiście nie na stałe) chcę zacząć uczyć się HTML + CSS. To wszystko na przełomie paru dni, może kilku tygodni.

Douczam się, ponieważ, jak zaznaczyłem wyżej, uważam, że umiem za mało, żeby startować w pracy w firmie.

Po paru słowach wstępu (mam nadzieję, że nie zanudziłem), chciałbym przejść do meritum.

http://dioen.o6.pl/

Pod powyższym adresem znajduje się strona o której mowa. Na życzenie kod źródłowy wrzucę na GIT'a, jeżeli będzie to dla Was wygodniejsze.

Proszę na tę chwilę nie oceniać CSS, ponieważ tak, jak pisałem, nie uczyłem się go jeszcze na tyle, żeby prosić o ocenę.

Co na tę chwilę jest do poprawienia/przerobienia:

  • animacje slajdera,
  • poprawienie CSS'a,
  • zmiana ścieżek plików na ścieżki serwerowe (obecnie wszystko robiłem na laptopie, dlatego takie rozwiązania np. pliku JSON i ikon),
  • generowanie meta w head

Jeżeli przypomnę sobie co jeszcze mam w planach, dopiszę do listy.

Przed rozpoczęciem nauki CSS i HTML chciałbym jeszcze nauczyć się tematów z LocalStorage, SessionStorage i Cookies.

Jeżeli mogę prosić, proszę o szczególną uwagę odnośnie Promises, czy dobrze je rozumiem, czy użycie było wskazane i poprawne, z góry serdecznie dziękuję!

Na tę chwilę to chyba wszystko. Z góry dziękuję za pomoc i życzę szybkiego rozwiązywania problemów z kodem ;)

1

Tak na szybko:

  • pisz w ES6+ - to aktualny standard,
  • zamiast jQuery użyj do ajaksa Fetch API lub czegoś w stylu Axios,
  • podepnij jakieś narzędzie sprawdzające jakość kodu - ESLint / JSLint, JSHint (polecam to pierwsze),
  • błędy w konsoli,
  • opakowywanie synchronicznego kodu w promisy jest całkowicie bez sensu,
  • nazwy funkcji są mylące ( _checkIfContentProperly ??), zbyt ogólne: _eventListeners dodaje listenera do konkretnego elementu??
  • niepotrzebnie operujesz na zmiennych spoza funkcji - operuj na parametrach,
  • raz generujesz stringa a raz tworzysz elementy html za pomocą JSa - używaj tamplate strings,
  • nie nadawj właściwości CSS w JSie - manipuluj klasami, wygląd opisuj w plikach CSS,
  • animacje robi sie w CSS,
  • po co te underscory w nazwach funkcji?
  • raz function expression a raz function statement - po co?
  • wszystko w jednym module - podziel to pod względem funkcjonalności / podtron itp
  • nie uzywaj imperatywnych pętli for i for..of do tablic - używaj Array.prototype.map,
  • break po return - bez sensu, return zawsze wychodzi z funkcji,
  • zupełnie niepotrzebne pole data w JSONie, okalanie wszystkiego w jedno pole nic Ci nie daje, tylko wydłuża kod,
  • ogólnie kod strasznie zagmatwany ze słabym podziałem odpowiedzialności, nie ma tragedii ale jeszcze dużo przed Tobą.
0

Dziękuję bardzo za odpowiedź! Właśnie o to mi chodziło :)

Na szybko tylko napiszę odnośnie obietnic. Użyłem ich, ponieważ (z moją wiedzą) miałem wybór: zrobić to z setTimeout() albo z użyciem Promises. Pierwsze rozwiązanie o ile działało, odpadło, dlaczego? Ponieważ funkcja getData()</code> jest uzależniona od serwera zewnętrznego i jego czasu reakcji. Promise w tym wypadku zdało egzamin i wykonuje się w czasie ustalonym przez serwer, czyli czasie idealnym dla aplikacji. Próbowałem również "zajechać" rozwiązanie z użyciem Promise, jednak nie udało mi się i zwracane dane (o ile serwer nie zwrócił błędu) były zawsze dobre, a nie jak w przypadku setTimeout(), często <code>undefined.

Jeżeli się mylę, proszę o sprostowanie.

Wieczorem postaram się szerzej opisać dlaczego tak, a nie inaczej pisałem rozwiązania, jednak głównie zależy mi na pełnym zrozumieniu Promise na tę chwilę :)

1

to co wykonałeś można zrobić w trzech divach i max kilkudziesięciu kilobajtach które zajmują w większości obrazki
a ty podpiąłeś skrypty na 150kb, jquery, a nawet górne menu nie jest przyklejane przy przewijaniu, nie ma RWD
ja bym se to przemyślał jeszcze dude;

0

Wiem. Zrobiłem inaczej, wedle swojego założenia: nauka.

I na przyszłość prosiłbym bez takich komentarzy. Czysta bezsensowna krytyka, która praktycznie nic nie wnosi do tematu. Jedyne co ma na celu to pokazanie jakim ktoś jest "pro". Nienawidzę narcyzów, wybaczcie i bez urazy ;)

Przyklejanego menu nie ma i prawdopodobnie NIE BĘDZIE. Myślę nad tym rozwiązaniem cały czas, jednak nie jestem przekonany do niego. Choć jest dość użyteczne. RWD, patrz pierwszy post. Napisane wszystko dlaczego nie ma.

1

miałem ci właśnie podać kilka stronek z ciekawym stuffem js do wdrożenia, ale jak moja "krytyka" rani twą delikatną psychę to se podaruję
zapewne na rozmowach kwalifikacyjnych na pewno nie będą krytykować tylko głaskać po głowie...
;)

0

Źle mnie zrozumiałeś. Założyłem ten temat mając na celu otrzymać krytykę. I takową otrzymałem, w drugim poście. Dostrzegasz różnicę? Jest to krytyka, z której można naprawdę wiele wyciągnąć. Takiej krytyki oczekuję i jest dla mnie bardzo cenna. Twoja krytyka była na zasadzie "napisałeś g**no, jesteś leszczem". Nie obraża mnie to, po prostu olewam takie coś. Nie mam nic do wyciągnięcia z tego ponieważ wszystko co napisałeś mija się z celem. Wytłumaczenie jest zawarte w pierwszym poście.

Nie chciałem Cię urazić, jeżeli jesteś w stanie skrytykować mnie konstruktywnie, byłbym bardzo wdzięczny. Pamiętaj, "porażki to szczeble sukcesu". I nie tylko w programowaniu idę tą drogą.

2
Maciej Cąderek napisał(a):
  • animacje robi sie w CSS

Bzdura. Powiedz to ludziom, którzy na co dzień używają GSAP, react-motion i inne tego typu rozwiązania. Pracuję aktualnie w projekcie, w którym jest tylko JS od ponad roku (markup, style, animacje - wszystko w JS-ie) i nie zamierzamy wracać do CSSa. Wszystkie problemy, które dotychczas występowały w CSS można rozwiązać w JS. Oczywiście nadal do małych pierdółek CSS jest pewnie łatwiejszy i szybszy w użyciu, ale w innej sytuacji - po co się męczyć?

0

Strona nie działa z wyłączonym JavaScript.

0

Naprawdę...? ...

2
dioen napisał(a):

Źle mnie zrozumiałeś. Założyłem ten temat mając na celu otrzymać krytykę. I takową otrzymałem, w drugim poście. Dostrzegasz różnicę? Jest to krytyka, z której można naprawdę wiele wyciągnąć. Takiej krytyki oczekuję i jest dla mnie bardzo cenna. Twoja krytyka była na zasadzie "napisałeś g**no, jesteś leszczem". Nie obraża mnie to, po prostu olewam takie coś. Nie mam nic do wyciągnięcia z tego ponieważ wszystko co napisałeś mija się z celem. Wytłumaczenie jest zawarte w pierwszym poście.

Nie chciałem Cię urazić, jeżeli jesteś w stanie skrytykować mnie konstruktywnie, byłbym bardzo wdzięczny. Pamiętaj, "porażki to szczeble sukcesu". I nie tylko w programowaniu idę tą drogą.

po prostu siedzisz jeszcze w złotym jajku i nie pracowałeś komercyjnie, w normalnej, dorosłej pracy masz krytykę (a w zasadzie uwagi) czasem i dosadną masz terminy i często narzucone technologie
a jak będziesz fochał, bo ktoś ci napisze, że strona waży kilkukrotnie więcej niż mogłaby to raczej ciężko cię widzę w tym zawodzie, tym bardziej we froncie gdzie klienci często zmieniają zdanie co 5 minut i trzeba się dostosować

0

Wiem, jestem świadomy. Byłem w firmie krótki czas i widziałem jak to wygląda, ale to było wybitnie dosadne, co tam się działo ;) Dzięki za normalne rozwiązanie sprawy ;) do wieczora, bo teraz mam trochę na głowie. Postaram się coś dopisać do tematu, żeby rozwiać wątpliwości.

Maciej Cąderek:
Nazewnictwo zaraz będę poprawiał. Założeniem _eventListeners było trzymanie wszystkich listenerów w jednym miejscu, ale nie zdało egzaminu, także do przerobienia.
Podkreślenia używałem do zmiennych lokalnych, tak mi zostało z .NET'u, ale to również do zmiany, bo z tego co zauważyłem, w JSie nikt tego nie robi.

Używanie raz element html, a raz string było celowe, po prostu nauka ;)

Postaram się pozmieniać co mogę wedle Waszych wytycznych. Jak się z tym uporam poproszę o wypowiedzenie się. Dziękuję za pomoc.

0

Mam szybkie pytanie jeszcze. Co polecacie do nawigacji? Historic API wystarczy, czy jest lepsze rozwiązanie?

0

Hej dioen,

przeczytałem pobieżnie ten wątek i chcę dorzucić swoje 3 grosze.
Swoją drogą, to mój pierwszy post na tym forum, witam wszystkich :)

Odnoniosłem wrażenie, że jesteś ambitną osobą i chcesz się uczyć najlepszy i najnowszych technologii. Widzę też, że chcesz szybko zdobyć pracę w zawodzie. Wszystko fajnie - możesz uczyć się dogłębnie działania LocalStorage, SessionStorage, Cookies, HistoricAPI, ES6 etc.

Rzeczywistość niestety jest taka, że przy pierwszej pracy najprawdopodobniej nie będziesz miał okazji w większości ich wykorzystać. Ba, twój pierwszy pracodawca pewnie nie będzie wiedział o ich istnieinu. Jest to oczywiście moja opinia i mówię z własnego doświadczenia.

Rzeczy które moim zdaniem najbardziej Ci się przydadzą w pierwszej pracy(rozumiem, że startujesz na frontendowca):

  • oczywista oczywistość html. Na rozmowie mogą się zapytać czym się różni XHTML od zwykłego. Co wprowadza HTML5
  • js. Koniecznie zrozum ES5 zanim zaczniesz używać ES6. Ważne żebyś wiedział jak manipulować elementami DOM z poziomu jQuery, jak się podpina plugin do jQuery(i nie tylko) oraz jak wykonywać zawołania AJAX za pomocą... jQuery :) Prawdopodobnie dogłębna wiedza JS nie będzie wymagana ale dobrze go znać żeby nie wyrywać sobie potem włosów z głowy w trudnych sytuacjach :)
  • css. Zrozum podstawy, działanie 'media queries' oraz prefixów. Możliwe, że będziesz spędzał więcej czasu w CSS'ach niż JS'ach. Warto więc poznać ten język dobrze.
  • dobra znajomość Bootstrapa(ver 3). Będziesz spędzał 80(jak nie więcej) procent czasu przy projektach które go używają. Postaraj się postawić na tym stronę lub dwie. Zobacz jak są zbudowane templatki - spróbuj dostosować jedną pod siebie

Takie moje IMO bardziej życiowe rady

Jak Ci się posczęści i trafisz do startupu gdzie używa się Node.js oraz React/Vue/Angular 2 + ES6/Typescript to propsy dla ciebie :)

Jak coś pominąłem to daj znać. Jeśli chcesz więcej szczegółów lub masz pytania to zachęcam

0

Hej. Na wstępie chciałbym Ci podziękować za zainteresowanie tematem a także za cenne rady. Oczywiście z AJAX i jQuery spotkałem się w wielu przykładach, często ludzie podają właśnie takie rozwiązania, i spokojnie, jest to kolejnym punktem na drodze nauki :) ES5 szczerze powiedziawszy pominąłem, ale na pewno poczytam o nim. Stronia niedługo będzie na "wstępnym" ukończeniu, a wtedy chcę zabrać się stricte za HTML i CSS. Angular 2... Miałem do niego podejście, ale zdecydowałem się nie brnąć dalej nie znając podstaw JavaScript. Cóż, uważam, że skoro Angular jest frameworkiem, który został stworzony na JavaScript, to lepiej najpierw zaprzyjaźnić się z rodzicem ;)

Co do starszych technologii i ich użyteczności. Jako, że IT, a szczególnie sektor programistyczny bardzo szybko się zmienia, uważam, że lepiej znać nowe technologie, bo nawet w pracy, w której używa się starych technologii może nadejść taka chwila, że szef/przełożony powie, że "piszemy nowy projekt, od podstaw. Masz umieć "tę" technologię do niego". Na kiedy? "Standardowo, na wczoraj". I moim zdaniem łatwiej jest sobie przypomnieć zasady funkcjonowania czegoś, aniżeli uczyć się od podstaw ;)

Pozwolę sobie przytoczyć cytat z innego tematu z działu webmastering (nie będzie on kropka w kropkę jak oryginał): "Możesz uczyć się ES6, a jak skończysz będzie już ES7, albo ES9".

Myślę, że to dobrze odnosi się do sytuacji branży IT :)

Z ciekawości, mogę zapytać w jakim mieście pracujesz? I w ilu firmach udało Ci się do tej pory zagościć? Odpowiedź może być oczywiście prywatna. Jak Ci wygodniej.

2

zastanów się lepiej czy używasz jQuery czy nie. Bo teraz tylko w jednej linijce używasz var image = $('#newsImage'); co oznacza, że ładujesz całe jQuery, żeby użyć tego w jednej linijce, bez sensu trochę.

var body = document.getElementsByTagName("body")[0];

to możesz zamienić na:

var body = document.body;

poza tym sam sposób tworzenia elementów to trochę jak z armaty na muchę. Twoja strona jest statyczna i mało na niej contentu - co oznacza, że równie dobrze te wszystkie kody możesz umieścić w HTMLu, jak chcesz, żeby było dynamicznie to w ukrytych divach (z display ustawionym na none w CSS), i za pomocą JavaScriptu tylko zmieniać właściwość display na block i twój skrypt JS skurczy się raptem do kilku linijek.

Jeszcze lepiej - w ogóle wywal skrypt JS i zrób kilka podstron w czystym HTML. W twoim przypadku będzie to najlepsza opcja, bo to co robisz teraz to na siłę wrzucanie małej prostej strony w paradygmat AJAXowo-dynamiczny. Nie dość, że pogorszyłeś swoją stronę (bo w czystym HTML używając elementów < a> byłaby o wiele lepsza w uzytkowaniu - teraz np. nie da się poruszać za pomocą klawisza tab między linkami - możesz to naprawić bawiąc się z właściwością z-index, ale w sumie to sztuka dla sztuki), to jeszcze wygenerowałeś sobie dodatkowe problemy, które zmuszony byłeś rozwiązać za pomocą kilkuset linijek kodu (problemy z tworzeniem elementów HTML, problemy z historią etc. -- to wszystko owszem rozwiązałeś w JS, ale rozwiązałeś problem, który sobie najpierw sztucznie wytworzyłeś.

Podsumowując - jeśli wziąć to jako eksperyment do nauki JS czy róznego rodzaju API (np. History API) to spoko, nauczyłeś się i to twoje. Ale patrząc z perspektywy praktycznej ta strona byłaby o wiele lepsza na czystym HTMLu.

W sensie - uważam, że czasem naprawdę warto się rozpisać, żeby poznać jakieś technologie, ale warto też potem złapać zmysł krytyczny i umieć wywalić własny kod, który okazuje się na końcu po prostu niepotrzebny (sam mnóstwo wywalam własnego kodu w ten sposób).

0

@LukeJL, serdecznie dziękuję za post! Idealnie zrozumiałeś ideę towarzyszącą tworzeniu projektu. Tak, właśnie na siłę chciałem stworzyć problemy, żeby potem mieć trudność w ich rozwiązaniu. Jestem naprawdę świadomy, że w życiu codziennym jest to bez sensu, jednak do nauki sprawdza się idealnie :) Strona będzie rozwijana, w tym zamyśle, w którym jest obecnie. Po prostu dojdą kolejne projekty, które będą realizować założenie, o którym wspomniałeś "załapać zmysł krytyczny". To już niedługo, tylko muszę wprowadzić jeszcze odrobinę zmian przy obecnym kodzie.

Chciałbym tylko zapytać, czy stwierdzenie, że strona jest statyczna tyczy się również ładowania filmików i podglądów projektów? Z góry dzięki za odpowiedź ;)

0

Nie ma sprawy dioen, to dla mnie przyjemność udzielać swojej opinii komuś kto znajduje się w podobnym położeniu co ja nie tak dawno temu :)

Mieszkam w Opolu gdzie niestety nie jest zbyt różowo jeśli chodzi o pracę w IT.
Od jakichś dwóch tygodni pracuję w drugiej firmie i powoli przekonuję się jaka jest mentalność (o)polskich pracodawców. Mało kto chce zaryzykować użycia nowej technologii "co jeśli będziemy potrzebowali plugin do x a go nie będzie" albo "co jeśli deweloperzy porzucą projekt" itd.

Jeśli chodzi o es6 i inne transpilowane języki to musisz liczyć się z tym, że nie każdy wie co to w ogóle jest npm(zakładając że macie inny backend niż node.js). Teraz wytłumacz takiemu programiście, że musi wpisać 5 komend w terminalu i 'zasyfić sobie komputer' jakimś oprogramowaniem tylko po to żeby okazjonalnie wprowadzić zmiany do twojego kodu.

Sam jestem fanem najnowszych technologii i używam ich kiedy tylko mogę. Staram się zwyczajnie Tobie pokazać inną stronę tego tematu po to żebyś nie poszedł do pracy z być może błędnym przekonaniem i nie został oblany wiadrem zimnej wody :)

Być może w Twoim mieście lub w firmie w której zaczniesz pracować będzie inaczej. Szczerze Ci tego życzę. Z chęcią też usłyszę doświadczenia innych osób w tym temacie - może nie jest aż tak źle jak mówię.

PS Najbardziej uniwersalną technologią którą myślę już większość firm używa jest GIT. Opanowanie gita da Ci ogromny plus u pracodawcy.

0

Byłem w startupie na krótki okres czasu i tam trzymanie technologii na najnowszym poziomie było. Jednak brakowało osoby, która by wsparła mniej doświadczonego. Przede mną jeszcze HTML i CSS, jak opanuję na w miarę użytecznym poziomie, będę szukał pracy. Mam do tego motywację ;)

Git, git, oj kochany git który przysporzył mi parę wpadek :D Niedługo chcę się z nim na stałe zaprzyjaźnić. Wiem, że to podstawa pracy w zespole ;) Dziękuję Ci za informacje i dziękuję wszystkim, którzy nie przeszli obok mojego tematu obojętnie. Projekcik będę sukcesywnie rozwijał wraz z przyrostem swoich umiejętności, ponieważ jak to na samej stronie jest, będę tam trzymał rzeczy związane z motywacją do działania w innych dziedzinach życia ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1