Portfolio - będę wdzięczny za konstruktywną krytykę (plz don't eat me)

pytanie zadane 19 lutego 2018 w Nasze projekty przez Scypyon Gaduła (3,450 p.)

http://wmichalowski.pl/

Na starcie powiem, że portfolio nie jest skończone - dodam jeszcze tam dział "my projects", który zajmie drugie tyle strony, prosiłbym abyście napisali co waszym zdaniem warto zmienić, co do poprawy, proszę o konstruktywną krytykę, jeżeli masz napisać coś w style "brakuje skilla, estetyka 0%" itp to proszę wstrzymaj swoje ego. Tak przy okazji dodam ,że szukam stażu jak frontednowiec.

PS. Te procenty to tymczasowe rozwiązanie.

7 odpowiedzi

odpowiedź 19 lutego 2018 przez Beginer Pasjonat (22,110 p.)

Kilka prostych uwag,:

1. Na tablecie wyświetla się prawidłowo, w obu orientacja na. To jest jej podstawowa zaleta, dalej jest trochę gorzej.

2. Na pierwszy rzut oka jest to strona: p.Niklaus Wirtth - a nie Wojciecha Michałowskiego. Jeśli zacząłeś od cytatu, nazwisko autora umieść poniźej, drobniejszą czcionką.

3. Twoje nazwisko jest zbyt drobną czcionką - w końcu to jest Twoja strona. Może przydałby się jakiś podtytuł. Zdjęcie (portret) jest również zbyt małe w stosunku do całości.

4. Niespójność językowa. Nie może być tak, że pewne fragmenty i zdania są po angielsku, całość jest po polsku. Trzeba to jakoś inaczej rozwiązać - choćby przez dwie oddzielne podstrony.

5. Nie podoba mi się zestawienie kolorów. Zaczynasz od czerni, zaraz potem jest przeskok do zupełnej bieli, a na końcu wielkie kolorowe zdjęcie, które zabija całość (jest zbyt duże, zbyt kolorowe).

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

2. Ciekawa uwaga, zmienię 3. to już bardziej kwestia gustu 4. racja 5. zmienię to w css, w sensie przyciemnie i zmienień styl 6. dzięki bardzo :D

odpowiedź 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)

Pierwsze co rzuciło mi się w oczy to cytat - mówi on o kursie internetowym, a Ty raczej chcesz być programistą niż nauczycielem/trenerem :)

Co do kodu:

funkcja full umiesczona w skrypcie mousehover.js, który podpięty jest do <head> - dlaczego to nie jest wyizolowane? Element DOM znajdziesz, bo funkcję odpalasz na zdarzeniach w HTMLu, ale gdybyś w tamtym miejscu chciał znaleźć coś w DOM, to powinieneś robić to po wystąpieniu zdarzenia załadowania się strony, albo przenieść to po prostu na koniec </body> - w przeciwnym razie DOM nie zdąży się załadować,
obsługę zdarzeń przenieś do JSa i wykorzystuj do tego EventListenery (temat wielokrotnei omawiany na tym forum),
dlaczego pod koniec <body> znowu tworzysz funkcję full - która nadpisuje tą z <head>, bo obie są metodami obiektu window?,

      if (isExpanded === "false") {
        document.querySelector(".page-header").classList.add("nav-opened");
        hamburger.setAttribute("aria-expanded", "true");
      } else {
        document.querySelector(".page-header").classList.remove("nav-opened");
        hamburger.setAttribute("aria-expanded", "false");
      }

Na pierwszy rzut oka, to można skrócić do 2 linijek kodu:

document.querySelector(".page-header").classList.toggle("nav-opened");
hamburger.setAttribute("aria-expanded", !isExpanded);

ogólnie kod JavaScript nie jest wyizolowany

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

Nie jest wyizolowane, ponieważ nie mam takiej wiedzy, aby zrobić to tak dokładnie, cały czas uczę się JS i na pewno jeszcze raz przewertuje to portfolio, dzięki bardzo, nie sądziłem ,że ktoś prześledzi aż tak dokładnie to portfolio :D

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

a tak przy okazji, myślisz że jest szansa na dostanie stażu z takim portfolio?

komentarz 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)

