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

strona do oceny

VPS Starter Arubacloud
+5 głosów
630 wizyt
pytanie zadane 11 kwietnia 2018 w Nasze projekty przez gremlin Dyskutant (7,600 p.)

Hej,

Zakodowałem stronę z projektu graficznego (psd) i chciałem Was prosić o ocenę.

live: https://nilmergomino.github.io/weekly-challenge_23/

kod: https://github.com/NilmergOmino/weekly-challenge_23

użyte technologie: html, css (sass), js (jquery)

(projekt graficzny nie jest mojego autorstwa, pochodzi z facebookowej grupy Weekly WebDev Challenge)

Pozdrawiam wszystkich serdecznie :)

1
komentarz 11 kwietnia 2018 przez hoktaur Pasjonat (22,250 p.)
Mi to wygląda na szablon dla strony (wszędzie 'lorem ipsum') a nie strona ... a może się czepiam ;).

 

Strona tfuu szablon bardzo ładny
komentarz 11 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)
Strona, szablon...co za różnica?

Ważne, jak zostało to wdrożone :)
komentarz 11 kwietnia 2018 przez Ehlert Ekspert (212,630 p.)

Drogi autorze, jeśli chodzi o front jestem Twoim fanem laughyes

8 odpowiedzi

+6 głosów
odpowiedź 11 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)

Nikt tego jeszcze nie zrobił to ja w takim razie się tego podejmę :P
Tzn postaram się ocenić kod.

1. Jesteś już na takim poziomie, że wypadałoby pilnować, czy dajesz "..." czy '..'

@import "./node_modules/normalize-scss/sass/normalize/import-now";
@import 'vendor/all';

2. Nie lepiej tutaj dać skrócony zapis dla **background**?

background-color: black;
background-image: url('../assets/phone-screen-min.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

3. Po co aż coś takiego:

&_heading,
    &_addressInfo,
    &_contactForm,
    &_socials,
    &_paragraph {
        position: relative;
        z-index: 5;
        width: 100%;
}

Jeśli chodziło o to przyciemnienie stopki to trzeba było dać z-index: -1 na pseudoelemencie (tam gdzie masz to ciemniejsze tło) + z-index: 1 dla całej stopki i zadziała.

4. Ojj nie za ładnie:

 &_addressInfo {

 }
 &_contactForm {

 }

A takich pustych miejsc masz naprawdę sporo, po co tak?

5. Takie coś:

&_serviceItem {
        width: 100%;
        margin-top: 3em;
    }
    @include screen(mobile) {
        &_serviceItem {
            width: 80%;
        }
    }
    @include screen(mobileBig) {
        &_serviceItem {
            width: 70%;
        }
    }
    @include screen(tablet) {
        &_serviceItem {
            width: 60%;
        }
}

Możesz spokojnie zamienić na:

&_serviceItem {
        width: 100%;
        margin-top: 3em;
    }
    @include screen(mobile) {
            width: 80%;
    }
    @include screen(mobileBig) {
            width: 70%;
    }
    @include screen(tablet) {
            width: 60%;
}

6. Jestem w 100% pewna, że jest fajna skrócona wersja dla tego zapisu, ale po prostu zapomniałam jaka :<

grid-template-rows: 20vw 20vw 20vw 20vw 20vw 20vw 20vw 20vw 20vw 20vw;

7. Zamiast do (prawie) każdego elementu dodawać box-sizing możesz na początku kodu zaznaczyć:

* {
box-sizing: border-box;
}

Przynajmniej nie będziesz musiał tego powtarzać :)

8. Pozamieniałabym nazwy plików "all.scss" na jakieś inne bo tak średnio to wygląda. Może bardziej "core.scss" ? A jak nie to zawsze też możesz od razu importować do głównego pliku.

9. Może warto byłoby się zainteresować czymś takim jak ITCSS? Fajnie można ogarnąć strukturę plików.

10. Dość ciężko ogarnąć Twoje nazewnictwo klas. Może jednak bardziej BEM?

 

Ale ogólnie powiem Ci, że fajnie się przeglądało kod bo jednak trzeba było bardziej się na nim skupić no i na pewno nie są to błędy typowe dla strony wrzucanych tu do oceny. Działaj dalej!

komentarz 11 kwietnia 2018 przez JayJay Mądrala (6,020 p.)

@Noemi 

6. Nie przypadkiem coś takiego ;)

grid-template-rows: repeat(10, 20vw);

 

komentarz 11 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)
ooo tak, to właśnie to!

