• 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

VPS Starter Arubacloud
+1 głos
719 wizyt
pytanie zadane 29 listopada 2018 w JavaScript przez Jestem_Szaleńcem Użytkownik (530 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 Guru (599,730 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 Użytkownik (530 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 Guru (599,730 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 Użytkownik (530 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 Guru (599,730 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,700 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 Użytkownik (530 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 Użytkownik (530 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 380 wizyt
0 głosów
1 odpowiedź 463 wizyt
pytanie zadane 12 września 2019 w Java przez invokeLater Początkujący (310 p.)
+71 głosów
0 odpowiedzi 227,821 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...