• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Portfolio - ocena

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+3 głosów
1,048 wizyt
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

+3 głosów
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

+1 głos
odpowiedź 15 czerwca 2017 przez Ivan Maniak (60,650 p.)

Błędy te same co w większości stron:

  • nawigacji nie da się otworzyć (dostępność)
  • kontrast
  • oferta i portfolio powinny być listami
  • strona waży 6.7 MB, a tak właściwie to 6 MB ważą 3 obrazki, które mają po 400x~1000px

Popatrz na oceny innych stron, a wyłapiesz większość błędów.

+1 głos
odpowiedź 15 czerwca 2017 przez imklau Nałogowiec (42,090 p.)
Ja jeszcze tylko dodam, że wchodząc do Ciebie na stronę do wygląda tak:

oo filmik w tle, fajnie
ooo i jeszcze ten znajomy efekt
no i jakieś literki się same piszą
o a na dole ikonka myszki na dodatek sobie lata

tak jak reszta uważam, że o połowę za dużo efektów, tym bardziej że to co opisałam to akurat wszystko na jednej stronie bez przewijania się dzieje ;)
+ jeszcze rozwijane menu do tej strony dochodzi ;)
+1 głos
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:

  1. 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.
  2. 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.
  3. 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 :) 

0 głosów
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
0 głosów
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 :)
0 głosów
odpowiedź 15 czerwca 2017 przez Ciapuch Obywatel (1,040 p.)
"Doradstwo" - serio? ;)
0 głosów
odpowiedź 15 czerwca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Wow. Jak to możliwe. Tworzę własne portfolio które ma bardzo zbieżne elementy :O
komentarz 15 czerwca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Z tą różnicą ze Twoja strona jest znacznie lepsza :D
komentarz 15 czerwca 2017 przez UltraSF Stary wyjadacz (11,740 p.)
8/10 :D

Podobne pytania

0 głosów
5 odpowiedzi 803 wizyt
pytanie zadane 6 grudnia 2017 w Nasze projekty przez Bakr Mądrala (6,850 p.)
0 głosów
2 odpowiedzi 509 wizyt
pytanie zadane 22 marca 2019 w Nasze projekty przez Dawid_Predecki Obywatel (1,610 p.)
0 głosów
5 odpowiedzi 731 wizyt
pytanie zadane 14 marca 2019 w Nasze projekty przez MasterOf Nowicjusz (200 p.)

93,190 zapytań

142,205 odpowiedzi

322,030 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2817p. - dia-Chann
  2. 2769p. - Łukasz Piwowar
  3. 2759p. - Łukasz Eckert
  4. 2738p. - CC PL
  5. 2704p. - Tomasz Bielak
  6. 2678p. - Łukasz Siedlecki
  7. 2666p. - rucin93
  8. 2485p. - Marcin Putra
  9. 2418p. - Michal Drewniak
  10. 2367p. - Adrian Wieprzkowicz
  11. 2317p. - Mikbac
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1628p. - Dominik Łempicki (kapitan)
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...