Liga Mistrzów mnie wciągnęła i nawet nie chciało mi się wyszukać :D
komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)

oo, dzięki wielkie za wnikliwą analizę :D

4. przyznam szczerze, że w komponencie od razu wypisuje sobie wszystkie elementy i wydawało mi się, że lepiej je zostawić puste jeżeli nie potrzebują specjalnych styli, bo kiedy jednak uznam, że potrzebują to nie muszę zaglądać do html w poszukiwaniu ich nazwy a sass puste i tak pomija

5. podobnie jak 4, gdybym uznał, że inny element też potrzebuje zmiany dla wyższej rozdzielczości to musiałbym osobno pod niego podpiąć @include i w efekcie miałbym więcej kodu i więcej zagnieżdżeń (tam źle dałaś klamrę, bo te includy powinny zawierać się w &_serviceItem żeby było to samo.

6. Jest, masz rację :) użyłem jej później w blog i zapomniałem tu zmienić (wstyd się przyznać, ale wcześniej nie używałem grida sądząc, że ma jeszcze za małe wsparcie)

7. dobry pomysł z tym box-sizing :D

8. muszę nad tym pomyśleć, narazie testuje różne rozwiązania, ale bezpośrednio do głównego to nie bo musiałbym podawać ścieżkę folderu a to więcej pisania! ^^

9. ohh, ostatnio mam lekturę różnych architektur i metodyk, póki co przetestowałem rscss, zwykły BEM i moją odmianę BEM (choć pewnie ktoś kto używa BEM złapałby się za głowę), ale czytałem już o wielu - będę testował.

10. Moje nazewnictwo wcale nie jest takie trudne :)

blockName_elementName -modifier _soulName _soulName-modifier

- camelCase zamiast train-case

- pojedyncze podkreślenie zamiast podwójnego

- modyfikator zaczynający się od pauzy (ściągnięte z rscss i ABEM)

- każdy element może posiadać duszę której fragmenty zaczynają się od podkreślenia a ich modyfikator jest tym razem połączony (przez co można je bez problemu nadpisać)

- dusze to swego rodzaju specjalny stan początkowy (może ulec zmianie bezpośrednio w bloku) - coś jak w OOCSS, fragment duszy może być nawet jak klasa w Atomic CSS nadając jedną wartość

- no i jeszcze są boxy:

block jest jak rodzic, elementy to jej dzieci które mogą również być blokiem posiadając własne dzieci, box natomiast to element który nie jest dzieckiem ale pilnuje dzieci bloku (taka ciotka/wujek czy opiekunka która nie posiada własnych dzieci i tylko pomaga upilnować dzieci).

innymi słowy boxy posiadają tylko modyfikator i pomagają ułożyć inne elementy

Mówiłem, że proste? :D

komentarz 11 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)
4. Ale już pomijając scss to tym sposobem i tak zostawiasz trochę niepotrzebnego kodu tzn właśnie te klasy w HTML, które są do niczego niepotrzebne.

5. Masz rację niechcący źle użyłam, ale domyśliłeś się o co mi chodziło. Trochę tak bez sensu pisać teraz więcej kody bo może w przyszłości coś tam jeszcze dopisze. I trochę nie rozumiem. Jak to musiałbyś pod osobny element podpiąć osobno include?

9. Ja sama pisze z BEM no i właśnie się złapałam za głowę jak to zobaczyłam :D jest coś co tak bardzo Ci w bem przeszkadza? Bo ja napisałam, że ciężko Twoje nazewnictwo ogarnąć i mogłam lepiej to napisać bo chodziło mi o czytelność. To, że wszystko jakoś logicznie się łączy to tak się domyśliłam, a przynajmniej miałam nadzieję że tak właśnie jest :D
komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)
.services {
    @include flex(column,nowrap,center,center,center);
    background-color: darken($colorAzureRadiance, 3%);
    color: white;
    &_minorHeader {
        width: 100%;
    }
    &_serviceItem {
        width: 100%;
        margin-top: 3em;
    }
    @include screen(mobile) {
        &_serviceItem {
            width: 80%;
        }
    }
    @include screen(mobileBig) {
        &_serviceItem {
            width: 70%;
        }
    }
    @include screen(tablet) {
        &_serviceItem {
            width: 60%;
        }
    }
}

Tak mniej więcej wygląda fragment tego kodu.

Ty sugerujesz takie podejście:

