Informacje do poprawy

[igorx13]

Lista rzeczy do poprawy

@adrianghub Lista uwag do wdrożenia.

Odchylenia od projektu:

• [x] 1. Do sprawdzenia wszystkie font-size, color oraz line-height dla wszystkich elementów.

• [x] 2. Do sprawdzenia spacingi w elementach (padding/margin).

• [ ] 3. Do sprawdzenia container, szerokość nie jest zgodna z projektem - sprawdź plik bootstrap/scss/_variables.scss i mapa $grid-breakpoints oraz $container-max-widths, według tego buduje container.

• [x] 4. Slider główny/hero - tutaj box z tekstem powinien być równy kontenerowi. --- (uwaga 07.10) nie używaj fixed wartości dla wysokości oraz szerokości elementu, wszystko powinno utrzymywać się w paddinach jako spacing. Jedynie jeśli chcesz ograniczyć szerokość albo wysokość używaj max-width/max-height.

• [x] 5.O firmie - nie wiem czemu dla img są takie dziwny style height: 10vh w jakim celu?.

• [x] 6. Jak działamy - do sprawdzenia tekst, spacing, (img zmień na bg-img). --- (uwaga 07.10) element powinien był jako bg nie w kontenerze, jak zauważasz na projekcie element jest do prawej krawędzi ekranu. Spacingi w card-headera są niezgodne z projektem, tak samo marginesy między kartami`.

• [x] 7. Najlepsze marki - brak spacingu miedzy elemetami, typografia do sprawdzenia.

• [x] 8. w liczbach - ten dot powinien być po prawej nad img (zrób to najlepiej z css).

• [x] 9. Opinie klientów - bardzo dużo niezgodności w zgodnie z projektem, brak elementu 'apostrofa' oraz niezgodności w spacingach, typografii, box shadow.

• [x] 10. Blok logowania - powinien być https://getbootstrap.com/docs/4.5/components/dropdowns/ nie modal, sprawdź czy na pewno masz poprawne spacingi w tym elemencie i wielkości się zgadają. --- (uwaga 07.10) nie używasz komponentu bootstrap który wysłałem Ci w linku, tam jest zależność miedzy buttonem, a dropdown-menu. Event idzie po click, a nie hover, do backdropu na body możesz użyć eventów dostępnych w dropdown https://getbootstrap.com/docs/4.5/components/dropdowns/#events

• [x] 11. Modal dostępne klimatyzacje - niezgodności w szerokości do kontenera, bardzo duże rozbierzności w font-size względem projketu.

Kod .js.

• [x] 1. Pobieraj cały kod .js do pliku, nie potrzebnie dodajesz owl przez cdn.

• [x] 2. Pamiętaj o używaniu https://api.jquery.com/ready/ przy jQuery dla wykonywania funkcji na pageload oraz bindowania eventów.

• [x] 3. Counter, przenieś do innego pliku i zaimportuj go, niepotrzebny śmietnik w kodzie (dodaj np. lib/jQuerySimpleCounter.js i zaimportuj go).

• [x] 4. Pobieraj te dane odnośnie counterów z elementów html, a nie z palca. Zastosuj atrybut data- na elemencie html i zrób to po pętli. (tutaj możesz także wykonać kod dopiero gdy element pojawi się na ekranie, (skorzystaj z https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

• [x] 5. Nie importuj całego bootstrapa tylko konkretne elementy z których korzystasz. --- (uwaga 07.10) w sumie importujesz cały bootstrap w app.js, zerknij w pliki w bootstrap/js/src/, możesz importować percomponent.

Kod .scss

• [x] 1. Rozdziel komponenty do osobnych plików, by utrzymać app.scss z jak najmniejszą ilością kodu.
• [x] 2. BEM -- zrobiłeś sobie nesting hell (zagnieździłeś za dużo elementów), przeczytaj https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/.
• [x] 3. Nie używaj !important jeśli już musiałeś napisz w komentarzu nad, dlaczego.
• [x] 4. Korzystaj z wbudowanych mixinów w bootstrap np do responsywności, strona wygląda słabo na mobile.
• [x] 5. Importuj tylko to co używasz z bootstrap nie wszystko zerknij na importy w pliku node_modules/bootstrap/scss/bootstrap.scss (dostosuj je oczywiscie do swojego path). To z czego nie korzystasz nie musi być importowane.

Różne uwagi

• [x] 1. Nav na hoverze elementy nie powinny się resizować. --- (uwaga 07.10) możesz tutaj skorzystać z funcji css attr() dla pseudo elementu (tworząc ten sam element na before ale z font-size: bold), by elementy się nie przesuwały resizowały na hover.`.

• [ ] 2. Przycisk offer__content__button styluj przyciski po jakiś klasach typu btn tak nie nie były one tak specyficzne do konkretnego elementu. Jak będziesz chciał go potem użyć to będziesz musiał nadać mu klasę offer__content__button (mimo, że jest to już nieprawidłowe według BEM) to na dodatek nie mówi to nic. Utwórz przycisk typu np. .button dodaj tutaj już jakieś bazowe style. Dodaj modyfikator typu --primary, --secondary dla wyglądu. Dla rozmiaru możesz użyć np. modyfikator typu --xs, --sm, `--lg. --- (uwaga 07.10) nadal do poprawy.`.

