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

Roast ME! Czyli code review Portfolio

+1 głos
278 wizyt
pytanie zadane 29 listopada 2018 w JavaScript, jQuery, AJAX przez Jestem_Szaleńcem Początkujący (460 p.)
edycja 29 listopada 2018 przez Jestem_Szaleńcem

Witam!

Chciałbym zwrócić się z prośbą o code review oraz UI, UX review mojego portfolio oraz jeśli ktoś ma chęć o review projektu TO-DO list który znajdziecie w portfolio. Do drugiego projektu Clicker nawet nie ma co zaglądać ponieważ pisałem go bardzo dawno temu i właściwie była to moja pierwsza przygoda z programowaniem a refaktoryzacji ten kod nie widział. Proszę o wytknięcie mi błędów i złych praktyk i o wyjaśnienia z tym związane. Komentarze na temat designu również mile widziane bo w tym temacie powiedzmy że nie mam żadnej prawie wiedzy i robie to na czuja. 

Mam nadzieje że nie będzie aż tak źle laugh

Tutaj link do repozytorium 
https://github.com/KubaWysocki/Portfolio

I link do podglądu 
https://kubawysocki.github.io/Portfolio/

A teraz jeszcze jedna rzecz która mnie irytuje. Na wejsciu na strone jest animacja która oddala background-image. I przy tym powstaje taki efekt trzęsienia się obrazu. Jeśli ktoś ma pomysł jak to rozwiązać to mógłby sie nim podzielić wink

Zachęcam również do zobaczenia jej z różnych urządzeń.

Zaznaczam też że nie wiem jak to wygląda na monitorach o bardzo dużej rozdzielczości np 4k.

3 odpowiedzi

+5 głosów
odpowiedź 29 listopada 2018 przez Comandeer Mentor (452,560 p.)
wybrane 30 listopada 2018 przez Jestem_Szaleńcem
 
Najlepsza

Recka w formacie PDF. Niestety, edytor na forum nie ogarnia formatowania kodu..

1
komentarz 29 listopada 2018 przez Jestem_Szaleńcem Początkujący (460 p.)

WoW! Ekstra review!!! Wielkie dzięki laugh

Część już odrazu poprawiłem. O części na pewno będę pamiętał przy kolejnych projektach na przykład o hierarchii nagłówków (w tym projekcie chyba nie chce mi sie już tego zmieniać, myślałem o nich bardziej jak o wielkości tekstu a tak to trzeba by dodać dużo styli frown)

Mam jeszcze pare pytań żeby na pewno wszystko dobrze zrozumieć:

  1. Nie wiem o co w ogóle chodzi w punkcie "focus z klawiatury niemal nie widoczny"
  2. Punkty nawigacyjne powinny być po polsku pewnie ze względu na czytniki dla niepełnosprawnych? To znaczy że w takim wypadku robi się wyjątek i używa sie polskich nazw klas, tak?
  3. Nie wiem co miałeś na myśli mówiąc "blokujące arkusze stylów" i czemu aż 5? Mam chyba tylko 3 w projekcie 
  4. Wielkie dzięki za informacje że webP nie działa w Firefoxie! Dziś wziąłem się za zmniejszanie grafik i znalazłem gdzieś artykuł że to dobry format. Jaki w takim razie format polecasz?
  5. Jeśli chodzi o niepotrzebne prefixy to używam autoprefixera online, dlatego mam 2 wersje plików css (prefixed i nie). Polecasz może jakiś plugin autoprefixer do visual studio code który będzie "na czasie"?
  6. Czy długie selektory w css albo takie bardzo szczegółowe są czymś złym? Wole dodać taki selektor niż tworzyć wiele klas. Wydaje mi sie bardziej czytelny.
  7. Czy alternatywa tekstowa dla ikonki to atrybut aria?
  8. Jak zminifikować dołączanie skryptów? Wrzucić je do mniejszej ilości plików? 
  9. Czyli mówisz żeby usunąć preloader? 

Poza tym wielkie dzięki za js transitioned. Na pewno zaczne korzystać laugh

A co do oceny gwiazdkami to planuje w tej sekcji zrobic taki element absolutny poruszający sie przy krawędzi który po kliknięciu będzie sie rozwijał na 1/2 serokości strony i będzie miał wyjaśnione co rozumiem przez jaką ilość gwiazdek. Co o tym sądzisz?

komentarz 29 listopada 2018 przez Comandeer Mentor (452,560 p.)
  1. Nie wiem o co w ogóle chodzi w punkcie "focus z klawiatury niemal nie widoczny"

http://outlinenone.com/

  1. Punkty nawigacyjne powinny być po polsku pewnie ze względu na czytniki dla niepełnosprawnych? To znaczy że w takim wypadku robi się wyjątek i używa sie polskich nazw klas, tak?