.services {
    @include flex(column,nowrap,center,center,center);
    background-color: darken($colorAzureRadiance, 3%);
    color: white;
    &_minorHeader {
        width: 100%;
    }
    &_serviceItem {
        width: 100%;
        margin-top: 3em;
        @include screen(mobile) {
              width: 80%;
        }
       @include screen(mobileBig) {
              width: 70%;
        }
        @include screen(tablet) {
            width: 60%;
        }
    }
}

Jednak gdy uznam, że strona nie wygląda dobrze na wielkości tablet i postanowie dołożyć do _minorHeader margin, to będę musiał to zrobić bezpośrednio w nim znowu używając include. Albo będę chciał rozjaśnić tło dla bloku services przy wielkości 'mobile', to również kolejny include z mobile będzie potrzebny. A tu są tylko dwa elementy, w blokach które posiadają ich więcej takie zagnieżdżanie skończyłoby się ostatecznym przeniesieniem ich do wspólnego includa (tak mi się przynajmniej wydaje).

 

9. O, BEM to ciężki temat :) Jako architektura jest świetny. Tylko nie podoba mi się konwencja nazewnicza bo według mnie jest strasznie nieczytelna. Pewnego rodzaju próbą znalezienia złotego środka było dla mnie rscss który niby bazuje na BEM i nazwy wyglądają ślicznie, ale w scss czy nie daj Boże zwykłym css wyglądają już nieciekawie (no i tworzą specyficzność). Podoba mi się podejście ABEM z camelCase i oddzielnymi modyfikatorami, lecz nie podobają mi się prefixy i tak sobie błądzę szukając czegoś co będzie mi odpowiadało.

komentarz 12 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)
Co do tego zagnieżdżania to kwestia podejścia właściwie. Jak dla mnie moje podejście jest o wiele czytelniejsze - w jednym miejscu znajdziesz style to na wszystkie rozdzielczości dla danego elementu. Biorąc pod uwagę Twoje podejście to najpierw scrollujesz przez tyle te bez media mijasz róóóóżne elementy, aż dojeżdżasz na sam dół i tam musisz kolejny raz szukać elementów, które już wcześniej mijałeś :P

Może musisz zrobić kilka większych projektów i wtedy przyznasz, że w inny sposób łatwiej się w kodzie odnaleźć, albo faktycznie nadal będziesz wolał swój sposób. O to już chyba nie ma co rozwodzić bo chyba żadne z tych podejść nie jest błędne :)

Co do BEM - może po prostu nie do końca wiesz, jak ją stosować i dlatego wydaje Ci się nieczytelna? Bo ja na początku miałam ten sam problem, ale teraz dodatkowo mocno kładę nacisk na tak jakby OOCSS przy tym BEM i naprawdę meega super się kod pisze! Na priv mogłabym Ci kawałek kodu jakiejś stronki podesłać i sobie zerkniesz :D

Ale jasne kombinuj, może coś nowego i ciekawego wymyślisz!
komentarz 12 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)
No możesz mieć rację, że odmieni mi się przy większym projekcie (chociaż przy Twojej metodzie generuje się chyba dłuższy plik css :P ). Ale przetestuje, bo często to co w teorii wydaje mi się dobre to w praktyce jest inaczej - i odwrotnie.

Jak masz jakiś większy kawałek kodu w BEM który mogłabyś nazwać dobrym wzorcem to podeślij, pewnie :) Trochę denerwujące jest w tych wszystkich artykułach, że niezwykle rzadko zdarzy się, że będzie podany jakiś przykład przekraczający listę.

A tak z ciekawości to jak łączysz OOCSS z BEM?

Dajmy na to masz w bloku element span nadający fragmentowi tekstu podkreślenie i inną czcionkę. I w różnych blokach masz takie podkreślenia, tylko raz są same podkreślenia a raz mają inną czcionkę i podkreślenie a raz po prostu tylko inną czcionkę. Czy tworzysz z tego spanu blok z modyfikatorami, czy w każdym bloku osobno go stylujesz jako element tego bloku, czy używasz tzw. helperów, czyli klas w ogóle nie powiązanych z BEM.
komentarz 13 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)
edycja 13 kwietnia 2018 przez imklau

Możliwe, że dłuższy, ale tak jak pisałam - dla mnie jest sporo łatwiej na takim czymś pracować więc wolę tak :P

Ooo tak zgadzam się. Tak naprawdę bardzo mało można znaleźć artykułów z fajnymi przykładami (chyba ja akurat żadnego nie znalazłam) użycia BEM. Co najwyżej można wzorować się na kodzie innych osób, ale też właściwie wtedy nie masz pewności, że to jest faktycznie poprawnie zrobione.

