Strona do oceny!

pytanie zadane 27 września 2017 w Nasze projekty przez imklau Nałogowiec (42,090 p.)

Jak w temacie - proszę o ocenę kodu strony.

A najbardziej proszę o wskazówki dotyczące BEM i Sass, bo z tym nie miałam za bardzo do tej pory do czynienia ;)

1	komentarz 28 września 2017 przez radek024 Szeryf (77,160 p.) Na szybko: w menu masz treść visuallyhidden, która jest po polsku - strona jest oznaczona po angielsku.

komentarz 28 września 2017 przez imklau Nałogowiec (42,090 p.)

o faktycznie, dzięki ;p

6 odpowiedzi

odpowiedź 28 września 2017 przez JayJay Mądrala (6,020 p.)

W Sass dobrze byłoby zastosować placeholder'y (zamiast mixin'ów i/lub stworzyć placeholder'y z części mixin'ów, które nie zmieniają wartości), aby zmniejszyć trochę rozmiar wynikowego Css'a, np.

@mixin flex($justify) {
  dispaly: flex;
  justify-content: $justify;
  align-items: center;
}

.socials {
  @include flex(flex-start);
}

.header {
  @include flex(center);
}

.footer {
  @include flex(flex-end)
}

Można zamienić na:

%flex {
  dispaly: flex;
  align-items: center;
}

@mixin flex-justify($justify) {
  justify-content: $justify;
}
.socials, .header, .footer {
  @extend %flex;
}

.socials{
  @include flex-justify(flex-start);
}

.header {
  @include flex-justify(center);
}

.footer {
  @include flex-justify(flex-end)
}

Przykład nie jest idealny, ale wydaję mi się, że pokazuje samą ideę wykorzystywania placeholder'ów. Kod CSS będzie trochę prostszy i bez duplikatów tych samych własności.

Artykuł z porównaniem mixin, placeholder, extend:

http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases

komentarz 28 września 2017 przez imklau Nałogowiec (42,090 p.)

nie używałam takiego czegoś jeszcze, dziękuję! ;)

odpowiedź 27 września 2017 przez bicnet Gaduła (4,800 p.)

Czy to na pewno powinno tak być?

komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)

:o popsułeś mi stronę

a tak serio to dobrze, że zauważyłeś. Kontakt jest zrobiony nie po bożemu ;d

Dzięki, to będzie poprawione!

komentarz 27 września 2017 przez bicnet Gaduła (4,800 p.)

Nie ma problemu , powodzenia :D

odpowiedź 28 września 2017 przez Dzemtenjem Bywalec (2,660 p.)

Po pierwsze, bardzo ładnie napisana stronka. :)

A teraz to co rzuciło mi się w oczy:

- wszystkie sekcje powinny mieć nagłówki

<h2 class="section-header investments__header">

- użyłbym raczej section-heading, bo słówko header może sugerować, że jest to element <header>

- wydaje mi się, że w niektóre <section> możnaby śmiało zastąpić <article>, np. taką <section class="services"> zastąpiłbym <article> które zawierałoby 3 sekcje zamiast listy (ale jest to pewnie kwestia dyskusyjna)

- użyłbym również elementu <main> otaczając nim wszystko poza głównym headerem i footerem

Sam pewnie napisałbym gorszy kod, więc na wszelki wypadek nie traktuj mojego komentarza jak wypowiedzi specjalisty :) pozdrawiam

komentarz 28 września 2017 przez imklau Nałogowiec (42,090 p.)

- wszystkie sekcje powinny mieć nagłówki

Widziałam to jako błąd i się nad tym zastanawiałam...czyli mam dawać nagłówek do sekcji i jeśli nie potrzebuje mieć go widocznego na stronie to ukryć go w CSS?

- użyłbym raczej section-heading, bo słówko header może sugerować, że jest to element <header>

nad klasą .header .heading zawsze się waham :< chyba faktycznie lepsze rozwiązanie podajesz ;p

- wydaje mi się, że w niektóre <section> możnaby śmiało zastąpić <article>, np. taką <section class="services"> zastąpiłbym <article> które zawierałoby 3 sekcje zamiast listy (ale jest to pewnie kwestia dyskusyjna)

Masz rację mogłoby być tak.

- użyłbym również elementu <main> otaczając nim wszystko poza głównym headerem i footerem

main użyłam w dwóch podstronach, a o reszcie zapomniałam :D

Baaardzo fajnie, że chciało Ci się przejrzeć kod, błędy poprawię ;)
Dziękuję!

odpowiedź 27 września 2017 przez Wiciorny Ekspert (277,460 p.)

Na pierwszy rzut oka- co mnie razi " piszę mnie, dlatego że wiem - że może ktoś inny nie zwróci uwagi, ale długość strony - skrolując w dół. Naprawdę, jeśli kontent miałby do mnie trafić- miało mnie coś zaciekawić etc, to na starcie już byłbym zniechęcony z samego faktu przewijania na dół strony.

Mdła kolorystka strony, ani nie jest to taka 'lekka- ażeby napisać dobra, że nie wali kolorami', ale chyba aż za bardzo i brakuje w niektórych momentach wyrazistości.

Tekst mało-czytelny, przy obrazkach, mało wyrazisty, powoduje męczenie przy przeglądnieciu.

Ciut za dużo obrazków.

_____________

Analiza kodu zajmie mi trochę to ewentualnie edytuje i też coś powiem ( oczywiście bierz to jako konstruktywną krytykę, sugestie - a nie hejt )

komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)

Tekst mało-czytelny, przy obrazkach, mało wyrazisty, powoduje męczenie przy przeglądnieciu.

Hmm to dobra wskazówka!

Co do reszty do nie bez powodu prosiłam o ocenę kodu, bo strona była tworzona na podstawie PSD, więc wyglądu sama nie ustalałam ;)

odpowiedź 27 września 2017 przez zgrybus Pasjonat (24,860 p.)

JS - czemu gotowy plugin, czemu jQuery? :)

komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)

temu, że JS poznałam już na jakimś tam poziomie i mogę sobie w czystym JS pisać różne pierdoły w celu nauki tego języka, ale jeśli dostałabym zlecenie stworzenia takiej strony (w sensie za pieniądze ;d) to nie bawiłabym się w moje rozwiązania, bo często łatwiej skorzystać z tych gotowych ;)

Najbardziej zależy mi na ocenie tego, jak wygląda mój HTML i klasy BEM ;)

komentarz 27 września 2017 przez zgrybus Pasjonat (24,860 p.)

A w tym Ci nie pomogę. Kod HTML zawsze jakoś mało mnie interesował a BEMa nie używam :)

komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)

no oki ;p

komentarz 27 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

A po co ma pisać rzeczy od początku, które są gotowe, łatwo dostępne i dobrze działają?

komentarz 27 września 2017 przez zgrybus Pasjonat (24,860 p.)

No nie wiem, może dlatego, aby się czegoś nauczyć, ale co ja tam wiem. Dawajta, korzystajmy z gotowców, na pewno znajdziemy pracę, jak będziemy umieli zakodzić jakiś click event na zmianę klasy. No tak, przecież jeszcze umiemy pobrać GOTOWĄ, ŁATWO DOSTĘPNĄ I DOBRZE DZIAŁAJĄCA BIBLIOTEKĘ.
Ironicznie, ale może do Ciebie dotrze :)