To też. Ale chodzi głównie o to, że URL to część UI strony. http://mojeportfolio.pl/#o-mnie wygląda lepiej niż http://mojeportfolio.pl/#about ;) I tak, robi się tutaj wyjątek.

  1. Nie wiem co miałeś na myśli mówiąc "blokujące arkusze stylów" i czemu aż 5? Mam chyba tylko 3 w projekcie 

 Każdy arkusz stylów dodany przy pomocy normalnego link[rel=stylesheet] bez dodanego atrybutu [media] jest blokujący, czyli przeglądarka musi go ściągnąć, zanim zacznie renderować stronę. A to opóźnia jej wyświetlenie.

 Jaki w takim razie format polecasz?

Jeśli nie chcesz się bawić w posyłanie odpowiedniego formatu do odpowiedniej przeglądarki, to mimo wszystko standardowe JPG i PNG.

Polecasz może jakiś plugin autoprefixer do visual studio code który będzie "na czasie"?

Tak szczerze to bym się zastanowił, czy autoprefikser Ci jeszcze wgl potrzebny. Ile Twoich użytkowników używa starych IE i czy chcesz im dostarczać takie same wrażenia wizualne jak reszcie?

Czy długie selektory w css albo takie bardzo szczegółowe są czymś złym?  

Tak, bo podbijają specyficzność bez wyraźnego powodu. A to lubi ugryźć przy większych projektach. 

  1. Czy alternatywa tekstowa dla ikonki to atrybut aria?

Dałem linka do artykułu o ikonkach ;) Ale tak, jest to jeden ze sposobów.

  1. Jak zminifikować dołączanie skryptów? Wrzucić je do mniejszej ilości plików? 

To po pierwsze. Po drugie warto przepuścić przez jakiś minifikator (babel-minify, Terser, Google Closure Compiler itp.). 

  1. Czyli mówisz żeby usunąć preloader? 

Jak dla mnie totalnie niepotrzebny.

Co o tym sądzisz?

Sądzę, że jeśli coś trzeba dodatkowo wyjaśniać, to jest to złe rozwiązanie ;) Już słowa typu "początkujący", "średniozaawansowany", "ekspert" itd. mówią więcej. 

komentarz 30 listopada 2018 przez Jestem_Szaleńcem Początkujący (460 p.)
A jak zrobić przewijanie nie robiąc preventDefault() na linku? Kombinuje i jakoś nie moge wymyślić. Bo jak nie ma preventDefault to strona odrazu skacze do miejsca do którego powinna się przeskrollować. A jak jest to nie zmienia sie url strony :/
komentarz 30 listopada 2018 przez Comandeer Mentor (452,560 p.)
+1 głos
odpowiedź 29 listopada 2018 przez Jason_Nr_1 Bywalec (2,980 p.)
Twoja Stronka bardzo mi sie podoba, te oddalenie od Prozesora jest niezle, strona jest wyraznia i gleboka w sobie.
+1 głos
odpowiedź 29 listopada 2018 przez arces Pasjonat (17,720 p.)
  1. Tak co sobie na szybko przeklikałem, to od razu rzuca się w oczy, że masz cursor: pointer na całym menu, a tak naprawdę linki tylko na tekstach + ikonach. Jak masz wolne przestrzenie pomiędzy itemami, to nic się nie dzieje. Wtedy też cursor powinien zmienić się na domyślny.
  2. Co do samego wyglądu się nie czepiam, bo to kwestia gustu, ale odstępy pomiędzy sekcjami powinny być nieco większe i to już wygląda nieestetycznie.
  3. Czasami w konsoli wyskakuje error przy przechodzeniu do pewnych sekcji (klikając w menu).
    Uncaught TypeError: Cannot read property 'top' of undefined (scrolling.js : 6)
  4. Nie wiem czy tylko u mnie, ale preloader strasznie przecina i wygląda jakby animacja była poszarpana.
komentarz 29 listopada 2018 przez Jestem_Szaleńcem Początkujący (460 p.)
Wielkie dzięki za odpowiedź! Przed chwilą zrobiłem jeszcze jednen commit w którym zmieniłem grafike na starcie i dodałem właśnie przerwy między sekcjami troche większe.

Co do kursora to w sumie racja. Zaraz też to zmienię

errora nie zaobserwowałem u siebie xD wiadomo klasycznie "u mnie działa"

a preloader to zwykły gif to nie wiem co z nim może być nie tak
komentarz 29 listopada 2018 przez Jestem_Szaleńcem Początkujący (460 p.)

Zaraz będę jeszcze zmieniał rozmiary i formaty grafik żeby dobić do 90pkt na PageSpeed Insights

Podobne pytania

0 głosów
2 odpowiedzi 139 wizyt
+57 głosów
0 odpowiedzi 85,567 wizyt
+2 głosów
1 odpowiedź 87 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

62,465 zapytań

108,614 odpowiedzi

226,789 komentarzy

36,249 pasjonatów

Przeglądających: 177
Pasjonatów: 20 Gości: 157

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...