To kod podeślę na weekendzie, chociaż teraz tak pomyślałam, że może by se tak machnąć to zadanko, co Ty tylko w taki sposób jak ja robię i wtedy i Tobie i mi łatwiej by było porównać :D A kiedyś jakieś 2 zadanka robiłam już z tego, więc kto wie...

Właśnie teraz to sobie tak myślę, że ja po części tylko pisze zgodnie z BEM, w sumie sama nie wiem.

Kiedyś jak tworzyłam powiedzmy formularz to wydawało mi się normalnym, że przycisk będzie jego elementem i do dawałam na tej zasadzie. Chociaż to chyba nie było zbyt mądre.

<form class="form">
   ...
   <button type="submit" class="form__button">Wyślij</button>
</form>

Ale teraz biorąc pod uwagę że projekt ma raczej kilka/kilkanaście podstron to takie coś nie ma sensu i aktualnie plik "_button.scss" trafia do folderu "components" według ITCSS, a tam mam:

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 0;
  background: transparent;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: bold;
  color: color(secondary);
  transition: .2s;

  &--primary {
    color: #fff;
    background: color(primary);
  }

  &--secondary {
    background: color(white);
    color: color(primary);
  }

  &--shadow {
    box-shadow: 0 2px 10px rgba(0, 100, 191, .1);
  }

  &--rounded {
    border-radius: 5px;
  }

  &--expanded {
    width: 100%;
  }

  &--hidden {
    display: none;
  }
}

I sobie używam tych klas, które mi odpowiadają.

Właściwie taki problem jest z tymi darmowymi PSD - przedstawiają tylko jedną podstronę, a w pracy będziesz musiał myśleć o tym, żeby napisać kod jeszcze bardziej reużywalny (z czym ja jeszcze mam trochę problem) i tak jak np stworzyłeś sekcje "aboutUs" czy "services" tak jestem pewna, że grafik wykorzystałby ułożenie z tych sekcji gdzieś na kolejnych podstronach tylko dotyczyłyby jakichś innych informacji. Więc wtedy co? Masz sekcje testimonials na innej podstronie, ale elementy układają się idealnie jak w "services" - dajesz wtedy klasę services mimo, że to już nie są services? czy dajesz klasę testimonials i kopiujesz cały kod z services? :D

a co do Twojego pytania to skorzystałabym właśnie z takich jakby helpers, chociaż to też by zależało od tego, jak duży to projekt, czy tylko dwa razy się powtarza, czy więcej itd.

+2 głosów
odpowiedź 11 kwietnia 2018 przez Paweł123 Nałogowiec (33,500 p.)
Ogólnie bardzo fajnie ;)
+2 głosów
odpowiedź 11 kwietnia 2018 przez niezalogowany
Ładna, ile już kodujesz?
komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)
Już ponad rok, ale z różną systematycznością.
+2 głosów
odpowiedź 11 kwietnia 2018 przez UltraSF Stary wyjadacz (11,740 p.)
Jeśli chodzi o wygląd to na prawdę super :D Jeśli chodzi o semantykę i dostępność na pierwszy rzut oka jest całkiem spoko, brakuje mi trochę atrybutów title, ale ja programuje w php wiec nie jestem dokładnie pewny jak to tam wszystko idzie. Ale mi się podoba bardzo ;)
+2 głosów
odpowiedź 11 kwietnia 2018 przez Hiskiel Pasjonat (22,830 p.)
edycja 11 kwietnia 2018 przez Hiskiel
Witam!

Niestety nie ocenię Twojego kodu, ponieważ Web to nie moja działka, za to mogę Ci napisać jak to IMO wygląda z strony internauty.

 

Strona wygląda bardzo fajnie jeśli chodzi o wygląd. Jedyne co IMO przeszkadza to sekcja Who we are. Ten niebieski bardzo bije po oczach. Strona ma przyjemną dla oka szatę, nie za dużo, nie za mało. Jeśli chodzi o to zdjęcie w tle. Prawie na każdej stronie na jakiej takie zdjęcie widziałem ten obraz z tyłu drgał. U Ciebie tego problemu nie ma.

 

Pozdrawiam.
komentarz 11 kwietnia 2018 przez imklau Nałogowiec (42,090 p.)
to był gotowy plik PSD więc nie ma co wyglądu oceniać chyba ;)
+2 głosów
odpowiedź 11 kwietnia 2018 przez chmod96 Obywatel (1,380 p.)
Strona bardzo ładna, jedyne co mi nie pasuje to ten kolor niebieski, według mnie jest zbyt "Agresywny" ale po za tym bardzo dobra robota :D powodzenia
komentarz 11 kwietnia 2018 przez chmod96 Obywatel (1,380 p.)
sam kolor jest okej, jednak jego barwa...
+2 głosów
odpowiedź 11 kwietnia 2018 przez ScriptyChris Mędrzec (190,190 p.)

