Ocena portfolio

Question

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!

Comments

jak nazywa się ten efekt że zdjęcie porusza się, "odwrotnie" do ruchu myszy?

---

Szukaj pod hasłem GSAP parallax

Answer 1

nie wiem czy to normalne, ale strona ładuje mi się 2 minuty :(

Answer 2

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.

Answer 3

• 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> 

Comments

Dzięki!

Mam pytanie - jak sprawić, aby tab przeskakiwał ponownie do pierwszego elementu menu?

---

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

 

Answer 4

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.

Comments

Na jakiej przeglądarce sprawdzasz? U mnie komunikat się wyświetla (Vivaldi, FF, Windows, Linux).

---

Chrome + Windows

---

Chromium + Linux brak powiadomienia o cookies

FF + Linux jest powiadomienie

Answer 5

.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