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

Ocena portfolio

0 głosów
262 wizyt
pytanie zadane 6 grudnia 2017 w Nasze projekty przez Bakr Gaduła (4,760 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 Dyskutant (8,680 p.)
jak nazywa się ten efekt że zdjęcie porusza się, "odwrotnie" do ruchu myszy?
komentarz 6 grudnia 2017 przez Bakr Gaduła (4,760 p.)
Szukaj pod hasłem GSAP parallax

5 odpowiedzi

+3 głosów
odpowiedź 6 grudnia 2017 przez zgrybus Pasjonat (21,620 p.)
nie wiem czy to normalne, ale strona ładuje mi się 2 minuty :(
+3 głosów
odpowiedź 6 grudnia 2017 przez Tomek Sochacki Nałogowiec (37,810 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 (59,470 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 Gaduła (4,760 p.)
Dzięki!

Mam pytanie - jak sprawić, aby tab przeskakiwał ponownie do pierwszego elementu menu?
komentarz 7 grudnia 2017 przez Ivan Maniak (59,470 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 Pasjonat (16,010 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 Gaduła (4,760 p.)
Na jakiej przeglądarce sprawdzasz? U mnie komunikat się wyświetla (Vivaldi, FF, Windows, Linux).
komentarz 7 grudnia 2017 przez ProgramistaStepek Pasjonat (16,010 p.)
Chrome + Windows
komentarz 7 grudnia 2017 przez manjaro Pasjonat (23,900 p.)
Chromium + Linux brak powiadomienia o cookies

FF + Linux jest powiadomienie
0 głosów
odpowiedź 6 grudnia 2017 przez Noemi Nałogowiec (33,130 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

+5 głosów
8 odpowiedzi 539 wizyt
pytanie zadane 15 czerwca 2017 w Nasze projekty przez Bakr Gaduła (4,760 p.)
+3 głosów
5 odpowiedzi 353 wizyt
pytanie zadane 1 sierpnia 2017 w Nasze projekty przez Damian Wiśniewski Początkujący (260 p.)
0 głosów
7 odpowiedzi 383 wizyt
pytanie zadane 16 maja 2017 w Nasze projekty przez UltraSF Mądrala (6,490 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.
Ciekawy innych porad? Odwiedź tę stronę!

45,846 zapytań

86,310 odpowiedzi

172,556 komentarzy

22,275 pasjonatów

Przeglądających: 216
Pasjonatów: 26 Gości: 190

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.

...