Co nieco o kodzie JS.

  • dosyć powtarzalna kwestia, ale zmienne deklaruj słówkiem const, chyba że będziesz więcej niż raz przypisywał im inną wartość (na to const nie pozwala i wtedy używaj let)
  • let $ = require('jquery');
    window.jQuery = $;

    Po co zapisujesz $ jako globalna zmienna jQuery, skoro później i tak korzystasz z $?

  • if (scrollTop > 5){ 
        $('#navbar').addClass('-sticky'); 
    } else{ 
        $('#navbar').removeClass('-sticky'); 
    }

    Elementy DOM pobieraj raz i przypisuj do zmiennych, chyba że będziesz je usuwać z DOM. W powyższym przypadku #navbar możesz pobrać wcześniej i odnieść się tutaj do jego referencji

  • let target = $(element.hash);

    Gdy do zmiennej przypisujesz obiekt jQuery, to dopisz na początku zmiennej znak $ - będzie to czytelna informacja, że to nie jest natywny obiekt JS

  •         $('#'+target).attr('tabindex',-1);
            $('#'+target).focus();

    Tutaj, albo przypisujesz do zmiennej $('#'+target) - swoją drogą przydała by się spacja, a najlepiej skorzystanie z template string - albo korzystasz z cechy metod jQuery (nie wiem czy wszystkich), że jeśli nie zwracają Ci konkretnej wartości, to zwracają this obiektu jQuery, na którym sobie działasz. Czyli zamieniasz powyższe na (zakładając, że attr() zwróci this obiektu DOM):

    $(`#${ target }`).attr('tabindex',-1).focus();
    
komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)

O, dzięki za analizę i wskazówki!

Po co zapisujesz $ jako globalna zmienna jQuery, skoro później i tak korzystasz z $?

lightbox się pluł i było to rozwiązanie jakie znalazłem w internecie, może jest lepsze, chociaż chwile szukałem

Dzięki raz jeszcze za komentarz :)

komentarz 11 kwietnia 2018 przez ScriptyChris Mędrzec (190,190 p.)

lightbox się pluł

O co konkretnie? Pokaż proszę komunikat błędu.

komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)
jQuery is not defined
komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)

a rozwiązanie wziąłem stąd (pierwsza odpowiedź)

https://github.com/fronteed/icheck/issues/322

komentarz 11 kwietnia 2018 przez ScriptyChris Mędrzec (190,190 p.)
Spróbuj tego: https://github.com/fronteed/icheck/issues/322#issuecomment-239660359

Wtedy nie będzie we właściwym kodzie takich "hacków", bo udostępnienie referencji do jQuery załatwi Webpack.
+1 głos
odpowiedź 11 kwietnia 2018 przez Benek Szeryf (90,690 p.)
U mnie się pojawia poziomy suwak i jak go przesunę, to po prawej stronie jest sporych rozmiarów biały margines.
komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)
o, a mógłbyś podać więcej szczegółów:

- jaka przeglądarka?

- jaka rozdzielczość?
komentarz 11 kwietnia 2018 przez Benek Szeryf (90,690 p.)
edycja 11 kwietnia 2018 przez Benek

Wrzuć swoją stronę tutaj: http://whatismyscreenresolution.net/multi-screen-test i dostaniesz ten sam efekt.

komentarz 11 kwietnia 2018 przez gremlin Dyskutant (7,600 p.)
No właśnie nie do końca, przetestowałem na połowie tych urządzeń co tam były do wyboru i na żadnym nie pojawia się poziomy suwak, to musi być związane z Twoją przeglądarką (a przynajmniej tak mi się wydaje).

Podobne pytania

0 głosów
1 odpowiedź 229 wizyt
pytanie zadane 14 lipca 2017 w Nasze projekty przez gremlin Dyskutant (7,600 p.)
0 głosów
3 odpowiedzi 365 wizyt
pytanie zadane 18 grudnia 2017 w Nasze projekty przez adim1248 Początkujący (450 p.)
+2 głosów
1 odpowiedź 300 wizyt
pytanie zadane 18 września 2017 w Nasze projekty przez Pecet48 Użytkownik (500 p.)

92,453 zapytań

141,262 odpowiedzi

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

...