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

Ocena portfolio

VPS Starter Arubacloud
0 głosów
563 wizyt
pytanie zadane 6 grudnia 2017 w Nasze projekty przez Bakr Mądrala (6,850 p.)
Witam,

 

Proszę Was o feadback nt. portfolio: http://bakr-test.esy.es/src/

Co poprawić, czego brakuje. Chciałbym wiedzieć nad czym popracować zanim wyślę to do firm ;)

 

Dzięki!
komentarz 6 grudnia 2017 przez Milesq Nałogowiec (32,020 p.)
jak nazywa się ten efekt że zdjęcie porusza się, "odwrotnie" do ruchu myszy?
komentarz 6 grudnia 2017 przez Bakr Mądrala (6,850 p.)
Szukaj pod hasłem GSAP parallax

5 odpowiedzi

+3 głosów
odpowiedź 6 grudnia 2017 przez zgrybus Pasjonat (24,860 p.)
nie wiem czy to normalne, ale strona ładuje mi się 2 minuty :(
+3 głosów
odpowiedź 6 grudnia 2017 przez Tomek Sochacki Ekspert (227,510 p.)
Bardzo długo mi się wczytuje, za długo. Wizualnie na pierwszy rzut oka oki.

Tak na szybko to zastanów się, jeśli chcesz iść we front, czy zamiast używać jQuery nie lepiej zrobić to samemu w vanilla, żeby pokazać, że umiesz JS, ale to tylko subiektywna sugestia.

Przenalizuj też swój kod JS, np. zmienne lepiej deklarować let/const. VAR nie jest błędem, ale obecnie w dobie ES8 warto stosować dobre praktyki, a jeśli ktoś wejdzie w kod i na szybko zobaczy same vary to może stwierdzić, że mogłeś nawet nie słyszeć o ES6 (nie ważne czy umiesz ES6,7,8 czy nie, ważne co pomyśli osoba rekrutująca :)

Dodatkowo ten filmik w tle jakoś dziwnie mi się odtwarza, to znaczy co chwilę mam jakieś białe tło (tak jakby co któraś klatka była cala biała). Ale nie wiem czy to jakiś błąd u mnie lokalnie, czy coś ze stronką także niech inni się wypowiedzą czy jest oki.

A tak na koniec to zastanów się czy nie wprowadzić minifikacji kodu, szczególnie JS, a stronkę udostępnić np. na github z kodem źródłowym. Jeśli nie masz back-endu to możesz też użyć github pages.
+1 głos
odpowiedź 6 grudnia 2017 przez Ivan Maniak (60,650 p.)
  • Brak outline dla przycisków, linków.
  • h1, h2, itd. nie służą do zmiany wielkości tekstu, a m.in. do tworzenia struktury dokumentu.
    No i co za tym idzie, brakuje poprawnego document outline.
  • Opis przycisku "menu" nie jest najlepszym przyciskiem :)
  • Po otworzeniu menu, które zajmuje cały obszar, po przechodzeniu do kolejnych linków, itp. (TAB) powinno zostawać się w obrębie tym menu. Gdy dojdziemy do "Kontakt" i klikniemy "TAB" przechodzimy gdzieś na stronę, a powinniśmy wrócić do pierwszego linku/przycisku zamykania.
  • <img src="images/dariusz-kowalek.jpg" alt="ks. Dariusz Kowalek" class="img-responsive img-testimonial">
    <h3>ks. Dariusz Kowalek</h3>

    Niepotrzebny alt, ponieważ opisujesz kto/co znajduje się na zdjęciu zaraz pod nim.

  • <span class="title__shadow" aria-hidden="true">Portfolio</span>
    <span class="title__text">Portfolio</span>

    Jakbyś pokombinował to ten sam efekt osiągnąłbyś używając pseudoelementów CSS-a, ale sposób, którego użyłeś jest OK.

  • <nav role="navigation"

    Sam <nav> już nadaje role=navigation dla elementu, więc nie musisz tego dodawać.

  • <input type="hidden" id="progress_width" value="0">
    

    Nieużywany element?

  • Informację, że użytkownik potrzebuje JS-a do działania strony warto dodać na górę strony. Są większe szanse, że szybciej znajdzie taką informację :)

  • Używasz " prawie wszędzie, a w paru elementach '. Warto wybrać jedną wersję, aby kod wyglądał lepiej :)

  • Poza tym jeszcze jest kilka błędów dostępności. np. nie zawsze jest (dobrze) widoczny przycisk do otwierania menu (za słaby kontrast, gdy jest na czarnym tle) i elementy, które nic nie mówią osobą, które korzystają z czytników ekranowych np.:
     

    <div class="popup-info-to-close">
      <div class="popup-info-to-close__esc">esc</div>
      <div class="popup-info-to-close__click">click</div>
    </div> 
komentarz 6 grudnia 2017 przez Bakr Mądrala (6,850 p.)
Dzięki!

Mam pytanie - jak sprawić, aby tab przeskakiwał ponownie do pierwszego elementu menu?
komentarz 7 grudnia 2017 przez Ivan Maniak (60,650 p.)

W JS-ie. Pobierasz pierwszy i ostatni element menu i implementujesz takie zachowanie. Co dokładnie trzeba zaimplementować to możesz znaleźć w artykule Accessible Full Screen Menu, a dokładniej to w Keeping focus inside full screen menu. Przykładowa implementacja z tego wpisu, przykładowa implementacja na a11yproject

 

0 głosów
odpowiedź 6 grudnia 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)
Koledzy dobrze wszystko opisali, ja od siebie tylko dodam, że twój kod o powiadamianiu o cookies nie działa, a to jest już niezgodne z prawem.
komentarz 6 grudnia 2017 przez Bakr Mądrala (6,850 p.)
Na jakiej przeglądarce sprawdzasz? U mnie komunikat się wyświetla (Vivaldi, FF, Windows, Linux).
komentarz 7 grudnia 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)
Chrome + Windows
komentarz 7 grudnia 2017 przez manjaro Nałogowiec (37,390 p.)
Chromium + Linux brak powiadomienia o cookies

FF + Linux jest powiadomienie
0 głosów
odpowiedź 6 grudnia 2017 przez imklau Nałogowiec (42,090 p.)
.menu li > a:focus:after, .menu li > a:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s; 
}

Mimo wszystko lepiej by wyglądało, jakbyś miał wszędzie klasy i po klasach stylował elementy.

Kilka błędów się znalazło

<div class="typed-wrap container">
        <h3>Cześć,</h3>
        <h2>Mam na imię Bartek.</h2>
        <h1>Jestem Web<span class="typed"><noscript>Developerem</noscript></span></h1>
</div>

Dziwnie trochę z tymi nagłówkami masz :P

<input name="name-footer" id="footer-form__name" class="effect" type="text" required value="">
<label>Twoje imię</label>

Tak w sumie bez "for" w label to nie wiem, czy wiadomo do czego ten label jest.


PS. i bez filmiku fajnie by to wyglądało :P

Podobne pytania

+3 głosów
8 odpowiedzi 855 wizyt
pytanie zadane 15 czerwca 2017 w Nasze projekty przez Bakr Mądrala (6,850 p.)
0 głosów
2 odpowiedzi 447 wizyt
pytanie zadane 22 marca 2019 w Nasze projekty przez Dawid_Predecki Obywatel (1,610 p.)
0 głosów
5 odpowiedzi 586 wizyt
pytanie zadane 14 marca 2019 w Nasze projekty przez MasterOf Nowicjusz (200 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 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!

...