• [x] 3. Zwróć uwagę na headery .section__header - element 'krestki' powinien być równy max-width dolnego elementu dla innych headerów po za O firmie. Skorzystaj tutaj z wartości display oraz position, by element automatycznie wypełniał przestrzeń. Zwróć także uwagę na resposywność, skorzystaj z mixina media-breakpoint-up(). Możesz także napisać nawet swój własny mixin pod responsywne font-sizy dla headerów.

• [x] 4. W kodzie masz bardzo dużą powtarzalność tych samych elementów, rozważ stworzenie klas utils np. dla szarego bg.

• [x] 5. Przywiązuj więcej uwagi do poprawności według projektu, nie musi być pixel prefect ale pewne wartości muszą zostać utrzymane.

• [x] 6. Patrz na rozmiary exportowanych elementów np. slider waga 1.4 MB format .png niepotrzebnie. Wyexportuj w .jpg oraz przepuść przez tinypng.com wyjdzie pewnie z 100 KB. --- (uwaga 07.10) zdjęcie jest teraz w nieprawidłowym formacie, po za tym zdjęcie ma zły rozmiar, width powinien być min: 1920px.`.

[igorx13]

@adrianghub

• [x] przy okazji warte obejrzenia https://egghead.io/courses/learn-the-best-and-most-useful-scss. Pokaże Ci, że .scss to nie tylko .css ze zmiennymi.

[igorx13]

@adrianghub

nowe uwagi (07.10)

[adrianghub]

Proszę o sprawdzenie dotychczasowych zmian w projekcie 😉

[adrianghub]

@igorx13

[igorx13]

@adrianghub

Uwagi 13.10.2020

Uwagi ogólne

Sprawdź rzeczy odznaczone z w komentarzu wyżej, jeśli coś jest odznaczone, przeczytaj jeszcze raz i sprawdź (do poprawy).

Bootstrap

• [x] 1. Niepotrzebne elementy .row oraz .col-. Np. kod:

  <div class="container">
  <div class="row text-left">
  <div class="col-sm-10 col-md-6 col-lg-5 section">
    <div class="section__header py-5">
      <p class="section__heading--small">Zobacz</p>
      <h2 class="section__heading--big">jak działamy</h2>
    </div>
  </div>
  </div>
  </div>

Niepotrzebny .row oraz .col- heading najlepiej jakby był np. <h2> był sectionheader, a podział niżej w <span>. Przy okazji dodaj do `.sectionheader`.d-inline-block (załatwi Ci to problem lini w headingu).

• [x] 2. Błędy stosowanie komponentu grid bootstrap:

<div class="container about">
        <div class="row">
          <div class="col-md-6 col-lg-4 pr-0">

.row nadaje minusowe marginesy poziomie, a .col- dodaje padding tak samo w poziomie tak by elementy nie wystawy po za wyznaczony blok. Usuwając padding prawy elementy nie trzymają się w kontenerze.

Projektowe

Kilka elementów jest nieprawidłowe projektowo:

• [x] 1. Logowanie dropdown rozwinięty, inny niż na projekcie.
• [x] 2. Slider marek, spacingi między elementami. (dodaj też większą ilość na mobile).

SCSS

• [x] 1. Niepotrzebne zmienne np.

  
  $semi-bold: 600;
  (w sumie wartość nie potrzebuje zmiennej)

$bps: ( xs: 576px, sm: 768px, md: 992px, lg: 1200px ); (bootstrap ma swoje zmienne mapa $grid-breakpoints)

$bg-image-width: 750px; $bg-image-height: 500px; (można to zamknąć w komponencie)

[adrianghub]

@igorx13

Prośba do wglądu po odhaczeniu uwag.

(uwaga 19.10) zmiany, których nie odhaczyłem pozostawiły u mnie znak zapytania co do poprawnego wdrożenia, co postarałem się wytłumaczyć poniżej

• Pkt. 3 Odchylenia od projektu (szerokość nie jest zgodna z opisem) - tutaj mogę dostosować tylko wartość xl pod szerokość makiety tj. 1920px, przy tej zmianie zauważyłem, że nawigacja wymaga dostosowania do szerokości
• Pkt. 2 Różne uwagi - style uniwersalne pod btn - tutaj skorzystałem z @mixin, do którego przekazałem domyślne, reużywalne wartości, nie widzę przypadku dostosowania btn pod flagę --primary, --secondary, czy określenia flagą danej wielkości przycisku.
• Pkt. 1 Projektowe - rozwiązanie, które tutaj wykorzystałem tj. position: absolute i oddalanie przycisku logowania w miarę zmiany szerokości strony na pewno nie jest optymalne, potrzebowałbym tutaj wskazówki.