Moim zdaniem to za mało. Strona jest zbyt prosta i nie jest dynamiczna. Zależy, czy będziesz aplikować do firmy, gdzie tworzy się głównie strony internetowe (patrz: wizytówki itp.), czy aplikacje internetowe. W tych drugich bardzo często stosuje się frameworki i są to bardziej rozbudowane projekty niż jeden plik HTML, CSS i JS :)

Co do izolacji, poczytaj o modułach i prywatnym/publicznym dostępie do danych w JS:

https://tutorials.comandeer.pl/js-beauty.html#namespaces

http://2ality.com/2011/04/modules-and-namespaces-in-javascript.html

https://eloquentjavascript.net/10_modules.html

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

Czyli, javascript i jeszcze raz javascript, widzę comandeer - czyli ciekawy artykuł, dzięki jeszcze raz :)

odpowiedź 19 lutego 2018 przez tirith Mądrala (5,940 p.)

Popracuj nad stopką. Cała tam zawarta treść się zlewa a jest tam ważna informacja KONTAKT.

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

zlewa? możesz dokładniej?

komentarz 19 lutego 2018 przez tirith Mądrala (5,940 p.)

W stopce masz dwie sekcje. Wszystkie prawa zastrzeżone i twój kontakt, A na pierwszy rzut oka to wygląda jakby był to jeden element.

Dałbym pomiędzy większy odstęp przynajmniej.

1	komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.) Racja. Już poprawiam.

odpowiedź 19 lutego 2018 przez pietia213 Dyskutant (8,110 p.)

Fajniutka stronka.
Problem tylko z sekcją kontakt gdyż zlewa się z twoimi dokonaniami.
Jeszcze bym przetłumaczył słowa Niklausa na polski język tak dla niekumatych czyli dla mnie między innymi, chociaż Mirosław Zelent nasz mentor powtarza co jakiś czas, w swoich filmach dla nas.
Te procenty, bajka, świetny pomysł.
Tylko ta sekcja "kontakt" taka jakby licha czyli mała, poniżej więcej podpowiedzi.

2	komentarz 19 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.) Te procenty, bajka, świetny pomysł. Hmm nie powiedziałbym.. a czym jest dla Ciebie np. znajomość JS na poziomie 50%?

1	komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.) Znaczy precenty to niezbyt dobry pomysł, ponieważ moi znajomi programiści z 10letnim stażem nawet w 40% nie znają języka, paski ładowania zostawię ale te procenty zamienie na "dobry" "podstawowy"

odpowiedź 19 lutego 2018 przez Daniel90 Pasjonat (17,970 p.)

Daj jakieś inne tło do tych % bo trochę męczy oczy. Czemu mieszasz angielski z polskim?

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

Hmmm, każdy to mówi, zmienię całą na polski w takim razie

komentarz 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)

zmienię całą na polski w takim razie

Kod powinien być pisany w języku angielskim. Zwróć uwagę na to, że każde API, nazwa metody, czy konstruktora, które masz już dostępne w JavaScript (i nie tylko) są napisane w języku angielskim. Więc nie będzie to wyglądać spójnie, jeśli Twój autorski kod będzie po polsku, a reszta w postaci słówek kluczowych języka, nazw pól i metod dostępnych w bibliotece, czy frameworku będziesz mieć po angielsku. Podczas pracy w zespole kod będziesz pisać po angielsku, bo nigdy nie wiesz czy nie trafisz do zespołu międzynarodowego, a język angielski jest po prostu domyślnym językiem programowania - zatem zacznij się do tego przyzwyczajać :)

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

Czyli mówisz żeby całą stronę w ang zrobić? Znam ang perfect

komentarz 19 lutego 2018 przez Daniel90 Pasjonat (17,970 p.)

A może w 2 językach do wyboru? Na górze flaga PL i UK do wyboru i już masz kolejny "skill" ;)

komentarz 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)

@Scypyon,
miałem na myśli język pisania kodu, a nie język treści na stronie.

komentarz 20 lutego 2018 przez Scypyon Gaduła (3,450 p.)

@Daniel90, to nie jest zły pomysł :D, wręcz świetny

komentarz 20 lutego 2018 przez Scypyon Gaduła (3,450 p.)

