Portfolio - ocena

pytanie zadane 15 czerwca 2017 w Nasze projekty przez Bakr Mądrala (6,850 p.)

Witam,

Właśnie kończę swoje portfolio (http://bakr-test.esy.es/portfolio/). Bardzo proszę o konstruktywną krytykę ;)

8 odpowiedzi

odpowiedź 15 czerwca 2017 przez surfeliza Stary wyjadacz (11,260 p.)

Nie nawiązałbym z tobą żadnej współpracy patrząc na to portfolio. Klasycznie zacznijmy od wyłączenia js:

- jakieś video w tle, pomijając że z zielonym przyciskiem po prawej się nie komponuje to dostaje jeszcze na tym czarno-białym video święcący na niebiesko kursor. masakra

- ta myszka na video straciła swoją funkcjonalność i porusza się jakby miała zwracać na siebie całą uwagę - tylko po co.

- niewidoczne obrazki w ofercie (svg)

- sekcja doświadczenie: w pierwszym prostokącie kończysz kropką, w pozostałych nie - niedbalstwo wg. mnie

- sekcja umiejętności: znowu brak obrazków (svg)

- portfolio: zachowało swoją funkcjonalność, ale te białe napisy rażą na tych obrazkach

Z włączonym:

- nadal brzydki zielony hexan na interaktywnym tle

- nie rozumiem, czemu to menu jest schowane na deskopie

- swoją drogą wszystkie linki w atrybucie mają href="#" - przekierowują do sekcji, ale o tradycyjnych kotwicach to nie słyszałeś?

- jak już widzę te białe obrazki svg ładujące się to utwierdzam się w przekonaniu, że nie pasują/nie komponują się.

- swoją drogą naciśnij 2x tabulator i zobacz gdzie pojawia się twoje menu

- odstępy w tytułach sekcji (w stosunku do treści) są różne, psuje to odbiór

- zobacz co pokazuje ci konsola bo ja widzę [deprataction]

- jak już jesteśmy w konsoli to po przejściu na pierwszy link w portfolio zobacz co wtedy zwraca

- img bez alt

odpowiedź 15 czerwca 2017 przez Ivan Maniak (60,650 p.)

odpowiedź 15 czerwca 2017 przez imklau Nałogowiec (42,090 p.)

odpowiedź 15 czerwca 2017 przez Tomek Sochacki Ekspert (227,490 p.)

Szczerze mówiąc grafika nie jest moją mocną stroną, dlatego w tej kwestii i CSS się nie wypowiem, choć przyznam, że już wielokrotnie widywałem tą animację w tle i trochę chyba się już "przejadła".

Pierwsze na co patrzę analizując stronę/portfolio to kod JS, dlatego mogę dać Ci kilka wskazówek właśnie do JS:

Unikaj zmiennych globalnych, tymbardziej, jeśli korzystasz z różnego rodzaju bibliotek. Poczytaj o IIFE (natychmiastowe wyrażenia funkcyjne). Gdy z czasem dojdziesz do etapu stosowania modułów JS lub node to poznasz nieco więcej zasad związanych z zasięgiem zmiennych "globalnych", ale na razie na tym etapie nauki proponuję stosować IIFE.
Masz w kodzie wiele powtórzeń i wiele instrukcji, wykonujących bardzo podobny kod dla różnych elementów DOM. Proponuję pomyśleć o małej refaktoryzacji kodu, choć na początkowym etapie nauki nie jest to jakiś rażący błąd - DRY przyjdzie z czasem samo.
A teraz coś, co mnie dotknęło najmocniej:

  var exprFirstName = /[A-Z]{1}[a-zĂÂĂÂĂÂÄšÂÄšÂÄĹÄšÂÄšĹÄšĹş]{1,20}/g;
  var exprLastName = /[A-Z]{1}[a-zĂÂĂÂĂÂÄšÂÄšÂÄĹÄšÂÄšĹÄšĹş]{1,30}/g;
  var exprEmail = /[a-z]{1,}(.?)[a-z]{1,}\@[a-z]{1,}\.[a-z]{2,}/g;
  var exprMessage = /.{15,}/;

Fajnie, że nie ładujesz na siłę dużej biblioteki do prostej walidacji kilku pól formularza i próbujesz zmierzyć się z regexp, ale muszę zwrócić Ci tutaj uwagę na kilka kwestii:

Zakładasz, że firstName musi zaczynać się z wielkiej litery. Jest to błąd. Nie patrz na walidację tak, jakbyś oceniał kogoś pracę pisaną ręcznie. Zadaj sobie pytanie w jakim celu dokonujesz walidacji? Żeby sprawdzić poprawność ortograficzno-stylistyczną czy żeby z pewnym określonym prawdopodobieństwem zweryfikować poprawność danych?
Kolejna kwestia dotycząca imienia - dobierz właściwie zestaw dopuszczalnych znaków, np. obecny regexp nie przepuszcza imienia "Łukasz", które chyba powinno być poprawne :) Teoretycznie można więc dać wzorzec /[a-ząśężźćńół]/i ale zakładamy wtedy, że nie przepuścimy niektórych imion zagranicznych używających innych znaków diaktrycznych niż polskie. Czy jest to błąd? To zależy już od Ciebie i od konkretnej sytuacji.
W każdym regexp używasz flagi "g" i jednocześnie nie badasz granic ciągu znakowego. Przepuszczasz więc jako poprawne imię "{Adam". Proponuję rozważyć użycie granic "^" i "$", wtedy już bez flagi globalnej (nie mamy tu analizy multiline, więc "g" jest zbędne).
lastName analogicznie jak wyżej
email: zapomniałeś chyba o dopuszczeniu w adresie cyferek :) Na przykład odrzucasz adres "tomek@o2.pl" tak samo jak odrzucasz cyfry w nazwie użytkownika. Uzupełnij więc walidację o "\d".
W walidacji email masz zapis: "(.?)". Oznacza to wystąpienie dowolnego znaku (to oznacza kropka) zero lub jeden raz. Jeśli chcesz walidować istnienie dowolnego znaku to użyć sekwencji ucieszki "\.", no i po co ta grupa przechwytująca w tym wypadku? (wydaje mi się to zupełnie zbędne).
Email po raz kolejny - jeśli będziesz chciał tu dodać granice początku i końca ciągu to popraw wzorzec, aby dopuszczał np. kilkuczłonową nazwę usera i domeny, oddzielone kropką. Ponad to w e-mailach dopuszczalne są znaki specjalne, w tym często stosowane podkreślenie.

Na początek to tyle w kwestii JS :)

odpowiedź 15 czerwca 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)

Hej,

Nie linkuj do kilku fontów, tylko połącz to w jeden link.

Ogólnie mi się podoba, tylko ten motyw z latającymi liniami i kropkami w tle już trochę stał się oklepany.

komentarz 15 czerwca 2017 przez QizmoPL Stary wyjadacz (11,440 p.)

menu nie dziala

odpowiedź 15 czerwca 2017 przez dwadolary Gaduła (4,650 p.)

" Nie wiem, czy Konfucjusz lubił programować, ale jego słowa idealnie oddają moje podejście do tworzenia stron. "

No raczej nie lubił ;)

Słabo u mnie zachowują się obrazy w tle. Scroll nie jest płynny. Animacja tekstu w pierwszej sekcji trwa za długo. Przy umiejętnościach i w ofercie też trzeba czekać, aż to wszystko zacznie się animować. Responsywność byłaby w porządku, gdyby tła pasowały do kontenerów. Menu na telefonie powinno się zamknąć po kliknięciu w link.

Ogólnie za dużo bajerów i chaosu. Klasyczne podejście typu: czym więcej fajerwerków, tym lepiej. Popracowałbym nad minimalizmem :)