@jsholic wiem wiem, zajarzyłem dopiero po wstawieniu odpowiedzi ;d

odpowiedź 19 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Moim zdaniem zupełnie niepotrzebnie mieszasz jQuery i vanillaJS. Osobiście uważam, że szczególnie portfolio lepsze byłoby w czystym JS, ale to już kwestia wyboru.

Dlaczego jednak najpierw używasz jQuery do obsługi zdarzeń "click", a potem robisz addEventListener? Zdecyduj się lepiej na jedno rozwiązanie w całym projekcie. Skoro masz już zaciągnięte jQuery to z niego korzystaj, nie próbuj na siłę łączyć jQuery i vanillaJS bo to tylko robi bałagan.

Piszesz o JS na poziomie 25%... a co to wg Ciebie oznacza? Wg mnie nie warto robić takie procenty. Dla jednego 25% to będzie umiejętność wklejenia gotowców w jQuery i machnięcie sliderka, a dla kogoś innego to będzie już swobodne poruszanie się po podstawach ES6,Promise itd. To bardzo subiektywna kwestia więc może lepiej np. opisać dokładniej jakie technologie i jakie elementy używałeś w swoich projektach? Na przykład napisać o umiejętności obsługi DOM - pobieranie referencji, obsługa zdarzeń itp., umiejętność wykonania walidacji danych z inputów i obsługi formularzy z użyciem Ajax i JSON, znajomość podstaw Promise, itd. To wg mnie znacznie lepiej wskaże faktyczną wiedzę.

Kod JS wydziel do osobnego pliku, nie łącz HTML z JS, i najlepiej JS ładuj dopiero przed zamknięciem body.

Unikaj stylowania inline w HTML, np. clear:both dla div itp. Od tego są CSS.

"console.log(isExpanded);" co to robi w kodzie produkcyjnym :)? Staraj się usuwać takie rzeczy jeśli nie są one faktycznie potrzebne.

"onmouseover="full(this);" i jeszcze widzę trzecia opcja z podpinaniem zdarzeń :) Tej się pozbądź... wybierz albo jQuery albo addEventListener.

Robisz kilka oddzielnych <script> i dość mocno zaśmiecasz globalną przestrzeń nazw. Poczytaj np. o IIFE aby stworzyć wydzielony zasięg zmiennych.

Generalnie stronka spoko wizualnie, acz troszkę mi czegoś brakuje w tym górnym elemencie z Twoim nazwiskiem zdjęciem... nie wiem sam, ale jakoś "mi to nie leży"... ale ja grafikiem nie jestem więc to tylko moje subiektywne odczucie.

Polecam jeszcze machnąć np. jakiś prosty formularz kontaktowy może z Ajax. Pokażesz w ten sposób, że wiesz choćby coś o podstawach back-endu (do takiego formsa nie potrzeba w sumie nic wielkiego) i jednocześnie że znasz Ajax i umiesz użyć tego w praktyce.

komentarz 19 lutego 2018 przez Scypyon Gaduła (3,450 p.)

Co do % napisałem ,że to tymczasowe, też mnie to gryzie, formularz kontaktowy - dobry pomysł, a co do JS to jest taki bałagan , ponieważ w tym temacie jeszcze raczkuje, ciekawe uwagi, dziękuje za poświęcony czas, na pewno za 2 tygodnie wrzucę poprawione :)

odpowiedź 19 lutego 2018 przez Maniek Bywalec (2,170 p.)

Nie będę powtarzać słów Daniel90, tirith i Beginer, więc dodam swoje uwagi:

przyklej menu do okna (position: fixed);
zmieniaj obramowanie w menu od pozycji, w jakiej jest użytkownik;
dodaj automatyczne pojawianie się paska procentowego po przewinięciu.

komentarz 19 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.)

przyklej menu do okna (position: fixed);

Nie do końca bym to traktował jako błąd. Owszem, przyjęło się najczęściej, że menu ma być stale dostępne ale nie jest tak na wszystkich stronach. Wg mnie jest to kwestia ogólnego layoutu i założonego sposobu poruszania się po stronie. Stały dostęp do menu to wg mnie głównie ważny element aplikacji, ale na stronach wizytówkach można nie trzymać się tej reguły.